diff --git a/lib/pages/spaces_management/widgets/hoverable_button.dart b/lib/pages/spaces_management/widgets/hoverable_button.dart
index bc39f87e..0c158c12 100644
--- a/lib/pages/spaces_management/widgets/hoverable_button.dart
+++ b/lib/pages/spaces_management/widgets/hoverable_button.dart
@@ -15,63 +15,74 @@ class HoverableButton extends StatefulWidget {
   }) : super(key: key);
 
   @override
-  _HoverableButtonState createState() => _HoverableButtonState();
+  State<HoverableButton> createState() => _HoverableButtonState();
 }
 
 class _HoverableButtonState extends State<HoverableButton> {
-  bool isHovered = false; // Track hover state
+  bool isHovered = false;
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
     return GestureDetector(
       onTap: widget.onTap,
       child: MouseRegion(
-        onEnter: (_) => setState(() => isHovered = true),
-        onExit: (_) => setState(() => isHovered = false),
+        onEnter: (_) => _updateHoverState(true),
+        onExit: (_) => _updateHoverState(false),
         child: AnimatedContainer(
           duration: const Duration(milliseconds: 200),
           padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 8),
           decoration: BoxDecoration(
-            color: isHovered ? ColorsManager.warningRed : Colors.white, // Change color on hover
+            color: isHovered ? ColorsManager.warningRed : Colors.white,
             borderRadius: BorderRadius.circular(16),
             boxShadow: [
               if (isHovered)
                 BoxShadow(
-                  color: ColorsManager.warningRed,
+                  color: ColorsManager.warningRed.withOpacity(0.4),
+                  blurRadius: 8,
+                  offset: const Offset(0, 4),
                 ),
             ],
           ),
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              if (!isHovered)
-                SvgPicture.asset(
-                  widget.iconPath,
-                  width: 24,
-                  height: 24,
-                )
-              else
-                Center(
-                    child: const Icon(
-                  Icons.close, // Display "X" on hover
-                  color: Colors.white,
-                  size: 24,
-                )),
-              const SizedBox(width: 8),
-              if (!isHovered) ...[
-                Text(
-                  widget.text,
-                  style: TextStyle(
-                    fontSize: 17,
-                    fontWeight: FontWeight.w500,
-                    color: ColorsManager.spaceColor,
-                  ),
-                ),
-              ],
+              _buildIcon(),
+              if (!isHovered) const SizedBox(width: 8),
+              if (!isHovered) _buildText(theme),
             ],
           ),
         ),
       ),
     );
   }
+
+  Widget _buildIcon() {
+    return isHovered
+        ? const Icon(
+            Icons.close,
+            color: Colors.white,
+            size: 24,
+          )
+        : SvgPicture.asset(
+            widget.iconPath,
+            width: 24,
+            height: 24,
+          );
+  }
+
+  Widget _buildText(ThemeData theme) {
+    return Text(
+      widget.text,
+      style: theme.textTheme.bodyLarge?.copyWith(
+        color: ColorsManager.spaceColor,
+        fontWeight: FontWeight.w500,
+      ),
+    );
+  }
+
+  void _updateHoverState(bool hover) {
+    setState(() => isHovered = hover);
+  }
 }