diff --git a/src/Mobile.vue b/src/Mobile.vue
index 2fc39bca..b05dc017 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -54,6 +54,14 @@ body {
     word-break: break-all;
 }
 
+.full-line {
+    width: 100%;
+}
+
+.icon-after-text {
+    margin-left: 6px;
+}
+
 .lab-list-item-error-info div.item-footer {
     color: var(--f7-input-error-text-color)
 }
diff --git a/src/views/mobile/Home.vue b/src/views/mobile/Home.vue
index c35a7f51..982891aa 100644
--- a/src/views/mobile/Home.vue
+++ b/src/views/mobile/Home.vue
@@ -9,11 +9,25 @@
         </f7-list>
 
         <f7-toolbar tabbar labels bottom>
-            <f7-link href="/transaction/details" class="lab-toolbar-link-with-icon" icon-f7="square_list" :text="$t('Details')"></f7-link>
-            <f7-link href="/account/list" class="lab-toolbar-link-with-icon" icon-f7="creditcard" :text="$t('Accounts')"></f7-link>
-            <f7-link href="/transaction/new" class="lab-toolbar-icon-only" icon-f7="plus_square" icon-size="42px"></f7-link>
-            <f7-link href="/statistic/overview" class="lab-toolbar-link-with-icon" icon-f7="chart_pie" :text="$t('Statistics')"></f7-link>
-            <f7-link href="/settings" class="lab-toolbar-link-with-icon" icon-f7="gear_alt" :text="$t('Settings')"></f7-link>
+            <f7-link href="/transaction/details">
+                <f7-icon f7="square_list"></f7-icon>
+                <span class="tabbar-label">{{ $t('Details') }}</span>
+            </f7-link>
+            <f7-link href="/account/list">
+                <f7-icon f7="creditcard"></f7-icon>
+                <span class="tabbar-label">{{ $t('Accounts') }}</span>
+            </f7-link>
+            <f7-link href="/transaction/new">
+                <f7-icon f7="plus_square" size="42px" class="lab-tarbar-big-icon"></f7-icon>
+            </f7-link>
+            <f7-link href="/statistic/overview">
+                <f7-icon f7="chart_pie"></f7-icon>
+                <span class="tabbar-label">{{ $t('Statistics') }}</span>
+            </f7-link>
+            <f7-link href="/settings">
+                <f7-icon f7="gear_alt"></f7-icon>
+                <span class="tabbar-label">{{ $t('Settings') }}</span>
+            </f7-link>
         </f7-toolbar>
     </f7-page>
 </template>
@@ -23,13 +37,7 @@ export default {}
 </script>
 
 <style>
-.lab-toolbar-link-with-icon i+span {
-    font-size: 11px;
-    margin-top: 3px;
-    margin-left: 0;
-}
-
-.lab-toolbar-icon-only i {
+.lab-tarbar-big-icon {
     margin-top: 7px;
     margin-left: 0;
 }
diff --git a/src/views/mobile/Login.vue b/src/views/mobile/Login.vue
index 35f25455..373e6e4e 100644
--- a/src/views/mobile/Login.vue
+++ b/src/views/mobile/Login.vue
@@ -61,7 +61,7 @@
                     <div style="font-size: 18px"><b v-t="'Two-Factor Authentication'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <f7-list no-hairlines class="twofa-auth-form">
+                    <f7-list no-hairlines class="no-margin-top margin-bottom">
                         <f7-list-input
                             type="number"
                             outline
@@ -278,10 +278,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.twofa-auth-form {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-</style>
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index 8e53a5f4..aa14594b 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -27,11 +27,13 @@
                     <div style="font-size: 18px"><b v-t="'Passcode'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="input-passcode-tips">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
-                    <div class="input-passcode-qrcode-container">
-                        <img class="input-passcode-qrcode-img" :src="new2FAQRCode" />
+                    <p class="no-margin-top margin-bottom-half">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
+                    <div class="row">
+                        <div class="col-100 text-align-center">
+                            <img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
+                        </div>
                     </div>
-                    <f7-list no-hairlines class="input-passcode-form">
+                    <f7-list no-hairlines class="no-margin-top margin-bottom">
                         <f7-list-input
                             type="number"
                             outline
@@ -58,8 +60,8 @@
                     <div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="input-password-tips">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
-                    <f7-list no-hairlines class="input-password-form">
+                    <p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
+                    <f7-list no-hairlines class="no-margin-top margin-bottom">
                         <f7-list-input
                             type="password"
                             outline
@@ -86,8 +88,8 @@
                     <div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="input-password-tips">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
-                    <f7-list no-hairlines class="input-password-form">
+                    <p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
+                    <f7-list no-hairlines class="no-margin-top margin-bottom">
                         <f7-list-input
                             type="password"
                             outline
@@ -114,12 +116,12 @@
                     <div style="font-size: 18px"><b v-t="'Backup Code'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="input-password-tips">
+                    <p class="no-margin-top margin-bottom-half">
                         <span>{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}</span>
                         <f7-link icon-only icon-f7="doc_on_doc" icon-size="16px" class="icon-after-text"
                                  v-clipboard:copy="currentBackupCode" v-clipboard:success="onBackupCodeCopied"></f7-link>
                     </p>
-                    <textarea class="backup-code-textarea" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
+                    <textarea class="full-line" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
                     <div class="margin-top text-align-center">
                         <f7-link @click="showBackupCodeSheet = false" :text="$t('Close')"></f7-link>
                     </div>
@@ -343,41 +345,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.input-passcode-tips {
-    margin-top: 0;
-}
-
-.input-passcode-qrcode-container {
-    width: 100%;
-    text-align: center;
-}
-
-.input-passcode-qrcode-img {
-    width: 240px;
-    height: 240px;
-}
-
-.input-passcode-form {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-.input-password-tips {
-    margin-top: 0;
-}
-
-.input-password-tips .icon-after-text {
-    margin-left: 6px;
-}
-
-.input-password-form {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-.backup-code-textarea {
-    width: 100%;
-}
-</style>
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 7e066916..135297ed 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -72,8 +72,8 @@
                     <div style="font-size: 18px"><b v-t="'Current Password'"></b></div>
                 </div>
                 <div class="padding-horizontal padding-bottom">
-                    <p class="input-password-tips">{{ $t('Please enter your current password when modifying your password') }}</p>
-                    <f7-list no-hairlines class="input-password-form">
+                    <p class="no-margin-top">{{ $t('Please enter your current password when modifying your password') }}</p>
+                    <f7-list no-hairlines class="no-margin-top margin-bottom">
                         <f7-list-input
                             type="password"
                             outline
@@ -255,14 +255,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.input-password-tips {
-    margin-top: 0;
-}
-
-.input-password-form {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-</style>