diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart
index 2cc59d73d3..76deaa6f0a 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/board/widgets/mobile_board_trailing.dart
@@ -1,14 +1,13 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/board/application/board_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 /// Add new group
 class MobileBoardTrailing extends StatefulWidget {
-  const MobileBoardTrailing({
-    super.key,
-  });
+  const MobileBoardTrailing({super.key});
 
   @override
   State<MobileBoardTrailing> createState() => _MobileBoardTrailingState();
@@ -49,13 +48,24 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                       TextField(
                         controller: _textController,
                         autofocus: true,
+                        onChanged: (_) => setState(() {}),
                         decoration: InputDecoration(
-                          suffixIcon: IconButton(
-                            icon: Icon(
-                              Icons.close,
-                              color: style.colorScheme.onBackground,
+                          suffixIcon: AnimatedOpacity(
+                            duration: const Duration(milliseconds: 200),
+                            opacity: _textController.text.isNotEmpty ? 1 : 0,
+                            child: Material(
+                              color: Colors.transparent,
+                              shape: const CircleBorder(),
+                              clipBehavior: Clip.antiAlias,
+                              child: IconButton(
+                                icon: Icon(
+                                  Icons.close,
+                                  color: style.colorScheme.onBackground,
+                                ),
+                                onPressed: () =>
+                                    setState(() => _textController.clear()),
+                              ),
                             ),
-                            onPressed: () => _textController.clear(),
                           ),
                           isDense: true,
                         ),
@@ -66,9 +76,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                                 ),
                               );
                           _textController.clear();
-                          setState(() {
-                            isEditing = false;
-                          });
+                          setState(() => isEditing = false);
                         },
                       ),
                       Row(
@@ -81,11 +89,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                                 color: style.colorScheme.onBackground,
                               ),
                             ),
-                            onPressed: () {
-                              setState(() {
-                                isEditing = false;
-                              });
-                            },
+                            onPressed: () => setState(() => isEditing = false),
                           ),
                           TextButton(
                             child: Text(
@@ -102,9 +106,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                                     ),
                                   );
                               _textController.clear();
-                              setState(() {
-                                isEditing = false;
-                              });
+                              setState(() => isEditing = false);
                             },
                           ),
                         ],
@@ -120,6 +122,9 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(8),
                   ),
+                ).copyWith(
+                  overlayColor:
+                      MaterialStateProperty.all(Theme.of(context).hoverColor),
                 ),
                 icon: const Icon(Icons.add),
                 label: Text(
@@ -128,9 +133,7 @@ class _MobileBoardTrailingState extends State<MobileBoardTrailing> {
                     fontWeight: FontWeight.w600,
                   ),
                 ),
-                onPressed: () => setState(
-                  () => isEditing = true,
-                ),
+                onPressed: () => setState(() => isEditing = true),
               ),
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart
index 4f0022bde4..17b61849da 100644
--- a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_quick_action_button.dart
@@ -1,6 +1,7 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flutter/material.dart';
 
 class MobileQuickActionButton extends StatelessWidget {
   const MobileQuickActionButton({
@@ -25,11 +26,7 @@ class MobileQuickActionButton extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 4),
       child: InkWell(
-        onTap: () {
-          if (enable) {
-            onTap();
-          }
-        },
+        onTap: enable ? onTap : null,
         borderRadius: BorderRadius.circular(12),
         overlayColor:
             enable ? null : const MaterialStatePropertyAll(Colors.transparent),
diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
index 2d3eb6038a..8ab3124939 100644
--- a/frontend/resources/translations/en.json
+++ b/frontend/resources/translations/en.json
@@ -1093,7 +1093,7 @@
       "addToColumnBottomTooltip": "Add a new card at the bottom",
       "renameColumn": "Rename",
       "hideColumn": "Hide",
-      "newGroup": "New Group",
+      "newGroup": "New group",
       "deleteColumn": "Delete",
       "deleteColumnConfirmation": "This will delete this group and all the cards in it.\nAre you sure you want to continue?"
     },