diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 50ef2e80d1..79095834de 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,55 +59,3 @@ jobs:
         with:
           path: frontends/android/BitBoxApp/app/build/outputs/apk/debug/app-debug.apk
           name: BitBoxApp-android-${{github.sha}}.apk
-  qt-linux:
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Clone the repo
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-      - name: Build Qt-Linux
-        run: ./scripts/github-ci.sh qt-linux
-        env:
-          OS_NAME: linux
-      - name: Upload AppImage
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/BitBoxApp-*.AppImage
-          name: BitBoxApp-linux-${{github.sha}}.AppImage
-      - name: Upload deb
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/bitbox_*.deb
-          name: BitBoxApp-linux-${{github.sha}}.deb
-      - name: Upload rpm
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/bitbox-*.rpm
-          name: BitBoxApp-linux-${{github.sha}}.rpm
-  macos:
-    runs-on: macos-12
-    steps:
-      - name: Clone the repo
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-      - name: Install Go
-        uses: actions/setup-go@v2
-        with:
-          go-version: 1.20.x
-      - name: Build macOS app
-        run: >
-          ./scripts/github-ci.sh qt-osx;
-        env:
-          OS_NAME: osx
-      - name: Archive app
-        run: >
-          pushd ~/go/src/github.com/digitalbitbox/bitbox-wallet-app/frontends/qt/build/osx;
-          ditto -c -k --keepParent BitBox.app ${{github.workspace}}/BitBoxApp-macos.zip;
-          popd;
-      - name: Upload app
-        uses: actions/upload-artifact@v2
-        with:
-          path: BitBoxApp-macos.zip
-          name: BitBoxApp-macos-${{github.sha}}.zip
diff --git a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
index 5e222c4fad..4669d6ce7f 100644
--- a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
+++ b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
@@ -77,6 +77,8 @@ public class MainActivity extends AppCompatActivity {
 
     private String location = "";
 
+    private int currentZoom;
+
     // This is for the file picker dialog invoked by file upload forms in the WebView.
     // Used by e.g. MoonPay's KYC forms.
     private ValueCallback<Uri[]> filePathCallback;
@@ -221,12 +223,37 @@ public void run() {
         // For MoonPay WebRTC camera access.
         vw.getSettings().setMediaPlaybackRequiresUserGesture(false);
 
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
         vw.setWebViewClient(new WebViewClient() {
             @Override
             public void onPageFinished(WebView view, String url) {
                 // The url is not correctly updated when navigating to a new page. This allows to
                 // know the current location and to block external requests on that base.
                 view.evaluateJavascript("window.location.pathname", path -> location = path);
+
+                // Calculate the base font size for html as a percentage.
+                // This percentage dynamically adjusts to ensure 1rem = 10px, scaled according to the current zoom level.
+                double baseFontSizePercentage = 62.5 * (currentZoom / 100.0);
+
+                // The default body font size in rem, which is independent of the zoom level.
+                // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
+                double defaultFontSizeREM = 1.6;
+
+                // Set the base font-size on the html element dynamically and apply a fixed font size to the body.
+                // Also, set a custom data attribute 'data-test' to the calculated base font size percentage for potential debugging.
+                String cssSetup = "document.documentElement.style.fontSize = '" + baseFontSizePercentage + "%';" +
+                                    "document.body.style.fontSize = '" + defaultFontSizeREM + "rem';" +
+                                    "document.body.setAttribute('data-test', '" + baseFontSizePercentage + "%');";
+
+                // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS
+                // and not by the WebView's default scaling behavior.
+                view.getSettings().setTextZoom(100);
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+
             }
             @Override
             public WebResourceResponse shouldInterceptRequest(final WebView view, WebResourceRequest request) {
diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
index d467cbdc51..4311824f87 100644
--- a/frontends/web/src/components/forms/button.module.css
+++ b/frontends/web/src/components/forms/button.module.css
@@ -13,7 +13,7 @@
     font-weight: 400;
     justify-content: center;
     min-width: 100px;
-    height: 50px;
+    height: 5rem;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 4c15b8f38f..ffcb507b3f 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -53,7 +53,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {
diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
index f2442ab714..e1ddeccb06 100644
--- a/frontends/web/src/components/keystoreconnectprompt.module.css
+++ b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -33,7 +33,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/components/layout/header.tsx b/frontends/web/src/components/layout/header.tsx
index e3ebb7a186..60013feb16 100644
--- a/frontends/web/src/components/layout/header.tsx
+++ b/frontends/web/src/components/layout/header.tsx
@@ -46,6 +46,8 @@ const Header = ({
     }
     return false;
   };
+  const test = document.body.getAttribute('data-test');
+  const width = window.screen.width;
 
   return (
     <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
@@ -65,6 +67,9 @@ const Header = ({
             >
               <GuideActive />
               {t('guide.toggle.open')}
+              <sup>
+                ({test} {width}px)
+              </sup>
             </Button>
           )}
         </div>
diff --git a/frontends/web/src/components/password.module.css b/frontends/web/src/components/password.module.css
index 313232864d..09fda96a40 100644
--- a/frontends/web/src/components/password.module.css
+++ b/frontends/web/src/components/password.module.css
@@ -4,5 +4,5 @@
     line-height: 42px;
     position: absolute;
     right: 0;
-    width: 2rem;
+    width: 32px;
 }
diff --git a/frontends/web/src/components/sidebar/sidebar.module.css b/frontends/web/src/components/sidebar/sidebar.module.css
index 05a8dd4c96..030e7c3211 100644
--- a/frontends/web/src/components/sidebar/sidebar.module.css
+++ b/frontends/web/src/components/sidebar/sidebar.module.css
@@ -113,9 +113,8 @@
     cursor: default;
     display: flex;
     flex-direction: row;
-    height: var(--sidebar-item-height);
+    min-height: var(--sidebar-item-height);
     justify-content: center;
-    overflow: hidden;
     position: relative;
     text-decoration: none;
 }
@@ -166,6 +165,7 @@ a.sidebarActive :global(.stacked) img:last-child,
 .single img {
     opacity: .6;
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 a.sidebarActive .single img,
@@ -179,10 +179,10 @@ a.sidebarActive .single img,
     line-height: 1;
     flex: 1;
     padding-top: 0;
-    padding-right: var(--space-default);
+    padding-right: 16px;
     font-size: var(--size-default);
     font-weight: 400;
-    transition: all 0.2s ease;
+    /* transition: all 0.2s ease; /* TODO: why all, what is this even supposed to be transitioning */
     word-break: break-word;
 }
 
diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
index 3d5b24310d..f3fb26d7d1 100644
--- a/frontends/web/src/components/spinner/ascii.module.css
+++ b/frontends/web/src/components/spinner/ascii.module.css
@@ -13,7 +13,7 @@
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 262e260e65..e72bbe7998 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
-
 .disclaimer {
   background-color: var(--background-secondary);
   flex-basis: 100%;
@@ -34,19 +28,19 @@
   background-color: #fff;
 }
 
-.disclaimer .title {
-  font-size: .875rem;
+.title {
+  font-size: 14px;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: .875rem;
+  font-size: 14px;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 2.5rem 0 0 0;
+  margin: 40px 0 0 0;
 }
 
 .table {
@@ -55,7 +49,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: .875rem;
+  font-size: 14px;
   text-align: left;
 }
 
diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
index 6b07b1a32d..dcf56f33e0 100644
--- a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
+++ b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
@@ -1,5 +1,5 @@
 .accountName {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0 var(--space-half) 0 0;
 }
 
@@ -9,7 +9,7 @@
 
 .address {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .itemText {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
index 9a0f411780..f5511de51a 100644
--- a/frontends/web/src/routes/account/account.tsx
+++ b/frontends/web/src/routes/account/account.tsx
@@ -23,6 +23,7 @@ import { statusChanged, syncAddressesCount, syncdone } from '../../api/accountsy
 import { bitsuranceLookup } from '../../api/bitsurance';
 import { TDevices } from '../../api/devices';
 import { getExchangeBuySupported, SupportedExchanges } from '../../api/exchanges';
+import { useLoad } from '../../hooks/api';
 import { useSDCard } from '../../hooks/sdcard';
 import { unsubscribe } from '../../utils/subscriptions';
 import { alertUser } from '../../components/alert/Alert';
@@ -33,20 +34,18 @@ import { Header } from '../../components/layout';
 import { Spinner } from '../../components/spinner/Spinner';
 import { Status } from '../../components/status/status';
 import { Transactions } from '../../components/transactions/transactions';
-import { useLoad } from '../../hooks/api';
 import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
-import style from './account.module.css';
 import { ActionButtons } from './actionButtons';
 import { Insured } from './components/insuredtag';
 import { AccountGuide } from './guide';
 import { BuyReceiveCTA } from './info/buyReceiveCTA';
-import { isBitcoinBased } from './utils';
-import { getScriptName } from './utils';
+import { getScriptName, isBitcoinBased } from './utils';
 import { MultilineMarkup } from '../../utils/markup';
 import { Dialog } from '../../components/dialog/dialog';
 import { A } from '../../components/anchor/anchor';
 import { getConfig, setConfig } from '../../utils/config';
 import { i18n } from '../../i18n/i18n';
+import style from './account.module.css';
 
 type Props = {
   accounts: accountApi.IAccount[];
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index 36a29ff564..7f432eac6c 100644
--- a/frontends/web/src/routes/account/add/add.module.css
+++ b/frontends/web/src/routes/account/add/add.module.css
@@ -13,7 +13,7 @@
 
 .successCheck {
     background-color: var(--color-success);
-    border: .5rem solid var(--color-success);
+    border: 8px solid var(--color-success);
     border-radius: 100px;
 }
 
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index e77d2b93ea..35f5aa0542 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 14px;
+    font-size: 1.4rem;
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index f6981d2b2e..6b7419f542 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -36,7 +36,7 @@
     clear: both;
     display: flex;
     justify-content: space-between;
-    min-height: 3.5rem;
+    min-height: 56px;
 }
 
 .verifyButton {
diff --git a/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx b/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
index 132d6b6340..cddb08db5a 100644
--- a/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
+++ b/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
@@ -31,14 +31,14 @@ const IconAndMessage = ({ messageType }: TIconProps) => {
   case 'sent':
     return (
       <>
-        <Checked style={{ height: 18, marginRight: '1rem' }} />
+        <Checked style={{ height: 18, marginRight: '16px' }} />
         {t('send.success')}
       </>
     );
   case 'abort':
     return (
       <>
-        <Cancel alt="Abort" style={{ height: 18, marginRight: '1rem' }} />
+        <Cancel alt="Abort" style={{ height: 18, marginRight: '16px' }} />
         {t('send.abort')}
       </>
     );
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index 167bf659e9..75ee00f466 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -193,7 +193,7 @@
     }
 
     .coinName img {
-        left: -2rem;
+        left: -32px;
         position: absolute;
         top: -3px;
     }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index 5616af273f..456afd33b4 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -72,7 +72,7 @@
   appearance: none;
   background: var(--background-secondary);
   border: 2px solid var(--background-secondary);
-  border-radius: 2rem;
+  border-radius: 32px;
   color: var(--color-default);
   font-size: var(--size-default);
   line-height: 1.75;
@@ -117,7 +117,7 @@
 
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -126,8 +126,8 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 1.4rem;
-  padding: 0 .25rem;
+  font-size: 22px;
+  padding: 0 4px;
 }
 
 .chartCanvas {
@@ -149,7 +149,7 @@
   font-size: var(--size-small);
   margin-top: -25px;
   min-width: 140px;
-  padding: .75rem .6rem;
+  padding: 12px 10px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -159,14 +159,14 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 1rem;
-  margin: 0 0 .25rem 0;
+  font-size: 16px;
+  margin: 0 0 4px 0;
 }
 
 .toolTipUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  padding: 0 .125rem;
+  padding: 0 2px;
 }
 
 .toolTipTime {
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index fb032d8493..d4380296b2 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,6 +1,6 @@
 
 .arrow img {
-  margin-right: .25rem;
+  margin-right: 4px;
   vertical-align: text-bottom;
 }
 
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 1.2rem;
+  font-size: 19px;
 }
 
 .diffUnit {
-  font-size: 1rem;
-  padding: 0 .25rem;
+  font-size: 16px;
+  padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
index 9571b5834a..1c741f2144 100644
--- a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -26,11 +26,11 @@
 }
 
 .accountName {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .receiveAddress {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
index 3bb896e223..0ebec549f8 100644
--- a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
@@ -8,7 +8,7 @@
 
 .container p {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     line-height: 1.9;
     margin-bottom: 0;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
index 55ec3937e6..9ae9bbe09e 100644
--- a/frontends/web/src/routes/account/walletconnect/dashboard.module.css
+++ b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
@@ -16,12 +16,12 @@
 .headerContainer p.receiveAddress { 
     color: var(--color-secondary);
     margin-top: var(--space-quarter);
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .noConnectedSessions {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-large);
     text-align: center;
@@ -41,7 +41,7 @@
 
 .allSessionsHeading {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-half);
 }
@@ -54,7 +54,7 @@
     }
 
     .headerContainer p {
-        font-size: 16px;
+        font-size: 1.6rem;
     }
     
     .headerContainer p.receiveAddress,
diff --git a/frontends/web/src/routes/bitsurance/account.module.css b/frontends/web/src/routes/bitsurance/account.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/bitsurance/account.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
diff --git a/frontends/web/src/routes/buy/components/countryselect.module.css b/frontends/web/src/routes/buy/components/countryselect.module.css
index 1e2ebc4009..b5b757c45c 100644
--- a/frontends/web/src/routes/buy/components/countryselect.module.css
+++ b/frontends/web/src/routes/buy/components/countryselect.module.css
@@ -8,7 +8,7 @@
 }
 
 .flag {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .globe {
diff --git a/frontends/web/src/routes/buy/exchange.module.css b/frontends/web/src/routes/buy/exchange.module.css
index 9939e128d5..e305ccfa95 100644
--- a/frontends/web/src/routes/buy/exchange.module.css
+++ b/frontends/web/src/routes/buy/exchange.module.css
@@ -79,7 +79,7 @@
 }
 
 .title {
-    font-size: 2rem;
+    font-size: 32px;
     font-weight: 400;
     margin-top: 0;
     margin-bottom: var(--space-default);
diff --git a/frontends/web/src/routes/buy/info.module.css b/frontends/web/src/routes/buy/info.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/buy/info.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
diff --git a/frontends/web/src/routes/device/bitbox01/check.jsx b/frontends/web/src/routes/device/bitbox01/check.jsx
index f34a14270d..c829018178 100644
--- a/frontends/web/src/routes/device/bitbox01/check.jsx
+++ b/frontends/web/src/routes/device/bitbox01/check.jsx
@@ -99,7 +99,7 @@ class Check extends Component {
               onClose={this.abort}>
               { message ? (
                 <div>
-                  <p style={{ minHeight: '3rem' }}>{message}</p>
+                  <p style={{ minHeight: '48px' }}>{message}</p>
                   <div className={style.actions}>
                     <Button secondary onClick={this.abort}>
                       {t('button.back')}
diff --git a/frontends/web/src/routes/device/components/backups.module.css b/frontends/web/src/routes/device/components/backups.module.css
index 32544c62d8..26f4df2cf1 100644
--- a/frontends/web/src/routes/device/components/backups.module.css
+++ b/frontends/web/src/routes/device/components/backups.module.css
@@ -36,7 +36,7 @@
 }
 
 .agreements {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 
 .emptyText {
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
index 7c0005a5df..4297213d8c 100644
--- a/frontends/web/src/routes/settings/manage-accounts.module.css
+++ b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -21,7 +21,7 @@
 }
 
 .walletTitle {
-    font-size: 20px;
+    font-size: 2rem;
     font-weight: 400;
     margin: 0 0 var(--space-quarter) 0;
 }
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 861413a490..af5edb57b7 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -15,6 +15,15 @@ body {
 	  -webkit-app-region: drag;
 }
 
+html {
+    font-size: 62.5%;
+    text-size-adjust: 100%;
+}
+
+body {
+    font-size: 1.6rem;
+}
+
 /*
 ::selection:not(textarea):not(input) {
     background-color: transparent;
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index b2558881b1..1fa1a1134f 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -358,6 +358,7 @@
 
 .stacked img {
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 .stacked img:last-child {
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 816a411b0b..875ae5d553 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -37,37 +37,37 @@
     --color-danger: var(--color-error);
 
     /* font sizes */
-    --size-extra-large: 2.2rem;
-    --size-large: 2rem;
-    --size-large-mobile: 1.4rem;
-    --size-subheader: 18px;
+    --size-extra-large: 3.5rem;
+    --size-large: 3.2rem;
+    --size-large-mobile: 2.2rem;
+    --size-subheader: 1.8rem;
     --size-medium: var(--size-default);
-    --size-default: 14px;
-    --size-small: 12px;
-    --size-xsmall: 11px;
+    --size-default: 1.4rem;
+    --size-small: 1.2rem;
+    --size-xsmall: 1.1rem;
     --size-label: var(--size-small);
     --size-button: var(--size-default);
-    --size-title: 32px;
+    --size-title: 3.2rem;
 
     /* wizard */
-    --size-wizard-text: 16px;
+    --size-wizard-text: 1.6rem;
 
     /* spacing */
-    --spacing-large: 2rem;
-    --spacing-default: 1rem;
-    --spacing-half: .5rem;
-
-    --space-large: 64px;
-    --space-default: 32px;
-    --space-half: 16px;
-    --space-quarter: 8px;
-    --space-eight: 4px;
-
-    --item-height-xsmall: 24px;
-    --item-height-small: 36px;
-    --item-height: 52px;
-    --item-height-large: 72px;
-    --item-height-xlarge: 84px;
+    --spacing-large: 32px;
+    --spacing-default: 16px;
+    --spacing-half: 8px;
+
+    --space-large: 6.4rem;
+    --space-default: 3.2rem;
+    --space-half: 1.6rem;
+    --space-quarter: .8rem;
+    --space-eight: .4rem;
+
+    --item-height-xsmall: 2.4rem;
+    --item-height-small: 3.6rem;
+    --item-height: 5.2rem;
+    --item-height-large: 7.2rem;
+    --item-height-xlarge: 8.4rem;
 
     /* typography */
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -78,12 +78,12 @@
     --sidebar-item-height: 52px;
     --sidebar-icon-margin: 14px;
     --sidebar-icon-size: 24px;
-    --sidebar-header-size: 12px;
-    --sidebar-header-line-height: 16px;
+    --sidebar-header-size: 1.2rem;
+    --sidebar-header-line-height: 1.6rem;
 
     /* header */
-    --header-height: 70px;
-    --header-default-font-size: 24px;
+    --header-height: 7rem;
+    --header-default-font-size: 2.4rem;
 
     /* content */
     --content-width: 1080px;
@@ -182,16 +182,16 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 18px;
+        --size-title: 1.8rem;
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --header-default-font-size: 20px;
-        --size-subheader: 16px;
-        --size-title: 16px;
+        --header-default-font-size: 2rem;
+        --size-subheader: 1.6rem;
+        --size-title: 1.6rem;
 
-        --size-wizard-text: 14px;
+        --size-wizard-text: 1.4rem;
     }
 }