diff --git a/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart b/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
index dfe0f74744..73b006691f 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
@@ -7,16 +7,16 @@ class CalendarSize {
   static double get headerContainerPadding => 12 * scale;
 
   static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
+        GridSize.horizontalHeaderPadding,
         CalendarSize.headerContainerPadding,
-        GridSize.leadingHeaderPadding,
+        GridSize.horizontalHeaderPadding,
         CalendarSize.headerContainerPadding,
       );
 
   static EdgeInsets get contentInsetsMobile => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding / 2,
+        GridSize.horizontalHeaderPadding / 2,
         0,
-        GridSize.leadingHeaderPadding / 2,
+        GridSize.horizontalHeaderPadding / 2,
         0,
       );
 
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
index 88541b343e..853f83c64d 100755
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
@@ -16,7 +16,7 @@ class GridLayout {
         .reduce((value, element) => value + element);
 
     return fieldsWidth +
-        GridSize.leadingHeaderPadding +
+        GridSize.horizontalHeaderPadding +
         GridSize.trailHeaderPadding;
   }
 }
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
index e73ffe7e9a..5e96e35f1f 100755
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
@@ -7,19 +7,14 @@ class GridSize {
   static double get scrollBarSize => 8 * scale;
   static double get headerHeight => 40 * scale;
   static double get footerHeight => 40 * scale;
-  static double get leadingHeaderPadding =>
-      PlatformExtension.isDesktop ? 40 * scale : 20 * scale;
+  static double get horizontalHeaderPadding =>
+      PlatformExtension.isDesktop ? 40 * scale : 16 * scale;
   static double get trailHeaderPadding => 140 * scale;
-  static double get headerContainerPadding => 0 * scale;
   static double get cellHPadding => 10 * scale;
   static double get cellVPadding => 10 * scale;
   static double get popoverItemHeight => 26 * scale;
   static double get typeOptionSeparatorHeight => 4 * scale;
 
-  static EdgeInsets get headerContentInsets => EdgeInsets.symmetric(
-        horizontal: GridSize.headerContainerPadding,
-        vertical: GridSize.headerContainerPadding,
-      );
   static EdgeInsets get cellContentInsets => EdgeInsets.symmetric(
         horizontal: GridSize.cellHPadding,
         vertical: GridSize.cellVPadding,
@@ -36,18 +31,13 @@ class GridSize {
       const EdgeInsets.symmetric(horizontal: 8, vertical: 2);
 
   static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
-        PlatformExtension.isMobile
-            ? GridSize.leadingHeaderPadding
-            : GridSize.headerContainerPadding,
-        PlatformExtension.isMobile ? 100 : GridSize.headerContainerPadding,
+        GridSize.horizontalHeaderPadding,
+        0,
+        PlatformExtension.isMobile ? GridSize.horizontalHeaderPadding : 0,
+        PlatformExtension.isMobile ? 100 : 0,
       );
 
-  static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
+  static EdgeInsets get contentInsets => EdgeInsets.symmetric(
+        horizontal: GridSize.horizontalHeaderPadding,
       );
 }
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
index 23b51c437f..1172f81ac9 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
@@ -157,12 +157,14 @@ class _GridPageContentState extends State<GridPageContent> {
   final _scrollController = GridScrollController(
     scrollGroupController: LinkedScrollControllerGroup(),
   );
-  late final ScrollController headerScrollController;
+  late final ScrollController contentScrollController;
+  late final ScrollController reorderableController;
 
   @override
   void initState() {
     super.initState();
-    headerScrollController = _scrollController.linkHorizontalController();
+    contentScrollController = _scrollController.linkHorizontalController();
+    reorderableController = _scrollController.linkHorizontalController();
   }
 
   @override
@@ -196,7 +198,8 @@ class _GridPageContentState extends State<GridPageContent> {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               _GridHeader(
-                headerScrollController: headerScrollController,
+                contentScrollController: contentScrollController,
+                reorderableController: reorderableController,
               ),
               _GridRows(
                 viewId: widget.view.id,
@@ -205,8 +208,8 @@ class _GridPageContentState extends State<GridPageContent> {
             ],
           ),
           Positioned(
-            bottom: 20,
-            right: 20,
+            bottom: 16,
+            right: 16,
             child: getGridFabs(context),
           ),
         ],
@@ -216,9 +219,13 @@ class _GridPageContentState extends State<GridPageContent> {
 }
 
 class _GridHeader extends StatelessWidget {
-  const _GridHeader({required this.headerScrollController});
+  const _GridHeader({
+    required this.contentScrollController,
+    required this.reorderableController,
+  });
 
-  final ScrollController headerScrollController;
+  final ScrollController contentScrollController;
+  final ScrollController reorderableController;
 
   @override
   Widget build(BuildContext context) {
@@ -226,7 +233,8 @@ class _GridHeader extends StatelessWidget {
       builder: (context, state) {
         return MobileGridHeader(
           viewId: state.viewId,
-          anchorScrollController: headerScrollController,
+          contentScrollController: contentScrollController,
+          reorderableController: reorderableController,
         );
       },
     );
@@ -247,7 +255,7 @@ class _GridRows extends StatelessWidget {
     return BlocBuilder<GridBloc, GridState>(
       buildWhen: (previous, current) => previous.fields != current.fields,
       builder: (context, state) {
-        final double contentWidth = _getContentWidth(state.fields);
+        final double contentWidth = getMobileGridContentWidth(state.fields);
         return Expanded(
           child: _WrapScrollView(
             scrollController: scrollController,
@@ -277,14 +285,6 @@ class _GridRows extends StatelessWidget {
     );
   }
 
-  double _getContentWidth(List<FieldInfo> fields) {
-    final visibleFields = fields.where(
-      (field) =>
-          field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
-    );
-    return (visibleFields.length + 1) * 200 + GridSize.leadingHeaderPadding * 2;
-  }
-
   Widget _renderList(
     BuildContext context,
     GridState state,
@@ -438,3 +438,11 @@ class _AddRowButton extends StatelessWidget {
     );
   }
 }
+
+double getMobileGridContentWidth(List<FieldInfo> fields) {
+  final visibleFields = fields.where(
+    (field) => field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
+  );
+  return (visibleFields.length + 1) * 200 +
+      GridSize.horizontalHeaderPadding * 2;
+}
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
index 97acedf097..4668edc0e9 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
@@ -139,7 +139,7 @@ class _GridHeaderState extends State<_GridHeader> {
   }
 
   Widget _cellLeading() {
-    return SizedBox(width: GridSize.leadingHeaderPadding);
+    return SizedBox(width: GridSize.horizontalHeaderPadding);
   }
 }
 
@@ -158,7 +158,6 @@ class _CellTrailing extends StatelessWidget {
           bottom: BorderSide(color: Theme.of(context).dividerColor),
         ),
       ),
-      padding: GridSize.headerContentInsets,
       child: CreateFieldButton(
         viewId: viewId,
         onFieldCreated: (fieldId) => context
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
index 059ad3d5b4..35c4127dfd 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
@@ -13,17 +13,22 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../layout/sizes.dart';
+import '../../mobile_grid_page.dart';
 import 'mobile_field_button.dart';
 
+const double _kGridHeaderHeight = 50.0;
+
 class MobileGridHeader extends StatefulWidget {
   const MobileGridHeader({
     super.key,
     required this.viewId,
-    required this.anchorScrollController,
+    required this.contentScrollController,
+    required this.reorderableController,
   });
 
   final String viewId;
-  final ScrollController anchorScrollController;
+  final ScrollController contentScrollController;
+  final ScrollController reorderableController;
 
   @override
   State<MobileGridHeader> createState() => _MobileGridHeaderState();
@@ -41,29 +46,45 @@ class _MobileGridHeaderState extends State<MobileGridHeader> {
           fieldController: fieldController,
         )..add(const GridHeaderEvent.initial());
       },
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        controller: widget.anchorScrollController,
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            HSpace(GridSize.leadingHeaderPadding),
-            Stack(
-              children: [
-                Positioned(top: 0, left: 24, right: 24, child: _divider()),
-                Positioned(bottom: 0, left: 0, right: 0, child: _divider()),
-                SizedBox(
-                  height: 50,
-                  child: _GridHeader(
-                    viewId: widget.viewId,
-                    fieldController: fieldController,
-                  ),
+      child: Stack(
+        children: [
+          BlocBuilder<GridHeaderBloc, GridHeaderState>(
+            builder: (context, state) {
+              return SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                controller: widget.contentScrollController,
+                child: Stack(
+                  children: [
+                    Positioned(
+                      top: 0,
+                      left: GridSize.horizontalHeaderPadding + 24,
+                      right: GridSize.horizontalHeaderPadding + 24,
+                      child: _divider(),
+                    ),
+                    Positioned(
+                      bottom: 0,
+                      left: GridSize.horizontalHeaderPadding,
+                      right: GridSize.horizontalHeaderPadding,
+                      child: _divider(),
+                    ),
+                    SizedBox(
+                      height: _kGridHeaderHeight,
+                      width: getMobileGridContentWidth(state.fields),
+                    ),
+                  ],
                 ),
-              ],
+              );
+            },
+          ),
+          SizedBox(
+            height: _kGridHeaderHeight,
+            child: _GridHeader(
+              viewId: widget.viewId,
+              fieldController: fieldController,
+              scrollController: widget.reorderableController,
             ),
-            const HSpace(20),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
@@ -81,10 +102,12 @@ class _GridHeader extends StatefulWidget {
   const _GridHeader({
     required this.viewId,
     required this.fieldController,
+    required this.scrollController,
   });
 
   final String viewId;
   final FieldController fieldController;
+  final ScrollController scrollController;
 
   @override
   State<_GridHeader> createState() => _GridHeaderState();
@@ -114,13 +137,16 @@ class _GridHeaderState extends State<_GridHeader> {
             .toList();
 
         return ReorderableListView.builder(
-          scrollController: ScrollController(),
+          scrollController: widget.scrollController,
           shrinkWrap: true,
           scrollDirection: Axis.horizontal,
           proxyDecorator: (child, index, anim) => Material(
             color: Colors.transparent,
             child: child,
           ),
+          padding: EdgeInsets.symmetric(
+            horizontal: GridSize.horizontalHeaderPadding,
+          ),
           header: firstField != null
               ? MobileFieldButton.first(
                   viewId: widget.viewId,
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
index f5ce1f9c40..92d9360106 100755
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
@@ -68,7 +68,7 @@ class _MobileGridRowState extends State<MobileGridRow> {
         builder: (context, state) {
           return Row(
             children: [
-              SizedBox(width: GridSize.leadingHeaderPadding),
+              SizedBox(width: GridSize.horizontalHeaderPadding),
               Expanded(
                 child: RowContent(
                   fieldController: widget.databaseController.fieldController,
@@ -163,7 +163,6 @@ class RowContent extends StatelessWidget {
   Widget _finalCellDecoration(BuildContext context) {
     return Container(
       width: 200,
-      padding: GridSize.headerContentInsets,
       constraints: const BoxConstraints(minHeight: 46),
       decoration: BoxDecoration(
         border: Border(
diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
index 3869925b7e..d2c56dbfd8 100755
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
@@ -115,7 +115,7 @@ class _RowLeadingState extends State<_RowLeading> {
       child: Consumer<RegionStateNotifier>(
         builder: (context, state, _) {
           return SizedBox(
-            width: GridSize.leadingHeaderPadding,
+            width: GridSize.horizontalHeaderPadding,
             child: state.onEnter ? _activeWidget() : null,
           );
         },
@@ -283,7 +283,6 @@ class RowContent extends StatelessWidget {
       cursor: SystemMouseCursors.basic,
       child: Container(
         width: GridSize.trailHeaderPadding,
-        padding: GridSize.headerContentInsets,
         constraints: const BoxConstraints(minHeight: 46),
         decoration: BoxDecoration(
           border: Border(
diff --git a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
index 5ddc111bcf..5b66c3a149 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
@@ -57,7 +57,7 @@ class _DatabaseViewSettingContent extends StatelessWidget {
       builder: (context, state) {
         return Padding(
           padding: EdgeInsets.symmetric(
-            horizontal: GridSize.leadingHeaderPadding,
+            horizontal: GridSize.horizontalHeaderPadding,
           ),
           child: DecoratedBox(
             decoration: BoxDecoration(
diff --git a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
index 08f77525d8..711b132a4d 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
@@ -21,8 +22,11 @@ class TabBarHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return Container(
       height: 30,
+      padding: EdgeInsets.symmetric(
+        horizontal: GridSize.horizontalHeaderPadding,
+      ),
       child: Stack(
         children: [
           Positioned(
diff --git a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
index 4cf2846a83..2665c4da1d 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:flutter/material.dart';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
@@ -26,8 +27,11 @@ class _MobileTabBarHeaderState extends State<MobileTabBarHeader> {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(top: 14.0) +
-          const EdgeInsets.symmetric(horizontal: 20),
+      padding: EdgeInsets.only(
+        left: GridSize.horizontalHeaderPadding,
+        top: 14.0,
+        right: GridSize.horizontalHeaderPadding - 5.0,
+      ),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
diff --git a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
index 7ed03e4a29..57a747a631 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 
 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database/widgets/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
@@ -112,16 +111,9 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
                       return const SizedBox.shrink();
                     }
 
-                    if (PlatformExtension.isDesktop) {
-                      return Padding(
-                        padding: EdgeInsets.symmetric(
-                          horizontal: GridSize.leadingHeaderPadding,
-                        ),
-                        child: const TabBarHeader(),
-                      );
-                    }
-
-                    return const MobileTabBarHeader();
+                    return PlatformExtension.isDesktop
+                        ? const TabBarHeader()
+                        : const MobileTabBarHeader();
                   },
                 );
               },