diff --git a/src/components/common/MapView.vue b/src/components/common/MapView.vue
index 085038dc..aee1dd8a 100644
--- a/src/components/common/MapView.vue
+++ b/src/components/common/MapView.vue
@@ -14,6 +14,7 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import type { Coordinate } from '@/core/coordinate.ts';
+import { isNumber } from '@/lib/common.ts';
 import type { MapInstance } from '@/lib/map/base.ts';
 import { createMapInstance } from '@/lib/map/index.ts';
 
@@ -21,6 +22,7 @@ const props = defineProps<{
     height?: string;
     mapClass?: string;
     mapStyle?: Record<string, string>;
+    enableZoomControl?: boolean;
     geoLocation?: Coordinate;
 }>();
 
@@ -31,7 +33,9 @@ const emit = defineEmits<{
 const { tt, getCurrentLanguageInfo } = useI18n();
 
 const mapContainer = useTemplateRef<HTMLElement>('mapContainer');
-const mapInstance = ref<MapInstance | null>(createMapInstance());
+const mapInstance = ref<MapInstance | null>(createMapInstance({
+    enableZoomControl: props.enableZoomControl
+}));
 const initCenter = ref<Coordinate>({
     latitude: 0,
     longitude: 0
@@ -67,7 +71,7 @@ function initMapView(): void {
         if (initCenter.value.latitude !== props.geoLocation.latitude || initCenter.value.longitude !== props.geoLocation.longitude) {
             initCenter.value.latitude = props.geoLocation.latitude;
             initCenter.value.longitude = props.geoLocation.longitude;
-            zoomLevel.value = mapInstance.value.defaultZoomLevel;
+            zoomLevel.value = mapInstance.value.getDefaultZoomLevel();
 
             centerChanged = true;
         }
@@ -75,7 +79,7 @@ function initMapView(): void {
         if (initCenter.value.latitude || initCenter.value.longitude) {
             initCenter.value.latitude = 0;
             initCenter.value.longitude = 0;
-            zoomLevel.value = mapInstance.value.minZoomLevel;
+            zoomLevel.value = mapInstance.value.getMinZoomLevel();
 
             centerChanged = true;
         }
@@ -94,7 +98,14 @@ function initMapView(): void {
             },
             onClick: (geoLocation: Coordinate) => {
                 emit('click', geoLocation);
-            }
+            },
+            onZoomChange(level: number) {
+                if (isNumber(level)) {
+                    zoomLevel.value = level;
+                } else if (mapInstance.value) {
+                    zoomLevel.value = Math.round(mapInstance.value.getZoomLevel());
+                }
+            },
         });
 
         if (mapInstance.value.inited) {
@@ -106,9 +117,9 @@ function initMapView(): void {
         mapInstance.value.setMapCenterTo(initCenter.value, zoomLevel.value);
     }
 
-    if (centerChanged && zoomLevel.value > mapInstance.value.minZoomLevel) {
+    if (centerChanged && zoomLevel.value > mapInstance.value.getMinZoomLevel()) {
         mapInstance.value.setMapCenterMarker(initCenter.value);
-    } else if (centerChanged && zoomLevel.value <= mapInstance.value.minZoomLevel) {
+    } else if (centerChanged && zoomLevel.value <= mapInstance.value.getMinZoomLevel()) {
         mapInstance.value.removeMapCenterMarker();
     }
 }
@@ -123,8 +134,44 @@ function setMarkerPosition(geoLocation?: Coordinate): void {
     }
 }
 
+function allowZoomIn(): boolean {
+    if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
+        return false;
+    }
+
+    return zoomLevel.value < mapInstance.value.getMaxZoomLevel();
+}
+
+function allowZoomOut(): boolean {
+    if (!mapSupported.value || !mapDependencyLoaded.value || !mapInstance.value) {
+        return false;
+    }
+
+    return zoomLevel.value > mapInstance.value.getMinZoomLevel();
+}
+
+function zoomIn(): void {
+    if (!mapInstance.value) {
+        return;
+    }
+
+    mapInstance.value.zoomIn();
+}
+
+function zoomOut(): void {
+    if (!mapInstance.value) {
+        return;
+    }
+
+    mapInstance.value.zoomOut();
+}
+
 defineExpose({
     initMapView,
-    setMarkerPosition
+    setMarkerPosition,
+    allowZoomIn,
+    allowZoomOut,
+    zoomIn,
+    zoomOut
 });
 </script>
diff --git a/src/components/mobile/AIImageRecognitionSheet.vue b/src/components/mobile/AIImageRecognitionSheet.vue
index d0cf5726..b3f1c72e 100644
--- a/src/components/mobile/AIImageRecognitionSheet.vue
+++ b/src/components/mobile/AIImageRecognitionSheet.vue
@@ -4,10 +4,13 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :class="{ 'disabled': loading || recognizing }" :text="tt('Cancel')" @click="cancel"></f7-link>
+                <f7-link icon-f7="xmark" :class="{ 'disabled': loading || recognizing }"
+                         @click="cancel"></f7-link>
             </div>
             <div class="right">
-                <f7-link :class="{ 'disabled': loading || recognizing || !imageFile }" :text="tt('Recognize')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt"
+                           :class="{ 'disabled': loading || recognizing || !imageFile }"
+                           @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content class="no-margin-vertical no-padding-vertical">
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index 473629d7..d3d7ae3e 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -4,10 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import { useI18n } from '@/locales/helpers.ts';
-
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
@@ -50,8 +48,6 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt } = useI18n();
-
 const currentValue = ref<ColorValue>(props.modelValue);
 const itemPerRow = ref<number>(props.columnCount || 7);
 
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index eb0201e3..88daebdb 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/DateSelectionSheet.vue b/src/components/mobile/DateSelectionSheet.vue
index 0efb9fc9..fd3f021a 100644
--- a/src/components/mobile/DateSelectionSheet.vue
+++ b/src/components/mobile/DateSelectionSheet.vue
@@ -7,11 +7,11 @@
                 <f7-link :text="tt('Clear')" @click="clear"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
                                   :enable-time-picker="false"
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index 3da6ddc2..256e0b6f 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -7,11 +7,12 @@
                 <f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-link :icon-f7="mode === 'time' ? 'calendar' : 'clock'" @click="switchMode"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content class="padding-bottom">
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker ref="datetimepicker"
                                   datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
@@ -21,7 +22,7 @@
                                   v-show="mode === 'date'">
                 </date-time-picker>
             </div>
-            <div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
+            <div class="block no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
                 <div class="time-picker-container" ref="timePickerContainer">
                     <div class="picker picker-inline picker-3d">
                         <div class="picker-columns">
@@ -91,12 +92,6 @@
                 </div>
             </div>
             <input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
-            <div class="margin-top text-align-center">
-                <div class="display-flex padding-horizontal justify-content-space-between">
-                    <div class="align-self-center">{{ displayTime }}</div>
-                    <f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
-                </div>
-            </div>
         </f7-page-content>
     </f7-sheet>
 </template>
@@ -116,10 +111,7 @@ import { NumeralSystem } from '@/core/numeral.ts';
 import { isDefined } from '@/lib/common.ts';
 import {
     getHourIn12HourFormat,
-    getTimezoneOffsetMinutes,
-    getBrowserTimezoneOffsetMinutes,
     getLocalDatetimeFromUnixTime,
-    getActualUnixTimeForStore,
     getCurrentUnixTime,
     getUnixTimeFromLocalDatetime,
     getAMOrPM,
@@ -141,8 +133,7 @@ const emit = defineEmits<{
 
 const {
     tt,
-    getCurrentNumeralSystemType,
-    formatUnixTimeToLongDateTime
+    getCurrentNumeralSystemType
 } = useI18n();
 const { showToast } = useI18nUIComponents();
 
@@ -176,9 +167,6 @@ const timePickerItemHeight = ref<number | undefined>(undefined);
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 
-const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
-const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
-
 const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
 const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
 const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));
diff --git a/src/components/mobile/FiscalYearStartSelectionSheet.vue b/src/components/mobile/FiscalYearStartSelectionSheet.vue
index fcd00317..84e147d7 100644
--- a/src/components/mobile/FiscalYearStartSelectionSheet.vue
+++ b/src/components/mobile/FiscalYearStartSelectionSheet.vue
@@ -7,11 +7,11 @@
                 <f7-link :text="tt('Reset')" @click="reset"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="confirm"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="confirm"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>
-            <div class="block block-outline no-margin no-padding">
+            <div class="block no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
                                   :numeral-system="numeralSystem"
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 6e70f11b..88c50304 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -4,10 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-block class="margin-vertical no-padding">
@@ -31,8 +31,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import { useI18n } from '@/locales/helpers.ts';
-
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
@@ -51,8 +49,6 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt } = useI18n();
-
 const currentValue = ref<string>(props.modelValue);
 const itemPerRow = ref<number>(props.columnCount || 7);
 
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
index 964ddaa3..f9d93480 100644
--- a/src/components/mobile/InformationSheet.vue
+++ b/src/components/mobile/InformationSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/ListItemSelectionPopup.vue b/src/components/mobile/ListItemSelectionPopup.vue
index a01c1c23..627e63c6 100644
--- a/src/components/mobile/ListItemSelectionPopup.vue
+++ b/src/components/mobile/ListItemSelectionPopup.vue
@@ -2,20 +2,14 @@
     <f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
         <f7-page>
             <f7-navbar :outline="false">
+                <f7-nav-left>
+                    <f7-link popup-close icon-f7="xmark"></f7-link>
+                </f7-nav-left>
                 <f7-nav-title :title="title" v-if="title"></f7-nav-title>
-                <f7-nav-right>
-                    <f7-link popup-close :text="tt('Done')"></f7-link>
-                </f7-nav-right>
             </f7-navbar>
-            <f7-searchbar ref="searchbar" custom-searchs
-                          :value="filterContent"
-                          :placeholder="filterPlaceholder"
-                          :disable-button="false"
-                          v-if="enableFilter"
-                          @input="filterContent = $event.target.value">
-            </f7-searchbar>
-            <f7-block class="no-padding">
-                <f7-list strong outline dividers>
+
+            <f7-block class="no-margin no-padding">
+                <f7-list class="no-margin" strong outline dividers>
                     <f7-list-item link="#" no-chevron
                                   :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
                                   :value="getItemValue(item, index, valueField, valueType)"
@@ -38,6 +32,16 @@
                                   :title="filterNoItemsText"></f7-list-item>
                 </f7-list>
             </f7-block>
+
+            <f7-toolbar bottom>
+                <f7-searchbar ref="searchbar" custom-searchs
+                              :value="filterContent"
+                              :placeholder="filterPlaceholder"
+                              :disable-button="false"
+                              v-if="enableFilter"
+                              @input="filterContent = $event.target.value">
+                </f7-searchbar>
+            </f7-toolbar>
         </f7-page>
     </f7-popup>
 </template>
@@ -76,7 +80,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
 
@@ -177,7 +181,7 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onPopupOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', true);
 }
 
 function onPopupClosed(): void {
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index fa141075..a0b45ab0 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -4,9 +4,10 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
+            <div class="left">
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
+            <div class="right"></div>
         </f7-toolbar>
         <f7-page-content>
             <f7-list dividers class="no-margin-vertical">
@@ -60,7 +61,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const currentValue = ref<unknown>(props.modelValue);
 
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index d4a2b9a5..28ae783d 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -1,20 +1,23 @@
 <template>
-    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="map-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
-                <f7-link :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
+                <f7-link icon-f7="minus" :class="{ 'disabled': !map?.allowZoomOut() }" @click="map?.zoomOut()"></f7-link>
+                <f7-link icon-f7="plus" :class="{ 'disabled': !map?.allowZoomIn() }" @click="map?.zoomIn()"></f7-link>
             </div>
-            <div class="right">
-                <f7-link :text="tt('Done')" @click="save"></f7-link>
+            <div class="right map-sheet-toolbar-right">
+                <f7-link :text="tt('Disable Click to Set Location')" @click="switchSetGeoLocationByClickMap(false)" v-if="!readonly && isSupportGetGeoLocationByClick() && props.setGeoLocationByClickMap"></f7-link>
+                <f7-link class="map-sheet-toolbar-auto-hidden" :text="tt('Enable Click to Set Location')" @click="switchSetGeoLocationByClickMap(true)" v-if="!readonly && isSupportGetGeoLocationByClick() && !props.setGeoLocationByClickMap"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content>
-            <map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
+        <f7-page-content class="no-margin no-padding">
+            <map-view ref="map" height="400px"
+                      :enable-zoom-control="false" :geo-location="geoLocation"
+                      @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
-                    <div class="display-flex padding justify-content-space-between align-items-center">
+                    <div class="display-flex map-sheet-error-title padding justify-content-space-between align-items-center">
                         <div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></div>
                         <div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></div>
                         <div class="ebk-sheet-title" v-else></div>
@@ -82,10 +85,6 @@ function switchSetGeoLocationByClickMap(value: boolean): void {
     emit('update:setGeoLocationByClickMap', value);
 }
 
-function save(): void {
-    emit('update:show', false);
-}
-
 function close(): void {
     emit('update:show', false);
 }
@@ -100,3 +99,23 @@ function onSheetClosed(): void {
     close();
 }
 </script>
+
+<style>
+.map-sheet .map-sheet-error-title {
+    margin-top: var(--f7-toolbar-height);
+}
+
+.map-sheet .map-sheet-toolbar-right {
+    overflow: hidden;
+
+    .map-sheet-toolbar-auto-hidden {
+        overflow: hidden;
+
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
diff --git a/src/components/mobile/MonthRangeSelectionSheet.vue b/src/components/mobile/MonthRangeSelectionSheet.vue
index af517ff4..53e4b16e 100644
--- a/src/components/mobile/MonthRangeSelectionSheet.vue
+++ b/src/components/mobile/MonthRangeSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-range-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/MonthSelectionSheet.vue b/src/components/mobile/MonthSelectionSheet.vue
index 4e02930b..b5742a67 100644
--- a/src/components/mobile/MonthSelectionSheet.vue
+++ b/src/components/mobile/MonthSelectionSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-selection-sheet" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content>
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index a3a1e7cb..733b83e9 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="numpad-sheet" style="height: auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="margin-top padding-horizontal" v-if="hint">
                 <span>{{ hint }}</span>
@@ -111,6 +111,7 @@ const isSupportClipboard = !!navigator.clipboard;
 const previousValue = ref<string>('');
 const currentSymbol = ref<string>('');
 const currentValue = ref<string>(getInitedStringValue(props.modelValue, props.flipNegative));
+const pasteingAmount = ref<boolean>(false);
 
 const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 
@@ -316,11 +317,16 @@ function clear(): void {
 }
 
 function paste(): void {
-    if (!isiOS() || !isSupportClipboard) {
+    if (!isiOS() || !isSupportClipboard || pasteingAmount.value) {
+        pasteingAmount.value = false;
         return;
     }
 
+    pasteingAmount.value = true;
+
     navigator.clipboard.readText().then(text => {
+        pasteingAmount.value = false;
+
         if (!text) {
             return;
         }
diff --git a/src/components/mobile/PasscodeInputSheet.vue b/src/components/mobile/PasscodeInputSheet.vue
index d31292b8..b84b4b0d 100644
--- a/src/components/mobile/PasscodeInputSheet.vue
+++ b/src/components/mobile/PasscodeInputSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/PasswordInputSheet.vue b/src/components/mobile/PasswordInputSheet.vue
index b29f77ce..42bd22ca 100644
--- a/src/components/mobile/PasswordInputSheet.vue
+++ b/src/components/mobile/PasswordInputSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
index 4f86e818..29757098 100644
--- a/src/components/mobile/PinCodeInputSheet.vue
+++ b/src/components/mobile/PinCodeInputSheet.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <div class="swipe-handler" style="z-index: 10"></div>
+        <div class="swipe-handler"></div>
         <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div class="ebk-sheet-title"><b>{{ title }}</b></div>
diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue
index f758684f..8c833bb3 100644
--- a/src/components/mobile/ScheduleFrequencySheet.vue
+++ b/src/components/mobile/ScheduleFrequencySheet.vue
@@ -4,10 +4,10 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link sheet-close :text="tt('Cancel')"></f7-link>
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" @click="save"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="save"></f7-button>
             </div>
         </f7-toolbar>
         <f7-page-content>
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index 39024e36..893e3c25 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -5,12 +5,13 @@
         <f7-toolbar>
             <div class="swipe-handler"></div>
             <div class="left">
-                <f7-link sheet-close :text="tt('Cancel')"></f7-link>
+                <f7-link sheet-close icon-f7="xmark"></f7-link>
             </div>
             <div class="right">
-                <f7-link :text="tt('Done')" v-if="allTags && allTags.length && !noAvailableTag" @click="save"></f7-link>
-                <f7-link :class="{'disabled': newTag}"
-                         :text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
+                <f7-button round fill icon-f7="checkmark_alt" @click="save"
+                           v-if="allTags && allTags.length && !noAvailableTag"></f7-button>
+                <f7-link icon-f7="plus" :class="{'disabled': newTag}" @click="addNewTag"
+                         v-if="!allTags || !allTags.length || noAvailableTag"></f7-link>
             </div>
         </f7-toolbar>
         <f7-page-content :class="heightClass">
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 31b60359..e446db33 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -3,12 +3,7 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
-            </div>
-        </f7-toolbar>
-        <f7-page-content :class="heightClass">
-            <f7-searchbar ref="searchbar" custom-searchs
+            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
@@ -16,6 +11,8 @@
                           @input="filterContent = $event.target.value"
                           @focus="onSearchBarFocus">
             </f7-searchbar>
+        </f7-toolbar>
+        <f7-page-content :class="'margin-top ' + heightClass">
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
                 <f7-list-item :title="filterNoItemsText"></f7-list-item>
             </f7-list>
@@ -67,7 +64,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const {
     filterContent,
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index 0a6be085..b7ca7320 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -3,13 +3,7 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
-            <div class="right">
-                <f7-link sheet-close :text="tt('Done')"></f7-link>
-            </div>
-        </f7-toolbar>
-        <f7-page-content>
-            <f7-searchbar ref="searchbar" custom-searchs
+            <f7-searchbar ref="searchbar" class="margin-top" custom-searchs
                           :value="filterContent"
                           :placeholder="filterPlaceholder"
                           :disable-button="false"
@@ -17,6 +11,8 @@
                           @input="filterContent = $event.target.value"
                           @focus="onSearchBarFocus">
             </f7-searchbar>
+        </f7-toolbar>
+        <f7-page-content class="margin-top">
             <div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
                 <div>
                     <div class="primary-list-container">
@@ -89,7 +85,7 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
-const { tt, ti } = useI18n();
+const { ti } = useI18n();
 
 const {
     filterContent,
diff --git a/src/lib/map/amap.ts b/src/lib/map/amap.ts
index 42ef8ff0..b8d5f099 100644
--- a/src/lib/map/amap.ts
+++ b/src/lib/map/amap.ts
@@ -1,8 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction, isArray } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 import {
@@ -13,6 +14,7 @@ import {
 import logger from '@/lib/logger.ts';
 
 export class AmapMapProvider implements MapProvider {
+    // https://lbs.amap.com/api/javascript-api-v2/documentation
     public static AMap: unknown = null;
 
     public getWebsite(): string {
@@ -52,8 +54,8 @@ export class AmapMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateAmapJavascriptUrl('onAMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new AmapMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new AmapMapInstance(options);
     }
 }
 
@@ -61,16 +63,19 @@ export class AmapMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 14;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 14;
+    private readonly minZoomLevel: number = 2;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private amapInstance: unknown = null;
     private amapToolbar: unknown = null;
     private amapCenterPosition: unknown = null;
     private amapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!AmapMapProvider.AMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -86,10 +91,12 @@ export class AmapMapInstance implements MapInstance {
             jogEnable: false
         });
 
-        const amapToolbar = new AMap.ToolBar({
-            position: 'LT'
-        });
-        amapInstance.addControl(amapToolbar);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.amapToolbar = new AMap.ToolBar({
+                position: 'LT'
+            });
+            amapInstance.addControl(this.amapToolbar);
+        }
 
         amapInstance.on('click', function(e) {
             if (options.onClick) {
@@ -100,11 +107,56 @@ export class AmapMapInstance implements MapInstance {
             }
         });
 
+        amapInstance.on('zoomend', function() {
+            if (options.onZoomChange && isFunction(amapInstance.getZoom)) {
+                options.onZoomChange(amapInstance.getZoom());
+            }
+        });
+
         this.amapInstance = amapInstance;
-        this.amapToolbar = amapToolbar;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
+            return this.minZoomLevel;
+        }
+
+        const zooms = this.amapInstance.getZooms();
+
+        if (!zooms || !isArray(zooms) || zooms.length !== 2) {
+            return this.minZoomLevel;
+        }
+
+        return zooms[0];
+    }
+
+    public getMaxZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
+            return this.maxZoomLevel;
+        }
+
+        const zooms = this.amapInstance.getZooms();
+
+        if (!zooms || !isArray(zooms) || zooms.length !== 2) {
+            return this.maxZoomLevel;
+        }
+
+        return zooms[1];
+    }
+
+    public getZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.amapInstance?.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!AmapMapProvider.AMap || !this.amapInstance) {
             return;
@@ -187,6 +239,22 @@ export class AmapMapInstance implements MapInstance {
         this.amapCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.amapInstance) {
+            return;
+        }
+
+        this.amapInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.amapInstance) {
+            return;
+        }
+
+        this.amapInstance.zoomOut();
+    }
+
     private setMaker(point: unknown): void {
         if (!AmapMapProvider.AMap || !this.amapInstance) {
             return;
diff --git a/src/lib/map/baidumap.ts b/src/lib/map/baidumap.ts
index ab22d8d3..fea790e5 100644
--- a/src/lib/map/baidumap.ts
+++ b/src/lib/map/baidumap.ts
@@ -1,13 +1,15 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 import logger from '@/lib/logger.ts';
 
 export class BaiduMapProvider implements MapProvider {
+    // https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html
     public static BMap: unknown = null;
     public static BMAP_NAVIGATION_CONTROL_ZOOM: unknown = window.BMAP_NAVIGATION_CONTROL_ZOOM || 3;
     public static BMAP_ANCHOR_TOP_LEFT: unknown = window.BMAP_ANCHOR_TOP_LEFT || 0;
@@ -41,8 +43,8 @@ export class BaiduMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateBaiduMapJavascriptUrl('onBMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new BaiduMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new BaiduMapInstance(options);
     }
 }
 
@@ -50,17 +52,20 @@ export class BaiduMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 15;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 15;
+    private readonly minZoomLevel: number = 4;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private baiduMapInstance: unknown = null;
     private baiduMapConverter: unknown = null;
     private baiduMapNavigationControl: unknown = null;
     private baiduMapCenterPosition: unknown = null;
     private baiduMapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!BaiduMapProvider.BMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -74,11 +79,14 @@ export class BaiduMapInstance implements MapInstance {
         });
         baiduMapInstance.enableScrollWheelZoom();
 
-        const baiduMapNavigationControl = new BMap.NavigationControl({
-            type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
-            anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
-        });
-        baiduMapInstance.addControl(baiduMapNavigationControl);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.baiduMapNavigationControl = new BMap.NavigationControl({
+                type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
+                anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
+            });
+            baiduMapInstance.addControl(this.baiduMapNavigationControl);
+        }
+
         baiduMapInstance.centerAndZoom(new BMap.Point(options.initCenter.longitude, options.initCenter.latitude), options.zoomLevel);
 
         baiduMapInstance.addEventListener('click', function(e) {
@@ -90,12 +98,57 @@ export class BaiduMapInstance implements MapInstance {
             }
         });
 
+        baiduMapInstance.addEventListener('zoomend', function() {
+            if (options.onZoomChange && isFunction(baiduMapInstance.getZoom)) {
+                options.onZoomChange(baiduMapInstance.getZoom());
+            }
+        });
+
         this.baiduMapInstance = baiduMapInstance;
         this.baiduMapConverter = new BMap.Convertor();
-        this.baiduMapNavigationControl = baiduMapNavigationControl;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
+            return this.minZoomLevel;
+        }
+
+        const mapType = this.baiduMapInstance.getMapType();
+
+        if (!mapType || !isFunction(mapType.getMinZoom)) {
+            return this.minZoomLevel;
+        }
+
+        return mapType.getMinZoom() ?? this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
+            return this.maxZoomLevel;
+        }
+
+        const mapType = this.baiduMapInstance.getMapType();
+
+        if (!mapType || !isFunction(mapType.getMaxZoom)) {
+            return this.maxZoomLevel;
+        }
+
+        return mapType.getMaxZoom() ?? this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.baiduMapInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
             return;
@@ -186,6 +239,22 @@ export class BaiduMapInstance implements MapInstance {
         this.baiduMapCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.baiduMapInstance) {
+            return;
+        }
+
+        this.baiduMapInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.baiduMapInstance) {
+            return;
+        }
+
+        this.baiduMapInstance.zoomOut();
+    }
+
     private setMaker(point: unknown): void {
         if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
             return;
diff --git a/src/lib/map/base.ts b/src/lib/map/base.ts
index 33c7f173..a713c03d 100644
--- a/src/lib/map/base.ts
+++ b/src/lib/map/base.ts
@@ -4,18 +4,26 @@ export interface MapProvider {
     getWebsite(): string;
     isSupportGetGeoLocationByClick(): boolean;
     asyncLoadAssets(language?: string): Promise<unknown>;
-    createMapInstance(): MapInstance | null;
+    createMapInstance(options: MapCreateOptions): MapInstance | null;
 }
 
 export interface MapInstance {
     dependencyLoaded: boolean;
     inited: boolean;
-    readonly defaultZoomLevel: number;
-    readonly minZoomLevel: number;
     initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void;
+    getDefaultZoomLevel(): number;
+    getMinZoomLevel(): number;
+    getMaxZoomLevel(): number;
+    getZoomLevel(): number;
     setMapCenterTo(center: Coordinate, zoomLevel: number): void;
     setMapCenterMarker(position: Coordinate): void;
     removeMapCenterMarker(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+}
+
+export interface MapCreateOptions {
+    readonly enableZoomControl?: boolean;
 }
 
 export interface MapInstanceInitOptions {
@@ -27,4 +35,5 @@ export interface MapInstanceInitOptions {
         readonly zoomOut: string;
     };
     readonly onClick?: (position: Coordinate) => void;
+    readonly onZoomChange?: (level: number) => void;
 }
diff --git a/src/lib/map/googlemap.ts b/src/lib/map/googlemap.ts
index ec7adbbc..5cc745c4 100644
--- a/src/lib/map/googlemap.ts
+++ b/src/lib/map/googlemap.ts
@@ -1,12 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 
 export class GoogleMapProvider implements MapProvider {
+    // https://developers.google.com/maps/documentation/javascript/reference/map
     public static GoogleMap: unknown = null;
     public static ControlPosition = {
         LEFT_TOP: (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5
@@ -37,8 +39,8 @@ export class GoogleMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateGoogleMapJavascriptUrl(language, 'onGoogleMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new GoogleMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new GoogleMapInstance(options);
     }
 }
 
@@ -46,14 +48,17 @@ export class GoogleMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 14;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 14;
+    private readonly minZoomLevel: number = 0;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private googleMapInstance: unknown = null;
     private googleMapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!GoogleMapProvider.GoogleMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -62,27 +67,26 @@ export class GoogleMapInstance implements MapInstance {
         }
 
         const googleMap = GoogleMapProvider.GoogleMap;
-
-        this.googleMapInstance = new googleMap.Map(mapContainer, {
+        const googleMapInstance = new googleMap.Map(mapContainer, {
             zoom: options.zoomLevel,
             center: {
                 lat: options.initCenter.latitude,
                 lng: options.initCenter.longitude
             },
             maxZoom: 19,
-            zoomControl: true,
+            zoomControl: !!this.mapCreateOptions.enableZoomControl,
             mapTypeControl: false,
             scaleControl: false,
             streetViewControl: false,
             rotateControl: false,
             fullscreenControl: false,
             gestureHandling: 'greedy',
-            zoomControlOptions: {
+            zoomControlOptions: this.mapCreateOptions.enableZoomControl ? {
                 position: GoogleMapProvider.ControlPosition.LEFT_TOP
-            }
+            } : undefined
         });
 
-        this.googleMapInstance.addListener('click', function(e) {
+        googleMapInstance.addListener('click', function(e) {
             if (options.onClick) {
                 options.onClick({
                     latitude: e.latLng.lat(),
@@ -91,9 +95,36 @@ export class GoogleMapInstance implements MapInstance {
             }
         });
 
+        googleMapInstance.addListener('zoom_changed', function() {
+            if (options.onZoomChange && isFunction(googleMapInstance.getZoom)) {
+                options.onZoomChange(googleMapInstance.getZoom());
+            }
+        });
+
+        this.googleMapInstance = googleMapInstance;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        return this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        return this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.googleMapInstance || !isFunction(this.googleMapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.googleMapInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!GoogleMapProvider.GoogleMap || !this.googleMapInstance) {
             return;
@@ -129,6 +160,22 @@ export class GoogleMapInstance implements MapInstance {
         }
     }
 
+    public zoomIn(): void {
+        if (!this.googleMapInstance) {
+            return;
+        }
+
+        this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() + 1);
+    }
+
+    public zoomOut(): void {
+        if (!this.googleMapInstance) {
+            return;
+        }
+
+        this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() - 1);
+    }
+
     public removeMapCenterMarker(): void {
         if (!this.googleMapInstance || !this.googleMapCenterMarker) {
             return;
diff --git a/src/lib/map/index.ts b/src/lib/map/index.ts
index e05728a8..0a1811e1 100644
--- a/src/lib/map/index.ts
+++ b/src/lib/map/index.ts
@@ -1,7 +1,7 @@
 import { LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
 import { getMapProvider } from '@/lib/server_settings.ts';
 
-import type { MapProvider, MapInstance } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions } from './base.ts';
 import { LeafletMapProvider } from './leaflet.ts';
 import { GoogleMapProvider } from './googlemap.ts';
 import { BaiduMapProvider } from './baidumap.ts';
@@ -35,6 +35,6 @@ export function isSupportGetGeoLocationByClick(): boolean {
     return mapProvider?.isSupportGetGeoLocationByClick() || false;
 }
 
-export function createMapInstance(): MapInstance | null {
-    return mapProvider?.createMapInstance() || null;
+export function createMapInstance(options: MapCreateOptions): MapInstance | null {
+    return mapProvider?.createMapInstance(options) || null;
 }
diff --git a/src/lib/map/leaflet.ts b/src/lib/map/leaflet.ts
index ea316826..3757dcc1 100644
--- a/src/lib/map/leaflet.ts
+++ b/src/lib/map/leaflet.ts
@@ -4,8 +4,9 @@ import type { Coordinate } from '@/core/coordinate.ts';
 
 import { type LeafletTileSource, type LeafletTileSourceExtraParam, LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
 
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction, isNumber } from '@/lib/common.ts';
 import {
     isMapDataFetchProxyEnabled,
     getCustomMapTileLayerUrl,
@@ -20,6 +21,7 @@ import {
 import services from '@/lib/services.ts';
 
 export class LeafletMapProvider implements MapProvider {
+    // https://leafletjs.com/reference.html#pan-options
     public static Leaflet: unknown = null;
     private readonly mapProvider: string;
 
@@ -49,14 +51,14 @@ export class LeafletMapProvider implements MapProvider {
         ]);
     }
 
-    public createMapInstance(): MapInstance | null {
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
         const mapTileSource = LEAFLET_TILE_SOURCES[this.mapProvider];
 
         if (this.mapProvider !== 'custom' && !mapTileSource) {
             return null;
         }
 
-        return new LeafletMapInstance(this.mapProvider, mapTileSource);
+        return new LeafletMapInstance(this.mapProvider, mapTileSource, options);
     }
 }
 
@@ -64,11 +66,13 @@ export class LeafletMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number;
-    public readonly minZoomLevel: number;
+    private readonly defaultZoomLevel: number;
+    private readonly minZoomLevel: number;
+    private readonly maxZoomLevel: number;
 
     private readonly mapProvider: string;
     private readonly presetMapTileSource: LeafletTileSource;
+    private readonly mapCreateOptions: MapCreateOptions;
 
     private leafletInstance: unknown | null;
     private leafletTileLayer: unknown | null;
@@ -77,14 +81,16 @@ export class LeafletMapInstance implements MapInstance {
     private leafletAttribution: unknown | null;
     private leafletCenterMarker: unknown | null;
 
-    public constructor(mapProvider: string, mapTileSource: LeafletTileSource) {
+    public constructor(mapProvider: string, mapTileSource: LeafletTileSource, options: MapCreateOptions) {
         this.dependencyLoaded = !!LeafletMapProvider.Leaflet;
 
         this.mapProvider = mapProvider;
         this.presetMapTileSource = mapTileSource;
+        this.mapCreateOptions = options;
 
         this.defaultZoomLevel = this.presetMapTileSource?.defaultZoomLevel || getCustomMapDefaultZoomLevel();
         this.minZoomLevel = this.presetMapTileSource?.minZoom || getCustomMapMinZoomLevel();
+        this.maxZoomLevel = this.presetMapTileSource?.maxZoom || getCustomMapMaxZoomLevel();
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -149,11 +155,13 @@ export class LeafletMapInstance implements MapInstance {
             this.leafletAnnotationLayer = annotationLayer;
         }
 
-        const zoomControl = leaflet.control.zoom({
-            zoomInTitle: options.text.zoomIn,
-            zoomOutTitle: options.text.zoomOut
-        });
-        zoomControl.addTo(leafletInstance);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.leafletZoomControl = leaflet.control.zoom({
+                zoomInTitle: options.text.zoomIn,
+                zoomOutTitle: options.text.zoomOut
+            });
+            this.leafletZoomControl.addTo(leafletInstance);
+        }
 
         if (this.presetMapTileSource && this.presetMapTileSource.attribution) {
             const attribution = leaflet.control.attribution({
@@ -173,12 +181,37 @@ export class LeafletMapInstance implements MapInstance {
             }
         });
 
+        leafletInstance.addEventListener('zoomanim', function(e) {
+            if (options.onZoomChange && 'zoom' in e && isNumber(e.zoom)) {
+                options.onZoomChange(e.zoom);
+            }
+        });
+
         this.leafletInstance = leafletInstance;
         this.leafletTileLayer = tileLayer;
-        this.leafletZoomControl = zoomControl;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        return this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        return this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.leafletInstance || !isFunction(this.leafletInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.leafletInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!this.leafletInstance) {
             return;
@@ -221,6 +254,22 @@ export class LeafletMapInstance implements MapInstance {
         this.leafletCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.leafletInstance) {
+            return;
+        }
+
+        this.leafletInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.leafletInstance) {
+            return;
+        }
+
+        this.leafletInstance.zoomOut();
+    }
+
     private getFinalUrlFormat(urlFormat: string, urlExtraParams: LeafletTileSourceExtraParam[], options: MapInstanceInitOptions) {
         const params: string[] = [];
 
diff --git a/src/lib/ui/mobile.ts b/src/lib/ui/mobile.ts
index 003f8908..67086429 100644
--- a/src/lib/ui/mobile.ts
+++ b/src/lib/ui/mobile.ts
@@ -138,7 +138,7 @@ export function getElementBoundingRect(selector: string): DOMRect | null {
     return el.getBoundingClientRect();
 }
 
-export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string): void {
+export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string, hasBottomToolbar?: boolean): void {
     if (!parentEl || !parentEl.length) {
         return;
     }
@@ -175,6 +175,11 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
         return;
     }
 
+    if (hasBottomToolbar) {
+        const toolbarHeight = parentEl.find('.toolbar.toolbar-bottom').outerHeight() || 0;
+        targetPos += toolbarHeight / 2;
+    }
+
     container.scrollTop(targetPos);
 }
 
diff --git a/src/styles/mobile/font-size-default.scss b/src/styles/mobile/font-size-default.scss
index 3dd5eba5..aef95563 100644
--- a/src/styles/mobile/font-size-default.scss
+++ b/src/styles/mobile/font-size-default.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 17px;
     --f7-tabbar-icon-size: 28px;
-    --f7-tabbar-icons-height: 80px;
+    --f7-tabbar-icons-height: 64px;
     --f7-tabbar-label-font-size: 12px;
     --f7-label-font-size: 12px;
     --f7-label-height: 16px;
diff --git a/src/styles/mobile/font-size-large.scss b/src/styles/mobile/font-size-large.scss
index da8daa1e..61b41e7f 100644
--- a/src/styles/mobile/font-size-large.scss
+++ b/src/styles/mobile/font-size-large.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 18px;
     --f7-tabbar-icon-size: 29px;
-    --f7-tabbar-icons-height: 80px;
+    --f7-tabbar-icons-height: 66px;
     --f7-tabbar-label-font-size: 13px;
     --f7-label-font-size: 13px;
     --f7-label-height: 16px;
diff --git a/src/styles/mobile/font-size-small.scss b/src/styles/mobile/font-size-small.scss
index 66978fe1..0678e2c7 100644
--- a/src/styles/mobile/font-size-small.scss
+++ b/src/styles/mobile/font-size-small.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 16px;
     --f7-tabbar-icon-size: 28px;
-    --f7-tabbar-icons-height: 80px;
+    --f7-tabbar-icons-height: 62px;
     --f7-tabbar-label-font-size: 12px;
     --f7-label-font-size: 12px;
     --f7-label-height: 16px;
diff --git a/src/styles/mobile/font-size-x-large.scss b/src/styles/mobile/font-size-x-large.scss
index bab0b92b..226036d9 100644
--- a/src/styles/mobile/font-size-x-large.scss
+++ b/src/styles/mobile/font-size-x-large.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 44px;
     --f7-toolbar-font-size: 19px;
     --f7-tabbar-icon-size: 30px;
-    --f7-tabbar-icons-height: 84px;
+    --f7-tabbar-icons-height: 68px;
     --f7-tabbar-label-font-size: 14px;
     --f7-label-font-size: 14px;
     --f7-label-height: 16px;
diff --git a/src/styles/mobile/font-size-xx-large.scss b/src/styles/mobile/font-size-xx-large.scss
index 9403629a..fba029b4 100644
--- a/src/styles/mobile/font-size-xx-large.scss
+++ b/src/styles/mobile/font-size-xx-large.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 46px;
     --f7-toolbar-font-size: 20px;
     --f7-tabbar-icon-size: 32px;
-    --f7-tabbar-icons-height: 92px;
+    --f7-tabbar-icons-height: 74px;
     --f7-tabbar-label-font-size: 17px;
     --f7-label-font-size: 16px;
     --f7-label-height: 18px;
diff --git a/src/styles/mobile/font-size-xxx-large.scss b/src/styles/mobile/font-size-xxx-large.scss
index e6ef2557..33599ec0 100644
--- a/src/styles/mobile/font-size-xxx-large.scss
+++ b/src/styles/mobile/font-size-xxx-large.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 48px;
     --f7-toolbar-font-size: 22px;
     --f7-tabbar-icon-size: 34px;
-    --f7-tabbar-icons-height: 96px;
+    --f7-tabbar-icons-height: 78px;
     --f7-tabbar-label-font-size: 19px;
     --f7-label-font-size: 18px;
     --f7-label-height: 20px;
diff --git a/src/styles/mobile/font-size-xxxx-large.scss b/src/styles/mobile/font-size-xxxx-large.scss
index 5d605f15..66e468a1 100644
--- a/src/styles/mobile/font-size-xxxx-large.scss
+++ b/src/styles/mobile/font-size-xxxx-large.scss
@@ -7,7 +7,7 @@
     --f7-searchbar-input-height: 50px;
     --f7-toolbar-font-size: 24px;
     --f7-tabbar-icon-size: 36px;
-    --f7-tabbar-icons-height: 100px;
+    --f7-tabbar-icons-height: 82px;
     --f7-tabbar-label-font-size: 21px;
     --f7-label-font-size: 20px;
     --f7-label-height: 22px;
diff --git a/src/styles/mobile/global.scss b/src/styles/mobile/global.scss
index 67751948..b8874fed 100644
--- a/src/styles/mobile/global.scss
+++ b/src/styles/mobile/global.scss
@@ -139,6 +139,12 @@ i.icon.la, i.icon.las, i.icon.lab {
     opacity: 0.55 !important;
 }
 
+.item-input.item-input-outline {
+    > .item-inner {
+        min-height: calc(var(--f7-input-height) + 6px);
+    }
+}
+
 /** custom class **/
 :root {
     --default-icon-color: #000;
@@ -298,10 +304,24 @@ html[dir="rtl"] i.icon.icon-with-direction {
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;
+    --dp-background-color: inherit;
+    --dp-border-color: #aaa;
+    --dp-menu-border-color: #aaa;
+
+    .dp__overlay {
+        --dp-background-color: #e1e1e2;
+    }
 }
 
 .dp__theme_dark {
     --dp-primary-color: #c67e48;
+    --dp-background-color: inherit;
+    --dp-border-color: #555;
+    --dp-menu-border-color: #555;
+
+    .dp__overlay {
+        --dp-background-color: #1f1f1f;
+    }
 }
 
 /** Common class for replacing the default style of framework7 **/
@@ -314,11 +334,12 @@ html[dir="rtl"] i.icon.icon-with-direction {
     background-color: inherit;
 }
 
-.toolbar-inner {
-    gap: 2px !important;
+.toolbar.toolbar-bottom .toolbar-inner {
+    padding-bottom: 0 !important;
+    gap: 2px;
 
     > .link {
-        padding: 0 !important;
+        padding: 0;
     }
 }
 
@@ -326,7 +347,7 @@ html[dir="rtl"] i.icon.icon-with-direction {
     padding-inline-start: 16px;
     padding-inline-end: 16px;
     justify-content: space-between;
-    gap: 4px !important;
+    gap: 4px;
 }
 
 .toolbar-item-auto-size .toolbar-inner > .link {
@@ -566,6 +587,7 @@ html[dir="rtl"] .icon.las .badge.right-bottom-icon {
     width: 100%;
     top: 0;
     cursor: pointer;
+    z-index: 10;
 }
 
 .swipe-handler:after {
@@ -765,18 +787,6 @@ html[dir="rtl"] .combination-list-wrapper .list.combination-list-header .combina
 }
 
 /** Fix @vuepic/vue-datepicker style issue **/
-.dp__theme_light {
-    --dp-background-color: inherit;
-    --dp-border-color: #aaa;
-    --dp-menu-border-color: #aaa;
-}
-
-.dp__theme_dark {
-    --dp-background-color: inherit;
-    --dp-border-color: #555;
-    --dp-menu-border-color: #555;
-}
-
 .dp__main.dp__flex_display {
     flex-direction: column;
 }
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 7218cbbe..d9636df9 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -393,7 +393,9 @@
                     <v-window-item value="map">
                         <v-row>
                             <v-col cols="12" md="12">
-                                <map-view ref="map" map-class="transaction-edit-map-view" :geo-location="transaction.geoLocation" @click="updateSpecifiedGeoLocation">
+                                <map-view ref="map" map-class="transaction-edit-map-view"
+                                          :enable-zoom-control="true" :geo-location="transaction.geoLocation"
+                                          @click="updateSpecifiedGeoLocation">
                                     <template #error-title="{ mapSupported, mapDependencyLoaded }">
                                         <span class="text-subtitle-1" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></span>
                                         <span class="text-subtitle-1" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></span>
diff --git a/src/views/mobile/AboutPage.vue b/src/views/mobile/AboutPage.vue
index b3fb36be..1b42ef6f 100644
--- a/src/views/mobile/AboutPage.vue
+++ b/src/views/mobile/AboutPage.vue
@@ -37,7 +37,7 @@
         <f7-popup push swipe-to-close swipe-handler=".swipe-handler" class="license-popup">
             <f7-page>
                 <f7-navbar>
-                    <div class="swipe-handler" style="z-index: 10"></div>
+                    <div class="swipe-handler"></div>
                     <f7-nav-title class="license-title">{{ tt('License') }}</f7-nav-title>
                 </f7-navbar>
                 <f7-block strong outline class="license-content no-margin-top">
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index e307d810..313746a5 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -135,7 +135,7 @@
             style="height:auto"
             :opened="showForgetPasswordSheet" @sheet:closed="showForgetPasswordSheet = false"
         >
-            <div class="swipe-handler" style="z-index: 10"></div>
+            <div class="swipe-handler"></div>
             <f7-page-content>
                 <div class="display-flex padding justify-content-space-between align-items-center">
                     <div class="ebk-sheet-title"><b>{{ tt('Forget Password?') }}</b></div>
diff --git a/src/views/mobile/accounts/EditPage.vue b/src/views/mobile/accounts/EditPage.vue
index 8f0137bb..4d32d461 100644
--- a/src/views/mobile/accounts/EditPage.vue
+++ b/src/views/mobile/accounts/EditPage.vue
@@ -3,9 +3,9 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': account.type !== AccountType.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -576,7 +576,6 @@ const {
     account,
     subAccounts,
     title,
-    saveButtonTitle,
     inputEmptyProblemMessage,
     inputIsEmpty,
     allAccountCategories,
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index f0fc3c58..a76aed1c 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="tt('Account List')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link href="/account/add" icon-f7="plus" v-if="!sortable"></f7-link>
+                <f7-link icon-f7="plus" href="/account/add" v-if="!sortable"></f7-link>
                 <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/accounts/MoveAllTransactionsPage.vue b/src/views/mobile/accounts/MoveAllTransactionsPage.vue
index 668c7e9e..145eefcb 100644
--- a/src/views/mobile/accounts/MoveAllTransactionsPage.vue
+++ b/src/views/mobile/accounts/MoveAllTransactionsPage.vue
@@ -4,7 +4,9 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Move All Transactions')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :class="{ 'disabled': !fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving }" :text="tt('Confirm')" @click="confirm"></f7-link>
+                <f7-link icon-f7="checkmark_alt"
+                         :class="{ 'disabled': !fromAccount || !toAccountId || fromAccount?.id === toAccountId || !toAccountName || !isToAccountNameValid || moving }"
+                         @click="confirm"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
diff --git a/src/views/mobile/accounts/ReconciliationStatementPage.vue b/src/views/mobile/accounts/ReconciliationStatementPage.vue
index 52c991de..184481ad 100644
--- a/src/views/mobile/accounts/ReconciliationStatementPage.vue
+++ b/src/views/mobile/accounts/ReconciliationStatementPage.vue
@@ -6,12 +6,13 @@
                 <span style="color: var(--f7-text-color)" v-if="!finishQuery">{{ tt('Reconciliation Statement') }}</span>
                 <f7-link popover-open=".display-mode-popover-menu" v-if="finishQuery">
                     <span style="color: var(--f7-text-color)">{{ tt('Reconciliation Statement') }}</span>
-                    <f7-icon class="page-title-bar-icon" color="gray" style="opacity: 0.5" f7="chevron_down_circle_fill"></f7-icon>
+                    <f7-icon class="page-title-bar-icon" style="opacity: 0.5"
+                             color="gray" f7="chevron_down_circle_fill"></f7-icon>
                 </f7-link>
             </f7-nav-title>
-            <f7-nav-right>
-                <f7-link :class="{ 'disabled': !validQuery }" :text="tt('Next')" @click="reload(false)" v-if="!finishQuery"></f7-link>
-                <f7-link :class="{ 'disabled': loading }" icon-f7="ellipsis" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
+            <f7-nav-right class="navbar-compact-icons">
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !validQuery }" @click="reload(false)" v-if="!finishQuery"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': loading }" v-if="finishQuery" @click="showMoreActionSheet = true"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
diff --git a/src/views/mobile/categories/EditPage.vue b/src/views/mobile/categories/EditPage.vue
index 2c6eeb5c..cd0d1dd9 100644
--- a/src/views/mobile/categories/EditPage.vue
+++ b/src/views/mobile/categories/EditPage.vue
@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -180,7 +180,6 @@ const {
     category,
     allAvailableCategories,
     title,
-    saveButtonTitle,
     inputEmptyProblemMessage,
     inputIsEmpty
 } = useCategoryEditPageBase(query['type'] ? parseInt(query['type']) as CategoryType : undefined, query['parentId']);
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index 546b6376..4af6ab01 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !categories.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" icon-f7="plus" v-if="!sortable"></f7-link>
+                <f7-link icon-f7="plus" :href="'/category/add?type=' + categoryType + '&parentId=' + primaryCategoryId + (currentPrimaryCategory ? `&color=${currentPrimaryCategory.color}&icon=${currentPrimaryCategory.icon}` : '')" v-if="!sortable"></f7-link>
                 <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/settings/AccountFilterSettingsPage.vue b/src/views/mobile/settings/AccountFilterSettingsPage.vue
index 60b55b09..d3fccd75 100644
--- a/src/views/mobile/settings/AccountFilterSettingsPage.vue
+++ b/src/views/mobile/settings/AccountFilterSettingsPage.vue
@@ -3,9 +3,9 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleAccount }" @click="save"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleAccount }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -173,7 +173,6 @@ const {
     showHidden,
     filterAccountIds,
     title,
-    applyText,
     allowHiddenAccount,
     allCategorizedAccounts,
     hasAnyAvailableAccount,
diff --git a/src/views/mobile/settings/CategoryFilterSettingsPage.vue b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
index 4719097f..374d20d1 100644
--- a/src/views/mobile/settings/CategoryFilterSettingsPage.vue
+++ b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
@@ -3,9 +3,9 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -181,7 +181,6 @@ const {
     showHidden,
     filterCategoryIds,
     title,
-    applyText,
     allTransactionCategories,
     hasAnyAvailableCategory,
     hasAnyVisibleCategory,
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index b52409ff..932a9bda 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Text Size')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :text="tt('Done')" @click="setFontSize"></f7-link>
+                <f7-link icon-f7="checkmark_alt" @click="setFontSize"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index b0624334..2062dcf4 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -3,9 +3,9 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right>
+            <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableTag }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="tt(applyText)" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -180,7 +180,6 @@ const {
     includeTagsCount,
     excludeTagsCount,
     title,
-    applyText,
     allTags,
     hasAnyAvailableTag,
     hasAnyVisibleTag,
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index 13abe372..b48b890a 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -4,8 +4,8 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Transaction Tags')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
-                <f7-link :class="{ 'disabled': hasEditingTag || !tags.length }" icon-f7="ellipsis" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': hasEditingTag }" icon-f7="plus" v-if="!sortable" @click="add"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': hasEditingTag || !tags.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="plus" :class="{ 'disabled': hasEditingTag }" v-if="!sortable" @click="add"></f7-link>
                 <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving || hasEditingTag }" v-else-if="sortable" @click="saveSortResult"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/templates/ListPage.vue b/src/views/mobile/templates/ListPage.vue
index 9448138f..caa06a81 100644
--- a/src/views/mobile/templates/ListPage.vue
+++ b/src/views/mobile/templates/ListPage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="templateType === TemplateType.Schedule.type ? tt('Scheduled Transactions') : tt('Transaction Templates')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !templates.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :href="'/template/add?templateType=' + templateType" icon-f7="plus" v-if="!sortable"></f7-link>
+                <f7-link icon-f7="plus" :href="'/template/add?templateType=' + templateType" v-if="!sortable"></f7-link>
                 <f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
             </f7-nav-right>
         </f7-navbar>
diff --git a/src/views/mobile/transactions/AmountFilterPage.vue b/src/views/mobile/transactions/AmountFilterPage.vue
index d13704a6..7b5f55c3 100644
--- a/src/views/mobile/transactions/AmountFilterPage.vue
+++ b/src/views/mobile/transactions/AmountFilterPage.vue
@@ -4,7 +4,7 @@
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt('Filter Amount')"></f7-nav-title>
             <f7-nav-right>
-                <f7-link :text="tt('Apply')" @click="confirm"></f7-link>
+                <f7-link icon-f7="checkmark_alt" @click="confirm"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index fadfe495..54a39917 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -3,9 +3,9 @@
         <f7-navbar>
             <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title :title="tt(title)"></f7-nav-title>
-            <f7-nav-right v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
+            <f7-nav-right class="navbar-compact-icons" v-if="mode !== TransactionEditPageMode.View || transaction.type !== TransactionType.ModifyBalance">
                 <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="tt(saveButtonTitle)" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsEmpty || submitting }" @click="save" v-if="mode !== TransactionEditPageMode.View"></f7-link>
             </f7-nav-right>
 
             <f7-subnavbar>
@@ -433,7 +433,7 @@
                 <f7-actions-button v-if="mode !== TransactionEditPageMode.View" @click="clearGeoLocation">{{ tt('Clear Geographic Location') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group v-if="!!getMapProvider()">
-                <f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="showGeoLocationMapSheet = true">{{ tt('Show on the map') }}</f7-actions-button>
+                <f7-actions-button :class="{ 'disabled': !transaction.geoLocation }" @click="setGeoLocationByClickMap = false; showGeoLocationMapSheet = true">{{ tt('Show on the map') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
                 <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
diff --git a/src/views/mobile/users/DataManagementPage.vue b/src/views/mobile/users/DataManagementPage.vue
index 84ecc9ee..86d8d24b 100644
--- a/src/views/mobile/users/DataManagementPage.vue
+++ b/src/views/mobile/users/DataManagementPage.vue
@@ -37,7 +37,7 @@
                   :swipe-to-close="!exportingData" :close-on-escape="!exportingData"
                   :close-by-backdrop-click="!exportingData" :close-by-outside-click="!exportingData"
                   :opened="showExportDataSheet" @sheet:closed="showExportDataSheet = false; exportedData = null;">
-            <div class="swipe-handler" style="z-index: 10"></div>
+            <div class="swipe-handler"></div>
             <f7-page-content class="margin-top no-padding-top">
                 <div class="display-flex padding justify-content-space-between align-items-center">
                     <div class="ebk-sheet-title"><b>{{ tt('Are you sure you want to export all transaction data to file?') }}</b></div>
diff --git a/src/views/mobile/users/UserProfilePage.vue b/src/views/mobile/users/UserProfilePage.vue
index c88d48a2..11ebf54c 100644
--- a/src/views/mobile/users/UserProfilePage.vue
+++ b/src/views/mobile/users/UserProfilePage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="tt('User Profile')"></f7-nav-title>
             <f7-nav-right class="navbar-compact-icons">
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !isUserVerifyEmailEnabled() || loading || emailVerified }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" :text="tt('Save')" @click="save(currentNoPassword)"></f7-link>
+                <f7-link icon-f7="checkmark_alt" :class="{ 'disabled': inputIsNotChanged || inputIsInvalid || saving }" @click="save(currentNoPassword)"></f7-link>
             </f7-nav-right>
         </f7-navbar>