diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart
index d91f207797..4a9fedcd94 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart
@@ -199,22 +199,30 @@ class FieldActionCell extends StatelessWidget {
         (action == FieldAction.duplicate || action == FieldAction.delete)) {
       enable = false;
     }
-
-    return FlowyButton(
+    return FlowyIconTextButton(
       resetHoverOnRebuild: false,
       disable: !enable,
-      text: FlowyText(
-        action.title(fieldInfo),
-        lineHeight: 1.0,
-        color: enable ? null : Theme.of(context).disabledColor,
-      ),
       onHover: (_) => popoverMutex?.close(),
       onTap: () => action.run(context, viewId, fieldInfo),
-      leftIcon: action.leading(
-        fieldInfo,
-        enable ? null : Theme.of(context).disabledColor,
+      // show the error color when delete is hovered
+      textBuilder: (onHover) => FlowyText(
+        action.title(fieldInfo),
+        lineHeight: 1.0,
+        color: enable
+            ? action == FieldAction.delete && onHover
+                ? Theme.of(context).colorScheme.error
+                : null
+            : Theme.of(context).disabledColor,
       ),
-      rightIcon: action.trailing(context, fieldInfo),
+      leftIconBuilder: (onHover) => action.leading(
+        fieldInfo,
+        enable
+            ? action == FieldAction.delete && onHover
+                ? Theme.of(context).colorScheme.error
+                : null
+            : Theme.of(context).disabledColor,
+      ),
+      rightIconBuilder: (_) => action.trailing(context, fieldInfo),
     );
   }
 }
diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
index e1b9308e32..0e5b656a35 100644
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
@@ -13,8 +13,8 @@ class FlowyIconTextButton extends StatelessWidget {
   final VoidCallback? onSecondaryTap;
   final void Function(bool)? onHover;
   final EdgeInsets? margin;
-  final Widget Function(bool onHover)? leftIconBuilder;
-  final Widget Function(bool onHover)? rightIconBuilder;
+  final Widget? Function(bool onHover)? leftIconBuilder;
+  final Widget? Function(bool onHover)? rightIconBuilder;
   final Color? hoverColor;
   final bool isSelected;
   final BorderRadius? radius;
@@ -29,6 +29,7 @@ class FlowyIconTextButton extends StatelessWidget {
   final double iconPadding;
   final bool expand;
   final Color? borderColor;
+  final bool resetHoverOnRebuild;
 
   const FlowyIconTextButton({
     super.key,
@@ -53,6 +54,7 @@ class FlowyIconTextButton extends StatelessWidget {
     this.iconPadding = 6,
     this.expand = false,
     this.borderColor,
+    this.resetHoverOnRebuild = true,
   });
 
   @override
@@ -64,6 +66,7 @@ class FlowyIconTextButton extends StatelessWidget {
       onTap: disable ? null : onTap,
       onSecondaryTap: disable ? null : onSecondaryTap,
       child: FlowyHover(
+        resetHoverOnRebuild: resetHoverOnRebuild,
         cursor:
             disable ? SystemMouseCursors.forbidden : SystemMouseCursors.click,
         style: HoverStyle(
@@ -81,11 +84,12 @@ class FlowyIconTextButton extends StatelessWidget {
   Widget _render(BuildContext context, bool onHover) {
     final List<Widget> children = [];
 
-    if (leftIconBuilder != null) {
+    final Widget? leftIcon = leftIconBuilder?.call(onHover);
+    if (leftIcon != null) {
       children.add(
         SizedBox.fromSize(
           size: leftIconSize,
-          child: leftIconBuilder!(onHover),
+          child: leftIcon,
         ),
       );
       children.add(HSpace(iconPadding));
@@ -97,10 +101,11 @@ class FlowyIconTextButton extends StatelessWidget {
       children.add(textBuilder(onHover));
     }
 
-    if (rightIconBuilder != null) {
+    final Widget? rightIcon = rightIconBuilder?.call(onHover);
+    if (rightIcon != null) {
       children.add(HSpace(iconPadding));
       // No need to define the size of rightIcon. Just use its intrinsic width
-      children.add(rightIconBuilder!(onHover));
+      children.add(rightIcon);
     }
 
     Widget child = Row(