diff --git a/lib/presentation/shared/images/circle_character.dart b/lib/presentation/shared/images/circle_character.dart
index 63c4ab603..312068827 100644
--- a/lib/presentation/shared/images/circle_character.dart
+++ b/lib/presentation/shared/images/circle_character.dart
@@ -10,6 +10,7 @@ class CircleCharacter extends StatelessWidget {
   final double radius;
   final bool forDrag;
   final Function(String)? onTap;
+  final Gradient? gradient;
 
   const CircleCharacter({
     Key? key,
@@ -18,6 +19,7 @@ class CircleCharacter extends StatelessWidget {
     this.radius = 35,
     this.forDrag = false,
     this.onTap,
+    this.gradient,
   }) : super(key: key);
 
   CircleCharacter.fromItem({
@@ -26,6 +28,7 @@ class CircleCharacter extends StatelessWidget {
     this.radius = 35,
     this.forDrag = false,
     this.onTap,
+    this.gradient,
   })  : itemKey = item.key,
         image = item.image,
         super(key: key);
@@ -37,6 +40,7 @@ class CircleCharacter extends StatelessWidget {
       forDrag: forDrag,
       onTap: (img) => onTap != null ? onTap!(img) : _gotoCharacterPage(context),
       radius: radius,
+      gradient: gradient,
     );
   }
 
diff --git a/lib/presentation/shared/images/circle_item.dart b/lib/presentation/shared/images/circle_item.dart
index a5641f55a..62aca150a 100644
--- a/lib/presentation/shared/images/circle_item.dart
+++ b/lib/presentation/shared/images/circle_item.dart
@@ -9,6 +9,8 @@ class CircleItem extends StatelessWidget {
   final Function(String)? onTap;
   final BoxFit fit;
   final Alignment alignment;
+  final Color backgroundColor;
+  final Gradient? gradient;
 
   const CircleItem({
     Key? key,
@@ -19,6 +21,8 @@ class CircleItem extends StatelessWidget {
     this.onTap,
     this.fit = BoxFit.cover,
     this.alignment = Alignment.topCenter,
+    this.backgroundColor = Colors.transparent,
+    this.gradient,
   }) : super(key: key);
 
   @override
@@ -27,7 +31,7 @@ class CircleItem extends StatelessWidget {
     final size = imageSizeTimesTwo ? radius * 2 : radius;
     final avatar = CircleAvatar(
       radius: radius,
-      backgroundColor: Colors.transparent,
+      backgroundColor: backgroundColor,
       child: ClipOval(
         child: FadeInImage(
           placeholder: MemoryImage(kTransparentImage),
@@ -40,12 +44,21 @@ class CircleItem extends StatelessWidget {
       ),
     );
 
+    final boxDecoration = BoxDecoration(shape: BoxShape.circle, gradient: gradient);
+
     if (forDrag) {
+      if (gradient != null) {
+        return Container(
+          decoration: boxDecoration,
+          child: avatar,
+        );
+      }
       return avatar;
     }
 
     return Container(
       margin: const EdgeInsets.all(3),
+      decoration: boxDecoration,
       child: InkWell(
         radius: radius,
         borderRadius: BorderRadius.circular(radius),
diff --git a/lib/presentation/shared/images/circle_weapon.dart b/lib/presentation/shared/images/circle_weapon.dart
index 4d2e37847..25c3d82a7 100644
--- a/lib/presentation/shared/images/circle_weapon.dart
+++ b/lib/presentation/shared/images/circle_weapon.dart
@@ -10,6 +10,7 @@ class CircleWeapon extends StatelessWidget {
   final double radius;
   final bool forDrag;
   final Function(String)? onTap;
+  final Gradient? gradient;
 
   const CircleWeapon({
     Key? key,
@@ -18,6 +19,7 @@ class CircleWeapon extends StatelessWidget {
     this.radius = 30,
     this.forDrag = false,
     this.onTap,
+    this.gradient,
   }) : super(key: key);
 
   CircleWeapon.fromItem({
@@ -26,6 +28,7 @@ class CircleWeapon extends StatelessWidget {
     this.radius = 30,
     this.forDrag = false,
     this.onTap,
+    this.gradient,
   })  : itemKey = item.key,
         image = item.image,
         super(key: key);
@@ -37,6 +40,7 @@ class CircleWeapon extends StatelessWidget {
       radius: radius,
       forDrag: forDrag,
       onTap: (img) => onTap != null ? onTap!(img) : _gotoWeaponPage(context),
+      gradient: gradient,
     );
   }