diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx
index f3bfdc6a4d..375951f91f 100644
--- a/packages/ui/src/app/GlobalModals.tsx
+++ b/packages/ui/src/app/GlobalModals.tsx
@@ -3,7 +3,6 @@ import React, { memo, ReactElement, useEffect, useMemo, useState } from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
 
-import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { ClaimVestingModalCall } from '@/accounts/modals/ClaimVestingModal'
 import { ClaimVestingModal } from '@/accounts/modals/ClaimVestingModal/ClaimVestingModal'
 import { MoveFundsModal, MoveFundsModalCall } from '@/accounts/modals/MoveFundsModal'
@@ -26,11 +25,9 @@ import { TransferModal, TransferModalCall } from '@/accounts/modals/TransferModa
 import { FailureModal } from '@/common/components/FailureModal'
 import { Loading } from '@/common/components/Loading'
 import { ModalGlass } from '@/common/components/Modal'
-import { NotSupportMobileModal } from '@/common/components/NotSupportMobileModal'
 import { SearchResultsModal, SearchResultsModalCall } from '@/common/components/Search/SearchResultsModal'
 import { SuccessModal } from '@/common/components/SuccessModal'
 import { useModal } from '@/common/hooks/useModal'
-import { useResponsive } from '@/common/hooks/useResponsive'
 import { useTransactionStatus } from '@/common/hooks/useTransactionStatus'
 import { ConfirmModal } from '@/common/modals/ConfirmModal/ConfirmModal'
 import { OnBoardingModal, OnBoardingModalCall } from '@/common/modals/OnBoardingModal'
@@ -221,32 +218,10 @@ export const MODAL_WITH_CLOSE_CONFIRMATION: ModalNames[] = [
   'VoteForProposalModal',
 ]
 
-const NON_TRANSACTIONAL_MODALS: ModalNames[] = [
-  'Member',
-  'ApplicationDetails',
-  'VoteRationaleModal',
-  'SearchResults',
-  'CandidacyPreview',
-  'EmailConfirmationModal',
-]
-
-const MOBILE_SUPPORTED_MODALS: ModalNames[] = [
-  ...NON_TRANSACTIONAL_MODALS,
-  'SwitchMember',
-  'DisconnectWallet',
-  'SignOut',
-  'CreatePost',
-  'PostReplyModal',
-  'CreateThreadModal',
-  'EmailSubscriptionModal',
-]
-
 export const GlobalModals = () => {
   const { modal, hideModal, currentModalMachine, showModal, modalData, isClosing } = useModal()
   const { active: activeMember } = useMyMemberships()
-  const { wallet } = useMyAccounts()
   const { status } = useTransactionStatus()
-  const { isMobileWallet } = useResponsive()
   const Modal = useMemo(() => (modal && modal in modals ? memo(() => modals[modal as ModalNames]) : null), [modal])
 
   const [container, setContainer] = useState(document.body)
@@ -257,11 +232,6 @@ export const GlobalModals = () => {
 
   const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal)
 
-  const mobileSupported = wallet ? MOBILE_SUPPORTED_MODALS : NON_TRANSACTIONAL_MODALS
-  if (isMobileWallet && modal && !mobileSupported.includes(modal as ModalNames)) {
-    return <NotSupportMobileModal onClose={hideModal} />
-  }
-
   if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) {
     showModal<SwitchMemberModalCall>({
       modal: 'SwitchMember',
diff --git a/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx b/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx
index 7598c1f9df..cf80c4f8d8 100644
--- a/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx
+++ b/packages/ui/src/app/components/OnboardingOverlay/OnBoardingOverlay.tsx
@@ -88,19 +88,10 @@ export const OnBoardingOverlay = () => {
     showModal({ modal: 'OnBoardingModal' })
   }, [wallet, selectedWallet])
 
-  if (isLoading || !status || status === 'finished' || !api?.isConnected) {
+  if (isMobile || isLoading || !status || status === 'finished' || !api?.isConnected) {
     return null
   }
 
-  if (isMobile) {
-    return (
-      <WrapperMobileMode>
-        <TextHuge bold>To become a member visit this page from desktop</TextHuge>
-        <TextSmall>It requires browser extension</TextSmall>
-      </WrapperMobileMode>
-    )
-  }
-
   return (
     <>
       <TopSpace />
@@ -246,20 +237,3 @@ export const StepperContainer = styled.div`
   padding: 10px;
   justify-content: center;
 `
-
-const WrapperMobileMode = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  background-color: ${Colors.Black[700]};
-  color: ${Colors.White};
-  position: relative;
-  padding: 10px 16px;
-
-  p {
-    text-align: center;
-  }
-`
diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx
index 746d49a9da..4fa22bb2c7 100644
--- a/packages/ui/src/common/components/Modal/Modal.tsx
+++ b/packages/ui/src/common/components/Modal/Modal.tsx
@@ -174,7 +174,7 @@ export const ModalFooterComponent = styled.footer`
   grid-area: modalfooter;
   gap: 16px;
   justify-self: end;
-  justify-content: end;
+  justify-content: space-between;
   align-items: center;
   width: 100%;
   height: content-fit;
@@ -182,9 +182,17 @@ export const ModalFooterComponent = styled.footer`
   padding: 12px 26px 12px 24px;
   border-radius: 0 0 2px 2px;
   position: relative;
+  max-width: 100vw;
+
+  > :nth-child(1) {
+    margin: 0 auto 0 0;
+  }
+  > :nth-last-child(1) {
+    margin: 0 0 0 auto;
+  }
 
   @media (min-width: ${BreakPoints.sm}px) {
-    flex-flow: nowrap;
+    flex-wrap: nowrap;
   }
 `
 
diff --git a/packages/ui/src/common/components/Modal/Modals.tsx b/packages/ui/src/common/components/Modal/Modals.tsx
index bd2cc2af01..227bc2c466 100644
--- a/packages/ui/src/common/components/Modal/Modals.tsx
+++ b/packages/ui/src/common/components/Modal/Modals.tsx
@@ -51,15 +51,12 @@ export const TransactionAmount = styled.div<TransactionAmountProps>`
 `
 
 export const TransactionInfoContainer = styled.div`
-  display: grid;
   margin-right: 24px;
 `
 
 export const BalanceInfo = styled.div`
-  display: inline-grid;
+  display: flex;
   position: relative;
-  grid-template-columns: 1fr 168px;
-  grid-template-rows: 1fr;
   align-items: center;
 `
 
@@ -68,7 +65,7 @@ export const BalanceInfoInRow = styled(BalanceInfo)`
 `
 
 export const BalanceInfoNarrow = styled(BalanceInfo)`
-  grid-template-columns: 1fr 128px;
+  gap: 4px;
   width: auto;
 `
 
diff --git a/packages/ui/src/common/components/NotSupportMobileModal.tsx b/packages/ui/src/common/components/NotSupportMobileModal.tsx
deleted file mode 100644
index 040a0a7828..0000000000
--- a/packages/ui/src/common/components/NotSupportMobileModal.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-
-import { Modal, ModalBody, ModalHeader } from '@/common/components/Modal'
-import { TextMedium } from '@/common/components/typography'
-
-interface Props {
-  onClose: () => void
-}
-
-export const NotSupportMobileModal = ({ onClose }: Props) => (
-  <Modal onClose={onClose} modalSize="xs">
-    <ModalHeader onClick={onClose} title="" />
-    <ModalBody>
-      <TextMedium>This action requires a browser extension, please visit this page from a desktop browser.</TextMedium>
-    </ModalBody>
-  </Modal>
-)
diff --git a/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx b/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx
index d461ebf0bc..8cc5e68f9d 100644
--- a/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx
+++ b/packages/ui/src/common/components/Stepper/HorizontalStepper.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 import { asStepsToRender, StepperStep, StepToRender } from '@/common/components/Stepper/types'
-import { BorderRad, Colors, Fonts, Transitions } from '@/common/constants'
+import { BorderRad, BreakPoints, Colors, Fonts, Transitions } from '@/common/constants'
 
 import { CheckboxIcon } from '../icons'
 
@@ -16,17 +16,26 @@ export const HorizontalStepper = ({ steps }: HorizontalStepperProps) => {
   return (
     <HorizontalStepperWrapper>
       {stepsToRender.map((step, index) => (
-        <Step step={step} key={`horizontal-stepper-${index}`}>
-          <StepCircle>{step.isPast ? <CheckboxIcon /> : index + 1}</StepCircle>
-          <StepBody>
-            <StepTitle>{step.title}</StepTitle>
-          </StepBody>
-        </Step>
+        <>
+          <Step step={step} key={`horizontal-stepper-${index}`}>
+            <StepCircle>{step.isPast ? <CheckboxIcon /> : index + 1}</StepCircle>
+            <StepBody>
+              <StepTitle>{step.title}</StepTitle>
+            </StepBody>
+          </Step>
+          {index < stepsToRender.length - 1 && <Separator />}
+        </>
       ))}
     </HorizontalStepperWrapper>
   )
 }
 
+const Separator = styled.i`
+  min-width: 20px;
+  height: 1px;
+  background-color: ${Colors.Black[500]};
+`
+
 const pastStepCss = css`
   border-color: ${Colors.Black[500]};
   color: ${Colors.White};
@@ -40,6 +49,7 @@ const activeStepCss = css`
 
 const StepTitle = styled.h6`
   align-self: center;
+  text-align: center;
   text-transform: capitalize;
   transition: ${Transitions.all};
   font-weight: 400;
@@ -68,24 +78,15 @@ export const StepCircle = styled.span`
 `
 
 export const Step = styled.div<{ step: StepToRender }>`
+  align-self: baseline;
   display: flex;
+  flex-direction: column;
+  gap: 8px;
   position: relative;
   align-items: center;
+  justify-content: center;
   width: fit-content;
-
-  &:not(:first-child) {
-    margin-left: 12px;
-  }
-
-  &:not(:last-child) {
-    &:after {
-      margin-left: 12px;
-      content: '';
-      min-width: 20px;
-      height: 1px;
-      background-color: ${Colors.Black[500]};
-    }
-  }
+  flex: 1 1 0;
 
   ${StepCircle} {
     ${({ step: { isActive } }) => (isActive ? activeStepCss : pastStepCss)};
@@ -96,6 +97,11 @@ export const Step = styled.div<{ step: StepToRender }>`
       return isActive ? 'color: white; font-weight: 700' : `color: ${Colors.Black[400]}`
     }};
   }
+
+  @media (min-width: ${BreakPoints.sm}px) {
+    flex-direction: row;
+    flex: auto;
+  }
 `
 
 const StepBody = styled.div`
@@ -108,4 +114,5 @@ const HorizontalStepperWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 12px;
 `
diff --git a/packages/ui/src/common/components/forms/Checkbox.tsx b/packages/ui/src/common/components/forms/Checkbox.tsx
index db383c5ec6..cd8d6dcbc5 100644
--- a/packages/ui/src/common/components/forms/Checkbox.tsx
+++ b/packages/ui/src/common/components/forms/Checkbox.tsx
@@ -6,6 +6,7 @@ import { CheckboxIcon, CheckboxIconStyles } from '../icons/CheckboxIcon'
 
 export interface CheckboxProps {
   id: string
+  className?: string
   isRequired?: boolean
   children?: React.ReactNode
   enabled?: boolean
@@ -13,7 +14,15 @@ export interface CheckboxProps {
   onChange?: (value: boolean) => void
 }
 
-export function Checkbox({ id, isRequired, children, enabled = true, isChecked = false, onChange }: CheckboxProps) {
+export function Checkbox({
+  id,
+  className,
+  isRequired,
+  children,
+  enabled = true,
+  isChecked = false,
+  onChange,
+}: CheckboxProps) {
   const [isStateChecked, setStateChecked] = useState(isChecked)
 
   useEffect(() => {
@@ -22,6 +31,7 @@ export function Checkbox({ id, isRequired, children, enabled = true, isChecked =
 
   return (
     <CheckboxLabel
+      className={className}
       htmlFor={id}
       onClick={(event) => {
         event.preventDefault()
diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
index 1b130b3ace..05a33d4c2a 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
@@ -24,12 +24,15 @@ import { OnBoardingMembership } from '@/common/modals/OnBoardingModal/OnBoarding
 import { OnBoardingPlugin } from '@/common/modals/OnBoardingModal/OnBoardingPlugin'
 import { OnBoardingStatus, SetMembershipAccount } from '@/common/providers/onboarding/types'
 import { definedValues } from '@/common/utils'
+import { useMyMemberships } from '@/memberships/hooks/useMyMemberships'
 import { MemberFormFields } from '@/memberships/modals/BuyMembershipModal/BuyMembershipFormModal'
 import { BuyMembershipSuccessModal } from '@/memberships/modals/BuyMembershipModal/BuyMembershipSuccessModal'
+import { SwitchMemberModalCall } from '@/memberships/modals/SwitchMemberModal'
 import { toExternalResources } from '@/memberships/modals/utils'
 
 export const OnBoardingModal = () => {
-  const { hideModal } = useModal()
+  const { showModal, hideModal } = useModal()
+  const { hasMembers } = useMyMemberships()
   const { status: realStatus, membershipAccount, setMembershipAccount, isLoading } = useOnBoarding()
   const status = useDebounce(realStatus, 50)
   const [state, send] = useMachine(onBoardingMachine)
@@ -61,6 +64,12 @@ export const OnBoardingModal = () => {
     }
   }, [status, membershipAccount])
 
+  useEffect(() => {
+    if (status === 'finished' && !hasMembers) {
+      showModal<SwitchMemberModalCall>({ modal: 'SwitchMember' })
+    }
+  }, [status])
+
   useEffect(() => {
     async function submitNewMembership(form: MemberFormFields) {
       if (!endpoints.membershipFaucetEndpoint) {
@@ -183,8 +192,8 @@ const StepperWrapper = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 0 52px;
-  height: 80px;
+  max-width: 100vw;
+  padding: 24px 52px;
   position: relative;
   background-color: ${Colors.Black[700]};
 `
diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
index 64cc89a7b7..0a123305b0 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
@@ -30,16 +30,16 @@ export const OnBoardingPlugin = () => {
           <TextExtraHuge bold>Select Wallet</TextExtraHuge>
           <TextSmall>Select which wallet you want to use to connect with.</TextSmall>
           <List>
-            <ListItem>
-              {allWallets.map((wallet) => (
+            {allWallets.map((wallet) => (
+              <ListItem>
                 <ConnectWalletItem
                   key={wallet.extensionName}
                   wallet={wallet}
                   onClick={() => setSelectedWallet(wallet)}
                   selected={selectedWallet?.extensionName === wallet.extensionName}
                 />
-              ))}
-            </ListItem>
+              </ListItem>
+            ))}
           </List>
         </Wrapper>
         {error === 'APP_REJECTED' && (
@@ -98,10 +98,10 @@ const Wrapper = styled.div`
   align-items: center;
   gap: 5px;
   width: 100%;
-  max-width: 640px;
+  max-width: 592px;
   height: 100%;
   margin: 0 auto;
-  padding: 36px 0 24px;
+  padding: 36px 24px 24px;
   text-align: center;
 
   > *:nth-child(2) {
diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/NoAccountStep.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/NoAccountStep.tsx
index 7d46fd20a9..8487013774 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/components/NoAccountStep.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/components/NoAccountStep.tsx
@@ -1,39 +1,28 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import accountImg from '@/app/assets/images/OnBoarding/accountImage.png'
-import { ButtonPrimary } from '@/common/components/buttons'
 import { ScrolledModalBody } from '@/common/components/Modal'
 import { HorizontalStaticStepper } from '@/common/components/Stepper/HorizontalStaticStepper'
 import { TextExtraHuge } from '@/common/components/typography'
 import { OnBoardingTextFooter } from '@/common/modals/OnBoardingModal'
 
+import { ResetWalletButton } from './ResetWalletButton'
+
 const steps = ['Connect Pioneer to the selected wallet', 'Create an account according to the displayed instructions']
 
-export const NoAccountStep = () => {
-  const { setWallet } = useMyAccounts()
-
-  return (
-    <>
-      <ScrolledModalBody>
-        <Wrapper>
-          <AccountImage src={accountImg} />
-          <TextExtraHuge bold>Create an account</TextExtraHuge>
-          <HorizontalStaticStepper steps={steps} />
-        </Wrapper>
-      </ScrolledModalBody>
-      <OnBoardingTextFooter
-        text="Please reload the page after account creation!"
-        button={
-          <ButtonPrimary size="medium" onClick={() => setWallet?.(undefined)}>
-            Return to wallet selection
-          </ButtonPrimary>
-        }
-      />
-    </>
-  )
-}
+export const NoAccountStep = () => (
+  <>
+    <ScrolledModalBody>
+      <Wrapper>
+        <AccountImage src={accountImg} />
+        <TextExtraHuge bold>Create an account</TextExtraHuge>
+        <HorizontalStaticStepper steps={steps} />
+      </Wrapper>
+    </ScrolledModalBody>
+    <OnBoardingTextFooter text="Please reload the page after account creation!" button={<ResetWalletButton />} />
+  </>
+)
 
 const AccountImage = styled.img`
   object-fit: contain;
diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx
index 5b96c9bf1b..e75d4336f3 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/components/NoNodeConnection.tsx
@@ -1,33 +1,23 @@
 import { styled } from '@storybook/theming'
 import React from 'react'
 
-import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
-import { ButtonPrimary } from '@/common/components/buttons'
 import { ScrolledModalBody } from '@/common/components/Modal'
 import { TextHuge } from '@/common/components/typography'
 import { OnBoardingTextFooter } from '@/common/modals/OnBoardingModal'
 
-export const NoNodeConnection = () => {
-  const { setWallet } = useMyAccounts()
+import { ResetWalletButton } from './ResetWalletButton'
+
+export const NoNodeConnection = () => (
+  <>
+    <ScrolledModalBody>
+      <Wrapper>
+        <TextHuge>Please wait for node connection to continue the process</TextHuge>
+      </Wrapper>
+    </ScrolledModalBody>
+    <OnBoardingTextFooter text="Please reload the page after account creation!" button={<ResetWalletButton />} />
+  </>
+)
 
-  return (
-    <>
-      <ScrolledModalBody>
-        <Wrapper>
-          <TextHuge>Please wait for node connection to continue the process</TextHuge>
-        </Wrapper>
-      </ScrolledModalBody>
-      <OnBoardingTextFooter
-        text="Please reload the page after account creation!"
-        button={
-          <ButtonPrimary size="medium" onClick={() => setWallet?.(undefined)}>
-            Return to wallet selection
-          </ButtonPrimary>
-        }
-      />
-    </>
-  )
-}
 const Wrapper = styled.div`
   padding: 32px;
   min-height: 300px;
diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/ResetWalletButton.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/ResetWalletButton.tsx
new file mode 100644
index 0000000000..79e12cff9b
--- /dev/null
+++ b/packages/ui/src/common/modals/OnBoardingModal/components/ResetWalletButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { ButtonGhost } from '@/common/components/buttons'
+import { Arrow } from '@/common/components/icons'
+
+export const ResetWalletButton = () => {
+  const { setWallet } = useMyAccounts()
+  return (
+    <ButtonGhost size="medium" onClick={() => setWallet?.(undefined)}>
+      <Arrow direction="left" />
+      Change wallet
+    </ButtonGhost>
+  )
+}
diff --git a/packages/ui/src/common/modals/OnBoardingModal/components/SelectAccountStep.tsx b/packages/ui/src/common/modals/OnBoardingModal/components/SelectAccountStep.tsx
index 7f9225e900..ae8c4020fa 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/components/SelectAccountStep.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/components/SelectAccountStep.tsx
@@ -14,6 +14,7 @@ import { TextExtraHuge, TextMedium } from '@/common/components/typography'
 import { Colors } from '@/common/constants'
 
 import { ConnectAccountItem } from './ConnectAccountItem'
+import { ResetWalletButton } from './ResetWalletButton'
 
 interface Props {
   onAccountSelect?: (account: string) => void
@@ -21,7 +22,7 @@ interface Props {
 
 export const SelectAccountStep = ({ onAccountSelect }: Props) => {
   const [selectedAccountAddress, setSelectedAccountAddress] = useState<string>()
-  const { allAccounts, setWallet, wallet } = useMyAccounts()
+  const { allAccounts, wallet } = useMyAccounts()
   const balances = useMyBalances()
 
   const onConfirm = () => {
@@ -58,9 +59,7 @@ export const SelectAccountStep = ({ onAccountSelect }: Props) => {
         </ContentWrapper>
       </ScrolledModalBody>
       <StyledFooter>
-        <ButtonPrimary size="medium" onClick={() => setWallet?.(undefined)}>
-          Return to wallet selection
-        </ButtonPrimary>
+        <ResetWalletButton />
         <ButtonPrimary onClick={onConfirm} disabled={!selectedAccountAddress} size="medium">
           Connect Account
         </ButtonPrimary>
diff --git a/packages/ui/src/common/providers/onboarding/provider.tsx b/packages/ui/src/common/providers/onboarding/provider.tsx
index a627932dd7..c964c7e13b 100644
--- a/packages/ui/src/common/providers/onboarding/provider.tsx
+++ b/packages/ui/src/common/providers/onboarding/provider.tsx
@@ -26,7 +26,7 @@ const useOnBoarding = (): UseOnBoarding => {
   const { isLoading: isLoadingMembers, hasMembers } = useMyMemberships()
   const [membershipAccount, setMembershipAccount] = useLocalStorage<string | undefined>('onboarding-membership-account')
 
-  if (totalBalance.gtn(0) && wallet) {
+  if (totalBalance.gtn(0) || hasMembers) {
     return { isLoading: false, status: 'finished' }
   }
 
@@ -38,13 +38,9 @@ const useOnBoarding = (): UseOnBoarding => {
     return { isLoading: false, status: 'installPlugin' }
   }
 
-  if (!hasMembers && (!hasAccounts || !membershipAccount || !hasAccount(allAccounts, membershipAccount))) {
+  if (!hasAccounts || !membershipAccount || !hasAccount(allAccounts, membershipAccount)) {
     return { isLoading: false, status: 'addAccount', setMembershipAccount }
   }
 
-  if (!hasMembers && membershipAccount && hasAccount(allAccounts, membershipAccount)) {
-    return { isLoading: false, status: 'createMembership', membershipAccount, setMembershipAccount }
-  }
-
-  return { isLoading: false, status: 'finished' }
+  return { isLoading: false, status: 'createMembership', membershipAccount, setMembershipAccount }
 }
diff --git a/packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx b/packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx
index 07b6deea12..9ace9e2e38 100644
--- a/packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx
+++ b/packages/ui/src/memberships/components/CurrentMember/CurrentMember.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 import { useHistory } from 'react-router'
 import styled from 'styled-components'
 
@@ -8,7 +8,6 @@ import { ArrowDownExpandedIcon, Icon, Loader } from '@/common/components/icons'
 import { BorderRad, Colors, Transitions } from '@/common/constants'
 import { useModal } from '@/common/hooks/useModal'
 import { useOnBoarding } from '@/common/hooks/useOnBoarding'
-import { useResponsive } from '@/common/hooks/useResponsive'
 import { useRouteQuery } from '@/common/hooks/useRouteQuery'
 import { EMAIL_VERIFICATION_TOKEN_SEARCH_PARAM } from '@/memberships/constants'
 import { useNotificationSettings } from '@/memberships/hooks/useNotificationSettings'
@@ -18,7 +17,6 @@ import { useMyMemberships } from '../../hooks/useMyMemberships'
 import { EmailConfirmationModalCall } from '../../modals/EmailConfirmationModal'
 import { EmailSubscriptionModalCall } from '../../modals/EmailSubscriptionModal'
 import { SwitchMemberModalCall } from '../../modals/SwitchMemberModal'
-import { AddMembershipButton } from '../AddMembershipButton'
 
 export const CurrentMember = () => {
   const { allWallets, setWallet } = useMyAccounts()
@@ -28,7 +26,6 @@ export const CurrentMember = () => {
   const { activeMemberSettings, activeMemberExistBackendData } = useNotificationSettings()
   const showSubscriptionModal =
     active && activeMemberExistBackendData?.memberExist === false && !activeMemberSettings?.hasBeenAskedForEmail
-  const { isMobileWallet } = useResponsive()
 
   useEffect(() => {
     if (!emailVerificationToken && !modal && showSubscriptionModal) {
@@ -60,33 +57,27 @@ export const CurrentMember = () => {
     }
   }, [emailVerificationToken])
 
-  const handleConnectWallet = () => {
-    if (isMobileWallet) {
-      const wallets = allWallets.filter((wallet) => wallet.installed)
-      if (wallets.length > 0) {
-        return setWallet?.(wallets.at(-1))
-      }
+  const handleOnboarding = () => {
+    const wallets = allWallets.filter((wallet) => wallet.installed)
+    if (wallets.length === 1) {
+      setWallet?.(wallets.at(-1))
     }
     showModal({ modal: 'OnBoardingModal' })
   }
 
-  if (status === 'installPlugin') {
+  if (status !== 'finished') {
     return (
       <MembershipButtonsWrapper>
-        <MembershipActionButton onClick={handleConnectWallet} size="large" disabled={isLoading}>
+        <MembershipActionButton onClick={handleOnboarding} size="large" disabled={isLoading}>
           {isLoading && <Loader />}
-          Connect Wallet
+          {status === 'installPlugin' ? 'Connect Wallet' : 'Join Now'}
         </MembershipActionButton>
       </MembershipButtonsWrapper>
     )
   }
 
   if (!hasMembers) {
-    return (
-      <MembershipButtonsWrapper>
-        <AddMembershipButton size="large">Join Now</AddMembershipButton>
-      </MembershipButtonsWrapper>
-    )
+    return <SwitchMembershipButton>Join Now</SwitchMembershipButton>
   }
 
   return (
@@ -100,20 +91,22 @@ export const CurrentMember = () => {
           </SwitchArrow>
         </SwitchMember>
       )}
-      {!active && (
-        <MembershipButtonsWrapper>
-          <MembershipActionButton
-            onClick={() => showModal<SwitchMemberModalCall>({ modal: 'SwitchMember' })}
-            size="large"
-          >
-            Select membership
-          </MembershipActionButton>
-        </MembershipButtonsWrapper>
-      )}
+      {!active && <SwitchMembershipButton>Select membership</SwitchMembershipButton>}
     </>
   )
 }
 
+const SwitchMembershipButton: FC = ({ children }) => {
+  const { showModal } = useModal()
+  return (
+    <MembershipButtonsWrapper>
+      <MembershipActionButton onClick={() => showModal<SwitchMemberModalCall>({ modal: 'SwitchMember' })} size="large">
+        {children}
+      </MembershipActionButton>
+    </MembershipButtonsWrapper>
+  )
+}
+
 const SwitchArrow = styled.span`
   width: 16px;
   height: 16px;
diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
index 060406efa2..bdfe2a19a2 100644
--- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
+++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
@@ -248,14 +248,8 @@ export const BuyMembershipForm = ({
         </FormProvider>
       </ScrolledModalBody>
 
-      <StyledFooter>
-        {type === 'onBoarding' && (
-          <ButtonGhost onClick={changeMembershipAccount} size="medium">
-            <Arrow direction="left" />
-            Change account
-          </ButtonGhost>
-        )}
-        <Checkbox
+      <ModalFooter>
+        <StyledCheckbox
           id="privacy-policy-agreement"
           onChange={(hasTerms) => form.setValue('hasTerms', hasTerms, { shouldValidate: true })}
         >
@@ -270,7 +264,7 @@ export const BuyMembershipForm = ({
             </LabelLink>
             .
           </TextMedium>
-        </Checkbox>
+        </StyledCheckbox>
         {type === 'general' && (
           <TransactionInfoContainer>
             <TransactionInfo
@@ -282,17 +276,25 @@ export const BuyMembershipForm = ({
             />
           </TransactionInfoContainer>
         )}
-        <ButtonPrimary
-          size="medium"
-          onClick={() => {
-            const values = form.getValues()
-            uploadAvatarAndSubmit({ ...values, externalResources: { ...definedValues(values.externalResources) } })
-          }}
-          disabled={isDisabled}
-        >
-          {isUploading ? <Loading text="Uploading avatar" /> : 'Create a Membership'}
-        </ButtonPrimary>
-      </StyledFooter>
+        <FooterRow>
+          {type === 'onBoarding' && (
+            <ButtonGhost onClick={changeMembershipAccount} size="medium">
+              <Arrow direction="left" />
+              Change account
+            </ButtonGhost>
+          )}
+          <ButtonPrimary
+            size="medium"
+            onClick={() => {
+              const values = form.getValues()
+              uploadAvatarAndSubmit({ ...values, externalResources: { ...definedValues(values.externalResources) } })
+            }}
+            disabled={isDisabled}
+          >
+            {isUploading ? <Loading text="Uploading avatar" /> : 'Create a Membership'}
+          </ButtonPrimary>
+        </FooterRow>
+      </ModalFooter>
     </>
   )
 }
@@ -306,8 +308,16 @@ export const BuyMembershipFormModal = ({ onClose, onSubmit, membershipPrice }: B
   )
 }
 
-export const StyledFooter = styled(ModalFooter)`
-  & > label:first-child {
-    margin-right: auto;
+const StyledCheckbox = styled(Checkbox)`
+  flex-shrink: 1;
+`
+
+const FooterRow = styled.div`
+  display: flex;
+  max-width: 100%;
+  gap: 16px;
+  flex-grow: 1;
+  > *:nth-last-child(1) {
+    margin: 0 0 0 auto;
   }
 `