diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
index 124a6b67..fd84b2e0 100644
--- a/src/components/mobile/PinCodeInputSheet.vue
+++ b/src/components/mobile/PinCodeInputSheet.vue
@@ -9,7 +9,7 @@
                 <p class="no-margin-top margin-bottom-half">{{ hint }}</p>
                 <f7-list no-hairlines class="no-margin-top margin-bottom">
                     <f7-list-item class="list-item-pincode-input">
-                        <PincodeInput secure :length="6" v-model="currentPinCode" />
+                        <pincode-input secure :length="6" v-model="currentPinCode" />
                     </f7-list-item>
                 </f7-list>
                 <f7-button large fill
diff --git a/src/views/mobile/ApplicationLock.vue b/src/views/mobile/ApplicationLock.vue
index 4c55ff59..300b1304 100644
--- a/src/views/mobile/ApplicationLock.vue
+++ b/src/views/mobile/ApplicationLock.vue
@@ -27,19 +27,19 @@
             </f7-card-content>
         </f7-card>
 
-        <PinCodeInputSheet :title="$t('PIN Code')"
-                           :hint="$t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.')"
-                           :show.sync="showInputPinCodeSheetForEnable"
-                           v-model="currentPinCodeForEnable"
-                           @pincode:confirm="enable">
-        </PinCodeInputSheet>
+        <pin-code-input-sheet :title="$t('PIN Code')"
+                              :hint="$t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.')"
+                              :show.sync="showInputPinCodeSheetForEnable"
+                              v-model="currentPinCodeForEnable"
+                              @pincode:confirm="enable">
+        </pin-code-input-sheet>
 
-        <PinCodeInputSheet :title="$t('PIN Code')"
-                           :hint="$t('Please enter your current PIN code when disable application lock')"
-                           :show.sync="showInputPinCodeSheetForDisable"
-                           v-model="currentPinCodeForDisable"
-                           @pincode:confirm="disable">
-        </PinCodeInputSheet>
+        <pin-code-input-sheet :title="$t('PIN Code')"
+                              :hint="$t('Please enter your current PIN code when disable application lock')"
+                              :show.sync="showInputPinCodeSheetForDisable"
+                              v-model="currentPinCodeForDisable"
+                              @pincode:confirm="disable">
+        </pin-code-input-sheet>
     </f7-page>
 </template>
 
diff --git a/src/views/mobile/Unlock.vue b/src/views/mobile/Unlock.vue
index bdccde34..40340e27 100644
--- a/src/views/mobile/Unlock.vue
+++ b/src/views/mobile/Unlock.vue
@@ -3,7 +3,7 @@
         <f7-login-screen-title>{{ $t('Unlock') }}</f7-login-screen-title>
         <f7-list form>
             <f7-list-item class="list-item-pincode-input">
-                <PincodeInput secure :length="6" v-model="pinCode" @keyup.native="unlockByPin" />
+                <pincode-input secure :length="6" v-model="pinCode" @keyup.native="unlockByPin" />
             </f7-list-item>
         </f7-list>
         <f7-list>
diff --git a/src/views/mobile/accounts/Edit.vue b/src/views/mobile/accounts/Edit.vue
index ce0e7cc0..1afc2378 100644
--- a/src/views/mobile/accounts/Edit.vue
+++ b/src/views/mobile/accounts/Edit.vue
@@ -73,20 +73,20 @@
                     <f7-list-item :header="$t('Account Icon')" link="#"
                                   @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
-                        <IconSelectionSheet :all-icon-infos="allAccountIcons"
-                                            :show.sync="account.showIconSelectionSheet"
-                                            :color="account.color"
-                                            v-model="account.icon"
-                        ></IconSelectionSheet>
+                        <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                                              :show.sync="account.showIconSelectionSheet"
+                                              :color="account.color"
+                                              v-model="account.icon"
+                        ></icon-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Account Color')" link="#"
                                   @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
-                        <ColorSelectionSheet :all-color-infos="allAccountColors"
-                                             :show.sync="account.showColorSelectionSheet"
-                                             v-model="account.color"
-                        ></ColorSelectionSheet>
+                        <color-selection-sheet :all-color-infos="allAccountColors"
+                                               :show.sync="account.showColorSelectionSheet"
+                                               v-model="account.color"
+                        ></color-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -108,11 +108,11 @@
                         :after="account.balance | currency(account.currency)"
                         @click="account.showBalanceSheet = true"
                     >
-                        <NumberPadSheet :min-value="$constants.transaction.minAmount"
-                                        :max-value="$constants.transaction.maxAmount"
-                                        :show.sync="account.showBalanceSheet"
-                                        v-model="account.balance"
-                        ></NumberPadSheet>
+                        <number-pad-sheet :min-value="$constants.transaction.minAmount"
+                                          :max-value="$constants.transaction.maxAmount"
+                                          :show.sync="account.showBalanceSheet"
+                                          v-model="account.balance"
+                        ></number-pad-sheet>
                     </f7-list-item>
 
                     <f7-list-input
@@ -145,20 +145,20 @@
                     <f7-list-item :header="$t('Account Icon')" link="#"
                                   @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
-                        <IconSelectionSheet :all-icon-infos="allAccountIcons"
-                                            :show.sync="account.showIconSelectionSheet"
-                                            :color="account.color"
-                                            v-model="account.icon"
-                        ></IconSelectionSheet>
+                        <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                                              :show.sync="account.showIconSelectionSheet"
+                                              :color="account.color"
+                                              v-model="account.icon"
+                        ></icon-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Account Color')" link="#"
                                   @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
-                        <ColorSelectionSheet :all-color-infos="allAccountColors"
-                                             :show.sync="account.showColorSelectionSheet"
-                                             v-model="account.color"
-                        ></ColorSelectionSheet>
+                        <color-selection-sheet :all-color-infos="allAccountColors"
+                                               :show.sync="account.showColorSelectionSheet"
+                                               v-model="account.color"
+                        ></color-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-input
@@ -196,20 +196,20 @@
                         <f7-list-item :header="$t('Sub Account Icon')" link="#"
                                       @click="subAccount.showIconSelectionSheet = true">
                             <f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
-                            <IconSelectionSheet :all-icon-infos="allAccountIcons"
-                                                :show.sync="subAccount.showIconSelectionSheet"
-                                                :color="subAccount.color"
-                                                v-model="subAccount.icon"
-                            ></IconSelectionSheet>
+                            <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                                                  :show.sync="subAccount.showIconSelectionSheet"
+                                                  :color="subAccount.color"
+                                                  v-model="subAccount.icon"
+                            ></icon-selection-sheet>
                         </f7-list-item>
 
                         <f7-list-item :header="$t('Sub Account Color')" link="#"
                                       @click="subAccount.showColorSelectionSheet = true">
                             <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
-                            <ColorSelectionSheet :all-color-infos="allAccountColors"
-                                                 :show.sync="subAccount.showColorSelectionSheet"
-                                                 v-model="subAccount.color"
-                            ></ColorSelectionSheet>
+                            <color-selection-sheet :all-color-infos="allAccountColors"
+                                                   :show.sync="subAccount.showColorSelectionSheet"
+                                                   v-model="subAccount.color"
+                            ></color-selection-sheet>
                         </f7-list-item>
 
                         <f7-list-item
@@ -231,11 +231,11 @@
                             :after="subAccount.balance | currency(subAccount.currency)"
                             @click="subAccount.showBalanceSheet = true"
                         >
-                            <NumberPadSheet :min-value="$constants.transaction.minAmount"
-                                            :max-value="$constants.transaction.maxAmount"
-                                            :show.sync="subAccount.showBalanceSheet"
-                                            v-model="subAccount.balance"
-                            ></NumberPadSheet>
+                            <number-pad-sheet :min-value="$constants.transaction.minAmount"
+                                              :max-value="$constants.transaction.maxAmount"
+                                              :show.sync="subAccount.showBalanceSheet"
+                                              v-model="subAccount.balance"
+                            ></number-pad-sheet>
                         </f7-list-item>
 
                         <f7-list-input
diff --git a/src/views/mobile/categories/Default.vue b/src/views/mobile/categories/Default.vue
index 8c5c3f22..766065a4 100644
--- a/src/views/mobile/categories/Default.vue
+++ b/src/views/mobile/categories/Default.vue
@@ -52,12 +52,12 @@
             </f7-actions-group>
         </f7-actions>
 
-        <ListItemSelectionSheet value-type="index"
-                                title-field="displayName"
-                                :items="allLanguages"
-                                :show.sync="showChangeLocaleSheet"
-                                v-model="currentLocale">
-        </ListItemSelectionSheet>
+        <list-item-selection-sheet value-type="index"
+                                   title-field="displayName"
+                                   :items="allLanguages"
+                                   :show.sync="showChangeLocaleSheet"
+                                   v-model="currentLocale">
+        </list-item-selection-sheet>
     </f7-page>
 </template>
 
diff --git a/src/views/mobile/categories/Edit.vue b/src/views/mobile/categories/Edit.vue
index 40484d7d..bd3787ce 100644
--- a/src/views/mobile/categories/Edit.vue
+++ b/src/views/mobile/categories/Edit.vue
@@ -34,20 +34,20 @@
                     <f7-list-item :header="$t('Category Icon')" key="singleTypeCategoryIconSelection" link="#"
                                   @click="category.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="category.icon | categoryIcon" :style="{ color: '#' + category.color }"></f7-icon>
-                        <IconSelectionSheet :all-icon-infos="allCategoryIcons"
-                                            :show.sync="category.showIconSelectionSheet"
-                                            :color="category.color"
-                                            v-model="category.icon"
-                        ></IconSelectionSheet>
+                        <icon-selection-sheet :all-icon-infos="allCategoryIcons"
+                                              :show.sync="category.showIconSelectionSheet"
+                                              :color="category.color"
+                                              v-model="category.icon"
+                        ></icon-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Category Color')" key="singleTypeCategoryColorSelection" link="#"
                                   @click="category.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + category.color }"></f7-icon>
-                        <ColorSelectionSheet :all-color-infos="allCategoryColors"
-                                             :show.sync="category.showColorSelectionSheet"
-                                             v-model="category.color"
-                        ></ColorSelectionSheet>
+                        <color-selection-sheet :all-color-infos="allCategoryColors"
+                                               :show.sync="category.showColorSelectionSheet"
+                                               v-model="category.color"
+                        ></color-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-input
diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
index 91e2b21d..a858a3e5 100644
--- a/src/views/mobile/transactions/Edit.vue
+++ b/src/views/mobile/transactions/Edit.vue
@@ -44,11 +44,11 @@
                         :title="transaction.sourceAmount | currency"
                         @click="transaction.showSourceAmountSheet = true"
                     >
-                        <NumberPadSheet :min-value="$constants.transaction.minAmount"
-                                        :max-value="$constants.transaction.maxAmount"
-                                        :show.sync="transaction.showSourceAmountSheet"
-                                        v-model="transaction.sourceAmount"
-                        ></NumberPadSheet>
+                        <number-pad-sheet :min-value="$constants.transaction.minAmount"
+                                          :max-value="$constants.transaction.maxAmount"
+                                          :show.sync="transaction.showSourceAmountSheet"
+                                          v-model="transaction.sourceAmount"
+                        ></number-pad-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -59,11 +59,11 @@
                         @click="transaction.showDestinationAmountSheet = true"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
                     >
-                        <NumberPadSheet :min-value="$constants.transaction.minAmount"
-                                        :max-value="$constants.transaction.maxAmount"
-                                        :show.sync="transaction.showDestinationAmountSheet"
-                                        v-model="transaction.destinationAmount"
-                        ></NumberPadSheet>
+                        <number-pad-sheet :min-value="$constants.transaction.minAmount"
+                                          :max-value="$constants.transaction.maxAmount"
+                                          :show.sync="transaction.showDestinationAmountSheet"
+                                          v-model="transaction.destinationAmount"
+                        ></number-pad-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -81,13 +81,13 @@
                         :title="transaction.sourceAccountId | accountName(plainAllAccounts)"
                         @click="transaction.showSourceAccountSheet = true"
                     >
-                        <ListItemSelectionSheet value-type="item"
-                                                key-field="id" value-field="id" title-field="name"
-                                                icon-field="icon" icon-type="account" color-field="color"
-                                                :items="plainAllAccounts"
-                                                :show.sync="transaction.showSourceAccountSheet"
-                                                v-model="transaction.sourceAccountId">
-                        </ListItemSelectionSheet>
+                        <list-item-selection-sheet value-type="item"
+                                                   key-field="id" value-field="id" title-field="name"
+                                                   icon-field="icon" icon-type="account" color-field="color"
+                                                   :items="plainAllAccounts"
+                                                   :show.sync="transaction.showSourceAccountSheet"
+                                                   v-model="transaction.sourceAccountId">
+                        </list-item-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -99,13 +99,13 @@
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
                         @click="transaction.showDestinationAccountSheet = true"
                     >
-                        <ListItemSelectionSheet value-type="item"
-                                                key-field="id" value-field="id" title-field="name"
-                                                icon-field="icon" icon-type="account" color-field="color"
-                                                :items="plainAllAccounts"
-                                                :show.sync="transaction.showDestinationAccountSheet"
-                                                v-model="transaction.destinationAccountId">
-                        </ListItemSelectionSheet>
+                        <list-item-selection-sheet value-type="item"
+                                                   key-field="id" value-field="id" title-field="name"
+                                                   icon-field="icon" icon-type="account" color-field="color"
+                                                   :items="plainAllAccounts"
+                                                   :show.sync="transaction.showDestinationAccountSheet"
+                                                   v-model="transaction.destinationAccountId">
+                        </list-item-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-input
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index 9d0bdb92..2adf2ec2 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -30,47 +30,47 @@
             </f7-card-content>
         </f7-card>
 
-        <PasscodeInputSheet :title="$t('Passcode')"
-                            :hint="$t('Please use two factor authentication app scan the below qrcode and input current passcode')"
-                            :show.sync="showInputPasscodeSheetForEnable"
-                            :confirm-disabled="enableConfirming"
-                            :cancel-disabled="enableConfirming"
-                            v-model="currentPasscodeForEnable"
-                            @passcode:confirm="enableConfirm">
+        <passcode-input-sheet :title="$t('Passcode')"
+                              :hint="$t('Please use two factor authentication app scan the below qrcode and input current passcode')"
+                              :show.sync="showInputPasscodeSheetForEnable"
+                              :confirm-disabled="enableConfirming"
+                              :cancel-disabled="enableConfirming"
+                              v-model="currentPasscodeForEnable"
+                              @passcode:confirm="enableConfirm">
             <div class="row">
                 <div class="col-100 text-align-center">
                     <img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
                 </div>
             </div>
-        </PasscodeInputSheet>
+        </passcode-input-sheet>
 
-        <PasswordInputSheet :title="$t('Current Password')"
-                            :hint="$t('Please enter your current password when disable two factor authentication')"
-                            :show.sync="showInputPasswordSheetForDisable"
-                            :confirm-disabled="disabling"
-                            :cancel-disabled="disabling"
-                            v-model="currentPasswordForDisable"
-                            @password:confirm="disable">
-        </PasswordInputSheet>
+        <password-input-sheet :title="$t('Current Password')"
+                              :hint="$t('Please enter your current password when disable two factor authentication')"
+                              :show.sync="showInputPasswordSheetForDisable"
+                              :confirm-disabled="disabling"
+                              :cancel-disabled="disabling"
+                              v-model="currentPasswordForDisable"
+                              @password:confirm="disable">
+        </password-input-sheet>
 
-        <PasswordInputSheet :title="$t('Current Password')"
-                            :hint="$t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.')"
-                            :show.sync="showInputPasswordSheetForRegenerate"
-                            :confirm-disabled="regenerating"
-                            :cancel-disabled="regenerating"
-                            v-model="currentPasswordForRegenerate"
-                            @password:confirm="regenerateBackupCode">
-        </PasswordInputSheet>
+        <password-input-sheet :title="$t('Current Password')"
+                              :hint="$t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.')"
+                              :show.sync="showInputPasswordSheetForRegenerate"
+                              :confirm-disabled="regenerating"
+                              :cancel-disabled="regenerating"
+                              v-model="currentPasswordForRegenerate"
+                              @password:confirm="regenerateBackupCode">
+        </password-input-sheet>
 
-        <InformationSheet class="backup-code-sheet"
-                          :title="$t('Backup Code')"
-                          :hint="$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.')"
-                          :information="currentBackupCode"
-                          :row-count="10"
-                          :enable-copy="true"
-                          :show.sync="showBackupCodeSheet"
-                          @info:copied="onBackupCodeCopied">
-        </InformationSheet>
+        <information-sheet class="backup-code-sheet"
+                           :title="$t('Backup Code')"
+                           :hint="$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.')"
+                           :information="currentBackupCode"
+                           :row-count="10"
+                           :enable-copy="true"
+                           :show.sync="showBackupCodeSheet"
+                           @info:copied="onBackupCodeCopied">
+        </information-sheet>
     </f7-page>
 </template>
 
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 95dd029a..b5d31952 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -79,14 +79,14 @@
             </f7-card-content>
         </f7-card>
 
-        <PasswordInputSheet :title="$t('Current Password')"
-                            :hint="$t('Please enter your current password when modifying your password')"
-                            :show.sync="showInputPasswordSheet"
-                            :confirm-disabled="saving"
-                            :cancel-disabled="saving"
-                            v-model="currentPassword"
-                            @password:confirm="save()">
-        </PasswordInputSheet>
+        <password-input-sheet :title="$t('Current Password')"
+                              :hint="$t('Please enter your current password when modifying your password')"
+                              :show.sync="showInputPasswordSheet"
+                              :confirm-disabled="saving"
+                              :cancel-disabled="saving"
+                              v-model="currentPassword"
+                              @password:confirm="save()">
+        </password-input-sheet>
     </f7-page>
 </template>