From cb9a004b311731a0cc541b5bfa6d6eeff27ba8dc Mon Sep 17 00:00:00 2001
From: sl <seangeekpro@gmail.com>
Date: Thu, 25 Jun 2026 17:09:38 +0200
Subject: [PATCH] frontend: use mobile header for back navigation on mobile

changed the previously used Back button on page body, to be
the chevron back on mobile header.
---
 .../src/components/backbutton/backbutton.tsx  |  9 ++++
 frontends/web/src/components/view/view.tsx    |  4 +-
 .../src/routes/account/add/add-account.tsx    | 15 +++++--
 .../src/routes/account/receive/receive.tsx    | 15 +++++--
 .../web/src/routes/account/send/send.tsx      | 14 ++++--
 .../components/connect-form/connect-form.tsx  |  6 +--
 .../routes/account/walletconnect/connect.tsx  | 11 ++++-
 .../web/src/routes/device/bitbox02/bip85.tsx  | 45 +++++++++++++++----
 .../src/routes/device/bitbox02/passphrase.tsx | 27 ++++++++---
 .../routes/device/bitbox02/recovery-words.tsx | 20 +++++----
 .../routes/device/bitbox02/sdcardcheck.tsx    |  6 +--
 .../routes/device/bitbox02/setup/choose.tsx   | 23 ++++++----
 .../src/routes/device/bitbox02/setup/name.tsx | 12 +++--
 .../routes/device/bitbox02/setup/restore.tsx  | 12 +++--
 .../device/manage-backups/manage-backups.tsx  | 18 +++++---
 .../web/src/routes/market/swap/swap.test.tsx  |  1 +
 frontends/web/src/routes/market/swap/swap.tsx | 24 +++++-----
 .../components/mobile-header.module.css       | 20 ++++++---
 .../settings/components/mobile-header.tsx     | 38 +++++++++++-----
 .../web/src/routes/settings/electrum.tsx      | 15 +++++--
 .../src/routes/settings/mobile-settings.tsx   |  5 +++
 21 files changed, 246 insertions(+), 94 deletions(-)

diff --git a/frontends/web/src/components/backbutton/backbutton.tsx b/frontends/web/src/components/backbutton/backbutton.tsx
index faae24aecb..0a0c240160 100644
--- a/frontends/web/src/components/backbutton/backbutton.tsx
+++ b/frontends/web/src/components/backbutton/backbutton.tsx
@@ -4,6 +4,7 @@ import { ReactNode, useCallback } from 'react';
 import { useEsc } from '@/hooks/keyboard';
 import { Button } from '@/components/forms/button';
 import { useBackButton } from '@/hooks/backbutton';
+import { useMediaQuery } from '@/hooks/mediaquery';
 import { useBackNavigation } from '@/contexts/BackNavigationContext';
 
 type TBackButton = {
@@ -54,3 +55,11 @@ export const BackButton = ({
     </Button>
   );
 };
+
+export const DesktopBackButton = (props: TBackButton) => {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  if (isMobile) {
+    return null;
+  }
+  return <BackButton {...props} />;
+};
diff --git a/frontends/web/src/components/view/view.tsx b/frontends/web/src/components/view/view.tsx
index 8a2744be25..9f3a41c95d 100644
--- a/frontends/web/src/components/view/view.tsx
+++ b/frontends/web/src/components/view/view.tsx
@@ -154,6 +154,7 @@ type THeaderProps = {
   title?: ReactNode;
   withAppLogo?: boolean;
   children?: ReactNode;
+  className?: string;
 };
 
 /**
@@ -167,6 +168,7 @@ export const ViewHeader = ({
   small,
   title,
   withAppLogo,
+  className = ''
 }: THeaderProps) => {
   const { isDarkMode } = useDarkmode();
   const headerStyles = small ? `
@@ -174,7 +176,7 @@ export const ViewHeader = ({
     ${style.smallHeader || ''}
   ` : style.header;
   return (
-    <header className={headerStyles}>
+    <header className={`${headerStyles || ''} ${className || ''}`}>
       {withAppLogo && (
         isDarkMode ? <AppLogoInverted /> : <AppLogo />
       )}
diff --git a/frontends/web/src/routes/account/add/add-account.tsx b/frontends/web/src/routes/account/add/add-account.tsx
index b0edac9b4b..380a182002 100644
--- a/frontends/web/src/routes/account/add/add-account.tsx
+++ b/frontends/web/src/routes/account/add/add-account.tsx
@@ -16,7 +16,8 @@ import { CoinDropDown } from '@/components/dropdown/coin-dropdown';
 import { SubTitle } from '@/components/title';
 import { useMediaQuery } from '@/hooks/mediaquery';
 import { UseBackButton } from '@/hooks/backbutton';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { AddAccountGuide } from './add-account-guide';
 import { Skeleton } from '@/components/skeleton/skeleton';
 import styles from './add-account.module.css';
@@ -241,7 +242,13 @@ export const AddAccount = ({ accounts }: TAddAccountProps) => {
     <Main>
       <GuideWrapper>
         <GuidedContent>
-          <Header title={<h2>{t('manageAccounts.title')}</h2>} />
+          <Header
+            title={
+              <>
+                <h2 className="hide-on-small">{t('manageAccounts.title')}</h2>
+                <MobileHeader onClick={back} withGuide title={t('manageAccounts.title')} />
+              </>
+            } />
           <View
             fitContent
             textCenter
@@ -309,11 +316,11 @@ export const AddAccount = ({ accounts }: TAddAccountProps) => {
                     {t('addAccount.success.addAnotherAccount')}
                   </Button>
                 ) : (
-                  <BackButton
+                  <DesktopBackButton
                     onClick={back}
                   >
                     {t('button.back')}
-                  </BackButton>
+                  </DesktopBackButton>
                 )}
               </ViewButtons>
             </form>
diff --git a/frontends/web/src/routes/account/receive/receive.tsx b/frontends/web/src/routes/account/receive/receive.tsx
index 63a64181a6..04ba046df6 100644
--- a/frontends/web/src/routes/account/receive/receive.tsx
+++ b/frontends/web/src/routes/account/receive/receive.tsx
@@ -12,13 +12,14 @@ import { getScriptName, isEthereumBased } from '@/routes/account/utils';
 import { CopyableInput } from '@/components/copy/Copy';
 import { Dialog, DialogButtons, DialogScrollContent } from '@/components/dialog/dialog';
 import { Button, Radio } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { Message } from '@/components/message/message';
 import { ReceiveGuide } from './components/guide';
 import { Header } from '@/components/layout';
 import { QRCode } from '@/components/qrcode/qrcode';
 import { ArrowCirlceLeft, ArrowCirlceLeftActive, ArrowCirlceRight, ArrowCirlceRightActive } from '@/components/icon';
 import { connectKeystore } from '@/api/keystores';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import style from './receive.module.css';
 
 type TProps = {
@@ -250,7 +251,13 @@ export const Receive = ({
     <div className="contentWithGuide">
       <div className="container">
         <div className="innerContainer scrollableContainer">
-          <Header title={<h2>{t('receive.title', { accountName: account?.coinName })}</h2>} />
+          <Header
+            title={
+              <>
+                <h2 className="hide-on-small">{t('receive.title', { accountName: account?.coinName })}</h2>
+                <MobileHeader withGuide title={t('receive.title', { accountName: account?.coinName })} />
+              </>
+            } />
           <div className="content narrow isVerticallyCentered">
             <div className="box large text-center">
               { currentAddresses && (
@@ -315,9 +322,9 @@ export const Receive = ({
                       primary>
                       {t('receive.verifyBitBox02')}
                     </Button>
-                    <BackButton enableEsc={!addressTypeDialog && !verifying}>
+                    <DesktopBackButton enableEsc={!addressTypeDialog && !verifying}>
                       {t('button.back')}
-                    </BackButton>
+                    </DesktopBackButton>
                   </div>
                   { verifying && (
                     <div className={style.hide}></div>
diff --git a/frontends/web/src/routes/account/send/send.tsx b/frontends/web/src/routes/account/send/send.tsx
index d26b57b7b2..6ed998f5b0 100644
--- a/frontends/web/src/routes/account/send/send.tsx
+++ b/frontends/web/src/routes/account/send/send.tsx
@@ -13,9 +13,10 @@ import { alertUser } from '@/components/alert/Alert';
 import { Balance } from '@/components/balance/balance';
 import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbutton';
 import { Button } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { Column, ColumnButtons, GuideWrapper, GuidedContent, Header, Main, ResponsiveGrid } from '@/components/layout';
 import { AmountWithUnit } from '@/components/amount/amount-with-unit';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { FeeTargets } from './feetargets';
 import { isBitcoinBased, isBitcoinOnly } from '@/routes/account/utils';
 import { ConfirmSend } from './components/confirm/confirm';
@@ -420,7 +421,12 @@ export const Send = ({
       <GuidedContent>
         <Main>
           <Header
-            title={<h2>{t('send.title', { accountName: account.coinName })}</h2>}
+            title={
+              <>
+                <h2 className="hide-on-small">{t('send.title', { accountName: account.coinName })}</h2>
+                <MobileHeader withGuide title={t('send.title', { accountName: account.coinName })} />
+              </>
+            }
           >
             <HideAmountsButton />
           </Header>
@@ -500,11 +506,11 @@ export const Send = ({
                       disabled={!getValidTxInputData() || !valid || isUpdatingProposal}>
                       {t('send.button')}
                     </Button>
-                    <BackButton
+                    <DesktopBackButton
                       enableEsc={!isConfirming && !utxoDialogActive}
                     >
                       {t('button.back')}
-                    </BackButton>
+                    </DesktopBackButton>
                   </ColumnButtons>
                 </Column>
               </ResponsiveGrid>
diff --git a/frontends/web/src/routes/account/walletconnect/components/connect-form/connect-form.tsx b/frontends/web/src/routes/account/walletconnect/components/connect-form/connect-form.tsx
index 3267e697e6..854d1f9092 100644
--- a/frontends/web/src/routes/account/walletconnect/components/connect-form/connect-form.tsx
+++ b/frontends/web/src/routes/account/walletconnect/components/connect-form/connect-form.tsx
@@ -3,7 +3,7 @@
 import { SetStateAction, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { useMediaQuery } from '@/hooks/mediaquery';
 import { ScanQRButton } from '@/routes/account/send/components/inputs/receiver-address-input';
 import { ScanQRDialog } from '@/routes/account/send/components/dialogs/scan-qr-dialog';
@@ -76,9 +76,9 @@ export const WCConnectForm = ({
           />
         )}
         <div className={styles.formButtonsContainer}>
-          <BackButton disabled={connectLoading}>
+          <DesktopBackButton disabled={connectLoading}>
             {t('dialog.cancel')}
-          </BackButton>
+          </DesktopBackButton>
           <Button
             disabled={connectLoading || !uri}
             type="submit"
diff --git a/frontends/web/src/routes/account/walletconnect/connect.tsx b/frontends/web/src/routes/account/walletconnect/connect.tsx
index 882046090a..ea0a36095f 100644
--- a/frontends/web/src/routes/account/walletconnect/connect.tsx
+++ b/frontends/web/src/routes/account/walletconnect/connect.tsx
@@ -11,6 +11,7 @@ import { TConnectStatus } from './types';
 import { GuideWrapper, GuidedContent, Header, Main } from '@/components/layout';
 import { alertUser } from '@/components/alert/Alert';
 import { View, ViewContent, ViewHeader } from '@/components/view/view';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { WCHeader } from './components/header/header';
 import { WCConnectForm } from './components/connect-form/connect-form';
 import { WCIncomingPairing } from './components/incoming-pairing/incoming-pairing';
@@ -92,7 +93,15 @@ export const ConnectScreenWalletConnect = ({
     <GuideWrapper>
       <GuidedContent>
         <Main>
-          <Header />
+          <Header
+            title={
+              status === 'connect' ? (
+                <MobileHeader
+                  variant={loading ? 'titleOnly' : 'back'}
+                  withGuide
+                  title={t('walletConnect.walletConnect')} />
+              ) : undefined
+            } />
           <View
             fitContent
             verticallyCentered
diff --git a/frontends/web/src/routes/device/bitbox02/bip85.tsx b/frontends/web/src/routes/device/bitbox02/bip85.tsx
index 17c50cfb3b..a1aba5f415 100644
--- a/frontends/web/src/routes/device/bitbox02/bip85.tsx
+++ b/frontends/web/src/routes/device/bitbox02/bip85.tsx
@@ -11,8 +11,10 @@ import { SimpleMarkup } from '@/utils/markup';
 import { A } from '@/components/anchor/anchor';
 import { Column, ResponsiveGrid } from '@/components/layout';
 import { useDarkmode } from '@/hooks/darkmode';
+import { useMediaQuery } from '@/hooks/mediaquery';
 import { UseDisableBackButton } from '@/hooks/backbutton';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import bip85Graphic from './assets/bip85-graphic.svg';
 import bip85GraphicLight from './assets/bip85-graphic-light.svg';
 
@@ -28,8 +30,10 @@ export const Bip85 = ({
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { isDarkMode } = useDarkmode();
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const [status, setStatus] = useState<Status>('info-what');
   const [disclaimer, setDisclaimer] = useState(false);
+  const handleClose = () => navigate(-1);
 
   switch (status) {
   case 'info-what':
@@ -37,7 +41,12 @@ export const Bip85 = ({
       <View
         key="bip85-info-what"
         fullscreen
+        onClose={isMobile ? undefined : handleClose}
         verticallyCentered>
+        <MobileHeader
+          title={t('deviceSettings.expert.bip85.title')}
+          withViewPadding
+        />
         <ViewHeader small title={t('deviceSettings.expert.bip85.what.title')} />
         <ViewContent minHeight="280px">
           <ResponsiveGrid>
@@ -68,9 +77,9 @@ export const Bip85 = ({
             onClick={() => setStatus('info-how')}>
             {t('button.continue')}
           </Button>
-          <BackButton>
+          <DesktopBackButton>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </ViewButtons>
       </View>
     );
@@ -79,7 +88,13 @@ export const Bip85 = ({
       <View
         key="bip85-info-how"
         fullscreen
+        onClose={isMobile ? undefined : handleClose}
         verticallyCentered>
+        <MobileHeader
+          onClick={() => setStatus('info-what')}
+          title={t('deviceSettings.expert.bip85.title')}
+          withViewPadding
+        />
         <ViewHeader title={t('deviceSettings.expert.bip85.how.title')} />
         <ViewContent minHeight="280px">
           <SimpleMarkup
@@ -92,10 +107,10 @@ export const Bip85 = ({
             onClick={() => setStatus('info-recover')}>
             {t('button.continue')}
           </Button>
-          <BackButton
+          <DesktopBackButton
             onClick={() => setStatus('info-what')}>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </ViewButtons>
       </View>
     );
@@ -104,7 +119,13 @@ export const Bip85 = ({
       <View
         key="bip85-info-recover"
         fullscreen
+        onClose={isMobile ? undefined : handleClose}
         verticallyCentered>
+        <MobileHeader
+          onClick={() => setStatus('info-how')}
+          title={t('deviceSettings.expert.bip85.title')}
+          withViewPadding
+        />
         <ViewHeader title={t('deviceSettings.expert.bip85.recover.title')} />
         <ViewContent minHeight="280px">
           <SimpleMarkup
@@ -120,10 +141,10 @@ export const Bip85 = ({
             }}>
             {t('button.continue')}
           </Button>
-          <BackButton
+          <DesktopBackButton
             onClick={() => setStatus('info-how')}>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </ViewButtons>
       </View>
     );
@@ -132,7 +153,13 @@ export const Bip85 = ({
       <View
         key="bip85-info-security"
         fullscreen
+        onClose={isMobile ? undefined : handleClose}
         verticallyCentered>
+        <MobileHeader
+          onClick={() => setStatus('info-recover')}
+          title={t('deviceSettings.expert.bip85.title')}
+          withViewPadding
+        />
         <ViewHeader title={t('deviceSettings.expert.bip85.security.title')} />
         <ViewContent minHeight="280px">
           <p>
@@ -156,10 +183,10 @@ export const Bip85 = ({
             }}>
             {t('button.proceedOnBitBox')}
           </Button>
-          <BackButton
+          <DesktopBackButton
             onClick={() => setStatus('info-recover')}>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </ViewButtons>
       </View>
     );
diff --git a/frontends/web/src/routes/device/bitbox02/passphrase.tsx b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
index c009eb6a91..e4e77317d4 100644
--- a/frontends/web/src/routes/device/bitbox02/passphrase.tsx
+++ b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
@@ -12,7 +12,9 @@ import { alertUser } from '@/components/alert/Alert';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
 import { PointToBitBox02 } from '@/components/icon';
 import { Message } from '@/components/message/message';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
+import { useMediaQuery } from '@/hooks/mediaquery';
 
 // The enable wizard has five steps that can be navigated by clicking
 // 'back' or 'continue'. On the last step the passphrase will be enabled.
@@ -147,6 +149,7 @@ type TInfoProps = {
 
 const EnableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
   const { t } = useTranslation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const [infoStep, setInfoStep] = useState(0);
   const [understood, setUnderstood] = useState(false);
@@ -187,9 +190,14 @@ const EnableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
       key={`step-${infoStep}`}
       fullscreen
       minHeight={CONTENT_MIN_HEIGHT}
-      onClose={handleAbort}
+      onClose={isMobile ? undefined : handleAbort}
       verticallyCentered
     >
+      <MobileHeader
+        onClick={handleBack}
+        title={t('deviceSettings.expert.passphrase.title')}
+        withViewPadding
+      />
       <ViewHeader title={step.titleKey} />
       {infoStep < FINAL_INFO_STEP && (
         <ViewContent>
@@ -218,9 +226,9 @@ const EnableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
         <Button primary onClick={handleContinue} disabled={infoStep >= FINAL_INFO_STEP && !understood}>
           {step.buttonTextKey}
         </Button>
-        <BackButton onClick={handleBack}>
+        <DesktopBackButton onClick={handleBack}>
           {t('button.back')}
-        </BackButton>
+        </DesktopBackButton>
       </ViewButtons>
     </View>
   );
@@ -228,14 +236,19 @@ const EnableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
 
 const DisableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
   const { t } = useTranslation();
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   return (
     <View
       key="step-disable-info1"
       fullscreen
       minHeight={CONTENT_MIN_HEIGHT}
-      onClose={handleAbort}
+      onClose={isMobile ? undefined : handleAbort}
       verticallyCentered>
+      <MobileHeader
+        onClick={handleAbort}
+        title={t('deviceSettings.expert.passphrase.title')}
+        withViewPadding />
       <ViewHeader title={t('passphrase.disable')} />
       <ViewContent>
         <MultilineMarkup tagName="p" markup={t('passphrase.disableInfo.message')} />
@@ -244,9 +257,9 @@ const DisableInfo = ({ handleAbort, setPassphrase }: TInfoProps) => {
         <Button primary onClick={() => setPassphrase(false)}>
           {t('passphrase.disableInfo.button')}
         </Button>
-        <BackButton onClick={handleAbort}>
+        <DesktopBackButton onClick={handleAbort}>
           {t('button.back')}
-        </BackButton>
+        </DesktopBackButton>
       </ViewButtons>
     </View>
   );
diff --git a/frontends/web/src/routes/device/bitbox02/recovery-words.tsx b/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
index a257466de1..65a19a7c42 100644
--- a/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
+++ b/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
@@ -5,12 +5,14 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { showMnemonic } from '@/api/bitbox02';
 import { MultilineMarkup, SimpleMarkup } from '@/utils/markup';
-import { UseBackButton, UseDisableBackButton } from '@/hooks/backbutton';
+import { UseDisableBackButton } from '@/hooks/backbutton';
 import { Main } from '@/components/layout';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
 import { Button, Checkbox } from '@/components/forms';
 import { PointToBitBox02 } from '@/components/icon';
 import { Message } from '@/components/message/message';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
+import { useMediaQuery } from '@/hooks/mediaquery';
 
 const CONTENT_MIN_HEIGHT = 'min(56rem, 100vh)';
 
@@ -26,6 +28,7 @@ export const RecoveryWords = ({ deviceID }: TProps) => {
 
   const [status, setStatus] = useState<TStatus>('info');
   const [agree, setAgree] = useState<boolean>(false);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   const confirmShowWords = async () => {
     setStatus('progress');
@@ -69,13 +72,14 @@ export const RecoveryWords = ({ deviceID }: TProps) => {
       fullscreen
       minHeight={CONTENT_MIN_HEIGHT}
       verticallyCentered>
-      <UseBackButton handler={() => {
-        handleAbort();
-        return false;
-      }} />
-      <ViewHeader small title={t('backup.showMnemonic.title')} />
+      <MobileHeader
+        onClick={handleAbort}
+        title={t('backup.showMnemonic.title')}
+        withViewPadding
+      />
+      <ViewHeader className="hide-on-small" small title={t('backup.showMnemonic.title')} />
       <ViewContent>
-        <Message type="warning">
+        <Message className={isMobile ? 'm-top-default' : ''} type="warning">
           <SimpleMarkup tagName="span" markup={t('backup.showMnemonic.warning')}/>
         </Message>
         <p>
@@ -95,7 +99,7 @@ export const RecoveryWords = ({ deviceID }: TProps) => {
         <Button disabled={!agree} primary onClick={confirmShowWords}>
           {t('button.next')}
         </Button>
-        <Button secondary onClick={handleAbort}>
+        <Button className="hide-on-small" secondary onClick={handleAbort}>
           {t('dialog.cancel')}
         </Button>
       </ViewButtons>
diff --git a/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx b/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx
index b4b53f6fda..29a549e6cf 100644
--- a/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx
+++ b/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx
@@ -6,7 +6,7 @@ import { checkSDCard } from '@/api/bitbox02';
 import { Button } from '@/components/forms';
 import { PointToBitBox02 } from '@/components/icon';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { HorizontallyCenteredSpinner } from '@/components/spinner/SpinnerAnimation';
 
 type TProps = {
@@ -44,9 +44,9 @@ const SDCardCheck = ({ deviceID, children }: TProps) => {
               onClick={check}>
               {t('button.ok')}
             </Button>
-            <BackButton enableEsc>
+            <DesktopBackButton enableEsc>
               {t('button.back')}
-            </BackButton>
+            </DesktopBackButton>
           </ViewButtons>
         </View>
       ) : children}
diff --git a/frontends/web/src/routes/device/bitbox02/setup/choose.tsx b/frontends/web/src/routes/device/bitbox02/setup/choose.tsx
index a579ac435b..3e51d88e8c 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/choose.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/choose.tsx
@@ -9,7 +9,8 @@ import { Column, ColumnButtons, Grid, ResponsiveGrid } from '@/components/layout
 import { Button, Label } from '@/components/forms';
 import { Toggle } from '@/components/toggle/toggle';
 import { InfoBlue } from '@/components/icon';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import style from './choose.module.css';
 
 export type TWalletSetupChoices = 'create-wallet' | 'restore-sdcard' | 'restore-mnemonic';
@@ -36,6 +37,11 @@ export const SetupOptions = ({
   const [advanced, setAdvanced] = useState(false);
   const [withMnemonic, setWithMnemonic] = useState(false);
   const [with12Words, setWith12Words] = useState(false);
+  const handleAdvancedBack = () => {
+    setWithMnemonic(false);
+    setWith12Words(false);
+    setAdvanced(false);
+  };
 
   if (advanced) {
     const {
@@ -49,6 +55,11 @@ export const SetupOptions = ({
         verticallyCentered
         withBottomBar
         width="1100px">
+        <MobileHeader
+          onClick={handleAdvancedBack}
+          title={t('bitbox02Wizard.stepUninitialized.title')}
+          withViewPadding
+        />
         <ViewHeader small title={t('seed.create')} />
         <ViewContent>
           <Grid col="1" textAlign="start">
@@ -134,15 +145,11 @@ export const SetupOptions = ({
                   primary>
                   {t('seed.create')}
                 </Button>
-                <BackButton
-                  onClick={() => {
-                    setWithMnemonic(false);
-                    setWith12Words(false);
-                    setAdvanced(false);
-                  }}
+                <DesktopBackButton
+                  onClick={handleAdvancedBack}
                 >
                   {t('button.back')}
-                </BackButton>
+                </DesktopBackButton>
               </ColumnButtons>
             </Column>
           </Grid>
diff --git a/frontends/web/src/routes/device/bitbox02/setup/name.tsx b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
index 8701c67437..cd09d40ed3 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/name.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
@@ -5,10 +5,11 @@ import { useTranslation } from 'react-i18next';
 import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
 import { Message } from '@/components/message/message';
 import { Button, Input } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { checkSDCard } from '@/api/bitbox02';
 import { useValidateDeviceName } from '@/hooks/devicename';
 import { TDeviceNameError } from '@/utils/types';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import style from './name.module.css';
 
 type TProps = {
@@ -41,6 +42,11 @@ export const SetDeviceName = ({
         withBottomBar
         verticallyCentered
         width="600px">
+        <MobileHeader
+          onClick={onBack}
+          withViewPadding
+          title={t('bitbox02Wizard.stepUninitialized.title')}
+        />
         <ViewHeader
           small
           title={t('bitbox02Wizard.stepCreate.title')}
@@ -72,11 +78,11 @@ export const SetDeviceName = ({
             type="submit">
             {t('button.continue')}
           </Button>
-          <BackButton
+          <DesktopBackButton
             onClick={onBack}
           >
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </ViewButtons>
       </View>
     </form>
diff --git a/frontends/web/src/routes/device/bitbox02/setup/restore.tsx b/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
index b20b554b2f..e6d5e92fc9 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { BackupsV2 } from '@/routes/device/bitbox02/backups';
 import { Backup } from '@/api/backup';
 import { View, ViewContent, ViewHeader } from '@/components/view/view';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 
 type Props = {
   deviceID: string;
@@ -27,6 +28,11 @@ export const RestoreFromSDCardBackup = ({
       verticallyCentered
       withBottomBar
       width="700px">
+      <MobileHeader
+        onClick={onBack}
+        withViewPadding
+        title={t('bitbox02Wizard.stepUninitialized.title')}
+      />
       <ViewHeader
         small
         title={t('backup.restore.confirmTitle')}
@@ -39,10 +45,10 @@ export const RestoreFromSDCardBackup = ({
           onSelectBackup={onSelectBackup}
           onRestoreBackup={onRestoreBackup}
         >
-          <BackButton
+          <DesktopBackButton
             onClick={onBack}>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </BackupsV2>
       </ViewContent>
     </View>
diff --git a/frontends/web/src/routes/device/manage-backups/manage-backups.tsx b/frontends/web/src/routes/device/manage-backups/manage-backups.tsx
index d1a2403415..2b6b132769 100644
--- a/frontends/web/src/routes/device/manage-backups/manage-backups.tsx
+++ b/frontends/web/src/routes/device/manage-backups/manage-backups.tsx
@@ -3,10 +3,11 @@
 import { useTranslation } from 'react-i18next';
 import { TDevices } from '@/api/devices';
 import { SubTitle } from '@/components/title';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { Guide } from '@/components/guide/guide';
 import { Entry } from '@/components/guide/entry';
 import { Header } from '@/components/layout';
+import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { Backups } from '@/routes/device/bitbox01/backups';
 import { BackupsV2 } from '@/routes/device/bitbox02/backups';
 import { SDCardCheck } from '@/routes/device/bitbox02/sdcardcheck';
@@ -31,7 +32,12 @@ export const ManageBackups = ({
       <div className="container">
         <div className="innerContainer scrollableContainer">
           <Header
-            title={<h2>{t('backup.title')}</h2>}
+            title={
+              <>
+                <h2 className="hide-on-small">{t('backup.title')}</h2>
+                <MobileHeader withGuide title={t('backup.title')} />
+              </>
+            }
           />
           <div className="content padded">
             <BackupsList
@@ -67,9 +73,9 @@ const BackupsList = ({
           deviceID={deviceID}
           showCreate={true}
           showRestore={false}>
-          <BackButton>
+          <DesktopBackButton>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </Backups>
       </>
     );
@@ -81,9 +87,9 @@ const BackupsList = ({
           showCreate={true}
           showRestore={false}
           showRadio={false}>
-          <BackButton>
+          <DesktopBackButton>
             {t('button.back')}
-          </BackButton>
+          </DesktopBackButton>
         </BackupsV2>
       </SDCardCheck>
     );
diff --git a/frontends/web/src/routes/market/swap/swap.test.tsx b/frontends/web/src/routes/market/swap/swap.test.tsx
index df8f9f76c7..09b4ba5312 100644
--- a/frontends/web/src/routes/market/swap/swap.test.tsx
+++ b/frontends/web/src/routes/market/swap/swap.test.tsx
@@ -35,6 +35,7 @@ vi.mock('@/components/guide/entry', () => ({
 }));
 vi.mock('@/components/backbutton/backbutton', () => ({
   BackButton: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DesktopBackButton: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }));
 vi.mock('@/components/spinner/SpinnerAnimation', () => ({
   SpinnerRingAnimated: () => null,
diff --git a/frontends/web/src/routes/market/swap/swap.tsx b/frontends/web/src/routes/market/swap/swap.tsx
index 0e5ab57186..43af662e17 100644
--- a/frontends/web/src/routes/market/swap/swap.tsx
+++ b/frontends/web/src/routes/market/swap/swap.tsx
@@ -34,7 +34,7 @@ import { Entry } from '@/components/guide/entry';
 import { alertUser } from '@/components/alert/Alert';
 import { Message } from '@/components/message/message';
 import { Button, Label } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { AmountWithUnit } from '@/components/amount/amount-with-unit';
 import { ArrowSwap } from '@/components/icon';
 import { SpinnerRingAnimated } from '@/components/spinner/SpinnerAnimation';
@@ -499,9 +499,10 @@ export const Swap = ({
             <Header
               hideSidebarToggler
               title={
-                <h2>
-                  {t('generic.swap')}
-                </h2>
+                <>
+                  <h2 className="hide-on-small">{t('generic.swap')}</h2>
+                  <MobileHeader withGuide title={t('generic.swap')} />
+                </>
               }
             />
             <View
@@ -515,9 +516,9 @@ export const Swap = ({
                 </p>
               </ViewContent>
               <ViewButtons>
-                <BackButton>
+                <DesktopBackButton>
                   {t('button.back')}
-                </BackButton>
+                </DesktopBackButton>
               </ViewButtons>
             </View>
           </Main>
@@ -534,9 +535,10 @@ export const Swap = ({
             <Header
               hideSidebarToggler
               title={
-                <h2>
-                  {t('generic.swap')}
-                </h2>
+                <>
+                  <h2 className="hide-on-small">{t('generic.swap')}</h2>
+                  <MobileHeader withGuide title={t('generic.swap')} />
+                </>
               }
             />
             <SwapkitTerms
@@ -676,9 +678,9 @@ export const Swap = ({
                   {isConfirmInFlight ? t('loading') : t('generic.swap')}
                 </span>
               </Button>
-              <BackButton className="hide-on-small">
+              <DesktopBackButton>
                 {t('button.back')}
-              </BackButton>
+              </DesktopBackButton>
             </ViewButtons>
           </View>
 
diff --git a/frontends/web/src/routes/settings/components/mobile-header.module.css b/frontends/web/src/routes/settings/components/mobile-header.module.css
index 122d8df80f..a6d7123b84 100644
--- a/frontends/web/src/routes/settings/components/mobile-header.module.css
+++ b/frontends/web/src/routes/settings/components/mobile-header.module.css
@@ -4,6 +4,10 @@
     position: relative;
 }
 
+.withViewPadding {
+    padding: 0 var(--space-half);
+}
+
 .backButton {
     align-items: center;
     background-color: transparent;
@@ -36,7 +40,13 @@
     margin: 0 auto;
     position: absolute;
     left: calc(50%);
-    transform: translateX(calc(-50% + 16px));
+    transform: translateX(calc(-50% + 8px));
+    white-space: nowrap;
+}
+
+.titleOnly .headerText {
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 @media (max-width: 768px) {
@@ -50,8 +60,8 @@
         display: none;
     }
 
-    .headerText {
-        left: calc(50% + 8px);
-        transform: translateX(calc(-50% + 8px));
+    .titleOnly .headerText {
+        left: 50%;
+        transform: translateX(-50%);
     }
-}
\ No newline at end of file
+}
diff --git a/frontends/web/src/routes/settings/components/mobile-header.tsx b/frontends/web/src/routes/settings/components/mobile-header.tsx
index 2d83176dbc..e77dfa85c8 100644
--- a/frontends/web/src/routes/settings/components/mobile-header.tsx
+++ b/frontends/web/src/routes/settings/components/mobile-header.tsx
@@ -2,21 +2,33 @@
 
 import { useNavigate } from 'react-router-dom';
 import { ChevronLeftDark } from '@/components/icon';
+import { useBackNavigation } from '@/contexts/BackNavigationContext';
 import { UseBackButton } from '@/hooks/backbutton';
 import styles from './mobile-header.module.css';
 
 type TProps = {
-  title: string;
+  title?: string;
+  variant?: 'back' | 'titleOnly';
   withGuide?: boolean;
+  withViewPadding?: boolean;
   onClick?: () => void;
 };
 
-export const MobileHeader = ({ title, withGuide = false, onClick }: TProps) => {
+export const MobileHeader = ({
+  title = '',
+  variant = 'back',
+  withGuide = false,
+  withViewPadding = false,
+  onClick,
+}: TProps) => {
   const navigate = useNavigate();
+  const { goBack } = useBackNavigation();
   const handleClick = () => {
     // goes to the previous page if no onClick function is provided
     if (!onClick) {
-      navigate(-1);
+      if (!goBack()) {
+        navigate(-1);
+      }
     } else {
       onClick();
     }
@@ -24,15 +36,21 @@ export const MobileHeader = ({ title, withGuide = false, onClick }: TProps) => {
   return (
     <div className={`
       ${styles.container || ''}
+      ${variant === 'titleOnly' && styles.titleOnly || ''}
       ${withGuide && styles.withGuide || ''}
+      ${withViewPadding && styles.withViewPadding || ''}
     `}>
-      <UseBackButton handler={() => {
-        handleClick();
-        return false;
-      }} />
-      <button onClick={handleClick} className={styles.backButton}>
-        <ChevronLeftDark />
-      </button>
+      {variant === 'back' && (
+        <>
+          <UseBackButton handler={() => {
+            handleClick();
+            return false;
+          }} />
+          <button onClick={handleClick} className={styles.backButton}>
+            <ChevronLeftDark />
+          </button>
+        </>
+      )}
       <h1 className={styles.headerText}>
         {title}
       </h1>
diff --git a/frontends/web/src/routes/settings/electrum.tsx b/frontends/web/src/routes/settings/electrum.tsx
index f9fe0d0216..b1654982ba 100644
--- a/frontends/web/src/routes/settings/electrum.tsx
+++ b/frontends/web/src/routes/settings/electrum.tsx
@@ -8,8 +8,9 @@ import { ElectrumServers } from './electrum-servers';
 import { Guide } from '@/components/guide/guide';
 import { Entry } from '@/components/guide/entry';
 import { Button } from '@/components/forms';
-import { BackButton } from '@/components/backbutton/backbutton';
+import { DesktopBackButton } from '@/components/backbutton/backbutton';
 import { Header } from '@/components/layout';
+import { MobileHeader } from './components/mobile-header';
 
 export const ElectrumSettings = () => {
   const { t } = useTranslation();
@@ -29,7 +30,13 @@ export const ElectrumSettings = () => {
     <div className="contentWithGuide">
       <div className="container">
         <div className="innerContainer scrollableContainer">
-          <Header title={<h2>{t('settings.expert.electrum.title')}</h2>} />
+          <Header
+            title={
+              <>
+                <h2 className="hide-on-small">{t('settings.expert.electrum.title')}</h2>
+                <MobileHeader withGuide title={t('settings.expert.electrum.title')} />
+              </>
+            } />
           <div className="content padded">
             <div className="flex flex-row flex-between flex-items-center tabs">
               <div className={['tab', activeTab === 'btc' ? 'active' : ''].join(' ')}>
@@ -60,9 +67,9 @@ export const ElectrumSettings = () => {
               )
             }
             <div style={{ marginBottom: 20 }}>
-              <BackButton>
+              <DesktopBackButton>
                 {t('button.back')}
-              </BackButton>
+              </DesktopBackButton>
             </div>
           </div>
         </div>
diff --git a/frontends/web/src/routes/settings/mobile-settings.tsx b/frontends/web/src/routes/settings/mobile-settings.tsx
index db6ba5b027..d2ec726446 100644
--- a/frontends/web/src/routes/settings/mobile-settings.tsx
+++ b/frontends/web/src/routes/settings/mobile-settings.tsx
@@ -7,6 +7,7 @@ import { Tabs, WithSettingsTabs } from './components/tabs';
 import { TPagePropsWithSettingsTabs } from './types';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
 import { GlobalBanners } from '@/components/banners';
+import { useBackNavigation } from '@/contexts/BackNavigationContext';
 import { useOnlyVisitableOnMobile } from '@/hooks/onlyvisitableonmobile';
 import { MobileHeader } from '@/routes/settings/components/mobile-header';
 import { useNavigate } from 'react-router-dom';
@@ -21,8 +22,12 @@ import { useNavigate } from 'react-router-dom';
 export const MobileSettings = ({ devices, hasAccounts }: TPagePropsWithSettingsTabs) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { goBack } = useBackNavigation();
   useOnlyVisitableOnMobile('/settings/general');
   const handleClick = () => {
+    if (goBack()) {
+      return;
+    }
     // go to home page if no devices or accounts (waiting.tsx will be shown)
     if (Object.keys(devices).length === 0 && !hasAccounts) {
       navigate('/');