diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart
index 4760378f4b..11823300fb 100644
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart
@@ -3,8 +3,10 @@ import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
 import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/home_stack.dart';
 import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
 
 class FlowyTab extends StatefulWidget {
@@ -26,22 +28,20 @@ class _FlowyTabState extends State<FlowyTab> {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTertiaryTapUp: _closeTab,
-      child: MouseRegion(
-        onEnter: (_) => _setHovering(true),
-        onExit: (_) => _setHovering(),
-        child: Container(
-          width: HomeSizes.tabBarWidth,
-          height: HomeSizes.tabBarHeight,
-          decoration: BoxDecoration(
-            color: _getBackgroundColor(),
-          ),
-          child: ChangeNotifierProvider.value(
-            value: widget.pageManager.notifier,
-            child: Consumer<PageNotifier>(
-              builder: (context, value, child) => Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 16.0),
+    return FlowyHover(
+      style: HoverStyle(
+        borderRadius: BorderRadius.zero,
+        backgroundColor: _getBackgroundColor(),
+      ),
+      builder: (context, onHover) {
+        return ChangeNotifierProvider.value(
+          value: widget.pageManager.notifier,
+          child: Consumer<PageNotifier>(
+            builder: (context, value, child) => Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: SizedBox(
+                width: HomeSizes.tabBarWidth,
+                height: HomeSizes.tabBarHeight,
                 child: Row(
                   children: [
                     Expanded(
@@ -49,15 +49,16 @@ class _FlowyTabState extends State<FlowyTab> {
                           .tabBarWidget(widget.pageManager.plugin.id),
                     ),
                     Visibility(
-                      visible: _isHovering,
-                      child: FlowyIconButton(
-                        onPressed: _closeTab,
-                        hoverColor: Theme.of(context).hoverColor,
-                        iconColorOnHover:
-                            Theme.of(context).colorScheme.onSurface,
-                        icon: const FlowySvg(
-                          FlowySvgs.close_s,
-                          size: Size.fromWidth(16),
+                      visible: onHover,
+                      child: SizedBox(
+                        width: 26,
+                        height: 26,
+                        child: FlowyIconButton(
+                          onPressed: _closeTab,
+                          icon: const FlowySvg(
+                            FlowySvgs.close_s,
+                            size: Size.square(22),
+                          ),
                         ),
                       ),
                     ),
@@ -66,8 +67,8 @@ class _FlowyTabState extends State<FlowyTab> {
               ),
             ),
           ),
-        ),
-      ),
+        );
+      },
     );
   }