diff --git a/src/locales/en.js b/src/locales/en.js
index 9fa4f797..026654ac 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -235,6 +235,8 @@ export default {
     'Cancel': 'Cancel',
     'Close': 'Close',
     'Submit': 'Submit',
+    'Add': 'Add',
+    'Save': 'Save',
     'Update': 'Update',
     'None': 'None',
     'Done': 'Done',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index ae23d6fd..d337d4f2 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -235,6 +235,8 @@ export default {
     'Cancel': '取消',
     'Close': '关闭',
     'Submit': '提交',
+    'Add': '添加',
+    'Save': '保存',
     'Update': '更新',
     'None': '无',
     'Done': '完成',
diff --git a/src/views/mobile/About.vue b/src/views/mobile/About.vue
index eccb8dd8..26e2231f 100644
--- a/src/views/mobile/About.vue
+++ b/src/views/mobile/About.vue
@@ -2,12 +2,16 @@
     <f7-page>
         <f7-navbar :title="$t('About')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list>
-            <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
-            <f7-list-item external :title="$t('Official Website')" after="https://github.com/mayswind/lab"
-                          link="https://github.com/mayswind/lab" target="_blank"></f7-list-item>
-            <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
-        </f7-list>
+        <f7-card>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item :title="$t('Version')" :after="version"></f7-list-item>
+                    <f7-list-item external :title="$t('Official Website')" after="https://github.com/mayswind/lab"
+                                  link="https://github.com/mayswind/lab" target="_blank"></f7-list-item>
+                    <f7-list-item :title="$t('License')" link="#" popup-open=".license-popup"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
         <f7-popup class="license-popup">
             <f7-page>
diff --git a/src/views/mobile/Settings.vue b/src/views/mobile/Settings.vue
index 5e6bbd36..fab4f2d9 100644
--- a/src/views/mobile/Settings.vue
+++ b/src/views/mobile/Settings.vue
@@ -1,47 +1,59 @@
 <template>
-    <f7-page :key="currentLocale">
+    <f7-page>
         <f7-navbar :title="$t('Settings')" :back-link="$t('Back')"></f7-navbar>
-        <f7-block-title>{{ userNickName }}</f7-block-title>
-        <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>
-            <f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
-            <f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button>
-        </f7-list>
+
+        <f7-block-title class="margin-top">{{ userNickName }}</f7-block-title>
+        <f7-card>
+            <f7-card-content :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>
+                    <f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
+                    <f7-list-button :class="{ 'disabled': logouting }" @click="logout">{{ $t('Log Out') }}</f7-list-button>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
         <f7-block-title>{{ $t('Application') }}</f7-block-title>
-        <f7-list>
-            <f7-list-item
-                :title="$t('Language')"
-                smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
-                <select v-model="currentLocale">
-                    <option v-for="(lang, locale) in allLanguages"
-                            :key="locale"
-                            :value="locale">{{ lang.displayName }}</option>
-                </select>
-            </f7-list-item>
-            <f7-list-item>
-                <span>{{ $t('Enable Thousands Separator') }}</span>
-                <f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle>
-            </f7-list-item>
-            <f7-list-item
-                :title="$t('Currency Display Mode')"
-                smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
-                <select v-model="currencyDisplayMode">
-                    <option value="none">{{ $t('None') }}</option>
-                    <option value="code">{{ $t('Currency Code') }}</option>
-                    <option value="name">{{ $t('Currency Name') }}</option>
-                </select>
-            </f7-list-item>
-            <f7-list-item>
-                <span>{{ $t('Enable Animate') }}</span>
-                <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
-            </f7-list-item>
-            <f7-list-item>
-                <span>{{ $t('Enable Auto Dark Mode') }}</span>
-                <f7-toggle :checked="isEnableAutoDarkMode" @toggle:change="isEnableAutoDarkMode = $event"></f7-toggle>
-            </f7-list-item>
-            <f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
-        </f7-list>
+        <f7-card>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item
+                        :key="currentLocale"
+                        :title="$t('Language')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
+                        <select v-model="currentLocale">
+                            <option v-for="(lang, locale) in allLanguages"
+                                    :key="locale"
+                                    :value="locale">{{ lang.displayName }}</option>
+                        </select>
+                    </f7-list-item>
+                    <f7-list-item>
+                        <span>{{ $t('Enable Thousands Separator') }}</span>
+                        <f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle>
+                    </f7-list-item>
+                    <f7-list-item
+                        :key="currentLocale"
+                        :title="$t('Currency Display Mode')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done') }">
+                        <select v-model="currencyDisplayMode">
+                            <option value="none">{{ $t('None') }}</option>
+                            <option value="code">{{ $t('Currency Code') }}</option>
+                            <option value="name">{{ $t('Currency Name') }}</option>
+                        </select>
+                    </f7-list-item>
+                    <f7-list-item>
+                        <span>{{ $t('Enable Animate') }}</span>
+                        <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
+                    </f7-list-item>
+                    <f7-list-item>
+                        <span>{{ $t('Enable Auto Dark Mode') }}</span>
+                        <f7-toggle :checked="isEnableAutoDarkMode" @toggle:change="isEnableAutoDarkMode = $event"></f7-toggle>
+                    </f7-list-item>
+                    <f7-list-item :title="$t('About')" link="/about" :after="version"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
     </f7-page>
 </template>
 
diff --git a/src/views/mobile/Signup.vue b/src/views/mobile/Signup.vue
index e268b9e8..3ec7e9b9 100644
--- a/src/views/mobile/Signup.vue
+++ b/src/views/mobile/Signup.vue
@@ -1,67 +1,76 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('Sign Up')" :back-link="$t('Back')"></f7-navbar>
-        <f7-list no-hairlines-md>
-            <f7-list-input
-                type="text"
-                clear-button
-                :label="$t('Username')"
-                :placeholder="$t('Your username')"
-                :value="user.username"
-                @input="user.username = $event.target.value"
-            ></f7-list-input>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Sign Up')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
 
-            <f7-list-input
-                type="password"
-                clear-button
-                :label="$t('Password')"
-                :placeholder="$t('Your password, at least 6 characters')"
-                :value="user.password"
-                @input="user.password = $event.target.value"
-            ></f7-list-input>
+        <f7-card>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-input
+                        type="text"
+                        clear-button
+                        :label="$t('Username')"
+                        :placeholder="$t('Your username')"
+                        :value="user.username"
+                        @input="user.username = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="password"
-                clear-button
-                :label="$t('Confirmation Password')"
-                :placeholder="$t('Re-enter the password')"
-                :value="user.confirmPassword"
-                @input="user.confirmPassword = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="password"
+                        clear-button
+                        :label="$t('Password')"
+                        :placeholder="$t('Your password, at least 6 characters')"
+                        :value="user.password"
+                        @input="user.password = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="email"
-                clear-button
-                :label="$t('E-mail')"
-                :placeholder="$t('Your email address')"
-                :value="user.email"
-                @input="user.email = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="password"
+                        clear-button
+                        :label="$t('Confirmation Password')"
+                        :placeholder="$t('Re-enter the password')"
+                        :value="user.confirmPassword"
+                        @input="user.confirmPassword = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="text"
-                clear-button
-                :label="$t('Nickname')"
-                :placeholder="$t('Your nickname')"
-                :value="user.nickname"
-                @input="user.nickname = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="email"
+                        clear-button
+                        :label="$t('E-mail')"
+                        :placeholder="$t('Your email address')"
+                        :value="user.email"
+                        @input="user.email = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="select"
-                :label="$t('Default Currency')"
-                :value="user.defaultCurrency"
-                @input="user.defaultCurrency = $event.target.value"
-            >
-                <option v-for="currency in allCurrencies"
-                        :key="currency.code"
-                        :value="currency.code">{{ currency.displayName }}</option>
-            </f7-list-input>
+                    <f7-list-input
+                        type="text"
+                        clear-button
+                        :label="$t('Nickname')"
+                        :placeholder="$t('Your nickname')"
+                        :value="user.nickname"
+                        @input="user.nickname = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
-        </f7-list>
+                    <f7-list-input
+                        type="select"
+                        :label="$t('Default Currency')"
+                        :value="user.defaultCurrency"
+                        @input="user.defaultCurrency = $event.target.value"
+                    >
+                        <option v-for="currency in allCurrencies"
+                                :key="currency.code"
+                                :value="currency.code">{{ currency.displayName }}</option>
+                    </f7-list-input>
 
-        <f7-button large fill :class="{ 'disabled': inputIsEmpty || signuping }" :text="$t('Sign Up')" @click="signup"></f7-button>
+                    <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
     </f7-page>
 </template>
 
@@ -79,7 +88,7 @@ export default {
                 nickname: '',
                 defaultCurrency: self.$t('default.currency')
             },
-            signuping: false
+            submitting: false
         };
     },
     computed: {
@@ -118,7 +127,7 @@ export default {
         }
     },
     methods: {
-        signup() {
+        submit() {
             const self = this;
             const router = self.$f7router;
 
@@ -129,8 +138,8 @@ export default {
                 return;
             }
 
-            self.signuping = true;
-            self.$showLoading(() => self.signuping);
+            self.submitting = true;
+            self.$showLoading(() => self.submitting);
 
             self.$services.register({
                 username: self.user.username,
@@ -139,7 +148,7 @@ export default {
                 nickname: self.user.nickname,
                 defaultCurrency: self.user.defaultCurrency
             }).then(response => {
-                self.signuping = false;
+                self.submitting = false;
                 self.$hideLoading();
                 const data = response.data;
 
@@ -155,7 +164,7 @@ export default {
                 self.$toast('You have been successfully registered');
                 router.navigate('/');
             }).catch(error => {
-                self.signuping = false;
+                self.submitting = false;
                 self.$hideLoading();
 
                 if (error.response && error.response.data && error.response.data.errorMessage) {
diff --git a/src/views/mobile/accounts/AccountAdd.vue b/src/views/mobile/accounts/AccountAdd.vue
index 8cb8c24d..30c889c7 100644
--- a/src/views/mobile/accounts/AccountAdd.vue
+++ b/src/views/mobile/accounts/AccountAdd.vue
@@ -1,62 +1,70 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('Add Account')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Add Account')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Add')" @click="add"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
 
-        <f7-list no-hairlines-md>
-            <f7-list-input
-                type="select"
-                :label="$t('Account Category')"
-                :value="account.category"
-                @input="account.category = $event.target.value"
-            >
-                <option v-for="accountCategory in allAccountCategories"
-                        :key="accountCategory.id"
-                        :value="accountCategory.id">{{ $t(accountCategory.name) }}</option>
-            </f7-list-input>
+        <f7-card>
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-input
+                        type="select"
+                        :label="$t('Account Category')"
+                        :value="account.category"
+                        @input="account.category = $event.target.value"
+                    >
+                        <option v-for="accountCategory in allAccountCategories"
+                                :key="accountCategory.id"
+                                :value="accountCategory.id">{{ $t(accountCategory.name) }}</option>
+                    </f7-list-input>
 
-            <f7-list-input
-                type="select"
-                disabled
-                :label="$t('Account Type')"
-                :value="account.type"
-                @input="account.type = $event.target.value"
-            >
-                <option value="1">{{ $t('Single Account') }}</option>
-                <option value="2">{{ $t('Multi Sub Accounts') }}</option>
-            </f7-list-input>
+                    <f7-list-input
+                        type="select"
+                        disabled
+                        :label="$t('Account Type')"
+                        :value="account.type"
+                        @input="account.type = $event.target.value"
+                    >
+                        <option value="1">{{ $t('Single Account') }}</option>
+                        <option value="2">{{ $t('Multi Sub Accounts') }}</option>
+                    </f7-list-input>
 
-            <f7-list-input
-                type="text"
-                clear-button
-                :label="$t('Account Name')"
-                :placeholder="$t('Your account name')"
-                :value="account.name"
-                @input="account.name = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="text"
+                        clear-button
+                        :label="$t('Account Name')"
+                        :placeholder="$t('Your account name')"
+                        :value="account.name"
+                        @input="account.name = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="select"
-                :label="$t('Currency')"
-                :value="account.currency"
-                @input="account.currency = $event.target.value"
-            >
-                <option v-for="currency in allCurrencies"
-                        :key="currency.code"
-                        :value="currency.code">{{ currency.displayName }}</option>
-            </f7-list-input>
+                    <f7-list-input
+                        type="select"
+                        :label="$t('Currency')"
+                        :value="account.currency"
+                        @input="account.currency = $event.target.value"
+                    >
+                        <option v-for="currency in allCurrencies"
+                                :key="currency.code"
+                                :value="currency.code">{{ currency.displayName }}</option>
+                    </f7-list-input>
 
-            <f7-list-input
-                type="textarea"
-                :label="$t('Description')"
-                :placeholder="$t('Your account description (optional)')"
-                :value="account.comment"
-                @input="account.comment = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="textarea"
+                        :label="$t('Description')"
+                        :placeholder="$t('Your account description (optional)')"
+                        :value="account.comment"
+                        @input="account.comment = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
-        </f7-list>
-
-        <f7-button large fill :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-button>
+                    <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
     </f7-page>
 </template>
 
@@ -108,7 +116,7 @@ export default {
         }
     },
     methods: {
-        submit() {
+        add() {
             const self = this;
             const router = self.$f7router;
 
@@ -120,7 +128,7 @@ export default {
             }
 
             self.submitting = true;
-            self.$showLoading(() => self.signuping);
+            self.$showLoading(() => self.submitting);
 
             self.$services.addAccount({
                 category: parseInt(self.account.category),
diff --git a/src/views/mobile/users/SessionList.vue b/src/views/mobile/users/SessionList.vue
index 0a2e1555..5d545da5 100644
--- a/src/views/mobile/users/SessionList.vue
+++ b/src/views/mobile/users/SessionList.vue
@@ -2,18 +2,26 @@
     <f7-page ptr @ptr:refresh="reload">
         <f7-navbar :title="$t('Device & Sessions')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list media-list class="skeleton-text" v-if="loading">
-            <f7-list-item title="Token Name" after="MM/DD/YYYY HH:mm:ss"
-                text="Mozilla/5.0 (OS Name & Version or Device Name; CPU Architecture ...) AppleWebKit/Version (KHTML, like Gecko) Software Name/Version Software Name/Version ..."></f7-list-item>
-        </f7-list>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content :padding="false">
+                <f7-list media-list>
+                    <f7-list-item title="Token Name" after="MM/DD/YYYY HH:mm:ss"
+                        text="Mozilla/5.0 (OS Name & Version or Device Name; CPU Architecture ...) AppleWebKit/Version (KHTML, like Gecko) Software Name/Version Software Name/Version ..."></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-list media-list v-else-if="!loading">
-            <f7-list-item swipeout v-for="token in tokens" :key="token.tokenId" :id="token | tokenDomId" :title="token | tokenTitle | t" :after="token.createdAt | moment($t('format.datetime.long'))" :text="token.userAgent">
-                <f7-swipeout-actions right v-if="!token.isCurrent">
-                    <f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(token)"></f7-swipeout-button>
-                </f7-swipeout-actions>
-            </f7-list-item>
-        </f7-list>
+        <f7-card v-else-if="!loading">
+            <f7-card-content :padding="false">
+                <f7-list media-list>
+                    <f7-list-item swipeout v-for="token in tokens" :key="token.tokenId" :id="token | tokenDomId" :title="token | tokenTitle | t" :after="token.createdAt | moment($t('format.datetime.long'))" :text="token.userAgent">
+                        <f7-swipeout-actions right v-if="!token.isCurrent">
+                            <f7-swipeout-button color="red" :text="$t('Log Out')" @click="revoke(token)"></f7-swipeout-button>
+                        </f7-swipeout-actions>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
     </f7-page>
 </template>
 
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index aa14594b..283d1eff 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -2,21 +2,33 @@
     <f7-page>
         <f7-navbar :title="$t('Two-Factor Authentication')" :back-link="$t('Back')"></f7-navbar>
 
-        <f7-list v-if="loading" class="skeleton-text">
-            <f7-list-item title="Status" after="Unknwon"></f7-list-item>
-            <f7-list-button class="disabled">Operate</f7-list-button>
-        </f7-list>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-item title="Status" after="Unknown"></f7-list-item>
+                    <f7-list-button class="disabled">Operate</f7-list-button>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-list v-else-if="!loading && status === true">
-            <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>
-            <f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
-        </f7-list>
+        <f7-card v-else-if="!loading && status === true">
+            <f7-card-content :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>
+                    <f7-list-button :class="{ 'disabled': disabling }" @click="disable(null)">{{ $t('Disable') }}</f7-list-button>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-list v-else-if="!loading && status === false">
-            <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>
-        </f7-list>
+        <f7-card v-else-if="!loading && status === false">
+            <f7-card-content :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>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
         <f7-sheet
             style="height:auto;"
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 135297ed..e802ec25 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -1,67 +1,79 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('User Profile')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('User Profile')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="$t('Save')" @click="save"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
 
-        <f7-list no-hairlines-md class="skeleton-text" v-if="loading">
-            <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>
-            <f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
-            <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
-            <f7-list-input label="Default Currency" placeholder="Default Currency"></f7-list-input>
-        </f7-list>
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content :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>
+                    <f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
+                    <f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
+                    <f7-list-input label="Default Currency" placeholder="Default Currency"></f7-list-input>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
-        <f7-list no-hairlines-md v-else-if="!loading">
-            <f7-list-input
-                type="password"
-                clear-button
-                :label="$t('Password')"
-                :placeholder="$t('Your password')"
-                :value="newProfile.password"
-                @input="newProfile.password = $event.target.value"
-            ></f7-list-input>
+        <f7-card v-else-if="!loading">
+            <f7-card-content :padding="false">
+                <f7-list>
+                    <f7-list-input
+                        type="password"
+                        clear-button
+                        :label="$t('Password')"
+                        :placeholder="$t('Your password')"
+                        :value="newProfile.password"
+                        @input="newProfile.password = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="password"
-                clear-button
-                :label="$t('Confirmation Password')"
-                :placeholder="$t('Re-enter the password')"
-                :value="newProfile.confirmPassword"
-                @input="newProfile.confirmPassword = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="password"
+                        clear-button
+                        :label="$t('Confirmation Password')"
+                        :placeholder="$t('Re-enter the password')"
+                        :value="newProfile.confirmPassword"
+                        @input="newProfile.confirmPassword = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="email"
-                clear-button
-                :label="$t('E-mail')"
-                :placeholder="$t('Your email address')"
-                :value="newProfile.email"
-                @input="newProfile.email = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="email"
+                        clear-button
+                        :label="$t('E-mail')"
+                        :placeholder="$t('Your email address')"
+                        :value="newProfile.email"
+                        @input="newProfile.email = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="text"
-                clear-button
-                :label="$t('Nickname')"
-                :placeholder="$t('Your nickname')"
-                :value="newProfile.nickname"
-                @input="newProfile.nickname = $event.target.value"
-            ></f7-list-input>
+                    <f7-list-input
+                        type="text"
+                        clear-button
+                        :label="$t('Nickname')"
+                        :placeholder="$t('Your nickname')"
+                        :value="newProfile.nickname"
+                        @input="newProfile.nickname = $event.target.value"
+                    ></f7-list-input>
 
-            <f7-list-input
-                type="select"
-                :label="$t('Default Currency')"
-                :value="newProfile.defaultCurrency"
-                @input="newProfile.defaultCurrency = $event.target.value"
-            >
-                <option v-for="currency in allCurrencies"
-                        :key="currency.code"
-                        :value="currency.code">{{ currency.displayName }}</option>
-            </f7-list-input>
+                    <f7-list-input
+                        type="select"
+                        :label="$t('Default Currency')"
+                        :value="newProfile.defaultCurrency"
+                        @input="newProfile.defaultCurrency = $event.target.value"
+                    >
+                        <option v-for="currency in allCurrencies"
+                                :key="currency.code"
+                                :value="currency.code">{{ currency.displayName }}</option>
+                    </f7-list-input>
 
-            <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
-        </f7-list>
-
-        <f7-button large fill :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || updating }" :text="$t('Update')" @click="update"></f7-button>
+                    <f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
         <f7-sheet
             style="height:auto"
@@ -83,7 +95,7 @@
                             @input="currentPassword = $event.target.value"
                         ></f7-list-input>
                     </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPassword || updating }" :text="$t('Continue')" @click="update"></f7-button>
+                    <f7-button large fill :class="{ 'disabled': !currentPassword || saving }" :text="$t('Continue')" @click="save"></f7-button>
                 </div>
             </div>
         </f7-sheet>
@@ -108,7 +120,7 @@ export default {
             },
             currentPassword: '',
             loading: true,
-            updating: false,
+            saving: false,
             showInputPasswordSheet: false
         };
     },
@@ -191,7 +203,7 @@ export default {
         });
     },
     methods: {
-        update() {
+        save() {
             const self = this;
             const router = self.$f7router;
 
@@ -209,8 +221,8 @@ export default {
                 return;
             }
 
-            self.updating = true;
-            self.$showLoading(() => self.updating);
+            self.saving = true;
+            self.$showLoading(() => self.saving);
 
             self.$services.updateProfile({
                 password: self.newProfile.password,
@@ -219,7 +231,7 @@ export default {
                 nickname: self.newProfile.nickname,
                 defaultCurrency: self.newProfile.defaultCurrency
             }).then(response => {
-                self.updating = false;
+                self.saving = false;
                 self.$hideLoading();
                 self.currentPassword = '';
 
@@ -241,7 +253,7 @@ export default {
                 self.$toast('Your profile has been successfully updated');
                 router.back('/settings', { force: true });
             }).catch(error => {
-                self.updating = false;
+                self.saving = false;
                 self.$hideLoading();
                 self.currentPassword = '';