diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index 33446dd3..87ca347e 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -13,7 +13,7 @@ import { mapStores } from 'pinia';
 import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
-import { isModalShowing } from '@/lib/ui.mobile.js';
+import { isModalShowing, setAppFontSize } from '@/lib/ui.mobile.js';
 
 export default {
     data() {
@@ -110,6 +110,8 @@ export default {
         }
     },
     mounted() {
+        setAppFontSize(this.$settings.getFontSize());
+
         f7ready((f7) => {
             this.isDarkMode = f7.darkMode;
             this.setThemeColorMeta(f7.darkMode);
@@ -215,7 +217,7 @@ body {
 }
 
 .smaller {
-    font-size: 10px;
+    font-size: var(--ebk-smaller-font-size);
 }
 
 .readonly {
@@ -258,13 +260,204 @@ body {
 }
 
 i.icon.la, i.icon.las, i.icon.lab {
-    font-size: 28px;
+    font-size: var(--ebk-icon-font-size);
+}
+
+.ios .searchbar-disable-button {
+    font-size: var(--f7-searchbar-disable-button-font-size);
 }
 
 .chip.chip-placeholder {
     border: 0;
 }
 
+/** multiple font size **/
+:root {
+    --ebk-icon-font-size: 28px;
+    --ebk-icon-text-margin: 2px;
+    --ebk-hide-icon-font-size: 18px;
+    --ebk-big-icon-button-size: 42px;
+    --ebk-right-bottom-icon-font-size: 13px;
+    --ebk-list-item-checked-icon-font-size: 20px;
+    --ebk-smaller-font-size: 10px;
+    --ebk-large-footer-font-size: 13px;
+    --ebk-sheet-title-font-size: 18px;
+    --ebk-numpad-value-height: 50px;
+    --ebk-numpad-value-small-font-size: 20px;
+    --ebk-numpad-value-normal-font-size: 22px;
+    --ebk-numpad-value-large-font-size: 24px;
+    --ebk-numpad-normal-button-font-size: 28px;
+    --ebk-numpad-confirm-button-font-size: 20px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 18px;
+    --ebk-pie-chart-toolbox-text-font-size: 16px;
+    --ebk-account-list-group-title-height: 36px;
+    --ebk-transaction-date-width: 25px;
+    --ebk-transaction-day-font-size: 16px;
+    --ebk-transaction-day-of-week-font-size: 12px;
+    --ebk-license-popup-title-font-size: 30px;
+}
+
+:root.font-large {
+    font-size: 17px;
+    --f7-font-size: 17px;
+    --f7-navbar-font-size: 20px;
+    --f7-searchbar-input-font-size: 20px;
+    --f7-searchbar-disable-button-font-size: 20px;
+    --f7-toolbar-font-size: 20px;
+    --f7-tabbar-icon-size: 30px;
+    --f7-toolbar-height: 60px;
+    --f7-tabbar-icons-height: 60px;
+    --f7-tabbar-label-font-size: 17px;
+    --f7-label-font-size: 16px;
+    --f7-input-font-size: 20px;
+    --f7-button-font-size: 18px;
+    --f7-button-small-font-size: 15px;
+    --f7-button-large-font-size: 20px;
+    --f7-chip-font-size: 16px;
+    --f7-block-title-font-size: 20px;
+    --f7-block-font-size: 20px;
+    --f7-block-footer-font-size: 15px;
+    --f7-card-header-font-size: 20px;
+    --f7-list-group-title-font-size: 22px;
+    --f7-list-item-header-font-size: 16px;
+    --f7-list-item-title-font-size: 20px;
+    --f7-list-item-text-font-size: 17px;
+    --f7-list-font-size: 20px;
+    --f7-list-item-after-font-size: 20px;
+    --f7-list-item-footer-font-size: 15px;
+    --f7-list-button-font-size: 20px;
+    --f7-treeview-label-font-size: 20px;
+    --f7-swipeout-button-font-size: 20px;
+    --f7-dialog-title-font-size: 20px;
+    --f7-dialog-font-size: 17px;
+    --f7-dialog-button-font-size: 20px;
+    --f7-actions-button-font-size: 22px;
+    --ebk-icon-font-size: 32px;
+    --ebk-icon-text-margin: 4px;
+    --ebk-hide-icon-font-size: 24px;
+    --ebk-big-icon-button-size: 52px;
+    --ebk-right-bottom-icon-font-size: 15px;
+    --ebk-list-item-checked-icon-font-size: 24px;
+    --ebk-smaller-font-size: 14px;
+    --ebk-large-footer-font-size: 16px;
+    --ebk-sheet-title-font-size: 22px;
+    --ebk-numpad-value-height: 60px;
+    --ebk-numpad-value-small-font-size: 22px;
+    --ebk-numpad-value-normal-font-size: 26px;
+    --ebk-numpad-value-large-font-size: 30px;
+    --ebk-numpad-normal-button-font-size: 32px;
+    --ebk-numpad-confirm-button-font-size: 22px;
+    --ebk-amount-small-font-size: 32px;
+    --ebk-amount-normal-font-size: 36px;
+    --ebk-amount-large-font-size: 40px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 22px;
+    --ebk-pie-chart-toolbox-text-font-size: 20px;
+    --ebk-account-list-group-title-height: 40px;
+    --ebk-transaction-date-width: 32px;
+    --ebk-transaction-day-font-size: 20px;
+    --ebk-transaction-day-of-week-font-size: 15px;
+    --ebk-license-popup-title-font-size: 36px;
+}
+
+:root.font-extra-large {
+    font-size: 21px;
+    --f7-font-size: 21px;
+    --f7-navbar-font-size: 24px;
+    --f7-searchbar-input-font-size: 24px;
+    --f7-searchbar-disable-button-font-size: 24px;
+    --f7-toolbar-font-size: 24px;
+    --f7-tabbar-icon-size: 30px;
+    --f7-toolbar-height: 66px;
+    --f7-tabbar-icons-height: 66px;
+    --f7-tabbar-label-font-size: 21px;
+    --f7-label-font-size: 20px;
+    --f7-label-height: 22px;
+    --f7-input-font-size: 24px;
+    --f7-input-height: 60px;
+    --f7-button-font-size: 22px;
+    --f7-button-small-font-size: 19px;
+    --f7-button-large-font-size: 24px;
+    --f7-button-height: 32px;
+    --f7-chip-font-size: 20px;
+    --f7-block-title-font-size: 24px;
+    --f7-block-title-line-height: 26px;
+    --f7-block-font-size: 24px;
+    --f7-block-footer-font-size: 19px;
+    --f7-card-header-font-size: 24px;
+    --f7-list-group-title-font-size: 26px;
+    --f7-list-group-title-height: 48px;
+    --f7-list-item-header-font-size: 20px;
+    --f7-list-item-title-font-size: 24px;
+    --f7-list-item-text-font-size: 21px;
+    --f7-list-font-size: 24px;
+    --f7-list-item-after-font-size: 24px;
+    --f7-list-item-footer-font-size: 19px;
+    --f7-list-button-font-size: 24px;
+    --f7-list-item-min-height: 54px;
+    --f7-treeview-label-font-size: 24px;
+    --f7-swipeout-button-font-size: 24px;
+    --f7-dialog-title-font-size: 24px;
+    --f7-dialog-font-size: 21px;
+    --f7-dialog-button-font-size: 24px;
+    --f7-actions-button-font-size: 26px;
+    --ebk-icon-font-size: 36px;
+    --ebk-icon-text-margin: 4px;
+    --ebk-hide-icon-font-size: 28px;
+    --ebk-big-icon-button-size: 58px;
+    --ebk-right-bottom-icon-font-size: 19px;
+    --ebk-list-item-checked-icon-font-size: 28px;
+    --ebk-smaller-font-size: 18px;
+    --ebk-large-footer-font-size: 20px;
+    --ebk-sheet-title-font-size: 26px;
+    --ebk-numpad-value-height: 60px;
+    --ebk-numpad-value-small-font-size: 26px;
+    --ebk-numpad-value-normal-font-size: 26px;
+    --ebk-numpad-value-large-font-size: 30px;
+    --ebk-numpad-normal-button-font-size: 32px;
+    --ebk-numpad-confirm-button-font-size: 26px;
+    --ebk-amount-small-font-size: 34px;
+    --ebk-amount-normal-font-size: 40px;
+    --ebk-amount-large-font-size: 44px;
+    --ebk-pie-chart-toolbox-percentage-height: 30px;
+    --ebk-pie-chart-toolbox-percentage-font-size: 26px;
+    --ebk-pie-chart-toolbox-text-font-size: 24px;
+    --ebk-account-list-group-title-height: 44px;
+    --ebk-transaction-date-width: 40px;
+    --ebk-transaction-day-font-size: 24px;
+    --ebk-transaction-day-of-week-font-size: 19px;
+    --ebk-license-popup-title-font-size: 40px;
+}
+
+/** custom class **/
+.ebk-small-amount {
+    --f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;
+}
+
+.ebk-normal-amount {
+    --f7-list-item-title-font-size: var(--ebk-amount-normal-font-size) !important;
+}
+
+.ebk-large-amount {
+    --f7-list-item-title-font-size: var(--ebk-amount-large-font-size) !important;
+}
+
+.ebk-list-item-error-info div.item-footer {
+    color: var(--f7-input-error-text-color)
+}
+
+.ebk-sheet-title {
+    font-size: var(--ebk-sheet-title-font-size);
+}
+
+.ebk-hide-icon {
+    font-size: var(--ebk-hide-icon-font-size);
+}
+
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;
@@ -426,7 +619,7 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 .list .item-content .list-item-checked-icon {
-    font-size: 20px;
+    font-size: var(--ebk-list-item-checked-icon-font-size);
     color: var(--f7-radio-active-color, var(--f7-theme-color));
     margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
 }
@@ -439,10 +632,6 @@ i.icon.la, i.icon.las, i.icon.lab {
     margin: 0;
 }
 
-.ebk-list-item-error-info div.item-footer {
-    color: var(--f7-input-error-text-color)
-}
-
 .skeleton-text .list-item-toggle .item-after {
     height: var(--f7-toggle-height);
 }
@@ -472,9 +661,9 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 .badge.right-bottom-icon > .icon {
-    font-size: 13px;
-    width: 13px;
-    height: 13px;
+    font-size: var(--ebk-right-bottom-icon-font-size);
+    width: var(--ebk-right-bottom-icon-font-size);
+    height: var(--ebk-right-bottom-icon-font-size);
 }
 
 /** Swipe handler **/
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index 1b0d87d1..bfb1b3d2 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+                <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin-top" v-if="hint">{{ hint }}</p>
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
index 93a60611..82a65c5f 100644
--- a/src/components/mobile/InformationSheet.vue
+++ b/src/components/mobile/InformationSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+                <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin-top margin-bottom-half" v-if="hint">
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index df7645ec..7ba3b526 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -13,7 +13,7 @@
         </f7-page-content>
         <f7-page-content class="no-margin-top no-padding-top" v-else-if="!knownMapProvider">
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px"><b>{{ $t('Unsupported Map Provider') }}</b></div>
+                <div class="ebk-sheet-title"><b>{{ $t('Unsupported Map Provider') }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin">{{ $t('Please refresh the page and try again. If the error is still displayed, make sure that server map settings are set correctly.') }}</p>
diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index b566d3db..be1d289a 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="numpad-values">
-                <span class="numpad-value" :style="{ fontSize: currentDisplayFontSize + 'px' }">{{ currentDisplay }}</span>
+                <span class="numpad-value" :class="currentDisplayNumClass">{{ currentDisplay }}</span>
             </div>
             <div class="numpad-buttons">
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(7)">
@@ -97,15 +97,15 @@ export default {
                 return currentValue;
             }
         },
-        currentDisplayFontSize() {
+        currentDisplayNumClass() {
             const currentDisplay = this.currentDisplay || '';
 
             if (currentDisplay.length >= 24) {
-                return 20;
+                return 'numpad-value-small';
             } else if (currentDisplay.length >= 16) {
-                return 22;
+                return 'numpad-value-normal';
             } else {
-                return 24;
+                return 'numpad-value-large';
             }
         },
         confirmText() {
@@ -333,12 +333,24 @@ export default {
     position: relative;
     padding-left: 16px;
     line-height: 1;
-    height: 50px;
+    height: var(--ebk-numpad-value-height);
     align-items: center;
     box-sizing: border-box;
     user-select: none;
 }
 
+.numpad-value-small {
+    font-size: var(--ebk-numpad-value-small-font-size);
+}
+
+.numpad-value-normal {
+    font-size: var(--ebk-numpad-value-normal-font-size);
+}
+
+.numpad-value-large {
+    font-size: var(--ebk-numpad-value-large-font-size);
+}
+
 .numpad-buttons {
     display: flex;
     flex-wrap: wrap;
@@ -374,7 +386,7 @@ export default {
 
 .numpad-button-text {
     display: block;
-    font-size: 28px;
+    font-size: var(--ebk-numpad-normal-button-font-size);
     font-weight: normal;
     line-height: 1;
 }
@@ -388,6 +400,6 @@ export default {
 }
 
 .numpad-button-text-confirm {
-    font-size: 20px;
+    font-size: var(--ebk-numpad-confirm-button-font-size);
 }
 </style>
diff --git a/src/components/mobile/PasscodeInputSheet.vue b/src/components/mobile/PasscodeInputSheet.vue
index 6fb92095..de90cf88 100644
--- a/src/components/mobile/PasscodeInputSheet.vue
+++ b/src/components/mobile/PasscodeInputSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+                <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
diff --git a/src/components/mobile/PasswordInputSheet.vue b/src/components/mobile/PasswordInputSheet.vue
index 116edd95..1ed37011 100644
--- a/src/components/mobile/PasswordInputSheet.vue
+++ b/src/components/mobile/PasswordInputSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+                <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index dece9b0b..e46dc264 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -308,9 +308,9 @@ export default {
 }
 
 .pie-chart-toolbox-info {
-    --f7-chip-height: 30px;
-    --f7-chip-font-size: 18px;
-    font-size: 16px;
+    --f7-chip-height: var(--ebk-pie-chart-toolbox-percentage-height);
+    --f7-chip-font-size: var(--ebk-pie-chart-toolbox-percentage-font-size);
+    font-size: var(--ebk-pie-chart-toolbox-text-font-size);
     align-self: center;
 }
 
diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
index bcc9eac9..372646bb 100644
--- a/src/components/mobile/PinCodeInputSheet.vue
+++ b/src/components/mobile/PinCodeInputSheet.vue
@@ -4,7 +4,7 @@
         <div class="swipe-handler" style="z-index: 10"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
-                <div style="font-size: 18px"><b>{{ title }}</b></div>
+                <div class="ebk-sheet-title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin">{{ hint }}</p>
diff --git a/src/lib/settings.js b/src/lib/settings.js
index 84030d3b..e9e6fa99 100644
--- a/src/lib/settings.js
+++ b/src/lib/settings.js
@@ -8,6 +8,7 @@ const serverSettingsCookieKey = 'ebk_server_settings';
 
 const defaultSettings = {
     theme: 'auto',
+    fontSize: 'default',
     timeZone: '',
     debug: false,
     applicationLock: false,
@@ -126,6 +127,8 @@ export default {
     isProduction: () => process.env.NODE_ENV === 'production',
     getTheme: () => getOption('theme'),
     setTheme: value => setOption('theme', value),
+    getFontSize: () => getOption('fontSize'),
+    setFontSize: value => setOption('fontSize', value),
     getTimezone: () => getOption('timeZone'),
     setTimezone: value => setOption('timeZone', value),
     isEnableDebug: () => getOption('debug'),
diff --git a/src/lib/ui.mobile.js b/src/lib/ui.mobile.js
index 9359527d..543705dc 100644
--- a/src/lib/ui.mobile.js
+++ b/src/lib/ui.mobile.js
@@ -129,3 +129,19 @@ export function autoChangeTextareaSize(el) {
         el.style.height = el.scrollHeight + 'px';
     });
 }
+
+export function setAppFontSize(value) {
+    let fontSizeClass = 'font-default';
+
+    if (value === 'extraLarge') {
+        fontSizeClass = 'font-extra-large';
+    } else if (value === 'large') {
+        fontSizeClass = 'font-large';
+    }
+
+    elements('html')
+        .removeClass('font-default')
+        .removeClass('font-large')
+        .removeClass('font-extra-large')
+        .addClass(fontSizeClass);
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index 1b85ca90..eabfbf47 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -937,6 +937,10 @@ export default {
     'Theme': 'Theme',
     'Light': 'Light',
     'Dark': 'Dark',
+    'Font Size': 'Font Size',
+    'Default': 'Default',
+    'Large': 'Large',
+    'Extra Large': 'Extra Large',
     'Timezone': 'Timezone',
     'System Default': 'System Default',
     'Language Default': 'Language Default',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 2620439a..a0be9e2e 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -937,6 +937,10 @@ export default {
     'Theme': '主题',
     'Light': '浅色',
     'Dark': '深色',
+    'Font Size': '字体大小',
+    'Default': '默认',
+    'Large': '大',
+    'Extra Large': '最大',
     'Timezone': '时区',
     'System Default': '系统默认',
     'Language Default': '语言默认',
diff --git a/src/views/mobile/AboutPage.vue b/src/views/mobile/AboutPage.vue
index a4cc26c3..54a9f0e7 100644
--- a/src/views/mobile/AboutPage.vue
+++ b/src/views/mobile/AboutPage.vue
@@ -79,6 +79,6 @@ export default {
 }
 
 .license-popup .subnavbar-title {
-    --f7-subnavbar-title-font-size: 30px;
+    --f7-subnavbar-title-font-size: var(--ebk-license-popup-title-font-size);
 }
 </style>
diff --git a/src/views/mobile/ExchangeRatesPage.vue b/src/views/mobile/ExchangeRatesPage.vue
index ff668645..0cd3eaa1 100644
--- a/src/views/mobile/ExchangeRatesPage.vue
+++ b/src/views/mobile/ExchangeRatesPage.vue
@@ -29,7 +29,7 @@
             <f7-list-item
                 class="currency-base-amount"
                 link="#" no-chevron
-                :style="{ fontSize: baseAmountFontSize + 'px' }"
+                :class="baseAmountFontSizeClass"
                 :header="$t('Base Amount')"
                 :title="displayBaseAmount"
                 @click="showBaseAmountSheet = true"
@@ -145,8 +145,14 @@ export default {
         displayBaseAmount() {
             return this.$locale.getDisplayCurrency(this.baseAmount);
         },
-        baseAmountFontSize() {
-            return this.getFontSizeByAmount(this.baseAmount);
+        baseAmountFontSizeClass() {
+            if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
+                return 'ebk-small-amount';
+            } else if (this.baseAmount >= 1000000 || this.baseAmount <= -1000000) {
+                return 'ebk-normal-amount';
+            } else {
+                return 'ebk-large-amount';
+            }
         },
         allowedMinAmount() {
             return transactionConstants.minAmount;
@@ -247,15 +253,6 @@ export default {
 
             this.baseCurrency = currency;
             this.baseAmount = stringCurrencyToNumeric(amount.toString());
-        },
-        getFontSizeByAmount(amount) {
-            if (amount >= 100000000 || amount <= -100000000) {
-                return 32;
-            } else if (amount >= 1000000 || amount <= -1000000) {
-                return 36;
-            } else {
-                return 40;
-            }
         }
     }
 }
diff --git a/src/views/mobile/HomePage.vue b/src/views/mobile/HomePage.vue
index dcd15f12..199e86c6 100644
--- a/src/views/mobile/HomePage.vue
+++ b/src/views/mobile/HomePage.vue
@@ -22,7 +22,7 @@
                     <span class="month-expense" v-if="loading">0.00 USD</span>
                     <span class="month-expense" v-else-if="!loading">{{ transactionOverview.thisMonth.expenseAmount }}</span>
                     <f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()">
-                        <f7-icon :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
+                        <f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>
                 <p class="no-margin">
@@ -432,7 +432,7 @@ export default {
 
 .overview-transaction-list .overview-transaction-footer {
     padding-top: 6px;
-    font-size: 13px;
+    font-size: var(--ebk-large-footer-font-size);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -453,13 +453,13 @@ export default {
 }
 
 .tabbar.main-tabbar .link i + span.tabbar-label {
-    margin-top: 2px;
+    margin-top: var(--ebk-icon-text-margin);
 }
 
 .tabbar.main-tabbar .link i.ebk-tarbar-big-icon {
-    font-size: 42px;
-    width: 42px;
-    height: 42px;
-    line-height: 42px;
+    font-size: var(--ebk-big-icon-button-size);
+    width: var(--ebk-big-icon-button-size);
+    height: var(--ebk-big-icon-button-size);
+    line-height: var(--ebk-big-icon-button-size);
 }
 </style>
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index 47c352aa..1001d82e 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -71,7 +71,7 @@
         >
             <f7-page-content>
                 <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Two-Factor Authentication') }}</b></div>
+                    <div class="ebk-sheet-title"><b>{{ $t('Two-Factor Authentication') }}</b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
                     <f7-list strong class="no-margin">
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index 852b5163..afdc0c89 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -26,6 +26,17 @@
                 </select>
             </f7-list-item>
 
+            <f7-list-item
+                :key="currentLocale + '_fontSize'"
+                :title="$t('Font Size')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Font Size'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                <select v-model="fontSize">
+                    <option value="default">{{ $t('Default') }}</option>
+                    <option value="large">{{ $t('Large') }}</option>
+                    <option value="extraLarge">{{ $t('Extra Large') }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item
                 :key="currentLocale + '_timezone'"
                 :title="$t('Timezone')"
@@ -102,6 +113,7 @@ import { useUserStore } from '@/stores/user.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import currencyConstants from '@/consts/currency.js';
+import { setAppFontSize } from '@/lib/ui.mobile.js';
 
 export default {
     props: [
@@ -135,6 +147,17 @@ export default {
                 }
             }
         },
+        fontSize: {
+            get: function () {
+                return this.$settings.getFontSize();
+            },
+            set: function (value) {
+                if (value !== this.$settings.getFontSize()) {
+                    this.$settings.setFontSize(value);
+                    setAppFontSize(value);
+                }
+            }
+        },
         currentTimezone: {
             get: function () {
                 return this.$locale.getTimezone();
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index 21ff60e3..6c3e8126 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -20,7 +20,7 @@
                     <span class="net-assets" v-if="loading">0.00 USD</span>
                     <span class="net-assets" v-else-if="!loading">{{ netAssets }}</span>
                     <f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
-                        <f7-icon :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
+                        <f7-icon class="ebk-hide-icon" :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
                     </f7-link>
                 </p>
                 <p class="no-margin">
@@ -463,8 +463,8 @@ export default {
 }
 
 .account-list {
-    --f7-list-group-title-height: 36px;
-    --f7-list-item-footer-font-size: 13px;
+    --f7-list-group-title-height: var(--ebk-account-list-group-title-height);
+    --f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
 }
 
 .account-list .item-footer {
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index 1c2a7535..b512855c 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -394,7 +394,7 @@ export default {
 
 <style>
 .category-list {
-    --f7-list-item-footer-font-size: 13px;
+    --f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
 }
 
 .category-list .item-footer {
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index 870af408..bebf8502 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -43,8 +43,7 @@
             <f7-list-item
                 class="transaction-edit-amount"
                 link="#" no-chevron
-                :class="{ 'readonly': mode === 'view', 'color-teal': transaction.type === allTransactionTypes.Expense, 'color-red': transaction.type === allTransactionTypes.Income }"
-                :style="{ fontSize: sourceAmountFontSize + 'px' }"
+                :class="sourceAmountClass"
                 :header="$t(sourceAmountName)"
                 :title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
                 @click="showSourceAmountSheet = true"
@@ -59,8 +58,7 @@
             <f7-list-item
                 class="transaction-edit-amount"
                 link="#" no-chevron
-                :class="{ 'readonly': mode === 'view' }"
-                :style="{ fontSize: destinationAmountFontSize + 'px' }"
+                :class="destinationAmountClass"
                 :header="$t('Transfer In Amount')"
                 :title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
                 @click="showDestinationAmountSheet = true"
@@ -608,11 +606,25 @@ export default {
         transactionDisplayTimezoneName() {
             return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
         },
-        sourceAmountFontSize() {
-            return this.getFontSizeByAmount(this.transaction.sourceAmount);
+        sourceAmountClass() {
+            const classes = {
+                'readonly': this.mode === 'view',
+                'color-teal': this.transaction.type === this.allTransactionTypes.Expense,
+                'color-red': this.transaction.type === this.allTransactionTypes.Income,
+            };
+
+            classes[this.getFontClassByAmount(this.transaction.sourceAmount)] = true;
+
+            return classes;
         },
-        destinationAmountFontSize() {
-            return this.getFontSizeByAmount(this.transaction.destinationAmount);
+        destinationAmountClass() {
+            const classes = {
+                'readonly': this.mode === 'view'
+            };
+
+            classes[this.getFontClassByAmount(this.transaction.destinationAmount)] = true;
+
+            return classes;
         },
         geoLocationStatusInfo() {
             if (this.geoLocationStatus === 'success') {
@@ -1006,13 +1018,13 @@ export default {
                 }
             }
         },
-        getFontSizeByAmount(amount) {
+        getFontClassByAmount(amount) {
             if (amount >= 100000000 || amount <= -100000000) {
-                return 32;
+                return 'ebk-small-amount';
             } else if (amount >= 1000000 || amount <= -1000000) {
-                return 36;
+                return 'ebk-normal-amount';
             } else {
-                return 40;
+                return 'ebk-large-amount';
             }
         },
         getDisplayAmount(amount, hideAmount) {
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 3fd4a5e7..4840b956 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -906,24 +906,24 @@ export default {
 }
 
 .list.transaction-info-list li.transaction-info .transaction-date {
-    width: 25px;
+    width: var(--ebk-transaction-date-width);
     margin-right: 6px;
 }
 
 .list.transaction-info-list li.transaction-info .transaction-day {
     opacity: 0.6;
-    font-size: 16px;
+    font-size: var(--ebk-transaction-day-font-size);
     font-weight: bold;
     text-align: left;
 }
 
 .list.transaction-info-list li.transaction-info .transaction-day-of-week {
     opacity: 0.6;
-    font-size: 12px;
+    font-size: var(--ebk-transaction-day-of-week-font-size);
 }
 
 .list.transaction-info-list li.transaction-info .transaction-comment {
-    font-size: 13px;
+    font-size: var(--ebk-large-footer-font-size);
     line-height: 20px;
     padding-top: 2px;
     padding-bottom: 2px;
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index afee1844..5b8aea97 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -30,7 +30,7 @@
             <div class="swipe-handler" style="z-index: 10"></div>
             <f7-page-content class="margin-top no-padding-top">
                 <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
+                    <div class="ebk-sheet-title"><b>{{ $t('Are you sure you want to export all data to csv file?') }}</b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
                     <p class="no-margin-top margin-bottom-half">{{ $t('It may take a long time, please wait for a few minutes.') }}</p>