diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
index ca68033611..c80a000c46 100644
--- a/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { AccountInfo } from '@/accounts/components/AccountInfo'
-import { AccountLocks, AccountLocksWrapper } from '@/accounts/components/AccountLocks'
+import { AccountLocks } from '@/accounts/components/AccountLocks'
 import { useBalance } from '@/accounts/hooks/useBalance'
 import { AccountOption } from '@/accounts/types'
-import { BalanceInfoNarrow, InfoTitle, InfoValue } from '@/common/components/Modal'
+import { BalanceInfo, InfoTitle } from '@/common/components/Modal'
 import { TokenValue } from '@/common/components/typography'
-import { Colors } from '@/common/constants'
+import { BreakPoints, Colors } from '@/common/constants'
 
 interface Props {
   option: AccountOption
   isForStaking?: boolean
   variant?: 's' | 'm' | 'l'
+  isSelected?: boolean
 }
 
-export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
+export const OptionAccount = ({ option, isForStaking, variant, isSelected }: Props) => {
   const balances = useBalance(option.address)
   const balance = isForStaking ? balances?.total : balances?.transferable
   const balanceType = isForStaking ? 'Total' : 'Transferable'
@@ -25,23 +26,41 @@ export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
   return (
     <>
       <AccountInfo account={option} locked={isLocked} variant={variant} />
-      <BalanceInfoNarrow>
+      <StyledBalanceInfo isSelected={isSelected}>
         <InfoTitle>{balanceType} balance</InfoTitle>
-        <InfoValueWithLocks>
+        <InfoContainer>
           <Value value={balance} locked={isLocked} />
           <AccountLocks locks={balances?.locks} />
-        </InfoValueWithLocks>
-      </BalanceInfoNarrow>
+        </InfoContainer>
+      </StyledBalanceInfo>
     </>
   )
 }
 
-const Value = styled(TokenValue)<{ locked?: boolean }>`
-  color: ${({ locked }) => (locked ? Colors.Black[500] : 'default')};
+const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
 `
 
-export const InfoValueWithLocks = styled(InfoValue)`
-  ${AccountLocksWrapper} {
-    right: 0;
+const StyledBalanceInfo = styled(BalanceInfo)<Pick<Props, 'isSelected'>>`
+  gap: 12px;
+
+  @media (max-width: ${BreakPoints.sm - 1}px) {
+    ${({ isSelected }) =>
+      isSelected
+        ? css`
+            display: none;
+          `
+        : css`
+            display: flex;
+            ${InfoContainer} {
+              display: contents;
+            }
+          `};
   }
 `
+
+const Value = styled(TokenValue)<{ locked?: boolean }>`
+  color: ${({ locked }) => (locked ? Colors.Black[500] : 'default')};
+`
diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.stories.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.stories.tsx
new file mode 100644
index 0000000000..abf9fdb582
--- /dev/null
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components'
+
+import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
+import { member } from '@/mocks/data/members'
+import { MocksParameters } from '@/mocks/providers'
+import { AccountMock } from '@/mocks/providers/accounts'
+
+import { OptionListAccount as OptionListAccountComponent } from './OptionListAccount'
+
+export const mockAccounts: AccountMock[] = [
+  { member: member('alice'), balances: { transferable: 0.00001, locks: ['Apps Worker'] } },
+  {
+    member: member('bob'),
+    balances: { transferable: 101_300_098.123, locks: ['Councilor', 'Voting', 'Council Candidate'] },
+  },
+  { member: member('charlie'), balances: 200 },
+  { member: member('dave'), balances: { transferable: 0, locks: ['Bound Staking Account'] } },
+  { member: member('eve'), balances: { transferable: 1000, locks: ['Staking'] } },
+  { member: member('ferdie'), balances: 500 },
+]
+
+export default {
+  title: 'Accounts/SelectAccount/OptionListAccount',
+  component: OptionListAccountComponent,
+
+  parameters: {
+    mocks: {
+      accounts: { list: mockAccounts },
+    } satisfies MocksParameters,
+  },
+
+  excludeStories: ['mockAccounts'],
+} satisfies Meta
+
+export const OptionListAccount: StoryFn = () => {
+  const { allAccounts } = useMyAccounts()
+
+  const free = allAccounts.slice(0, 3)
+
+  const optionLocks = [['insufficientFunds', 'boundMembership'], ['rivalrousLock', 'recoverableLock'], ['optOutLock']]
+  const locked = allAccounts.slice(3).map((account, i) => ({ ...account, optionLocks: optionLocks[i] }))
+
+  return <AccountsOptions options={[...free, ...locked]} />
+}
+
+const AccountsOptions = styled(OptionListAccountComponent)`
+  position: static;
+  transform: none;
+  max-height: none;
+  max-width: 856px;
+`
diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
index 226acfa929..8977e0dd10 100644
--- a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
@@ -9,7 +9,7 @@ import { OptionAccount } from './OptionAccount'
 
 interface Props {
   options: AccountOption[]
-  onChange: (option: AccountOption) => void
+  onChange?: (option: AccountOption) => void
   className?: string
   isForStaking?: boolean
   variant?: 's' | 'm' | 'l'
@@ -21,13 +21,13 @@ export const OptionListAccount = React.memo(({ options, onChange, className, isF
   return (
     <OptionsListComponent className={className}>
       {freeAccounts.map((option) => (
-        <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
+        <Option key={option.address} onClick={() => onChange && onChange(option)}>
           <OptionAccount option={option} isForStaking={isForStaking} variant={variant} />
         </Option>
       ))}
       {lockedAccounts.map((option) => (
         <AccountLockTooltip boundaryClassName={className} key={option.address} locks={option.optionLocks}>
-          <Option key={option.address} onClick={() => onChange && onChange(option)} disabled variant={variant}>
+          <Option key={option.address} onClick={() => onChange && onChange(option)} disabled>
             <OptionAccount option={option} isForStaking={isForStaking} />
           </Option>
         </AccountLockTooltip>
diff --git a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.stories.tsx b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.stories.tsx
index 75bb6b348c..b3d58df947 100644
--- a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.stories.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.stories.tsx
@@ -1,60 +1,40 @@
-import { Meta, Story } from '@storybook/react'
-import React, { ReactNode, useState } from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+import styled from 'styled-components'
 
-import { AccountsContextProvider } from '@/accounts/providers/accounts/provider'
 import { Account } from '@/accounts/types'
 import { InputComponent } from '@/common/components/forms'
-import { Warning } from '@/common/components/Warning'
-import { KeyringContextProvider } from '@/common/providers/keyring/provider'
-import { MockApolloProvider } from '@/mocks/components/storybook/MockApolloProvider'
+import { MocksParameters } from '@/mocks/providers'
 
 import { SelectAccount } from '.'
+import { mockAccounts } from './OptionListAccount.stories'
 
 export default {
   title: 'Accounts/SelectAccount',
   component: SelectAccount,
-} as Meta
 
-const renderWarning = (accountSelect: ReactNode) => (
-  <>
-    <Warning
-      isClosable={false}
-      title="Warning: the Polkadot.js extension can't run in an iframe !"
-      content={
-        <>
-          To render this component properly:{' '}
-          <a href={window.location.href} target="_blank">
-            Open the canvas in a new tab
-          </a>
-        </>
-      }
-    />
-    <br />
-    {accountSelect}
-  </>
-)
+  parameters: {
+    mocks: {
+      accounts: { list: mockAccounts },
+    } satisfies MocksParameters,
+  },
+} satisfies Meta
 
-export const Default: Story = () => {
+export const Default: StoryFn = () => {
   const [selected, setSelected] = useState<Account>()
 
-  const accountSelect = (
-    <InputComponent
+  return (
+    <StyledInputComponent
       label="Account select"
       tooltipText="Lorem ipsum dolor sit amet consectetur, adipisicing elit."
       required
       inputSize="l"
     >
       <SelectAccount selected={selected} onChange={setSelected} />
-    </InputComponent>
-  )
-
-  return window.self === window.top ? (
-    <MockApolloProvider members>
-      <KeyringContextProvider>
-        <AccountsContextProvider>{accountSelect}</AccountsContextProvider>
-      </KeyringContextProvider>
-    </MockApolloProvider>
-  ) : (
-    renderWarning(accountSelect)
+    </StyledInputComponent>
   )
 }
+
+const StyledInputComponent = styled(InputComponent)`
+  max-width: 856px;
+`
diff --git a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
index 9c88dc5d0f..349848ce5c 100644
--- a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
+++ b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
@@ -39,7 +39,7 @@ interface BaseSelectAccountProps extends SelectAccountProps {
   isForStaking?: boolean
 }
 
-export const BaseSelectAccount = React.memo(
+const BaseSelectAccount = React.memo(
   ({ id, onChange, accounts, filter, selected, disabled, onBlur, isForStaking, variant }: BaseSelectAccountProps) => {
     const options = accounts.filter(filter || (() => true))
 
@@ -88,7 +88,7 @@ export const BaseSelectAccount = React.memo(
 const renderSelected = (isForStaking?: boolean, variant?: 's' | 'm' | 'l') => (option: AccountOption) =>
   (
     <SelectedOption variant={variant}>
-      <OptionAccount option={option} isForStaking={isForStaking} />
+      <OptionAccount option={option} isForStaking={isForStaking} isSelected />
     </SelectedOption>
   )
 
diff --git a/packages/ui/src/accounts/modals/ClaimVestingModal/components/SelectVestingAccount.tsx b/packages/ui/src/accounts/modals/ClaimVestingModal/components/SelectVestingAccount.tsx
index 42c187e86f..7cd8e76ca3 100644
--- a/packages/ui/src/accounts/modals/ClaimVestingModal/components/SelectVestingAccount.tsx
+++ b/packages/ui/src/accounts/modals/ClaimVestingModal/components/SelectVestingAccount.tsx
@@ -4,14 +4,13 @@ import styled from 'styled-components'
 
 import { AccountInfo } from '@/accounts/components/AccountInfo'
 import { filterByText } from '@/accounts/components/SelectAccount/helpers'
-import { InfoValueWithLocks } from '@/accounts/components/SelectAccount/OptionAccount'
 import { useBalance } from '@/accounts/hooks/useBalance'
 import { useMyAccounts } from '@/accounts/hooks/useMyAccounts'
 import { accountOrNamed } from '@/accounts/model/accountOrNamed'
 import { isValidAddress } from '@/accounts/model/isValidAddress'
 import { Account, AccountOption } from '@/accounts/types'
 import { VestingLockIcon } from '@/common/components/icons/locks/VestingLockIcon'
-import { BalanceInfoInRow } from '@/common/components/Modal'
+import { BalanceInfoInRow, InfoValue } from '@/common/components/Modal'
 import { ColumnGapBlock } from '@/common/components/page/PageContent'
 import { Option, OptionsListComponent, Select, SelectedOption } from '@/common/components/selects'
 import { TextMedium, TokenValue } from '@/common/components/typography'
@@ -91,9 +90,9 @@ export const VestingListItem = ({ option, vestingClaimable }: { option: AccountO
         <VestingLockIcon />
         <TextMedium bold>Vesting</TextMedium>
       </ColumnGapBlock>
-      <InfoValueWithLocks>
+      <InfoValue>
         <TokenValue value={vestingClaimable} />
-      </InfoValueWithLocks>
+      </InfoValue>
     </VestingInfoRow>
   </>
 )
diff --git a/packages/ui/src/accounts/model/walletConnect.ts b/packages/ui/src/accounts/model/walletConnect.ts
index 8b3d874181..945c374b6a 100644
--- a/packages/ui/src/accounts/model/walletConnect.ts
+++ b/packages/ui/src/accounts/model/walletConnect.ts
@@ -85,7 +85,7 @@ export class WalletConnect extends BaseDotsamaWallet {
       polkadot: {
         methods: ['polkadot_signTransaction', 'polkadot_signMessage'],
         chains: [chainCAIP],
-        events: ['chainChanged", "accountsChanged'],
+        events: ['chainChanged', 'accountsChanged'],
       },
     }
 
diff --git a/packages/ui/src/app/App.stories.tsx b/packages/ui/src/app/App.stories.tsx
index feb02e4d28..4d7cc51067 100644
--- a/packages/ui/src/app/App.stories.tsx
+++ b/packages/ui/src/app/App.stories.tsx
@@ -355,7 +355,7 @@ export const NoAccount: Story = {
     const modal = withinModal(canvasElement)
     expectActiveStepToBe(modal, 'Connect account')
     expect(modal.getByText('Connect account', { selector: '[class^=ModalBody] *' }))
-    expect(getButtonByText(modal, 'Return to wallet selection')).toBeEnabled()
+    expect(getButtonByText(modal, 'Change wallet')).toBeEnabled()
     expect(getButtonByText(modal, 'Connect Account')).toBeDisabled()
     expect(modal.queryByText('alice')).toBeNull()
   },
@@ -376,7 +376,7 @@ export const FaucetMembership: Story = {
       expectActiveStepToBe(modal, 'Connect account')
       expect(modal.getByText('Connect account', { selector: '[class^=ModalBody] *' }))
 
-      expect(getButtonByText(modal, 'Return to wallet selection')).toBeEnabled()
+      expect(getButtonByText(modal, 'Change wallet')).toBeEnabled()
 
       const connectAccountButton = getButtonByText(modal, 'Connect Account')
       expect(connectAccountButton).toBeDisabled()
@@ -426,6 +426,7 @@ export const BuyMembershipHappy: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
@@ -539,6 +540,7 @@ export const BuyMembershipNotEnoughFund: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await fillMembershipForm(modal)
     const createButton = getButtonByText(modal, 'Create a Membership')
@@ -559,6 +561,7 @@ export const BuyMembershipTxFailure: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await fillMembershipForm(modal)
     const createButton = getButtonByText(modal, 'Create a Membership')
@@ -598,6 +601,7 @@ export const BuyMembershipHappyBindOneValidatorHappy: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
@@ -679,6 +683,7 @@ export const BuyMembershipHappyAddTwoValidatorHappy: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
@@ -773,6 +778,8 @@ export const InvalidValidatorAccountInput: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
+
     await fillMembershipForm(modal)
     const validatorCheckButton = modal.getAllByText('Yes')[1]
     await userEvent.click(validatorCheckButton)
@@ -798,6 +805,7 @@ export const BuyMembershipWithValidatorAccountNotEnoughFunds: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await fillMembershipFormValidatorAccounts(modal, ['charlie'])
     const createButton = getButtonByText(modal, 'Create a Membership')
@@ -818,6 +826,7 @@ export const BuyMembershipWithValidatorAccountFailure: Story = {
     const modal = withinModal(canvasElement)
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await fillMembershipFormValidatorAccounts(modal, ['charlie'])
     const createButton = getButtonByText(modal, 'Create a Membership')
@@ -842,6 +851,7 @@ export const BuyMembershipHappyAddOneValidatorFailure: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
@@ -888,6 +898,7 @@ export const BuyMembershipAddValidatorAccHappyConfirmTxFailure: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
@@ -944,6 +955,7 @@ export const BuyMembershipAddTwoValidatorAccHappyConfirmTxFailure: Story = {
     expect(screen.queryByText('Become a member')).toBeNull()
 
     await userEvent.click(getButtonByText(screen, 'Join Now'))
+    await userEvent.click(await modal.findByText('New Member'))
 
     await step('Form', async () => {
       const createButton = getButtonByText(modal, 'Create a Membership')
diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx
index 9f69df316e..148ac24c03 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'
@@ -223,32 +220,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)
@@ -259,11 +234,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/app/pages/Forum/ForumCategory.tsx b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
index fed06f054f..992d54e203 100644
--- a/packages/ui/src/app/pages/Forum/ForumCategory.tsx
+++ b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
@@ -82,6 +82,7 @@ export const ForumCategory = () => {
               style="primary"
               size="medium"
               onClick={() => showModal({ modal: 'CreateThreadModal', data: { categoryId: id } })}
+              isResponsive
             >
               <PlusIcon /> Add New Thread
             </TransactionButton>
diff --git a/packages/ui/src/common/components/ContextMenu/ContextMenu.tsx b/packages/ui/src/common/components/ContextMenu/ContextMenu.tsx
index f19a2b7de2..7219731eaf 100644
--- a/packages/ui/src/common/components/ContextMenu/ContextMenu.tsx
+++ b/packages/ui/src/common/components/ContextMenu/ContextMenu.tsx
@@ -19,9 +19,10 @@ export interface ContextMenuProps {
   items: ContextMenuItem[]
   size?: ButtonSize
   title?: string
+  isResponsive?: boolean
 }
 
-export const ContextMenu = ({ items, size, title }: ContextMenuProps) => {
+export const ContextMenu = ({ items, size, title, isResponsive }: ContextMenuProps) => {
   const [isMenuVisible, setMenuVisible] = useState(false)
   const [referenceElementRef, setReferenceElementRef] = useState<HTMLDivElement | null>(null)
   const [popperElementRef, setPopperElementRef] = useState<HTMLDivElement | null>(null)
@@ -56,6 +57,7 @@ export const ContextMenu = ({ items, size, title }: ContextMenuProps) => {
         size={size ?? 'medium'}
         {...contextMenuHandlers}
         title={title ?? 'Context menu'}
+        isResponsive={isResponsive}
       >
         <KebabMenuIcon />
       </TransactionButton>
diff --git a/packages/ui/src/common/components/EditableInputList/EditableInputList.tsx b/packages/ui/src/common/components/EditableInputList/EditableInputList.tsx
index aad7c011cc..dc471d1dad 100644
--- a/packages/ui/src/common/components/EditableInputList/EditableInputList.tsx
+++ b/packages/ui/src/common/components/EditableInputList/EditableInputList.tsx
@@ -2,8 +2,7 @@ import * as React from 'react'
 import { ChangeEvent } from 'react'
 import styled from 'styled-components'
 
-import { ButtonBareGhost } from '@/common/components/buttons'
-import { TransactionButton } from '@/common/components/buttons/TransactionButton'
+import { ButtonBareGhost, ButtonPrimary } from '@/common/components/buttons'
 import { InputComponent, InputNotification, InputText, ToggleCheckbox } from '@/common/components/forms'
 import { BinIcon } from '@/common/components/icons'
 import { PlusIcon } from '@/common/components/icons/PlusIcon'
@@ -53,10 +52,10 @@ const EditableInputList: React.FC<EditableInputListProps> = React.memo(
           <TextHuge bold value>
             {title}
           </TextHuge>
-          <TransactionButton style="primary" size="medium" onClick={() => addFields()}>
+          <ButtonPrimary size="medium" onClick={() => addFields()}>
             <PlusIcon />
             {buttonText}
-          </TransactionButton>
+          </ButtonPrimary>
         </HeaderWrapper>
         {value.map((questionFields, index) => (
           <InputWrapper key={index}>
diff --git a/packages/ui/src/common/components/Info.tsx b/packages/ui/src/common/components/Info.tsx
index 7a5d19b250..6a273b4b15 100644
--- a/packages/ui/src/common/components/Info.tsx
+++ b/packages/ui/src/common/components/Info.tsx
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 
 import { Colors } from '@/common/constants'
 
-import { ColumnGapBlock, RowGapBlock } from './page/PageContent'
-import { Tooltip, TooltipDefault } from './Tooltip'
+import { RowGapBlock } from './page/PageContent'
 
 export interface InfoProps {
   title?: string
@@ -14,14 +13,7 @@ export interface InfoProps {
 export const Info = ({ title, children }: InfoProps) => {
   return (
     <InfoBlock gap={8}>
-      {title && (
-        <ColumnGapBlock gap={8} align="center">
-          <Tooltip tooltipText="Lorem ipsum">
-            <TooltipDefault />
-          </Tooltip>
-          <h5>{title}</h5>
-        </ColumnGapBlock>
-      )}
+      {title && <h5>{title}</h5>}
       {children}
     </InfoBlock>
   )
diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx
index 746d49a9da..7305a5bc2a 100644
--- a/packages/ui/src/common/components/Modal/Modal.tsx
+++ b/packages/ui/src/common/components/Modal/Modal.tsx
@@ -5,7 +5,7 @@ import { ConnectionStatusDot } from '@/app/components/ConnectionStatusDot'
 import { useEscape } from '@/common/hooks/useEscape'
 
 import { Animations, BorderRad, BreakPoints, Colors, Fonts, RemoveScrollbar, Shadows, ZIndex } from '../../constants'
-import { CloseButton } from '../buttons'
+import { ButtonsGroup, CloseButton } from '../buttons'
 import { TextMedium, ValueInJoys } from '../typography'
 
 interface ModalHeaderBasicProps {
@@ -172,19 +172,27 @@ export const ModalFooterComponent = styled.footer`
   display: inline-flex;
   flex-wrap: wrap;
   grid-area: modalfooter;
-  gap: 16px;
+  gap: 16px 4px;
   justify-self: end;
   justify-content: end;
   align-items: center;
   width: 100%;
   height: content-fit;
   min-height: 64px;
-  padding: 12px 26px 12px 24px;
+  padding: 12px;
   border-radius: 0 0 2px 2px;
   position: relative;
+  max-width: 100vw;
 
   @media (min-width: ${BreakPoints.sm}px) {
-    flex-flow: nowrap;
+    flex-wrap: nowrap;
+    gap: 16px;
+    padding: 12px 26px 12px 24px;
+
+    ${ButtonsGroup} {
+      gap: 16px;
+    }
+  }
   }
 `
 
@@ -310,7 +318,11 @@ export const ScrolledModalContainer = styled.div`
   grid-row-gap: 16px;
   width: 100%;
   height: 100%;
-  padding: 24px 24px 20px;
+  padding: 24px 12px 20px;
+
+  @media (min-width: ${BreakPoints.sm}px) {
+    padding: 24px 24px 20px;
+  }
 
   &:after {
     content: '';
diff --git a/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx b/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx
index fc5decbfe6..e7057d28d1 100644
--- a/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx
+++ b/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx
@@ -1,12 +1,14 @@
 import BN from 'bn.js'
 import React, { FC, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 import { useTransactionFee } from '@/accounts/hooks/useTransactionFee'
 import { ButtonGhost, ButtonPrimary, ButtonsGroup } from '@/common/components/buttons'
 import { Arrow } from '@/common/components/icons'
 import { ModalFooter, TransactionInfoContainer } from '@/common/components/Modal'
 
-import { TransactionFee } from '../TransactionFee'
+import { TransactionInfo } from '../TransactionInfo'
 
 interface ButtonState {
   disabled?: boolean
@@ -33,27 +35,44 @@ export const ModalTransactionFooter: FC<Props> = ({
   children,
 }) => {
   const { feeInfo } = useTransactionFee()
+  const { t } = useTranslation()
+
   return (
     <ModalFooter className={className}>
-      <ButtonsGroup align="left">
-        {extraLeftButtons}
-        {prev && !prev.disabled && (
-          <ButtonGhost onClick={prev.onClick} size="medium">
-            <Arrow direction="left" />
-            {prev.label ?? 'Previous step'}
-          </ButtonGhost>
-        )}
-      </ButtonsGroup>
-      <TransactionInfoContainer>
-        {children}
-        {(transactionFee || feeInfo) && <TransactionFee value={transactionFee ?? (feeInfo?.transactionFee as BN)} />}
-      </TransactionInfoContainer>
-      <ButtonsGroup align="right">
+      {(extraLeftButtons || (prev && !prev.disabled)) && (
+        <ButtonsGroup align="left">
+          {prev && !prev.disabled && (
+            <ButtonGhost onClick={prev.onClick} size="medium">
+              <Arrow direction="left" />
+              {prev.label ?? 'Previous step'}
+            </ButtonGhost>
+          )}
+          {extraLeftButtons}
+        </ButtonsGroup>
+      )}
+
+      {(children || transactionFee || feeInfo) && (
+        <TransactionInfoContainer>
+          {children}
+          {(transactionFee || feeInfo) && (
+            <TransactionInfo
+              title={t('modals.transactionFee.label')}
+              value={transactionFee ?? (feeInfo?.transactionFee as BN)}
+            />
+          )}
+        </TransactionInfoContainer>
+      )}
+
+      <MainButtonGroup>
         {extraButtons}
         <ButtonPrimary disabled={next.disabled} onClick={next.onClick} size="medium">
           {next.label ?? 'Next step'} <Arrow direction="right" />
         </ButtonPrimary>
-      </ButtonsGroup>
+      </MainButtonGroup>
     </ModalFooter>
   )
 }
+
+const MainButtonGroup = styled(ButtonsGroup)`
+  justify-content: end;
+`
diff --git a/packages/ui/src/common/components/Modal/Modals.tsx b/packages/ui/src/common/components/Modal/Modals.tsx
index 5752ab32c5..536e52ce85 100644
--- a/packages/ui/src/common/components/Modal/Modals.tsx
+++ b/packages/ui/src/common/components/Modal/Modals.tsx
@@ -63,7 +63,9 @@ export const TransactionAmount = styled.div<TransactionAmountProps>`
 
 export const TransactionInfoContainer = styled.div`
   display: grid;
-  margin-right: 24px;
+  align-items: center;
+  grid-template-columns: 1fr auto auto;
+  column-gap: 8px;
 `
 
 export const BalanceInfo = styled.div`
@@ -78,11 +80,6 @@ export const BalanceInfoInRow = styled(BalanceInfo)`
   justify-self: end;
 `
 
-export const BalanceInfoNarrow = styled(BalanceInfo)`
-  grid-template-columns: 1fr 128px;
-  width: auto;
-`
-
 export const InfoTitle = styled.span`
   font-size: 10px;
   line-height: 16px;
@@ -92,7 +89,7 @@ export const InfoTitle = styled.span`
   color: ${Colors.Black[400]};
 `
 
-export const InfoValue = styled.span`
+export const InfoValue = styled.div`
   text-align: right;
   text-align: -webkit-right;
   line-height: 20px;
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..b73c4055f7 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,10 +49,10 @@ const activeStepCss = css`
 
 const StepTitle = styled.h6`
   align-self: center;
+  text-align: center;
   text-transform: capitalize;
   transition: ${Transitions.all};
   font-weight: 400;
-  padding-left: 8px;
   color: ${Colors.Black[400]};
 `
 
@@ -68,24 +77,15 @@ export const StepCircle = styled.span`
 `
 
 export const Step = styled.div<{ step: StepToRender }>`
+  align-self: flex-start;
   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 +96,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 +113,5 @@ const HorizontalStepperWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 12px;
 `
diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
index 8b7d9f058a..f34db56099 100644
--- a/packages/ui/src/common/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
@@ -366,7 +366,7 @@ export const TooltipComponent = styled.i<{ maxWidth?: boolean }>`
   }
 `
 
-export const TooltipContainer = styled.span<{ absolute?: boolean; maxWidth?: boolean }>`
+export const TooltipContainer = styled.div<{ absolute?: boolean; maxWidth?: boolean }>`
   display: inline-flex;
   position: ${({ absolute }) => (absolute ? 'absolute' : 'relative')};
   right: ${({ absolute }) => (absolute ? '-24px' : 'auto')};
diff --git a/packages/ui/src/common/components/TransactionFee.stories.tsx b/packages/ui/src/common/components/TransactionFee.stories.tsx
deleted file mode 100644
index de4fcb8ac4..0000000000
--- a/packages/ui/src/common/components/TransactionFee.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-import BN from 'bn.js'
-import React from 'react'
-
-import { TransactionFee, TransactionFeeProps } from '@/common/components/TransactionFee'
-
-export default {
-  title: 'Common/TransactionFee',
-  component: TransactionFee,
-} as Meta
-
-export const Default: Story<TransactionFeeProps> = (args) => <TransactionFee {...args} />
-
-Default.args = {
-  title: 'Transaction Fee',
-  value: new BN(6.43535),
-  tooltipTitle: 'Blockchain Transaction',
-  tooltipText: 'This action requires a blockchain transaction, which comes with a fee',
-}
diff --git a/packages/ui/src/common/components/TransactionFee.tsx b/packages/ui/src/common/components/TransactionFee.tsx
deleted file mode 100644
index d4b8af126c..0000000000
--- a/packages/ui/src/common/components/TransactionFee.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import BN from 'bn.js'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { BalanceInfoNarrow, InfoTitle, InfoValue } from './Modal'
-import { Tooltip, TooltipDefault } from './Tooltip'
-import { TokenValue } from './typography'
-
-export interface TransactionFeeProps {
-  title?: string
-  value: BN
-  tooltipText?: React.ReactNode
-  tooltipTitle?: string
-  tooltipLinkText?: React.ReactNode
-  tooltipLinkURL?: string
-}
-
-export const TransactionFee = ({
-  title,
-  value,
-  tooltipText,
-  tooltipTitle,
-  tooltipLinkText,
-  tooltipLinkURL,
-}: TransactionFeeProps) => {
-  const { t } = useTranslation()
-  return (
-    <BalanceInfoNarrow>
-      <InfoTitle>{title ?? t('modals.transactionFee.label')}</InfoTitle>
-      <InfoValue>
-        <TokenValue value={value} />
-      </InfoValue>
-      {tooltipText && (
-        <Tooltip
-          tooltipTitle={tooltipTitle}
-          tooltipLinkText={tooltipLinkText}
-          tooltipText={tooltipText}
-          tooltipLinkURL={tooltipLinkURL}
-          absolute
-        >
-          <TooltipDefault />
-        </Tooltip>
-      )}
-    </BalanceInfoNarrow>
-  )
-}
diff --git a/packages/ui/src/common/components/TransactionInfo.stories.tsx b/packages/ui/src/common/components/TransactionInfo.stories.tsx
new file mode 100644
index 0000000000..fe75b70266
--- /dev/null
+++ b/packages/ui/src/common/components/TransactionInfo.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryFn } from '@storybook/react'
+import BN from 'bn.js'
+import React from 'react'
+
+import { TransactionInfo, TransactionInfoProps } from './TransactionInfo'
+
+export default {
+  title: 'Common/TransactionInfo',
+  component: TransactionInfo,
+} as Meta
+
+export const Default: StoryFn<TransactionInfoProps> = (args) => <TransactionInfo {...args} />
+
+Default.args = {
+  title: 'Transaction Fee',
+  value: new BN(6.43535),
+  tooltipTitle: 'Blockchain Transaction',
+  tooltipText: 'This action requires a blockchain transaction, which comes with a fee',
+}
diff --git a/packages/ui/src/common/components/TransactionInfo.tsx b/packages/ui/src/common/components/TransactionInfo.tsx
index 36a155a2ba..e9e91e2ec5 100644
--- a/packages/ui/src/common/components/TransactionInfo.tsx
+++ b/packages/ui/src/common/components/TransactionInfo.tsx
@@ -1,7 +1,7 @@
 import BN from 'bn.js'
 import React from 'react'
 
-import { BalanceInfoNarrow, InfoTitle, InfoValue } from './Modal'
+import { InfoTitle, InfoValue } from './Modal'
 import { Tooltip, TooltipDefault } from './Tooltip'
 import { TokenValue } from './typography'
 
@@ -23,22 +23,23 @@ export const TransactionInfo = ({
   tooltipLinkURL,
 }: TransactionInfoProps) => {
   return (
-    <BalanceInfoNarrow>
+    <>
       <InfoTitle>{title}</InfoTitle>
       <InfoValue>
         <TokenValue value={value} />
       </InfoValue>
-      {tooltipText && (
+      {tooltipText ? (
         <Tooltip
           tooltipTitle={tooltipTitle}
           tooltipLinkText={tooltipLinkText}
           tooltipText={tooltipText}
           tooltipLinkURL={tooltipLinkURL}
-          absolute
         >
           <TooltipDefault />
         </Tooltip>
+      ) : (
+        <span></span>
       )}
-    </BalanceInfoNarrow>
+    </>
   )
 }
diff --git a/packages/ui/src/common/components/buttons/Buttons.tsx b/packages/ui/src/common/components/buttons/Buttons.tsx
index 2bb0118d38..2144ec19e1 100644
--- a/packages/ui/src/common/components/buttons/Buttons.tsx
+++ b/packages/ui/src/common/components/buttons/Buttons.tsx
@@ -504,20 +504,31 @@ export const ButtonLinkStyles = styled.button<ButtonProps>`
 `
 
 export const ButtonsGroup = styled.div<{ align?: 'left' | 'center' | 'right' }>`
-  display: grid;
-  grid-auto-flow: column;
-  grid-column-gap: 8px;
-  align-items: center;
-  width: fit-content;
-  justify-self: ${({ align }) => {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 8px;
+
+  ${({ align }) => {
     switch (align) {
       case 'left':
-      default:
-        return 'start'
+        return css`
+          justify-content: start;
+          justify-self: start;
+          margin-right: auto;
+        `
       case 'center':
-        return 'center'
+        return css`
+          justify-content: center;
+          justify-self: center;
+          margin-left: auto;
+          margin-right: auto;
+        `
       case 'right':
-        return 'end'
+        return css`
+          justify-content: end;
+          justify-self: end;
+          margin-left: auto;
+        `
     }
   }};
 `
diff --git a/packages/ui/src/common/components/buttons/TransactionButton.tsx b/packages/ui/src/common/components/buttons/TransactionButton.tsx
index 31477b7bf3..b4f89bd6d1 100644
--- a/packages/ui/src/common/components/buttons/TransactionButton.tsx
+++ b/packages/ui/src/common/components/buttons/TransactionButton.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import { ReactElement } from 'react-markdown/lib/react-markdown'
 
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { useTransactionStatus } from '@/common/hooks/useTransactionStatus'
 
 import { Tooltip } from '../Tooltip'
@@ -9,10 +10,14 @@ import { ButtonGhost, ButtonPrimary, ButtonProps, ButtonSecondary } from '.'
 
 interface WrapperProps {
   children: ReactNode
+  isResponsive?: boolean
 }
 
-export const TransactionButtonWrapper = ({ children }: WrapperProps) => {
+export const TransactionButtonWrapper = ({ isResponsive, children }: WrapperProps) => {
   const { isTransactionPending } = useTransactionStatus()
+  const { size } = useResponsive()
+
+  if (!isResponsive && (size === 'xxs' || size === 'xs')) return null
 
   if (isTransactionPending) {
     return <Tooltip tooltipText="Please wait until the current transaction is over">{children}</Tooltip>
@@ -25,16 +30,17 @@ type StyleOption = 'primary' | 'ghost' | 'secondary'
 
 interface TransactionButtonProps extends ButtonProps {
   style: StyleOption
+  isResponsive?: boolean
 }
 
-export const TransactionButton = (props: TransactionButtonProps) => {
+export const TransactionButton = ({ isResponsive, disabled, ...props }: TransactionButtonProps) => {
   const { isTransactionPending } = useTransactionStatus()
 
   const Button = buttonTypes[props.style]
 
   return (
-    <TransactionButtonWrapper>
-      <Button {...props} disabled={isTransactionPending || props.disabled} />
+    <TransactionButtonWrapper isResponsive={isResponsive}>
+      <Button {...props} disabled={isTransactionPending || disabled} />
     </TransactionButtonWrapper>
   )
 }
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/components/selects/components.tsx b/packages/ui/src/common/components/selects/components.tsx
index 9b1b4a135e..2da3c505b1 100644
--- a/packages/ui/src/common/components/selects/components.tsx
+++ b/packages/ui/src/common/components/selects/components.tsx
@@ -6,6 +6,7 @@ import { AccountInfoWrap } from '@/accounts/components/AccountInfo'
 import {
   Animations,
   BorderRad,
+  BreakPoints,
   Colors,
   Overflow,
   RemoveScrollbar,
@@ -25,12 +26,11 @@ interface Props {
   onClick: () => void
   disabled?: boolean
   className?: string
-  variant?: 's' | 'm' | 'l'
 }
 
-export const Option = ({ children, onClick, disabled, className, variant }: Props) => (
+export const Option = ({ children, onClick, disabled, className }: Props) => (
   <OptionComponentContainer onClick={onClick} disabled={disabled}>
-    <OptionComponent disabled={disabled} className={className} variant={variant}>
+    <OptionComponent disabled={disabled} className={className}>
       {children}
     </OptionComponent>
   </OptionComponentContainer>
@@ -174,28 +174,25 @@ export const OptionComponentContainer = styled.li<{ disabled?: boolean }>`
   }}
 `
 
-export const OptionComponent = styled.div<{ disabled?: boolean; variant?: 's' | 'm' | 'l' }>`
-  ${({ variant }) =>
-    variant === 's' || variant === 'm'
-      ? css`
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          row-gap: 8px;
-          height: 118px;
+export const OptionComponent = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 8px;
+  height: 118px;
+
+  > div {
+    width: fit-content;
+    margin-right: auto;
+  }
 
-          > div {
-            width: fit-content;
-            margin-right: auto;
-          }
-        `
-      : css`
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          grid-template-rows: 1fr;
-          height: 100%;
-          max-height: ${Sizes.selectHeight};
-        `}
+  @media (min-width: ${BreakPoints.sm}px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    height: 100%;
+    max-height: ${Sizes.selectHeight};
+  }
 
   align-items: center;
   width: 100%;
diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
index 1b130b3ace..e04888676a 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingModal.tsx
@@ -11,7 +11,7 @@ import { ColumnGapBlock } from '@/common/components/page/PageContent'
 import { HorizontalStepper } from '@/common/components/Stepper/HorizontalStepper'
 import { TextMedium } from '@/common/components/typography'
 import { WaitModal } from '@/common/components/WaitModal'
-import { Colors } from '@/common/constants'
+import { BreakPoints, Colors } from '@/common/constants'
 import { useDebounce } from '@/common/hooks/useDebounce'
 import { useMachine } from '@/common/hooks/useMachine'
 import { useModal } from '@/common/hooks/useModal'
@@ -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,10 +192,14 @@ const StepperWrapper = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 0 52px;
-  height: 80px;
+  max-width: 100vw;
+  padding: 24px 12px;
   position: relative;
   background-color: ${Colors.Black[700]};
+
+  @media (min-width: ${BreakPoints.sm}px) {
+    padding: 24px 52px;
+  }
 `
 
 const StyledModal = styled(ScrolledModal)`
diff --git a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
index 87af7aaf4d..b143b9e60b 100644
--- a/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
+++ b/packages/ui/src/common/modals/OnBoardingModal/OnBoardingPlugin.tsx
@@ -9,7 +9,7 @@ import { LinkSymbol } from '@/common/components/icons/symbols'
 import { List, ListItem } from '@/common/components/List'
 import { ScrolledModalBody } from '@/common/components/Modal'
 import { TextBig, TextExtraHuge, TextMedium, TextSmall } from '@/common/components/typography'
-import { Colors } from '@/common/constants'
+import { BreakPoints, Colors } from '@/common/constants'
 import { ConnectWalletItem } from '@/common/modals/OnBoardingModal/components/ConnectWalletItem'
 import { OnBoardingTextFooter } from '@/common/modals/OnBoardingModal/OnBoardingModal'
 
@@ -26,16 +26,16 @@ export const OnBoardingPlugin = () => {
           </TextExtraHuge>
           <TextSmall>Select which wallet you want to use to connect with.</TextSmall>
           <List>
-            <ListItem>
-              {allWallets.map((wallet) => (
+            {allWallets.map((wallet) => (
+              <ListItem key={wallet.extensionName}>
                 <ConnectWalletItem
                   key={wallet.extensionName}
                   wallet={wallet}
                   onClick={() => setSelectedWallet(wallet)}
                   selected={selectedWallet?.extensionName === wallet.extensionName}
                 />
-              ))}
-            </ListItem>
+              </ListItem>
+            ))}
           </List>
         </Wrapper>
         {walletState === 'APP_REJECTED' && (
@@ -94,15 +94,19 @@ 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 12px 24px;
   text-align: center;
 
   > *:nth-child(2) {
     color: ${Colors.Black[400]};
   }
+
+  @media (min-width: ${BreakPoints.sm}px) {
+    padding: 36px 24px 24px;
+  }
 `
 
 const StyledLink = styled(LinkPrimary)`
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/modals/SignTransactionModal/SignTransactionModal.tsx b/packages/ui/src/common/modals/SignTransactionModal/SignTransactionModal.tsx
index f51c4f86b3..f54704e583 100644
--- a/packages/ui/src/common/modals/SignTransactionModal/SignTransactionModal.tsx
+++ b/packages/ui/src/common/modals/SignTransactionModal/SignTransactionModal.tsx
@@ -16,6 +16,7 @@ import { TransactionInfo, TransactionInfoProps } from '@/common/components/Trans
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { BorderRad, Colors, Sizes } from '@/common/constants'
 import { useModal } from '@/common/hooks/useModal'
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { useSignAndSendTransaction } from '@/common/hooks/useSignAndSendTransaction'
 import { TransactionModal, TransactionModalProps } from '@/common/modals/TransactionModal'
 import { Address } from '@/common/types'
@@ -103,20 +104,23 @@ interface SignModalAccountProps {
 
 const SignModalAccount = ({ account, amountInfo = [] }: SignModalAccountProps) => {
   const { total } = useBalance(account.address) || {}
+  const { size } = useResponsive()
 
   return (
     <Wrapper>
       <AccountInfo account={account} />
-      <RowGapBlock>
-        {[...amountInfo, { name: 'Total balance', value: total }].map(({ name, value }, index) => (
-          <BalanceInfoInRow key={name + index}>
-            <InfoTitle>{name}</InfoTitle>
-            <InfoValue>
-              <TokenValue value={value} />
-            </InfoValue>
-          </BalanceInfoInRow>
-        ))}
-      </RowGapBlock>
+      {size !== 'xxs' && size !== 'xs' && (
+        <RowGapBlock>
+          {[...amountInfo, { name: 'Total balance', value: total }].map(({ name, value }, index) => (
+            <BalanceInfoInRow key={name + index}>
+              <InfoTitle>{name}</InfoTitle>
+              <InfoValue>
+                <TokenValue value={value} />
+              </InfoValue>
+            </BalanceInfoInRow>
+          ))}
+        </RowGapBlock>
+      )}
     </Wrapper>
   )
 }
diff --git a/packages/ui/src/forum/components/PostList/PostContextMenu.tsx b/packages/ui/src/forum/components/PostList/PostContextMenu.tsx
index 0159ebd2b8..159dc07ea1 100644
--- a/packages/ui/src/forum/components/PostList/PostContextMenu.tsx
+++ b/packages/ui/src/forum/components/PostList/PostContextMenu.tsx
@@ -61,5 +61,7 @@ export const PostContextMenu = ({ isFirstItem, post, onEdit, type }: Props) => {
   }
 
   const isActive = post.status === 'PostStatusActive'
-  return isOwn && isActive ? <ContextMenu title="Post actions" size="small" items={getContextMenuItems()} /> : null
+  return isOwn && isActive ? (
+    <ContextMenu title="Post actions" size="small" items={getContextMenuItems()} isResponsive />
+  ) : null
 }
diff --git a/packages/ui/src/forum/components/Thread/NewThreadPost.tsx b/packages/ui/src/forum/components/Thread/NewThreadPost.tsx
index d3a4994f0d..c7a7096ec2 100644
--- a/packages/ui/src/forum/components/Thread/NewThreadPost.tsx
+++ b/packages/ui/src/forum/components/Thread/NewThreadPost.tsx
@@ -62,6 +62,7 @@ export const NewThreadPost = React.forwardRef(
                 })
             }}
             disabled={postText === ''}
+            isResponsive
           >
             Create post
           </TransactionButton>
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/components/EditMembershipButton.tsx b/packages/ui/src/memberships/components/EditMembershipButton.tsx
index 8ffd6f7f9e..999c7dbecd 100644
--- a/packages/ui/src/memberships/components/EditMembershipButton.tsx
+++ b/packages/ui/src/memberships/components/EditMembershipButton.tsx
@@ -36,6 +36,7 @@ export const EditMembershipButton = ({ className, children, member }: Props) =>
       className={className}
       square
       disabled={isTransactionPending || !memberWithDetails}
+      isResponsive
     >
       {children}
     </TransactionButton>
diff --git a/packages/ui/src/memberships/components/InviteMemberButton.tsx b/packages/ui/src/memberships/components/InviteMemberButton.tsx
index 36619230a7..7f6f7cdb14 100644
--- a/packages/ui/src/memberships/components/InviteMemberButton.tsx
+++ b/packages/ui/src/memberships/components/InviteMemberButton.tsx
@@ -26,6 +26,7 @@ export const InviteMemberButton = ({ className, children, size }: InviteMemberBu
         onClick={openModal}
         className={className}
         disabled={isTransactionPending}
+        isResponsive
       >
         {children}
       </TransactionButton>
diff --git a/packages/ui/src/memberships/components/SocialMediaSelector.tsx b/packages/ui/src/memberships/components/SocialMediaSelector.tsx
index da9a66213f..0399e8e9c8 100644
--- a/packages/ui/src/memberships/components/SocialMediaSelector.tsx
+++ b/packages/ui/src/memberships/components/SocialMediaSelector.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import styled from 'styled-components'
 
 import { InputComponent, InputText } from '@/common/components/forms'
 import { TextBig, TextMedium } from '@/common/components/typography'
@@ -8,6 +7,8 @@ import { capitalizeFirstLetter } from '@/common/helpers'
 import { socialMediaList, SocialMediaTile, Socials } from '@/memberships/components/SocialMediaTile/SocialMediaTile'
 import { MemberFormFields } from '@/memberships/modals/BuyMembershipModal/BuyMembershipFormModal'
 
+import { SocialMediaInput, SocialMediaSelectorList } from './SocialMediaSelector/SocialMediaSelector'
+
 const socialToPlaceholder: Record<Socials, string> = {
   HYPERLINK: 'Enter URL',
   WECHAT: 'Enter Username',
@@ -51,7 +52,7 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
       <TextBig bold>Social Profiles</TextBig>
       <TextMedium>This will help us to contact you</TextMedium>
 
-      <div>
+      <SocialMediaSelectorList>
         {socialMediaList.map((social, index) => {
           const isActive = chosenSocial.some((chosen) => chosen === social)
           return (
@@ -64,7 +65,7 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
             />
           )
         })}
-      </div>
+      </SocialMediaSelectorList>
       {chosenSocial.map((social, index) => (
         <InputComponent
           key={'social-input' + index}
@@ -82,14 +83,3 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
     </SocialMediaInput>
   )
 }
-
-const SocialMediaInput = styled.div`
-  display: grid;
-  gap: 10px;
-
-  > :nth-child(3) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-`
diff --git a/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx b/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
index 7f30a82a61..e03e8a0765 100644
--- a/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
+++ b/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
@@ -61,7 +61,7 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
       <TextBig bold>Social Profiles</TextBig>
       <TextMedium>This will help us to contact you</TextMedium>
 
-      <div>
+      <SocialMediaSelectorList>
         {socialMediaList.map((social, index) => {
           const isActive = chosenSocial.some((chosen) => chosen === social)
           return (
@@ -74,7 +74,7 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
             />
           )
         })}
-      </div>
+      </SocialMediaSelectorList>
       {chosenSocial.map((social, index) => (
         <InputComponent
           key={'social' + index}
@@ -94,13 +94,13 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
   )
 }
 
-const SocialMediaInput = styled.div`
+export const SocialMediaInput = styled.div`
   display: grid;
   gap: 10px;
+`
 
-  > :nth-child(3) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
+export const SocialMediaSelectorList = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 10px;
 `
diff --git a/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx b/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
index 78b32e2cc0..294029b78f 100644
--- a/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
+++ b/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
@@ -74,7 +74,6 @@ const Wrapper = styled.div<{ active?: boolean }>`
   user-select: none;
   place-items: center;
   height: 92px;
-  width: 120px;
   border: 1px solid ${Colors.Black[300]};
   border-radius: ${BorderRad.m};
   text-align: center;
diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
index 488f7ecf7b..0b1143fdd4 100644
--- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
+++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
@@ -60,7 +60,7 @@ interface BuyMembershipFormModalProps {
   membershipPrice?: BalanceOf
 }
 
-interface BuyMembershipFormProps extends Omit<BuyMembershipFormModalProps, 'onClose'> {
+export interface BuyMembershipFormProps extends Omit<BuyMembershipFormModalProps, 'onClose'> {
   type: 'onBoarding' | 'general'
   membershipAccount?: string
   changeMembershipAccount?: () => void
@@ -271,14 +271,9 @@ export const BuyMembershipForm = ({
           </ScrolledModalContainer>
         </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 })}
         >
@@ -293,7 +288,7 @@ export const BuyMembershipForm = ({
             </LabelLink>
             .
           </TextMedium>
-        </Checkbox>
+        </StyledCheckbox>
         {type === 'general' && (
           <TransactionInfoContainer>
             <TransactionInfo
@@ -305,10 +300,17 @@ export const BuyMembershipForm = ({
             />
           </TransactionInfoContainer>
         )}
+
+        {type === 'onBoarding' && (
+          <ButtonGhost onClick={changeMembershipAccount} size="medium">
+            <Arrow direction="left" />
+            Change account
+          </ButtonGhost>
+        )}
         <ButtonPrimary size="medium" onClick={submit} disabled={isDisabled}>
           {isUploading ? <Loading text="Uploading avatar" /> : 'Create a Membership'}
         </ButtonPrimary>
-      </StyledFooter>
+      </ModalFooter>
     </>
   )
 }
@@ -322,8 +324,7 @@ 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;
+  margin-right: auto;
 `
diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.stories.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.stories.tsx
index 3106893ab1..25badac2f8 100644
--- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.stories.tsx
+++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.stories.tsx
@@ -1,23 +1,39 @@
-import { Meta, Story } from '@storybook/react'
-import React from 'react'
-import { MemoryRouter } from 'react-router-dom'
+import React, { Meta, StoryFn } from '@storybook/react'
 
-import { BuyMembershipModal } from '@/memberships/modals/BuyMembershipModal/BuyMembershipModal'
-import { MockApolloProvider } from '@/mocks/components/storybook/MockApolloProvider'
+import { ModalHeader, ScrolledModal } from '@/common/components/Modal'
+import { joy } from '@/mocks/helpers'
+import { asChainData } from '@/mocks/helpers/asChainData'
+
+import { BuyMembershipForm, BuyMembershipFormProps } from './BuyMembershipFormModal'
 
 export default {
   title: 'Member/Modals/BuyMembershipModal',
-  component: BuyMembershipModal,
+  component: BuyMembershipForm,
+
+  argTypes: {
+    type: {
+      options: ['onBoarding', 'general'],
+      control: { type: 'radio' },
+    },
+    onClose: { action: 'Close modal' },
+  },
+
+  args: {
+    type: 'general',
+    membershipPrice: 16.6666666666,
+  },
 } as Meta
 
-const Template: Story = () => {
+export const Default: StoryFn = ({ onClose, ...args }) => {
+  const props = {
+    ...args,
+    membershipPrice: asChainData(joy(args.membershipPrice)),
+  } as BuyMembershipFormProps
+
   return (
-    <MemoryRouter>
-      <MockApolloProvider members>
-        <BuyMembershipModal />
-      </MockApolloProvider>
-    </MemoryRouter>
+    <ScrolledModal modalSize="m" modalHeight="m" onClose={onClose}>
+      <ModalHeader onClick={onClose} title="Add membership" />
+      <BuyMembershipForm {...props} />
+    </ScrolledModal>
   )
 }
-
-export const Default = Template.bind({})
diff --git a/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx b/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
index 9421501433..2ac15a355f 100644
--- a/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
+++ b/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmaiSubscriptionFormModal.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
-import styled from 'styled-components'
 import * as Yup from 'yup'
 
 import { ButtonGhost } from '@/common/components/buttons'
@@ -61,21 +60,18 @@ export const EmailSubscriptionFormModal = ({ onClose, onSubmit }: Props) => {
           </Info>
         </Row>
       </ModalBody>
-      <StyledFooter
+      <ModalTransactionFooter
         next={{
           disabled: isValid,
           label: 'Sign and Authorize Email',
           onClick: onSubmitClick,
         }}
-      >
-        <ButtonGhost size="medium" onClick={onClose}>
-          Not now
-        </ButtonGhost>
-      </StyledFooter>
+        extraButtons={
+          <ButtonGhost size="medium" onClick={onClose}>
+            Not now
+          </ButtonGhost>
+        }
+      />
     </Modal>
   )
 }
-
-const StyledFooter = styled(ModalTransactionFooter)`
-  grid-column-gap: 0;
-`
diff --git a/packages/ui/src/mocks/providers/accounts.tsx b/packages/ui/src/mocks/providers/accounts.tsx
index f8578a4295..65919f2f13 100644
--- a/packages/ui/src/mocks/providers/accounts.tsx
+++ b/packages/ui/src/mocks/providers/accounts.tsx
@@ -42,7 +42,7 @@ type Balances =
       vestingLocked?: Balance
     }
 
-type AccountMock = {
+export type AccountMock = {
   balances?: Balances
   account?: { name: string; address: string }
   member?: Membership
diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx
index 7713fde320..00057bef7f 100644
--- a/packages/ui/src/proposals/components/AddProposalButton.tsx
+++ b/packages/ui/src/proposals/components/AddProposalButton.tsx
@@ -5,7 +5,6 @@ import { TransactionButton } from '@/common/components/buttons/TransactionButton
 import { PlusIcon } from '@/common/components/icons/PlusIcon'
 import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
 import { useModal } from '@/common/hooks/useModal'
-import { useResponsive } from '@/common/hooks/useResponsive'
 import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal'
 
 export const AddProposalButton = () => {
@@ -24,10 +23,6 @@ export const AddProposalButton = () => {
   )
   const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals)
 
-  const { size } = useResponsive()
-
-  if (size === 'xxs' || size === 'xs') return null
-
   return (
     <TransactionButton
       style="primary"
diff --git a/packages/ui/src/proposals/components/ProposalDetails/renderers/DestinationsPreview.tsx b/packages/ui/src/proposals/components/ProposalDetails/renderers/DestinationsPreview.tsx
index a22220cc6b..a2d97a913d 100644
--- a/packages/ui/src/proposals/components/ProposalDetails/renderers/DestinationsPreview.tsx
+++ b/packages/ui/src/proposals/components/ProposalDetails/renderers/DestinationsPreview.tsx
@@ -18,7 +18,7 @@ import {
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { SidePaneGlass, SidePaneTitle, SidePanelTop } from '@/common/components/SidePane'
 import { StatisticButton } from '@/common/components/statistics/StatisticButton'
-import { TransactionFee } from '@/common/components/TransactionFee'
+import { TransactionInfo } from '@/common/components/TransactionInfo'
 import { TextInlineBig, TokenValue } from '@/common/components/typography'
 import {
   CustomAccountRow,
@@ -91,7 +91,7 @@ export const DestinationsPreview = ({ label, value }: Props) => {
             </PreviewPanelBody>
             <ModalFooter>
               <TransactionInfoContainer>
-                <TransactionFee title={'Total amount'} value={totalAmount} />
+                <TransactionInfo title={'Total amount'} value={totalAmount} />
               </TransactionInfoContainer>
             </ModalFooter>
           </PreviewPanel>
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx b/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
index 51cdb89900..69beb78b9d 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/AddNewProposalModal.tsx
@@ -366,13 +366,14 @@ export const AddNewProposalModal = () => {
           label: isLastStepActive(getSteps(service)) ? 'Create proposal' : 'Next step',
           onClick: () => send('NEXT'),
         }}
-      >
-        {isExecutionError && (
-          <Checkbox isRequired onChange={setWarningAccepted} id="execution-requirement">
-            I understand the implications of overriding the execution constraints validation.
-          </Checkbox>
-        )}
-      </ModalTransactionFooter>
+        extraLeftButtons={
+          isExecutionError && (
+            <Checkbox isRequired onChange={setWarningAccepted} id="execution-requirement">
+              I understand the implications of overriding the execution constraints validation.
+            </Checkbox>
+          )
+        }
+      />
     </Modal>
   )
 }
diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate/PreviewAndValidateModal.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate/PreviewAndValidateModal.tsx
index 2398af8fdc..b5d5ca99b5 100644
--- a/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate/PreviewAndValidateModal.tsx
+++ b/packages/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/modals/PreviewAndValidate/PreviewAndValidateModal.tsx
@@ -29,7 +29,7 @@ import {
   SidePanelTop,
   SidePaneTitle,
 } from '@/common/components/SidePane'
-import { TransactionFee } from '@/common/components/TransactionFee'
+import { TransactionInfo } from '@/common/components/TransactionInfo'
 import { TokenValue } from '@/common/components/typography'
 import { Colors } from '@/common/constants'
 import { useKeyring } from '@/common/hooks/useKeyring'
@@ -167,7 +167,7 @@ export const PreviewAndValidateModal = ({ onClose }: PreviewAndValidateModalProp
         </PreviewPanelBody>
         <ModalFooter>
           <TransactionInfoContainer>
-            <TransactionFee title={'Total amount'} value={totalAmount} />
+            <TransactionInfo title={'Total amount'} value={totalAmount} />
           </TransactionInfoContainer>
         </ModalFooter>
       </PreviewPanel>
diff --git a/packages/ui/test/accounts/modal/TransferModal.test.tsx b/packages/ui/test/accounts/modal/TransferModal.test.tsx
index afdcfa2da2..90f0adae16 100644
--- a/packages/ui/test/accounts/modal/TransferModal.test.tsx
+++ b/packages/ui/test/accounts/modal/TransferModal.test.tsx
@@ -115,7 +115,7 @@ describe('UI: TransferModal', () => {
     renderModal({ from: alice, to: bob })
 
     expect(await getButton('Transfer tokens')).toBeDisabled()
-    await fillAmount(1)
+    await fillAmount(100)
 
     const button = await getButton(/transfer tokens/i)
     expect(button).not.toBeDisabled()
@@ -124,7 +124,7 @@ describe('UI: TransferModal', () => {
 
     expect(await screen.findByText(/modals.authorizeTransaction.title/i)).toBeDefined()
     expect((await screen.findByText(/modals.transactionFee.label/i))?.parentNode?.textContent).toMatch(
-      /^modals.transactionFee.label25/
+      /^Amount:100modals.transactionFee.label25/
     )
   })