diff --git a/.env.example b/.env.example
index 6642c2c52c..4ee43536d7 100644
--- a/.env.example
+++ b/.env.example
@@ -40,4 +40,9 @@ NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING=
 NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING=
 
 # Redefine
-NEXT_PUBLIC_REDEFINE_API=
\ No newline at end of file
+NEXT_PUBLIC_REDEFINE_API=
+
+# Social Login
+NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING=
+NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION=
+
diff --git a/.github/workflows/build/action.yml b/.github/workflows/build/action.yml
index fd57aada4f..8a8c32e0c1 100644
--- a/.github/workflows/build/action.yml
+++ b/.github/workflows/build/action.yml
@@ -43,6 +43,8 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
         NEXT_PUBLIC_REDEFINE_API: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_REDEFINE_API }}
+        NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING }}
+        NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION }}
         NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_OPTIONS_PRODUCTION }}
         NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING }}
         NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION }}
diff --git a/cypress/e2e/pages/create_wallet.pages.js b/cypress/e2e/pages/create_wallet.pages.js
index 706f7e4da1..ba4f9f8599 100644
--- a/cypress/e2e/pages/create_wallet.pages.js
+++ b/cypress/e2e/pages/create_wallet.pages.js
@@ -1,5 +1,7 @@
 import * as constants from '../../support/constants'
 
+const welcomeLoginScreen = '[data-testid="welcome-login"]'
+const expandMoreIcon = 'svg[data-testid="ExpandMoreIcon"]'
 const nameInput = 'input[name="name"]'
 const selectNetworkBtn = '[data-cy="create-safe-select-network"]'
 const ownerInput = 'input[name^="owners"][name$="name"]'
@@ -7,16 +9,17 @@ const ownerAddress = 'input[name^="owners"][name$="address"]'
 const thresholdInput = 'input[name="threshold"]'
 export const removeOwnerBtn = 'button[aria-label="Remove owner"]'
 const connectingContainer = 'div[class*="connecting-container"]'
-const createNewSafeBtn = 'span[data-track="create-safe: Open stepper"]'
+const createNewSafeBtn = 'span[data-track="create-safe: Continue to creation"]'
+const connectWalletBtn = 'Connect wallet'
 
 const changeNetworkWarningStr = 'Change your wallet network'
 const safeAccountSetupStr = 'Safe Account setup'
-const policy1_1 = '1/1 policy'
+const policy1_2 = '1/1 policy'
 export const walletName = 'test1-sepolia-safe'
-export const defaltSepoliaPlaceholder = 'sepolia-safe'
+export const defaltSepoliaPlaceholder = 'Sepolia Safe'
 
 export function verifyPolicy1_1() {
-  cy.contains(policy1_1).should('exist')
+  cy.contains(policy1_2).should('exist')
   // TOD: Need data-cy for containers
 }
 
@@ -49,13 +52,23 @@ export function clickOnCreateNewSafeBtn() {
   cy.get(createNewSafeBtn).click().wait(1000)
 }
 
+export function clickOnConnectWalletBtn() {
+  cy.get(welcomeLoginScreen).within(() => {
+    cy.get('button').contains(connectWalletBtn).should('be.visible').should('be.enabled').click().wait(1000)
+  })
+}
+
 export function typeWalletName(name) {
   cy.get(nameInput).type(name).should('have.value', name)
 }
 
+export function clearWalletName() {
+  cy.get(nameInput).clear()
+}
+
 export function selectNetwork(network, regex = false) {
   cy.wait(1000)
-  cy.get(selectNetworkBtn).should('be.visible').click()
+  cy.get(expandMoreIcon).eq(1).parents('div').eq(1).click()
   cy.wait(1000)
   cy.get('li').contains(network).click()
   cy.get('body').click()
@@ -91,7 +104,7 @@ export function typeOwnerAddress(address, index, clearOnly = false) {
 }
 
 export function clickOnAddNewOwnerBtn() {
-  cy.contains('button', 'Add new owner').click()
+  cy.contains('button', 'Add new owner').click().wait(700)
 }
 
 export function addNewOwner(name, address, index) {
diff --git a/cypress/e2e/pages/import_export.pages.js b/cypress/e2e/pages/import_export.pages.js
index e5b49348ba..d2bf9b050b 100644
--- a/cypress/e2e/pages/import_export.pages.js
+++ b/cypress/e2e/pages/import_export.pages.js
@@ -25,7 +25,7 @@ export function clickOnImportBtn() {
 }
 
 export function clickOnImportBtnDataImportModal() {
-  cy.contains(dataImportModalStr).parent().contains('button', 'Import').click()
+  cy.contains('button', 'Import').click()
 }
 
 export function uploadFile(filePath) {
@@ -44,6 +44,10 @@ export function clickOnImportedSafe(safe) {
   cy.contains(safe).click()
 }
 
+export function clickOnOpenSafeListSidebar() {
+  cy.contains('My Safe Accounts').click()
+}
+
 export function clickOnClosePushNotificationsBanner() {
   cy.waitForSelector(() => {
     return cy.get('h6').contains(enablePushNotificationsStr).siblings('.MuiButtonBase-root').click({ force: true })
diff --git a/cypress/e2e/pages/load_safe.pages.js b/cypress/e2e/pages/load_safe.pages.js
index bc0fa83daa..488b343bc6 100644
--- a/cypress/e2e/pages/load_safe.pages.js
+++ b/cypress/e2e/pages/load_safe.pages.js
@@ -1,6 +1,6 @@
 import * as constants from '../../support/constants'
 
-const addExistingAccountBtnStr = 'Add existing Account'
+const addExistingAccountBtnStr = 'Add existing one'
 const contactStr = 'Name, address & network'
 const invalidAddressFormatErrorMsg = 'Invalid address format'
 
@@ -16,7 +16,7 @@ const ownersConfirmationsStr = 'Owners and confirmations'
 const transactionStr = 'Transactions'
 
 export function openLoadSafeForm() {
-  cy.contains('button', addExistingAccountBtnStr).click()
+  cy.contains('a', addExistingAccountBtnStr).click()
   cy.contains(contactStr)
 }
 
diff --git a/cypress/e2e/pages/owners.pages.js b/cypress/e2e/pages/owners.pages.js
index 51d0c658f6..6e2e30aef3 100644
--- a/cypress/e2e/pages/owners.pages.js
+++ b/cypress/e2e/pages/owners.pages.js
@@ -19,6 +19,7 @@ const thresholdDropdown = 'div[aria-haspopup="listbox"]'
 const thresholdOption = 'li[role="option"]'
 const existingOwnerAddressInput = (index) => `input[name="owners.${index}.address"]`
 const existingOwnerNameInput = (index) => `input[name="owners.${index}.name"]`
+const singleOwnerNameInput = 'input[name="name"]'
 
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
@@ -57,9 +58,9 @@ export function verifyExistingOwnerName(index, name) {
   cy.get(existingOwnerNameInput(index)).should('have.value', name)
 }
 
-export function typeExistingOwnerName(index, name) {
-  cy.get(existingOwnerNameInput(index)).clear().type(name)
-  main.verifyInputValue(existingOwnerNameInput(index), name)
+export function typeExistingOwnerName(name) {
+  cy.get(singleOwnerNameInput).clear().type(name)
+  main.verifyInputValue(singleOwnerNameInput, name)
 }
 
 export function verifyOwnerDeletionWindowDisplayed() {
diff --git a/cypress/e2e/smoke/create_safe_simple.cy.js b/cypress/e2e/smoke/create_safe_simple.cy.js
index 9dc90f4723..7f5a8690c3 100644
--- a/cypress/e2e/smoke/create_safe_simple.cy.js
+++ b/cypress/e2e/smoke/create_safe_simple.cy.js
@@ -1,29 +1,27 @@
 import * as constants from '../../support/constants'
 import * as main from '../../e2e/pages/main.page'
 import * as createwallet from '../pages/create_wallet.pages'
-
 import * as owner from '../pages/owners.pages'
 
 describe('Safe creation tests', () => {
   beforeEach(() => {
-    cy.visit(constants.createNewSafeSepoliaUrl)
+    cy.visit(constants.welcomeUrl + '?chain=sep')
     cy.clearLocalStorage()
     main.acceptCookies()
   })
 
   it('Verify a Wallet can be connected [C56101]', () => {
-    owner.waitForConnectionStatus()
-    cy.visit(constants.welcomeUrl)
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnWalletExpandMoreIcon()
     owner.clickOnDisconnectBtn()
-    createwallet.clickOnCreateNewSafeBtn()
-    owner.clickOnConnectBtn()
+    createwallet.clickOnConnectWalletBtn()
     createwallet.connectWallet()
   })
 
   it('Verify Next button is disabled until switching to network is done [C56102]', () => {
     owner.waitForConnectionStatus()
     createwallet.selectNetwork(constants.networks.ethereum)
+    createwallet.clickOnCreateNewSafeBtn()
     createwallet.checkNetworkChangeWarningMsg()
     createwallet.verifyNextBtnIsDisabled()
     createwallet.selectNetwork(constants.networks.sepolia)
@@ -32,43 +30,49 @@ describe('Safe creation tests', () => {
 
   it('Verify that a new Wallet has default name related to the selected network [C56099]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     createwallet.verifyDefaultWalletName(createwallet.defaltSepoliaPlaceholder)
   })
 
   it('Verify error message is displayed if wallet name input exceeds 50 characters [C56098]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     createwallet.typeWalletName(main.generateRandomString(51))
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.exceedChars)
+    createwallet.clearWalletName()
   })
 
   it('Verify there is no error message is displayed if wallet name input contains less than 50 characters [C56100]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     createwallet.typeWalletName(main.generateRandomString(50))
     owner.verifyValidWalletName(constants.addressBookErrrMsg.exceedChars)
   })
 
   it('Verify current connected account is shown as default owner [C56091]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     owner.verifyExistingOwnerAddress(0, constants.DEFAULT_OWNER_ADDRESS)
   })
 
   it('Verify error message is displayed if owner name input exceeds 50 characters [C56092]', () => {
     owner.waitForConnectionStatus()
-    owner.clickOnNextBtn()
-    owner.typeExistingOwnerName(0, main.generateRandomString(51))
+    createwallet.clickOnCreateNewSafeBtn()
+    owner.typeExistingOwnerName(main.generateRandomString(51))
     owner.verifyErrorMsgInvalidAddress(constants.addressBookErrrMsg.exceedChars)
   })
 
   it('Verify there is no error message is displayed if owner name input contains less than 50 characters [C56093]', () => {
     owner.waitForConnectionStatus()
-    owner.clickOnNextBtn()
-    owner.typeExistingOwnerName(0, main.generateRandomString(50))
+    createwallet.clickOnCreateNewSafeBtn()
+    owner.typeExistingOwnerName(main.generateRandomString(50))
     owner.verifyValidWalletName(constants.addressBookErrrMsg.exceedChars)
   })
 
   it('Verify Add and Remove Owner Row works as expected [C56094]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     createwallet.clickOnAddNewOwnerBtn()
     owner.verifyNumberOfOwners(2)
@@ -82,26 +86,34 @@ describe('Safe creation tests', () => {
 
   it('Verify Threshold Setup [C56096]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     createwallet.clickOnAddNewOwnerBtn()
-    owner.verifyNumberOfOwners(2)
     createwallet.clickOnAddNewOwnerBtn()
     owner.verifyNumberOfOwners(3)
-    owner.verifyThresholdLimit(1, 3)
+    createwallet.clickOnAddNewOwnerBtn()
+    owner.verifyNumberOfOwners(4)
+    owner.verifyThresholdLimit(1, 4)
     createwallet.updateThreshold(3)
     createwallet.removeOwner(1)
+    owner.verifyThresholdLimit(1, 3)
+    createwallet.removeOwner(1)
     owner.verifyThresholdLimit(1, 2)
+    createwallet.updateThreshold(1)
   })
 
   it('Verify data persistence [C56103]', () => {
     const ownerName = 'David'
     owner.waitForConnectionStatus()
-    createwallet.typeWalletName(createwallet.walletName)
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     createwallet.clickOnAddNewOwnerBtn()
     createwallet.typeOwnerName(ownerName, 1)
     createwallet.typeOwnerAddress(constants.SEPOLIA_OWNER_2, 1)
-    owner.verifyThresholdLimit(1, 2)
+    owner.clickOnBackBtn()
+    createwallet.clearWalletName()
+    createwallet.typeWalletName(createwallet.walletName)
+    owner.clickOnNextBtn()
     owner.clickOnNextBtn()
     createwallet.verifySafeNameInSummaryStep(createwallet.walletName)
     createwallet.verifyOwnerNameInSummaryStep(ownerName)
@@ -125,12 +137,14 @@ describe('Safe creation tests', () => {
 
   it('Verify tip is displayed on right side for threshold 1/1 [C56097]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     createwallet.verifyPolicy1_1()
   })
 
   it('Verify address input validation rules [C56095]', () => {
     owner.waitForConnectionStatus()
+    createwallet.clickOnCreateNewSafeBtn()
     owner.clickOnNextBtn()
     createwallet.clickOnAddNewOwnerBtn()
     createwallet.typeOwnerAddress(main.generateRandomString(10), 1)
diff --git a/cypress/e2e/smoke/import_export_data.cy.js b/cypress/e2e/smoke/import_export_data.cy.js
index 140b5d9dc1..2bcc125943 100644
--- a/cypress/e2e/smoke/import_export_data.cy.js
+++ b/cypress/e2e/smoke/import_export_data.cy.js
@@ -6,19 +6,19 @@ import * as constants from '../../support/constants'
 describe('Import Export Data tests', () => {
   before(() => {
     cy.clearLocalStorage()
-    cy.visit(constants.welcomeUrl)
+    cy.visit(constants.dataSettingsUrl)
     main.acceptCookies()
-    file.verifyImportBtnIsVisible()
   })
 
   it('Verify Safe can be accessed after test file upload [C56111]', () => {
     const filePath = '../fixtures/data_import.json'
     const safe = constants.SEPOLIA_CSV_ENTRY.name
 
-    file.clickOnImportBtn()
     file.uploadFile(filePath)
     file.verifyImportModalData()
     file.clickOnImportBtnDataImportModal()
+    cy.visit(constants.welcomeUrl)
+    file.clickOnOpenSafeListSidebar()
     file.clickOnImportedSafe(safe)
     file.clickOnClosePushNotificationsBanner()
   })
diff --git a/cypress/support/constants.js b/cypress/support/constants.js
index 6daeacfc92..e9dce33964 100644
--- a/cypress/support/constants.js
+++ b/cypress/support/constants.js
@@ -54,6 +54,7 @@ export const requestPermissionsUrl = '/request-permissions'
 export const getPermissionsUrl = '/get-permissions'
 export const appSettingsUrl = '/settings/safe-apps'
 export const setupUrl = '/settings/setup?safe='
+export const dataSettingsUrl = '/settings/data'
 export const invalidAppUrl = 'https://my-invalid-custom-app.com/manifest.json'
 export const validAppUrlJson = 'https://my-valid-custom-app.com/manifest.json'
 export const validAppUrl = 'https://my-valid-custom-app.com'
diff --git a/jest.config.cjs b/jest.config.cjs
index 2ba19a6f88..1b06adda63 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -8,13 +8,13 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
   moduleNameMapper: {
     // Handle module aliases (this will be automatically configured for you soon)
     '^@/(.*)$': '<rootDir>/src/$1',
     '^.+\\.(svg)$': '<rootDir>/mocks/svg.js',
     isows: '<rootDir>/node_modules/isows/_cjs/index.js',
   },
-  transformIgnorePatterns: ['node_modules/(?!isows/)'],
   testEnvironment: 'jest-environment-jsdom',
   testEnvironmentOptions: { url: 'http://localhost/balances?safe=rin:0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A' },
   globals: {
@@ -25,5 +25,5 @@ const customJestConfig = {
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
 module.exports = async () => ({
   ...(await createJestConfig(customJestConfig)()),
-  transformIgnorePatterns: ['node_modules/(?!(uint8arrays|multiformats)/)'],
+  transformIgnorePatterns: ['node_modules/(?!(uint8arrays|multiformats|@web3-onboard/common)/)'],
 })
diff --git a/next.config.mjs b/next.config.mjs
index 1470c8d524..07d1f2a35d 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -32,7 +32,7 @@ const nextConfig = {
     dirs: ['src'],
   },
   experimental: {
-    optimizePackageImports: ['@mui/material', '@mui/icons-material', 'lodash', 'date-fns']
+    optimizePackageImports: ['@mui/material', '@mui/icons-material', 'lodash', 'date-fns'],
   },
   webpack(config) {
     config.module.rules.push({
diff --git a/package.json b/package.json
index 9882a430e1..26ac24be3c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",
@@ -56,6 +56,7 @@
     "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.74.0",
     "@sentry/tracing": "^7.74.0",
+    "@tkey-mpc/common-types": "^8.2.2",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@walletconnect/utils": "^2.10.2",
     "@walletconnect/web3wallet": "^1.9.2",
@@ -66,7 +67,9 @@
     "@web3-onboard/ledger": "2.3.2",
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/walletconnect": "^2.4.7",
+    "@web3auth/mpc-core-kit": "^1.1.3",
     "blo": "^1.1.1",
+    "bn.js": "^5.2.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.2",
     "ethers": "5.7.2",
diff --git a/public/images/common/bar-chart.svg b/public/images/common/bar-chart.svg
new file mode 100644
index 0000000000..f6beb44899
--- /dev/null
+++ b/public/images/common/bar-chart.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 13.3337V10.667" stroke="#FF5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="illustration-very-light-stroke" d="M8 13.3337V6.66699" stroke="#DCDEE0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="illustration-very-light-stroke" d="M12 13.3337V2.66699" stroke="#DCDEE0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/common/check-filled.svg b/public/images/common/check-filled.svg
new file mode 100644
index 0000000000..284624fc19
--- /dev/null
+++ b/public/images/common/check-filled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM9.27482 10.6992L11.5334 12.8123L14.8096 9.45275C15.388 8.85965 16.3377 8.84772 16.9308 9.4261C17.5239 10.0045 17.5358 10.9541 16.9574 11.5472L12.6554 15.9587C12.0855 16.5432 11.1528 16.5646 10.5567 16.0068L7.22519 12.8898C6.62026 12.3238 6.58868 11.3746 7.15467 10.7697C7.72066 10.1648 8.66988 10.1332 9.27482 10.6992Z" fill="currentColor"/>
+</svg>
diff --git a/public/images/common/lock-small.svg b/public/images/common/lock-small.svg
new file mode 100644
index 0000000000..2620c043c8
--- /dev/null
+++ b/public/images/common/lock-small.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 14V13H12.001L12 14ZM11.999 13H4V8H12L11.999 13ZM8.001 3C9.655 3 11.001 4.329 11.001 5.964V6H5.001V5.964C5.001 4.329 6.347 3 8.001 3ZM13.001 6.279V5.964C13.001 3.227 10.758 1 8.001 1C5.244 1 3.001 3.227 3.001 5.964V6.277C2.406 6.625 2 7.263 2 8V13C2 14.103 2.897 15 4 15H12C13.103 15 14 14.103 14 13V8C14 7.264 13.596 6.626 13.001 6.279Z" fill="#FF8061"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00205 9.80962C9.00205 9.25562 8.55305 8.80762 8.00005 8.80762C7.44605 8.80762 6.99805 9.25562 6.99805 9.80962C6.99805 10.1046 7.13005 10.3636 7.33305 10.5456V11.4766C7.33305 11.8476 7.63305 12.1476 8.00305 12.1476C8.37305 12.1476 8.67405 11.8476 8.67405 11.4766V10.5416C8.87205 10.3586 9.00205 10.1016 9.00205 9.80962Z" fill="#FF8061"/>
+</svg>
diff --git a/public/images/common/lock-warning.svg b/public/images/common/lock-warning.svg
new file mode 100644
index 0000000000..6972e1bb15
--- /dev/null
+++ b/public/images/common/lock-warning.svg
@@ -0,0 +1,6 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60 30C60 46.5686 46.5686 60 30 60C13.4317 60 0 46.5686 0 30C0 13.4317 13.4317 0 30 0C46.5686 0 60 13.4317 60 30Z" fill="#FFF1EE"/>
+<path d="M32.4589 29.3916H27.5406C27.2718 29.3916 27.0518 29.6116 27.0518 29.8805V34.0654C27.0518 34.3343 27.2718 34.5543 27.5406 34.5543H27.8755C28.1444 34.5543 28.3644 34.7743 28.3644 35.0432V39.3625C28.3644 39.6314 28.5844 39.8514 28.8533 39.8514H31.1462C31.4151 39.8514 31.6351 39.6314 31.6351 39.3625V35.0432C31.6351 34.7743 31.8551 34.5543 32.124 34.5543H32.4589C32.7278 34.5543 32.9478 34.3343 32.9478 34.0654V29.8805C32.9478 29.6116 32.7278 29.3916 32.4589 29.3916Z" fill="#FF8061"/>
+<path d="M37.9174 16.5752L34.9767 13.6345C34.61 13.2678 34.1163 13.0625 33.598 13.0625H26.4016C25.8834 13.0625 25.3896 13.2678 25.0229 13.6345L22.0823 16.5752C21.7156 16.9418 21.5103 17.4356 21.5103 17.9538V22.5958H24.6831V18.9658C24.6831 18.6432 24.8103 18.3352 25.04 18.1054L26.5507 16.5947C26.778 16.3674 27.0885 16.2378 27.4111 16.2378H32.586C32.9087 16.2378 33.2167 16.3649 33.4465 16.5947L34.9571 18.1054C35.1845 18.3327 35.314 18.6432 35.314 18.9658V22.5958H38.4869V17.9538C38.4869 17.4356 38.2816 16.9418 37.9149 16.5752H37.9174Z" fill="#FF8061"/>
+<path d="M44.9429 42.9021V26.4021C44.9429 25.8618 44.5029 25.4243 43.9627 25.4243H42.87C42.3298 25.4267 41.8922 24.9916 41.8898 24.4514V23.283C41.8849 22.7452 41.4474 22.3076 40.9096 22.3076H19.0929C18.5527 22.3076 18.1151 22.7452 18.1151 23.2854V24.3805C18.1151 24.9183 17.68 25.3558 17.1422 25.3583L16.03 25.3632C15.4922 25.3632 15.0571 25.8032 15.0571 26.341V42.9192C15.0571 43.4594 15.4947 43.897 16.0349 43.897H17.1374C17.6776 43.897 18.1151 44.3345 18.1151 44.8747V45.9552C18.1151 46.4954 18.5527 46.933 19.0929 46.933H40.9047C41.4449 46.933 41.8825 46.4954 41.8825 45.9552V44.8601C41.8825 44.3223 42.3176 43.8847 42.8554 43.8823L43.9651 43.8774C44.5029 43.8774 44.938 43.4374 44.938 42.8996L44.9429 42.9021ZM40.6969 43.6598H19.3105C18.7702 43.6598 18.3327 43.2223 18.3327 42.6821L18.3278 26.561C18.3278 26.0207 18.7654 25.5832 19.3056 25.5832H40.692C41.2322 25.5832 41.6698 26.0207 41.6698 26.561L41.6747 42.6821C41.6747 43.2223 41.2371 43.6598 40.6969 43.6598Z" fill="#FF8061"/>
+</svg>
diff --git a/public/images/common/lock.svg b/public/images/common/lock.svg
new file mode 100644
index 0000000000..9535a642e0
--- /dev/null
+++ b/public/images/common/lock.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3337 7C18.4255 7 17.6893 7.73621 17.6893 8.64436V11.9999H14.334C13.4258 11.9999 12.6896 12.7361 12.6896 13.6443V16.9999H16.0452C16.9534 16.9999 17.6896 16.2637 17.6896 15.3556V12H47.6893V15.3556C47.6893 16.2637 48.4255 16.9999 49.3337 16.9999H52.689V46.9999H56.0447C56.9528 46.9999 57.689 46.2637 57.689 45.3555V18.6442C57.689 17.7361 56.9528 16.9999 56.0447 16.9999H52.6893V13.6443C52.6893 12.7361 51.9531 11.9999 51.0449 11.9999H47.6894V8.64436C47.6894 7.73621 46.9532 7 46.045 7H19.3337ZM47.6893 48.6444C47.6893 47.7363 48.4255 47.0001 49.3337 47.0001H52.6893V50.3557C52.6893 51.2639 51.9531 52.0001 51.0449 52.0001H47.6894V55.3556C47.6894 56.2638 46.9532 57 46.045 57H19.3337C18.4255 57 17.6893 56.2638 17.6893 55.3556V52.0001H14.334C13.4258 52.0001 12.6896 51.2639 12.6896 50.3557V47.0001H16.0452C16.9534 47.0001 17.6896 47.7363 17.6896 48.6444V52H47.6893V48.6444ZM9.33382 16.9999C8.42566 16.9999 7.68945 17.7361 7.68945 18.6442V45.3555C7.68945 46.2637 8.42566 46.9999 9.33382 46.9999H12.6895V16.9999H9.33382ZM36.8004 27.248C36.8004 28.9337 35.7858 30.3824 34.3339 31.0168V40.403C34.3339 40.857 33.9658 41.2252 33.5117 41.2252H31.8673C31.4133 41.2252 31.0452 40.857 31.0452 40.403V31.0168C29.5932 30.3825 28.5786 28.9337 28.5786 27.248C28.5786 24.9776 30.4191 23.1371 32.6895 23.1371C34.9599 23.1371 36.8004 24.9776 36.8004 27.248Z" fill="currentColor"/>
+</svg>
diff --git a/public/images/common/shield-off.svg b/public/images/common/shield-off.svg
new file mode 100644
index 0000000000..f36482d5ca
--- /dev/null
+++ b/public/images/common/shield-off.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_208_59781)">
+<path d="M13.1269 9.33301C13.2609 8.90114 13.3306 8.45186 13.3336 7.99967V3.33301L8.00022 1.33301L5.89355 2.11967" stroke="#FF5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.15366 3.15332L2.66699 3.33332V7.99999C2.66699 12 8.00033 14.6667 8.00033 14.6667C9.41168 13.9219 10.6801 12.9334 11.747 11.7467" stroke="#FF5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.666992 0.666016L15.3337 15.3327" stroke="#FF5F72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_208_59781">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/common/shield.svg b/public/images/common/shield.svg
new file mode 100644
index 0000000000..f7d12a900f
--- /dev/null
+++ b/public/images/common/shield.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.64068 14.9283C7.88008 15.0242 8.14729 15.0239 8.38649 14.9275C10.9317 13.9013 12.5636 12.4754 13.3881 10.841C13.547 10.5368 13.67 10.203 13.7634 9.84403C13.9493 9.12905 14.001 8.43373 13.9886 7.8064L13.9886 7.80579C13.9879 7.77281 13.9876 7.762 13.9876 7.76248V3.52C13.9876 2.94016 13.496 2.48187 12.9176 2.52246C12.5989 2.54482 12.4624 2.552 12.3036 2.552C10.7786 2.552 9.50952 1.96595 8.63889 1.2344C8.24399 0.902583 7.66151 0.925554 7.29397 1.28744L7.26815 1.30933C7.25527 1.3197 7.23587 1.33488 7.18595 1.37391L7.16362 1.39137C6.91062 1.56971 6.78242 1.65592 6.56856 1.77834C6.52367 1.80404 6.47879 1.82882 6.43386 1.85265C5.60226 2.28858 4.70112 2.552 3.68758 2.552C3.52938 2.552 3.39081 2.54472 3.07358 2.52246C2.49515 2.48187 2.00358 2.94016 2.00358 3.52V7.738C1.9447 8.53383 2.14425 9.98475 2.69665 10.9926C2.80489 11.2032 2.94397 11.4224 3.11221 11.6501C4.07443 13.0105 5.60511 14.1127 7.64068 14.9283ZM11.6134 9.91878L11.6051 9.9349C11.0449 11.0494 9.90136 12.0876 8.01151 12.9158C6.50396 12.2582 5.41 11.4354 4.73292 10.4784C4.61291 10.3156 4.53035 10.1855 4.46238 10.0537C4.11452 9.41836 3.96438 8.32672 4.00108 7.80866L4.00298 4.54572C5.24462 4.49606 6.35025 4.15461 7.36687 3.62169C7.43542 3.58533 7.49901 3.55023 7.56216 3.51407C7.7266 3.41994 7.8517 3.34288 7.99293 3.24846C9.055 3.96436 10.4037 4.48436 11.9876 4.54589V7.77C11.988 7.79632 11.9881 7.80714 11.9883 7.81796C11.9885 7.82552 11.9887 7.83307 11.989 7.84591C11.9981 8.30603 11.9586 8.83765 11.8277 9.34066C11.7699 9.56302 11.6978 9.75809 11.6134 9.91878Z" fill="#00B460"/>
+</svg>
diff --git a/public/images/logo-text.svg b/public/images/logo-text.svg
new file mode 100644
index 0000000000..b71ae734a4
--- /dev/null
+++ b/public/images/logo-text.svg
@@ -0,0 +1,9 @@
+<svg width="78" height="24" viewBox="0 0 78 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.8669 11.3279C38.0779 11.011 37.1142 10.7469 35.9759 10.535H35.9517C34.8458 10.34 34.0162 10.161 33.4632 9.998C32.9103 9.83594 32.4753 9.61631 32.158 9.33959C31.8406 9.06336 31.6824 8.68118 31.6824 8.19305C31.6824 7.47756 31.9509 6.93283 32.4874 6.55888C33.0244 6.18492 33.7317 5.9977 34.6097 5.9977C35.5695 5.9977 36.3455 6.24152 36.9396 6.72965C37.4727 7.16794 37.7992 7.72476 37.9192 8.39914C37.9429 8.53363 38.0566 8.6328 38.193 8.63425L40.8925 8.65457C41.0579 8.65602 41.1905 8.51379 41.174 8.34883C41.0836 7.4466 40.7861 6.62612 40.282 5.88789C39.7208 5.06693 38.9482 4.42835 37.9642 3.97264C36.9802 3.51741 35.8622 3.28955 34.6097 3.28955C33.4226 3.28955 32.3534 3.50918 31.4019 3.94845C30.4508 4.38771 29.7106 4.99726 29.1818 5.77807C28.6531 6.55888 28.3889 7.43692 28.3889 8.41269C28.3889 9.48617 28.6245 10.3483 29.0962 10.9984C29.5679 11.6491 30.1857 12.1411 30.95 12.4744C31.7144 12.8077 32.6331 13.0719 33.7065 13.2673L33.8285 13.2915C34.9663 13.5029 35.8168 13.6901 36.3779 13.8527C36.9391 14.0157 37.3818 14.2431 37.7073 14.5358C38.0324 14.8285 38.195 15.2271 38.195 15.7312C38.195 16.4472 37.9023 17.0078 37.3169 17.4142C36.7316 17.8211 35.9749 18.0243 35.048 18.0243C33.9417 18.0243 33.0476 17.7437 32.3646 17.1825C31.7429 16.6721 31.3772 16.0166 31.2674 15.2164C31.2485 15.0781 31.1334 14.9731 30.994 14.9712L28.298 14.9305C28.134 14.9281 28.0014 15.0665 28.014 15.23C28.0904 16.214 28.3981 17.1007 28.937 17.8902C29.5306 18.7605 30.3477 19.4436 31.3888 19.9395C32.4294 20.4359 33.6248 20.6835 34.975 20.6835C36.227 20.6835 37.3493 20.4562 38.3416 20.0005C39.3333 19.5452 40.1102 18.9149 40.6714 18.1099C41.2326 17.3049 41.5132 16.3983 41.5132 15.3896C41.5132 14.3161 41.2689 13.4502 40.7812 12.7913C40.2936 12.1324 39.655 11.6448 38.8664 11.3274L38.8669 11.3279Z" fill="currentColor"/>
+<path d="M55.4443 17.9028H55.023C54.7791 17.9028 54.5876 17.838 54.4497 17.7073C54.3113 17.5777 54.2421 17.3658 54.2421 17.0731V12.4134C54.2421 10.9336 53.7705 9.80737 52.8276 9.03479C51.8842 8.26269 50.7735 7.8689 49.0334 7.8689C47.3905 7.8689 46.1071 8.22592 45.0989 8.92497C44.1797 9.56258 43.6258 10.4358 43.4362 11.546C43.4066 11.7187 43.5373 11.8769 43.7119 11.8769H46.1912C46.3156 11.8769 46.4268 11.7952 46.4597 11.6752C46.5729 11.2645 46.8226 10.9292 47.2086 10.6694C47.6556 10.3685 48.1868 10.2181 48.8863 10.2181C50.2056 10.2181 51.1436 11.0313 51.1436 12.2427V12.6215C51.1436 12.7763 51.0183 12.9016 50.8635 12.9016H48.6178C46.7964 12.9016 45.4138 13.2596 44.4709 13.9751C43.5276 14.691 43.0559 15.7074 43.0559 17.0243C43.0559 18.1631 43.487 19.0576 44.349 19.7077C44.9958 20.1954 45.7689 20.4769 46.5647 20.6003C47.1728 20.6946 47.7973 20.729 48.4069 20.6313C49.0455 20.5292 49.5641 20.266 50.0832 19.8906C50.5495 19.5539 50.9385 19.1224 51.2936 18.596C51.4667 18.2985 51.921 18.418 51.921 18.762V19.1756C51.9205 19.9274 52.5296 20.5369 53.2814 20.5369H55.4443C55.5991 20.5369 55.7244 20.4116 55.7244 20.2568V18.1824C55.7244 18.0276 55.5991 17.9023 55.4443 17.9023V17.9028ZM51.1441 15.3901C51.1441 15.9919 51.0178 16.5163 50.7658 16.9633C50.2375 17.9009 49.2922 18.3904 48.2284 18.3904C47.6101 18.3904 47.1143 18.2443 46.7403 17.9517C46.3659 17.659 46.1791 17.2686 46.1791 16.7804C46.1791 16.228 46.3867 15.8008 46.8013 15.4999C47.2159 15.1995 47.8051 15.0485 48.5699 15.0485H50.864C51.0188 15.0485 51.1441 15.1738 51.1441 15.3286V15.3901Z" fill="currentColor"/>
+<path d="M64.4827 3.46802H61.2565C59.5546 3.46802 58.1749 4.84773 58.1749 6.54964V7.90371C58.1749 8.05852 58.0496 8.18382 57.8948 8.18382H56.0526C55.8978 8.18382 55.7725 8.30912 55.7725 8.46392V10.5625C55.7725 10.7173 55.8978 10.8426 56.0526 10.8426H57.8948C58.0496 10.8426 58.1749 10.9679 58.1749 11.1227V20.2573C58.1749 20.4121 58.3002 20.5374 58.455 20.5374H60.9686C61.1234 20.5374 61.2487 20.4121 61.2487 20.2573V11.1227C61.2487 10.9679 61.374 10.8426 61.5288 10.8426H64.4581C64.6129 10.8426 64.7382 10.7173 64.7382 10.5625V8.46392C64.7382 8.30912 64.6129 8.18382 64.4581 8.18382H61.5288C61.374 8.18382 61.2487 8.05852 61.2487 7.90371V6.68703C61.2487 6.37742 61.4998 6.12682 61.8089 6.12682H64.4823C64.6371 6.12682 64.7624 6.00153 64.7624 5.84672V3.74812C64.7624 3.59331 64.6371 3.46802 64.4823 3.46802H64.4827Z" fill="currentColor"/>
+<path d="M76.7975 10.7062C76.2527 9.79576 75.5082 9.09623 74.5653 8.6081C73.622 8.12046 72.5321 7.86938 71.2965 7.86938C70.0609 7.86938 68.9947 8.14078 68.0518 8.66906C67.1085 9.19782 66.3765 9.94573 65.8565 10.9133C65.336 11.8813 65.0757 13.0153 65.0757 14.3166C65.0757 15.6179 65.3442 16.7035 65.8807 17.6711C66.4177 18.6386 67.1859 19.3827 68.1858 19.9032C69.1858 20.4237 70.3609 20.684 71.7111 20.684C72.7517 20.684 73.6829 20.4929 74.5044 20.1107C75.3253 19.729 75.9881 19.2041 76.4922 18.5375C76.9237 17.9667 77.2183 17.3416 77.376 16.6629C77.4172 16.4868 77.2841 16.3175 77.1032 16.3175H74.5779C74.457 16.3175 74.351 16.3959 74.3123 16.5105C74.1343 17.0364 73.8203 17.4519 73.3699 17.7567C72.8654 18.0982 72.2394 18.269 71.4915 18.269C70.8732 18.269 70.3328 18.1389 69.8694 17.8786C69.4059 17.6188 69.0402 17.2526 68.7717 16.7809C68.6657 16.5947 68.5792 16.3978 68.51 16.1951C68.436 15.9774 68.3827 15.7529 68.346 15.5255C68.3334 15.4462 68.3218 15.3659 68.3121 15.2856C68.2932 15.1201 68.4243 14.9755 68.5908 14.9755H77.2991C77.4404 14.9755 77.5613 14.871 77.5773 14.7302C77.5894 14.6272 77.5976 14.5222 77.602 14.4143C77.6102 14.2194 77.6141 14.0404 77.6141 13.8778C77.6141 12.6747 77.3417 11.6176 76.797 10.7067L76.7975 10.7062ZM74.1807 12.8527H68.7267C68.5477 12.8527 68.4127 12.6868 68.4524 12.5121C68.5395 12.1295 68.6904 11.7841 68.9052 11.4744C69.1814 11.0763 69.5394 10.771 69.9787 10.5596C70.418 10.3482 70.8974 10.2423 71.4179 10.2423C72.2636 10.2423 72.9631 10.4701 73.516 10.9254C73.9906 11.3163 74.3031 11.8445 74.4546 12.5107C74.4942 12.6858 74.3602 12.8527 74.1807 12.8527Z" fill="currentColor"/>
+<path d="M21.7425 11.9983H19.3517C18.6377 11.9983 18.0591 12.5769 18.0591 13.2909V16.761C18.0591 17.4751 17.4805 18.0537 16.7665 18.0537H7.25504C6.54099 18.0537 5.9624 18.6322 5.9624 19.3463V21.7371C5.9624 22.4511 6.54099 23.0297 7.25504 23.0297H17.317C18.031 23.0297 18.6014 22.4511 18.6014 21.7371V19.8189C18.6014 19.1049 19.18 18.5984 19.894 18.5984H21.742C22.4561 18.5984 23.0347 18.0198 23.0347 17.3057V13.2759C23.0347 12.5619 22.4561 11.9983 21.742 11.9983H21.7425Z" fill="currentColor"/>
+<path d="M5.96191 7.24869C5.96191 6.53464 6.5405 5.95605 7.25455 5.95605H16.7602C17.4742 5.95605 18.0528 5.37746 18.0528 4.66341V2.27262C18.0528 1.55857 17.4742 0.97998 16.7602 0.97998H6.70353C5.98948 0.97998 5.41089 1.55857 5.41089 2.27262V4.11482C5.41089 4.82886 4.8323 5.40745 4.11826 5.40745H2.27848C1.56443 5.40745 0.98584 5.98604 0.98584 6.70009V10.7343C0.98584 11.4483 1.56685 11.9979 2.2809 11.9979H4.67169C5.38574 11.9979 5.96433 11.4193 5.96433 10.7052L5.96191 7.24917V7.24869Z" fill="currentColor"/>
+<path d="M10.8851 9.48511H13.1815C13.9299 9.48511 14.5371 10.0927 14.5371 10.8406V13.1371C14.5371 13.8855 13.9294 14.4926 13.1815 14.4926H10.8851C10.1367 14.4926 9.52954 13.885 9.52954 13.1371V10.8406C9.52954 10.0922 10.1372 9.48511 10.8851 9.48511Z" fill="currentColor"/>
+</svg>
diff --git a/public/images/welcome/logo-google.svg b/public/images/welcome/logo-google.svg
new file mode 100644
index 0000000000..65781d4881
--- /dev/null
+++ b/public/images/welcome/logo-google.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4222 9.20443C18.4222 8.56625 18.365 7.95262 18.2586 7.36353H9.78223V10.8449H14.6259C14.4172 11.9699 13.7831 12.9231 12.83 13.5613V15.8194H15.7386C17.4404 14.2526 18.4222 11.9453 18.4222 9.20443Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.78199 18C12.212 18 14.2493 17.1941 15.7383 15.8195L12.8297 13.5613C12.0238 14.1013 10.9929 14.4204 9.78199 14.4204C7.43789 14.4204 5.4538 12.8372 4.74608 10.71H1.73926V13.0418C3.22017 15.9831 6.2638 18 9.78199 18Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.74632 10.7101C4.56632 10.1701 4.46404 9.59325 4.46404 9.00007C4.46404 8.40689 4.56632 7.83007 4.74632 7.29007V4.95825H1.7395C1.12995 6.17325 0.782227 7.5478 0.782227 9.00007C0.782227 10.4523 1.12995 11.8269 1.7395 13.0419L4.74632 10.7101Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.78199 3.57955C11.1033 3.57955 12.2897 4.03364 13.2224 4.92545L15.8038 2.34409C14.2452 0.891818 12.2079 0 9.78199 0C6.2638 0 3.22017 2.01682 1.73926 4.95818L4.74608 7.29C5.4538 5.16273 7.43789 3.57955 9.78199 3.57955Z" fill="#EA4335"/>
+</svg>
diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
index 161e9e1bb2..c28d607e09 100644
--- a/src/components/common/ConnectWallet/AccountCenter.tsx
+++ b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -1,48 +1,21 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover, Typography } from '@mui/material'
+import { Box, ButtonBase, Paper, Popover } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
-import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import useOnboard, { switchWallet } from '@/hooks/wallets/useOnboard'
-import { useAppSelector } from '@/store'
-import { selectChainById } from '@/store/chainsSlice'
-import Identicon from '@/components/common/Identicon'
-import ChainSwitcher from '../ChainSwitcher'
-import useAddressBook from '@/hooks/useAddressBook'
 import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
-import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
+import WalletOverview from '../WalletOverview'
+import WalletInfo from '@/components/common/WalletInfo'
 
-const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
+export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-  const onboard = useOnboard()
-  const chainInfo = useAppSelector((state) => selectChainById(state, wallet.chainId))
-  const addressBook = useAddressBook()
-  const prefix = chainInfo?.shortName
 
-  const handleSwitchWallet = () => {
-    if (onboard) {
-      handleClose()
-      switchWallet(onboard)
-    }
-  }
-
-  const handleDisconnect = () => {
-    if (!wallet) return
-
-    onboard?.disconnectWallet({
-      label: wallet.label,
-    })
-
-    handleClose()
-  }
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+  const openWalletInfo = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }
 
-  const handleClose = () => {
+  const closeWalletInfo = () => {
     setAnchorEl(null)
   }
 
@@ -51,9 +24,15 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
 
   return (
     <>
-      <ButtonBase onClick={handleClick} aria-describedby={id} disableRipple sx={{ alignSelf: 'stretch' }}>
+      <ButtonBase
+        onClick={openWalletInfo}
+        aria-describedby={id}
+        disableRipple
+        sx={{ alignSelf: 'stretch' }}
+        data-testid="open-account-center"
+      >
         <Box className={css.buttonContainer}>
-          <WalletInfo wallet={wallet} />
+          <WalletOverview wallet={wallet} />
 
           <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
@@ -65,7 +44,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         id={id}
         open={open}
         anchorEl={anchorEl}
-        onClose={handleClose}
+        onClose={closeWalletInfo}
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'center',
@@ -81,43 +60,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         }}
       >
         <Paper className={css.popoverContainer}>
-          <Identicon address={wallet.address} />
-
-          <Typography variant="h5" className={css.addressName}>
-            {addressBook[wallet.address] || wallet.ens}
-          </Typography>
-
-          <Box bgcolor="border.background" px={2} py={1} fontSize={14}>
-            <EthHashInfo
-              address={wallet.address}
-              showAvatar={false}
-              showName={false}
-              hasExplorer
-              showCopyButton
-              prefix={prefix}
-            />
-          </Box>
-
-          <Box className={css.rowContainer}>
-            <Box className={css.row}>
-              <Typography variant="caption">Wallet</Typography>
-              <Typography variant="body2">{wallet.label}</Typography>
-            </Box>
-            <Box className={css.row}>
-              <Typography variant="caption">Connected network</Typography>
-              <Typography variant="body2">{chainInfo?.chainName || UNKNOWN_CHAIN_NAME}</Typography>
-            </Box>
-          </Box>
-
-          <ChainSwitcher fullWidth />
-
-          <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
-            Switch wallet
-          </Button>
-
-          <Button onClick={handleDisconnect} variant="danger" size="small" fullWidth disableElevation>
-            Disconnect
-          </Button>
+          <WalletInfo wallet={wallet} handleClose={closeWalletInfo} />
         </Paper>
       </Popover>
     </>
diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx
new file mode 100644
index 0000000000..1e04b377d2
--- /dev/null
+++ b/src/components/common/ConnectWallet/ConnectionCenter.tsx
@@ -0,0 +1,79 @@
+import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
+import madProps from '@/utils/mad-props'
+import { Popover, ButtonBase, Typography, Paper, Box } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+import classnames from 'classnames'
+import { useState, type MouseEvent, type ReactElement } from 'react'
+
+import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
+import WalletDetails from '@/components/common/ConnectWallet/WalletDetails'
+
+import css from '@/components/common/ConnectWallet/styles.module.css'
+
+export const ConnectionCenter = ({ isSocialLoginEnabled }: { isSocialLoginEnabled: boolean }): ReactElement => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+  const open = !!anchorEl
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const ExpandIcon = open ? ExpandLessIcon : ExpandMoreIcon
+
+  if (!isSocialLoginEnabled) {
+    return (
+      <Box className={css.buttonContainer}>
+        <ConnectWalletButton />
+      </Box>
+    )
+  }
+
+  return (
+    <>
+      <ButtonBase disableRipple onClick={handleClick} className={css.buttonContainer}>
+        <KeyholeIcon />
+
+        <Typography variant="caption" className={css.notConnected}>
+          <b>Not connected</b>
+          <Typography variant="inherit" sx={{ color: ({ palette }) => palette.error.main }}>
+            Connect wallet
+          </Typography>
+        </Typography>
+
+        <ExpandIcon color="border" />
+      </ButtonBase>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        sx={{ mt: 1 }}
+      >
+        <Paper className={classnames(css.popoverContainer, css.largeGap)}>
+          <WalletDetails onConnect={handleClose} />
+        </Paper>
+      </Popover>
+    </>
+  )
+}
+
+const useIsSocialLoginEnabled = () => useHasFeature(FEATURES.SOCIAL_LOGIN)
+
+export default madProps(ConnectionCenter, {
+  isSocialLoginEnabled: useIsSocialLoginEnabled,
+})
diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
new file mode 100644
index 0000000000..5f0442f50a
--- /dev/null
+++ b/src/components/common/ConnectWallet/WalletDetails.tsx
@@ -0,0 +1,30 @@
+import { Box, Divider, SvgIcon, Typography } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import LockIcon from '@/public/images/common/lock.svg'
+import SocialSigner from '@/components/common/SocialSigner'
+import WalletLogin from '@/components/welcome/WelcomeLogin/WalletLogin'
+
+const WalletDetails = ({ onConnect }: { onConnect: () => void }): ReactElement => {
+  return (
+    <>
+      <Box my={1}>
+        <SvgIcon inheritViewBox sx={{ width: 64, height: 64, display: 'block' }}>
+          <LockIcon />
+        </SvgIcon>
+      </Box>
+
+      <WalletLogin onLogin={onConnect} />
+
+      <Divider sx={{ width: '100%' }}>
+        <Typography color="text.secondary" fontWeight={700} variant="overline">
+          or
+        </Typography>
+      </Divider>
+
+      <SocialSigner onRequirePassword={onConnect} />
+    </>
+  )
+}
+
+export default WalletDetails
diff --git a/src/components/common/ConnectWallet/__tests__/AccountCenter.test.tsx b/src/components/common/ConnectWallet/__tests__/AccountCenter.test.tsx
new file mode 100644
index 0000000000..382b7acb1d
--- /dev/null
+++ b/src/components/common/ConnectWallet/__tests__/AccountCenter.test.tsx
@@ -0,0 +1,35 @@
+import { render } from '@/tests/test-utils'
+import { AccountCenter } from '@/components/common/ConnectWallet/AccountCenter'
+import { type EIP1193Provider } from '@web3-onboard/core'
+import { act, waitFor } from '@testing-library/react'
+
+const mockWallet = {
+  address: '0x1234567890123456789012345678901234567890',
+  chainId: '5',
+  label: '',
+  provider: null as unknown as EIP1193Provider,
+}
+
+describe('AccountCenter', () => {
+  it('should open and close the account center on click', async () => {
+    const { getByText, getByTestId } = render(<AccountCenter wallet={mockWallet} />)
+
+    const openButton = getByTestId('open-account-center')
+
+    act(() => {
+      openButton.click()
+    })
+
+    const disconnectButton = getByText('Disconnect')
+
+    expect(disconnectButton).toBeInTheDocument()
+
+    act(() => {
+      disconnectButton.click()
+    })
+
+    await waitFor(() => {
+      expect(disconnectButton).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx b/src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx
new file mode 100644
index 0000000000..5ca16f4512
--- /dev/null
+++ b/src/components/common/ConnectWallet/__tests__/ConnectionCenter.test.tsx
@@ -0,0 +1,18 @@
+import { ConnectionCenter } from '@/components/common/ConnectWallet/ConnectionCenter'
+import { render } from '@/tests/test-utils'
+
+describe('ConnectionCenter', () => {
+  it('displays a Connect wallet button if the social login feature is enabled', () => {
+    const { getByText, queryByText } = render(<ConnectionCenter isSocialLoginEnabled={true} />)
+
+    expect(getByText('Connect wallet')).toBeInTheDocument()
+    expect(queryByText('Connect')).not.toBeInTheDocument()
+  })
+
+  it('displays the ConnectWalletButton if the social login feature is disabled', () => {
+    const { getByText, queryByText } = render(<ConnectionCenter isSocialLoginEnabled={false} />)
+
+    expect(queryByText('Connect wallet')).not.toBeInTheDocument()
+    expect(getByText('Connect')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/common/ConnectWallet/index.tsx b/src/components/common/ConnectWallet/index.tsx
index aaf6812b1a..45a9f33a9f 100644
--- a/src/components/common/ConnectWallet/index.tsx
+++ b/src/components/common/ConnectWallet/index.tsx
@@ -1,13 +1,12 @@
 import type { ReactElement } from 'react'
 import useWallet from '@/hooks/wallets/useWallet'
 import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
-import ConnectWalletButton from './ConnectWalletButton'
-import css from './styles.module.css'
+import ConnectionCenter from './ConnectionCenter'
 
 const ConnectWallet = (): ReactElement => {
   const wallet = useWallet()
 
-  return <div className={css.container}>{wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />}</div>
+  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectionCenter />
 }
 
 export default ConnectWallet
diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
index 24057834f2..b41bbc8399 100644
--- a/src/components/common/ConnectWallet/styles.module.css
+++ b/src/components/common/ConnectWallet/styles.module.css
@@ -1,5 +1,6 @@
-.container {
-  padding: 0 var(--space-2);
+.connectedContainer {
+  display: flex;
+  align-items: center;
 }
 
 .buttonContainer {
@@ -7,18 +8,23 @@
   align-items: center;
   text-align: left;
   gap: var(--space-1);
+  padding: 0 var(--space-2);
 }
 
 .popoverContainer {
   padding: var(--space-2);
-  width: 250px;
+  width: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-1);
   border: 1px solid var(--color-border-light);
 }
 
+.largeGap {
+  gap: var(--space-2);
+}
+
 .addressName {
   text-align: center;
   overflow: hidden;
@@ -27,6 +33,18 @@
   width: 100%;
 }
 
+.profileImg {
+  border-radius: var(--space-2);
+  width: 32px;
+  height: 32px;
+}
+
+.profileData {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .rowContainer {
   align-self: stretch;
   margin-left: calc(var(--space-2) * -1);
@@ -45,3 +63,29 @@
 .row:last-of-type {
   border-bottom: 1px solid var(--color-border-light);
 }
+
+.pairingDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.loginButton {
+  min-height: 42px;
+}
+
+.loginError {
+  width: 100%;
+  margin: 0;
+}
+
+@media (max-width: 599.95px) {
+  .socialLoginInfo > div > div {
+    display: none;
+  }
+
+  .notConnected {
+    display: none;
+  }
+}
diff --git a/src/components/common/ConnectWallet/useConnectWallet.ts b/src/components/common/ConnectWallet/useConnectWallet.ts
index 9dc10e7930..b3f832229e 100644
--- a/src/components/common/ConnectWallet/useConnectWallet.ts
+++ b/src/components/common/ConnectWallet/useConnectWallet.ts
@@ -1,19 +1,17 @@
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 import useOnboard, { connectWallet } from '@/hooks/wallets/useOnboard'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
 
-const useConnectWallet = (): (() => void) => {
+const useConnectWallet = () => {
   const onboard = useOnboard()
 
-  return useMemo(() => {
+  return useCallback(() => {
     if (!onboard) {
-      return () => {}
+      return Promise.resolve(undefined)
     }
 
-    return () => {
-      trackEvent(OVERVIEW_EVENTS.OPEN_ONBOARD)
-      connectWallet(onboard)
-    }
+    trackEvent(OVERVIEW_EVENTS.OPEN_ONBOARD)
+    return connectWallet(onboard)
   }, [onboard])
 }
 
diff --git a/src/components/common/ErrorBoundary/index.tsx b/src/components/common/ErrorBoundary/index.tsx
index e277db308a..f25c1bbcfa 100644
--- a/src/components/common/ErrorBoundary/index.tsx
+++ b/src/components/common/ErrorBoundary/index.tsx
@@ -33,7 +33,7 @@ const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
             <Typography color="error">{componentStack}</Typography>
           </>
         )}
-        <Link href={AppRoutes.welcome} color="primary" mt={2}>
+        <Link href={AppRoutes.welcome.index} color="primary" mt={2}>
           Go home
         </Link>
       </div>
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index 1fbbd76d89..34041dbdfb 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -71,7 +71,7 @@ const SrcEthHashInfo = ({
 
       <Box overflow="hidden">
         {name && (
-          <Box sx={{ fontSize: 'body2' }} textOverflow="ellipsis" overflow="hidden" title={name}>
+          <Box textOverflow="ellipsis" overflow="hidden" title={name}>
             {name}
           </Box>
         )}
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index afd19922e0..545b1f43aa 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -11,7 +11,7 @@ import MUILink from '@mui/material/Link'
 import { IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
 
 const footerPages = [
-  AppRoutes.welcome,
+  AppRoutes.welcome.index,
   AppRoutes.settings.index,
   AppRoutes.imprint,
   AppRoutes.privacy,
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index c18ebcd039..6919ca1526 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -34,7 +34,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const enableWc = !!chain && hasFeature(chain, FEATURES.NATIVE_WALLETCONNECT)
 
   // Logo link: if on Dashboard, link to Welcome, otherwise to the root (which redirects to either Dashboard or Welcome)
-  const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome : AppRoutes.index
+  const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome.index : AppRoutes.index
 
   const handleMenuToggle = () => {
     if (onMenuToggle) {
diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
index efe261b122..5e3ac1e676 100644
--- a/src/components/common/NetworkSelector/index.tsx
+++ b/src/components/common/NetworkSelector/index.tsx
@@ -1,20 +1,34 @@
 import Link from 'next/link'
 import type { SelectChangeEvent } from '@mui/material'
-import { MenuItem, Select, Skeleton } from '@mui/material'
+import { MenuItem, Select, Skeleton, Tooltip } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import useChains from '@/hooks/useChains'
 import { useRouter } from 'next/router'
 import ChainIndicator from '../ChainIndicator'
 import css from './styles.module.css'
 import { useChainId } from '@/hooks/useChainId'
-import type { ReactElement } from 'react'
+import { type ReactElement, forwardRef } from 'react'
 import { useCallback } from 'react'
 import { AppRoutes } from '@/config/routes'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
+import useWallet from '@/hooks/wallets/useWallet'
+import { isSocialWalletEnabled } from '@/hooks/wallets/wallets'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 
-const keepPathRoutes = [AppRoutes.welcome, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
+const keepPathRoutes = [AppRoutes.welcome.index, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
+
+const MenuWithTooltip = forwardRef<HTMLUListElement>(function MenuWithTooltip(props: any, ref) {
+  return (
+    <Tooltip title="More network support coming soon" arrow placement="left">
+      <ul ref={ref} {...props}>
+        {props.children}
+      </ul>
+    </Tooltip>
+  )
+})
 
 const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement => {
+  const wallet = useWallet()
   const { configs } = useChains()
   const chainId = useChainId()
   const router = useRouter()
@@ -53,6 +67,8 @@ const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement =>
     }
   }
 
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
   return configs.length ? (
     <Select
       value={chainId}
@@ -62,6 +78,8 @@ const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement =>
       variant="standard"
       IconComponent={ExpandMoreIcon}
       MenuProps={{
+        transitionDuration: 0,
+        MenuListProps: { component: isSocialLogin ? MenuWithTooltip : undefined },
         sx: {
           '& .MuiPaper-root': {
             overflow: 'auto',
@@ -79,8 +97,8 @@ const NetworkSelector = (props: { onChainSelect?: () => void }): ReactElement =>
     >
       {configs.map((chain) => {
         return (
-          <MenuItem key={chain.chainId} value={chain.chainId}>
-            <Link href={getNetworkLink(chain.shortName)} passHref onClick={props.onChainSelect}>
+          <MenuItem key={chain.chainId} value={chain.chainId} disabled={isSocialLogin && !isSocialWalletEnabled(chain)}>
+            <Link href={getNetworkLink(chain.shortName)} onClick={props.onChainSelect} passHref>
               <ChainIndicator chainId={chain.chainId} inline />
             </Link>
           </MenuItem>
diff --git a/src/components/common/NetworkSelector/styles.module.css b/src/components/common/NetworkSelector/styles.module.css
index a24929387c..4078402a66 100644
--- a/src/components/common/NetworkSelector/styles.module.css
+++ b/src/components/common/NetworkSelector/styles.module.css
@@ -24,6 +24,10 @@
   margin-right: var(--space-2);
 }
 
+.select :global .Mui-disabled {
+  pointer-events: none;
+}
+
 .newChip {
   font-weight: bold;
   letter-spacing: -0.1px;
diff --git a/src/components/common/PageHeader/styles.module.css b/src/components/common/PageHeader/styles.module.css
index e4f79953a2..8e650b616d 100644
--- a/src/components/common/PageHeader/styles.module.css
+++ b/src/components/common/PageHeader/styles.module.css
@@ -4,7 +4,7 @@
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-background-main);
-  z-index: 1;
+  z-index: 2;
   width: 100%;
   position: sticky !important;
   top: calc(var(--header-height) - 76px);
diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx
index 223800c653..317150384b 100644
--- a/src/components/common/PageLayout/index.tsx
+++ b/src/components/common/PageLayout/index.tsx
@@ -17,7 +17,6 @@ const isNoSidebarRoute = (pathname: string): boolean => {
     AppRoutes.share.safeApp,
     AppRoutes.newSafe.create,
     AppRoutes.newSafe.load,
-    AppRoutes.welcome,
     AppRoutes.index,
     AppRoutes.imprint,
     AppRoutes.privacy,
diff --git a/src/components/common/SafeLoadingError/index.tsx b/src/components/common/SafeLoadingError/index.tsx
index a26fadf719..a9c17acf27 100644
--- a/src/components/common/SafeLoadingError/index.tsx
+++ b/src/components/common/SafeLoadingError/index.tsx
@@ -15,7 +15,7 @@ const SafeLoadingError = ({ children }: { children: ReactNode }): ReactElement =
       img={<img src="/images/common/error.png" alt="A vault with a red icon in the bottom right corner" />}
       text="This Safe Account couldn't be loaded"
     >
-      <Link href={AppRoutes.welcome} passHref legacyBehavior>
+      <Link href={AppRoutes.welcome.index} passHref legacyBehavior>
         <Button variant="contained" color="primary" size="large" sx={{ mt: 2 }}>
           Go to the main page
         </Button>
diff --git a/src/components/common/SocialLoginInfo/index.tsx b/src/components/common/SocialLoginInfo/index.tsx
new file mode 100644
index 0000000000..42c2d3a0c9
--- /dev/null
+++ b/src/components/common/SocialLoginInfo/index.tsx
@@ -0,0 +1,55 @@
+import { Badge, Box, Typography } from '@mui/material'
+import css from './styles.module.css'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { type ConnectedWallet } from '@/services/onboard'
+import CopyAddressButton from '@/components/common/CopyAddressButton'
+import ExplorerButton from '@/components/common/ExplorerButton'
+import { getBlockExplorerLink } from '@/utils/chains'
+import { useAppSelector } from '@/store'
+import { selectSettings } from '@/store/settingsSlice'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+
+const SocialLoginInfo = ({
+  wallet,
+  chainInfo,
+  hideActions = false,
+}: {
+  wallet: ConnectedWallet
+  chainInfo?: ChainInfo
+  hideActions?: boolean
+}) => {
+  const socialWalletService = useSocialWallet()
+  const userInfo = socialWalletService?.getUserInfo()
+  const prefix = chainInfo?.shortName
+  const link = chainInfo ? getBlockExplorerLink(chainInfo, wallet.address) : undefined
+  const settings = useAppSelector(selectSettings)
+
+  if (!userInfo) return <></>
+
+  return (
+    <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
+      <Box position="relative">
+        <img src={userInfo.profileImage} className={css.profileImg} alt="Profile Image" referrerPolicy="no-referrer" />
+        {!socialWalletService?.isMFAEnabled() && <Badge variant="dot" color="warning" className={css.bubble} />}
+      </Box>
+      <div className={css.profileData}>
+        <Typography className={css.text} variant="body2" fontWeight={700}>
+          {userInfo.name}
+        </Typography>
+        <Typography className={css.text} variant="body2">
+          {userInfo.email}
+        </Typography>
+      </div>
+      {!hideActions && (
+        <div className={css.actionButtons}>
+          <Box color="border.main">
+            <CopyAddressButton prefix={prefix} copyPrefix={settings.shortName.copy} address={wallet.address} />
+            <ExplorerButton title={link?.title || ''} href={link?.href || ''} />
+          </Box>
+        </div>
+      )}
+    </Box>
+  )
+}
+
+export default SocialLoginInfo
diff --git a/src/components/common/SocialLoginInfo/styles.module.css b/src/components/common/SocialLoginInfo/styles.module.css
new file mode 100644
index 0000000000..c159474142
--- /dev/null
+++ b/src/components/common/SocialLoginInfo/styles.module.css
@@ -0,0 +1,35 @@
+.profileImg {
+  border-radius: var(--space-2);
+  width: 28px;
+  height: 28px;
+  display: block;
+}
+
+.bubble {
+  content: '';
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+}
+
+.bubble span {
+  outline: 1px solid var(--color-background-paper);
+}
+
+.profileData {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.text {
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.actionButtons {
+  display: flex;
+  justify-self: flex-end;
+  margin-left: auto;
+}
diff --git a/src/components/common/SocialSigner/PasswordRecovery.tsx b/src/components/common/SocialSigner/PasswordRecovery.tsx
new file mode 100644
index 0000000000..084a949061
--- /dev/null
+++ b/src/components/common/SocialSigner/PasswordRecovery.tsx
@@ -0,0 +1,114 @@
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import {
+  Typography,
+  FormControlLabel,
+  Checkbox,
+  Button,
+  Box,
+  Divider,
+  Grid,
+  LinearProgress,
+  FormControl,
+} from '@mui/material'
+import { useState } from 'react'
+import Track from '@/components/common/Track'
+import { FormProvider, useForm } from 'react-hook-form'
+import PasswordInput from '@/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+
+import css from './styles.module.css'
+
+type PasswordFormData = {
+  password: string
+}
+
+export const PasswordRecovery = ({
+  recoverFactorWithPassword,
+  onSuccess,
+}: {
+  recoverFactorWithPassword: (password: string, storeDeviceFactor: boolean) => Promise<void>
+  onSuccess?: (() => void) | undefined
+}) => {
+  const [storeDeviceFactor, setStoreDeviceFactor] = useState(false)
+
+  const formMethods = useForm<PasswordFormData>({
+    mode: 'all',
+    defaultValues: {
+      password: '',
+    },
+  })
+
+  const { handleSubmit, formState } = formMethods
+
+  const [error, setError] = useState<string>()
+
+  const onSubmit = async (data: PasswordFormData) => {
+    setError(undefined)
+    try {
+      await recoverFactorWithPassword(data.password, storeDeviceFactor)
+      onSuccess?.()
+    } catch (e) {
+      setError('Incorrect password')
+    }
+  }
+
+  const isDisabled = formState.isSubmitting
+
+  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
+            </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 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>
+
+              <Divider />
+              <Box p={4} display="flex" justifyContent="flex-end">
+                <Track {...MPC_WALLET_EVENTS.RECOVER_PASSWORD}>
+                  <Button variant="contained" type="submit" disabled={isDisabled}>
+                    Submit
+                  </Button>
+                </Track>
+              </Box>
+            </Box>
+          </Grid>
+        </Grid>
+      </form>
+    </FormProvider>
+  )
+}
diff --git a/src/components/common/SocialSigner/__tests__/PasswordRecovery.test.tsx b/src/components/common/SocialSigner/__tests__/PasswordRecovery.test.tsx
new file mode 100644
index 0000000000..488a33cccf
--- /dev/null
+++ b/src/components/common/SocialSigner/__tests__/PasswordRecovery.test.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render } from '@/tests/test-utils'
+import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
+import { act, waitFor } from '@testing-library/react'
+
+describe('PasswordRecovery', () => {
+  it('displays an error if password is wrong', async () => {
+    const mockRecoverWithPassword = jest.fn(() => Promise.reject())
+    const mockOnSuccess = jest.fn()
+
+    const { getByText, getByLabelText } = render(
+      <PasswordRecovery recoverFactorWithPassword={mockRecoverWithPassword} onSuccess={mockOnSuccess} />,
+    )
+
+    const passwordField = getByLabelText('Recovery password')
+    const submitButton = getByText('Submit')
+
+    act(() => {
+      fireEvent.change(passwordField, { target: { value: 'somethingwrong' } })
+      submitButton.click()
+    })
+
+    await waitFor(() => {
+      expect(mockOnSuccess).not.toHaveBeenCalled()
+      expect(getByText('Incorrect password')).toBeInTheDocument()
+    })
+  })
+
+  it('calls onSuccess if password is correct', async () => {
+    const mockRecoverWithPassword = jest.fn(() => Promise.resolve())
+    const mockOnSuccess = jest.fn()
+
+    const { getByText, getByLabelText } = render(
+      <PasswordRecovery recoverFactorWithPassword={mockRecoverWithPassword} onSuccess={mockOnSuccess} />,
+    )
+
+    const passwordField = getByLabelText('Recovery password')
+    const submitButton = getByText('Submit')
+
+    act(() => {
+      fireEvent.change(passwordField, { target: { value: 'somethingCorrect' } })
+      submitButton.click()
+    })
+
+    await waitFor(() => {
+      expect(mockOnSuccess).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
new file mode 100644
index 0000000000..3086a6e096
--- /dev/null
+++ b/src/components/common/SocialSigner/__tests__/SocialSignerLogin.test.tsx
@@ -0,0 +1,201 @@
+import { act, render, waitFor } from '@/tests/test-utils'
+
+import { SocialSigner, _getSupportedChains } from '@/components/common/SocialSigner'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { COREKIT_STATUS, type UserInfo, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
+import SocialWalletService from '@/services/mpc/SocialWalletService'
+import { TxModalProvider } from '@/components/tx-flow'
+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'
+
+jest.mock('@/services/mpc/SocialWalletService')
+
+const mockWallet = connectedWalletBuilder().with({ chainId: '5', label: ONBOARD_MPC_MODULE_LABEL }).build()
+
+describe('SocialSignerLogin', () => {
+  let mockSocialWalletService: ISocialWalletService
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+
+    mockSocialWalletService = new SocialWalletService({} as unknown as Web3AuthMPCCoreKit)
+  })
+
+  it('should render continue with connected account when on gnosis chain', async () => {
+    const mockOnLogin = jest.fn()
+
+    const result = render(
+      <TxModalProvider>
+        <SocialSigner
+          socialWalletService={mockSocialWalletService}
+          wallet={mockWallet}
+          supportedChains={['Goerli']}
+          isMPCLoginEnabled={true}
+          onLogin={mockOnLogin}
+        />
+      </TxModalProvider>,
+    )
+
+    await waitFor(() => {
+      expect(result.findByText('Continue as Test Testermann')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    const button = await result.findByRole('button')
+    button.click()
+
+    expect(mockOnLogin).toHaveBeenCalled()
+  })
+
+  it('should render google login button if no wallet is connected on gnosis chain', async () => {
+    const mockOnLogin = jest.fn()
+
+    const result = render(
+      <TxModalProvider>
+        <SocialSigner
+          socialWalletService={mockSocialWalletService}
+          wallet={null}
+          supportedChains={['Goerli']}
+          isMPCLoginEnabled={true}
+          onLogin={mockOnLogin}
+        />
+      </TxModalProvider>,
+    )
+
+    await waitFor(async () => {
+      expect(result.findByText('Continue with Google')).resolves.toBeDefined()
+      expect(await result.findByRole('button')).toBeEnabled()
+    })
+  })
+
+  it('should display a Continue as button and call onLogin when clicked', () => {
+    const mockOnLogin = jest.fn()
+    mockSocialWalletService.loginAndCreate = jest.fn(() => Promise.resolve(COREKIT_STATUS.LOGGED_IN))
+
+    const result = render(
+      <TxModalProvider>
+        <SocialSigner
+          socialWalletService={mockSocialWalletService}
+          wallet={mockWallet}
+          supportedChains={['Goerli']}
+          isMPCLoginEnabled={true}
+          onLogin={mockOnLogin}
+        />
+      </TxModalProvider>,
+    )
+
+    expect(result.getByText('Continue as Test Testermann')).toBeInTheDocument()
+
+    const button = result.getByRole('button')
+    button.click()
+
+    expect(mockOnLogin).toHaveBeenCalled()
+  })
+
+  it('should disable the Google Login button with a message when not on gnosis chain', async () => {
+    const result = render(
+      <SocialSigner
+        socialWalletService={mockSocialWalletService}
+        wallet={mockWallet}
+        supportedChains={['Goerli']}
+        isMPCLoginEnabled={false}
+      />,
+    )
+
+    expect(result.getByText('Currently only supported on Goerli')).toBeInTheDocument()
+    expect(await result.findByRole('button')).toBeDisabled()
+  })
+
+  it('should display Password Recovery form and display a Continue as button when login succeeds', async () => {
+    const mockOnLogin = jest.fn()
+    mockSocialWalletService.loginAndCreate = jest.fn(() => Promise.resolve(COREKIT_STATUS.REQUIRED_SHARE))
+    mockSocialWalletService.getUserInfo = jest.fn(undefined)
+    mockSocialWalletService.recoverAccountWithPassword = jest.fn(() => Promise.resolve(true))
+
+    const result = render(
+      <TxModalProvider>
+        <SocialSigner
+          socialWalletService={mockSocialWalletService}
+          wallet={mockWallet}
+          supportedChains={['Goerli']}
+          isMPCLoginEnabled={true}
+          onLogin={mockOnLogin}
+        />
+      </TxModalProvider>,
+    )
+
+    await waitFor(() => {
+      expect(result.findByText('Continue with Google')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    const button = await result.findByRole('button')
+
+    act(() => {
+      button.click()
+    })
+
+    await waitFor(() => {
+      expect(result.findByText('Enter security password')).resolves.toBeDefined()
+    })
+
+    const passwordField = await result.findByLabelText('Recovery password')
+    const submitButton = await result.findByText('Submit')
+
+    act(() => {
+      fireEvent.change(passwordField, { target: { value: 'Test1234!' } })
+      submitButton.click()
+    })
+
+    mockSocialWalletService.getUserInfo = jest.fn(
+      () =>
+        ({
+          email: 'test@testermann.com',
+          name: 'Test Testermann',
+          profileImage: 'test.testermann.local/profile.png',
+        } as unknown as UserInfo),
+    )
+
+    await waitFor(() => {
+      expect(result.getByText('Continue as Test Testermann')).toBeInTheDocument()
+    })
+  })
+
+  describe('getSupportedChains', () => {
+    const mockEthereumChain = chainBuilder()
+      .with({
+        chainId: '1',
+        chainName: 'Ethereum',
+        disabledWallets: ['socialSigner'],
+      })
+      .build()
+    const mockGnosisChain = chainBuilder()
+      .with({ chainId: '100', chainName: 'Gnosis Chain', disabledWallets: ['Coinbase'] })
+      .build()
+    it('returns chain names where social login is enabled', () => {
+      const mockGoerliChain = chainBuilder().with({ chainId: '5', chainName: 'Goerli', disabledWallets: [] }).build()
+
+      const mockChains = [mockEthereumChain, mockGnosisChain, mockGoerliChain]
+      const result = _getSupportedChains(mockChains)
+
+      expect(result).toEqual(['Gnosis Chain', 'Goerli'])
+    })
+
+    it('returns an empty array if social login is not enabled on any chain', () => {
+      const mockGoerliChain = chainBuilder()
+        .with({ chainId: '5', chainName: 'Goerli', disabledWallets: ['socialSigner'] })
+        .build()
+
+      const mockChains = [mockEthereumChain, mockGoerliChain]
+      const result = _getSupportedChains(mockChains)
+
+      expect(result).toEqual([])
+    })
+  })
+})
diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
new file mode 100644
index 0000000000..503327fd49
--- /dev/null
+++ b/src/components/common/SocialSigner/index.tsx
@@ -0,0 +1,185 @@
+import { Box, Button, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { useCallback, useContext, useMemo, useState } from 'react'
+import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
+import GoogleLogo from '@/public/images/welcome/logo-google.svg'
+import InfoIcon from '@/public/images/notifications/info.svg'
+
+import css from './styles.module.css'
+import useWallet from '@/hooks/wallets/useWallet'
+import Track from '@/components/common/Track'
+import { CREATE_SAFE_EVENTS } from '@/services/analytics'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import useChains, { useCurrentChain } from '@/hooks/useChains'
+import { isSocialWalletEnabled } from '@/hooks/wallets/wallets'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { CGW_NAMES } from '@/hooks/wallets/consts'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { TxModalContext } from '@/components/tx-flow'
+import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+import madProps from '@/utils/mad-props'
+import { asError } from '@/services/exceptions/utils'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+
+export const _getSupportedChains = (chains: ChainInfo[]) => {
+  return chains
+    .filter((chain) => CGW_NAMES.SOCIAL_LOGIN && !chain.disabledWallets.includes(CGW_NAMES.SOCIAL_LOGIN))
+    .map((chainConfig) => chainConfig.chainName)
+}
+const useGetSupportedChains = () => {
+  const chains = useChains()
+
+  return useMemo(() => {
+    return _getSupportedChains(chains.configs)
+  }, [chains.configs])
+}
+
+const useIsSocialWalletEnabled = () => {
+  const currentChain = useCurrentChain()
+
+  return isSocialWalletEnabled(currentChain)
+}
+
+type SocialSignerLoginProps = {
+  socialWalletService: ReturnType<typeof useSocialWallet>
+  wallet: ReturnType<typeof useWallet>
+  supportedChains: ReturnType<typeof useGetSupportedChains>
+  isMPCLoginEnabled: ReturnType<typeof useIsSocialWalletEnabled>
+  onLogin?: () => void
+  onRequirePassword?: () => void
+}
+
+export const SocialSigner = ({
+  socialWalletService,
+  wallet,
+  supportedChains,
+  isMPCLoginEnabled,
+  onLogin,
+  onRequirePassword,
+}: SocialSignerLoginProps) => {
+  const [loginPending, setLoginPending] = useState<boolean>(false)
+  const [loginError, setLoginError] = useState<string | undefined>(undefined)
+  const { setTxFlow } = useContext(TxModalContext)
+  const userInfo = socialWalletService?.getUserInfo()
+  const isDisabled = loginPending || !isMPCLoginEnabled
+
+  const recoverPassword = useCallback(
+    async (password: string, storeDeviceFactor: boolean) => {
+      if (!socialWalletService) return
+
+      const success = await socialWalletService.recoverAccountWithPassword(password, storeDeviceFactor)
+
+      if (success) {
+        setTxFlow(undefined)
+      }
+    },
+    [setTxFlow, socialWalletService],
+  )
+
+  const login = async () => {
+    if (!socialWalletService) return
+
+    setLoginPending(true)
+    setLoginError(undefined)
+    try {
+      const status = await socialWalletService.loginAndCreate()
+
+      if (status === COREKIT_STATUS.LOGGED_IN) {
+        setLoginPending(false)
+        return
+      }
+
+      if (status === COREKIT_STATUS.REQUIRED_SHARE) {
+        onRequirePassword?.()
+
+        setTxFlow(<PasswordRecovery recoverFactorWithPassword={recoverPassword} />, () => setLoginPending(false), false)
+        return
+      }
+    } catch (err) {
+      const error = asError(err)
+      setLoginError(error.message)
+    } finally {
+      setLoginPending(false)
+    }
+  }
+
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" gap={2} sx={{ width: '100%' }}>
+        {isSocialLogin && userInfo ? (
+          <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
+            <Button
+              variant="outlined"
+              sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
+              onClick={onLogin}
+              size="small"
+              disabled={isDisabled}
+              fullWidth
+            >
+              <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
+                <img
+                  src={userInfo.profileImage}
+                  className={css.profileImg}
+                  alt="Profile Image"
+                  referrerPolicy="no-referrer"
+                />
+                <div className={css.profileData}>
+                  <Typography variant="subtitle2" fontWeight={700}>
+                    Continue as {userInfo.name}
+                  </Typography>
+                  <Typography variant="body2">{userInfo.email}</Typography>
+                </div>
+                <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" sx={{ marginLeft: 'auto' }} />
+              </Box>
+            </Button>
+          </Track>
+        ) : (
+          <Track {...MPC_WALLET_EVENTS.CONNECT_GOOGLE}>
+            <Button
+              variant="outlined"
+              onClick={login}
+              size="small"
+              disabled={isDisabled}
+              fullWidth
+              sx={{ borderWidth: '1px !important' }}
+            >
+              <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+                <SvgIcon component={GoogleLogo} inheritViewBox fontSize="medium" /> Continue with Google
+              </Box>
+            </Button>
+          </Track>
+        )}
+        {loginError && <ErrorMessage className={css.loginError}>{loginError}</ErrorMessage>}
+      </Box>
+
+      {!isMPCLoginEnabled && (
+        <Typography variant="body2" color="text.secondary" display="flex" gap={1}>
+          <Tooltip title="More network support coming soon." arrow placement="top">
+            <span>
+              <SvgIcon
+                component={InfoIcon}
+                inheritViewBox
+                color="border"
+                fontSize="small"
+                sx={{
+                  verticalAlign: 'middle',
+                  ml: 0.5,
+                }}
+              />
+            </span>
+          </Tooltip>
+          <span>Currently only supported on {supportedChains.join(supportedChains.length === 2 ? ' and ' : ', ')}</span>
+        </Typography>
+      )}
+    </>
+  )
+}
+
+export default madProps(SocialSigner, {
+  socialWalletService: useSocialWallet,
+  wallet: useWallet,
+  supportedChains: useGetSupportedChains,
+  isMPCLoginEnabled: useIsSocialWalletEnabled,
+})
diff --git a/src/components/common/SocialSigner/styles.module.css b/src/components/common/SocialSigner/styles.module.css
new file mode 100644
index 0000000000..92c29890de
--- /dev/null
+++ b/src/components/common/SocialSigner/styles.module.css
@@ -0,0 +1,24 @@
+.profileImg {
+  border-radius: var(--space-2);
+  width: 32px;
+  height: 32px;
+}
+
+.profileData {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.passwordWrapper {
+  padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+
+.loginError {
+  width: 100%;
+  margin: 0;
+}
diff --git a/src/components/common/WalletInfo/index.test.tsx b/src/components/common/WalletInfo/index.test.tsx
new file mode 100644
index 0000000000..e402e7dd4a
--- /dev/null
+++ b/src/components/common/WalletInfo/index.test.tsx
@@ -0,0 +1,182 @@
+import { render } from '@/tests/test-utils'
+import { WalletInfo } from '@/components/common/WalletInfo/index'
+import { type EIP1193Provider, type OnboardAPI } from '@web3-onboard/core'
+import { type NextRouter } from 'next/router'
+import * as mpcModule from '@/services/mpc/SocialLoginModule'
+import * as constants from '@/config/constants'
+import { type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
+import { act } from '@testing-library/react'
+import SocialWalletService from '@/services/mpc/SocialWalletService'
+import type { ISocialWalletService } from '@/services/mpc/interfaces'
+
+const mockWallet = {
+  address: '0x1234567890123456789012345678901234567890',
+  chainId: '5',
+  label: '',
+  provider: null as unknown as EIP1193Provider,
+}
+
+const mockRouter = {
+  query: {},
+  pathname: '',
+} as NextRouter
+
+const mockOnboard = {
+  connectWallet: jest.fn(),
+  disconnectWallet: jest.fn(),
+  setChain: jest.fn(),
+} as unknown as OnboardAPI
+
+jest.mock('@/services/mpc/SocialWalletService')
+
+describe('WalletInfo', () => {
+  let socialWalletService: ISocialWalletService
+  beforeEach(() => {
+    jest.resetAllMocks()
+    socialWalletService = new SocialWalletService({} as unknown as Web3AuthMPCCoreKit)
+  })
+
+  it('should display the wallet address', () => {
+    const { getByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(getByText('0x1234...7890')).toBeInTheDocument()
+  })
+
+  it('should display a switch wallet button', () => {
+    const { getByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(getByText('Switch wallet')).toBeInTheDocument()
+  })
+
+  it('should disconnect the wallet when the button is clicked', () => {
+    const { getByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    const disconnectButton = getByText('Disconnect')
+
+    expect(disconnectButton).toBeInTheDocument()
+
+    act(() => {
+      disconnectButton.click()
+    })
+
+    expect(mockOnboard.disconnectWallet).toHaveBeenCalled()
+  })
+
+  it('should display a Delete Account button on dev for social login', () => {
+    jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true)
+    jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => false)
+
+    const { getByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(getByText('Delete Account')).toBeInTheDocument()
+  })
+
+  it('should not display a Delete Account on prod', () => {
+    jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true)
+    jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => true)
+
+    const { queryByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(queryByText('Delete Account')).not.toBeInTheDocument()
+  })
+
+  it('should not display a Delete Account if not social login', () => {
+    jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(false)
+    jest.spyOn(constants, 'IS_PRODUCTION', 'get').mockImplementation(() => false)
+
+    const { queryByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(queryByText('Delete Account')).not.toBeInTheDocument()
+  })
+
+  it('should display an enable mfa button if mfa is not enabled', () => {
+    jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true)
+
+    const { getByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(getByText('Add multifactor authentication')).toBeInTheDocument()
+  })
+
+  it('should not display an enable mfa button if mfa is already enabled', () => {
+    jest.spyOn(mpcModule, 'isSocialLoginWallet').mockReturnValue(true)
+
+    // Mock that MFA is enabled
+    socialWalletService.enableMFA('', '')
+
+    const { queryByText } = render(
+      <WalletInfo
+        wallet={mockWallet}
+        socialWalletService={socialWalletService}
+        router={mockRouter}
+        onboard={mockOnboard}
+        addressBook={{}}
+        handleClose={jest.fn()}
+      />,
+    )
+
+    expect(queryByText('Add multifactor authentication')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index 8cbd0c8f2a..1afdf0d573 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -1,44 +1,123 @@
-import { Box, Typography } from '@mui/material'
-import { Suspense } from 'react'
-import type { ReactElement } from 'react'
-
+import { Box, Button } from '@mui/material'
+import css from './styles.module.css'
+import ChainIndicator from '@/components/common/ChainIndicator'
+import SocialLoginInfo from '@/components/common/SocialLoginInfo'
+import Link from 'next/link'
+import { AppRoutes } from '@/config/routes'
+import LockIcon from '@/public/images/common/lock-small.svg'
 import EthHashInfo from '@/components/common/EthHashInfo'
-import WalletIcon from '@/components/common/WalletIcon'
-import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import ChainSwitcher from '@/components/common/ChainSwitcher'
+import { IS_PRODUCTION } from '@/config/constants'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import useOnboard, { type ConnectedWallet, switchWallet } from '@/hooks/wallets/useOnboard'
+import { useRouter } from 'next/router'
+import useAddressBook from '@/hooks/useAddressBook'
 import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
+import madProps from '@/utils/mad-props'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
 
-import css from './styles.module.css'
+type WalletInfoProps = {
+  wallet: ConnectedWallet
+  socialWalletService: ReturnType<typeof useSocialWallet>
+  router: ReturnType<typeof useRouter>
+  onboard: ReturnType<typeof useOnboard>
+  addressBook: ReturnType<typeof useAddressBook>
+  handleClose: () => void
+}
 
-export const UNKNOWN_CHAIN_NAME = 'Unknown'
+export const WalletInfo = ({
+  wallet,
+  socialWalletService,
+  router,
+  onboard,
+  addressBook,
+  handleClose,
+}: WalletInfoProps) => {
+  const chainInfo = useAppSelector((state) => selectChainById(state, wallet.chainId))
+  const prefix = chainInfo?.shortName
 
-const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
-  const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
-  const prefix = walletChain?.shortName
+  const handleSwitchWallet = () => {
+    if (onboard) {
+      handleClose()
+      switchWallet(onboard)
+    }
+  }
 
-  return (
-    <Box className={css.container}>
-      <Box className={css.imageContainer}>
-        <Suspense>
-          <WalletIcon provider={wallet.label} icon={wallet.icon} />
-        </Suspense>
-      </Box>
+  const resetAccount = () => socialWalletService?.__deleteAccount()
+
+  const handleDisconnect = () => {
+    if (!wallet) return
 
-      <Box className={css.walletDetails}>
-        <Typography variant="caption" component="div" className={css.walletName}>
-          {wallet.label} @ {walletChain?.chainName || UNKNOWN_CHAIN_NAME}
-        </Typography>
+    onboard?.disconnectWallet({
+      label: wallet.label,
+    })
 
-        <Typography variant="caption" fontWeight="bold" component="div">
-          {wallet.ens ? (
-            <div>{wallet.ens}</div>
+    handleClose()
+  }
+
+  const isSocialLogin = isSocialLoginWallet(wallet.label)
+
+  return (
+    <>
+      <Box className={css.accountContainer}>
+        <ChainIndicator />
+        <Box className={css.addressContainer}>
+          {isSocialLogin ? (
+            <>
+              <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} />
+              {socialWalletService && !socialWalletService.isMFAEnabled() && (
+                <Link href={{ pathname: AppRoutes.settings.securityLogin, query: router.query }} passHref>
+                  <Button
+                    fullWidth
+                    variant="contained"
+                    color="warning"
+                    className={css.warningButton}
+                    disableElevation
+                    startIcon={<LockIcon />}
+                    sx={{ mt: 1, p: 1 }}
+                    onClick={handleClose}
+                  >
+                    Add multifactor authentication
+                  </Button>
+                </Link>
+              )}
+            </>
           ) : (
-            <EthHashInfo prefix={prefix || ''} address={wallet.address} showName={false} showAvatar avatarSize={12} />
+            <EthHashInfo
+              address={wallet.address}
+              name={addressBook[wallet.address] || wallet.ens}
+              hasExplorer
+              showCopyButton
+              prefix={prefix}
+              avatarSize={32}
+            />
           )}
-        </Typography>
+        </Box>
       </Box>
-    </Box>
+
+      <ChainSwitcher fullWidth />
+
+      <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
+        Switch wallet
+      </Button>
+
+      <Button onClick={handleDisconnect} variant="danger" size="small" fullWidth disableElevation>
+        Disconnect
+      </Button>
+
+      {!IS_PRODUCTION && isSocialLogin && (
+        <Button onClick={resetAccount} variant="danger" size="small" fullWidth disableElevation>
+          Delete Account
+        </Button>
+      )}
+    </>
   )
 }
 
-export default WalletInfo
+export default madProps(WalletInfo, {
+  socialWalletService: useSocialWallet,
+  router: useRouter,
+  onboard: useOnboard,
+  addressBook: useAddressBook,
+})
diff --git a/src/components/common/WalletInfo/styles.module.css b/src/components/common/WalletInfo/styles.module.css
index 8b7242711c..a8c3a97308 100644
--- a/src/components/common/WalletInfo/styles.module.css
+++ b/src/components/common/WalletInfo/styles.module.css
@@ -1,34 +1,26 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  justify-content: center;
+.accountContainer {
+  width: 100%;
+  margin-bottom: var(--space-1);
 }
 
-.imageContainer {
-  display: flex;
-  justify-content: center;
+.accountContainer > span {
+  border-radius: 8px 8px 0 0;
 }
 
-[data-theme='dark'] .imageContainer img[alt*='Ledger'] {
-  filter: invert(100%);
+.addressContainer {
+  border-radius: 0 0 8px 8px;
+  padding: 12px;
+  border: 1px solid var(--color-border-light);
+  border-top: 0;
+  font-size: 14px;
 }
 
-@media (max-width: 599.95px) {
-  .buttonContainer button {
-    font-size: 12px;
-  }
-
-  .walletDetails {
-    display: none;
-  }
-
-  .imageContainer img {
-    width: 22px;
-    height: auto;
-  }
+.warningButton {
+  background-color: var(--color-warning-background);
+  color: var(--color-warning-main);
+  font-size: 12px;
+}
 
-  .walletName {
-    display: none;
-  }
+.warningButton:global.MuiButton-root:hover {
+  background-color: var(--color-warning-background);
 }
diff --git a/src/components/common/WalletOverview/index.tsx b/src/components/common/WalletOverview/index.tsx
new file mode 100644
index 0000000000..b13d3c9fe0
--- /dev/null
+++ b/src/components/common/WalletOverview/index.tsx
@@ -0,0 +1,56 @@
+import { Box, Typography } from '@mui/material'
+import { Suspense } from 'react'
+import type { ReactElement } from 'react'
+
+import EthHashInfo from '@/components/common/EthHashInfo'
+import WalletIcon from '@/components/common/WalletIcon'
+import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { useAppSelector } from '@/store'
+import { selectChainById } from '@/store/chainsSlice'
+
+import css from './styles.module.css'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import SocialLoginInfo from '@/components/common/SocialLoginInfo'
+
+export const UNKNOWN_CHAIN_NAME = 'Unknown'
+
+const WalletOverview = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
+  const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
+  const prefix = walletChain?.shortName
+
+  const isSocialLogin = isSocialLoginWallet(wallet.label)
+
+  if (isSocialLogin) {
+    return (
+      <div className={css.socialLoginInfo}>
+        <SocialLoginInfo wallet={wallet} chainInfo={walletChain} hideActions={true} />
+      </div>
+    )
+  }
+
+  return (
+    <Box className={css.container}>
+      <Box className={css.imageContainer}>
+        <Suspense>
+          <WalletIcon provider={wallet.label} icon={wallet.icon} />
+        </Suspense>
+      </Box>
+
+      <Box className={css.walletDetails}>
+        <Typography variant="caption" component="div" className={css.walletName}>
+          {wallet.label} @ {walletChain?.chainName || UNKNOWN_CHAIN_NAME}
+        </Typography>
+
+        <Typography variant="caption" fontWeight="bold" component="div">
+          {wallet.ens ? (
+            <div>{wallet.ens}</div>
+          ) : (
+            <EthHashInfo prefix={prefix || ''} address={wallet.address} showName={false} showAvatar avatarSize={12} />
+          )}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+
+export default WalletOverview
diff --git a/src/components/common/WalletOverview/styles.module.css b/src/components/common/WalletOverview/styles.module.css
new file mode 100644
index 0000000000..8316ab25da
--- /dev/null
+++ b/src/components/common/WalletOverview/styles.module.css
@@ -0,0 +1,38 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  justify-content: center;
+}
+
+.imageContainer {
+  display: flex;
+  justify-content: center;
+}
+
+[data-theme='dark'] .imageContainer img[alt*='Ledger'] {
+  filter: invert(100%);
+}
+
+@media (max-width: 599.95px) {
+  .buttonContainer button {
+    font-size: 12px;
+  }
+
+  .walletDetails {
+    display: none;
+  }
+
+  .imageContainer img {
+    width: 22px;
+    height: auto;
+  }
+
+  .walletName {
+    display: none;
+  }
+
+  .socialLoginInfo > div > div:last-child {
+    display: none;
+  }
+}
diff --git a/src/components/common/icons/KeyholeIcon/index.tsx b/src/components/common/icons/KeyholeIcon/index.tsx
index 013f7a9fb6..98c76e3762 100644
--- a/src/components/common/icons/KeyholeIcon/index.tsx
+++ b/src/components/common/icons/KeyholeIcon/index.tsx
@@ -1,9 +1,30 @@
-import Keyhole from '@/components/common/icons/KeyholeIcon/keyhole.svg'
+import css from '@/components/common/icons/CircularIcon/styles.module.css'
+import LockIcon from '@/public/images/common/lock.svg'
+import { Badge, SvgIcon } from '@mui/material'
 
-import CircularIcon from '../CircularIcon'
-
-const KeyholeIcon = ({ size = 40 }: { size?: number }) => {
-  return <CircularIcon icon={Keyhole} badgeColor="error" size={size} />
+const KeyholeIcon = ({ size = 28 }: { size?: number }) => {
+  return (
+    <Badge
+      color="error"
+      overlap="circular"
+      variant="dot"
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      className={css.badge}
+    >
+      <SvgIcon
+        color="border"
+        component={LockIcon}
+        inheritViewBox
+        sx={{
+          height: size,
+          width: size,
+        }}
+      />
+    </Badge>
+  )
 }
 
 export default KeyholeIcon
diff --git a/src/components/new-safe/create/OverviewWidget/index.tsx b/src/components/new-safe/create/OverviewWidget/index.tsx
index b6f463ec6a..2d0a5f8586 100644
--- a/src/components/new-safe/create/OverviewWidget/index.tsx
+++ b/src/components/new-safe/create/OverviewWidget/index.tsx
@@ -1,5 +1,5 @@
 import ChainIndicator from '@/components/common/ChainIndicator'
-import WalletInfo from '@/components/common/WalletInfo'
+import WalletOverview from 'src/components/common/WalletOverview'
 import { useCurrentChain } from '@/hooks/useChains'
 import useWallet from '@/hooks/wallets/useWallet'
 import { Card, Grid, Typography } from '@mui/material'
@@ -14,7 +14,7 @@ const OverviewWidget = ({ safeName }: { safeName: string }): ReactElement | null
   const wallet = useWallet()
   const chain = useCurrentChain()
   const rows = [
-    ...(wallet ? [{ title: 'Wallet', component: <WalletInfo wallet={wallet} /> }] : []),
+    ...(wallet ? [{ title: 'Wallet', component: <WalletOverview wallet={wallet} /> }] : []),
     ...(chain ? [{ title: 'Network', component: <ChainIndicator chainId={chain.chainId} inline /> }] : []),
     ...(safeName !== '' ? [{ title: 'Name', component: <Typography>{safeName}</Typography> }] : []),
   ]
diff --git a/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts b/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts
index 807f848364..64eea7d305 100644
--- a/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts
+++ b/src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts
@@ -5,6 +5,9 @@ import * as localStorage from '@/services/local-storage/useLocalStorage'
 import type { ConnectedWallet } from '@/services/onboard'
 import * as usePendingSafe from '../steps/StatusStep/usePendingSafe'
 import * as useIsWrongChain from '@/hooks/useIsWrongChain'
+import * as useRouter from 'next/router'
+import { type NextRouter } from 'next/router'
+import { AppRoutes } from '@/config/routes'
 
 describe('useSyncSafeCreationStep', () => {
   const mockPendingSafe = {
@@ -18,29 +21,39 @@ describe('useSyncSafeCreationStep', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
-    const setPendingSafeSpy = jest.fn()
   })
 
-  it('should go to the first step if no wallet is connected', async () => {
+  it('should go to the first step if no wallet is connected and there is no pending safe', async () => {
+    const mockPushRoute = jest.fn()
     jest.spyOn(wallet, 'default').mockReturnValue(null)
     jest.spyOn(usePendingSafe, 'usePendingSafe').mockReturnValue([undefined, setPendingSafeSpy])
+    jest.spyOn(useRouter, 'useRouter').mockReturnValue({
+      push: mockPushRoute,
+    } as unknown as NextRouter)
     const mockSetStep = jest.fn()
 
     renderHook(() => useSyncSafeCreationStep(mockSetStep))
 
-    expect(mockSetStep).toHaveBeenCalledWith(0)
+    expect(mockSetStep).not.toHaveBeenCalled()
+    expect(mockPushRoute).toHaveBeenCalledWith({ pathname: AppRoutes.welcome.index, query: undefined })
   })
 
   it('should go to the fourth step if there is a pending safe', async () => {
+    const mockPushRoute = jest.fn()
     jest.spyOn(localStorage, 'default').mockReturnValue([{}, jest.fn()])
     jest.spyOn(wallet, 'default').mockReturnValue({ address: '0x1' } as ConnectedWallet)
     jest.spyOn(usePendingSafe, 'usePendingSafe').mockReturnValue([mockPendingSafe, setPendingSafeSpy])
+    jest.spyOn(useRouter, 'useRouter').mockReturnValue({
+      push: mockPushRoute,
+    } as unknown as NextRouter)
 
     const mockSetStep = jest.fn()
 
     renderHook(() => useSyncSafeCreationStep(mockSetStep))
 
-    expect(mockSetStep).toHaveBeenCalledWith(4)
+    expect(mockSetStep).toHaveBeenCalledWith(3)
+
+    expect(mockPushRoute).not.toHaveBeenCalled()
   })
 
   it('should go to the second step if the wrong chain is connected', async () => {
@@ -53,7 +66,7 @@ describe('useSyncSafeCreationStep', () => {
 
     renderHook(() => useSyncSafeCreationStep(mockSetStep))
 
-    expect(mockSetStep).toHaveBeenCalledWith(1)
+    expect(mockSetStep).toHaveBeenCalledWith(0)
   })
 
   it('should not do anything if wallet is connected and there is no pending safe', async () => {
diff --git a/src/components/new-safe/create/index.tsx b/src/components/new-safe/create/index.tsx
index a0807aa59a..57f11f92c5 100644
--- a/src/components/new-safe/create/index.tsx
+++ b/src/components/new-safe/create/index.tsx
@@ -5,7 +5,6 @@ import useWallet from '@/hooks/wallets/useWallet'
 import OverviewWidget from '@/components/new-safe/create/OverviewWidget'
 import type { NamedAddress } from '@/components/new-safe/create/types'
 import type { TxStepperProps } from '@/components/new-safe/CardStepper/useCardStepper'
-import ConnectWalletStep from '@/components/new-safe/create/steps/ConnectWalletStep'
 import SetNameStep from '@/components/new-safe/create/steps/SetNameStep'
 import OwnerPolicyStep from '@/components/new-safe/create/steps/OwnerPolicyStep'
 import ReviewStep from '@/components/new-safe/create/steps/ReviewStep'
@@ -20,6 +19,8 @@ import CreateSafeInfos from '@/components/new-safe/create/CreateSafeInfos'
 import { type ReactElement, useMemo, useState } from 'react'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 
 export type NewSafeFormData = {
   name: string
@@ -111,13 +112,6 @@ const CreateSafe = () => {
   const [activeStep, setActiveStep] = useState(0)
 
   const CreateSafeSteps: TxStepperProps<NewSafeFormData>['steps'] = [
-    {
-      title: 'Connect wallet',
-      subtitle: 'The connected wallet will pay the network fees for the Safe Account creation.',
-      render: (data, onSubmit, onBack, setStep) => (
-        <ConnectWalletStep data={data} onSubmit={onSubmit} onBack={onBack} setStep={setStep} />
-      ),
-    },
     {
       title: 'Select network and name of your Safe Account',
       subtitle: 'Select the network on which to create your Safe Account',
@@ -164,15 +158,21 @@ const CreateSafe = () => {
 
   const staticHint = useMemo(() => staticHints[activeStep], [activeStep])
 
+  const mnemonicSafeName = useMnemonicSafeName()
+
+  // Jump to review screen when using social login
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+  const initialStep = isSocialLogin ? 2 : 0
+
   const initialData: NewSafeFormData = {
-    name: '',
+    name: isSocialLogin ? mnemonicSafeName : '',
     owners: [defaultOwner],
     threshold: 1,
     saltNonce: Date.now(),
   }
 
   const onClose = () => {
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }
 
   return (
@@ -186,6 +186,7 @@ const CreateSafe = () => {
         <Grid item xs={12} md={8} order={[1, null, 0]}>
           <CardStepper
             initialData={initialData}
+            initialStep={initialStep}
             onClose={onClose}
             steps={CreateSafeSteps}
             eventCategory={CREATE_SAFE_CATEGORY}
@@ -195,7 +196,7 @@ const CreateSafe = () => {
 
         <Grid item xs={12} md={4} mb={[3, null, 0]} order={[0, null, 1]}>
           <Grid container spacing={3}>
-            {activeStep < 3 && <OverviewWidget safeName={safeName} />}
+            {activeStep < 2 && <OverviewWidget safeName={safeName} />}
             {wallet?.address && <CreateSafeInfos staticHint={staticHint} dynamicHint={dynamicHint} />}
           </Grid>
         </Grid>
diff --git a/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx b/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx
deleted file mode 100644
index c8bc71fa5a..0000000000
--- a/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Box, Button } from '@mui/material'
-import useWallet from '@/hooks/wallets/useWallet'
-
-import type { NewSafeFormData } from '@/components/new-safe/create'
-import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
-import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
-import layoutCss from '@/components/new-safe/create/styles.module.css'
-import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
-import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import { usePendingSafe } from '../StatusStep/usePendingSafe'
-
-const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormData>) => {
-  const [pendingSafe] = usePendingSafe()
-  const wallet = useWallet()
-  const handleConnect = useConnectWallet()
-  const [, setSubmitted] = useState(false)
-  useSyncSafeCreationStep(setStep)
-
-  useEffect(() => {
-    if (!wallet || pendingSafe) return
-
-    setSubmitted((prev) => {
-      if (prev) return prev
-      onSubmit({ owners: [{ address: wallet.address, name: wallet.ens || '' }] })
-      return true
-    })
-  }, [onSubmit, wallet, pendingSafe])
-
-  return (
-    <Box className={layoutCss.row} display="flex" alignItems="center" gap={3}>
-      <KeyholeIcon />
-      <Button onClick={handleConnect} variant="contained" size="stretched" disableElevation>
-        Connect wallet
-      </Button>
-    </Box>
-  )
-}
-
-export default ConnectWalletStep
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.test.tsx b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
new file mode 100644
index 0000000000..6861af0638
--- /dev/null
+++ b/src/components/new-safe/create/steps/ReviewStep/index.test.tsx
@@ -0,0 +1,42 @@
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+
+import { render } from '@/tests/test-utils'
+import { NetworkFee } from '@/components/new-safe/create/steps/ReviewStep/index'
+import * as useWallet from '@/hooks/wallets/useWallet'
+import { type ConnectedWallet } from '@/services/onboard'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+
+const mockChainInfo = {
+  chainId: '100',
+  chainName: 'Gnosis Chain',
+  l2: false,
+  nativeCurrency: {
+    symbol: 'ETH',
+  },
+} as ChainInfo
+
+describe('NetworkFee', () => {
+  it('should display the total fee if not social login', () => {
+    jest.spyOn(useWallet, 'default').mockReturnValue({ label: 'MetaMask' } as unknown as ConnectedWallet)
+    const mockTotalFee = '0.0123'
+    const result = render(<NetworkFee totalFee={mockTotalFee} chain={mockChainInfo} willRelay={true} />)
+
+    expect(result.getByText(`≈ ${mockTotalFee} ${mockChainInfo.nativeCurrency.symbol}`)).toBeInTheDocument()
+  })
+
+  it('displays a sponsored by message for social login', () => {
+    jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet)
+    const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={true} />)
+
+    expect(result.getByText(/Your account is sponsored by Gnosis Chain/)).toBeInTheDocument()
+  })
+
+  it('displays an error message for social login if there are no relays left', () => {
+    jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet)
+    const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={false} />)
+
+    expect(
+      result.getByText(/You have used up your 5 free transactions per hour. Please try again later/),
+    ).toBeInTheDocument()
+  })
+})
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 0699dc6ae1..40225cdf2f 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Button, Grid, Typography, Divider, Box } from '@mui/material'
+import { Button, Grid, Typography, Divider, Box, Alert } from '@mui/material'
 import { lightPalette } from '@safe-global/safe-react-components'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import EthHashInfo from '@/components/common/EthHashInfo'
@@ -21,12 +21,75 @@ import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import ReviewRow from '@/components/new-safe/ReviewRow'
 import { ExecutionMethodSelector, ExecutionMethod } from '@/components/tx/ExecutionMethodSelector'
-import { useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
+import { MAX_HOUR_RELAYS, useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
 import classnames from 'classnames'
 import { hasRemainingRelays } from '@/utils/relaying'
 import { BigNumber } from 'ethers'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy'
+import Image from 'next/image'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+
+export const NetworkFee = ({
+  totalFee,
+  chain,
+  willRelay,
+}: {
+  totalFee: string
+  chain: ChainInfo | undefined
+  willRelay: boolean
+}) => {
+  const wallet = useWallet()
+
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
+  if (!isSocialLogin) {
+    return (
+      <Box
+        p={1}
+        sx={{
+          backgroundColor: lightPalette.secondary.background,
+          color: 'static.main',
+          width: 'fit-content',
+          borderRadius: '6px',
+        }}
+      >
+        <Typography variant="body1" className={classnames({ [css.sponsoredFee]: willRelay })}>
+          <b>
+            &asymp; {totalFee} {chain?.nativeCurrency.symbol}
+          </b>
+        </Typography>
+      </Box>
+    )
+  }
+
+  if (willRelay) {
+    return (
+      <>
+        <Typography fontWeight="bold">Free</Typography>
+        <Typography variant="body2">
+          Your account is sponsored by
+          <Image
+            src={SPONSOR_LOGOS[chain?.chainId || '']}
+            alt={chain?.chainName || ''}
+            width={16}
+            height={16}
+            style={{ margin: '-3px 0px -3px 4px' }}
+          />{' '}
+          {chain?.chainName}
+        </Typography>
+      </>
+    )
+  }
+
+  return (
+    <Alert severity="error">
+      You have used up your {MAX_HOUR_RELAYS} free transactions per hour. Please try again later.
+    </Alert>
+  )
+}
 
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
@@ -105,12 +168,15 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
     onSubmit(pendingSafe)
   }
 
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+  const isDisabled = isWrongChain || (isSocialLogin && !willRelay)
+
   return (
     <>
       <Box className={layoutCss.row}>
         <Grid container spacing={3}>
           <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
-          <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />
+          {data.name && <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />}
           <ReviewRow
             name="Owners"
             value={
@@ -142,62 +208,50 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       </Box>
 
       <Divider />
-      <Box className={layoutCss.row}>
-        <Grid container xs={12} spacing={3}>
-          {canRelay && (
-            <Grid item container spacing={3}>
-              <ReviewRow
-                name="Execution method"
-                value={
-                  <ExecutionMethodSelector
-                    executionMethod={executionMethod}
-                    setExecutionMethod={setExecutionMethod}
-                    relays={minRelays}
-                  />
-                }
-              />
-            </Grid>
-          )}
-          <Grid item container spacing={3}>
+      <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>
+        {canRelay && !isSocialLogin && (
+          <Grid container spacing={3}>
             <ReviewRow
-              name="Est. network fee"
+              name="Execution method"
               value={
-                <>
-                  <Box
-                    p={1}
-                    sx={{
-                      backgroundColor: lightPalette.secondary.background,
-                      color: 'static.main',
-                      width: 'fit-content',
-                      borderRadius: '6px',
-                    }}
-                  >
-                    <Typography variant="body1" className={classnames({ [css.sponsoredFee]: willRelay })}>
-                      <b>
-                        &asymp; {totalFee} {chain?.nativeCurrency.symbol}
-                      </b>
-                    </Typography>
-                  </Box>
-                  {willRelay ? null : (
-                    <Typography variant="body2" color="text.secondary" mt={1}>
-                      You will have to confirm a transaction with your connected wallet.
-                    </Typography>
-                  )}
-                </>
+                <ExecutionMethodSelector
+                  executionMethod={executionMethod}
+                  setExecutionMethod={setExecutionMethod}
+                  relays={minRelays}
+                />
               }
             />
           </Grid>
+        )}
+
+        <Grid container spacing={3}>
+          <ReviewRow
+            name="Est. network fee"
+            value={
+              <>
+                <NetworkFee totalFee={totalFee} willRelay={willRelay} chain={chain} />
+
+                {!willRelay && !isSocialLogin && (
+                  <Typography variant="body2" color="text.secondary" mt={1}>
+                    You will have to confirm a transaction with your connected wallet.
+                  </Typography>
+                )}
+              </>
+            }
+          />
         </Grid>
 
         {isWrongChain && <NetworkWarning />}
       </Box>
+
       <Divider />
+
       <Box className={layoutCss.row}>
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
             Back
           </Button>
-          <Button onClick={createSafe} variant="contained" size="stretched" disabled={isWrongChain}>
+          <Button onClick={createSafe} variant="contained" size="stretched" disabled={isDisabled}>
             Next
           </Button>
         </Box>
diff --git a/src/components/new-safe/create/steps/SetNameStep/index.tsx b/src/components/new-safe/create/steps/SetNameStep/index.tsx
index 01cb0d9d31..e6efd1fcad 100644
--- a/src/components/new-safe/create/steps/SetNameStep/index.tsx
+++ b/src/components/new-safe/create/steps/SetNameStep/index.tsx
@@ -16,6 +16,7 @@ import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 import { AppRoutes } from '@/config/routes'
 import MUILink from '@mui/material/Link'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 type SetNameStepForm = {
   name: string
@@ -33,6 +34,7 @@ function SetNameStep({
   setStep,
   setSafeName,
 }: StepRenderProps<NewSafeFormData> & { setSafeName: (name: string) => void }) {
+  const router = useRouter()
   const fallbackName = useMnemonicSafeName()
   const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
@@ -59,6 +61,11 @@ function SetNameStep({
     }
   }
 
+  const onCancel = () => {
+    trackEvent(CREATE_SAFE_EVENTS.CANCEL_CREATE_SAFE_FORM)
+    router.push(AppRoutes.welcome.index)
+  }
+
   const isDisabled = isWrongChain || !isValid
 
   return (
@@ -109,7 +116,10 @@ function SetNameStep({
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="flex-end" gap={3}>
+          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+            <Button variant="outlined" onClick={onCancel} size="small">
+              Cancel
+            </Button>
             <Button type="submit" variant="contained" size="stretched" disabled={isDisabled}>
               Next
             </Button>
diff --git a/src/components/new-safe/create/steps/StatusStep/index.tsx b/src/components/new-safe/create/steps/StatusStep/index.tsx
index 255ad37572..642b2ccd05 100644
--- a/src/components/new-safe/create/steps/StatusStep/index.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/index.tsx
@@ -49,7 +49,7 @@ export const CreateSafeStatus = ({ data, setProgressColor, setStep }: StepRender
   const onClose = useCallback(() => {
     setPendingSafe(undefined)
 
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }, [router, setPendingSafe])
 
   const handleRetry = useCallback(() => {
diff --git a/src/components/new-safe/create/useSyncSafeCreationStep.ts b/src/components/new-safe/create/useSyncSafeCreationStep.ts
index 6b4ad6ff94..90a32c0e7f 100644
--- a/src/components/new-safe/create/useSyncSafeCreationStep.ts
+++ b/src/components/new-safe/create/useSyncSafeCreationStep.ts
@@ -4,31 +4,33 @@ import type { NewSafeFormData } from '@/components/new-safe/create/index'
 import useWallet from '@/hooks/wallets/useWallet'
 import { usePendingSafe } from './steps/StatusStep/usePendingSafe'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
+import { useRouter } from 'next/router'
+import { AppRoutes } from '@/config/routes'
 
 const useSyncSafeCreationStep = (setStep: StepRenderProps<NewSafeFormData>['setStep']) => {
   const [pendingSafe] = usePendingSafe()
   const wallet = useWallet()
   const isWrongChain = useIsWrongChain()
+  const router = useRouter()
 
   useEffect(() => {
     // Jump to the status screen if there is already a tx submitted
     if (pendingSafe) {
-      setStep(4)
+      setStep(3)
       return
     }
 
-    // Jump to connect wallet step if there is no wallet and no pending Safe
+    // Jump to the welcome page if there is no wallet
     if (!wallet) {
-      setStep(0)
-      return
+      router.push({ pathname: AppRoutes.welcome.index, query: router.query })
     }
 
     // Jump to choose name and network step if the wallet is connected to the wrong chain and there is no pending Safe
     if (isWrongChain) {
-      setStep(1)
+      setStep(0)
       return
     }
-  }, [wallet, setStep, pendingSafe, isWrongChain])
+  }, [wallet, setStep, pendingSafe, isWrongChain, router])
 }
 
 export default useSyncSafeCreationStep
diff --git a/src/components/new-safe/load/index.tsx b/src/components/new-safe/load/index.tsx
index 727d39a840..84c24c91ee 100644
--- a/src/components/new-safe/load/index.tsx
+++ b/src/components/new-safe/load/index.tsx
@@ -46,7 +46,7 @@ const LoadSafe = ({ initialData }: { initialData?: TxStepperProps<LoadSafeFormDa
   const router = useRouter()
 
   const onClose = () => {
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }
 
   const initialSafe = initialData ?? loadSafeDefaultData
diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx
index 0b1b64106c..9bf3c4cff8 100644
--- a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx
+++ b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx
@@ -1,7 +1,7 @@
 import { Button, Chip, Grid, SvgIcon, Typography, IconButton } from '@mui/material'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { ReactElement } from 'react'
 
 import { CustomTooltip } from '@/components/common/CustomTooltip'
@@ -26,6 +26,7 @@ import type { AddedSafesOnChain } from '@/store/addedSafesSlice'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
 import type { NotifiableSafes } from '../logic'
 import useWallet from '@/hooks/wallets/useWallet'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import css from './styles.module.css'
 
@@ -103,6 +104,7 @@ const TrackBanner = (): null => {
 }
 
 export const PushNotificationsBanner = ({ children }: { children: ReactElement }): ReactElement => {
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
   const chain = useCurrentChain()
   const totalAddedSafes = useAppSelector(selectTotalAdded)
@@ -136,6 +138,8 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
       return
     }
 
+    setIsSubmitting(true)
+
     trackEvent(PUSH_NOTIFICATION_EVENTS.ENABLE_ALL)
 
     const allPreferences = getAllPreferences()
@@ -144,11 +148,13 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
     try {
       await assertWalletChain(onboard, safe.chainId)
     } catch {
+      setIsSubmitting(false)
       return
     }
 
     await registerNotifications(safesToRegister)
 
+    setIsSubmitting(false)
     dismissBanner()
   }
 
@@ -195,7 +201,8 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement }
                         size="small"
                         className={css.button}
                         onClick={onEnableAll}
-                        disabled={!isOk || !onboard}
+                        startIcon={isSubmitting ? <CircularProgress size={12} color="inherit" /> : null}
+                        disabled={!isOk || !onboard || isSubmitting}
                       >
                         Enable all
                       </Button>
diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx b/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx
new file mode 100644
index 0000000000..bacce6a38f
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx
@@ -0,0 +1,147 @@
+import CopyButton from '@/components/common/CopyButton'
+import ModalDialog from '@/components/common/ModalDialog'
+import { trackEvent } from '@/services/analytics'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import { Box, Button, DialogContent, DialogTitle, IconButton, TextField, Typography } from '@mui/material'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Visibility, VisibilityOff, Close } from '@mui/icons-material'
+import css from '@/components/settings/SecurityLogin/SocialSignerExport/styles.module.css'
+import ErrorCodes from '@/services/exceptions/ErrorCodes'
+import { logError } from '@/services/exceptions'
+import ErrorMessage from '@/components/tx/ErrorMessage'
+import { asError } from '@/services/exceptions/utils'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+
+enum ExportFieldNames {
+  password = 'password',
+  pk = 'pk',
+}
+
+type ExportFormData = {
+  [ExportFieldNames.password]: string
+  [ExportFieldNames.pk]: string | undefined
+}
+
+const ExportMPCAccountModal = ({ onClose, open }: { onClose: () => void; open: boolean }) => {
+  const socialWalletService = useSocialWallet()
+  const [error, setError] = useState<string>()
+
+  const [showPassword, setShowPassword] = useState(false)
+  const formMethods = useForm<ExportFormData>({
+    mode: 'all',
+    defaultValues: {
+      [ExportFieldNames.password]: '',
+    },
+  })
+  const { register, formState, handleSubmit, setValue, watch, reset } = formMethods
+
+  const exportedKey = watch(ExportFieldNames.pk)
+
+  const onSubmit = async (data: ExportFormData) => {
+    if (!socialWalletService) {
+      return
+    }
+    try {
+      setError(undefined)
+      const pk = await socialWalletService.exportSignerKey(data[ExportFieldNames.password])
+      trackEvent(MPC_WALLET_EVENTS.EXPORT_PK_SUCCESS)
+      setValue(ExportFieldNames.pk, pk)
+    } catch (err) {
+      logError(ErrorCodes._305, err)
+      trackEvent(MPC_WALLET_EVENTS.EXPORT_PK_ERROR)
+      setError(asError(err).message)
+    }
+  }
+
+  const handleClose = () => {
+    setError(undefined)
+    reset()
+    onClose()
+  }
+
+  const toggleShowPK = () => {
+    trackEvent(MPC_WALLET_EVENTS.SEE_PK)
+    setShowPassword((prev) => !prev)
+  }
+
+  const onCopy = () => {
+    trackEvent(MPC_WALLET_EVENTS.COPY_PK)
+  }
+
+  return (
+    <ModalDialog open={open} onClose={handleClose}>
+      <DialogTitle fontWeight="bold">Export your account</DialogTitle>
+      <IconButton className={css.close} aria-label="close" onClick={handleClose} size="small">
+        <Close fontSize="large" />
+      </IconButton>
+
+      <DialogContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Box display="flex" flexDirection="column" gap={2} alignItems="flex-start" sx={{ width: '100%' }}>
+            <Typography>For security reasons you have to enter your password to reveal your account key.</Typography>
+
+            {exportedKey ? (
+              <Box display="flex" flexDirection="row" alignItems="center" gap={1} width="100%">
+                <TextField
+                  fullWidth
+                  multiline={showPassword}
+                  maxRows={3}
+                  label="Private key"
+                  type="password"
+                  InputProps={{
+                    readOnly: true,
+                    endAdornment: (
+                      <>
+                        <IconButton size="small" onClick={toggleShowPK}>
+                          {showPassword ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
+                        </IconButton>
+                        <CopyButton text={exportedKey} onCopy={onCopy} />
+                      </>
+                    ),
+                  }}
+                  {...register(ExportFieldNames.pk)}
+                />
+              </Box>
+            ) : (
+              <>
+                <TextField
+                  placeholder="Password"
+                  label="Password"
+                  type="password"
+                  fullWidth
+                  error={!!formState.errors[ExportFieldNames.password]}
+                  helperText={formState.errors[ExportFieldNames.password]?.message}
+                  {...register(ExportFieldNames.password, {
+                    required: true,
+                  })}
+                />
+              </>
+            )}
+            {error && <ErrorMessage className={css.modalError}>{error}</ErrorMessage>}
+
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+              alignItems="center"
+              width="100%"
+              mt={2}
+            >
+              <Button variant="outlined" onClick={handleClose}>
+                Close
+              </Button>
+              {exportedKey === undefined && (
+                <Button color="primary" variant="contained" disabled={formState.isSubmitting} type="submit">
+                  Export
+                </Button>
+              )}
+            </Box>
+          </Box>
+        </form>
+      </DialogContent>
+    </ModalDialog>
+  )
+}
+
+export default ExportMPCAccountModal
diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/index.tsx b/src/components/settings/SecurityLogin/SocialSignerExport/index.tsx
new file mode 100644
index 0000000000..088e484af2
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerExport/index.tsx
@@ -0,0 +1,47 @@
+import Track from '@/components/common/Track'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import { Alert, Box, Button, Tooltip, Typography } from '@mui/material'
+import { useState } from 'react'
+import ExportMPCAccountModal from '@/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+
+const SocialSignerExport = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const socialWalletService = useSocialWallet()
+
+  const isPasswordSet = socialWalletService?.isRecoveryPasswordSet() ?? false
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" gap={2} alignItems="flex-start">
+        <Typography>
+          Signers created via Google can be exported and imported to any non-custodial wallet outside of Safe.
+        </Typography>
+        <Alert severity="warning">
+          Never disclose your keys or seed phrase to anyone. If someone gains access to them, they have full access over
+          your social login signer.
+        </Alert>
+
+        <Track {...MPC_WALLET_EVENTS.REVEAL_PRIVATE_KEY}>
+          <Tooltip title={isPasswordSet ? '' : 'Private key export is only available if you set a recovery password'}>
+            <span>
+              <Button
+                color="primary"
+                variant="contained"
+                sx={{ pointerEvents: 'all !important' }}
+                disabled={isModalOpen || !isPasswordSet}
+                onClick={() => setIsModalOpen(true)}
+              >
+                Reveal private key
+              </Button>
+            </span>
+          </Tooltip>
+        </Track>
+      </Box>
+      <ExportMPCAccountModal onClose={() => setIsModalOpen(false)} open={isModalOpen} />
+    </>
+  )
+}
+
+export default SocialSignerExport
diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/styles.module.css b/src/components/settings/SecurityLogin/SocialSignerExport/styles.module.css
new file mode 100644
index 0000000000..c818925ecd
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerExport/styles.module.css
@@ -0,0 +1,10 @@
+.close {
+  position: absolute;
+  right: var(--space-1);
+  top: var(--space-1);
+}
+
+.modalError {
+  width: 100%;
+  margin: 0;
+}
diff --git a/src/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput.tsx b/src/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput.tsx
new file mode 100644
index 0000000000..40e78010b2
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { IconButton, TextField, type TextFieldProps } from '@mui/material'
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import { useFormContext, type Validate } from 'react-hook-form'
+
+const PasswordInput = ({
+  name,
+  validate,
+  required = false,
+  ...props
+}: Omit<TextFieldProps, 'error' | 'variant' | 'ref' | 'fullWidth'> & {
+  name: string
+  validate?: Validate<string>
+  required?: boolean
+}) => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  const { register, formState } = useFormContext() || {}
+
+  return (
+    <TextField
+      {...props}
+      type={showPassword ? 'text' : 'password'}
+      error={!!formState.errors[name]}
+      InputProps={{
+        endAdornment: (
+          <IconButton
+            aria-label="toggle password visibility"
+            onClick={() => setShowPassword((prev) => !prev)}
+            edge="end"
+          >
+            {showPassword ? <VisibilityOff /> : <Visibility />}
+          </IconButton>
+        ),
+      }}
+      {...register(name, {
+        required,
+        validate,
+      })}
+    />
+  )
+}
+
+export default PasswordInput
diff --git a/src/components/settings/SecurityLogin/SocialSignerMFA/index.test.tsx b/src/components/settings/SecurityLogin/SocialSignerMFA/index.test.tsx
new file mode 100644
index 0000000000..4a2bde113d
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerMFA/index.test.tsx
@@ -0,0 +1,45 @@
+import { _getPasswordStrength, PasswordStrength } from '@/components/settings/SecurityLogin/SocialSignerMFA/index'
+
+describe('_getPasswordStrength', () => {
+  it('should return weak if the value has fewer than 9 characters', () => {
+    const result = _getPasswordStrength('Testpw1!')
+
+    expect(result).toEqual(PasswordStrength.weak)
+  })
+
+  it('should return weak if the value has no uppercase letter', () => {
+    const result = _getPasswordStrength('testpassword1!')
+
+    expect(result).toEqual(PasswordStrength.weak)
+  })
+
+  it('should return weak if the value has no number', () => {
+    const result = _getPasswordStrength('Testpassword!')
+
+    expect(result).toEqual(PasswordStrength.weak)
+  })
+
+  it('should return weak if the value has no special character', () => {
+    const result = _getPasswordStrength('Testpassword123')
+
+    expect(result).toEqual(PasswordStrength.weak)
+  })
+
+  it('should return weak if the value has 12 or more characters but no uppercase letter', () => {
+    const result = _getPasswordStrength('testpassword123!')
+
+    expect(result).toEqual(PasswordStrength.weak)
+  })
+
+  it('should return medium if the value has 9 or more characters, uppercase, number and special character', () => {
+    const result = _getPasswordStrength('Testpw123!')
+
+    expect(result).toEqual(PasswordStrength.medium)
+  })
+
+  it('should return strong if the value has 12 or more characters, uppercase, number and special character', () => {
+    const result = _getPasswordStrength('Testpassword123!')
+
+    expect(result).toEqual(PasswordStrength.strong)
+  })
+})
diff --git a/src/components/settings/SecurityLogin/SocialSignerMFA/index.tsx b/src/components/settings/SecurityLogin/SocialSignerMFA/index.tsx
new file mode 100644
index 0000000000..cfb4ec0464
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerMFA/index.tsx
@@ -0,0 +1,298 @@
+import Track from '@/components/common/Track'
+import {
+  Typography,
+  Button,
+  Box,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Grid,
+  FormControl,
+  SvgIcon,
+  Divider,
+  Alert,
+} from '@mui/material'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import { useRouter } from 'next/router'
+import { useState, useMemo, type ChangeEvent } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import CheckIcon from '@/public/images/common/check-filled.svg'
+import LockWarningIcon from '@/public/images/common/lock-warning.svg'
+import PasswordInput from '@/components/settings/SecurityLogin/SocialSignerMFA/PasswordInput'
+import css from '@/components/settings/SecurityLogin/SocialSignerMFA/styles.module.css'
+import BarChartIcon from '@/public/images/common/bar-chart.svg'
+import ShieldIcon from '@/public/images/common/shield.svg'
+import ShieldOffIcon from '@/public/images/common/shield-off.svg'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+
+enum PasswordFieldNames {
+  currentPassword = 'currentPassword',
+  newPassword = 'newPassword',
+  confirmPassword = 'confirmPassword',
+}
+
+type PasswordFormData = {
+  [PasswordFieldNames.currentPassword]: string | undefined
+  [PasswordFieldNames.newPassword]: string
+  [PasswordFieldNames.confirmPassword]: string
+}
+
+export enum PasswordStrength {
+  strong,
+  medium,
+  weak,
+}
+
+// At least 12 characters, one lowercase, one uppercase, one number, one symbol
+const strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{12,})')
+// At least 9 characters, one lowercase, one uppercase, one number, one symbol
+const mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{9,}))')
+
+export const _getPasswordStrength = (value: string): PasswordStrength | undefined => {
+  if (value === '') return undefined
+
+  if (strongPassword.test(value)) {
+    return PasswordStrength.strong
+  }
+
+  if (mediumPassword.test(value)) {
+    return PasswordStrength.medium
+  }
+
+  return PasswordStrength.weak
+}
+
+const passwordStrengthMap = {
+  [PasswordStrength.strong]: {
+    label: 'Strong',
+    className: 'strongPassword',
+  },
+  [PasswordStrength.medium]: {
+    label: 'Medium',
+    className: 'mediumPassword',
+  },
+  [PasswordStrength.weak]: {
+    label: 'Weak',
+    className: 'weakPassword',
+  },
+} as const
+
+const SocialSignerMFA = () => {
+  const router = useRouter()
+  const socialWalletService = useSocialWallet()
+  const [passwordStrength, setPasswordStrength] = useState<PasswordStrength>()
+  const [submitError, setSubmitError] = useState<string>()
+  const [open, setOpen] = useState<boolean>(false)
+
+  const formMethods = useForm<PasswordFormData>({
+    mode: 'all',
+    defaultValues: {
+      [PasswordFieldNames.confirmPassword]: '',
+      [PasswordFieldNames.currentPassword]: undefined,
+      [PasswordFieldNames.newPassword]: '',
+    },
+  })
+
+  const { formState, handleSubmit, reset, watch } = formMethods
+
+  const isPasswordSet = useMemo(() => {
+    if (!socialWalletService) {
+      return false
+    }
+    return socialWalletService.isRecoveryPasswordSet()
+  }, [socialWalletService])
+
+  const onSubmit = async (data: PasswordFormData) => {
+    if (!socialWalletService) return
+
+    try {
+      await socialWalletService.enableMFA(
+        data[PasswordFieldNames.currentPassword],
+        data[PasswordFieldNames.newPassword],
+      )
+      onReset()
+      setOpen(false)
+
+      // This is a workaround so that the isPasswordSet and isMFAEnabled state update
+      router.reload()
+    } catch (e) {
+      setSubmitError('The password you entered is incorrect. Please try again.')
+    }
+  }
+
+  const onReset = () => {
+    reset()
+    setPasswordStrength(undefined)
+    setSubmitError(undefined)
+  }
+
+  const toggleAccordion = () => {
+    setOpen((prev) => !prev)
+  }
+
+  const confirmPassword = watch(PasswordFieldNames.confirmPassword)
+  const newPassword = watch(PasswordFieldNames.newPassword)
+  const passwordsEmpty = confirmPassword === '' && newPassword === ''
+  const passwordsMatch = newPassword === confirmPassword
+
+  const isSubmitDisabled =
+    !passwordsMatch ||
+    passwordStrength === PasswordStrength.weak ||
+    formState.isSubmitting ||
+    !formMethods.formState.isValid
+
+  return (
+    <FormProvider {...formMethods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Box display="flex" flexDirection="column" gap={3} alignItems="baseline">
+          <Typography>
+            Protect your social login signer with a password. It will be used to restore access in another browser or on
+            another device.
+          </Typography>
+          <Accordion expanded={open} defaultExpanded={false} onChange={toggleAccordion}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+              <Box display="flex" alignItems="center" gap={1}>
+                <SvgIcon component={CheckIcon} sx={{ color: isPasswordSet ? 'success.main' : 'border.light' }} />
+                <Typography fontWeight="bold">Password</Typography>
+              </Box>
+            </AccordionSummary>
+            <AccordionDetails sx={{ p: 0 }}>
+              <Grid container>
+                <Grid item container xs={12} md={7} gap={3} p={3}>
+                  {isPasswordSet && (
+                    <>
+                      <FormControl fullWidth>
+                        <PasswordInput
+                          name={PasswordFieldNames.currentPassword}
+                          placeholder="Current password"
+                          label="Current password"
+                          helperText={formState.errors[PasswordFieldNames.currentPassword]?.message}
+                          required
+                        />
+                      </FormControl>
+                      <Divider sx={{ width: 1 }} />
+                    </>
+                  )}
+
+                  <FormControl fullWidth>
+                    <PasswordInput
+                      name={PasswordFieldNames.newPassword}
+                      placeholder="New password"
+                      label="New password"
+                      helperText={formState.errors[PasswordFieldNames.newPassword]?.message}
+                      required
+                      inputProps={{
+                        onChange: (event: ChangeEvent<HTMLInputElement>) => {
+                          const value = event.target.value
+                          setPasswordStrength(_getPasswordStrength(value))
+                        },
+                      }}
+                    />
+                    <Typography
+                      variant="body2"
+                      display="flex"
+                      alignItems="center"
+                      gap={1}
+                      mt={1}
+                      className={
+                        passwordStrength !== undefined
+                          ? css[passwordStrengthMap[passwordStrength].className]
+                          : css.defaultPassword
+                      }
+                    >
+                      <BarChartIcon />
+                      {passwordStrength !== undefined
+                        ? `${passwordStrengthMap[passwordStrength].label} password`
+                        : 'Password strength'}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary" mt={1}>
+                      Include at least 9 or more characters, a number, an uppercase letter and a symbol
+                    </Typography>
+                  </FormControl>
+
+                  <FormControl fullWidth>
+                    <PasswordInput
+                      name={PasswordFieldNames.confirmPassword}
+                      placeholder="Confirm password"
+                      label="Confirm password"
+                      helperText={formState.errors[PasswordFieldNames.confirmPassword]?.message}
+                      required
+                    />
+                    <Typography
+                      variant="body2"
+                      display="flex"
+                      alignItems="center"
+                      gap={1}
+                      mt={1}
+                      className={
+                        passwordsEmpty
+                          ? css.passwordsShouldMatch
+                          : passwordsMatch
+                          ? css.passwordsMatch
+                          : css.passwordsNoMatch
+                      }
+                    >
+                      {passwordsEmpty ? (
+                        <>
+                          <ShieldOffIcon /> Passwords should match
+                        </>
+                      ) : passwordsMatch ? (
+                        <>
+                          <ShieldIcon /> Passwords match
+                        </>
+                      ) : (
+                        <>
+                          <ShieldOffIcon /> Passwords don&apos;t match
+                        </>
+                      )}
+                    </Typography>
+                  </FormControl>
+
+                  {submitError && <Alert severity="error">{submitError}</Alert>}
+
+                  <Box display="flex" justifyContent="space-between" width={1}>
+                    <Button sx={{ fontSize: '14px' }} variant="text" onClick={onReset} disabled={!formState.isDirty}>
+                      Cancel
+                    </Button>
+                    <Track {...MPC_WALLET_EVENTS.UPSERT_PASSWORD}>
+                      <Button sx={{ fontSize: '14px' }} disabled={isSubmitDisabled} type="submit" variant="contained">
+                        {isPasswordSet ? 'Change' : 'Create'} Password
+                      </Button>
+                    </Track>
+                  </Box>
+                </Grid>
+                <Grid
+                  item
+                  xs={12}
+                  md={5}
+                  p={3}
+                  sx={{ borderLeft: (theme) => `1px solid ${theme.palette.border.light}` }}
+                >
+                  <Box>
+                    <LockWarningIcon />
+                    <Typography variant="subtitle1" fontWeight="bold">
+                      You won&apos;t be able to restore this password
+                    </Typography>
+                    <ol className={css.list}>
+                      <Typography component="li" variant="body2">
+                        You will have to input this password if you login with this social login signer in another
+                        browser or on another device.
+                      </Typography>
+                      <Typography component="li" variant="body2">
+                        We suggest to use a password manager or to write the password down on a piece of paper and
+                        secure it.
+                      </Typography>
+                    </ol>
+                  </Box>
+                </Grid>
+              </Grid>
+            </AccordionDetails>
+          </Accordion>
+        </Box>
+      </form>
+    </FormProvider>
+  )
+}
+
+export default SocialSignerMFA
diff --git a/src/components/settings/SecurityLogin/SocialSignerMFA/styles.module.css b/src/components/settings/SecurityLogin/SocialSignerMFA/styles.module.css
new file mode 100644
index 0000000000..b41b19e58f
--- /dev/null
+++ b/src/components/settings/SecurityLogin/SocialSignerMFA/styles.module.css
@@ -0,0 +1,76 @@
+.list {
+  list-style: none;
+  counter-reset: item;
+  padding: 0;
+  margin: var(--space-2) 0;
+}
+
+.list li {
+  counter-increment: item;
+  margin-bottom: var(--space-2);
+  display: flex;
+}
+
+.list li:before {
+  margin-right: var(--space-1);
+  content: counter(item);
+  background: var(--color-primary-main);
+  border-radius: 100%;
+  color: var(--color-background-paper);
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.list li:last-child {
+  margin-bottom: 0;
+}
+
+.defaultPassword,
+.passwordsShouldMatch {
+  color: var(--color-border-main);
+}
+
+.passwordsShouldMatch svg path {
+  stroke: var(--color-border-main);
+}
+
+.defaultPassword svg path {
+  stroke: var(--color-border-main);
+}
+
+.weakPassword {
+  color: var(--color-error-main);
+}
+
+.weakPassword svg path:first-child {
+  stroke: var(--color-error-main);
+}
+
+.mediumPassword {
+  color: var(--color-warning-main);
+}
+
+.mediumPassword svg path:first-child,
+.mediumPassword svg path:nth-child(2) {
+  stroke: var(--color-warning-main);
+}
+
+.strongPassword {
+  color: var(--color-success-main);
+}
+
+.strongPassword svg path {
+  stroke: var(--color-success-main);
+}
+
+.passwordsMatch {
+  color: var(--color-success-main);
+}
+
+.passwordsNoMatch {
+  color: var(--color-error-main);
+}
diff --git a/src/components/settings/SecurityLogin/index.tsx b/src/components/settings/SecurityLogin/index.tsx
new file mode 100644
index 0000000000..0a6e5f8223
--- /dev/null
+++ b/src/components/settings/SecurityLogin/index.tsx
@@ -0,0 +1,51 @@
+import { Grid, Paper, Typography } from '@mui/material'
+import SocialSignerMFA from '@/components/settings/SecurityLogin/SocialSignerMFA'
+import SocialSignerExport from '@/components/settings/SecurityLogin/SocialSignerExport'
+import useWallet from '@/hooks/wallets/useWallet'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+
+const SecurityLogin = () => {
+  const wallet = useWallet()
+
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
+  if (!isSocialLogin) {
+    return (
+      <Paper sx={{ p: 4 }}>
+        <Typography>You are currently not logged in with a social login signer.</Typography>
+      </Paper>
+    )
+  }
+
+  return (
+    <>
+      <Paper sx={{ p: 4 }}>
+        <Grid container spacing={3}>
+          <Grid item lg={4} xs={12}>
+            <Typography variant="h4" fontWeight="bold" mb={1}>
+              Multi-factor Authentication
+            </Typography>
+          </Grid>
+
+          <Grid item xs>
+            <SocialSignerMFA />
+          </Grid>
+        </Grid>
+      </Paper>
+      <Paper sx={{ p: 4, mt: 2 }}>
+        <Grid container spacing={3}>
+          <Grid item lg={4} xs={12}>
+            <Typography variant="h4" fontWeight="bold" mb={1}>
+              Social login signer export
+            </Typography>
+          </Grid>
+          <Grid item xs>
+            <SocialSignerExport />
+          </Grid>
+        </Grid>
+      </Paper>
+    </>
+  )
+}
+
+export default SecurityLogin
diff --git a/src/components/settings/SettingsHeader/index.test.tsx b/src/components/settings/SettingsHeader/index.test.tsx
new file mode 100644
index 0000000000..f50dc917fc
--- /dev/null
+++ b/src/components/settings/SettingsHeader/index.test.tsx
@@ -0,0 +1,78 @@
+import SettingsHeader from '@/components/settings/SettingsHeader/index'
+import * as safeAddress from '@/hooks/useSafeAddress'
+import * as feature from '@/hooks/useChains'
+import * as wallet from '@/hooks/wallets/useWallet'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { connectedWalletBuilder } from '@/tests/builders/wallet'
+
+import { render } from '@/tests/test-utils'
+import { faker } from '@faker-js/faker'
+
+describe('SettingsHeader', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  describe('A safe is open', () => {
+    beforeEach(() => {
+      jest.resetAllMocks()
+      jest.spyOn(safeAddress, 'default').mockReturnValue(faker.finance.ethereumAddress())
+    })
+
+    it('displays safe specific preferences if on a safe', () => {
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Setup')).toBeInTheDocument()
+    })
+
+    it('displays Notifications if feature is enabled', () => {
+      jest.spyOn(feature, 'useHasFeature').mockReturnValue(true)
+
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Notifications')).toBeInTheDocument()
+    })
+
+    it('displays Security & Login if connected wallet is a social signer', () => {
+      const mockWallet = connectedWalletBuilder().with({ label: ONBOARD_MPC_MODULE_LABEL }).build()
+      jest.spyOn(wallet, 'default').mockReturnValue(mockWallet)
+
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Security & Login')).toBeInTheDocument()
+    })
+  })
+
+  describe('No safe is open', () => {
+    beforeEach(() => {
+      jest.resetAllMocks()
+      jest.spyOn(safeAddress, 'default').mockReturnValue('')
+    })
+
+    it('displays general preferences if no safe is open', () => {
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Cookies')).toBeInTheDocument()
+      expect(result.getByText('Appearance')).toBeInTheDocument()
+      expect(result.getByText('Data')).toBeInTheDocument()
+      expect(result.getByText('Environment variables')).toBeInTheDocument()
+    })
+
+    it('displays Notifications if feature is enabled', () => {
+      jest.spyOn(feature, 'useHasFeature').mockReturnValue(true)
+
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Notifications')).toBeInTheDocument()
+    })
+
+    it('displays Security & Login if connected wallet is a social signer', () => {
+      const mockWallet = connectedWalletBuilder().with({ label: ONBOARD_MPC_MODULE_LABEL }).build()
+      jest.spyOn(wallet, 'default').mockReturnValue(mockWallet)
+
+      const result = render(<SettingsHeader />)
+
+      expect(result.getByText('Security & Login')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/components/settings/SettingsHeader/index.tsx b/src/components/settings/SettingsHeader/index.tsx
index 5d35b01d1b..b3ba1e608e 100644
--- a/src/components/settings/SettingsHeader/index.tsx
+++ b/src/components/settings/SettingsHeader/index.tsx
@@ -1,3 +1,6 @@
+import useWallet from '@/hooks/wallets/useWallet'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { useMemo } from 'react'
 import type { ReactElement } from 'react'
 
 import NavTabs from '@/components/common/NavTabs'
@@ -9,21 +12,38 @@ import { AppRoutes } from '@/config/routes'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
 
+type NavItem = {
+  href: string
+  label: string
+}
+
+type HideConditions = Record<string, boolean>
+
+const filterRoutes = (navItems: NavItem[], hideConditions: HideConditions) => {
+  return navItems.filter((item) => !hideConditions[item.href])
+}
+
 const SettingsHeader = (): ReactElement => {
+  const wallet = useWallet()
   const safeAddress = useSafeAddress()
   const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
   const navItems = safeAddress ? settingsNavItems : generalSettingsNavItems
-  const filteredNavItems = isNotificationFeatureEnabled
-    ? navItems
-    : navItems.filter((item) => item.href !== AppRoutes.settings.notifications)
+
+  const filteredItems = useMemo(() => {
+    return filterRoutes(navItems, {
+      [AppRoutes.settings.notifications]: !isNotificationFeatureEnabled,
+      [AppRoutes.settings.securityLogin]: !isSocialLogin,
+    })
+  }, [isNotificationFeatureEnabled, isSocialLogin, navItems])
 
   return (
     <PageHeader
       title={safeAddress ? 'Settings' : 'Preferences'}
       action={
         <div className={css.navWrapper}>
-          <NavTabs tabs={filteredNavItems} />
+          <NavTabs tabs={filteredItems} />
         </div>
       }
     />
diff --git a/src/components/sidebar/SafeList/index.tsx b/src/components/sidebar/SafeList/index.tsx
index 3689c7831a..734ae00339 100644
--- a/src/components/sidebar/SafeList/index.tsx
+++ b/src/components/sidebar/SafeList/index.tsx
@@ -82,7 +82,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
 
   const hasWallet = !!wallet
   const hasNoSafes = Object.keys(ownedSafes).length === 0 && Object.keys(addedSafes).length === 0
-  const isWelcomePage = router.pathname === AppRoutes.welcome
+  const isWelcomePage = router.pathname === AppRoutes.welcome.index || router.pathname === AppRoutes.welcome.socialLogin
   const isSingleTxPage = router.pathname === AppRoutes.transactions.tx
 
   /**
@@ -110,7 +110,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
         {!isWelcomePage && (
           <Track {...OVERVIEW_EVENTS.ADD_SAFE}>
             <Link
-              href={{ pathname: AppRoutes.welcome, query: { chain: currentChain?.shortName } }}
+              href={{ pathname: AppRoutes.welcome.index, query: { chain: currentChain?.shortName } }}
               passHref
               legacyBehavior
             >
@@ -136,7 +136,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
 
               <Typography variant="body2" color="primary.light" textAlign="center" mt={3}>
                 {!isWelcomePage ? (
-                  <Link href={{ pathname: AppRoutes.welcome, query: router.query }} passHref legacyBehavior>
+                  <Link href={{ pathname: AppRoutes.welcome.index, query: router.query }} passHref legacyBehavior>
                     <MuiLink onClick={closeDrawer}>{NO_SAFE_MESSAGE}</MuiLink>
                   </Link>
                 ) : (
@@ -148,7 +148,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
           ) : (
             <Box display="flex" flexDirection="column" alignItems="center" gap={3} maxWidth={250}>
               <Box display="flex" alignItems="center" justifyContent="center">
-                <KeyholeIcon />
+                <KeyholeIcon size={40} />
               </Box>
 
               <Typography variant="body2" color="primary.light" textAlign="center" sx={{ textWrap: 'balance' }}>
@@ -193,7 +193,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
               {!addedSafeEntriesOnChain.length && !ownedSafesOnChain.length && (
                 <Typography variant="body2" color="primary.light" p={2} textAlign="center">
                   {!isWelcomePage ? (
-                    <Link href={{ pathname: AppRoutes.welcome, query: router.query }} passHref legacyBehavior>
+                    <Link href={{ pathname: AppRoutes.welcome.index, query: router.query }} passHref legacyBehavior>
                       <MuiLink onClick={closeDrawer}>{NO_SAFE_MESSAGE}</MuiLink>
                     </Link>
                   ) : (
diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index f25d8798d3..b8b46e9a5c 100644
--- a/src/components/sidebar/Sidebar/index.tsx
+++ b/src/components/sidebar/Sidebar/index.tsx
@@ -10,7 +10,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
-import { DataWidget } from '@/components/welcome/DataWidget'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
index 9f8dbde18f..359ec63826 100644
--- a/src/components/sidebar/SidebarNavigation/config.tsx
+++ b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -96,6 +96,10 @@ export const settingsNavItems = [
     label: 'Spending limits',
     href: AppRoutes.settings.spendingLimits,
   },
+  {
+    label: 'Security & Login',
+    href: AppRoutes.settings.securityLogin,
+  },
   {
     label: 'Safe Apps',
     href: AppRoutes.settings.safeApps.index,
@@ -123,6 +127,10 @@ export const generalSettingsNavItems = [
     label: 'Notifications',
     href: AppRoutes.settings.notifications,
   },
+  {
+    label: 'Security & Login',
+    href: AppRoutes.settings.securityLogin,
+  },
   {
     label: 'Data',
     href: AppRoutes.settings.data,
diff --git a/src/components/tx-flow/index.tsx b/src/components/tx-flow/index.tsx
index ba3abfa0af..3fb8101969 100644
--- a/src/components/tx-flow/index.tsx
+++ b/src/components/tx-flow/index.tsx
@@ -19,6 +19,7 @@ export const TxModalContext = createContext<TxModalContextType>({
   setFullWidth: noop,
 })
 
+// TODO: Rename TxModalProvider, setTxFlow, TxModalDialog to not contain Tx since it can be used for any type of modal as a global provider
 const confirmClose = () => {
   return confirm('Closing this window will discard your current progress.')
 }
diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
index 9387296884..46d51deb55 100644
--- a/src/components/welcome/NewSafe.tsx
+++ b/src/components/welcome/NewSafe.tsx
@@ -1,161 +1,50 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Button,
-  Grid,
-  Paper,
-  SvgIcon,
-  Typography,
-  AccordionSummary,
-  AccordionDetails,
-  Accordion,
-  useMediaQuery,
-  Box,
-} from '@mui/material'
-import { useRouter } from 'next/router'
-import { CREATE_SAFE_EVENTS, LOAD_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe'
-import Track from '../common/Track'
-import { AppRoutes } from '@/config/routes'
-import SafeList from '@/components/sidebar/SafeList'
+import React from 'react'
+import { Box, Grid, SvgIcon, Typography } from '@mui/material'
 import css from './styles.module.css'
-import NewSafeIcon from '@/public/images/welcome/new-safe.svg'
-import LoadSafeIcon from '@/public/images/welcome/load-safe.svg'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { useTheme } from '@mui/material/styles'
-import { DataWidget } from '@/components/welcome/DataWidget'
-import useWallet from '@/hooks/wallets/useWallet'
-import { useCurrentChain } from '@/hooks/useChains'
+import CheckFilled from '@/public/images/common/check-filled.svg'
 
-const NewSafe = () => {
-  const [expanded, setExpanded] = useState(true)
-  const router = useRouter()
-  const theme = useTheme()
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'))
-  const wallet = useWallet()
-  const currentChain = useCurrentChain()
-
-  useEffect(() => {
-    setExpanded(!isSmallScreen)
-  }, [isSmallScreen])
+import WelcomeLogin from './WelcomeLogin'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
 
-  const toggleSafeList = () => {
-    return isSmallScreen ? setExpanded((prev) => !prev) : null
-  }
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
 
+const NewSafe = () => {
   return (
-    <Grid container spacing={3} p={3} pb={0} flex={1}>
-      <Grid item xs={12} md={4} lg={3.5} minWidth={{ md: 480 }} className={css.sidebar}>
-        <Box display="flex" flexDirection="column" height="100%">
-          <Box flex={1}>
-            <Accordion className={css.accordion} onClick={toggleSafeList} expanded={expanded} defaultExpanded={true}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography variant="h4" display="inline" fontWeight={700}>
-                  My Safe Accounts
-                </Typography>
-              </AccordionSummary>
-
-              <AccordionDetails sx={{ padding: 0 }} onClick={(event) => event.stopPropagation()}>
-                <SafeList />
-              </AccordionDetails>
-            </Accordion>
-          </Box>
-
-          <Box mt={2} display={{ xs: 'none', md: 'block' }}>
-            <DataWidget />
-          </Box>
-        </Box>
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        md={4}
-        lg={3.5}
-        minWidth={{ md: 480 }}
-        className={css.sidebar}
-        display={{ md: 'none' }}
-        order={3}
-      >
-        <Box>
-          <DataWidget />
-        </Box>
-      </Grid>
-
-      <Grid item flex={1}>
-        <div className={css.content}>
-          <Typography
-            variant="h1"
-            fontSize={[44, null, 52]}
-            lineHeight={1}
-            letterSpacing={-1.5}
-            color="static.main"
-            mb={1}
-          >
-            Welcome to {'Safe{Wallet}'}
-          </Typography>
-
-          <Typography mb={5} color="static.main">
-            The most trusted decentralized custody protocol and collective asset management platform.
-          </Typography>
-
-          <Grid container spacing={3} sx={{ maxWidth: '800px' }}>
-            <Grid item xs={12} lg={6}>
-              <Paper className={css.createAddCard}>
-                <SvgIcon component={NewSafeIcon} inheritViewBox sx={{ width: '42px', height: '42px' }} />
-                <Typography variant="h3" fontWeight={700} mb={1} mt={3}>
-                  Create Safe Account
-                </Typography>
-
-                <Typography variant="body2" mb={3}>
-                  A new Account that is controlled by one or multiple owners.
-                </Typography>
-
-                <span style={{ flex: 1 }} />
-                <Track {...CREATE_SAFE_EVENTS.CREATE_BUTTON}>
-                  <Button
-                    variant={wallet ? 'contained' : 'outlined'}
-                    onClick={() =>
-                      router.push({
-                        pathname: AppRoutes.newSafe.create,
-                        query: { chain: currentChain?.shortName },
-                      })
-                    }
-                  >
-                    + Create new Account
-                  </Button>
-                </Track>
-              </Paper>
-            </Grid>
-
-            <Grid item xs={12} lg={6}>
-              <Paper className={css.createAddCard}>
-                <SvgIcon component={LoadSafeIcon} inheritViewBox sx={{ width: '42px', height: '42px' }} />
-                <Typography variant="h3" fontWeight={700} mb={1} mt={3}>
-                  Add existing Account
-                </Typography>
-
-                <Typography variant="body2" mb={3}>
-                  Already have a Safe Account? Add it via its address.
-                </Typography>
-
-                <span style={{ flex: 1 }} />
-                <Track {...LOAD_SAFE_EVENTS.LOAD_BUTTON}>
-                  <Button
-                    variant="outlined"
-                    onClick={() =>
-                      router.push({
-                        pathname: AppRoutes.newSafe.load,
-                        query: { chain: currentChain?.shortName },
-                      })
-                    }
-                  >
-                    Add existing Account
-                  </Button>
-                </Track>
-              </Paper>
-            </Grid>
-          </Grid>
-        </div>
+    <>
+      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+        <Grid item xs={12} lg={6}>
+          <WelcomeLogin />
+        </Grid>
+        <Grid item xs={12} lg={6} flex={1}>
+          <div className={css.content}>
+            <Box minWidth={{ md: 480 }} className={css.sidebar}>
+              <SafeListDrawer />
+            </Box>
+
+            <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
+              Unlock a new way of ownership
+            </Typography>
+
+            <Typography mb={1} color="static.main">
+              The most trusted decentralized custody protocol and collective asset management platform.
+            </Typography>
+
+            <ul className={css.bulletList}>
+              <BulletListItem text="Stealth security with multiple owners" />
+              <BulletListItem text="Make it yours with modules and guards" />
+              <BulletListItem text="Access 130+ ecosystem apps" />
+            </ul>
+          </div>
+        </Grid>
       </Grid>
-    </Grid>
+    </>
   )
 }
 
diff --git a/src/components/welcome/NewSafeSocial.tsx b/src/components/welcome/NewSafeSocial.tsx
new file mode 100644
index 0000000000..590e9625f7
--- /dev/null
+++ b/src/components/welcome/NewSafeSocial.tsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import { Box, Button, Grid, Typography } from '@mui/material'
+import css from './styles.module.css'
+import Link from 'next/link'
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import WelcomeLogin from './WelcomeLogin'
+import GnosisChainLogo from '@/public/images/common/gnosis-chain-logo.png'
+import Image from 'next/image'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
+
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
+
+const MarqueeItem = () => {
+  return (
+    <li className={css.marqueeItem}>
+      Free on
+      <Image src={GnosisChainLogo} alt="Gnosis Chain logo" width={24} height={24} />
+      Gnosis Chain
+    </li>
+  )
+}
+
+const NewSafeSocial = () => {
+  return (
+    <>
+      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+        <Grid item xs={12} lg={6}>
+          <WelcomeLogin />
+        </Grid>
+        <Grid item xs={12} lg={6} flex={1}>
+          <div className={css.content}>
+            <Box minWidth={{ md: 480 }} className={css.sidebar}>
+              <SafeListDrawer />
+            </Box>
+
+            <Box pt={5} alignSelf="center" margin="auto">
+              <Typography
+                variant="h1"
+                fontSize={[44, null, 52]}
+                lineHeight={1.15}
+                letterSpacing={-1.5}
+                color="static.main"
+              >
+                Get the most secure web3 account in {'<'}30 seconds
+              </Typography>
+
+              <ul className={css.numberList}>
+                <BulletListItem text="Choose your Google Account" />
+                <BulletListItem text="Review, wait and you’re done!" />
+                <BulletListItem text="Add more signers later to level up your security" />
+              </ul>
+
+              <Link href="https://safe.global/campaigns/social-login-gnosis" passHref>
+                <Button startIcon={<ChevronLeftIcon />} className={css.button}>
+                  Back to landing page
+                </Button>
+              </Link>
+            </Box>
+
+            <div className={css.marquee}>
+              <ul className={css.marqueeContent}>
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+              <ul className={css.marqueeContent} aria-hidden="true">
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default NewSafeSocial
diff --git a/src/components/welcome/DataWidget.tsx b/src/components/welcome/SafeListDrawer/DataWidget.tsx
similarity index 100%
rename from src/components/welcome/DataWidget.tsx
rename to src/components/welcome/SafeListDrawer/DataWidget.tsx
diff --git a/src/components/welcome/SafeListDrawer/index.tsx b/src/components/welcome/SafeListDrawer/index.tsx
new file mode 100644
index 0000000000..afa8f5418d
--- /dev/null
+++ b/src/components/welcome/SafeListDrawer/index.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import SafeList from '@/components/sidebar/SafeList'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
+import { Button, Drawer, Typography } from '@mui/material'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import { useAppSelector } from '@/store'
+import { selectTotalAdded } from '@/store/addedSafesSlice'
+import useOwnedSafes from '@/hooks/useOwnedSafes'
+import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
+import css from './styles.module.css'
+
+const SafeListDrawer = () => {
+  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
+  const ownedSafes = useOwnedSafes()
+  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
+  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  const closeSidebar = () => setShowSidebar(false)
+
+  if (totalNumberOfSafes <= 0) {
+    return null
+  }
+
+  return (
+    <>
+      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
+        <div className={drawerCSS.drawer}>
+          <SafeList closeDrawer={closeSidebar} />
+
+          <div className={drawerCSS.dataWidget}>
+            <DataWidget />
+          </div>
+        </div>
+      </Drawer>
+      <Button
+        className={css.button}
+        fullWidth
+        variant="contained"
+        color="background"
+        startIcon={<ChevronRightIcon />}
+        onClick={() => setShowSidebar(true)}
+      >
+        <Typography className={css.buttonText} fontWeight="bold">
+          My Safe Accounts{' '}
+          <Typography color="text.secondary" fontWeight="bold">
+            ({totalNumberOfSafes})
+          </Typography>
+        </Typography>
+      </Button>
+    </>
+  )
+}
+
+export default SafeListDrawer
diff --git a/src/components/welcome/SafeListDrawer/styles.module.css b/src/components/welcome/SafeListDrawer/styles.module.css
new file mode 100644
index 0000000000..5aed51e96f
--- /dev/null
+++ b/src/components/welcome/SafeListDrawer/styles.module.css
@@ -0,0 +1,33 @@
+.button {
+  padding: var(--space-2);
+}
+
+.buttonText {
+  align-self: center;
+  margin: auto;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  padding: var(--space-1);
+  background-color: var(--color-background-main);
+}
+
+.card {
+  padding: var(--space-3);
+  gap: var(--space-2);
+  display: flex;
+  flex-direction: column;
+}
+
+.card :global .MuiCardHeader-root,
+.card :global .MuiCardContent-root {
+  padding: 0;
+}
+
+.cardHeader {
+  text-align: left;
+}
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
new file mode 100644
index 0000000000..c89c4f1f8e
--- /dev/null
+++ b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -0,0 +1,63 @@
+import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
+import Track from '@/components/common/Track'
+import useWallet from '@/hooks/wallets/useWallet'
+import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { CREATE_SAFE_EVENTS } from '@/services/analytics'
+import { Box, Button, Typography } from '@mui/material'
+import { EthHashInfo } from '@safe-global/safe-react-components'
+
+const WalletLogin = ({ onLogin }: { onLogin: () => void }) => {
+  const wallet = useWallet()
+  const connectWallet = useConnectWallet()
+
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+
+  if (wallet !== null && !isSocialLogin) {
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
+          <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onLogin}>
+            <Box
+              width="100%"
+              justifyContent="space-between"
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              gap={1}
+            >
+              <Box display="flex" flexDirection="column" alignItems="flex-start">
+                <Typography variant="subtitle2" fontWeight={700}>
+                  Continue with {wallet.label}
+                </Typography>
+                {wallet.address && <EthHashInfo address={wallet.address} shortAddress avatarSize={16} />}
+              </Box>
+              {wallet.icon && (
+                <img
+                  width="24px"
+                  height="24px"
+                  src={`data:image/svg+xml;utf8,${encodeURIComponent(wallet.icon)}`}
+                  alt="icon"
+                />
+              )}
+            </Box>
+          </Button>
+        </Track>
+      </Box>
+    )
+  }
+
+  return (
+    <Button
+      onClick={connectWallet}
+      sx={{ minHeight: '42px' }}
+      variant="contained"
+      size="small"
+      disableElevation
+      fullWidth
+    >
+      Connect wallet
+    </Button>
+  )
+}
+
+export default WalletLogin
diff --git a/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx b/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
new file mode 100644
index 0000000000..53e057b7c4
--- /dev/null
+++ b/src/components/welcome/WelcomeLogin/__tests__/WalletLogin.test.tsx
@@ -0,0 +1,96 @@
+import { act, render, waitFor } from '@/tests/test-utils'
+import * as useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
+import * as useWallet from '@/hooks/wallets/useWallet'
+import WalletLogin from '../WalletLogin'
+import { hexZeroPad } from '@ethersproject/bytes'
+import { type EIP1193Provider } from '@web3-onboard/common'
+import { shortenAddress } from '@/utils/formatters'
+
+describe('WalletLogin', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should render continue with connected wallet', async () => {
+    const mockOnLogin = jest.fn()
+    const walletAddress = hexZeroPad('0x1', 20)
+    jest.spyOn(useWallet, 'default').mockReturnValue({
+      address: walletAddress,
+      chainId: '5',
+      label: 'MetaMask',
+      provider: {} as unknown as EIP1193Provider,
+    })
+    jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn())
+
+    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+
+    await waitFor(() => {
+      expect(result.findByText(shortenAddress(walletAddress))).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    const button = await result.findByRole('button')
+    button.click()
+
+    expect(mockOnLogin).toHaveBeenCalled()
+  })
+
+  it('should render connect wallet if no wallet is connected', async () => {
+    const mockOnLogin = jest.fn()
+    const walletAddress = hexZeroPad('0x1', 20)
+    const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null)
+    jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn().mockReturnValue([{}]))
+
+    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+
+    await waitFor(() => {
+      expect(result.findByText('Connect wallet')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    await act(async () => {
+      // Click the button and mock a wallet connection
+      const button = await result.findByRole('button')
+      button.click()
+      mockUseWallet.mockReset().mockReturnValue({
+        address: walletAddress,
+        chainId: '5',
+        label: 'MetaMask',
+        provider: {} as unknown as EIP1193Provider,
+      })
+    })
+
+    await waitFor(() => {
+      expect(result.getByText('Connect wallet')).toBeInTheDocument()
+    })
+  })
+
+  it('should not invoke the callback if connection fails', async () => {
+    const mockOnLogin = jest.fn()
+    jest.spyOn(useWallet, 'default').mockReturnValue(null)
+
+    jest.spyOn(useConnectWallet, 'default').mockReturnValue(jest.fn().mockReturnValue([]))
+
+    const result = render(<WalletLogin onLogin={mockOnLogin} />)
+
+    await waitFor(() => {
+      expect(result.findByText('Connect wallet')).resolves.toBeDefined()
+    })
+
+    // We do not automatically invoke the callback as the user did not actively connect
+    expect(mockOnLogin).not.toHaveBeenCalled()
+
+    act(() => {
+      const button = result.getByRole('button')
+      button.click()
+    })
+
+    await waitFor(() => {
+      expect(mockOnLogin).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx
new file mode 100644
index 0000000000..ad768bf84a
--- /dev/null
+++ b/src/components/welcome/WelcomeLogin/index.tsx
@@ -0,0 +1,60 @@
+import SocialSigner from '@/components/common/SocialSigner'
+import { AppRoutes } from '@/config/routes'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
+import { Paper, SvgIcon, Typography, Divider, Link, Box } from '@mui/material'
+import SafeLogo from '@/public/images/logo-text.svg'
+import css from './styles.module.css'
+import { useRouter } from 'next/router'
+import WalletLogin from './WalletLogin'
+import { LOAD_SAFE_EVENTS, CREATE_SAFE_EVENTS } from '@/services/analytics/events/createLoadSafe'
+import Track from '@/components/common/Track'
+import { trackEvent } from '@/services/analytics'
+
+const WelcomeLogin = () => {
+  const router = useRouter()
+  const isSocialLoginEnabled = useHasFeature(FEATURES.SOCIAL_LOGIN)
+
+  const continueToCreation = () => {
+    trackEvent(CREATE_SAFE_EVENTS.OPEN_SAFE_CREATION)
+    router.push({ pathname: AppRoutes.newSafe.create, query: router.query })
+  }
+
+  return (
+    <Paper className={css.loginCard} data-testid="welcome-login">
+      <Box className={css.loginContent}>
+        <SvgIcon component={SafeLogo} inheritViewBox sx={{ height: '24px', width: '80px' }} />
+        <Typography variant="h6" mt={6} fontWeight={700}>
+          Create Account
+        </Typography>
+        <Typography mb={2} textAlign="center">
+          Choose how you would like to create your Safe Account
+        </Typography>
+        <WalletLogin onLogin={continueToCreation} />
+
+        {isSocialLoginEnabled && (
+          <>
+            <Divider sx={{ mt: 2, mb: 2, width: '100%' }}>
+              <Typography color="text.secondary" fontWeight={700} variant="overline">
+                or
+              </Typography>
+            </Divider>
+
+            <SocialSigner onLogin={continueToCreation} />
+          </>
+        )}
+
+        <Typography mt={2} textAlign="center">
+          Already have a Safe Account?
+        </Typography>
+        <Track {...LOAD_SAFE_EVENTS.LOAD_BUTTON}>
+          <Link color="primary" href={AppRoutes.newSafe.load}>
+            Add existing one
+          </Link>
+        </Track>
+      </Box>
+    </Paper>
+  )
+}
+
+export default WelcomeLogin
diff --git a/src/components/welcome/WelcomeLogin/styles.module.css b/src/components/welcome/WelcomeLogin/styles.module.css
new file mode 100644
index 0000000000..ba47057527
--- /dev/null
+++ b/src/components/welcome/WelcomeLogin/styles.module.css
@@ -0,0 +1,19 @@
+.loginCard {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-2);
+}
+
+.loginContent {
+  display: flex;
+  height: 100%;
+  width: 320px;
+  gap: var(--space-1);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
index 6b2c573afb..fe9fa566d5 100644
--- a/src/components/welcome/styles.module.css
+++ b/src/components/welcome/styles.module.css
@@ -1,70 +1,106 @@
-.accordion :global .MuiAccordionDetails-root > div > div:first-child,
-.accordion :global .MuiAccordionSummary-expandIconWrapper {
-  display: none;
+.sidebar {
+  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
+  overflow-y: auto;
+  align-self: flex-start;
+  margin-bottom: auto;
+  width: 100%;
 }
 
-.accordion {
-  border: 0;
-  height: 100%;
+.bulletList {
+  list-style: none;
+  margin-bottom: auto;
+  padding: 0;
 }
 
-.accordion :global .MuiAccordionSummary-root {
-  background: transparent !important;
-  padding: var(--space-3);
-  border-bottom: 1px solid var(--color-border-light);
-  pointer-events: none;
+.bulletList li {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+  align-items: center;
+  margin-bottom: var(--space-2);
 }
 
-.accordion :global .MuiAccordionSummary-content {
-  margin: 0;
+.numberList {
+  margin: var(--space-5) 0;
+  padding: 0;
+  list-style: none;
 }
 
-.sidebar {
-  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
-  overflow-y: auto;
+.numberList li {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+  align-items: center;
+  margin-bottom: var(--space-2);
+  counter-increment: item;
 }
 
-.content {
-  background: linear-gradient(-90deg, #10ff84, #5fddff);
-  background-size: 200% 200%;
-  animation: gradient 15s ease infinite;
-  border-radius: 6px;
-  padding: var(--space-8);
+.numberList li:before {
+  margin-right: var(--space-1);
+  content: counter(item);
+  background: var(--color-static-main);
+  border-radius: 100%;
+  color: white;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.marquee {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--space-6);
+  background-color: var(--color-static-main);
+  color: white;
+  padding: 20px;
+  margin: var(--space-3) calc(-1 * var(--space-9)) calc(-1 * var(--space-3));
 }
 
-.createAddCard {
+.marqueeContent {
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
   display: flex;
-  flex-direction: column;
-  padding: var(--space-4);
-  height: 100%;
+  justify-content: space-around;
+  min-width: 100%;
+  gap: var(--space-6);
+  animation: scroll 10s linear infinite;
 }
 
-.fileIcon {
+.marqueeItem {
+  font-size: 18px;
   display: flex;
   align-items: center;
-  padding: var(--space-1);
-  background-color: var(--color-background-main);
 }
 
-.card {
-  padding: var(--space-3);
-  gap: var(--space-2);
+.marqueeItem img {
+  margin: 0 var(--space-1);
+}
+
+.content {
+  background: linear-gradient(-90deg, #10ff84, #5fddff);
+  background-size: 200% 200%;
+  animation: gradient 15s ease infinite;
+  border-radius: 6px;
+  padding: var(--space-9);
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  height: 100%;
 }
 
-.card :global .MuiCardHeader-root,
-.card :global .MuiCardContent-root {
-  padding: 0;
+.checkIcon {
+  color: var(--color-static-main);
 }
 
-.cardHeader {
-  text-align: left;
+.button {
+  color: var(--color-static-main);
 }
 
 @media (max-width: 899.95px) {
@@ -72,27 +108,23 @@
     height: 100%;
   }
 
-  .accordion {
-    height: auto;
-  }
-
-  .accordion :global .MuiAccordionSummary-root {
-    pointer-events: auto;
-  }
-
-  .accordion :global .MuiAccordionSummary-expandIconWrapper {
-    display: block;
-  }
-
   .content {
     padding: var(--space-6);
   }
+
+  .marquee {
+    margin: var(--space-3) calc(-1 * var(--space-6)) calc(-1 * var(--space-3));
+  }
 }
 
 @media (max-width: 599.95px) {
   .content {
     padding: var(--space-4);
   }
+
+  .marquee {
+    margin: var(--space-3) calc(-1 * var(--space-4)) 0;
+  }
 }
 
 @keyframes gradient {
@@ -106,3 +138,12 @@
     background-position: 0 50%;
   }
 }
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--space-6)));
+  }
+}
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 27402a440f..c9c77c23f6 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -1,6 +1,5 @@
 export const AppRoutes = {
   '404': '/404',
-  welcome: '/welcome',
   wc: '/wc',
   terms: '/terms',
   privacy: '/privacy',
@@ -29,6 +28,7 @@ export const AppRoutes = {
   settings: {
     spendingLimits: '/settings/spending-limits',
     setup: '/settings/setup',
+    securityLogin: '/settings/security-login',
     notifications: '/settings/notifications',
     modules: '/settings/modules',
     index: '/settings',
@@ -50,4 +50,8 @@ export const AppRoutes = {
     index: '/transactions',
     history: '/transactions/history',
   },
+  welcome: {
+    socialLogin: '/welcome/social-login',
+    index: '/welcome',
+  },
 }
diff --git a/src/hooks/__tests__/useTxTracking.test.ts b/src/hooks/__tests__/useTxTracking.test.ts
index 435f51f1a5..25ec9da7db 100644
--- a/src/hooks/__tests__/useTxTracking.test.ts
+++ b/src/hooks/__tests__/useTxTracking.test.ts
@@ -5,10 +5,8 @@ import { trackEvent, WALLET_EVENTS } from '@/services/analytics'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 
 jest.mock('@/services/analytics', () => ({
+  ...jest.requireActual('@/services/analytics'),
   trackEvent: jest.fn(),
-  WALLET_EVENTS: {
-    ONCHAIN_INTERACTION: { category: 'Wallet', action: 'Onchain interaction' },
-  },
 }))
 
 jest.mock('@/services/tx/txDetails', () => ({
@@ -28,4 +26,39 @@ describe('useTxTracking', () => {
       label: 'google.com',
     })
   })
+
+  beforeEach(() => {
+    // jest.resetAllMocks()
+  })
+
+  it('should track relayed executions', () => {
+    renderHook(() => useTxTracking())
+
+    txDispatch(TxEvent.RELAYING, {
+      taskId: '0x123',
+      groupKey: '0x234',
+    })
+    expect(trackEvent).toBeCalledWith({ ...WALLET_EVENTS.ONCHAIN_INTERACTION, label: 'google.com' })
+  })
+
+  it('should track tx signing', async () => {
+    renderHook(() => useTxTracking())
+
+    txDispatch(TxEvent.SIGNED, {
+      txId: '0x123',
+    })
+    await act(() => Promise.resolve())
+
+    expect(trackEvent).toBeCalledWith({ ...WALLET_EVENTS.OFFCHAIN_SIGNATURE, label: 'google.com' })
+  })
+
+  it('should track tx execution', () => {
+    renderHook(() => useTxTracking())
+
+    txDispatch(TxEvent.PROCESSING, {
+      txId: '0x123',
+      txHash: '0x234',
+    })
+    expect(trackEvent).toBeCalledWith({ ...WALLET_EVENTS.ONCHAIN_INTERACTION, label: 'google.com' })
+  })
 })
diff --git a/src/hooks/useMnemonicName/dict.ts b/src/hooks/useMnemonicName/dict.ts
index 7e6608315e..d45be71e76 100644
--- a/src/hooks/useMnemonicName/dict.ts
+++ b/src/hooks/useMnemonicName/dict.ts
@@ -101,7 +101,6 @@ goshawk
 grasshopper
 grouse
 guanaco
-guinea-pig
 gull
 hamster
 hare
@@ -130,7 +129,6 @@ kangaroo
 kingfisher
 kinkajou
 koala
-komodo-dragon
 kookaburra
 kouprey
 kudu
@@ -188,7 +186,6 @@ pheasant
 pig
 pigeon
 pika
-polar-bear
 pony
 porcupine
 porpoise
@@ -201,18 +198,15 @@ raccoon
 ram
 rat
 raven
-red-deer
-red-panda
 reindeer
 rhea
 rhinoceros
 rook
 salamander
 salmon
-sand-dollar
+sand
 sandpiper
 sardine
-sea-lion
 seahorse
 seal
 shark
@@ -278,7 +272,6 @@ excellent
 merry
 amiable
 exceptional
-mild-mannered
 amused
 excited
 nice
@@ -322,10 +315,8 @@ calm
 good
 proud
 charming
-good-humored
 relaxed
 cheerful
-good-natured
 reliable
 cheery
 gracious
diff --git a/src/hooks/useMnemonicName/index.ts b/src/hooks/useMnemonicName/index.ts
index 3253bb7fcf..e61101b3e7 100644
--- a/src/hooks/useMnemonicName/index.ts
+++ b/src/hooks/useMnemonicName/index.ts
@@ -5,13 +5,15 @@ import { animalsDict, adjectivesDict } from './dict'
 const animals: string[] = animalsDict.trim().split(/\s+/)
 const adjectives: string[] = adjectivesDict.trim().split(/\s+/)
 
+const capitalize = (word: string) => (word.length > 0 ? `${word.charAt(0).toUpperCase()}${word.slice(1)}` : word)
+
 const getRandomItem = <T>(arr: T[]): T => {
   return arr[Math.floor(arr.length * Math.random())]
 }
 
-export const getRandomName = (noun = getRandomItem<string>(animals)): string => {
-  const adj = getRandomItem<string>(adjectives)
-  return `${adj}-${noun}`
+export const getRandomName = (noun = capitalize(getRandomItem<string>(animals))): string => {
+  const adj = capitalize(getRandomItem<string>(adjectives))
+  return `${adj} ${noun}`
 }
 
 export const useMnemonicName = (noun?: string): string => {
@@ -19,6 +21,6 @@ export const useMnemonicName = (noun?: string): string => {
 }
 
 export const useMnemonicSafeName = (): string => {
-  const networkName = useCurrentChain()?.chainName.toLowerCase()
-  return useMnemonicName(`${networkName}-safe`)
+  const networkName = useCurrentChain()?.chainName
+  return useMnemonicName(`${networkName} Safe`)
 }
diff --git a/src/hooks/useMnemonicName/useMnemonicName.test.ts b/src/hooks/useMnemonicName/useMnemonicName.test.ts
index a47b206aff..7dbb3bc3dc 100644
--- a/src/hooks/useMnemonicName/useMnemonicName.test.ts
+++ b/src/hooks/useMnemonicName/useMnemonicName.test.ts
@@ -11,34 +11,34 @@ jest.mock('@/hooks/useChains', () => ({
 
 describe('useMnemonicName tests', () => {
   it('should generate a random name', () => {
-    expect(getRandomName()).toMatch(/^[a-z-]+-[a-z]+$/)
-    expect(getRandomName()).toMatch(/^[a-z-]+-[a-z]+$/)
-    expect(getRandomName()).toMatch(/^[a-z-]+-[a-z]+$/)
+    expect(getRandomName()).toMatch(/^[A-Z][a-z-]+ [A-Z][a-z]+$/)
+    expect(getRandomName()).toMatch(/^[A-Z][a-z-]+ [A-Z][a-z]+$/)
+    expect(getRandomName()).toMatch(/^[A-Z][a-z-]+ [A-Z][a-z]+$/)
   })
 
   it('should work as a hook', () => {
     const { result } = renderHook(() => useMnemonicName())
-    expect(result.current).toMatch(/^[a-z-]+-[a-z]+$/)
+    expect(result.current).toMatch(/^[A-Z][a-z-]+ [A-Z][a-z]+$/)
   })
 
   it('should work as a hook with a noun param', () => {
     const { result } = renderHook(() => useMnemonicName('test'))
-    expect(result.current).toMatch(/^[a-z-]+-test$/)
+    expect(result.current).toMatch(/^[A-Z][a-z-]+ test$/)
   })
 
   it('should change if the noun changes', () => {
     let noun = 'test'
     const { result, rerender } = renderHook(() => useMnemonicName(noun))
-    expect(result.current).toMatch(/^[a-z-]+-test$/)
+    expect(result.current).toMatch(/^[A-Z][a-z-]+ test$/)
 
     noun = 'changed'
     rerender()
-    expect(result.current).toMatch(/^[a-z-]+-changed$/)
+    expect(result.current).toMatch(/^[A-Z][a-z-]+ changed$/)
   })
 
   it('should return a random safe name', () => {
     const { result } = renderHook(() => useMnemonicSafeName())
-    const regex = new RegExp(`^[a-z-]+-${mockChain.chainName.toLowerCase()}-safe$`)
+    const regex = new RegExp(`^[A-Z][a-z-]+ ${mockChain.chainName} Safe$`)
     expect(result.current).toMatch(regex)
   })
 })
diff --git a/src/hooks/wallets/__tests__/useOnboard.test.ts b/src/hooks/wallets/__tests__/useOnboard.test.ts
new file mode 100644
index 0000000000..7364078c7c
--- /dev/null
+++ b/src/hooks/wallets/__tests__/useOnboard.test.ts
@@ -0,0 +1,254 @@
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { faker } from '@faker-js/faker'
+import type { EIP1193Provider, OnboardAPI, WalletState } from '@web3-onboard/core'
+import { getConnectedWallet, switchWallet } from '../useOnboard'
+
+// mock wallets
+jest.mock('@/hooks/wallets/wallets', () => ({
+  getDefaultWallets: jest.fn(() => []),
+  getRecommendedInjectedWallets: jest.fn(() => []),
+}))
+
+describe('useOnboard', () => {
+  describe('getConnectedWallet', () => {
+    it('returns the connected wallet', () => {
+      const wallets = [
+        {
+          label: 'Wallet 1',
+          icon: 'wallet1.svg',
+          provider: null as unknown as EIP1193Provider,
+          chains: [{ id: '0x4' }],
+          accounts: [
+            {
+              address: '0x1234567890123456789012345678901234567890',
+              ens: null,
+              balance: null,
+            },
+          ],
+        },
+        {
+          label: 'Wallet 2',
+          icon: 'wallet2.svg',
+          provider: null as unknown as EIP1193Provider,
+          chains: [{ id: '0x100' }],
+          accounts: [
+            {
+              address: '0x2',
+              ens: null,
+              balance: null,
+            },
+          ],
+        },
+      ] as WalletState[]
+
+      expect(getConnectedWallet(wallets)).toEqual({
+        label: 'Wallet 1',
+        icon: 'wallet1.svg',
+        address: '0x1234567890123456789012345678901234567890',
+        provider: wallets[0].provider,
+        chainId: '4',
+      })
+    })
+
+    it('should return null if the address is invalid', () => {
+      const wallets = [
+        {
+          label: 'Wallet 1',
+          icon: 'wallet1.svg',
+          provider: null as unknown as EIP1193Provider,
+          chains: [{ id: '0x4' }],
+          accounts: [
+            {
+              address: '0xinvalid',
+              ens: null,
+              balance: null,
+            },
+          ],
+        },
+      ] as WalletState[]
+
+      expect(getConnectedWallet(wallets)).toBeNull()
+    })
+  })
+
+  describe('switchWallet', () => {
+    it('should keep the social signer wallet connected if switching wallets fails', async () => {
+      const mockOnboard = {
+        state: {
+          get: jest.fn().mockReturnValue({
+            wallets: [
+              {
+                accounts: [
+                  {
+                    address: faker.finance.ethereumAddress(),
+                    ens: undefined,
+                  },
+                ],
+                chains: [
+                  {
+                    id: '5',
+                  },
+                ],
+                label: ONBOARD_MPC_MODULE_LABEL,
+              },
+            ],
+          }),
+        },
+        connectWallet: jest.fn().mockRejectedValue('Error'),
+        disconnectWallet: jest.fn(),
+      }
+
+      await switchWallet(mockOnboard as unknown as OnboardAPI)
+
+      expect(mockOnboard.connectWallet).toHaveBeenCalled()
+      expect(mockOnboard.disconnectWallet).not.toHaveBeenCalled()
+    })
+
+    it('should not disconnect the social signer wallet label if the same label connects', async () => {
+      const mockNewState = [
+        {
+          accounts: [
+            {
+              address: faker.finance.ethereumAddress(),
+              ens: undefined,
+            },
+          ],
+          chains: [
+            {
+              id: '5',
+            },
+          ],
+          label: ONBOARD_MPC_MODULE_LABEL,
+        },
+      ]
+
+      const mockOnboard = {
+        state: {
+          get: jest.fn().mockReturnValue({
+            wallets: [
+              {
+                accounts: [
+                  {
+                    address: faker.finance.ethereumAddress(),
+                    ens: undefined,
+                  },
+                ],
+                chains: [
+                  {
+                    id: '5',
+                  },
+                ],
+                label: ONBOARD_MPC_MODULE_LABEL,
+              },
+            ],
+          }),
+        },
+        connectWallet: jest.fn().mockResolvedValue(mockNewState),
+        disconnectWallet: jest.fn(),
+      }
+
+      await switchWallet(mockOnboard as unknown as OnboardAPI)
+
+      expect(mockOnboard.connectWallet).toHaveBeenCalled()
+      expect(mockOnboard.disconnectWallet).not.toHaveBeenCalled()
+    })
+
+    it('should not disconnect non social signer wallets if new wallet connects', async () => {
+      const mockNewState = [
+        {
+          accounts: [
+            {
+              address: faker.finance.ethereumAddress(),
+              ens: undefined,
+            },
+          ],
+          chains: [
+            {
+              id: '5',
+            },
+          ],
+          label: 'MetaMask',
+        },
+      ]
+
+      const mockOnboard = {
+        state: {
+          get: jest.fn().mockReturnValue({
+            wallets: [
+              {
+                accounts: [
+                  {
+                    address: faker.finance.ethereumAddress(),
+                    ens: undefined,
+                  },
+                ],
+                chains: [
+                  {
+                    id: '5',
+                  },
+                ],
+                label: 'Wallet Connect',
+              },
+            ],
+          }),
+        },
+        connectWallet: jest.fn().mockResolvedValue(mockNewState),
+        disconnectWallet: jest.fn(),
+      }
+
+      await switchWallet(mockOnboard as unknown as OnboardAPI)
+
+      expect(mockOnboard.connectWallet).toBeCalled()
+      expect(mockOnboard.disconnectWallet).not.toHaveBeenCalled()
+    })
+
+    it('should disconnect the social signer wallet label if new wallet connects', async () => {
+      const mockNewState = [
+        {
+          accounts: [
+            {
+              address: faker.finance.ethereumAddress(),
+              ens: undefined,
+            },
+          ],
+          chains: [
+            {
+              id: '5',
+            },
+          ],
+          label: 'MetaMask',
+        },
+      ]
+
+      const mockOnboard = {
+        state: {
+          get: jest.fn().mockReturnValue({
+            wallets: [
+              {
+                accounts: [
+                  {
+                    address: faker.finance.ethereumAddress(),
+                    ens: undefined,
+                  },
+                ],
+                chains: [
+                  {
+                    id: '5',
+                  },
+                ],
+                label: ONBOARD_MPC_MODULE_LABEL,
+              },
+            ],
+          }),
+        },
+        connectWallet: jest.fn().mockResolvedValue(mockNewState),
+        disconnectWallet: jest.fn(),
+      }
+
+      await switchWallet(mockOnboard as unknown as OnboardAPI)
+
+      expect(mockOnboard.connectWallet).toBeCalled()
+      expect(mockOnboard.disconnectWallet).toHaveBeenCalledWith({ label: ONBOARD_MPC_MODULE_LABEL })
+    })
+  })
+})
diff --git a/src/hooks/wallets/consts.ts b/src/hooks/wallets/consts.ts
index 10a3bb99fa..6bb6a61f93 100644
--- a/src/hooks/wallets/consts.ts
+++ b/src/hooks/wallets/consts.ts
@@ -1,6 +1,7 @@
 export const enum WALLET_KEYS {
   INJECTED = 'INJECTED',
   WALLETCONNECT_V2 = 'WALLETCONNECT_V2',
+  SOCIAL = 'SOCIAL_LOGIN',
   COINBASE = 'COINBASE',
   PAIRING = 'PAIRING',
   LEDGER = 'LEDGER',
@@ -8,11 +9,13 @@ export const enum WALLET_KEYS {
   KEYSTONE = 'KEYSTONE',
 }
 
+// TODO: Check if undefined is needed as a return type, possibly couple this with WALLET_MODULES
 export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
   [WALLET_KEYS.INJECTED]: 'detectedwallet',
   [WALLET_KEYS.WALLETCONNECT_V2]: 'walletConnect_v2',
   [WALLET_KEYS.COINBASE]: 'coinbase',
   [WALLET_KEYS.PAIRING]: 'safeMobile',
+  [WALLET_KEYS.SOCIAL]: 'socialSigner',
   [WALLET_KEYS.LEDGER]: 'ledger',
   [WALLET_KEYS.TREZOR]: 'trezor',
   [WALLET_KEYS.KEYSTONE]: 'keystone',
diff --git a/src/hooks/wallets/mpc/__tests__/useMPC.test.ts b/src/hooks/wallets/mpc/__tests__/useMPC.test.ts
new file mode 100644
index 0000000000..2cdfd3f689
--- /dev/null
+++ b/src/hooks/wallets/mpc/__tests__/useMPC.test.ts
@@ -0,0 +1,226 @@
+import * as useOnboard from '@/hooks/wallets/useOnboard'
+import * as socialWalletOptions from '@/services/mpc/config'
+import { renderHook, waitFor } from '@/tests/test-utils'
+import { _getMPCCoreKitInstance, setMPCCoreKitInstance, useInitMPC } from '../useMPC'
+import * as useChains from '@/hooks/useChains'
+import { type ChainInfo, RPC_AUTHENTICATION } from '@safe-global/safe-gateway-typescript-sdk'
+import { hexZeroPad } from 'ethers/lib/utils'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { type Web3AuthMPCCoreKit, COREKIT_STATUS } from '@web3auth/mpc-core-kit'
+import { type EIP1193Provider, type OnboardAPI } from '@web3-onboard/core'
+
+jest.mock('@web3auth/mpc-core-kit', () => ({
+  ...jest.requireActual('@web3auth/mpc-core-kit'),
+  Web3AuthMPCCoreKit: jest.fn(),
+}))
+
+jest.mock('@/hooks/wallets/mpc/useSocialWallet')
+
+type MPCProvider = Web3AuthMPCCoreKit['provider']
+
+/**
+ * Mock for creating and initializing the MPC Core Kit
+ */
+class MockMPCCoreKit {
+  provider: MPCProvider | null = null
+  status = COREKIT_STATUS.NOT_INITIALIZED
+  private mockState
+  private mockProvider
+
+  /**
+   * The parameters are set in the mock MPC Core Kit after init() get's called
+   *
+   * @param mockState
+   * @param mockProvider
+   */
+  constructor(mockState: COREKIT_STATUS, mockProvider: MPCProvider) {
+    this.mockState = mockState
+    this.mockProvider = mockProvider
+  }
+
+  init() {
+    this.status = this.mockState
+    this.provider = this.mockProvider
+    return Promise.resolve()
+  }
+}
+
+/**
+ * Small helper class that implements registering RPC event listeners and event emiting.
+ * Used to test that events onboard relies on are getting called correctly
+ */
+class EventEmittingMockProvider {
+  private chainChangedListeners: Function[] = []
+
+  addListener(event: string, listener: Function) {
+    if (event === 'chainChanged') {
+      this.chainChangedListeners.push(listener)
+    }
+  }
+
+  emit(event: string, ...args: any[]) {
+    this.chainChangedListeners.forEach((listener) => listener(...args))
+  }
+}
+
+describe('useInitMPC', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    jest.spyOn(socialWalletOptions, 'isSocialWalletOptions').mockReturnValue(true)
+  })
+  it('should set the coreKit if user is not logged in yet', async () => {
+    const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
+    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
+    jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue(null)
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
+
+    const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
+    mockWeb3AuthMpcCoreKit.mockImplementation(() => {
+      return new MockMPCCoreKit(COREKIT_STATUS.INITIALIZED, null)
+    })
+
+    renderHook(() => useInitMPC())
+
+    await waitFor(() => {
+      expect(_getMPCCoreKitInstance()).toBeDefined()
+      expect(connectWalletSpy).not.toBeCalled()
+    })
+  })
+
+  it('should call connectWallet after rehydrating a web3auth session', async () => {
+    const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
+    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
+    jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue(null)
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
+
+    const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
+    const mockProvider = jest.fn()
+    mockWeb3AuthMpcCoreKit.mockImplementation(() => {
+      return new MockMPCCoreKit(COREKIT_STATUS.LOGGED_IN, mockProvider as unknown as MPCProvider)
+    })
+
+    renderHook(() => useInitMPC())
+
+    await waitFor(() => {
+      expect(connectWalletSpy).toBeCalled()
+      expect(_getMPCCoreKitInstance()).toBeDefined()
+    })
+  })
+
+  it('should copy event handlers and emit chainChanged if the current chain is updated', async () => {
+    const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())
+    jest.spyOn(useOnboard, 'connectWallet').mockImplementation(connectWalletSpy)
+    jest.spyOn(useOnboard, 'getConnectedWallet').mockReturnValue({
+      address: hexZeroPad('0x1', 20),
+      label: ONBOARD_MPC_MODULE_LABEL,
+      chainId: '1',
+      provider: {} as unknown as EIP1193Provider,
+    })
+    jest.spyOn(useOnboard, 'default').mockReturnValue({
+      state: {
+        get: () => ({
+          wallets: [],
+          walletModules: [],
+        }),
+      },
+    } as unknown as OnboardAPI)
+    jest.spyOn(useChains, 'useCurrentChain').mockReturnValue({
+      chainId: '5',
+      chainName: 'Goerli',
+      blockExplorerUriTemplate: {
+        address: 'https://goerli.someprovider.io/{address}',
+        txHash: 'https://goerli.someprovider.io/{txHash}',
+        api: 'https://goerli.someprovider.io/',
+      },
+      nativeCurrency: {
+        decimals: 18,
+        logoUri: 'https://logo.goerli.com',
+        name: 'Goerli ETH',
+        symbol: 'ETH',
+      },
+      rpcUri: {
+        authentication: RPC_AUTHENTICATION.NO_AUTHENTICATION,
+        value: 'https://goerli.somerpc.io',
+      },
+    } as unknown as ChainInfo)
+
+    const mockWeb3AuthMpcCoreKit = jest.spyOn(require('@web3auth/mpc-core-kit'), 'Web3AuthMPCCoreKit')
+    const mockChainChangedListener = jest.fn()
+    const mockProviderBefore = {
+      listeners: (eventName: string) => {
+        if (eventName === 'chainChanged') {
+          return [mockChainChangedListener]
+        }
+      },
+    }
+
+    setMPCCoreKitInstance({
+      provider: mockProviderBefore,
+    } as unknown as Web3AuthMPCCoreKit)
+
+    const mockProvider = new EventEmittingMockProvider()
+    mockWeb3AuthMpcCoreKit.mockImplementation(() => {
+      return new MockMPCCoreKit(COREKIT_STATUS.LOGGED_IN, mockProvider as unknown as MPCProvider)
+    })
+
+    renderHook(() => useInitMPC())
+
+    await waitFor(() => {
+      expect(mockChainChangedListener).toHaveBeenCalledWith('0x5')
+      expect(_getMPCCoreKitInstance()).toBeDefined()
+      expect(connectWalletSpy).not.toBeCalled()
+    })
+  })
+})
diff --git a/src/hooks/wallets/mpc/useMPC.ts b/src/hooks/wallets/mpc/useMPC.ts
new file mode 100644
index 0000000000..b0b9d8544a
--- /dev/null
+++ b/src/hooks/wallets/mpc/useMPC.ts
@@ -0,0 +1,92 @@
+import { useEffect } from 'react'
+import ExternalStore from '@/services/ExternalStore'
+import { COREKIT_STATUS, Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from '@web3auth/mpc-core-kit'
+import { CHAIN_NAMESPACES } from '@web3auth/base'
+
+import { useCurrentChain } from '@/hooks/useChains'
+import { getRpcServiceUrl } from '../web3'
+import useOnboard, { connectWallet, getConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { useInitSocialWallet } from './useSocialWallet'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { isSocialWalletOptions, SOCIAL_WALLET_OPTIONS } from '@/services/mpc/config'
+import { IS_PRODUCTION } from '@/config/constants'
+
+const { getStore, setStore, useStore } = new ExternalStore<Web3AuthMPCCoreKit>()
+
+export const useInitMPC = () => {
+  const chain = useCurrentChain()
+  const onboard = useOnboard()
+  useInitSocialWallet()
+
+  useEffect(() => {
+    if (!chain || !onboard || !isSocialWalletOptions(SOCIAL_WALLET_OPTIONS)) {
+      return
+    }
+
+    const chainConfig = {
+      chainId: `0x${Number(chain.chainId).toString(16)}`,
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      rpcTarget: getRpcServiceUrl(chain.rpcUri),
+      displayName: chain.chainName,
+      blockExplorer: new URL(chain.blockExplorerUriTemplate.address).origin,
+      ticker: chain.nativeCurrency.symbol,
+      tickerName: chain.nativeCurrency.name,
+    }
+
+    const currentInstance = getStore()
+    let previousChainChangedListeners: Function[] = []
+    if (currentInstance?.provider) {
+      // We are already connected. We copy onboards event listener for the chainChanged event to propagate a potentially new chainId
+      const oldProvider = currentInstance.provider
+      previousChainChangedListeners = oldProvider.listeners('chainChanged')
+    }
+
+    const web3AuthCoreKit = new Web3AuthMPCCoreKit({
+      web3AuthClientId: SOCIAL_WALLET_OPTIONS.web3AuthClientId,
+      // Available networks are "sapphire_devnet", "sapphire_mainnet"
+      web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
+      baseUrl: `${window.location.origin}/`,
+      uxMode: 'popup',
+      enableLogging: !IS_PRODUCTION,
+      chainConfig,
+      manualSync: true,
+      hashedFactorNonce: 'safe-global-sfa-nonce',
+    })
+
+    web3AuthCoreKit
+      .init()
+      .then(() => {
+        setStore(web3AuthCoreKit)
+        // If rehydration was successful, connect to onboard
+        if (web3AuthCoreKit.status !== COREKIT_STATUS.LOGGED_IN || !web3AuthCoreKit.provider) {
+          return
+        }
+        const connectedWallet = getConnectedWallet(onboard.state.get().wallets)
+        if (!connectedWallet) {
+          connectWallet(onboard, {
+            autoSelect: {
+              label: ONBOARD_MPC_MODULE_LABEL,
+              disableModals: true,
+            },
+          }).catch((reason) => console.error('Error connecting to MPC module:', reason))
+        } else {
+          const newProvider = web3AuthCoreKit.provider
+
+          // To propagate the changedChain we disconnect and connect
+          if (previousChainChangedListeners.length > 0 && newProvider) {
+            previousChainChangedListeners.forEach((previousListener) =>
+              newProvider.addListener('chainChanged', (...args: []) => previousListener(...args)),
+            )
+            newProvider.emit('chainChanged', `0x${Number(chainConfig.chainId).toString(16)}`)
+          }
+        }
+      })
+      .catch((error) => console.error(error))
+  }, [chain, onboard])
+}
+
+export const _getMPCCoreKitInstance = getStore
+
+export const setMPCCoreKitInstance = setStore
+
+export default useStore
diff --git a/src/hooks/wallets/mpc/useSocialWallet.ts b/src/hooks/wallets/mpc/useSocialWallet.ts
new file mode 100644
index 0000000000..d98998ffdd
--- /dev/null
+++ b/src/hooks/wallets/mpc/useSocialWallet.ts
@@ -0,0 +1,63 @@
+import useAddressBook from '@/hooks/useAddressBook'
+import useChainId from '@/hooks/useChainId'
+import ExternalStore from '@/services/ExternalStore'
+import type { ISocialWalletService } from '@/services/mpc/interfaces'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import SocialWalletService from '@/services/mpc/SocialWalletService'
+import { useAppDispatch } from '@/store'
+import { upsertAddressBookEntry } from '@/store/addressBookSlice'
+import { checksumAddress } from '@/utils/addresses'
+import { useCallback, useEffect } from 'react'
+import useOnboard, { connectWallet } from '../useOnboard'
+import useMpc from './useMPC'
+
+const { getStore, setStore, useStore } = new ExternalStore<ISocialWalletService>()
+
+export const useInitSocialWallet = () => {
+  const mpcCoreKit = useMpc()
+  const onboard = useOnboard()
+  const addressBook = useAddressBook()
+  const currentChainId = useChainId()
+  const dispatch = useAppDispatch()
+  const socialWalletService = useStore()
+
+  const onConnect = useCallback(async () => {
+    if (!onboard || !socialWalletService) return
+
+    const wallets = await connectWallet(onboard, {
+      autoSelect: {
+        label: ONBOARD_MPC_MODULE_LABEL,
+        disableModals: true,
+      },
+    }).catch((reason) => console.error('Error connecting to MPC module:', reason))
+
+    // If the signer is not in the address book => add the user's email as name
+    const userInfo = socialWalletService.getUserInfo()
+    if (userInfo && wallets && currentChainId && wallets.length > 0) {
+      const address = wallets[0].accounts[0]?.address
+      if (address) {
+        const signerAddress = checksumAddress(address)
+        if (addressBook[signerAddress] === undefined) {
+          const email = userInfo.email
+          dispatch(upsertAddressBookEntry({ address: signerAddress, chainId: currentChainId, name: email }))
+        }
+      }
+    }
+  }, [addressBook, currentChainId, dispatch, onboard, socialWalletService])
+
+  useEffect(() => {
+    socialWalletService?.setOnConnect(onConnect)
+  }, [onConnect, socialWalletService])
+
+  useEffect(() => {
+    if (mpcCoreKit) {
+      setStore(new SocialWalletService(mpcCoreKit))
+    }
+  }, [mpcCoreKit])
+}
+
+export const getSocialWalletService = getStore
+
+export const __setSocialWalletService = setStore
+
+export default useStore
diff --git a/src/hooks/wallets/useOnboard.test.ts b/src/hooks/wallets/useOnboard.test.ts
deleted file mode 100644
index ed9c637574..0000000000
--- a/src/hooks/wallets/useOnboard.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { EIP1193Provider, WalletState } from '@web3-onboard/core'
-import { getConnectedWallet } from './useOnboard'
-
-// mock wallets
-jest.mock('@/hooks/wallets/wallets', () => ({
-  getDefaultWallets: jest.fn(() => []),
-  getRecommendedInjectedWallets: jest.fn(() => []),
-}))
-
-describe('getConnectedWallet', () => {
-  it('returns the connected wallet', () => {
-    const wallets = [
-      {
-        label: 'Wallet 1',
-        icon: 'wallet1.svg',
-        provider: null as unknown as EIP1193Provider,
-        chains: [{ id: '0x4' }],
-        accounts: [
-          {
-            address: '0x1234567890123456789012345678901234567890',
-            ens: null,
-            balance: null,
-          },
-        ],
-      },
-      {
-        label: 'Wallet 2',
-        icon: 'wallet2.svg',
-        provider: null as unknown as EIP1193Provider,
-        chains: [{ id: '0x100' }],
-        accounts: [
-          {
-            address: '0x2',
-            ens: null,
-            balance: null,
-          },
-        ],
-      },
-    ] as WalletState[]
-
-    expect(getConnectedWallet(wallets)).toEqual({
-      label: 'Wallet 1',
-      icon: 'wallet1.svg',
-      address: '0x1234567890123456789012345678901234567890',
-      provider: wallets[0].provider,
-      chainId: '4',
-    })
-  })
-
-  it('should return null if the address is invalid', () => {
-    const wallets = [
-      {
-        label: 'Wallet 1',
-        icon: 'wallet1.svg',
-        provider: null as unknown as EIP1193Provider,
-        chains: [{ id: '0x4' }],
-        accounts: [
-          {
-            address: '0xinvalid',
-            ens: null,
-            balance: null,
-          },
-        ],
-      },
-    ] as WalletState[]
-
-    expect(getConnectedWallet(wallets)).toBeNull()
-  })
-})
diff --git a/src/hooks/wallets/useOnboard.ts b/src/hooks/wallets/useOnboard.ts
index 2781d67d86..4d8f2c1ab9 100644
--- a/src/hooks/wallets/useOnboard.ts
+++ b/src/hooks/wallets/useOnboard.ts
@@ -10,6 +10,7 @@ import { useInitPairing } from '@/services/pairing/hooks'
 import { useAppSelector } from '@/store'
 import { type EnvState, selectRpc } from '@/store/settingsSlice'
 import { E2E_WALLET_NAME } from '@/tests/e2e-wallet'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
 
 const WALLETCONNECT = 'WalletConnect'
 
@@ -130,8 +131,19 @@ export const connectWallet = async (
   return wallets
 }
 
-export const switchWallet = (onboard: OnboardAPI) => {
-  connectWallet(onboard)
+export const switchWallet = async (onboard: OnboardAPI) => {
+  const oldWalletLabel = getConnectedWallet(onboard.state.get().wallets)?.label
+  const newWallets = await connectWallet(onboard)
+  const newWalletLabel = newWallets ? getConnectedWallet(newWallets)?.label : undefined
+
+  // If the wallet actually changed we disconnect the old connected wallet.
+  if (!newWalletLabel || oldWalletLabel !== ONBOARD_MPC_MODULE_LABEL) {
+    return
+  }
+
+  if (newWalletLabel !== oldWalletLabel) {
+    await onboard.disconnectWallet({ label: oldWalletLabel })
+  }
 }
 
 // Disable/enable wallets according to chain
diff --git a/src/hooks/wallets/wallets.ts b/src/hooks/wallets/wallets.ts
index 4a9e27aa38..2de9efdd29 100644
--- a/src/hooks/wallets/wallets.ts
+++ b/src/hooks/wallets/wallets.ts
@@ -12,6 +12,7 @@ import walletConnect from '@web3-onboard/walletconnect'
 import pairingModule from '@/services/pairing/module'
 import e2eWalletModule from '@/tests/e2e-wallet'
 import { CGW_NAMES, WALLET_KEYS } from './consts'
+import MpcModule from '@/services/mpc/SocialLoginModule'
 
 const prefersDarkMode = (): boolean => {
   return window?.matchMedia('(prefers-color-scheme: dark)')?.matches
@@ -42,6 +43,7 @@ const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit }
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain),
   [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }),
   [WALLET_KEYS.PAIRING]: () => pairingModule(),
+  [WALLET_KEYS.SOCIAL]: (chain) => MpcModule(chain),
   [WALLET_KEYS.LEDGER]: () => ledgerModule(),
   [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }),
   [WALLET_KEYS.KEYSTONE]: () => keystoneModule(),
@@ -72,3 +74,9 @@ export const getSupportedWallets = (chain: ChainInfo): WalletInit[] => {
 
   return enabledWallets.map(([, module]) => module(chain))
 }
+
+export const isSocialWalletEnabled = (chain: ChainInfo | undefined): boolean => {
+  if (!chain) return false
+
+  return chain.disabledWallets.every((label) => label !== CGW_NAMES.SOCIAL_LOGIN)
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ae4df5aeba..e7b3d6d3d7 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import PasswordRecoveryModal from '@/services/mpc/PasswordRecoveryModal'
 import Sentry from '@/services/sentry' // needs to be imported first
 import type { ReactNode } from 'react'
 import { type ReactElement } from 'react'
@@ -37,6 +38,7 @@ import useSafeMessageNotifications from '@/hooks/messages/useSafeMessageNotifica
 import useSafeMessagePendingStatuses from '@/hooks/messages/useSafeMessagePendingStatuses'
 import useChangedValue from '@/hooks/useChangedValue'
 import { TxModalProvider } from '@/components/tx-flow'
+import { useInitMPC } from '@/hooks/wallets/mpc/useMPC'
 import { WalletConnectProvider } from '@/services/walletconnect/WalletConnectContext'
 import useABTesting from '@/services/tracking/useAbTesting'
 import { AbTest } from '@/services/tracking/abTesting'
@@ -63,6 +65,7 @@ const InitApp = (): null => {
   useTxTracking()
   useSafeMsgTracking()
   useBeamer()
+  useInitMPC()
   useABTesting(AbTest.HUMAN_DESCRIPTION)
 
   return null
@@ -124,6 +127,8 @@ const WebCoreApp = ({
           <Notifications />
 
           <MobilePairingModal />
+
+          <PasswordRecoveryModal />
         </AppProviders>
       </CacheProvider>
     </StoreHydrator>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a2c6442367..738a591942 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -21,8 +21,8 @@ const IndexPage: NextPage = () => {
       safeAddress
         ? `${AppRoutes.home}?safe=${safeAddress}`
         : chain
-        ? `${AppRoutes.welcome}?chain=${chain}`
-        : AppRoutes.welcome,
+        ? `${AppRoutes.welcome.index}?chain=${chain}`
+        : AppRoutes.welcome.index,
     )
   }, [router, safeAddress, chain])
 
diff --git a/src/pages/settings/security-login.tsx b/src/pages/settings/security-login.tsx
new file mode 100644
index 0000000000..856af7d8a1
--- /dev/null
+++ b/src/pages/settings/security-login.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+
+import SettingsHeader from '@/components/settings/SettingsHeader'
+import SecurityLogin from '@/components/settings/SecurityLogin'
+
+const SecurityLoginPage: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Settings – Security & Login'}</title>
+      </Head>
+
+      <SettingsHeader />
+
+      <main>
+        <SecurityLogin />
+      </main>
+    </>
+  )
+}
+
+export default SecurityLoginPage
diff --git a/src/pages/wc.tsx b/src/pages/wc.tsx
index 02c41159db..69dcb26b79 100644
--- a/src/pages/wc.tsx
+++ b/src/pages/wc.tsx
@@ -26,7 +26,7 @@ const WcPage: NextPage = () => {
             },
           }
         : {
-            pathname: AppRoutes.welcome,
+            pathname: AppRoutes.welcome.index,
             query: {
               [WC_URI_SEARCH_PARAM]: uri,
             },
diff --git a/src/pages/welcome.tsx b/src/pages/welcome/index.tsx
similarity index 100%
rename from src/pages/welcome.tsx
rename to src/pages/welcome/index.tsx
diff --git a/src/pages/welcome/social-login.tsx b/src/pages/welcome/social-login.tsx
new file mode 100644
index 0000000000..d4cf360333
--- /dev/null
+++ b/src/pages/welcome/social-login.tsx
@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import NewSafeSocial from '@/components/welcome/NewSafeSocial'
+
+const SocialLogin: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Welcome'}</title>
+      </Head>
+
+      <NewSafeSocial />
+    </>
+  )
+}
+
+export default SocialLogin
diff --git a/src/service-workers/index.ts b/src/service-workers/index.ts
index 0ed829a135..70f1e849e8 100644
--- a/src/service-workers/index.ts
+++ b/src/service-workers/index.ts
@@ -3,5 +3,8 @@
 /// <reference lib="webworker" />
 
 import { firebaseMessagingSw } from './firebase-messaging/firebase-messaging-sw'
+import { mpcCoreKitServiceWorker } from './mpc-core-kit-sw'
 
 firebaseMessagingSw()
+
+mpcCoreKitServiceWorker()
diff --git a/src/service-workers/mpc-core-kit-sw.ts b/src/service-workers/mpc-core-kit-sw.ts
new file mode 100644
index 0000000000..76b47bf211
--- /dev/null
+++ b/src/service-workers/mpc-core-kit-sw.ts
@@ -0,0 +1,325 @@
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope
+
+export const mpcCoreKitServiceWorker = () => {
+  /* eslint-disable */
+  function getScope() {
+    return self.registration.scope
+  }
+
+  self.addEventListener('message', function (event) {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+      self.skipWaiting()
+    }
+  })
+
+  self.addEventListener('fetch', function (event) {
+    try {
+      const url = new URL(event.request.url)
+      //@ts-expect-error
+      const redirectURL = self.location.url
+      if (url.pathname.includes('redirect') && url.href.includes(getScope())) {
+        event.respondWith(
+          new Response(
+            new Blob(
+              [
+                `
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="utf-8" />
+                    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+                    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+                    <title>Redirect</title>
+                    <style>
+                      * {
+                        box-sizing: border-box;
+                      }
+
+                      html,
+                      body {
+                        background: #fcfcfc;
+                        height: 100%;
+                        padding: 0;
+                        margin: 0;
+                      }
+
+                      .container {
+                        width: 100%;
+                        height: 100%;
+
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-direction: column;
+                      }
+
+                      h1.title {
+                        font-size: 14px;
+                        color: #0f1222;
+                        font-family: "Roboto", sans-serif !important;
+                        margin: 0;
+                        text-align: center;
+                      }
+
+                      .spinner .beat {
+                        background-color: #0364ff;
+                        height: 12px;
+                        width: 12px;
+                        margin: 24px 2px 10px;
+                        border-radius: 100%;
+                        -webkit-animation: beatStretchDelay 0.7s infinite linear;
+                        animation: beatStretchDelay 0.7s infinite linear;
+                        -webkit-animation-fill-mode: both;
+                        animation-fill-mode: both;
+                        display: inline-block;
+                      }
+
+                      .spinner .beat-odd {
+                        animation-delay: 0s;
+                      }
+
+                      .spinner .beat-even {
+                        animation-delay: 0.35s;
+                      }
+
+                      @-webkit-keyframes beatStretchDelay {
+                        50% {
+                          -webkit-transform: scale(0.75);
+                          transform: scale(0.75);
+                          -webkit-opacity: 0.2;
+                          opacity: 0.2;
+                        }
+
+                        100% {
+                          -webkit-transform: scale(1);
+                          transform: scale(1);
+                          -webkit-opacity: 1;
+                          opacity: 1;
+                        }
+                      }
+
+                      @keyframes beatStretchDelay {
+                        50% {
+                          -webkit-transform: scale(0.75);
+                          transform: scale(0.75);
+                          -webkit-opacity: 0.2;
+                          opacity: 0.2;
+                        }
+
+                        100% {
+                          -webkit-transform: scale(1);
+                          transform: scale(1);
+                          -webkit-opacity: 1;
+                          opacity: 1;
+                        }
+                      }
+
+                      @media (min-width: 768px) {
+                        h1.title {
+                          font-size: 14px;
+                        }
+                        p.info {
+                          font-size: 28px;
+                        }
+
+                        .spinner .beat {
+                          height: 12px;
+                          width: 12px;
+                        }
+                      }
+                    </style>
+                  </head>
+
+                  <body>
+                    <div id="message" class="container">
+                      <div class="spinner content" id="spinner">
+                        <div class="beat beat-odd"></div>
+                        <div class="beat beat-even"></div>
+                        <div class="beat beat-odd"></div>
+                      </div>
+                      <h1 class="title content" id="closeText" style="display: none;">You can close this window now</h1>
+                    </div>
+                    <script
+                    src="https://scripts.toruswallet.io/broadcastChannel_6_0_0.js"
+                    integrity="sha384-tWiIvEY4iDOl9h6tNeoxETpLfPxq0tgzbIXFYjok42Gu5KoDaA9uSiAk2nG6XBcp"
+                    crossorigin="anonymous"
+                  ></script>
+                    <script>
+                      function storageAvailable(type) {
+                        var storage;
+                        try {
+                          storage = window[type];
+                          var x = "__storage_test__";
+                          storage.setItem(x, x);
+                          storage.removeItem(x);
+                          return true;
+                        } catch (e) {
+                          return (
+                            e &&
+                            // everything except Firefox
+                            (e.code === 22 ||
+                              // Firefox
+                              e.code === 1014 ||
+                              // test name field too, because code might not be present
+                              // everything except Firefox
+                              e.name === "QuotaExceededError" ||
+                              // Firefox
+                              e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
+                            // acknowledge QuotaExceededError only if there's something already stored
+                            storage &&
+                            storage.length !== 0
+                          );
+                        }
+                      }
+                      function showCloseText() {
+                        var closeText = document.getElementById("closeText");
+                        var spinner = document.getElementById("spinner");
+                        if (closeText) {
+                          closeText.style.display = "block";
+                        }
+                        if (spinner) {
+                          spinner.style.display = "none";
+                        }
+                      }
+                      var isLocalStorageAvailable = storageAvailable("localStorage");
+                      var isSessionStorageAvailable = storageAvailable("sessionStorage");
+                      // set theme
+                      let theme = "light";
+                      if (isLocalStorageAvailable) {
+                        var torusTheme = localStorage.getItem("torus-theme");
+                        if (torusTheme) {
+                          theme = torusTheme.split("-")[0];
+                        }
+                      }
+
+                      if (theme === "dark") {
+                        document.querySelector("body").style.backgroundColor = "#24252A";
+                      }
+                      var bc;
+                      var broadcastChannelOptions = {
+                        // type: 'localstorage', // (optional) enforce a type, oneOf['native', 'idb', 'localstorage', 'node'
+                        webWorkerSupport: false, // (optional) set this to false if you know that your channel will never be used in a WebWorker (increase performance)
+                      };
+                      var instanceParams = {};
+                      var preopenInstanceId = new URL(window.location.href).searchParams.get("preopenInstanceId");
+                      if (!preopenInstanceId) {
+                        document.getElementById("message").style.visibility = "visible";
+                        // in general oauth redirect
+                        try {
+                          var url = new URL(location.href);
+                          var hash = url.hash.substr(1);
+                          var hashParams = {};
+                          if (hash) {
+                            hashParams = hash.split("&").reduce(function (result, item) {
+                              var parts = item.split("=");
+                              result[parts[0]] = parts[1];
+                              return result;
+                            }, {});
+                          }
+                          var queryParams = {};
+                          for (var key of url.searchParams.keys()) {
+                            queryParams[key] = url.searchParams.get(key);
+                          }
+                          var error = "";
+                          try {
+                            if (Object.keys(hashParams).length > 0 && hashParams.state) {
+                              instanceParams = JSON.parse(window.atob(decodeURIComponent(decodeURIComponent(hashParams.state)))) || {};
+                              if (hashParams.error) error = hashParams.error;
+                            } else if (Object.keys(queryParams).length > 0 && queryParams.state) {
+                              instanceParams = JSON.parse(window.atob(decodeURIComponent(decodeURIComponent(queryParams.state)))) || {};
+                              if (queryParams.error) error = queryParams.error;
+                            }
+                          } catch (e) {
+                            console.error(e);
+                          }
+                          if (instanceParams.redirectToOpener) {
+                            // communicate to window.opener
+                            window.opener.postMessage(
+                              {
+                                channel: "redirect_channel_" + instanceParams.instanceId,
+                                data: {
+                                  instanceParams: instanceParams,
+                                  hashParams: hashParams,
+                                  queryParams: queryParams,
+                                },
+                                error: error,
+                              },
+                              "${redirectURL}"
+                            );
+                          } else {
+                            // communicate via broadcast channel
+                            bc = new broadcastChannelLib.BroadcastChannel("redirect_channel_" + instanceParams.instanceId, broadcastChannelOptions);
+                            bc.addEventListener("message", function (ev) {
+                              if (ev.success) {
+                                bc.close();
+                              } else {
+                                window.close();
+                                showCloseText();
+                              }
+                            });
+                            bc.postMessage({
+                              data: {
+                                instanceParams: instanceParams,
+                                hashParams: hashParams,
+                                queryParams: queryParams,
+                              },
+                              error: error,
+                            }).then(function () {
+                              setTimeout(function () {
+                                window.location.href = url.origin + location.search + location.hash;
+                              }, 5000);
+                            });
+                          }
+                        } catch (err) {
+                          console.error(err, "service worker error in redirect");
+                          bc && bc.close();
+                          window.close();
+                          showCloseText();
+                        }
+                      } else {
+                        // in preopen, awaiting redirect
+                        try {
+                          bc = new broadcastChannelLib.BroadcastChannel("preopen_channel_" + preopenInstanceId, broadcastChannelOptions);
+                          bc.onmessage = function (ev) {
+                            var { preopenInstanceId: oldId, payload, message } = ev.data;
+                            if (oldId === preopenInstanceId && payload && payload.url) {
+                              window.location.href = payload.url;
+                            } else if (oldId === preopenInstanceId && message === "setup_complete") {
+                              bc.postMessage({
+                                data: {
+                                  preopenInstanceId: preopenInstanceId,
+                                  message: "popup_loaded",
+                                },
+                              });
+                            }
+                            if (ev.error && ev.error !== "") {
+                              console.error(ev.error);
+                              bc.close();
+                            }
+                          };
+                        } catch (err) {
+                          console.error(err, "service worker error in preopen");
+                          bc && bc.close();
+                          window.close();
+                          showCloseText();
+                        }
+                      }
+                    </script>
+                  </body>
+                </html>
+                                        
+                ${''}
+                  `,
+              ],
+              { type: 'text/html' },
+            ),
+          ),
+        )
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  })
+}
diff --git a/src/services/analytics/events/createLoadSafe.ts b/src/services/analytics/events/createLoadSafe.ts
index 98689a083d..b95a93587f 100644
--- a/src/services/analytics/events/createLoadSafe.ts
+++ b/src/services/analytics/events/createLoadSafe.ts
@@ -3,7 +3,12 @@ import { EventType } from '@/services/analytics/types'
 export const CREATE_SAFE_CATEGORY = 'create-safe'
 
 export const CREATE_SAFE_EVENTS = {
-  CREATE_BUTTON: {
+  CONTINUE_TO_CREATION: {
+    action: 'Continue to creation',
+    category: CREATE_SAFE_CATEGORY,
+    event: EventType.META,
+  },
+  OPEN_SAFE_CREATION: {
     action: 'Open stepper',
     category: CREATE_SAFE_CATEGORY,
   },
@@ -37,6 +42,10 @@ export const CREATE_SAFE_EVENTS = {
     action: 'Retry Safe creation',
     category: CREATE_SAFE_CATEGORY,
   },
+  CANCEL_CREATE_SAFE_FORM: {
+    action: 'Cancel safe creation form',
+    category: CREATE_SAFE_CATEGORY,
+  },
   CANCEL_CREATE_SAFE: {
     event: EventType.META,
     action: 'Cancel Safe creation',
diff --git a/src/services/analytics/events/mpcWallet.ts b/src/services/analytics/events/mpcWallet.ts
new file mode 100644
index 0000000000..8e20e29de2
--- /dev/null
+++ b/src/services/analytics/events/mpcWallet.ts
@@ -0,0 +1,56 @@
+import { EventType } from '@/services/analytics/types'
+
+const MPC_WALLET_CATEGORY = 'mpc-wallet'
+
+export const MPC_WALLET_EVENTS = {
+  CONNECT_GOOGLE: {
+    event: EventType.CLICK,
+    action: 'Continue with Google button',
+    category: MPC_WALLET_CATEGORY,
+  },
+  MANUAL_RECOVERY: {
+    event: EventType.META,
+    action: 'Account recovery started',
+    category: MPC_WALLET_CATEGORY,
+  },
+  RECOVER_PASSWORD: {
+    event: EventType.CLICK,
+    action: 'Recover account using password',
+    category: MPC_WALLET_CATEGORY,
+  },
+  UPSERT_PASSWORD: {
+    event: EventType.CLICK,
+    action: 'Set or change password',
+    category: MPC_WALLET_CATEGORY,
+  },
+  ENABLE_MFA: {
+    event: EventType.META,
+    action: 'Enable MFA for account',
+    category: MPC_WALLET_CATEGORY,
+  },
+  REVEAL_PRIVATE_KEY: {
+    event: EventType.CLICK,
+    action: 'Reveal private key',
+    category: MPC_WALLET_CATEGORY,
+  },
+  EXPORT_PK_SUCCESS: {
+    event: EventType.META,
+    action: 'Export private key successful',
+    category: MPC_WALLET_CATEGORY,
+  },
+  EXPORT_PK_ERROR: {
+    event: EventType.META,
+    action: 'Export private key error',
+    category: MPC_WALLET_CATEGORY,
+  },
+  SEE_PK: {
+    event: EventType.CLICK,
+    action: 'Toggle see private key',
+    category: MPC_WALLET_CATEGORY,
+  },
+  COPY_PK: {
+    event: EventType.CLICK,
+    action: 'Copy private key',
+    category: MPC_WALLET_CATEGORY,
+  },
+}
diff --git a/src/services/exceptions/ErrorCodes.ts b/src/services/exceptions/ErrorCodes.ts
index 81d877c6c0..90993a46ef 100644
--- a/src/services/exceptions/ErrorCodes.ts
+++ b/src/services/exceptions/ErrorCodes.ts
@@ -16,6 +16,9 @@ enum ErrorCodes {
 
   _302 = '302: Error connecting to the wallet',
   _303 = '303: Error creating pairing session',
+  _304 = '304: Error enabling MFA',
+  _305 = '305: Error exporting account key',
+  _306 = '306: Error logging in',
 
   _400 = '400: Error requesting browser notification permissions',
   _401 = '401: Error tracking push notifications',
diff --git a/src/services/mpc/PasswordRecoveryModal.tsx b/src/services/mpc/PasswordRecoveryModal.tsx
new file mode 100644
index 0000000000..7a7e1d08ab
--- /dev/null
+++ b/src/services/mpc/PasswordRecoveryModal.tsx
@@ -0,0 +1,42 @@
+import { PasswordRecovery } from '@/components/common/SocialSigner/PasswordRecovery'
+import TxModalDialog from '@/components/common/TxModalDialog'
+import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
+import ExternalStore from '@/services/ExternalStore'
+
+const { useStore: useCloseCallback, setStore: setCloseCallback } = new ExternalStore<() => void>()
+
+export const open = (cb: () => void) => {
+  setCloseCallback(() => cb)
+}
+
+export const close = () => {
+  setCloseCallback(undefined)
+}
+
+const PasswordRecoveryModal = () => {
+  const socialWalletService = useSocialWallet()
+  const closeCallback = useCloseCallback()
+  const open = !!closeCallback
+
+  const handleClose = () => {
+    closeCallback?.()
+    setCloseCallback(undefined)
+    close()
+  }
+
+  const recoverPassword = async (password: string, storeDeviceFactor: boolean) => {
+    if (!socialWalletService) return
+
+    await socialWalletService.recoverAccountWithPassword(password, storeDeviceFactor)
+  }
+
+  if (!open) return null
+
+  return (
+    <TxModalDialog open={open} onClose={handleClose} fullWidth sx={{ zIndex: '10000 !important', top: '0 !important' }}>
+      <PasswordRecovery recoverFactorWithPassword={recoverPassword} onSuccess={handleClose} />
+    </TxModalDialog>
+  )
+}
+
+export default PasswordRecoveryModal
diff --git a/src/services/mpc/SocialLoginModule.ts b/src/services/mpc/SocialLoginModule.ts
new file mode 100644
index 0000000000..6e34ce89d8
--- /dev/null
+++ b/src/services/mpc/SocialLoginModule.ts
@@ -0,0 +1,136 @@
+import { _getMPCCoreKitInstance } from '@/hooks/wallets/mpc/useMPC'
+import { getSocialWalletService } from '@/hooks/wallets/mpc/useSocialWallet'
+import { getWeb3ReadOnly } from '@/hooks/wallets/web3'
+import * as PasswordRecoveryModal from '@/services/mpc/PasswordRecoveryModal'
+import { FEATURES, hasFeature } from '@/utils/chains'
+import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { type WalletInit, ProviderRpcError } from '@web3-onboard/common'
+import { type EIP1193Provider } from '@web3-onboard/core'
+import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
+
+const getMPCProvider = () => _getMPCCoreKitInstance()?.provider
+
+const assertDefined = <T>(mpcProvider: T | undefined) => {
+  if (!mpcProvider) {
+    throw new Error('MPC provider is not ready. Login and initialize it first')
+  }
+  return mpcProvider
+}
+
+export const ONBOARD_MPC_MODULE_LABEL = 'Social Login'
+
+export const isSocialLoginWallet = (walletLabel: string | undefined) => {
+  return walletLabel === ONBOARD_MPC_MODULE_LABEL
+}
+
+const getConnectedAccounts = async () => {
+  try {
+    const web3 = assertDefined(getMPCProvider())
+    return web3.request({ method: 'eth_accounts' })
+  } catch (e) {
+    throw new ProviderRpcError({
+      code: 4001,
+      message: 'Provider is unavailable',
+    })
+  }
+}
+
+/**
+ * Module for MPC wallet created by the Web3Auth tKey MPC.
+ * We gain access to the provider created by tKey MPC after a successful login.
+ * This module returns a provider which will always get the current MPC Wallet provider from an ExternalStore and delegate all calls to it.
+ *
+ * @returns Custom Onboard MpcModule
+ */
+function MpcModule(chain: ChainInfo): WalletInit {
+  if (!hasFeature(chain, FEATURES.SOCIAL_LOGIN)) return () => null
+
+  return () => {
+    return {
+      label: ONBOARD_MPC_MODULE_LABEL,
+      getIcon: async () => (await import('./icon')).default,
+      getInterface: async () => {
+        const provider: EIP1193Provider = {
+          on: (event, listener) => {
+            const web3 = assertDefined(getMPCProvider())
+            web3.on(event, listener)
+          },
+          request: (request) => {
+            return new Promise<any>(async (resolve, reject) => {
+              try {
+                /*
+                 * We have to fallback to web3ReadOnly for eth_estimateGas because the provider by Web3Auth does not expose / implement it.
+                 */
+                if ('eth_estimateGas' === request.method) {
+                  const web3ReadOnly = assertDefined(getWeb3ReadOnly())
+
+                  web3ReadOnly
+                    ?.send(request.method, request.params ?? [])
+                    .then(resolve)
+                    .catch(reject)
+
+                  return
+                }
+
+                if ('eth_requestAccounts' === request.method) {
+                  try {
+                    // If the provider is defined we already have access to the accounts.
+                    const web3 = assertDefined(getMPCProvider())
+                    web3.request({ method: 'eth_accounts' }).then(resolve).catch(reject)
+                  } catch (e) {
+                    // Otherwise try to log in the user
+                    const socialWalletService = getSocialWalletService()
+                    if (!socialWalletService) throw Error('Social Login not ready')
+
+                    const status = await socialWalletService.loginAndCreate()
+
+                    if (status === COREKIT_STATUS.REQUIRED_SHARE) {
+                      PasswordRecoveryModal.open(() => {
+                        getConnectedAccounts().then(resolve).catch(reject)
+                      })
+                    } else {
+                      getConnectedAccounts().then(resolve).catch(reject)
+                    }
+                  }
+                  return
+                }
+
+                if ('wallet_switchEthereumChain' === request.method) {
+                  // The MPC provider always uses the current chain as chain. Nothing to do here.
+                  resolve(null)
+                  return
+                }
+
+                const web3 = assertDefined(getMPCProvider())
+                // Default: we call the inner provider
+                web3.request(request).then(resolve).catch(reject)
+                return
+              } catch (error) {
+                reject(
+                  new ProviderRpcError({
+                    // TODO: This error code is usually for user rejection. But 4009 for instance has no effect with onboard
+                    code: 4001,
+                    message: 'Provider is unavailable',
+                  }),
+                )
+              }
+            })
+          },
+          removeListener: (event, listener) => {
+            const web3 = assertDefined(getMPCProvider())
+            return web3.removeListener(event, listener)
+          },
+          disconnect: () => {
+            _getMPCCoreKitInstance()?.logout()
+          },
+        }
+
+        return {
+          provider,
+        }
+      },
+    }
+  }
+}
+
+export default MpcModule
diff --git a/src/services/mpc/SocialWalletService.ts b/src/services/mpc/SocialWalletService.ts
new file mode 100644
index 0000000000..5f70963f2f
--- /dev/null
+++ b/src/services/mpc/SocialWalletService.ts
@@ -0,0 +1,163 @@
+import { COREKIT_STATUS, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
+import BN from 'bn.js'
+import { SecurityQuestionRecovery } from '@/services/mpc/recovery/SecurityQuestionRecovery'
+import { trackEvent } from '@/services/analytics'
+import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
+import { DeviceShareRecovery } from '@/services/mpc/recovery/DeviceShareRecovery'
+import { logError } from '../exceptions'
+import ErrorCodes from '../exceptions/ErrorCodes'
+import { asError } from '../exceptions/utils'
+import { type ISocialWalletService } from './interfaces'
+import { isSocialWalletOptions, SOCIAL_WALLET_OPTIONS } from './config'
+
+/**
+ * Singleton Service for accessing the social login wallet
+ */
+class SocialWalletService implements ISocialWalletService {
+  private mpcCoreKit: Web3AuthMPCCoreKit
+  private onConnect: () => Promise<void> = () => Promise.resolve()
+
+  private deviceShareRecovery: DeviceShareRecovery
+  private securityQuestionRecovery: SecurityQuestionRecovery
+
+  constructor(mpcCoreKit: Web3AuthMPCCoreKit) {
+    this.mpcCoreKit = mpcCoreKit
+    this.deviceShareRecovery = new DeviceShareRecovery(mpcCoreKit)
+    this.securityQuestionRecovery = new SecurityQuestionRecovery(mpcCoreKit)
+  }
+
+  isMFAEnabled() {
+    const { shareDescriptions } = this.mpcCoreKit.getKeyDetails()
+    return !Object.values(shareDescriptions).some((value) => value[0]?.includes('hashedShare'))
+  }
+
+  isRecoveryPasswordSet() {
+    return this.securityQuestionRecovery.isEnabled()
+  }
+
+  async enableMFA(oldPassword: string | undefined, newPassword: string): Promise<void> {
+    try {
+      // 1. setup device factor with password recovery
+      await this.securityQuestionRecovery.upsertPassword(newPassword, oldPassword)
+      const securityQuestionFactor = await this.securityQuestionRecovery.recoverWithPassword(newPassword)
+      if (!securityQuestionFactor) {
+        throw Error('Problem setting up the new password')
+      }
+
+      if (!this.isMFAEnabled()) {
+        trackEvent(MPC_WALLET_EVENTS.ENABLE_MFA)
+        // 2. enable MFA in mpcCoreKit
+        await this.mpcCoreKit.enableMFA({}, false)
+      }
+
+      await this.mpcCoreKit.commitChanges()
+    } catch (e) {
+      const error = asError(e)
+      logError(ErrorCodes._304, error.message)
+      throw error
+    }
+  }
+
+  setOnConnect(onConnect: () => Promise<void>) {
+    this.onConnect = onConnect
+  }
+
+  getUserInfo() {
+    return this.mpcCoreKit.state.userInfo
+  }
+
+  async loginAndCreate(): Promise<COREKIT_STATUS> {
+    const config = SOCIAL_WALLET_OPTIONS
+    const isConfigured = isSocialWalletOptions(config)
+    if (!isConfigured) {
+      throw new Error('The Social signer wallet is not configured correctly')
+    }
+    try {
+      await this.mpcCoreKit.loginWithOauth({
+        aggregateVerifierIdentifier: config.web3AuthAggregateVerifierId,
+        subVerifierDetailsArray: [
+          {
+            clientId: config.googleClientId,
+            typeOfLogin: 'google',
+            verifier: config.web3AuthSubverifierId,
+          },
+        ],
+        aggregateVerifierType: 'single_id_verifier',
+      })
+
+      if (this.mpcCoreKit.status === COREKIT_STATUS.REQUIRED_SHARE) {
+        // Check if we have a device share stored
+        if (await this.deviceShareRecovery.isEnabled()) {
+          await this.deviceShareRecovery.recoverWithDeviceFactor()
+        } else {
+          // Check password recovery
+          if (this.securityQuestionRecovery.isEnabled()) {
+            trackEvent(MPC_WALLET_EVENTS.MANUAL_RECOVERY)
+            return this.mpcCoreKit.status
+          }
+        }
+      }
+
+      await this.finalizeLogin()
+      return this.mpcCoreKit.status
+    } catch (err) {
+      const error = asError(err)
+      logError(ErrorCodes._306, error)
+      throw new Error('Something went wrong. Please try to login again.')
+    }
+  }
+
+  private async finalizeLogin() {
+    if (this.mpcCoreKit.status === COREKIT_STATUS.LOGGED_IN) {
+      await this.mpcCoreKit.commitChanges()
+      await this.mpcCoreKit.provider?.request({ method: 'eth_accounts', params: [] })
+      await this.onConnect()
+    }
+  }
+
+  async recoverAccountWithPassword(password: string, storeDeviceShare: boolean = false) {
+    if (this.securityQuestionRecovery.isEnabled()) {
+      const factorKeyString = await this.securityQuestionRecovery.recoverWithPassword(password)
+      const factorKey = new BN(factorKeyString, 'hex')
+      await this.mpcCoreKit.inputFactorKey(factorKey)
+
+      if (storeDeviceShare) {
+        await this.deviceShareRecovery.createAndStoreDeviceFactor()
+      }
+
+      await this.finalizeLogin()
+    }
+
+    return this.mpcCoreKit.status === COREKIT_STATUS.LOGGED_IN
+  }
+
+  async exportSignerKey(password: string): Promise<string> {
+    try {
+      if (this.securityQuestionRecovery.isEnabled()) {
+        // Only export PK if recovery works
+        await this.securityQuestionRecovery.recoverWithPassword(password)
+      }
+      const exportedPK = await this.mpcCoreKit?._UNSAFE_exportTssKey()
+      return exportedPK
+    } catch (err) {
+      throw new Error('Error exporting account. Make sure the password is correct.')
+    }
+  }
+
+  async __deleteAccount() {
+    // This is a critical function that should only be used for testing purposes
+    // Resetting your account means clearing all the metadata associated with it from the metadata server
+    // The key details will be deleted from our server and you will not be able to recover your account
+    if (!this.mpcCoreKit?.metadataKey) {
+      throw new Error('MPC Core Kit is not initialized or the user is not logged in')
+    }
+
+    // In web3auth an account is reset by overwriting the metadata with KEY_NOT_FOUND
+    await this.mpcCoreKit.tKey.storageLayer.setMetadata({
+      privKey: new BN(this.mpcCoreKit.metadataKey, 'hex'),
+      input: { message: 'KEY_NOT_FOUND' },
+    })
+  }
+}
+
+export default SocialWalletService
diff --git a/src/services/mpc/__mocks__/SocialWalletService.ts b/src/services/mpc/__mocks__/SocialWalletService.ts
new file mode 100644
index 0000000000..7e78191dc3
--- /dev/null
+++ b/src/services/mpc/__mocks__/SocialWalletService.ts
@@ -0,0 +1,74 @@
+import { COREKIT_STATUS, type UserInfo } from '@web3auth/mpc-core-kit'
+import { hexZeroPad } from 'ethers/lib/utils'
+import { type ISocialWalletService } from '../interfaces'
+
+/**
+ * Manual mock for SocialWalletService
+ *
+ * By default it will log in the user after a 1 second timer.
+ * For password recovery it expects the password to be "Test1234!"
+ */
+class TestSocialWalletService implements ISocialWalletService {
+  private fakePassword = 'Test1234!'
+  private postLoginState = COREKIT_STATUS.LOGGED_IN
+  private _isMfaEnabled = false
+  private onConnect: () => Promise<void> = () => Promise.resolve()
+  private userInfo: UserInfo = {
+    email: 'test@testermann.com',
+    name: 'Test Testermann',
+    profileImage: 'test.testermann.local/profile.png',
+  } as unknown as UserInfo
+
+  setOnConnect(onConnect: () => Promise<void>): void {
+    this.onConnect = onConnect
+  }
+
+  getUserInfo(): UserInfo | undefined {
+    return this.userInfo
+  }
+  isMFAEnabled(): boolean {
+    return this._isMfaEnabled
+  }
+  enableMFA(oldPassword: string, newPassword: string): Promise<void> {
+    this._isMfaEnabled = true
+    return Promise.resolve()
+  }
+  isRecoveryPasswordSet(): boolean {
+    throw new Error('Method not implemented.')
+  }
+
+  /**
+   * Method for tests to set the expected login state after calling loginAndCreate()
+   */
+  __setPostLoginState(state: COREKIT_STATUS) {
+    this.postLoginState = state
+  }
+
+  __setUserInfo(userInfo: UserInfo) {
+    this.userInfo = userInfo
+  }
+
+  async loginAndCreate(): Promise<COREKIT_STATUS> {
+    return new Promise((resolve) => {
+      this.onConnect().then(() => resolve(this.postLoginState))
+    })
+  }
+
+  __deleteAccount(): void {
+    throw new Error('Method not implemented.')
+  }
+  async recoverAccountWithPassword(password: string, storeDeviceFactor: boolean): Promise<boolean> {
+    if (this.fakePassword === password) {
+      await this.onConnect()
+      return true
+    }
+
+    throw Error('Invalid Password')
+  }
+
+  exportSignerKey(password: string): Promise<string> {
+    return Promise.resolve(hexZeroPad('0x1', 20))
+  }
+}
+
+export default TestSocialWalletService
diff --git a/src/services/mpc/__tests__/SocialWalletService.test.ts b/src/services/mpc/__tests__/SocialWalletService.test.ts
new file mode 100644
index 0000000000..4e766b2556
--- /dev/null
+++ b/src/services/mpc/__tests__/SocialWalletService.test.ts
@@ -0,0 +1,271 @@
+import { act, waitFor } from '@/tests/test-utils'
+import {
+  COREKIT_STATUS,
+  type UserInfo,
+  type OauthLoginParams,
+  type Web3AuthMPCCoreKit,
+  type TssSecurityQuestion,
+} from '@web3auth/mpc-core-kit'
+import * as mpcCoreKit from '@web3auth/mpc-core-kit'
+import * as socialWalletOptions from '@/services/mpc/config'
+import { ethers } from 'ethers'
+import BN from 'bn.js'
+import { hexZeroPad } from 'ethers/lib/utils'
+import SocialWalletService from '../SocialWalletService'
+
+/** time until mock login resolves */
+const MOCK_LOGIN_TIME = 1000
+/** Mock address for successful login */
+const mockSignerAddress = hexZeroPad('0x1', 20)
+
+/**
+ * Helper class for mocking MPC Core Kit login flow
+ */
+class MockMPCCoreKit {
+  status: COREKIT_STATUS = COREKIT_STATUS.INITIALIZED
+  state: {
+    userInfo: UserInfo | undefined
+  } = {
+    userInfo: undefined,
+  }
+
+  private stateAfterLogin: COREKIT_STATUS
+  private userInfoAfterLogin: UserInfo | undefined
+  private expectedFactorKey: BN
+  /**
+   *
+   * @param stateAfterLogin State after loginWithOauth resolves
+   * @param userInfoAfterLogin  User info to set in the state after loginWithOauth resolves
+   * @param expectedFactorKey For MFA login flow the expected factor key. If inputFactorKey gets called with the expected factor key the state switches to logged in
+   */
+  constructor(stateAfterLogin: COREKIT_STATUS, userInfoAfterLogin: UserInfo, expectedFactorKey: BN = new BN(-1)) {
+    this.stateAfterLogin = stateAfterLogin
+    this.userInfoAfterLogin = userInfoAfterLogin
+    this.expectedFactorKey = expectedFactorKey
+  }
+
+  loginWithOauth(params: OauthLoginParams): Promise<void> {
+    return new Promise((resolve) => {
+      // Resolve after 1 sec
+      setTimeout(() => {
+        this.status = this.stateAfterLogin
+        this.state.userInfo = this.userInfoAfterLogin
+        resolve()
+      }, MOCK_LOGIN_TIME)
+    })
+  }
+
+  inputFactorKey(factorKey: BN) {
+    if (factorKey.eq(this.expectedFactorKey)) {
+      this.status = COREKIT_STATUS.LOGGED_IN
+      return Promise.resolve()
+    } else {
+      Promise.reject()
+    }
+  }
+
+  commitChanges = jest.fn().mockImplementation(() => Promise.resolve())
+
+  getUserInfo() {
+    return this.state.userInfo
+  }
+}
+
+describe('useMPCWallet', () => {
+  beforeAll(() => {
+    jest.useFakeTimers()
+  })
+  beforeEach(() => {
+    jest.resetAllMocks()
+    jest.spyOn(socialWalletOptions, 'isSocialWalletOptions').mockReturnValue(true)
+  })
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  describe('triggerLogin', () => {
+    it('should handle successful log in for SFA account', async () => {
+      const mockOnConnect = jest.fn()
+
+      const mockCoreKit = new MockMPCCoreKit(COREKIT_STATUS.LOGGED_IN, {
+        email: 'test@test.com',
+        name: 'Test',
+      } as unknown as UserInfo) as unknown as Web3AuthMPCCoreKit
+
+      const testService = new SocialWalletService(mockCoreKit)
+      testService.setOnConnect(mockOnConnect)
+
+      let status: Promise<COREKIT_STATUS>
+      act(() => {
+        status = testService.loginAndCreate()
+      })
+
+      expect(mockOnConnect).not.toHaveBeenCalled()
+
+      // Resolve mock login
+      act(() => {
+        jest.advanceTimersByTime(MOCK_LOGIN_TIME)
+      })
+
+      // We should be logged in and onboard should get connected
+      await waitFor(() => {
+        expect(status).resolves.toEqual(COREKIT_STATUS.LOGGED_IN)
+        expect(mockOnConnect).toHaveBeenCalled()
+        expect(mockCoreKit.commitChanges).toHaveBeenCalled()
+      })
+    })
+
+    it('should handle successful log in for MFA account with device share', async () => {
+      const mockOnConnect = jest.fn()
+
+      const mockDeviceFactor = ethers.Wallet.createRandom().privateKey.slice(2)
+
+      const mockCoreKit = new MockMPCCoreKit(
+        COREKIT_STATUS.REQUIRED_SHARE,
+        {
+          email: 'test@test.com',
+          name: 'Test',
+        } as unknown as UserInfo,
+        new BN(mockDeviceFactor, 'hex'),
+      ) as unknown as Web3AuthMPCCoreKit
+
+      jest.spyOn(mpcCoreKit, 'getWebBrowserFactor').mockReturnValue(Promise.resolve(mockDeviceFactor))
+
+      const testService = new SocialWalletService(mockCoreKit)
+      testService.setOnConnect(mockOnConnect)
+
+      let status: Promise<COREKIT_STATUS>
+      act(() => {
+        status = testService.loginAndCreate()
+      })
+
+      // While the login resolves we are in Authenticating state
+      expect(mockOnConnect).not.toHaveBeenCalled()
+
+      // Resolve mock login
+      act(() => {
+        jest.advanceTimersByTime(MOCK_LOGIN_TIME)
+      })
+
+      // We should be logged in and onboard should get connected
+      await waitFor(() => {
+        expect(status).resolves.toEqual(COREKIT_STATUS.LOGGED_IN)
+        expect(mockOnConnect).toHaveBeenCalled()
+        expect(mockCoreKit.commitChanges).toHaveBeenCalled()
+      })
+    })
+
+    it('should require manual share for MFA account without device share', async () => {
+      const mockOnConnect = jest.fn()
+      const mockCoreKit = new MockMPCCoreKit(COREKIT_STATUS.REQUIRED_SHARE, {
+        email: 'test@test.com',
+        name: 'Test',
+      } as unknown as UserInfo) as unknown as Web3AuthMPCCoreKit
+
+      jest.spyOn(mpcCoreKit, 'getWebBrowserFactor').mockReturnValue(Promise.resolve(undefined))
+      jest.spyOn(mpcCoreKit, 'TssSecurityQuestion').mockReturnValue({
+        getQuestion: () => 'SOME RANDOM QUESTION',
+      } as unknown as TssSecurityQuestion)
+
+      const testService = new SocialWalletService(mockCoreKit)
+      testService.setOnConnect(mockOnConnect)
+
+      let status: Promise<COREKIT_STATUS>
+      act(() => {
+        status = testService.loginAndCreate()
+      })
+
+      // Resolve mock login
+      act(() => {
+        jest.advanceTimersByTime(MOCK_LOGIN_TIME)
+      })
+
+      // A missing second factor should result in manual recovery state
+      await waitFor(() => {
+        expect(status).resolves.toEqual(COREKIT_STATUS.REQUIRED_SHARE)
+        expect(mockOnConnect).not.toHaveBeenCalled()
+        expect(mockCoreKit.commitChanges).not.toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('resetAccount', () => {
+    it('should reset an account by overwriting the metadata', async () => {
+      const mockSetMetadata = jest.fn()
+      const mockMPCCore = {
+        metadataKey: ethers.Wallet.createRandom().privateKey.slice(2),
+        state: {
+          userInfo: undefined,
+        },
+        tKey: {
+          storageLayer: {
+            setMetadata: mockSetMetadata,
+          },
+        },
+      }
+
+      const testService = new SocialWalletService(mockMPCCore as unknown as Web3AuthMPCCoreKit)
+
+      await testService.__deleteAccount()
+
+      expect(mockSetMetadata).toHaveBeenCalledWith({
+        privKey: new BN(mockMPCCore.metadataKey, 'hex'),
+        input: { message: 'KEY_NOT_FOUND' },
+      })
+    })
+  })
+
+  describe('recoverFactorWithPassword', () => {
+    it('should not recover if wrong password is entered', () => {
+      const mockOnConnect = jest.fn()
+      const mockMPCCore = {
+        state: {
+          userInfo: undefined,
+        },
+        commitChanges: jest.fn(),
+      } as unknown as Web3AuthMPCCoreKit
+
+      jest.spyOn(mpcCoreKit, 'TssSecurityQuestion').mockReturnValue({
+        getQuestion: () => 'SOME RANDOM QUESTION',
+        recoverFactor: () => {
+          throw new Error('Invalid answer')
+        },
+      } as unknown as TssSecurityQuestion)
+
+      const testService = new SocialWalletService(mockMPCCore as unknown as Web3AuthMPCCoreKit)
+      testService.setOnConnect(mockOnConnect)
+
+      expect(testService.recoverAccountWithPassword('test', false)).rejects.toEqual(new Error('Invalid answer'))
+      expect(mockOnConnect).not.toHaveBeenCalled()
+      expect(mockMPCCore.commitChanges).not.toHaveBeenCalled()
+    })
+
+    it('should input recovered factor if correct password is entered', async () => {
+      const mockOnConnect = jest.fn()
+      const mockSecurityQuestionFactor = ethers.Wallet.createRandom().privateKey.slice(2)
+
+      const mockMPCCore = new MockMPCCoreKit(
+        COREKIT_STATUS.REQUIRED_SHARE,
+        {
+          email: 'test@test.com',
+          name: 'Test',
+        } as unknown as UserInfo,
+        new BN(mockSecurityQuestionFactor, 'hex'),
+      ) as unknown as Web3AuthMPCCoreKit
+
+      jest.spyOn(mpcCoreKit, 'TssSecurityQuestion').mockReturnValue({
+        getQuestion: () => 'SOME RANDOM QUESTION',
+        recoverFactor: () => Promise.resolve(mockSecurityQuestionFactor),
+      } as unknown as TssSecurityQuestion)
+
+      const testService = new SocialWalletService(mockMPCCore as unknown as Web3AuthMPCCoreKit)
+      testService.setOnConnect(mockOnConnect)
+
+      act(() => testService.recoverAccountWithPassword('test', false))
+
+      await waitFor(() => {
+        expect(mockOnConnect).toHaveBeenCalled()
+      })
+    })
+  })
+})
diff --git a/src/services/mpc/__tests__/module.test.ts b/src/services/mpc/__tests__/module.test.ts
new file mode 100644
index 0000000000..f90a2021c3
--- /dev/null
+++ b/src/services/mpc/__tests__/module.test.ts
@@ -0,0 +1,125 @@
+import { chainBuilder } from '@/tests/builders/chains'
+import { FEATURES } from '@/utils/chains'
+import MpcModule, { ONBOARD_MPC_MODULE_LABEL } from '../SocialLoginModule'
+import { type WalletModule } from '@web3-onboard/common'
+
+import * as web3 from '@/hooks/wallets/web3'
+import * as useMPC from '@/hooks/wallets/mpc/useMPC'
+import { hexZeroPad } from 'ethers/lib/utils'
+
+const mockChain = chainBuilder()
+  // @ts-expect-error - we are using a local FEATURES enum
+  .with({ features: [FEATURES.SOCIAL_LOGIN] })
+  .build()
+
+describe('MPC Onboard module', () => {
+  it('should return correct metadata', async () => {
+    const mpcModule = MpcModule(mockChain)({
+      device: {
+        browser: {
+          name: 'Firefox',
+          version: '1.0',
+        },
+        os: {
+          name: 'macOS',
+          version: '1.0',
+        },
+        type: 'desktop',
+      },
+    })
+    expect(Array.isArray(mpcModule)).toBeFalsy()
+    const walletModule = mpcModule as WalletModule
+
+    expect(walletModule.label).toBe(ONBOARD_MPC_MODULE_LABEL)
+    expect(walletModule.getIcon()).toBeDefined()
+    const walletInterface = await walletModule.getInterface({} as any)
+    expect(walletInterface.instance).toBeUndefined()
+    expect(walletInterface.provider).toBeDefined()
+  })
+
+  it('should call web3readonly for eth_estimateGas', async () => {
+    const mockReadOnlySend = jest.fn().mockImplementation(() => Promise.resolve('0x5'))
+    jest.spyOn(web3, 'getWeb3ReadOnly').mockReturnValue({
+      send: mockReadOnlySend,
+    } as any)
+
+    jest.spyOn(useMPC, '_getMPCCoreKitInstance').mockImplementation(() => {
+      return {
+        provider: {},
+      } as any
+    })
+
+    const mpcModule = MpcModule(mockChain)({
+      device: {
+        browser: {
+          name: 'Firefox',
+          version: '1.0',
+        },
+        os: {
+          name: 'macOS',
+          version: '1.0',
+        },
+        type: 'desktop',
+      },
+    })
+    const walletModule = mpcModule as WalletModule
+    const walletInterface = await walletModule.getInterface({} as any)
+
+    await walletInterface.provider.request({
+      method: 'eth_estimateGas',
+      params: [
+        {
+          to: hexZeroPad('0x123', 20),
+          value: '0',
+          data: '0x',
+        },
+      ],
+    })
+
+    expect(mockReadOnlySend).toHaveBeenCalledWith('eth_estimateGas', [
+      {
+        to: hexZeroPad('0x123', 20),
+        value: '0',
+        data: '0x',
+      },
+    ])
+  })
+
+  it('should call eth_accounts when eth_requestAccounts gets called', async () => {
+    const mockReadOnlySend = jest.fn()
+    const mockMPCProviderRequest = jest.fn().mockImplementation(() => Promise.resolve(hexZeroPad('0x456', 20)))
+    jest.spyOn(web3, 'getWeb3ReadOnly').mockReturnValue({
+      send: mockReadOnlySend,
+    } as any)
+
+    jest.spyOn(useMPC, '_getMPCCoreKitInstance').mockImplementation(() => {
+      return {
+        provider: {
+          request: mockMPCProviderRequest,
+        },
+      } as any
+    })
+
+    const mpcModule = MpcModule(mockChain)({
+      device: {
+        browser: {
+          name: 'Firefox',
+          version: '1.0',
+        },
+        os: {
+          name: 'macOS',
+          version: '1.0',
+        },
+        type: 'desktop',
+      },
+    })
+    const walletModule = mpcModule as WalletModule
+    const walletInterface = await walletModule.getInterface({} as any)
+
+    await walletInterface.provider.request({
+      method: 'eth_requestAccounts',
+    })
+
+    expect(mockMPCProviderRequest).toHaveBeenCalledWith({ method: 'eth_accounts' })
+  })
+})
diff --git a/src/services/mpc/config.ts b/src/services/mpc/config.ts
new file mode 100644
index 0000000000..17dce21cc2
--- /dev/null
+++ b/src/services/mpc/config.ts
@@ -0,0 +1,40 @@
+import { IS_PRODUCTION } from '@/config/constants'
+
+enum SocialWalletOptionsKeys {
+  web3AuthClientId = 'web3AuthClientId',
+  web3AuthAggregateVerifierId = 'web3AuthAggregateVerifierId',
+  web3AuthSubverifierId = 'web3AuthSubverifierId',
+  googleClientId = 'googleClientId',
+}
+
+export type SocialWalletOptions = {
+  [SocialWalletOptionsKeys.web3AuthClientId]: string
+  [SocialWalletOptionsKeys.web3AuthAggregateVerifierId]: string
+  [SocialWalletOptionsKeys.web3AuthSubverifierId]: string
+  [SocialWalletOptionsKeys.googleClientId]: string
+}
+
+export const isSocialWalletOptions = (options: unknown): options is SocialWalletOptions => {
+  if (typeof options !== 'object' || options === null) {
+    return false
+  }
+
+  const requiredKeys = Object.values(SocialWalletOptionsKeys)
+  const hasRequiredKeys = requiredKeys.every((key) => key in options)
+  const hasValues = Object.values(options).every(Boolean)
+
+  return hasRequiredKeys && hasValues
+}
+
+/** env variables */
+export const SOCIAL_WALLET_OPTIONS: any = (() => {
+  const SOCIAL_WALLET_OPTIONS_PRODUCTION = process.env.NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION || ''
+  const SOCIAL_WALLET_OPTIONS_STAGING = process.env.NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING || ''
+
+  try {
+    return JSON.parse(IS_PRODUCTION ? SOCIAL_WALLET_OPTIONS_PRODUCTION : SOCIAL_WALLET_OPTIONS_STAGING)
+  } catch (error) {
+    console.error('Error parsing SOCIAL_WALLET_OPTIONS', error)
+    return {}
+  }
+})()
diff --git a/src/services/mpc/icon.ts b/src/services/mpc/icon.ts
new file mode 100644
index 0000000000..c306bf5353
--- /dev/null
+++ b/src/services/mpc/icon.ts
@@ -0,0 +1,12 @@
+const pairingIcon = `
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="64.6887" cy="64.6882" r="59.1828" fill="#0364FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.8746 85.5612C88.474 87.056 86.353 87.056 85.9524 85.5612L81.2873 68.1506C81.1971 67.8139 81.1971 67.4595 81.2873 67.1229L85.4214 51.694C85.7869 50.3301 87.0229 49.3817 88.4349 49.3817H94.5031C96.5544 49.3817 98.0475 51.3275 97.5165 53.309L88.8746 85.5612ZM48.8481 68.1215C48.9383 67.7849 48.9383 67.4305 48.8481 67.0938L44.7217 51.694C44.3562 50.3301 43.1203 49.3817 41.7082 49.3817H35.6401C33.5887 49.3817 32.0956 51.3275 32.6266 53.309L41.2607 85.5321C41.6613 87.0269 43.7824 87.0269 44.1829 85.5321L48.8481 68.1215Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.9907 89.069C61.854 89.5793 62.2385 90.0805 62.7669 90.0805H67.3947C67.9231 90.0805 68.3077 89.5793 68.1709 89.069L65.857 80.4334C65.6442 79.6392 64.5174 79.6392 64.3046 80.4334L61.9907 89.069Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M57.3829 94.5979C57.0285 95.9205 55.83 96.8402 54.4607 96.8402H48.1968C46.2076 96.8402 44.7598 94.9533 45.2747 93.0319L58.1248 45.0747C58.5124 43.6281 59.8233 42.6222 61.3209 42.6222H68.7757C70.2733 42.6222 71.5842 43.6281 71.9718 45.0747L84.822 93.0319C85.3368 94.9533 83.889 96.8402 81.8998 96.8402H75.6359C74.2666 96.8402 73.0681 95.9205 72.7137 94.5979L66.4637 71.2726C66.0757 69.8245 64.0209 69.8245 63.6329 71.2726L57.3829 94.5979Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.8909 85.5612C88.4903 87.056 86.3692 87.056 85.9687 85.5612L81.3035 68.1506C81.2133 67.8139 81.2133 67.4595 81.3035 67.1229L87.2489 44.9345C87.6144 43.5706 88.8503 42.6222 90.2624 42.6222H96.3305C98.3819 42.6222 99.8749 44.568 99.344 46.5494L88.8909 85.5612ZM48.8643 68.1215C48.9545 67.7849 48.9545 67.4305 48.8643 67.0938L42.9268 44.9345C42.5613 43.5706 41.3253 42.6222 39.9133 42.6222H33.8451C31.7938 42.6222 30.3007 44.568 30.8317 46.5494L41.277 85.5321C41.6776 87.0269 43.7986 87.0269 44.1992 85.5321L48.8643 68.1215Z" fill="white"/>
+</svg>
+
+`
+
+export default pairingIcon
diff --git a/src/services/mpc/interfaces.ts b/src/services/mpc/interfaces.ts
new file mode 100644
index 0000000000..b76ace0eec
--- /dev/null
+++ b/src/services/mpc/interfaces.ts
@@ -0,0 +1,52 @@
+import type { COREKIT_STATUS, UserInfo } from '@web3auth/mpc-core-kit'
+
+export interface ISocialWalletService {
+  /**
+   * Opens a popup with the Google login and creates / restores the mpc wallet.
+   *
+   * @returns the follow up status of the mpcCoreKit.
+   */
+  loginAndCreate(): Promise<COREKIT_STATUS>
+
+  /**
+   * Deletes the currently logged in account.
+   * This should only be used in dev environments and never in prod!
+   */
+  __deleteAccount(): void
+
+  /**
+   * Tries to recover a social signer through the Security Questions module
+   *
+   * @param password entered recovery password
+   * @param storeDeviceFactor if true a device factor will be added after successful recovery
+   */
+  recoverAccountWithPassword(password: string, storeDeviceFactor: boolean): Promise<boolean>
+
+  /**
+   * Exports the key of the signer
+   *
+   * @param password recovery password
+   */
+  exportSignerKey(password: string): Promise<string>
+
+  /**
+   * Returns true if MFA is enabled
+   */
+  isMFAEnabled(): boolean
+
+  /**
+   * Enables MFA and stores a device share with 2 factors:
+   * - one factor encrypted with the password
+   * - one factor encrypted with a key in the local storage of the browser
+   *
+   * @param oldPassword required if MFA is already enabled
+   * @param newPassword new password to set
+   */
+  enableMFA(oldPassword: string | undefined, newPassword: string): Promise<void>
+
+  isRecoveryPasswordSet(): boolean
+
+  getUserInfo(): UserInfo | undefined
+
+  setOnConnect(onConnect: () => Promise<void>): void
+}
diff --git a/src/services/mpc/recovery/DeviceShareRecovery.ts b/src/services/mpc/recovery/DeviceShareRecovery.ts
new file mode 100644
index 0000000000..7806f91b92
--- /dev/null
+++ b/src/services/mpc/recovery/DeviceShareRecovery.ts
@@ -0,0 +1,59 @@
+import {
+  BrowserStorage,
+  getWebBrowserFactor,
+  storeWebBrowserFactor,
+  TssShareType,
+  type Web3AuthMPCCoreKit,
+} from '@web3auth/mpc-core-kit'
+import BN from 'bn.js'
+import { getPubKeyPoint } from '@tkey-mpc/common-types'
+
+export class DeviceShareRecovery {
+  private mpcCoreKit: Web3AuthMPCCoreKit
+
+  constructor(mpcCoreKit: Web3AuthMPCCoreKit) {
+    this.mpcCoreKit = mpcCoreKit
+  }
+
+  async isEnabled() {
+    return !!(await getWebBrowserFactor(this.mpcCoreKit))
+  }
+
+  async createAndStoreDeviceFactor() {
+    const userAgent = navigator.userAgent
+
+    const deviceFactorKey = new BN(
+      await this.mpcCoreKit.createFactor({ shareType: TssShareType.DEVICE, additionalMetadata: { userAgent } }),
+      'hex',
+    )
+    await storeWebBrowserFactor(deviceFactorKey, this.mpcCoreKit)
+  }
+
+  async recoverWithDeviceFactor() {
+    // Recover from device factor
+    const deviceFactor = await getWebBrowserFactor(this.mpcCoreKit)
+    if (!deviceFactor) {
+      throw Error('Cannot recover from device factor. No device factor found')
+    }
+    const deviceFactorKey = new BN(deviceFactor, 'hex')
+    await this.mpcCoreKit.inputFactorKey(deviceFactorKey)
+  }
+
+  async removeDeviceFactor() {
+    const deviceFactor = await getWebBrowserFactor(this.mpcCoreKit)
+    if (!deviceFactor) {
+      // No device factor exists. Nothing to do
+      return
+    }
+    // Delete factor
+    const key = new BN(deviceFactor, 'hex')
+    const pubKey = getPubKeyPoint(key)
+    await this.mpcCoreKit.deleteFactor(pubKey)
+
+    // Remove from local storage
+    const metadata = this.mpcCoreKit.tKey.getMetadata()
+    const tkeyPubX = metadata.pubKey.x.toString(16, 64)
+    const currentStorage = BrowserStorage.getInstance('mpc_corekit_store')
+    currentStorage.remove(tkeyPubX)
+  }
+}
diff --git a/src/services/mpc/recovery/SecurityQuestionRecovery.ts b/src/services/mpc/recovery/SecurityQuestionRecovery.ts
new file mode 100644
index 0000000000..0d707cb29f
--- /dev/null
+++ b/src/services/mpc/recovery/SecurityQuestionRecovery.ts
@@ -0,0 +1,48 @@
+import { TssSecurityQuestion, TssShareType, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
+
+export class SecurityQuestionRecovery {
+  /** This is only used internally in the metadata store of tKey. Not in the UI */
+  private static readonly DEFAULT_SECURITY_QUESTION = 'ENTER PASSWORD'
+
+  private mpcCoreKit: Web3AuthMPCCoreKit
+  private securityQuestions = new TssSecurityQuestion()
+
+  constructor(mpcCoreKit: Web3AuthMPCCoreKit) {
+    this.mpcCoreKit = mpcCoreKit
+  }
+
+  isEnabled(): boolean {
+    try {
+      const question = this.securityQuestions.getQuestion(this.mpcCoreKit)
+      return !!question
+    } catch (error) {
+      // It errors out if recovery is not setup currently
+      return false
+    }
+  }
+
+  async upsertPassword(newPassword: string, oldPassword?: string) {
+    if (this.isEnabled()) {
+      if (!oldPassword) {
+        throw Error('To change the password you need to provide the old password')
+      }
+      await this.securityQuestions.changeSecurityQuestion({
+        answer: oldPassword,
+        mpcCoreKit: this.mpcCoreKit,
+        newAnswer: newPassword,
+        newQuestion: SecurityQuestionRecovery.DEFAULT_SECURITY_QUESTION,
+      })
+    } else {
+      await this.securityQuestions.setSecurityQuestion({
+        question: SecurityQuestionRecovery.DEFAULT_SECURITY_QUESTION,
+        answer: newPassword,
+        mpcCoreKit: this.mpcCoreKit,
+        shareType: TssShareType.DEVICE,
+      })
+    }
+  }
+
+  async recoverWithPassword(password: string) {
+    return this.securityQuestions.recoverFactor(this.mpcCoreKit, password)
+  }
+}
diff --git a/src/store/__tests__/addressBookSlice.test.ts b/src/store/__tests__/addressBookSlice.test.ts
index 435927eafd..d72cc69d2b 100644
--- a/src/store/__tests__/addressBookSlice.test.ts
+++ b/src/store/__tests__/addressBookSlice.test.ts
@@ -32,6 +32,18 @@ describe('addressBookSlice', () => {
     })
   })
 
+  it('should ignore empty names in the address book', () => {
+    const state = addressBookSlice.reducer(
+      initialState,
+      upsertAddressBookEntry({
+        chainId: '1',
+        address: '0x2',
+        name: '',
+      }),
+    )
+    expect(state).toEqual(initialState)
+  })
+
   it('should edit an entry in the address book', () => {
     const state = addressBookSlice.reducer(
       initialState,
diff --git a/src/store/addressBookSlice.ts b/src/store/addressBookSlice.ts
index 62bf1f6449..9a24c03637 100644
--- a/src/store/addressBookSlice.ts
+++ b/src/store/addressBookSlice.ts
@@ -26,6 +26,9 @@ export const addressBookSlice = createSlice({
 
     upsertAddressBookEntry: (state, action: PayloadAction<{ chainId: string; address: string; name: string }>) => {
       const { chainId, address, name } = action.payload
+      if (name.trim() === '') {
+        return
+      }
       if (!state[chainId]) state[chainId] = {}
       state[chainId][address] = name
     },
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1734b5b58e..91c240e053 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -70,6 +70,10 @@ input[type='number'] {
   stroke: var(--color-border-main);
 }
 
+.illustration-very-light-stroke {
+  stroke: var(--color-border-light);
+}
+
 .illustration-background-stroke {
   stroke: var(--color-logo-background);
 }
diff --git a/src/tests/builders/eip1193Provider.ts b/src/tests/builders/eip1193Provider.ts
new file mode 100644
index 0000000000..5896fe9b5f
--- /dev/null
+++ b/src/tests/builders/eip1193Provider.ts
@@ -0,0 +1,10 @@
+import { type EIP1193Provider } from '@web3-onboard/core'
+import { Builder } from '../Builder'
+
+export const eip1193ProviderBuilder = () =>
+  Builder.new<EIP1193Provider>().with({
+    disconnect: jest.fn(),
+    on: jest.fn(),
+    removeListener: jest.fn(),
+    request: jest.fn(),
+  })
diff --git a/src/tests/builders/wallet.ts b/src/tests/builders/wallet.ts
new file mode 100644
index 0000000000..ce2d601b8d
--- /dev/null
+++ b/src/tests/builders/wallet.ts
@@ -0,0 +1,16 @@
+import { type ConnectedWallet } from '@/services/onboard'
+import { faker } from '@faker-js/faker'
+import { Builder, type IBuilder } from '../Builder'
+import { eip1193ProviderBuilder } from './eip1193Provider'
+
+const walletNames = ['MetaMask', 'Wallet Connect', 'Social Login', 'Rainbow']
+
+export const connectedWalletBuilder = (): IBuilder<ConnectedWallet> => {
+  return Builder.new<ConnectedWallet>().with({
+    address: faker.finance.ethereumAddress(),
+    chainId: faker.string.numeric(),
+    ens: faker.string.alpha() + '.ens',
+    label: faker.helpers.arrayElement(walletNames),
+    provider: eip1193ProviderBuilder().build(),
+  })
+}
diff --git a/src/utils/addresses.ts b/src/utils/addresses.ts
index e1c4bfce68..8718efbd22 100644
--- a/src/utils/addresses.ts
+++ b/src/utils/addresses.ts
@@ -1,6 +1,10 @@
 import { getAddress } from 'ethers/lib/utils'
 import { isAddress } from '@ethersproject/address'
-
+/**
+ * Checksums the given address
+ * @param address ethereum address
+ * @returns the checksummed address if the given address is valid otherwise returns the address unchanged
+ */
 export const checksumAddress = (address: string): string => {
   return isAddress(address) ? getAddress(address) : address
 }
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index f4bcf886fb..a5e1eaf128 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -16,6 +16,7 @@ export enum FEATURES {
   RISK_MITIGATION = 'RISK_MITIGATION',
   PUSH_NOTIFICATIONS = 'PUSH_NOTIFICATIONS',
   NATIVE_WALLETCONNECT = 'NATIVE_WALLETCONNECT',
+  SOCIAL_LOGIN = 'SOCIAL_LOGIN',
 }
 
 export const hasFeature = (chain: ChainInfo, feature: FEATURES): boolean => {
diff --git a/yarn.lock b/yarn.lock
index 978b89eee0..04aa30539d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1035,7 +1035,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.10", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -1081,6 +1081,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@chaitanyapotti/register-service-worker@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@chaitanyapotti/register-service-worker/-/register-service-worker-1.7.3.tgz#0e670b8a4de1c319a147700d7ebb4f8a2b2e1b84"
+  integrity sha512-ywnUSfwvqdHchO3ELFWP6hlnhzc2UUETbk+TaBT/vicuMnJbnBLuDCcoy3aWvUE9bjmzg4QQpssRLSz1iZ7XRA==
+
 "@coinbase/wallet-sdk@^3.7.2":
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.7.2.tgz#7a89bd9e3a06a1f26d4480d8642af33fb0c7e3aa"
@@ -1485,11 +1490,24 @@
     crc-32 "^1.2.0"
     ethereumjs-util "^7.1.5"
 
-"@ethereumjs/rlp@^4.0.1":
+"@ethereumjs/common@^3.0.0", "@ethereumjs/common@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/common/-/common-3.2.0.tgz#b71df25845caf5456449163012074a55f048e0a0"
+  integrity sha512-pksvzI0VyLgmuEF2FA/JR/4/y6hcPq8OUail3/AvycBaW1d5VSauOZzqGvJ3RTmR4MU35lWE8KseKOsEhrFRBA==
+  dependencies:
+    "@ethereumjs/util" "^8.1.0"
+    crc-32 "^1.2.0"
+
+"@ethereumjs/rlp@^4.0.0", "@ethereumjs/rlp@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@ethereumjs/rlp/-/rlp-4.0.1.tgz#626fabfd9081baab3d0a3074b0c7ecaf674aaa41"
   integrity sha512-tqsQiBQDQdmPWE1xkkBq4rlSW5QZpLOUJ5RJh2/9fug+q9tnUhuZoVLk7s0scUIKTOzEtR72DFBXI4WiZcMpvw==
 
+"@ethereumjs/rlp@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/rlp/-/rlp-5.0.0.tgz#dd81b32b2237bc32fb1b54534f8ff246a6c89d9b"
+  integrity sha512-WuS1l7GJmB0n0HsXLozCoEFc9IwYgf3l0gCkKVYgR67puVF1O4OpEaN0hWmm1c+iHUHFCKt1hJrvy5toLg+6ag==
+
 "@ethereumjs/tx@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@ethereumjs/tx/-/tx-3.0.0.tgz#8dfd91ed6e91e63996e37b3ddc340821ebd48c81"
@@ -1522,7 +1540,17 @@
     "@ethereumjs/common" "^2.6.4"
     ethereumjs-util "^7.1.5"
 
-"@ethereumjs/util@^8.1.0":
+"@ethereumjs/tx@^4.0.0", "@ethereumjs/tx@^4.1.2":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/tx/-/tx-4.2.0.tgz#5988ae15daf5a3b3c815493bc6b495e76009e853"
+  integrity sha512-1nc6VO4jtFd172BbSnTnDQVr9IYBFl1y4xPzZdtkrkKIncBCkdbgfdRV+MiTkJYAtTxvV12GRZLqBFT1PNK6Yw==
+  dependencies:
+    "@ethereumjs/common" "^3.2.0"
+    "@ethereumjs/rlp" "^4.0.1"
+    "@ethereumjs/util" "^8.1.0"
+    ethereum-cryptography "^2.0.0"
+
+"@ethereumjs/util@^8.0.0", "@ethereumjs/util@^8.0.6", "@ethereumjs/util@^8.1.0":
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/@ethereumjs/util/-/util-8.1.0.tgz#299df97fb6b034e0577ce9f94c7d9d1004409ed4"
   integrity sha512-zQ0IqbdX8FZ9aw11vP+dZkKDkS+kgIvQPHnSAXzP9pLu+Rfu3D3XEeLbicvoXJTYnhZiPmsZUxgdzXwNKxRPbA==
@@ -1531,6 +1559,14 @@
     ethereum-cryptography "^2.0.0"
     micro-ftch "^0.3.1"
 
+"@ethereumjs/util@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/util/-/util-9.0.0.tgz#ac5945c629f3ab2ac584d8b12a8513e8eac29dc4"
+  integrity sha512-V8062I+ZXfFxtFLp7xsPeiT1IxDaVOZaM78nGj1gsWUFeZ8SgADMLDKWehp+muTy1JRbVoXFljZ1qoyv9ji/2g==
+  dependencies:
+    "@ethereumjs/rlp" "^5.0.0"
+    ethereum-cryptography "^2.1.2"
+
 "@ethersproject/abi@5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.5.0.tgz#fb52820e22e50b854ff15ce1647cc508d6660613"
@@ -3266,6 +3302,18 @@
     tweetnacl "^1.0.3"
     tweetnacl-util "^0.15.1"
 
+"@metamask/eth-sig-util@^5.0.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-5.1.0.tgz#a47f62800ee1917fef976ba67544a0ccd7d1bd6b"
+  integrity sha512-mlgziIHYlA9pi/XZerChqg4NocdOgBPB9NmxgXWQO2U2hH8RGOJQrz6j/AIKkYxgCMIE2PY000+joOwXfzeTDQ==
+  dependencies:
+    "@ethereumjs/util" "^8.0.6"
+    bn.js "^4.12.0"
+    ethereum-cryptography "^2.0.0"
+    ethjs-util "^0.1.6"
+    tweetnacl "^1.0.3"
+    tweetnacl-util "^0.15.1"
+
 "@metamask/obs-store@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/obs-store/-/obs-store-7.0.0.tgz#6cae5f28306bb3e83a381bc9ae22682316095bd3"
@@ -3274,6 +3322,22 @@
     "@metamask/safe-event-emitter" "^2.0.0"
     through2 "^2.0.3"
 
+"@metamask/rpc-errors@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@metamask/rpc-errors/-/rpc-errors-5.1.1.tgz#f82732ad0952d34d219eca42699c0c74bee95a9e"
+  integrity sha512-JjZnDi2y2CfvbohhBl+FOQRzmFlJpybcQlIk37zEX8B96eVSPbH/T8S0p7cSF8IE33IWx6JkD8Ycsd+2TXFxCw==
+  dependencies:
+    "@metamask/utils" "^5.0.0"
+    fast-safe-stringify "^2.0.6"
+
+"@metamask/rpc-errors@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/rpc-errors/-/rpc-errors-6.1.0.tgz#dfdef7cba4b9ad01ca3f99e990b5980575b89b4f"
+  integrity sha512-JQElKxai26FpDyRKO/yH732wI+BV90i1u6pOuDOpdADSbppB2g1pPh3AGST1zkZqEE9eIKIUw8UdBQ4rp3VTSg==
+  dependencies:
+    "@metamask/utils" "^8.1.0"
+    fast-safe-stringify "^2.0.6"
+
 "@metamask/safe-event-emitter@2.0.0", "@metamask/safe-event-emitter@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"
@@ -3289,6 +3353,29 @@
     semver "^7.3.8"
     superstruct "^1.0.3"
 
+"@metamask/utils@^5.0.0":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-5.0.2.tgz#140ba5061d90d9dac0280c19cab101bc18c8857c"
+  integrity sha512-yfmE79bRQtnMzarnKfX7AEJBwFTxvTyw3nBQlu/5rmGXrjAeAMltoGxO62TFurxrQAFMNa/fEjIHNvungZp0+g==
+  dependencies:
+    "@ethereumjs/tx" "^4.1.2"
+    "@types/debug" "^4.1.7"
+    debug "^4.3.4"
+    semver "^7.3.8"
+    superstruct "^1.0.3"
+
+"@metamask/utils@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-8.1.0.tgz#b8e73f5b4696b1b668cf5c1421daad140a3f98ac"
+  integrity sha512-sFNpzBKRicDgM2ZuU6vrPROlqNGm8/jDsjc5WrU1RzCkAMc4Xr3vUUf8p59uQ6B09etUWNb8d2GTCbISdmH/Ug==
+  dependencies:
+    "@ethereumjs/tx" "^4.1.2"
+    "@noble/hashes" "^1.3.1"
+    "@types/debug" "^4.1.7"
+    debug "^4.3.4"
+    semver "^7.5.4"
+    superstruct "^1.0.3"
+
 "@motionone/animation@^10.15.1", "@motionone/animation@^10.16.3":
   version "10.16.3"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.16.3.tgz#f5b71e27fd8b88b61f983adb0ed6c8e3e89281f9"
@@ -3967,6 +4054,11 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@solana/buffer-layout@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz#b996235eaec15b1e0b5092a8ed6028df77fa6c15"
@@ -4317,11 +4409,431 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
   integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
 
+"@tkey-mpc/chrome-storage@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/chrome-storage/-/chrome-storage-9.0.2.tgz#77a0e46df75c844ee9c5f4b07963d22edb44b71b"
+  integrity sha512-3yeliKVCJP77OhG5J93uj2/0XwASO6H8WqSZgAgbVxXbC6oPazKTv84YVw0rkXmLE7gkHqagcjNiNOQaV29VRw==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    webextension-polyfill "^0.10.0"
+
+"@tkey-mpc/common-types@^8.2.2":
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/common-types/-/common-types-8.2.2.tgz#194324a9ad92027c0f040896fa94fec096e83c5d"
+  integrity sha512-aN/LUXFh+t+4vf1zzlIIh3xd+M4HKzBgaJq6eVopPLMxaG941ZFyOq9Tbymzliq9lrFhA3ByEyPFI6Lunqzvbg==
+  dependencies:
+    "@toruslabs/eccrypto" "^3.0.0"
+    "@toruslabs/rss-client" "^1.5.0"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    serialize-error "^8.1.0"
+    ts-custom-error "^3.3.1"
+    web3-utils "^1.8.1"
+
+"@tkey-mpc/common-types@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/common-types/-/common-types-9.0.2.tgz#ad8fc7c905a27caf1c7f6fa724b14768b46e3de2"
+  integrity sha512-TJrij2Fq/klAcLlpECqxNUnzeLcChNmrjQdwYJXZKMBsyUo3jYmAGTAqA7/6leaHSZfW18DMHcLrsSeiHQw63g==
+  dependencies:
+    "@toruslabs/customauth" "^16.0.6"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/rss-client" "^1.5.0"
+    "@toruslabs/torus.js" "^11.0.6"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    serialize-error "^8.1.0"
+    ts-custom-error "^3.3.1"
+
+"@tkey-mpc/core@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/core/-/core-9.0.2.tgz#ca659d5288e5e818c36dd0618d2903fc6a9e1349"
+  integrity sha512-sc3w+rjc37OSQwff0bpVlmUDX58hBKY8AOSOsuWJoMfA7l8CFWyQp7iRBiVIxIgOojfeosu0RUcq2Z8HsTKK0g==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/http-helpers" "^5.0.0"
+    "@toruslabs/rss-client" "^1.5.0"
+    "@toruslabs/torus.js" "^11.0.6"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    json-stable-stringify "^1.0.2"
+
+"@tkey-mpc/security-questions@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/security-questions/-/security-questions-9.0.2.tgz#9ed6f944713f08d290bba920738488451db083fe"
+  integrity sha512-ekxMnmdbwuDRlEuXhZcG4U2W1Y1NFSo10Ctb8Mrw9FNz0XR7lTIAcLn3dlvCQHRmKLT1hlziW8oby4nsMpqsbA==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    bn.js "^5.2.1"
+    ethereum-cryptography "^2.1.2"
+
+"@tkey-mpc/service-provider-base@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/service-provider-base/-/service-provider-base-9.0.2.tgz#03dc78cd3684bd261a1135ab0dfeb08c9b7b74c2"
+  integrity sha512-Gk3xF1NFV/BqmwMNKDB//DNoN9nff4kGeNxXiVnlxhQKZuX9phzd/sxJljKc6tutOK5YdOcvot7ZuwJg2/vZjA==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+
+"@tkey-mpc/service-provider-torus@^9.0.3":
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/service-provider-torus/-/service-provider-torus-9.0.3.tgz#fdfddf000c55fb22ac92c135db5d46c8d9615e2a"
+  integrity sha512-9/OjTqjruR5AWMwJPRuR+ZxsZXzt9jQfzfNtde13VHSjtogcLwT12U1QTHJ7tsIZYckBy3ZVDbNpIcTOzz70tQ==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    "@tkey-mpc/service-provider-base" "^9.0.2"
+    "@toruslabs/customauth" "^16.0.6"
+    "@toruslabs/torus.js" "^11.0.6"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+
+"@tkey-mpc/share-serialization@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/share-serialization/-/share-serialization-9.0.2.tgz#a303d5eed1e6d9665a8aede5324193682bf4760e"
+  integrity sha512-dtQFbWvV9A4y6SGpx72WaRcwSREf/Yld9f4+u7FWe81WY575N655SheqM08gYYEGZlcQ+TiCMN3C2rq9I+NpMw==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    "@types/create-hash" "1.2.2"
+    bn.js "^5.2.1"
+    ethereum-cryptography "^2.1.2"
+
+"@tkey-mpc/storage-layer-torus@^9.0.2":
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/@tkey-mpc/storage-layer-torus/-/storage-layer-torus-9.0.2.tgz#a59067379ead3e110359209a004ab69356f7930e"
+  integrity sha512-qxQ+O9GerdaM66DVh8Qi7oIRjBbcsUcuP+F9P5YdH8J+XEFDMSjhuuBaQpU3xaMFxpTozkSv4Kh/zHWyQE2YeA==
+  dependencies:
+    "@tkey-mpc/common-types" "^9.0.2"
+    "@toruslabs/http-helpers" "^5.0.0"
+    base64url "3.0.1"
+    bn.js "^5.2.1"
+    ethereum-cryptography "^2.1.2"
+    json-stable-stringify "^1.0.2"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@toruslabs/base-controllers@^2.2.6":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/base-controllers/-/base-controllers-2.9.0.tgz#e23f4228b5a90bf94ba9b0b27451f3024bd1acc4"
+  integrity sha512-rKc+bR4QB/wdbH0CxLZC5e2PUZcIgkr9yY7TMd3oIffDklaYBnsuC5ES2/rgK1aRUDRWz+qWbTwLqsY6PlT37Q==
+  dependencies:
+    "@ethereumjs/util" "^8.0.6"
+    "@toruslabs/broadcast-channel" "^6.2.0"
+    "@toruslabs/http-helpers" "^3.3.0"
+    "@toruslabs/openlogin-jrpc" "^4.0.0"
+    async-mutex "^0.4.0"
+    bignumber.js "^9.1.1"
+    bowser "^2.11.0"
+    eth-rpc-errors "^4.0.3"
+    json-rpc-random-id "^1.0.1"
+    lodash "^4.17.21"
+    loglevel "^1.8.1"
+
+"@toruslabs/base-controllers@^4.2.0":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@toruslabs/base-controllers/-/base-controllers-4.5.2.tgz#ce0a475203990525ec352d3b3283eca5b1b19cbb"
+  integrity sha512-DEaeKREzY8OJ74k6nuOP1x2a8Z1HeCfV2uQE835QhLKuCDgqRomDwCwRcrCGT3rqxT/AVhWmBj+ykO/XS/4lZw==
+  dependencies:
+    "@ethereumjs/util" "^9.0.0"
+    "@metamask/rpc-errors" "^6.0.0"
+    "@toruslabs/broadcast-channel" "^9.0.0"
+    "@toruslabs/http-helpers" "^5.0.0"
+    "@toruslabs/openlogin-jrpc" "^5.1.0"
+    async-mutex "^0.4.0"
+    bignumber.js "^9.1.2"
+    bowser "^2.11.0"
+    lodash "^4.17.21"
+    loglevel "^1.8.1"
+
+"@toruslabs/base-session-manager@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/base-session-manager/-/base-session-manager-3.0.0.tgz#4302d0747ef71a8278af79e577cf53253c907cd5"
+  integrity sha512-+EqwizmSFkVEczUtaw+swbAxRIIxC/EaFE040rwfgC5fixaQMNLw2cVYXWN67Ra47wC9A7Om6xwQTuGFR+dy4w==
+  dependencies:
+    "@toruslabs/http-helpers" "^5.0.0"
+
+"@toruslabs/broadcast-channel@^6.2.0":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@toruslabs/broadcast-channel/-/broadcast-channel-6.3.1.tgz#d4b0a08c3a0fa88d42d7f33387ce9be928c2d4b2"
+  integrity sha512-BEtJQ+9bMfFoGuCsp5NmxyY+C980Ho+3BZIKSiYwRtl5qymJ+jMX5lsoCppoQblcb34dP6FwEjeFw80Y9QC/rw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@toruslabs/eccrypto" "^2.1.1"
+    "@toruslabs/metadata-helpers" "^3.2.0"
+    bowser "^2.11.0"
+    loglevel "^1.8.1"
+    oblivious-set "1.1.1"
+    socket.io-client "^4.6.1"
+    unload "^2.4.1"
+
+"@toruslabs/broadcast-channel@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/broadcast-channel/-/broadcast-channel-8.0.0.tgz#904ee44fceeb861d16f282ca211d1e2adf16e2f8"
+  integrity sha512-qCyWsHVL4Xtx1J6k1+acD7TJKCelJWyUy5Q5zyiWMPxMGFxTv1XdRyqpzV+VgwbcslIqgFN0GewOry2l1jlUQQ==
+  dependencies:
+    "@babel/runtime" "^7.22.10"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/metadata-helpers" "^5.0.0"
+    bowser "^2.11.0"
+    loglevel "^1.8.1"
+    oblivious-set "1.1.1"
+    socket.io-client "^4.7.2"
+    unload "^2.4.1"
+
+"@toruslabs/broadcast-channel@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/broadcast-channel/-/broadcast-channel-9.0.0.tgz#8f13b829269ee410fd46b7b463dea33b0c116147"
+  integrity sha512-GA0hh32vt0qu0qZ/QepNHDT5bxKzTsDWu2yp5J1a8CQWNwUGPkYkDe1ycRySQVBo/wa7UyZdXvgLYtYne+/cZw==
+  dependencies:
+    "@babel/runtime" "^7.22.10"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/metadata-helpers" "^5.0.0"
+    bowser "^2.11.0"
+    loglevel "^1.8.1"
+    oblivious-set "1.1.1"
+    socket.io-client "^4.7.2"
+    unload "^2.4.1"
+
+"@toruslabs/constants@^13.0.1", "@toruslabs/constants@^13.0.3":
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/@toruslabs/constants/-/constants-13.0.3.tgz#260a3e5c430d201bd3d92e13ef2044bd89a4432e"
+  integrity sha512-DiksceNFwzV4XBwcPdKpV6tfrvWIxhmwseTJbNnlzdy6uXgzvtagfapu+98pjrkNrjoRLiM17QBgBi8sNw7oGQ==
+
+"@toruslabs/customauth@^16.0.6":
+  version "16.0.6"
+  resolved "https://registry.yarnpkg.com/@toruslabs/customauth/-/customauth-16.0.6.tgz#cf3f0e614735fb799a9748b992026f81a9ee2ab6"
+  integrity sha512-4+Cxbxz3fxm750MMaMqMoJS0x8RZdD0y1tHLa/2T+b993cjRoQRixddTa3rWNYdbWsg2rgcmGkpXxywq3aLzwA==
+  dependencies:
+    "@chaitanyapotti/register-service-worker" "^1.7.3"
+    "@toruslabs/broadcast-channel" "^8.0.0"
+    "@toruslabs/constants" "^13.0.1"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/fetch-node-details" "^13.0.1"
+    "@toruslabs/http-helpers" "^5.0.0"
+    "@toruslabs/metadata-helpers" "^5.0.0"
+    "@toruslabs/torus.js" "^11.0.5"
+    base64url "^3.0.1"
+    bowser "^2.11.0"
+    events "^3.3.0"
+    jwt-decode "^3.1.2"
+    lodash.merge "^4.6.2"
+    loglevel "^1.8.1"
+
+"@toruslabs/eccrypto@4.0.0", "@toruslabs/eccrypto@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/eccrypto/-/eccrypto-4.0.0.tgz#0b27ed2d1e9483e77f42a7619a2c3c19cb802f44"
+  integrity sha512-Z3EINkbsgJx1t6jCDVIJjLSUEGUtNIeDjhMWmeDGOWcP/+v/yQ1hEvd1wfxEz4q5WqIHhevacmPiVxiJ4DljGQ==
+  dependencies:
+    elliptic "^6.5.4"
+
+"@toruslabs/eccrypto@^2.1.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@toruslabs/eccrypto/-/eccrypto-2.2.1.tgz#19012cc4e774e8c3df7ceebb2c1a07ecfd784917"
+  integrity sha512-7sviL0wLYsfA5ogEAOIdb0tu/QAOFXfHc9B8ONYtF04x4Mg3Nr89LL35FhjaEm055q8Ru7cUQhEFSiqJqm9GCw==
+  dependencies:
+    elliptic "^6.5.4"
+
+"@toruslabs/eccrypto@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/eccrypto/-/eccrypto-3.0.0.tgz#96df18e9d7320b230492671cf2942e703cd34ae3"
+  integrity sha512-+lFjV+0FZ3S4zH5T/Gnc795HoqpzLLDW28fSkibZRlx1Nx8uwbl3pyJSfya0C0bRHH1/+NTeBogUDijaRJ1NCw==
+  dependencies:
+    elliptic "^6.5.4"
+
+"@toruslabs/fetch-node-details@^13.0.1":
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/@toruslabs/fetch-node-details/-/fetch-node-details-13.0.3.tgz#3cb1d08a61e7ded4eda325b1f52c837553903cd4"
+  integrity sha512-u8Lhp2rOcK9+0qfz74JzLIisjfDKbMY5H/yh9E601peBydshx9HnfWTuRuj5bYGuHCQlXHC3t7UQbMAiuZ0EuA==
+  dependencies:
+    "@toruslabs/constants" "^13.0.3"
+    "@toruslabs/fnd-base" "^13.0.3"
+    "@toruslabs/http-helpers" "^5.0.0"
+    loglevel "^1.8.1"
+
+"@toruslabs/fnd-base@^13.0.1", "@toruslabs/fnd-base@^13.0.3":
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/@toruslabs/fnd-base/-/fnd-base-13.0.3.tgz#11a0cc95b085309322a6e20818b5dfb14cf6b004"
+  integrity sha512-XQyUacMwQ/yb1OgEnZHtnepCIhh9DfeTz+Ki7DkpqiCPnvduXqQYPSYoLwQumBjHOKwn9HxHdPYL9ps3hQpGPg==
+  dependencies:
+    "@toruslabs/constants" "^13.0.3"
+
+"@toruslabs/http-helpers@^3.2.0", "@toruslabs/http-helpers@^3.3.0", "@toruslabs/http-helpers@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/http-helpers/-/http-helpers-3.4.0.tgz#6d1da9e6aba094af62e73cf639a69844c82202f3"
+  integrity sha512-CoeJSL32mpp0gmYjxv48odu6pfjHk/rbJHDwCtYPcMHAl+qUQ/DTpVOOn9U0fGkD+fYZrQmZbRkXFgLhiT0ajQ==
+  dependencies:
+    lodash.merge "^4.6.2"
+    loglevel "^1.8.1"
+
+"@toruslabs/http-helpers@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/http-helpers/-/http-helpers-5.0.0.tgz#2a309d2a2c5c00d50a725d83ccec8a7475771d62"
+  integrity sha512-GmezWz9JeF6YyhjLSm+9XDF4YaeICEckY0Jbo43i86SjhfJYgRWqEi63VSiNsaqc/z810Q0FQvEk1TnBRX2tgA==
+  dependencies:
+    lodash.merge "^4.6.2"
+    loglevel "^1.8.1"
+
+"@toruslabs/metadata-helpers@5.0.0", "@toruslabs/metadata-helpers@^5.0.0", "@toruslabs/metadata-helpers@^5.x":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/metadata-helpers/-/metadata-helpers-5.0.0.tgz#12be5de4e8a5d1af2dd080bdf05f5ad8953aaae7"
+  integrity sha512-ZUFfOHJVJC53c8wJYHjdF3bIgN2ZvfqehbTZ/zJ7oVFfrrd6O66V3gQ1i1zxBjH3yhOvZKQwc0DaMmh3G0NUXQ==
+  dependencies:
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/http-helpers" "^5.0.0"
+    elliptic "^6.5.4"
+    ethereum-cryptography "^2.1.2"
+    json-stable-stringify "^1.0.2"
+
+"@toruslabs/metadata-helpers@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/metadata-helpers/-/metadata-helpers-3.2.0.tgz#b297933ac37481a9c86a125ac6a4e5c2f109fb78"
+  integrity sha512-2bCc6PNKd9y+aWfZQ1FXd47QmfyT4NmmqPGfsqk+sQS2o+MlxIyLuh9uh7deMgXo4b4qBDX+RQGbIKM1zVk56w==
+  dependencies:
+    "@toruslabs/eccrypto" "^2.1.1"
+    "@toruslabs/http-helpers" "^3.4.0"
+    elliptic "^6.5.4"
+    ethereum-cryptography "^2.0.0"
+    json-stable-stringify "^1.0.2"
+
+"@toruslabs/openlogin-jrpc@^2.6.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-jrpc/-/openlogin-jrpc-2.13.0.tgz#aae71e7c9b0161bc14baf3fc696605d74e0b99f4"
+  integrity sha512-TEg50/84xSocHLb3MEtw0DaIa+bXU66TJJjjDrqGPjoRo97fn8F8jDW2AcVV+eug39xpfxPIw1FFdCtgunmz7w==
+  dependencies:
+    "@toruslabs/openlogin-utils" "^2.13.0"
+    end-of-stream "^1.4.4"
+    eth-rpc-errors "^4.0.3"
+    events "^3.3.0"
+    fast-safe-stringify "^2.1.1"
+    once "^1.4.0"
+    pump "^3.0.0"
+    readable-stream "^3.6.0"
+
+"@toruslabs/openlogin-jrpc@^4.0.0":
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-jrpc/-/openlogin-jrpc-4.7.2.tgz#e04dd6945da92d790f713a58aaa1657c57b330c8"
+  integrity sha512-9Eb0cPc0lPuS6v2YkQlgzfbRnZ6fLez9Ike5wznoHSFA2/JVu1onwuI56EV1HwswdDrOWPPQEyzI1j9NriZ0ew==
+  dependencies:
+    "@metamask/rpc-errors" "^5.1.1"
+    "@toruslabs/openlogin-utils" "^4.7.0"
+    end-of-stream "^1.4.4"
+    events "^3.3.0"
+    fast-safe-stringify "^2.1.1"
+    once "^1.4.0"
+    pump "^3.0.0"
+    readable-stream "^4.4.2"
+
+"@toruslabs/openlogin-jrpc@^5.1.0", "@toruslabs/openlogin-jrpc@^5.2.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-jrpc/-/openlogin-jrpc-5.3.0.tgz#37fefe43d82b0ecfa7a99de56050e4b46bf68a5c"
+  integrity sha512-tM1XHG5UulvENhZYewo9eVWF5r9SffGru8+09qFED7g/PFupKs/rccaXYwyWRGVenQSMgj6ipgUd72zliuen+A==
+  dependencies:
+    "@metamask/rpc-errors" "^6.0.0"
+    "@toruslabs/openlogin-utils" "^5.3.0"
+    end-of-stream "^1.4.4"
+    events "^3.3.0"
+    fast-safe-stringify "^2.1.1"
+    once "^1.4.0"
+    pump "^3.0.0"
+    readable-stream "^4.4.2"
+
+"@toruslabs/openlogin-session-manager@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-session-manager/-/openlogin-session-manager-3.0.0.tgz#2f13af3ef96ddda48803a0265a798cffc3c9f78c"
+  integrity sha512-S+nnZQ+Y+XCHvTYaov3ltiV2hAAPpKpwxvB4TmbMvi7KWOZ8BcUJQykSITlIXV4aE5y5BD96rsmjQ3C3MyVtUQ==
+  dependencies:
+    "@toruslabs/base-session-manager" "^3.0.0"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/metadata-helpers" "5.0.0"
+
+"@toruslabs/openlogin-utils@^2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-utils/-/openlogin-utils-2.13.0.tgz#e339f9d638b1e3a8ecca7b8c973d6060a19afda5"
+  integrity sha512-g4pj6hIdKcuyetVsUWqiAJmCooTS9hOADL31m7LTqgdXzX9oR437A+c8Dw8gzFVcHmkK16Yt2//GvlKnSsGILg==
+  dependencies:
+    base64url "^3.0.1"
+    keccak "^3.0.3"
+    randombytes "^2.1.0"
+
+"@toruslabs/openlogin-utils@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-utils/-/openlogin-utils-4.7.0.tgz#741d6ba1c0754b59a182b1c6dd8d0263695ed980"
+  integrity sha512-w6XkHs4WKuufsf/zzteBzs4EJuOknrUmJ+iv5FZ8HzIpMQeL/984CP8HYaFSEYkbGCP4ydAnhY4Uh0QAhpDbPg==
+  dependencies:
+    base64url "^3.0.1"
+
+"@toruslabs/openlogin-utils@^5.2.0", "@toruslabs/openlogin-utils@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin-utils/-/openlogin-utils-5.3.0.tgz#59906be13fe47c399513360e36b9262410e5a1f2"
+  integrity sha512-WfwadC7ZqKOTVqfI4rFANu7IzEgI7H4A/0TiIQihxHpFWdFM23yVuCCIm5zCzQ1QtA2mwBbBZYwOJ0YHVrV6HQ==
+  dependencies:
+    "@toruslabs/constants" "^13.0.1"
+    base64url "^3.0.1"
+
+"@toruslabs/openlogin@^5.2.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/openlogin/-/openlogin-5.3.0.tgz#4cb28a62bf30b06b7e56a78bf9d7abe01d640560"
+  integrity sha512-I6bVBPDlqcnF/11+disyS0kUClJLavYcLi3dBEx2a1mEv18jOy1kuG+FSenDMzF733MCk1Y3Iikox0evPzhpvQ==
+  dependencies:
+    "@toruslabs/broadcast-channel" "^8.0.0"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/metadata-helpers" "^5.0.0"
+    "@toruslabs/openlogin-session-manager" "^3.0.0"
+    "@toruslabs/openlogin-utils" "^5.3.0"
+    bowser "^2.11.0"
+    events "^3.3.0"
+    loglevel "^1.8.1"
+    ts-custom-error "^3.3.1"
+
+"@toruslabs/rss-client@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@toruslabs/rss-client/-/rss-client-1.5.0.tgz#82a02736f671152e1a4c9078194320e2bbc4e49e"
+  integrity sha512-7oaRZjmomNoL0+OZMFe8mv3hSeaYWvrxTjuUtkOHybMitStEcEj64tPjWia646BX7AFeqtUCURNdNaQzqfwDMQ==
+  dependencies:
+    "@toruslabs/eccrypto" "^2.1.1"
+    "@toruslabs/http-helpers" "^3.2.0"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    fetch "^1.1.0"
+    loglevel "^1.8.1"
+    node-fetch "^2.0.0"
+    web3-eth-contract "^1.8.1"
+    web3-utils "^1.8.1"
+
+"@toruslabs/torus.js@^11.0.5", "@toruslabs/torus.js@^11.0.6":
+  version "11.0.6"
+  resolved "https://registry.yarnpkg.com/@toruslabs/torus.js/-/torus.js-11.0.6.tgz#982f28555922e66822b38d265c6f8a38bc094db3"
+  integrity sha512-l+Ba/DX1L2cLngiL08r8zZmRQ/A3MJ4pl20MaTzQuwxS2OfOXSReKld4YOWHwo5NEd36PHZdZ43qbh0NrzrwVQ==
+  dependencies:
+    "@toruslabs/constants" "^13.0.1"
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/http-helpers" "^5.0.0"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    ethereum-cryptography "^2.1.2"
+    json-stable-stringify "^1.0.2"
+    loglevel "^1.8.1"
+
+"@toruslabs/tss-client@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@toruslabs/tss-client/-/tss-client-1.7.1.tgz#018511a75a1ee6094fbe74d2b7be968b92255e97"
+  integrity sha512-gaVjXy/eJKv59zdWW2lnAhjumw8DMMGlGHXEOipVywCylKqS8VvQVwwo+UyevR2VXUQsNkBr9deD5TGFH0OQHQ==
+  dependencies:
+    "@toruslabs/eccrypto" "^4.0.0"
+    "@toruslabs/tss-lib" "^1.7.1"
+    bn.js "^5.2.1"
+    elliptic "^6.5.4"
+    keccak256 "^1.0.6"
+    socket.io-client "^4.7.2"
+
+"@toruslabs/tss-lib@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@toruslabs/tss-lib/-/tss-lib-1.7.1.tgz#758c62b72b41450de5df90acb42d6c2ba5df0482"
+  integrity sha512-kdjBO95cPq4i7RaRMkjUJFH0aiSHrMZV/A4I42oUr0FkBd7e/RYyn1e1QH1pAAyidCIKbMkwqTxgPg4nuHEcDg==
+
 "@trezor/analytics@1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@trezor/analytics/-/analytics-1.0.8.tgz#e413212fc79b68775d64b70783102d20346efcac"
@@ -4616,6 +5128,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/create-hash@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/create-hash/-/create-hash-1.2.2.tgz#e87247083df8478f6b83655592bde0d709028235"
+  integrity sha512-Fg8/kfMJObbETFU/Tn+Y0jieYewryLrbKwLCEIwPyklZZVY2qB+64KFjhplGSw+cseZosfFXctXO+PyIYD8iZQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/debug@^4.1.7":
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.9.tgz#906996938bc672aaf2fb8c0d3733ae1dda05b005"
@@ -5402,7 +5921,7 @@
     "@walletconnect/logger" "^2.0.1"
     events "^3.3.0"
 
-"@walletconnect/types@^1.8.0":
+"@walletconnect/types@^1.8.0", "@walletconnect/types@~1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.8.0.tgz#3f5e85b2d6b149337f727ab8a71b8471d8d9a195"
   integrity sha512-Cn+3I0V0vT9ghMuzh1KzZvCkiAxTq+1TR2eSqw5E5AVWfmCtECFkVZBP6uUJZ8YjwLqXheI+rnjqPy7sVM4Fyg==
@@ -5608,6 +6127,103 @@
     joi "17.9.1"
     rxjs "^7.5.2"
 
+"@web3auth-mpc/base-provider@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@web3auth-mpc/base-provider/-/base-provider-2.1.9.tgz#407aca075deb981b5cae80567828526aecf385d7"
+  integrity sha512-i3NmTDk8ezaZXz+wtR1O931DBq9cDfyCzYI/XHFHA0zS0iealCSHXXKD6iACByoUuFDBNSq7GdgZCJNcoqWOGw==
+  dependencies:
+    "@toruslabs/base-controllers" "^2.2.6"
+    "@toruslabs/openlogin-jrpc" "^2.6.0"
+    "@web3auth-mpc/base" "^2.1.9"
+    eth-rpc-errors "^4.0.3"
+    json-rpc-random-id "^1.0.1"
+
+"@web3auth-mpc/base@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@web3auth-mpc/base/-/base-2.1.9.tgz#1d1768f5b7c955c5a7e8e71a6590aeee49352604"
+  integrity sha512-T91A+1Vu4C3//5Hj94bhMUaerOu3nVwGfELON2FH16yXNPQsNZPwyBuBoROUYdTp4fOZvCG4OtLiw+g8dPncaA==
+  dependencies:
+    "@toruslabs/http-helpers" "^3.2.0"
+    "@toruslabs/openlogin-jrpc" "^2.6.0"
+    jwt-decode "^3.1.2"
+    loglevel "^1.8.0"
+    ts-custom-error "^3.2.2"
+
+"@web3auth-mpc/ethereum-provider@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@web3auth-mpc/ethereum-provider/-/ethereum-provider-2.3.0.tgz#000e83696ee6894879a4a8aaef2fd2df5ae3cc6c"
+  integrity sha512-2RY8GPd2UJ04P4Gzjt+Uec00j721LIceSJoHlwhOPGYNPx0QpRsAmwOmMRNLBA5Y+beKrnQ8b8rGDF9wBUaqtA==
+  dependencies:
+    "@ethereumjs/common" "^3.0.0"
+    "@ethereumjs/rlp" "^4.0.0"
+    "@ethereumjs/tx" "^4.0.0"
+    "@ethereumjs/util" "^8.0.0"
+    "@metamask/eth-sig-util" "^5.0.0"
+    "@toruslabs/base-controllers" "^2.2.6"
+    "@toruslabs/http-helpers" "^3.2.0"
+    "@toruslabs/openlogin-jrpc" "^2.6.0"
+    "@walletconnect/types" "~1.8.0"
+    "@web3auth-mpc/base" "^2.1.9"
+    "@web3auth-mpc/base-provider" "^2.1.9"
+    assert "^2.0.0"
+    bignumber.js "^9.1.0"
+    bn.js "^5.2.1"
+    eth-rpc-errors "^4.0.3"
+    jsonschema "^1.4.1"
+
+"@web3auth/base-provider@^7.0.1":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@web3auth/base-provider/-/base-provider-7.0.4.tgz#a0152ae15585e3f51a7bf5b6f9c1d20f55a52625"
+  integrity sha512-DDE/K6AP2UBRQqBJUoFggGt7ylQ96pexVnaps9Yw8JOtx573yzVUPs2tYEjhxmAfRGgmDD1J8juokgvCEeKf4g==
+  dependencies:
+    "@metamask/rpc-errors" "^6.0.0"
+    "@toruslabs/base-controllers" "^4.2.0"
+    "@toruslabs/openlogin-jrpc" "^5.2.0"
+    "@web3auth/base" "^7.0.4"
+    json-rpc-random-id "^1.0.1"
+
+"@web3auth/base@^7.0.1", "@web3auth/base@^7.0.4":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@web3auth/base/-/base-7.0.4.tgz#93a165486ee991938b87a5fa8fe97da7c58a15b3"
+  integrity sha512-ufpJ0uqOp7k7uGqDS1DohOeIIrsTLUAdyiExM5D+SQYYIXri3M9wbFgyCeAqHbJbfBO6hI9PDcY82QvOGCMI3w==
+  dependencies:
+    "@toruslabs/http-helpers" "^5.0.0"
+    "@toruslabs/openlogin" "^5.2.0"
+    "@toruslabs/openlogin-jrpc" "^5.2.0"
+    "@toruslabs/openlogin-utils" "^5.2.0"
+    jwt-decode "^3.1.2"
+    loglevel "^1.8.1"
+    ts-custom-error "^3.3.1"
+
+"@web3auth/mpc-core-kit@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@web3auth/mpc-core-kit/-/mpc-core-kit-1.1.3.tgz#01c508157f11d5a6685fa578bb873f40678fa403"
+  integrity sha512-wpbrBDBxZ8vi7oY3zL3BEktKuwfs5miMga4R7qmc12k79gNJa8S6FvZQ38wZkwNJyrRb0iFQ1kOWR0NOteeMyg==
+  dependencies:
+    "@tkey-mpc/chrome-storage" "^9.0.2"
+    "@tkey-mpc/common-types" "^9.0.2"
+    "@tkey-mpc/core" "^9.0.2"
+    "@tkey-mpc/security-questions" "^9.0.2"
+    "@tkey-mpc/service-provider-torus" "^9.0.3"
+    "@tkey-mpc/share-serialization" "^9.0.2"
+    "@tkey-mpc/storage-layer-torus" "^9.0.2"
+    "@toruslabs/constants" "^13.0.1"
+    "@toruslabs/customauth" "^16.0.6"
+    "@toruslabs/eccrypto" "4.0.0"
+    "@toruslabs/fetch-node-details" "^13.0.1"
+    "@toruslabs/fnd-base" "^13.0.1"
+    "@toruslabs/metadata-helpers" "^5.x"
+    "@toruslabs/openlogin-session-manager" "^3.0.0"
+    "@toruslabs/torus.js" "^11.0.6"
+    "@toruslabs/tss-client" "^1.7.1"
+    "@toruslabs/tss-lib" "^1.7.1"
+    "@web3auth-mpc/ethereum-provider" "^2.3.0"
+    "@web3auth/base" "^7.0.1"
+    "@web3auth/base-provider" "^7.0.1"
+    bn.js "^5.2.1"
+    bowser "^2.11.0"
+    elliptic "^6.5.4"
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -5757,6 +6373,13 @@ abitype@0.9.8:
   resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.9.8.tgz#1f120b6b717459deafd213dfbf3a3dd1bf10ae8c"
   integrity sha512-puLifILdm+8sjyss4S+fsUN09obiT1g2YW6CtcQF+QDzxR0euzgEB29MZujC6zMk2a6SVmtttq1fc6+YFA7WYQ==
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
 abortcontroller-polyfill@^1.7.3, abortcontroller-polyfill@^1.7.5:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
@@ -6117,6 +6740,13 @@ async-mutex@^0.2.6:
   dependencies:
     tslib "^2.0.0"
 
+async-mutex@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/async-mutex/-/async-mutex-0.4.0.tgz#ae8048cd4d04ace94347507504b3cf15e631c25f"
+  integrity sha512-eJFZ1YhRR8UN8eBLoNzcDPcy/jqjsg6I1AP+KvWQX80BqOSW1oJPJXDylPUEeMr2ZQvHgnQ//Lp6f3RQ1zI7HA==
+  dependencies:
+    tslib "^2.4.0"
+
 async@^1.4.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -6331,6 +6961,11 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+base64url@3.0.1, base64url@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
+  integrity sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==
+
 bchaddrjs@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/bchaddrjs/-/bchaddrjs-0.5.2.tgz#1f52b5077329774e7c82d4882964628106bb11a0"
@@ -6409,6 +7044,13 @@ bip66@^1.1.5:
   dependencies:
     safe-buffer "^5.0.1"
 
+biskviit@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/biskviit/-/biskviit-1.0.1.tgz#037a0cd4b71b9e331fd90a1122de17dc49e420a7"
+  integrity sha512-VGCXdHbdbpEkFgtjkeoBN8vRlbj1ZRX2/mxhE8asCCRalUx2nBzOomLJv8Aw/nRt5+ccDb+tPKidg4XxcfGW4w==
+  dependencies:
+    psl "^1.1.7"
+
 bitcoin-ops@^1.3.0, bitcoin-ops@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/bitcoin-ops/-/bitcoin-ops-1.4.1.tgz#e45de620398e22fd4ca6023de43974ff42240278"
@@ -6453,7 +7095,7 @@ bn.js@4.11.8:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
   integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
 
-bn.js@^4.11.0, bn.js@^4.11.6, bn.js@^4.11.8, bn.js@^4.11.9:
+bn.js@^4.11.0, bn.js@^4.11.6, bn.js@^4.11.8, bn.js@^4.11.9, bn.js@^4.12.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
@@ -7448,7 +8090,7 @@ debug@2.6.9, debug@^2.2.0:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -7839,13 +8481,36 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+encoding@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha512-bl1LAgiQc4ZWr++pNYUdRe/alecaHFeHxIJ/pNciqGdKXghaTCOwKkbKp6ye7pKZGu/GcaSXFk8PBVhgs+dJdA==
+  dependencies:
+    iconv-lite "~0.4.13"
+
+end-of-stream@^1.1.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.2.tgz#8709e22c291d4297ae80318d3c8baeae71f0e002"
+  integrity sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.11.0"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.1.tgz#9f213c77512ff1a6cc0c7a86108a7ffceb16fcfb"
+  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==
+
 enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
@@ -8520,7 +9185,7 @@ eth-rpc-errors@^3.0.0:
   dependencies:
     fast-safe-stringify "^2.0.6"
 
-eth-rpc-errors@^4.0.2:
+eth-rpc-errors@^4.0.2, eth-rpc-errors@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eth-rpc-errors/-/eth-rpc-errors-4.0.3.tgz#6ddb6190a4bf360afda82790bb7d9d5e724f423a"
   integrity sha512-Z3ymjopaoft7JDoxZcEb3pwdGh7yiYMhOwm2doUt6ASXlMavpNlK6Cre0+IMl2VSGyEU9rkiperQhp5iRxn5Pg==
@@ -8858,6 +9523,11 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 eventemitter2@6.4.7:
   version "6.4.7"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
@@ -9074,7 +9744,7 @@ fast-redact@^3.0.0:
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.3.0.tgz#7c83ce3a7be4898241a46560d51de10f653f7634"
   integrity sha512-6T5V1QK1u4oF+ATxs1lWUmlEk6P2T9HqJG3e2DnHOdVgZy2rFJBoEnrIedcTXlkAHU/zKC+7KETJ+KGGKwxgMQ==
 
-fast-safe-stringify@^2.0.6:
+fast-safe-stringify@^2.0.6, fast-safe-stringify@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
@@ -9112,6 +9782,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fetch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fetch/-/fetch-1.1.0.tgz#0a8279f06be37f9f0ebb567560a30a480da59a2e"
+  integrity sha512-5O8TwrGzoNblBG/jtK4NFuZwNCkZX6s5GfRNOaGtm+QGJEuNakSC/i2RW0R93KX6E0jVjNXm6O3CRN4Ql3K+yA==
+  dependencies:
+    biskviit "1.0.1"
+    encoding "0.1.12"
+
 figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -9853,7 +10531,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4.24:
+iconv-lite@0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -11049,6 +11727,11 @@ jsonschema@1.2.2:
   resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.2.2.tgz#83ab9c63d65bf4d596f91d81195e78772f6452bc"
   integrity sha512-iX5OFQ6yx9NgbHCwse51ohhKgLuLL7Z5cNOeZOPIlDUtAMrxlruHLzVZxbltdHE5mEDXN+75oFOwq6Gn0MZwsA==
 
+jsonschema@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.4.1.tgz#cc4c3f0077fb4542982973d8a083b6b34f482dab"
+  integrity sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==
+
 jsprim@^1.2.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
@@ -11084,6 +11767,20 @@ jsqr@^1.2.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
+keccak256@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/keccak256/-/keccak256-1.0.6.tgz#dd32fb771558fed51ce4e45a035ae7515573da58"
+  integrity sha512-8GLiM01PkdJVGUhR1e6M/AvWnSqYS0HaERI+K/QtStGDGlSTx2B1zTqZk4Zlqu5TxHJNTxWAdP9Y+WI50OApUw==
+  dependencies:
+    bn.js "^5.2.0"
+    buffer "^6.0.3"
+    keccak "^3.0.2"
+
 keccak@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.2.tgz#4c2c6e8c54e04f2670ee49fa734eb9da152206e0"
@@ -11093,7 +11790,7 @@ keccak@3.0.2:
     node-gyp-build "^4.2.0"
     readable-stream "^3.6.0"
 
-keccak@^3.0.0, keccak@^3.0.1, keccak@^3.0.3:
+keccak@^3.0.0, keccak@^3.0.1, keccak@^3.0.2, keccak@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.4.tgz#edc09b89e633c0549da444432ecf062ffadee86d"
   integrity sha512-3vKuW0jV8J3XNTzvfyicFR5qvxrSAGl7KIhvgOu5cmWwM7tZRj3fMbj/pfIf4be7aznbc+prBWGjywox/g2Y6Q==
@@ -11360,6 +12057,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+loglevel@^1.8.0, loglevel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.1.tgz#5c621f83d5b48c54ae93b6156353f555963377b4"
+  integrity sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==
+
 long@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -11870,7 +12572,7 @@ node-fetch@2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7:
+node-fetch@^2.0.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.12, node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -12017,6 +12719,11 @@ object.values@^1.1.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+oblivious-set@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.1.1.tgz#d9d38e9491d51f27a5c3ec1681d2ba40aa81e98b"
+  integrity sha512-Oh+8fK09mgGmAshFdH6hSVco6KZmd1tTwNFWj35OvzdmJTMZtAkbn05zar2iG3v6sDs1JLEtOiBGNb6BHwkb2w==
+
 oboe@2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/oboe/-/oboe-2.1.5.tgz#5554284c543a2266d7a38f17e073821fbde393cd"
@@ -12535,7 +13242,7 @@ prr@~1.0.1:
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
   integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
 
-psl@^1.1.28, psl@^1.1.33:
+psl@^1.1.28, psl@^1.1.33, psl@^1.1.7:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
@@ -12889,6 +13596,17 @@ readable-stream@^3.1.1, readable-stream@^3.5.0, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.4.2.tgz#e6aced27ad3b9d726d8308515b9a1b98dc1b9d13"
+  integrity sha512-Lk/fICSyIhodxy1IDK2HazkeGjSmezAWX2egdtJnYhtzKEsBPJowlI6F6LPb5tqIQILrMbx22S5o3GuJavPusA==
+  dependencies:
+    abort-controller "^3.0.0"
+    buffer "^6.0.3"
+    events "^3.3.0"
+    process "^0.11.10"
+    string_decoder "^1.3.0"
+
 readable-stream@~1.0.15, readable-stream@~1.0.17, readable-stream@~1.0.27-1:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -13514,6 +14232,13 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+serialize-error@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-8.1.0.tgz#3a069970c712f78634942ddd50fbbc0eaebe2f67"
+  integrity sha512-3NnuWfM6vBYoy5gZFvHiYsVbafvI9vZv/+jlIigFn4oP4zjNPK3LhcY0xSCgeb1a5L8jO71Mit9LlNoi2UfDDQ==
+  dependencies:
+    type-fest "^0.20.2"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -13668,6 +14393,24 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+socket.io-client@^4.6.1, socket.io-client@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.2.tgz#f2f13f68058bd4e40f94f2a1541f275157ff2c08"
+  integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.2"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 socks-proxy-agent@6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz#e664e8f1aaf4e1fb3df945f09e3d94f911137f87"
@@ -13900,7 +14643,7 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-string_decoder@^1.1.1:
+string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
@@ -14351,6 +15094,11 @@ ts-command-line-args@^2.2.0:
     command-line-usage "^6.1.0"
     string-format "^2.0.0"
 
+ts-custom-error@^3.2.2, ts-custom-error@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
+  integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
+
 ts-essentials@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-7.0.3.tgz#686fd155a02133eedcc5362dc8b5056cde3e5a38"
@@ -14708,6 +15456,11 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
+unload@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.4.1.tgz#b0c5b7fb44e17fcbf50dcb8fb53929c59dd226a5"
+  integrity sha512-IViSAm8Z3sRBYA+9wc0fLQmU9Nrxb16rcDmIiR6Y9LJSZzI7QY5QsDhqPpKOjAn0O9/kfK1TfNEMMAGPTIraPw==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -15021,7 +15774,7 @@ web3-core@1.10.0:
     web3-core-requestmanager "1.10.0"
     web3-utils "1.10.0"
 
-web3-core@^1.8.1:
+web3-core@1.10.2, web3-core@^1.8.1:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/web3-core/-/web3-core-1.10.2.tgz#464a15335b3adecc4a1cdd53c89b995769059f03"
   integrity sha512-qTn2UmtE8tvwMRsC5pXVdHxrQ4uZ6jiLgF5DRUVtdi7dPUmX18Dp9uxKfIfhGcA011EAn8P6+X7r3pvi2YRxBw==
@@ -15042,6 +15795,14 @@ web3-eth-abi@1.10.0:
     "@ethersproject/abi" "^5.6.3"
     web3-utils "1.10.0"
 
+web3-eth-abi@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/web3-eth-abi/-/web3-eth-abi-1.10.2.tgz#65db4af1acb0b72cb9d10cd6f045a8bcdb270b1b"
+  integrity sha512-pY4fQUio7W7ZRSLf+vsYkaxJqaT/jHcALZjIxy+uBQaYAJ3t6zpQqMZkJB3Dw7HUODRJ1yI0NPEFGTnkYf/17A==
+  dependencies:
+    "@ethersproject/abi" "^5.6.3"
+    web3-utils "1.10.2"
+
 web3-eth-accounts@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/web3-eth-accounts/-/web3-eth-accounts-1.10.0.tgz#2942beca0a4291455f32cf09de10457a19a48117"
@@ -15072,6 +15833,20 @@ web3-eth-contract@1.10.0:
     web3-eth-abi "1.10.0"
     web3-utils "1.10.0"
 
+web3-eth-contract@^1.8.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/web3-eth-contract/-/web3-eth-contract-1.10.2.tgz#9114c52ba5ca5859f3403abea69a13f8678828ad"
+  integrity sha512-CZLKPQRmupP/+OZ5A/CBwWWkBiz5B/foOpARz0upMh1yjb0dEud4YzRW2gJaeNu0eGxDLsWVaXhUimJVGYprQw==
+  dependencies:
+    "@types/bn.js" "^5.1.1"
+    web3-core "1.10.2"
+    web3-core-helpers "1.10.2"
+    web3-core-method "1.10.2"
+    web3-core-promievent "1.10.2"
+    web3-core-subscriptions "1.10.2"
+    web3-eth-abi "1.10.2"
+    web3-utils "1.10.2"
+
 web3-eth-ens@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/web3-eth-ens/-/web3-eth-ens-1.10.0.tgz#96a676524e0b580c87913f557a13ed810cf91cd9"
@@ -15273,6 +16048,11 @@ web3@1.10.0:
     web3-shh "1.10.0"
     web3-utils "1.10.0"
 
+webextension-polyfill@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz#ccb28101c910ba8cf955f7e6a263e662d744dbb8"
+  integrity sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -15763,6 +16543,11 @@ ws@^8.11.0, ws@^8.5.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
   integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
 
+ws@~8.11.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
+  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+
 xhr-request-promise@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/xhr-request-promise/-/xhr-request-promise-0.1.3.tgz#2d5f4b16d8c6c893be97f1a62b0ed4cf3ca5f96c"
@@ -15803,6 +16588,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"