update

lib/utils/item_utils.dart

@@ -32,4 +32,19 @@ class ItemUtils {
         return 'assets/images/icons/potions/potion_blue.png';
     }
   }
+
+  static String getBorderPath(ItemRarity rarity) {
+    switch (rarity) {
+      case ItemRarity.normal:
+        return 'assets/images/icons/borders/border_000.png';
+      case ItemRarity.magic:
+        return 'assets/images/icons/borders/border_001.png';
+      case ItemRarity.rare:
+        return 'assets/images/icons/borders/border_004.png';
+      case ItemRarity.legendary:
+        return 'assets/images/icons/borders/border_005.png';
+      case ItemRarity.unique:
+        return 'assets/images/icons/borders/border_014.png';
+    }
+  }
 }

lib/widgets/battle/battle_controls.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../common/custom_icon_button.dart';
+import '../common/custom_button_widget.dart';
 
 class BattleControls extends StatelessWidget {
   final bool isAttackEnabled;
@@ -23,25 +23,52 @@ class BattleControls extends StatelessWidget {
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: [
-        CustomIconButton(
-          iconPath: 'assets/images/icons/weapons/sword_02.png',
-          isEnabled: isAttackEnabled,
-          onTap: onAttackPressed,
-          iconColor: Colors.white,
+        CustomButtonWidget(
+          width: 64,
+          height: 64,
+          padding: const EdgeInsets.all(12),
+          onTap: isAttackEnabled ? onAttackPressed : null,
+          child: Opacity(
+            opacity: isAttackEnabled ? 1.0 : 0.5,
+            child: Image.asset(
+              'assets/images/icons/weapons/sword_02.png',
+              color: Colors.white,
+              fit: BoxFit.contain,
+            ),
+          ),
         ),
         const SizedBox(height: 16),
-        CustomIconButton(
-          iconPath: 'assets/images/icons/subweapons/shield_01.png',
-          isEnabled: isDefendEnabled,
-          onTap: onDefendPressed,
-          iconColor: Colors.white,
+        CustomButtonWidget(
+          width: 64,
+          height: 64,
+          padding: const EdgeInsets.all(12),
+          onTap: isDefendEnabled ? onDefendPressed : null,
+          child: Opacity(
+            opacity: isDefendEnabled ? 1.0 : 0.5,
+            child: Image.asset(
+              'assets/images/icons/subweapons/shield_02.png',
+              color: Colors.white,
+              fit: BoxFit.contain,
+            ),
+          ),
         ),
         const SizedBox(height: 16),
-        CustomIconButton(
-          iconPath: 'assets/images/icons/potions/potion_blue.png',
-          isEnabled: isAttackEnabled, // Enabled when it's player turn
-          onTap: onItemPressed,
-          iconColor: Colors.white,
+        CustomButtonWidget(
+          width: 64,
+          height: 64,
+          padding: const EdgeInsets.all(12),
+          onTap:
+              onItemPressed, // Item usually always enabled or managed by parent? Sticking to logic
+          child: Opacity(
+            opacity: isAttackEnabled
+                ? 1.0
+                : 0.5, // Using AttackEnabled as proxy for "Player Turn"? Text implies "Enabled when it's player turn"
+            child: Image.asset(
+              'assets/images/icons/potions/potion_blue.png',
+              color: Colors.white,
+              fit: BoxFit.contain,
+            ),
+          ),
         ),
       ],
     );

lib/widgets/common/custom_button_widget.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+class CustomButtonWidget extends StatelessWidget {
+  final Widget child;
+  final VoidCallback? onTap;
+  final String imagePath;
+  final double? width;
+  final double? height;
+  final EdgeInsetsGeometry padding;
+  final Color? backgroundColor;
+
+  const CustomButtonWidget({
+    super.key,
+    required this.child,
+    this.onTap,
+    this.imagePath = 'assets/images/icons/borders/border_000.png',
+    this.width,
+    this.height,
+    this.padding = EdgeInsets.zero,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      behavior: HitTestBehavior.opaque,
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: Stack(
+          children: [
+            // Background Color
+            if (backgroundColor != null)
+              Positioned.fill(child: Container(color: backgroundColor)),
+            // Background Image (Border)
+            Positioned.fill(
+              child: Image.asset(
+                imagePath,
+                fit: BoxFit.fill,
+                filterQuality: FilterQuality.high,
+              ),
+            ),
+            // Content
+            Padding(
+              padding: padding,
+              child: Center(child: child),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}