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 24649335a6..c5ceb8becd 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
@@ -136,7 +136,6 @@ public void onReceive(Context context, Intent intent) {
         }
     };
 
-
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         int currentNightMode = newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK;
@@ -171,6 +170,8 @@ public void setDarkTheme(boolean isDark) {
         }
     }
 
+    private int currentZoom;
+
     @SuppressLint("SetJavaScriptEnabled")
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -226,7 +227,33 @@ protected void onCreate(Bundle savedInstanceState) {
 
         // vw.setWebContentsDebuggingEnabled(true); // enable remote debugging in chrome://inspect/#devices
 
-        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()));
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
+        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()) {
+            @Override
+            public void onPageFinished(WebView view, String url) {
+                super.onPageFinished(view, url);
+
+                // 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 * ((double) 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;
+
+                // 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);
+
+                String cssSetup = "document.documentElement.style.fontSize='" + baseFontSizePercentage + "%';" +
+                                "document.body.style.fontSize='" + defaultFontSizeREM + "rem';";
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+            }
+        });
 
         ActivityResultLauncher<String> fileChooser = registerForActivityResult(new ActivityResultContracts.GetContent(), uri -> webChrome.onFilePickerResult(uri));
         BitBoxWebChromeClient.CameraPermissionDelegate cameraPermissionDelegate = () -> ActivityCompat.requestPermissions(
@@ -321,7 +348,6 @@ public void noAuthConfigured() {
                 getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE);
             }
         }));
-
     }
 
     @Override
diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css
index 5322d8c7bb..250feef568 100644
--- a/frontends/web/src/components/actionable-item/actionable-item.module.css
+++ b/frontends/web/src/components/actionable-item/actionable-item.module.css
@@ -1,5 +1,5 @@
 .container {
-  --size-default: 14px;
+  --size-default: min(1.4rem, 24px);
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
index ad4d2b1f7d..15149a06ad 100644
--- a/frontends/web/src/components/amount/conversion-amount.module.css
+++ b/frontends/web/src/components/amount/conversion-amount.module.css
@@ -14,13 +14,13 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
-  font-size: 12px;
+  font-size: 1.2rem;
   flex-shrink: 0;
 }
 
diff --git a/frontends/web/src/components/aopp/aopp.module.css b/frontends/web/src/components/aopp/aopp.module.css
index e9e8a89472..c6d4d1437b 100644
--- a/frontends/web/src/components/aopp/aopp.module.css
+++ b/frontends/web/src/components/aopp/aopp.module.css
@@ -42,6 +42,6 @@
 }
 @media (min-width: 1200px) {
     .message {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
 }
diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
index bf3f9fd06a..24a663aa94 100644
--- a/frontends/web/src/components/badge/badge.module.css
+++ b/frontends/web/src/components/badge/badge.module.css
@@ -19,7 +19,7 @@
 }
 
 .badgeIcon {
-  max-width: 10px;
+  max-width: 1rem;
 }
 
 .withChildren .badgeIcon {
@@ -28,7 +28,7 @@
 
 @media (max-width: 382px) {
   .badge {
-      font-size: 10px;
+      font-size: 1rem;
   }
 }
 
diff --git a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
index f4a89df801..72a281f87c 100644
--- a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
+++ b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
@@ -18,7 +18,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 12px;
+    font-size: min(1.2rem, 20px);
     flex-direction: column;
     gap: 4px;
     justify-content: center;
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
index bffd8bc5d2..08ecb6b6c7 100644
--- a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
+++ b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
@@ -8,13 +8,13 @@
 
 .progressInfo {
     display: flex;
-    font-size: 16px;
+    font-size: 1.6rem;
     justify-content: space-between;
     margin: 0 0 var(--space-default);
 }
 
 .additionalUpgrade {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-eight);
 }
@@ -23,7 +23,7 @@
     .content,
     .additionalUpgrade
     {
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
index db39c49d4b..cda9d059ae 100644
--- a/frontends/web/src/components/dialog/dialog.module.css
+++ b/frontends/web/src/components/dialog/dialog.module.css
@@ -30,13 +30,13 @@
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
     .header .title {
-        --size-subheader: 16px;
+        --size-subheader: 1.6rem;
     }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
     .modal .contentContainer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/dropdown/dropdown.module.css b/frontends/web/src/components/dropdown/dropdown.module.css
index e194365f34..a4339834e3 100644
--- a/frontends/web/src/components/dropdown/dropdown.module.css
+++ b/frontends/web/src/components/dropdown/dropdown.module.css
@@ -56,7 +56,9 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
-    border-radius: 2px;
+    border-radius: 0.2rem;
+    border-width: var(--border-width);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 
diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
index d467cbdc51..df4c969a02 100644
--- a/frontends/web/src/components/forms/button.module.css
+++ b/frontends/web/src/components/forms/button.module.css
@@ -4,7 +4,7 @@
     border-color: transparent;
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     cursor: default;
     display: inline-flex;
     flex-direction: row;
@@ -12,8 +12,8 @@
     font-size: var(--size-default);
     font-weight: 400;
     justify-content: center;
+    min-height: var(--button-height);
     min-width: 100px;
-    height: 50px;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
@@ -87,7 +87,6 @@
     border-color: transparent;
     color: var(--color-blue);
     display: inline-block;
-    height: 50px;
     min-width: 0;
 }
 
diff --git a/frontends/web/src/components/forms/checkbox.module.css b/frontends/web/src/components/forms/checkbox.module.css
index 6e824b72de..e96657cb9e 100644
--- a/frontends/web/src/components/forms/checkbox.module.css
+++ b/frontends/web/src/components/forms/checkbox.module.css
@@ -7,7 +7,7 @@
 .checkbox input + label {
     display: inline-block;
     max-width: 100%;
-    padding-left: 2em;
+    padding-left: 2rem;
     position: relative;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .checkbox input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 2px;
     top: 2px;
 }
@@ -37,22 +37,22 @@
 }
 .warning input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-warning);
+    outline: var(--border-width) solid var(--color-warning);
 }
 .info input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-info);
+    outline: var(--border-width) solid var(--color-info);
 }
 
 .checkbox input + label::after {
     background: transparent;
     border: solid var(--background-secondary);
-    border-width: 0px 2px 2px 0;
+    border-width: 0 2px 2px 0;
     width: 0.35em;
     height: 0.55em;
     position: absolute;
-    top: 6px;
-    left: 6px;
+    top: min(0.6rem, 9px);
+    left: 0.6rem;
     margin-left: -1px;
     margin-top: -2px;
     opacity: 0;
diff --git a/frontends/web/src/components/forms/input.module.css b/frontends/web/src/components/forms/input.module.css
index 4c37a232c0..9ea5d7e584 100644
--- a/frontends/web/src/components/forms/input.module.css
+++ b/frontends/web/src/components/forms/input.module.css
@@ -28,11 +28,11 @@
     border-color: var(--background-quaternary);
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
-    height: 52px;
+    height: var(--input-height);
     padding: 0 var(--space-half);
     width: 100%;
     transition: border-color .2s ease-out;
diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css
index 1513737b3e..28235923d0 100644
--- a/frontends/web/src/components/forms/radio.module.css
+++ b/frontends/web/src/components/forms/radio.module.css
@@ -1,5 +1,5 @@
 .radio {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     line-height: 1.5;
 }
 
@@ -13,7 +13,7 @@
     flex-direction: column;
     font-size: var(--size-default);
     margin-right: var(--space-half);
-    padding-left: calc(var(--space-half) + var(--space-quarter));
+    padding-left: calc(1.6rem + var(--space-quarter));
     position: relative;
 }
 
@@ -22,27 +22,27 @@
     background: var(--background-secondary);
     content: '';
     display: inline-block;
-    width: 12px;
-    height: 12px;
+    width: 1.2rem;
+    height: 1.2rem;
     position: absolute;
-    top: 4px;
+    top: .4rem;
     left: 0;
     transition: all 100ms ease;
 }
 
 .radio input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 1em;
 }
 
 .radio input + label::after {
     background: var(--color-blue);
     border-radius: 1em;
-    width: 10px;
-    height: 10px;
+    width: 1rem;
+    height: 1rem;
     position: absolute;
-    top: 6px;
-    left: 2px;
+    top: .6rem;
+    left: .2rem;
     opacity: 0;
     transform: scale(0);
 }
diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
index 5828fefddf..992b73f301 100644
--- a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
+++ b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
@@ -6,6 +6,7 @@
 }
 
 .balanceSingleValue {
+    margin-left: var(--space-quarter);
     margin-right: var(--space-quarter);
 }
 
@@ -26,12 +27,13 @@
 }
 
 .select {
+    font-size: min(var(--size-default), 24px);
     margin-bottom: var(--space-half);
 }
 
 .select :global(.react-select__group-heading) {
     color: var(--color-default);
-    font-size: var(--size-default);
+    font-size: min(var(--size-default), 24px);
     margin: 0;
     padding-right: var(--space-quarter);
     text-transform: unset;
@@ -72,6 +74,7 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 
diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx
index 10c6ad3a9f..e697d0244f 100644
--- a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx
+++ b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx
@@ -62,7 +62,11 @@ const SelectSingleValue = (props: SingleValueProps<TOption>) => {
           {coinCode ? <Logo coinCode={coinCode} alt={coinCode} /> : null}
           <span className={styles.selectLabelText}>{label}</span>
           {insured && <InsuredShield/>}
-          {coinCode && balance && <span className={styles.balanceSingleValue}>{hideAmounts ? `*** ${coinCode}` : balance}</span>}
+          {coinCode && balance && (
+            <span className={styles.balanceSingleValue}>
+              {hideAmounts ? `*** ${coinCode}` : balance}
+            </span>
+          )}
         </div>
       </components.SingleValue>
     </div>
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 67cdacd66f..930fe49722 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -12,15 +12,16 @@
 
 .close {
     display: flex;
-    height: 24px;
+    height: 2.4rem;
+    min-height: 0;
     padding: 4px;
-    width: 24px;
+    width: 2.4rem;
 }
 
 .close img {
-    height: 20px;
+    height: 2rem;
     margin-left: calc(var(--space-quarter) / 2);
-    width: 20px;
+    width: 2rem;
 }
 
 .wrapper {
@@ -63,7 +64,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {
@@ -80,10 +81,9 @@
 }
 
 .content h2 {
-    font-size: 1.1em;
+    font-size: var(--size-subheader);
     font-weight: 400;
-    line-height: 1.2em;
-    margin: 0px;
+    margin: 0;
 }
 
 .guide p {
@@ -115,11 +115,12 @@
 .entryTitle .entryToggle {
     align-items: center;
     display: flex;
-    flex-direction: row;
+    font-size: var(--size-subheader);
     font-weight: bold;
+    flex-direction: row;
     justify-content: flex-start;
-    line-height: 1.2em;
-    width: 16px;
+    line-height: 1.2;
+    width: 1.6rem;
 }
 
 .entryTitle .entryTitleText {
@@ -131,7 +132,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    padding-left: 16px;
+    padding-left: 1.2rem;
 }
 
 .expanded {
@@ -198,6 +199,6 @@
 
 @media screen and (max-width: 640px) {
     .guide h2 {
-        font-size: 1.05em;
+        font-size: var(--size-default);
     }
 }
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
index e8d88ad0f6..e369ef811e 100644
--- a/frontends/web/src/components/headerssync/headerssync.module.css
+++ b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -51,7 +51,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/keystore/connected-keystore.module.css b/frontends/web/src/components/keystore/connected-keystore.module.css
index 6b76ac3828..cdd5bb5e99 100644
--- a/frontends/web/src/components/keystore/connected-keystore.module.css
+++ b/frontends/web/src/components/keystore/connected-keystore.module.css
@@ -15,6 +15,6 @@
 
 @media (min-width: 1200px) {
   .keystore {
-    --size-default: 20px;
+    --size-default: 2rem;
   }
 }
diff --git a/frontends/web/src/components/keystore/connected-keystore.tsx b/frontends/web/src/components/keystore/connected-keystore.tsx
index 6bd8405492..6e2c274338 100644
--- a/frontends/web/src/components/keystore/connected-keystore.tsx
+++ b/frontends/web/src/components/keystore/connected-keystore.tsx
@@ -53,7 +53,7 @@ export const ConnectedKeystore = ({
         <>
           {' '}
           <Badge
-            icon={props => <USBSuccess {...props} />}
+            icon={props => <USBSuccess style={{ width: '0.9rem', height: '0.9rem' }} {...props} />}
             title={t('device.keystoreConnected')}
             type="success">
             {connectedIconOnly ? undefined : t('device.keystoreConnected')}
diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
index 654d3c5de9..05f3197794 100644
--- a/frontends/web/src/components/keystoreconnectprompt.module.css
+++ b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -36,7 +36,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .dialogButtonsContainer {
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/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
index f0c72a8581..f415d5e2e8 100644
--- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
+++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
@@ -3,31 +3,27 @@
 	display: flex;
 	flex-wrap: wrap;
 	flex-grow: 1;
+	gap: var(--spacing-half);
 }
 
 .pillbuttongroup button {
 	appearance: none;
 	background: var(--background-secondary);
-	border: 2px solid var(--background-secondary);
-	border-radius: 2rem;
+	border: 0.1rem solid var(--background-secondary);
+	border-radius: 36px;
 	color: var(--color-default);
-	font-size: var(--size-default);
+	font-size: min(var(--size-default), 18px);
 	line-height: 1.75;
 	margin-bottom: var(--spacing-half);
-	margin-left: var(--spacing-half);
 }
 
 .pillbuttongroup.medium button {
-	padding: 0 calc(var(--spacing-default) * .75);
+	padding: 0 12px;
 }
 
 .pillbuttongroup.large button {
-	font-size: calc(var(--size-default) + 1px);
-	padding: 2px calc(var(--spacing-default) * 1.5);
-}
-
-.pillbuttongroup button:first-child {
-	margin-left: 0;
+	font-size: min(calc(var(--size-default) + 1px), 24px);
+	padding: 2px 24px;
 }
 
 .pillbuttongroup button:hover:not([disabled]) {
@@ -60,10 +56,3 @@
 	border-color: var(--background-secondary);
 	color: var(--color-disabled);
 }
-
-@media (max-width: 768px) {
-	.pillbuttongroup.lg button {
-		font-size: calc(var(--size-default));
-		padding: 2px calc(var(--spacing-default) * 1.25);
-	}	
-}
\ No newline at end of file
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 8ca16394e5..bdbd656f64 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -1,4 +1,5 @@
 .disclaimerContainer {
+  --size-default: min(1.4rem, 24px);
   align-items: center;
   display: flex;
   flex-basis: 100%;
@@ -12,12 +13,6 @@
   width: 100%;
 }
 
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
-
 .disclaimer {
   background-color: var(--background-secondary);
   flex-basis: 100%;
@@ -27,22 +22,22 @@
   margin: 0 0 var(--space-default) 0;
   max-width: 660px;
   overflow: auto;
-  padding: var(--space-quarter) 1em 1em 1em;
+  padding: var(--space-quarter) var(--space-half) var(--space-half) var(--space-half);
 }
 
-.disclaimer .title {
-  font-size: .875rem;
+.title {
+  font-size: var(--size-default);
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: .875rem;
+  font-size: var(--size-default);
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 2.5rem 0 0 0;
+  margin: 4rem 0 0 0;
 }
 
 .table {
@@ -51,7 +46,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: .875rem;
+  font-size: var(--size-default);
   text-align: left;
 }
 
@@ -70,6 +65,11 @@
   padding-left: 0;
 }
 
+.table td:last-child,
+.table th:last-child {
+  padding-right: 0;
+}
+
 .nowrap {
   white-space: nowrap;
 }
diff --git a/frontends/web/src/components/title/subtitle.module.css b/frontends/web/src/components/title/subtitle.module.css
index 7fa169080b..78fdae9c0b 100644
--- a/frontends/web/src/components/title/subtitle.module.css
+++ b/frontends/web/src/components/title/subtitle.module.css
@@ -7,6 +7,6 @@
 
 @media (min-width: 1200px) {
   .subtitle {
-    --size-subheader: 20px;
+    --size-subheader: 2rem;
   }
 }
diff --git a/frontends/web/src/components/toggle/toggle.module.css b/frontends/web/src/components/toggle/toggle.module.css
index 5b31763c36..5cdb65379a 100644
--- a/frontends/web/src/components/toggle/toggle.module.css
+++ b/frontends/web/src/components/toggle/toggle.module.css
@@ -3,14 +3,17 @@
   flex-shrink: 0;
   margin: 0;
   min-height: var(--item-height-xsmall);
+  height: min(2.4rem, 28px);
   position: relative;
   width: 60px;
 }
 
 .container input {
-  height: 0;
-  opacity: 0;
-  width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
 }
 
 .container input[disabled] + .slider {
@@ -35,7 +38,7 @@
   border-radius: 2px;
   bottom: 4px;
   content: "";
-  height: 16px;
+  height: min(1.6rem, 20px);
   left: 4px;
   position: absolute;
   width: 26px;
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index b8445c3bf3..5ecddd7204 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -59,7 +59,7 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
@@ -81,7 +81,7 @@
 
 .txAmount {
   align-items: baseline;
-  font-size: 16px;
+  font-size: 1.6rem;
   font-variant: tabular-nums;
   gap: 3px;
   justify-content: flex-end;
@@ -105,7 +105,7 @@
 
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
 }
 
@@ -116,7 +116,7 @@
 }
 .txNoteText {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 @media (max-width: 560px) {
@@ -130,7 +130,7 @@
   align-items: center;
   color: var(--color-secondary);
   display: flex;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding-bottom: 6px;
 }
@@ -174,13 +174,13 @@
 }
 .addresses {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.285714;
 }
 .txType {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 
diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
index cf346ba774..4ed24a471e 100644
--- a/frontends/web/src/components/view/view.module.css
+++ b/frontends/web/src/components/view/view.module.css
@@ -295,17 +295,17 @@
 
 @media (min-width: 1200px) {
     .title {
-        --size-subheader: 28px;
+        --size-subheader: 2.8rem;
     }
     .header,
     .inner p {
-        --size-default: 20px;
+        --size-default: 2rem;
     }
     .fullscreen {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
     .inner footer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
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 2e81e69c03..88cf966b6f 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.module.css b/frontends/web/src/routes/account/account.module.css
index 64d50f5c46..4331c4fcfe 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/frontends/web/src/routes/account/account.module.css
@@ -35,17 +35,13 @@
     width: 17px;
 }
 
-.button {
-    height: 37px;
-}
-
 @media (max-width: 768px) {
     .accountHeader {
         padding: 0 var(--space-half);
     }
 
     .button {
-        height: 50px;
+        min-height: var(--button-height);
     }
 }
 
@@ -58,7 +54,7 @@
 }
 
 .actionsContainer {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;
@@ -205,7 +201,7 @@
     }
 
     .searchButton {
-        font-size: 14px;
+        font-size: 1.4rem;
         height: var(--item-height-small);
         text-align: left;
     }
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index 070334489c..d43d2f0569 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/buy-receive-cta.module.css b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
index 6344c21a81..83188704c2 100644
--- a/frontends/web/src/routes/account/info/buy-receive-cta.module.css
+++ b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
@@ -16,6 +16,6 @@
 @media (max-width: 425px) {
     .buttons button {
         padding: var(--space-quarter);
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index 26b0e0b507..c3771b8606 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -33,7 +33,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/inputs/receiver-address-input.module.css b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
index 923de5e8df..a3e6e91c05 100644
--- a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
+++ b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
@@ -18,20 +18,20 @@
 
 .qrButton {
   align-items: center;
-  display: flex;
+  background-color: transparent;
+  bottom: 0;
   border: none;
-  background-color: var(--background-secondary);
-  height: 36px;
-  width: 36px;
+  cursor: pointer;
+  display: flex;
+  height: var(--input-height);
   justify-content: center;
   padding: 0;
   position: absolute;
-  top: calc(50% - var(--space-quarter));
-  right: calc(var(--spacing-default) - var(--space-quarter));
-  cursor: pointer;
+  right: 0.75rem;
+  width: 36px;
 }
 
 .qrButton img {
-  width: 18px;
-  height: 18px;
+  width: 1.8rem;
+  height: 1.8rem;
 }
diff --git a/frontends/web/src/routes/account/send/feetargets.module.css b/frontends/web/src/routes/account/send/feetargets.module.css
index 5b42dfff47..6427f0a3c4 100644
--- a/frontends/web/src/routes/account/send/feetargets.module.css
+++ b/frontends/web/src/routes/account/send/feetargets.module.css
@@ -58,11 +58,13 @@
 /* styles to overwrite default dropdown styling to make it fit into send */
 .priority :global(.react-select__control) {
     border-color: var(--background-quaternary);
-    height: 52px;
+    border-radius: 2px;
+    border-width: var(--border-width);
+    margin-bottom: var(--space-quarter);
+    min-height: var(--input-height);
     padding-bottom: 0;
     padding-top: 0;
     z-index: 1;
-    margin-bottom: var(--space-quarter);
 }
 
 @media (min-width: 640px) {
@@ -113,13 +115,15 @@
 
 .rowCustomFee .priority :global(.react-select__control:not(:hover)) {
     border-right-color: var(--background-secondary);
+    border-width: var(--border-width);
 }
 
 .customFeeUnit {
-    bottom: 0;
+    bottom: var(--space-quarter);
     color: var(--color-secondary);
-    font-size: var(--size-default);
-    line-height: 50px;
+    font-size: min(var(--size-default), 20px);
+    line-height: 1;
+    height: calc(var(--input-height) * 0.5);
     padding-right: var(--space-half);
     position: absolute;
     right: 0;
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index d65da56922..ba20700251 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -101,13 +101,13 @@
 }
 
 .coinName {
+    align-items: center;
     display: flex;
 }
 
 .coinName img {
     flex-shrink: 0;
     margin-right: var(--spacing-default);
-    vertical-align: middle;
 }
 
 .coinUnit {
@@ -188,13 +188,4 @@
         padding-bottom: var(--spacing-default);
     }
 
-    .coinName {
-        position: relative;
-    }
-
-    .coinName img {
-        left: -2rem;
-        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 5ee251b2be..0a2d0ace7a 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -22,7 +22,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--spacing-half);
-  min-height: 68px;
+  min-height: 6.8rem;
 }
 
 .summary {
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 2rem;
+  font-size: min(3.2rem, var(--header-default-font-size));
   display: flex;
   align-items: flex-end;
 }
@@ -91,8 +91,8 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 1.4rem;
-  padding: 0 .25rem;
+  font-size: min(2.2rem, 1.5rem);
+  padding: 0 4px;
 }
 
 .chartCanvas {
@@ -113,7 +113,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;
@@ -123,14 +123,14 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 1rem;
-  margin: 0 0 .25rem 0;
+  font-size: 1.6rem;
+  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..885e6b5e14 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,7 +1,9 @@
 
 .arrow img {
-  margin-right: .25rem;
+  height: 2rem;
+  margin-right: 4px;
   vertical-align: text-bottom;
+  width: 2rem;
 }
 
 .up {
@@ -13,10 +15,10 @@
 }
 
 .diffValue {
-  font-size: 1.2rem;
+  font-size: 1.9rem;
 }
 
 .diffUnit {
-  font-size: 1rem;
-  padding: 0 .25rem;
+  font-size: 1.6rem;
+  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/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
index 29d8204416..e11d73a905 100644
--- a/frontends/web/src/routes/accounts/all-accounts.module.css
+++ b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  font-size: 14px;
+  font-size: 1.4rem;
   gap: var(--space-half);
   width: 100%;
 }
@@ -57,7 +57,7 @@
   flex-basis: auto;
   flex-shrink: 0;
   flex-grow: 1;
-  font-size: 16px;
+  font-size: 1.6rem;
   justify-content: flex-end;
   margin-left: auto;
   overflow: hidden;
@@ -67,7 +67,7 @@
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 1.8rem;
   margin-left: 4px;
   margin-top: 6px;
   margin-right: -8px;
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
index 4e53332efa..3bd5d6420f 100644
--- a/frontends/web/src/routes/bitsurance/bitsurance.module.css
+++ b/frontends/web/src/routes/bitsurance/bitsurance.module.css
@@ -1,10 +1,10 @@
 .cardBody {
-  font-size: 16px;
+  font-size: 1.6rem;
   margin-bottom: calc(var(--space-half) + var(--space-quarter));
 }
 
 .cardBody2 {
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-bottom: var(--space-default);
 }
 
@@ -49,7 +49,7 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: 400;
   margin: 0;
   margin-bottom: var(--space-half);
@@ -84,6 +84,6 @@ ul.clean {
   }
 
   .title {
-    font-size: 16px;
+    font-size: 1.6rem;
   }
 }
diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css
index 3c85b7687a..5e234d913a 100644
--- a/frontends/web/src/routes/bitsurance/dashboard.module.css
+++ b/frontends/web/src/routes/bitsurance/dashboard.module.css
@@ -1,5 +1,5 @@
 .text {
-  font-size: 16px;
+  font-size: 1.6rem;
   margin: 0;
 }
 
@@ -21,7 +21,7 @@
 }
 
 .button span {
-  font-size: 20px;
+  font-size: 2rem;
   margin-bottom: 2px;
   margin-right: var(--space-quarter);
 }
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/market/components/countryselect.module.css b/frontends/web/src/routes/market/components/countryselect.module.css
index 55039c683c..2826525be4 100644
--- a/frontends/web/src/routes/market/components/countryselect.module.css
+++ b/frontends/web/src/routes/market/components/countryselect.module.css
@@ -3,7 +3,7 @@
 }
 
 .flag {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .globe {
diff --git a/frontends/web/src/routes/market/components/vendor-deals.module.css b/frontends/web/src/routes/market/components/vendor-deals.module.css
index ae172e3864..b4b43c50c3 100644
--- a/frontends/web/src/routes/market/components/vendor-deals.module.css
+++ b/frontends/web/src/routes/market/components/vendor-deals.module.css
@@ -59,7 +59,7 @@
 
 
 .radio {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     background-color: var(--background-secondary);
     border: 1px solid var(--background-quaternary);
     display: block;
diff --git a/frontends/web/src/routes/market/market.module.css b/frontends/web/src/routes/market/market.module.css
index 958d64ec66..a63bd30856 100644
--- a/frontends/web/src/routes/market/market.module.css
+++ b/frontends/web/src/routes/market/market.module.css
@@ -1,6 +1,6 @@
 .exchangeContainer,
 .exchangeContainer p {
-    --size-default: 14px;
+    --size-default: 1.4rem;
 }
 
 .exchangeContainer {
diff --git a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
index 03ad7704b7..9052a9aac8 100644
--- a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
+++ b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
@@ -4,7 +4,7 @@
 
 .settingName {
     color: var(--color-swissred);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-left: var(--space-quarter);
 }
\ No newline at end of file
diff --git a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
index c9a3d6206c..c476d0075d 100644
--- a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
+++ b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
@@ -11,7 +11,7 @@
 
 .labelText {
   display: inline-block;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1;
   margin-top: 2px;
 }
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index 022877e8d0..356f3934ad 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
@@ -32,7 +32,7 @@
 
 .primaryText {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -58,7 +58,7 @@
 
 .displayedValue {
     color: var(--color-secondary);
-    font-size: 14px;
+    font-size: 1.4rem;
     margin: 0;
     padding-left: var(--space-half);
     padding-right: 0;
@@ -77,7 +77,7 @@ button .displayedValue {
 
 .secondaryText {
     color: var(--color-secondary);
-    font-size: 14px;
+    font-size: 1.4rem;
     margin: 0;
     margin-top: var(--space-quarter);
 }
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
index 72a22b4837..0affa3aeed 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
@@ -54,13 +54,15 @@ export const SettingsItem = ({
       ${styles.rightContentContainer || ''}
       ${!notButton && styles.extraPadding || ''}
     `}>
-      <p className={`
-        ${displayedValue && styles.displayedValue || ''}
-        ${extraComponent && styles.withMargin || ''}
-        ${hideDisplayedValueOnSmall && styles.hideDisplayedValueOnSmall || ''}
-      `}>
-        {displayedValue}
-      </p>
+      {displayedValue && (
+        <p className={`
+          ${displayedValue && styles.displayedValue || ''}
+          ${extraComponent && styles.withMargin || ''}
+          ${hideDisplayedValueOnSmall && styles.hideDisplayedValueOnSmall || ''}
+        `}>
+          {displayedValue}
+        </p>
+      )}
       {canUpgrade && <RedDot width={8} height={8} />}
       {extraComponent ? extraComponent : null}
     </div>
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
index 0a4bc3eb2b..a5d224ff0e 100644
--- a/frontends/web/src/routes/settings/manage-accounts.module.css
+++ b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -23,7 +23,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    font-size: 20px;
+    font-size: 2rem;
     font-weight: 400;
     margin: 0 0 var(--space-quarter) 0;
     width: 50%;
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 98ce957a2f..a25706c48d 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -1,3 +1,11 @@
+html {
+    font-size: 62.5%; /* 1rem = 10px */
+}
+
+body {
+    font-size: 1.6rem; /* 16px base for body, this will be overwritten on Android  */
+}
+
 html,
 body {
     background-color: var(--background);
@@ -92,7 +100,7 @@ pre {
     background-color: var(--background-secondary);
     display: block;
     font-family: monospace;
-    font-size: 20px;
+    font-size: 2rem;
     margin: 0 0 var(--space-default) 0;
     padding: var(--space-default);
     text-align: center;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 175842019e..5f99af2e09 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -48,18 +48,18 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-large: 2rem;
-    --size-header: 24px;
-    --size-subheader: 18px;
-    --size-default: 14px;
-    --size-small: 12px;
-    --size-xsmall: 11px;
-    --size-title: 32px;
+    --size-large: 3.2rem;
+    --size-header: 2.4rem;
+    --size-subheader: min(1.8rem, 36px);
+    --size-default: 1.4rem;
+    --size-small:  min(1.2rem, 20px);
+    --size-xsmall: 1.1rem;
+    --size-title: min(3.2rem, 36px);
 
     /* spacing */
-    --spacing-large: 2rem;
-    --spacing-default: 1rem;
-    --spacing-half: .5rem;
+    --spacing-large: 32px;
+    --spacing-default: 16px;
+    --spacing-half: 8px;
 
     --space-large: 64px;
     --space-default: 32px;
@@ -87,6 +87,7 @@
 
     /* header */
     --header-height: 70px;
+    --header-default-font-size: min(2.4rem, 36px);
 
     /* content */
     --content-width: 1080px;
@@ -97,7 +98,12 @@
     --guide-width: 350px;
 
     /* bottom navigation */
-    --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));
+    --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
+
+    /* form elements */
+    --border-width: 0.1rem;
+    --button-height: min(5rem, 70px);
+    --input-height: min(5.2rem, 72px);
 }
 
 :root,
@@ -194,15 +200,15 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 18px;
+        --size-title: min(1.8rem, 36px);
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --size-header: 20px;
-        --size-subheader: 16px;
-        --size-title: 16px;
-        --size-default: 16px;
+        --size-header: min(2rem, 36px);
+        --size-subheader: min(1.6rem, 36px);
+        --size-title: min(1.6rem, 36px);
+        --size-default: min(1.6rem, 36px);
     }
 }