diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart
new file mode 100644
index 0000000000..9e1e610599
--- /dev/null
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar.dart
@@ -0,0 +1,64 @@
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+
+enum FlowyAppBarLeadingType {
+  back,
+  close,
+  cancel;
+
+  Widget getWidget(VoidCallback? onTap) {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return AppBarBackButton(onTap: onTap);
+      case FlowyAppBarLeadingType.close:
+        return AppBarCloseButton(onTap: onTap);
+      case FlowyAppBarLeadingType.cancel:
+        return AppBarCancelButton(onTap: onTap);
+    }
+  }
+
+  double? get width {
+    switch (this) {
+      case FlowyAppBarLeadingType.back:
+        return 40.0;
+      case FlowyAppBarLeadingType.close:
+        return 40.0;
+      case FlowyAppBarLeadingType.cancel:
+        return 120;
+    }
+  }
+}
+
+class FlowyAppBar extends AppBar {
+  FlowyAppBar({
+    super.key,
+    super.actions,
+    Widget? title,
+    String? titleText,
+    FlowyAppBarLeadingType leadingType = FlowyAppBarLeadingType.back,
+    super.centerTitle,
+    VoidCallback? onTapLeading,
+    bool showDivider = true,
+  }) : super(
+          title: title ??
+              FlowyText(
+                titleText ?? '',
+                fontSize: 15.0,
+                fontWeight: FontWeight.w500,
+              ),
+          titleSpacing: 0,
+          elevation: 0,
+          leading: leadingType.getWidget(onTapLeading),
+          leadingWidth: leadingType.width,
+          toolbarHeight: 44.0,
+          bottom: showDivider
+              ? const PreferredSize(
+                  preferredSize: Size.fromHeight(0.5),
+                  child: Divider(
+                    height: 0.5,
+                  ),
+                )
+              : null,
+        );
+}
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart
index 71672bb7e8..95647cc460 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart
@@ -1,3 +1,4 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -15,7 +16,9 @@ class AppBarBackButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return AppBarButton(
       onTap: onTap ?? () => Navigator.pop(context),
-      child: const Icon(Icons.arrow_back_ios_new),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_back_s,
+      ),
     );
   }
 }
@@ -24,24 +27,17 @@ class AppBarCloseButton extends StatelessWidget {
   const AppBarCloseButton({
     super.key,
     this.onTap,
-    this.margin = const EdgeInsets.symmetric(
-      horizontal: 16.0,
-      vertical: 12.0,
-    ),
   });
 
   final VoidCallback? onTap;
-  final EdgeInsets margin;
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
-      useIntrinsicWidth: true,
-      text: const Icon(
-        Icons.close,
-      ),
-      margin: margin,
+    return AppBarButton(
       onTap: onTap ?? () => Navigator.pop(context),
+      child: const FlowySvg(
+        FlowySvgs.m_app_bar_close_s,
+      ),
     );
   }
 }
@@ -49,17 +45,18 @@ class AppBarCloseButton extends StatelessWidget {
 class AppBarCancelButton extends StatelessWidget {
   const AppBarCancelButton({
     super.key,
-    required this.onTap,
+    this.onTap,
   });
 
-  final VoidCallback onTap;
+  final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
-      onTap: onTap,
+      onTap: onTap ?? () => Navigator.pop(context),
       child: FlowyText(
         LocaleKeys.button_cancel.tr(),
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }
@@ -76,16 +73,13 @@ class AppBarDoneButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
+      isActionButton: true,
       onTap: onTap,
-      extent: 0.0,
-      child: Padding(
-        padding: const EdgeInsets.only(right: 8.0),
-        child: FlowyText(
-          LocaleKeys.button_Done.tr(),
-          color: Theme.of(context).colorScheme.primary,
-          fontWeight: FontWeight.w500,
-          textAlign: TextAlign.right,
-        ),
+      child: FlowyText(
+        LocaleKeys.button_Done.tr(),
+        color: Theme.of(context).colorScheme.primary,
+        fontWeight: FontWeight.w500,
+        textAlign: TextAlign.right,
       ),
     );
   }
@@ -102,11 +96,9 @@ class AppBarMoreButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBarButton(
+      isActionButton: true,
       onTap: () => onTap(context),
-      child: const Icon(
-        // replace with flowy icon
-        Icons.more_horiz_sharp,
-      ),
+      child: const FlowySvg(FlowySvgs.three_dots_s),
     );
   }
 }
@@ -114,27 +106,28 @@ class AppBarMoreButton extends StatelessWidget {
 class AppBarButton extends StatelessWidget {
   const AppBarButton({
     super.key,
-    this.extent = 16.0,
+    this.isActionButton = false,
     required this.onTap,
     required this.child,
   });
 
-  // used to extend the hit area of the more button
-  final double extent;
+  static const defaultWidth = 40.0;
 
   final VoidCallback onTap;
   final Widget child;
+  final bool isActionButton;
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
-      borderRadius: BorderRadius.circular(28),
-      splashColor: Colors.transparent,
-      focusColor: Colors.transparent,
-      highlightColor: Colors.transparent,
+    return GestureDetector(
       onTap: onTap,
       child: Padding(
-        padding: EdgeInsets.all(extent),
+        padding: EdgeInsets.only(
+          top: 12.0,
+          bottom: 12.0,
+          left: 12.0,
+          right: isActionButton ? 12.0 : 8.0,
+        ),
         child: child,
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
index e536648a14..ab0af4c6ea 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_state_container.dart';
@@ -116,15 +117,12 @@ class _MobileViewPageState extends State<MobileViewPage> {
 
   Widget _buildApp(ViewPB? view, List<Widget> actions, Widget child) {
     final icon = view?.icon.value;
-    final elevation = (view?.layout.isDatabaseView ?? false) ? 0.0 : null;
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        elevation: elevation,
+      appBar: FlowyAppBar(
         title: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            if (icon != null)
+            if (icon != null && icon.isNotEmpty)
               EmojiText(
                 emoji: '$icon ',
                 fontSize: 22.0,
@@ -138,7 +136,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
             ),
           ],
         ),
-        leading: const AppBarBackButton(),
         actions: actions,
       ),
       body: SafeArea(child: child),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
index 84a5e4b395..1d5fce1466 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
@@ -43,7 +43,7 @@ class OptionColorList extends StatelessWidget {
               alignment: Alignment.center,
               child: isSelected
                   ? const FlowySvg(
-                      FlowySvgs.blue_check_s,
+                      FlowySvgs.m_blue_check_s,
                       size: Size.square(28.0),
                       blendMode: null,
                     )
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart
index d670ccf7af..7bca4a1e61 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_header.dart
@@ -27,7 +27,6 @@ class BottomSheetHeader extends StatelessWidget {
             child: Align(
               alignment: Alignment.centerLeft,
               child: AppBarCloseButton(
-                margin: EdgeInsets.zero,
                 onTap: onClose,
               ),
             ),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
index be3d848e72..295b50f694 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
@@ -151,12 +151,7 @@ class _Header extends StatelessWidget {
             if (showCloseButton)
               const Align(
                 alignment: Alignment.centerLeft,
-                child: Padding(
-                  padding: EdgeInsets.only(left: 16),
-                  child: AppBarCloseButton(
-                    margin: EdgeInsets.zero,
-                  ),
-                ),
+                child: AppBarCloseButton(),
               ),
             Align(
               child: FlowyText(
@@ -168,11 +163,8 @@ class _Header extends StatelessWidget {
             if (showDoneButton)
               Align(
                 alignment: Alignment.centerRight,
-                child: Padding(
-                  padding: const EdgeInsets.only(right: 16),
-                  child: AppBarDoneButton(
-                    onTap: () => Navigator.pop(context),
-                  ),
+                child: AppBarDoneButton(
+                  onTap: () => Navigator.pop(context),
                 ),
               ),
           ],
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart
index d80800b95a..f1706b651c 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/card/card_detail/mobile_card_detail_screen.dart
@@ -1,7 +1,10 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart';
+import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/field/field_controller.dart';
@@ -14,7 +17,6 @@ import 'package:appflowy/plugins/database/grid/application/row/row_detail_bloc.d
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_skeleton/text.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
-import 'package:appflowy/plugins/database/application/cell/bloc/text_cell_bloc.dart';
 import 'package:appflowy/plugins/database/widgets/row/row_property.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -77,7 +79,14 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
     return BlocProvider.value(
       value: _bloc,
       child: Scaffold(
-        appBar: _buildAppBar(),
+        appBar: FlowyAppBar(
+          leadingType: FlowyAppBarLeadingType.close,
+          actions: [
+            AppBarMoreButton(
+              onTap: (_) => _showCardActions(context),
+            ),
+          ],
+        ),
         body: BlocBuilder<MobileRowDetailBloc, MobileRowDetailState>(
           buildWhen: (previous, current) =>
               previous.rowInfos.length != current.rowInfos.length,
@@ -118,27 +127,6 @@ class _MobileRowDetailPageState extends State<MobileRowDetailPage> {
     );
   }
 
-  AppBar _buildAppBar() {
-    return AppBar(
-      elevation: 0,
-      leading: IconButton(
-        onPressed: () => context.pop(),
-        icon: const Icon(Icons.close),
-      ),
-      actions: [
-        IconButton(
-          iconSize: 40,
-          icon: const FlowySvg(
-            FlowySvgs.details_horizontal_s,
-            size: Size.square(20),
-          ),
-          padding: EdgeInsets.zero,
-          onPressed: () => _showCardActions(context),
-        ),
-      ],
-    );
-  }
-
   void _showCardActions(BuildContext context) {
     showMobileBottomSheet(
       context,
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
index da599176d3..23b6208a59 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
@@ -1,16 +1,15 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/drag_handler.dart';
-import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/date_cell_editor_bloc.dart';
+import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/mobile_appflowy_date_picker.dart';
 import 'package:appflowy/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/date_entities.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileDateCellEditScreen extends StatefulWidget {
@@ -43,7 +42,7 @@ class _MobileDateCellEditScreenState extends State<MobileDateCellEditScreen> {
 
   Widget _buildFullScreen() {
     return Scaffold(
-      appBar: AppBar(title: FlowyText.medium(LocaleKeys.titleBar_date.tr())),
+      appBar: FlowyAppBar(titleText: LocaleKeys.titleBar_date.tr()),
       body: _buildDatePicker(),
     );
   }
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart
index 95c2c0b9ac..587194dea1 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_create_field_screen.dart
@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
@@ -44,23 +44,10 @@ class _MobileNewPropertyScreenState extends State<MobileNewPropertyScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: FlowyAppBar(
         centerTitle: true,
-        title: FlowyText.medium(
-          LocaleKeys.grid_field_newProperty.tr(),
-        ),
-        leading: AppBarCancelButton(
-          onTap: () => context.pop(),
-        ),
-        leadingWidth: 120,
-        elevation: 0,
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(1),
-          child: Divider(
-            height: 1,
-            thickness: 1,
-          ),
-        ),
+        titleText: LocaleKeys.grid_field_newProperty.tr(),
+        leadingType: FlowyAppBarLeadingType.cancel,
         actions: [
           _SaveButton(
             onSave: () {
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart
index c937bb73b8..9fbe6e7d29 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_edit_field_screen.dart
@@ -1,14 +1,12 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/field/mobile_field_type_option_editor.dart';
 import 'package:appflowy/plugins/database/application/field/field_backend_service.dart';
 import 'package:appflowy/plugins/database/application/field/field_info.dart';
 import 'package:appflowy/plugins/database/application/field/field_service.dart';
 import 'package:appflowy/plugins/database/widgets/setting/field_visibility_extension.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 class MobileEditPropertyScreen extends StatefulWidget {
@@ -56,22 +54,8 @@ class _MobileEditPropertyScreenState extends State<MobileEditPropertyScreen> {
         }
       },
       child: Scaffold(
-        appBar: AppBar(
-          centerTitle: true,
-          title: FlowyText.medium(
-            LocaleKeys.grid_field_editProperty.tr(),
-          ),
-          elevation: 0,
-          bottom: const PreferredSize(
-            preferredSize: Size.fromHeight(1),
-            child: Divider(
-              height: 1,
-              thickness: 1,
-            ),
-          ),
-          leading: AppBarBackButton(
-            onTap: () => context.pop(_fieldOptionValues),
-          ),
+        appBar: FlowyAppBar(
+          titleText: LocaleKeys.grid_field_editProperty.tr(),
         ),
         body: MobileFieldEditor(
           mode: FieldOptionMode.edit,
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart
index 345fda5991..3be308fe90 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/mobile_calendar_events_screen.dart
@@ -1,5 +1,4 @@
-import 'package:flutter/material.dart';
-
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/database/mobile_calendar_events_empty.dart';
 import 'package:appflowy/plugins/database/application/row/row_cache.dart';
 import 'package:appflowy/plugins/database/calendar/application/calendar_bloc.dart';
@@ -8,6 +7,7 @@ import 'package:calendar_view/calendar_view.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 class MobileCalendarEventsScreen extends StatefulWidget {
@@ -56,10 +56,9 @@ class _MobileCalendarEventsScreenState
             widget.calendarBloc.add(CalendarEvent.createEvent(widget.date)),
         child: const Text('+'),
       ),
-      appBar: AppBar(
-        title: Text(
-          DateFormat.yMMMMd(context.locale.toLanguageTag()).format(widget.date),
-        ),
+      appBar: FlowyAppBar(
+        titleText: DateFormat.yMMMMd(context.locale.toLanguageTag())
+            .format(widget.date),
       ),
       body: BlocProvider<CalendarBloc>.value(
         value: widget.calendarBloc,
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
index 8bc76bdda8..8e6fcfcb7c 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
@@ -106,7 +106,6 @@ class MobileDatabaseViewListButton extends StatelessWidget {
       onPressed: () {
         showMobileBottomSheet(
           context,
-          padding: EdgeInsets.zero,
           showDragHandle: true,
           builder: (_) {
             return BlocProvider<ViewBloc>(
@@ -126,7 +125,7 @@ class MobileDatabaseViewListButton extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           const FlowySvg(
-            FlowySvgs.blue_check_s,
+            FlowySvgs.m_blue_check_s,
             size: Size.square(20),
             blendMode: BlendMode.dst,
           ),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
index c7c9907796..08c006e7c5 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_quick_actions.dart
@@ -44,7 +44,7 @@ class _MobileDatabaseViewQuickActionsState
   Widget _quickActions(BuildContext context, ViewPB view) {
     final isInline = view.childViews.isNotEmpty;
     return Padding(
-      padding: const EdgeInsets.only(top: 8, bottom: 38),
+      padding: const EdgeInsets.only(top: 8),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart
index 45d7ec8a23..c01257a474 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/home/mobile_home_setting_page.dart
@@ -1,6 +1,7 @@
 import 'package:appflowy/env/cloud_env.dart';
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/cloud/cloud_setting_group.dart';
 import 'package:appflowy/mobile/presentation/setting/user_session_setting_group.dart';
@@ -42,8 +43,8 @@ class _MobileHomeSettingPageState extends State<MobileHomeSettingPage> {
         });
 
         return Scaffold(
-          appBar: AppBar(
-            title: Text(LocaleKeys.settings_title.tr()),
+          appBar: FlowyAppBar(
+            titleText: LocaleKeys.settings_title.tr(),
           ),
           body: userProfile == null
               ? _buildErrorWidget(errorMsg)
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart
index ef58850dad..dc5d3ea55e 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/about.dart
@@ -1,2 +1 @@
 export 'about_setting_group.dart';
-export 'user_agreement_page.dart';
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart
deleted file mode 100644
index 3adf2ec7fa..0000000000
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/about/user_agreement_page.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-class UserAgreementPage extends StatelessWidget {
-  const UserAgreementPage({super.key});
-
-  static const routeName = '/UserAgreementPage';
-
-  @override
-  Widget build(BuildContext context) {
-    // TODO(yijing): implement page
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_mobile_userAgreement.tr()),
-      ),
-      body: const Center(
-        child: Text('🪜 Under construction'),
-      ),
-    );
-  }
-}
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
index d0e165cdf3..acaa515a8a 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/cloud/appflowy_cloud_page.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_cloud.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -12,8 +13,8 @@ class AppFlowyCloudPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_menu_cloudSettings.tr()),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.settings_menu_cloudSettings.tr(),
       ),
       body: Padding(
         padding: const EdgeInsets.all(20.0),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
index 7bcc692821..a2a6ca04f5 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
@@ -1,10 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
@@ -47,58 +46,48 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
     final selectedFontFamilyName =
         context.watch<AppearanceSettingsCubit>().state.font;
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        elevation: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_font.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(0.5),
-          child: Divider(
-            height: 0.5,
-          ),
-        ),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_font.tr(),
       ),
       body: SafeArea(
-        child: ListView.separated(
-          itemBuilder: (context, index) {
-            if (index == 0) {
-              // search bar
-              return Padding(
-                padding: const EdgeInsets.all(8.0),
-                child: FlowyMobileSearchTextField(
-                  onChanged: (keyword) {
-                    setState(() {
-                      availableFonts = _availableFonts
-                          .where(
-                            (element) => parseFontFamilyName(element)
-                                .toLowerCase()
-                                .contains(keyword.toLowerCase()),
-                          )
-                          .toList();
-                    });
-                  },
-                ),
+        child: Scrollbar(
+          child: ListView.builder(
+            itemBuilder: (context, index) {
+              if (index == 0) {
+                // search bar
+                return Padding(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 8.0,
+                    horizontal: 12.0,
+                  ),
+                  child: FlowyMobileSearchTextField(
+                    onChanged: (keyword) {
+                      setState(() {
+                        availableFonts = _availableFonts
+                            .where(
+                              (element) => parseFontFamilyName(element)
+                                  .toLowerCase()
+                                  .contains(keyword.toLowerCase()),
+                            )
+                            .toList();
+                      });
+                    },
+                  ),
+                );
+              }
+              final fontFamilyName = availableFonts[index - 1];
+              final displayName = parseFontFamilyName(fontFamilyName);
+              return FlowyOptionTile.checkbox(
+                text: displayName,
+                isSelected: selectedFontFamilyName == fontFamilyName,
+                showTopBorder: false,
+                onTap: () => context.pop(fontFamilyName),
+                fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
+                backgroundColor: Colors.transparent,
               );
-            }
-            final fontFamilyName = availableFonts[index - 1];
-            final displayName = parseFontFamilyName(fontFamilyName);
-            return FlowyOptionTile.checkbox(
-              text: displayName,
-              isSelected: selectedFontFamilyName == fontFamilyName,
-              showTopBorder: index == 0,
-              onTap: () => context.pop(fontFamilyName),
-              fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
-              backgroundColor: Colors.transparent,
-            );
-          },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
+            },
+            itemCount: availableFonts.length + 1, // with search bar
           ),
-          itemCount: availableFonts.length + 1, // with search bar
         ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
index 8dbd055727..67eb9dbf6f 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/language/language_picker_screen.dart
@@ -1,8 +1,8 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
+import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/language.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -29,49 +29,21 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
   Widget build(BuildContext context) {
     final supportedLocales = EasyLocalization.of(context)!.supportedLocales;
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_language.tr(),
       ),
       body: SafeArea(
-        child: ListView.separated(
+        child: ListView.builder(
           itemBuilder: (context, index) {
             final locale = supportedLocales[index];
-            return SizedBox(
-              height: 48.0,
-              child: InkWell(
-                onTap: () => context.pop(locale),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 4.0,
-                    vertical: 12.0,
-                  ),
-                  child: Row(
-                    children: [
-                      const HSpace(12.0),
-                      FlowyText(
-                        languageFromLocale(locale),
-                      ),
-                      const Spacer(),
-                      if (EasyLocalization.of(context)!.locale == locale)
-                        const Icon(
-                          Icons.check,
-                          size: 16,
-                        ),
-                      const HSpace(12.0),
-                    ],
-                  ),
-                ),
-              ),
+            return FlowyOptionTile.checkbox(
+              text: languageFromLocale(locale),
+              isSelected: EasyLocalization.of(context)!.locale == locale,
+              showTopBorder: false,
+              onTap: () => context.pop(locale),
+              backgroundColor: Colors.transparent,
             );
           },
-          separatorBuilder: (_, __) => const Divider(
-            height: 1,
-          ),
           itemCount: supportedLocales.length,
         ),
       ),
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart
index c20e8c07c8..05aca0ba09 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/launch_settings_page.dart
@@ -1,5 +1,6 @@
 import 'package:appflowy/env/env.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/mobile/presentation/presentation.dart';
 import 'package:appflowy/mobile/presentation/setting/self_host_setting_group.dart';
 import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
@@ -18,8 +19,8 @@ class MobileLaunchSettingsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     context.watch<AppearanceSettingsCubit>();
     return Scaffold(
-      appBar: AppBar(
-        title: Text(LocaleKeys.settings_title.tr()),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.settings_title.tr(),
       ),
       body: SingleChildScrollView(
         child: Padding(
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart
index 8e3f7123bd..26a2e0ad8c 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart
@@ -51,6 +51,7 @@ class PersonalInfoSettingGroup extends StatelessWidget {
                     showCloseButton: true,
                     showDragHandle: true,
                     showDivider: false,
+                    padding: const EdgeInsets.symmetric(horizontal: 16),
                     builder: (_) {
                       return EditUsernameBottomSheet(
                         context,
diff --git a/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart b/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart
index db5119eb56..d4b9304f08 100644
--- a/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart
+++ b/frontend/appflowy_flutter/lib/plugins/base/color/color_picker_screen.dart
@@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/color/color_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -17,13 +16,8 @@ class MobileColorPickerScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
       ),
       body: SafeArea(
         child: FlowyMobileColorPicker(
diff --git a/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart b/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart
index 28972045b7..a41037a47e 100644
--- a/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart
@@ -1,8 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class IconPickerPage extends StatelessWidget {
@@ -18,13 +17,8 @@ class IconPickerPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          title ?? LocaleKeys.titleBar_pageIcon.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: title ?? LocaleKeys.titleBar_pageIcon.tr(),
       ),
       body: SafeArea(
         child: FlowyIconPicker(
diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
index 3aaf5b140d..4161706935 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
@@ -1,5 +1,6 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
@@ -61,10 +62,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
               mainAxisSize: MainAxisSize.min,
               children: [
                 const DragHandler(),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: _buildHeader(context),
-                ),
+                _buildHeader(context),
                 const Divider(height: 0.5),
                 Expanded(
                   child: Padding(
@@ -83,20 +81,14 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
   }
 
   Widget _buildHeader(BuildContext context) {
-    const iconWidth = 36.0;
     const height = 44.0;
     return Stack(
       children: [
         Align(
           alignment: Alignment.centerLeft,
-          child: FlowyIconButton(
-            icon: FlowySvg(
-              showMoreOptions ? FlowySvgs.arrow_left_s : FlowySvgs.close_s,
-              size: const Size.square(iconWidth),
-            ),
-            width: iconWidth,
-            onPressed: () => _popOrBack(),
-          ),
+          child: showMoreOptions
+              ? AppBarBackButton(onTap: _popOrBack)
+              : AppBarCloseButton(onTap: _popOrBack),
         ),
         SizedBox(
           height: 44.0,
@@ -473,6 +465,7 @@ class _MoreOptionsState extends State<_MoreOptions> {
     return ConstrainedBox(
       constraints: const BoxConstraints.tightFor(height: 52.0),
       child: FlowyOptionTile.textField(
+        showTopBorder: false,
         onTextChanged: (name) => widget.onUpdate(name, null),
         controller: widget.controller,
       ),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
index d655a1d2bd..98013621cf 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_language_screen.dart
@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/string_extension.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -15,13 +15,8 @@ class MobileCodeLanguagePickerScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        titleSpacing: 0,
-        title: FlowyText.semibold(
-          LocaleKeys.titleBar_language.tr(),
-          fontSize: 14.0,
-        ),
-        leading: const AppBarBackButton(),
+      appBar: FlowyAppBar(
+        titleText: LocaleKeys.titleBar_language.tr(),
       ),
       body: SafeArea(
         child: ListView.separated(
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
index cd0c258e5c..eb8b7ec061 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
@@ -221,7 +221,7 @@ class _BackgroundColorItem extends StatelessWidget {
         alignment: Alignment.center,
         child: isSelected
             ? const FlowySvg(
-                FlowySvgs.blue_check_s,
+                FlowySvgs.m_blue_check_s,
                 size: Size.square(28.0),
                 blendMode: null,
               )
diff --git a/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart b/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart
index 2b64a82624..9e3107b81d 100644
--- a/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart
+++ b/frontend/appflowy_flutter/lib/startup/tasks/generate_router.dart
@@ -50,7 +50,6 @@ GoRouter generateRouter(Widget child) {
       if (PlatformExtension.isMobile) ...[
         // settings
         _mobileHomeSettingPageRoute(),
-        _mobileSettingUserAgreementPageRoute(),
         _mobileCloudSettingAppFlowyCloudPageRoute(),
         _mobileLaunchSettingsPageRoute(),
 
@@ -209,16 +208,6 @@ GoRoute _mobileCloudSettingAppFlowyCloudPageRoute() {
   );
 }
 
-GoRoute _mobileSettingUserAgreementPageRoute() {
-  return GoRoute(
-    parentNavigatorKey: AppGlobals.rootNavKey,
-    path: UserAgreementPage.routeName,
-    pageBuilder: (context, state) {
-      return const MaterialPage(child: UserAgreementPage());
-    },
-  );
-}
-
 GoRoute _mobileLaunchSettingsPageRoute() {
   return GoRoute(
     parentNavigatorKey: AppGlobals.rootNavKey,
diff --git a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart
index d98d9c1f0a..e012f6e33d 100644
--- a/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart
+++ b/frontend/appflowy_flutter/lib/user/presentation/screens/sign_in_screen/mobile_loading_screen.dart
@@ -1,5 +1,5 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
-import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar.dart';
 import 'package:appflowy/user/application/sign_in_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -16,13 +16,11 @@ class MobileLoadingScreen extends StatelessWidget {
     const double spacing = 16;
 
     return Scaffold(
-      appBar: AppBar(
-        leading: AppBarCloseButton(
-          onTap: () => context.read<SignInBloc>().add(
-                const SignInEvent.cancel(),
-              ),
-        ),
-        elevation: 0,
+      appBar: FlowyAppBar(
+        showDivider: false,
+        onTapLeading: () => context.read<SignInBloc>().add(
+              const SignInEvent.cancel(),
+            ),
       ),
       body: Center(
         child: Column(
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart
index 1d7471dac0..5fc9233a28 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/mobile_date_header.dart
@@ -1,10 +1,8 @@
-import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 
 const _height = 44.0;
 
@@ -15,18 +13,11 @@ class MobileDateHeader extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       color: Theme.of(context).colorScheme.surface,
-      padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: Stack(
         children: [
-          Align(
+          const Align(
             alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
-              icon: const FlowySvg(
-                FlowySvgs.close_s,
-                size: Size.square(_height),
-              ),
-              onPressed: () => context.pop(),
-            ),
+            child: AppBarCloseButton(),
           ),
           Align(
             child: FlowyText.medium(
diff --git a/frontend/resources/flowy_icons/16x/m_app_bar_back.svg b/frontend/resources/flowy_icons/16x/m_app_bar_back.svg
new file mode 100644
index 0000000000..817fec672b
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/m_app_bar_back.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon_left_outlined">
+<path id="Union" d="M13.5774 1.9107C13.9028 2.23614 13.9028 2.76378 13.5774 3.08921L6.66667 9.99996L13.5774 16.9107C13.9028 17.2361 13.9028 17.7638 13.5774 18.0892C13.252 18.4147 12.7243 18.4147 12.3989 18.0892L5.48816 11.1785C4.83728 10.5276 4.83728 9.47232 5.48816 8.82145L12.3989 1.9107C12.7243 1.58527 13.252 1.58527 13.5774 1.9107Z" fill="#2B2F36"/>
+</g>
+</svg>
diff --git a/frontend/resources/flowy_icons/16x/m_app_bar_close.svg b/frontend/resources/flowy_icons/16x/m_app_bar_close.svg
new file mode 100644
index 0000000000..e7ce7c6515
--- /dev/null
+++ b/frontend/resources/flowy_icons/16x/m_app_bar_close.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#133;&#179;&#233;&#151;&#173;_close 1">
+<path id="Union" d="M5.13807 4.19526C4.87772 3.93491 4.45561 3.93491 4.19526 4.19526C3.93491 4.45561 3.93491 4.87772 4.19526 5.13807L9.05719 10L4.19526 14.8619C3.93491 15.1223 3.93491 15.5444 4.19526 15.8047C4.45561 16.0651 4.87772 16.0651 5.13807 15.8047L10 10.9428L14.8619 15.8047C15.1223 16.0651 15.5444 16.0651 15.8047 15.8047C16.0651 15.5444 16.0651 15.1223 15.8047 14.8619L10.9428 10L15.8047 5.13807C16.0651 4.87772 16.0651 4.45561 15.8047 4.19526C15.5444 3.93491 15.1223 3.93491 14.8619 4.19526L10 9.05719L5.13807 4.19526Z" fill="#1F2329" stroke="#1F2329" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>