diff --git a/src/Mobile.vue b/src/Mobile.vue
index aa023b52..203ac112 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -1,6 +1,6 @@
 <template>
     <f7-app :params="f7params">
-        <f7-view id="main-view" main url="/" :push-state="true" :push-state-animate="false"></f7-view>
+        <f7-view id="main-view" class="safe-areas" main url="/" :push-state="true" :push-state-animate="false"></f7-view>
     </f7-app>
 </template>
 
diff --git a/src/views/mobile/About.vue b/src/views/mobile/About.vue
index 4f68337b..b159e684 100644
--- a/src/views/mobile/About.vue
+++ b/src/views/mobile/About.vue
@@ -3,7 +3,7 @@
         <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
 
         <f7-card>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
                     <f7-list-item :title="$t('Build Time')" :after="buildTime | moment($t('format.datetime.long'))"></f7-list-item>
diff --git a/src/views/mobile/ApplicationLock.vue b/src/views/mobile/ApplicationLock.vue
index 717103f6..15bc1d22 100644
--- a/src/views/mobile/ApplicationLock.vue
+++ b/src/views/mobile/ApplicationLock.vue
@@ -6,7 +6,7 @@
         </f7-navbar>
 
         <f7-card v-if="isEnableApplicationLock">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
                     <f7-list-item v-if="isSupportedWebAuthn">
@@ -19,7 +19,7 @@
         </f7-card>
 
         <f7-card v-else-if="!isEnableApplicationLock">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
                     <f7-list-button @click="enable(null)">{{ $t('Enable') }}</f7-list-button>
diff --git a/src/views/mobile/ExchangeRates.vue b/src/views/mobile/ExchangeRates.vue
index f8ec2091..86a68e18 100644
--- a/src/views/mobile/ExchangeRates.vue
+++ b/src/views/mobile/ExchangeRates.vue
@@ -9,7 +9,7 @@
         </f7-navbar>
 
         <f7-card>
-            <f7-card-content :padding="false" v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
+            <f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
                 <f7-list>
                     <f7-list-item
                         :title="$t('Base Currency')"
@@ -25,12 +25,12 @@
         </f7-card>
 
         <f7-card>
-            <f7-card-content :padding="false" v-if="!exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
+            <f7-card-content class="no-safe-areas" :padding="false" v-if="!exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
                 <f7-list>
                     <f7-list-item :title="$t('No exchange rates data')"></f7-list-item>
                 </f7-list>
             </f7-card-content>
-            <f7-card-content :padding="false" v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
+            <f7-card-content class="no-safe-areas" :padding="false" v-if="exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
                 <f7-list>
                     <f7-list-item v-for="exchangeRate in availableExchangeRates" :key="exchangeRate.currencyCode"
                                   :title="exchangeRate.currencyDisplayName"
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index 0d4a987d..7afc19d7 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -4,7 +4,7 @@
 
         <f7-block-title class="margin-top">{{ currentNickName }}</f7-block-title>
         <f7-card>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
                     <f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
@@ -16,7 +16,7 @@
 
         <f7-block-title>{{ $t('Application') }}</f7-block-title>
         <f7-card>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item
                         :key="currentLocale + '_lang'"
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index 421b11d1..85f415de 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -9,7 +9,7 @@
         </f7-navbar>
 
         <f7-card>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input
                         type="text"
diff --git a/src/views/mobile/accounts/AccountEdit.vue b/src/views/mobile/accounts/AccountEdit.vue
index 71939186..d9962ed0 100644
--- a/src/views/mobile/accounts/AccountEdit.vue
+++ b/src/views/mobile/accounts/AccountEdit.vue
@@ -9,7 +9,7 @@
         </f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input label="Account Category" placeholder="Category"></f7-list-input>
                     <f7-list-input label="Account Type" placeholder="Account Type"></f7-list-input>
@@ -18,7 +18,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input
                         type="select"
@@ -46,7 +46,7 @@
         </f7-card>
 
         <f7-card class="skeleton-text" v-if="loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
                     <f7-list-item header="Account Icon" after="Icon"></f7-list-item>
@@ -58,7 +58,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading && account.type === $constants.account.allAccountTypes.SingleAccount.toString()">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input
                         type="text"
@@ -107,7 +107,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts.toString()">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input
                         type="text"
@@ -149,7 +149,7 @@
 
         <f7-block class="no-padding no-margin" v-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts.toString()">
             <f7-card v-for="(subAccount, idx) in subAccounts" :key="idx">
-                <f7-card-content :padding="false">
+                <f7-card-content class="no-safe-areas" :padding="false">
                     <f7-list>
                         <f7-list-input
                             type="text"
diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue
index c9afd6b2..e4524da2 100644
--- a/src/views/mobile/accounts/AccountList.vue
+++ b/src/views/mobile/accounts/AccountList.vue
@@ -33,7 +33,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>Account Category</f7-card-header>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
                 </f7-list>
@@ -42,7 +42,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>Account Category 2</f7-card-header>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
                     <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
@@ -52,7 +52,7 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>Account Category 3</f7-card-header>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item title="Account Name" after="0.00 USD"></f7-list-item>
                     <f7-list-item title="Account Name 2" after="0.00 USD"></f7-list-item>
@@ -61,7 +61,7 @@
         </f7-card>
 
         <f7-card v-if="!loading && noAvailableAccount">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('No available account')"></f7-list-item>
                 </f7-list>
@@ -75,7 +75,7 @@
                     <span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) | currency(defaultCurrency) }}</span>
                 </small>
             </f7-card-header>
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list sortable :sortable-enabled="sortable" @sortable:sort="onSort">
                     <f7-list-item v-for="account in accounts[accountCategory.id]" v-show="showHidden || !account.hidden"
                                   :key="account.id" :id="account | accountDomId"
diff --git a/src/views/mobile/users/SessionList.vue b/src/views/mobile/users/SessionList.vue
index e201d612..446f140a 100644
--- a/src/views/mobile/users/SessionList.vue
+++ b/src/views/mobile/users/SessionList.vue
@@ -9,7 +9,7 @@
         </f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list media-list>
                     <f7-list-item class="list-item-media-valign-middle"
                                   title="Current"
@@ -22,7 +22,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list media-list>
                     <f7-list-item class="list-item-media-valign-middle" swipeout
                                   v-for="token in tokens"
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index 1d3199aa..e5d3fabe 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -3,7 +3,7 @@
         <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item title="Status" after="Unknown"></f7-list-item>
                     <f7-list-button class="disabled">Operate</f7-list-button>
@@ -12,7 +12,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading && status === true">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Status')" :after="$t('Enabled')"></f7-list-item>
                     <f7-list-button :class="{ 'disabled': regenerating }" @click="regenerateBackupCode(null)">{{ $t('Regenerate Backup Codes') }}</f7-list-button>
@@ -22,7 +22,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading && status === false">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-item :title="$t('Status')" :after="$t('Disabled')"></f7-list-item>
                     <f7-list-button :class="{ 'disabled': enabling }" @click="enable">{{ $t('Enable') }}</f7-list-button>
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 8081ff93..8e73b972 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -9,7 +9,7 @@
         </f7-navbar>
 
         <f7-card class="skeleton-text" v-if="loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input label="Password" placeholder="Your password"></f7-list-input>
                     <f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input>
@@ -21,7 +21,7 @@
         </f7-card>
 
         <f7-card v-else-if="!loading">
-            <f7-card-content :padding="false">
+            <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
                     <f7-list-input
                         type="password"