diff --git a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart
index 8a8864a3..129978de 100644
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart
+++ b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart
@@ -47,6 +47,7 @@ class FileSelectionButtonThemeExtensionDefault
       padding: const EdgeInsets.symmetric(horizontal: 10),
       foregroundColors: MultiColor.single(theme.colorScheme.onPrimary),
       backgroundColors: MultiColor.single(theme.colorScheme.primary),
+      animationDuration: Duration.zero,
     );
 
     return FileSelectionButtonThemeExtensionDefault(
diff --git a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart
index 2c5e4214..bc9ee491 100644
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart
+++ b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart
@@ -46,6 +46,7 @@ class FlatButtonThemeExtensionDefault extends FlatButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return FlatButtonThemeExtensionDefault(
diff --git a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart
index 7ed8e863..5281dcc8 100644
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart
+++ b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart
@@ -46,6 +46,7 @@ class SimpleIconButtonThemeExtensionDefault
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SimpleIconButtonThemeExtensionDefault(
diff --git a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart
index c2215196..8bcc67b0 100644
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart
+++ b/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart
@@ -48,6 +48,7 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SymbolButtonThemeExtensionDefault(
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
index 2b563cb4..2fe3133e 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
@@ -31,6 +31,7 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
     this.borderColors,
     this.stroke,
     this.shadow,
+    this.animationDuration,
   });
 
   /// Button radius
@@ -68,9 +69,15 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
   /// Default to `null`
   final BoxShadow? shadow;
 
+  /// Animation duration
+  ///
+  /// Default to `Duration.zero`
+  final Duration? animationDuration;
+
   @override
   String toString() =>
       'ButtonStyle(radius: $radius, padding: $padding, foregroundColors: '
       '$foregroundColors, backgroundColors: $backgroundColors, borderColors: '
-      '$borderColors, stroke: $stroke, shadow: $shadow)';
+      '$borderColors, stroke: $stroke, shadow: $shadow, '
+      'animationDuration: $animationDuration)';
 }
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart
index 9ca37427..8892e8de 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart
@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -37,6 +38,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,6 +63,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,6 +99,11 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -124,6 +132,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       FileSelectionButtonStyle(
         titleStyle: titleStyle ?? this.titleStyle,
@@ -135,5 +144,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
index a4dcf2da..a1cab66f 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -36,6 +37,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -59,6 +61,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -93,6 +96,11 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -115,6 +123,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       FlatButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -125,5 +134,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart
index 4b50e93d..65297664 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart
@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -36,6 +37,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -59,6 +61,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -93,6 +96,11 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -115,6 +123,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       SimpleIconButtonStyle(
         dimension: dimension ?? this.dimension,
@@ -125,5 +134,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }
diff --git a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart
index c5739885..70d859cf 100644
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart
+++ b/packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart
@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -37,6 +38,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,6 +63,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,6 +99,11 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -124,6 +132,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       SymbolButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -135,5 +144,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }
diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
index cc2e1779..3a08a2ca 100644
--- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
+++ b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
@@ -49,10 +49,10 @@ class Buttons extends DemoPage {
               SymbolButtons(),
               Gap(20),
               SimpleIconButtons(),
+              Gap(20),
+              FileSelectionButtons()
             ],
           ),
-          const Gap(20),
-          const Align(child: FileSelectionButtons()),
         ],
       );
 }
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart
new file mode 100644
index 00000000..4d89b35c
--- /dev/null
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart
@@ -0,0 +1,68 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+
+/// {@template animated_decorated_box}
+/// A wrapper for [DecoratedBox] that animates the decoration when it changes.
+/// {@endtemplate}
+class AnimatedDecoratedBox extends ImplicitlyAnimatedWidget {
+  /// {@macro animated_decorated_box}
+  const AnimatedDecoratedBox({
+    required super.duration,
+    this.decoration,
+    this.child,
+    super.key,
+  });
+
+  /// The decoration to paint behind the [child].
+  ///
+  /// A shorthand for specifying just a solid color is available in the
+  /// constructor: set the `color` argument instead of the `decoration`
+  /// argument.
+  final Decoration? decoration;
+
+  /// The [child] contained by the box.
+  final Widget? child;
+
+  @override
+  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() =>
+      _AnimatedDecoratedBoxState();
+}
+
+class _AnimatedDecoratedBoxState
+    extends AnimatedWidgetBaseState<AnimatedDecoratedBox> {
+  DecorationTween? _decoration;
+  @override
+  Widget build(BuildContext context) {
+    final Animation<double> animation = this.animation;
+    return DecoratedBox(
+      decoration: _decoration?.evaluate(animation) ??
+          widget.decoration ??
+          const BoxDecoration(),
+      child: widget.child,
+    );
+  }
+
+  @override
+  void forEachTween(TweenVisitor<dynamic> visitor) {
+    _decoration = visitor(
+      _decoration,
+      widget.decoration,
+      (dynamic value) => DecorationTween(begin: value as Decoration),
+    ) as DecorationTween?;
+  }
+}
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
index 7316ab63..39613f62 100644
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
@@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_theme_resolver.dart';
@@ -130,119 +131,109 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             onPressed?.call(state.state);
             bloc(context).onClickUpOut();
           },
-          child: AnimatedContainer(
-            // TODO(wyatt): make it configurable, and generalize it
-            duration: const Duration(milliseconds: 150),
-            curve: Curves.easeOut,
+          child: AnimatedDecoratedBox(
+            duration: style.animationDuration ?? Duration.zero,
             decoration: BoxDecoration(
-              color: style.backgroundColors?.color,
-
-              // if no gradient colors => no default value
               gradient: (style.backgroundColors?.isGradient ?? false)
                   ? LinearGradient(
                       colors: style.backgroundColors!.colors,
                     )
                   : null,
+              color: style.backgroundColors?.color,
+              // If no border color => no default value
+              border: (style.borderColors != null && style.stroke != null)
+                  ? (style.borderColors?.isGradient ?? false)
+                      ? GradientBoxBorder(
+                          gradient: LinearGradient(
+                            colors: style.borderColors!.colors,
+                          ),
+                          width: style.stroke!,
+                        )
+                      : Border.all(
+                          color: style.borderColors!.color,
+                          width: style.stroke!,
+                        )
+                  : null,
 
+              boxShadow: [
+                if (style.shadow != null) ...[style.shadow!]
+              ],
               borderRadius: style.radius,
             ),
-            child: DecoratedBox(
-              decoration: BoxDecoration(
-                // If no border color => no default value
-                border: (style.borderColors != null && style.stroke != null)
-                    ? (style.borderColors?.isGradient ?? false)
-                        ? GradientBoxBorder(
-                            gradient: LinearGradient(
-                              colors: style.borderColors!.colors,
-                            ),
-                            width: style.stroke!,
-                          )
-                        : Border.all(
-                            color: style.borderColors!.color,
-                            width: style.stroke!,
-                          )
-                    : null,
-
-                boxShadow: [
-                  if (style.shadow != null) ...[style.shadow!]
-                ],
-                borderRadius: style.radius,
-              ),
-              child: ConstrainedBox(
-                constraints: const BoxConstraints(
-                  minWidth: 88,
-                  minHeight: 36,
-                ), // min sizes for Material buttons
-                child: Padding(
-                  padding: style.padding ?? EdgeInsets.zero,
-                  child: Row(
-                    mainAxisSize: mainAxisSize ?? MainAxisSize.min,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      if (prefix != null &&
-                          (prefix is Icon?) &&
-                          ((prefix as Icon?)?.color != null)) ...[
-                        prefix!
-                      ] else if (style.foregroundColors?.color != null &&
-                          prefix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.color,
-                            BlendMode.srcIn,
-                          ),
-                          child: prefix,
-                        )
-                      ] else ...[
-                        prefix ?? const SizedBox.shrink()
-                      ],
-                      Gap(style.padding?.vertical ?? 10),
-
-                      /// Choose color
-                      ///  buttonStyle.label.style.color ??
-                      ///    context.textTheme.labelLarge.color
-                      ///
-                      /// Choose gradient
-                      /// label.gradient ??
-                      ///  buttonStyle.foregroundColor.colors ??
-                      ///    null
-                      ///
-                      /// More infos in ThemeResolver class
-                      if (label != null) ...[
-                        GradientText.fromWrapper(
-                          label!,
-                          style: style.labelStyle,
-                          gradientColors: style.foregroundColors,
-                        )
-                      ],
-                      Gap(style.padding?.vertical ?? 10),
-                      if (suffix != null &&
-                          (suffix is Icon?) &&
-                          ((suffix as Icon?)?.color != null)) ...[
-                        suffix!
-                      ] else if (style.foregroundColors?.colors != null &&
-                          style.foregroundColors!.colors.isNotEmpty &&
-                          suffix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.colors.last,
-                            BlendMode.srcIn,
-                          ),
-                          child: suffix,
-                        )
-                      ] else if (style.foregroundColors?.color != null &&
-                          suffix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.color,
-                            BlendMode.srcIn,
-                          ),
-                          child: suffix,
-                        )
-                      ] else ...[
-                        suffix ?? const SizedBox.shrink()
-                      ],
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(
+                minWidth: 88,
+                minHeight: 36,
+              ), // min sizes for Material buttons
+              child: Padding(
+                padding: style.padding ?? EdgeInsets.zero,
+                child: Row(
+                  mainAxisSize: mainAxisSize ?? MainAxisSize.min,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    if (prefix != null &&
+                        (prefix is Icon?) &&
+                        ((prefix as Icon?)?.color != null)) ...[
+                      prefix!
+                    ] else if (style.foregroundColors?.color != null &&
+                        prefix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.color,
+                          BlendMode.srcIn,
+                        ),
+                        child: prefix,
+                      )
+                    ] else ...[
+                      prefix ?? const SizedBox.shrink()
                     ],
-                  ),
+                    Gap(style.padding?.vertical ?? 10),
+
+                    /// Choose color
+                    ///  buttonStyle.label.style.color ??
+                    ///    context.textTheme.labelLarge.color
+                    ///
+                    /// Choose gradient
+                    /// label.gradient ??
+                    ///  buttonStyle.foregroundColor.colors ??
+                    ///    null
+                    ///
+                    /// More infos in ThemeResolver class
+                    if (label != null) ...[
+                      GradientText.fromWrapper(
+                        label!,
+                        style: style.labelStyle,
+                        gradientColors: style.foregroundColors,
+                      )
+                    ],
+                    Gap(style.padding?.vertical ?? 10),
+                    if (suffix != null &&
+                        (suffix is Icon?) &&
+                        ((suffix as Icon?)?.color != null)) ...[
+                      suffix!
+                    ] else if (style.foregroundColors?.colors != null &&
+                        style.foregroundColors!.colors.isNotEmpty &&
+                        suffix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.colors.last,
+                          BlendMode.srcIn,
+                        ),
+                        child: suffix,
+                      )
+                    ] else if (style.foregroundColors?.color != null &&
+                        suffix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.color,
+                          BlendMode.srcIn,
+                        ),
+                        child: suffix,
+                      )
+                    ] else ...[
+                      suffix ?? const SizedBox.shrink()
+                    ],
+                  ],
                 ),
               ),
             ),
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart
index 164ada13..ecf5378b 100644
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart
@@ -18,6 +18,7 @@ import 'package:flutter/material.dart' hide ButtonStyle;
 import 'package:flutter/services.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
@@ -126,7 +127,8 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             dimension: style.dimension,
             child: AspectRatio(
               aspectRatio: 1,
-              child: DecoratedBox(
+              child: AnimatedDecoratedBox(
+                duration: style.animationDuration ?? Duration.zero,
                 decoration: BoxDecoration(
                   color: style.backgroundColors?.color,
                   // If no border color => no default value
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
index dbdbc4c7..d98afec7 100644
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
@@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/selectable_button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
@@ -154,7 +155,8 @@ class SymbolButtonScreen
                 dimension: style.dimension,
                 child: AspectRatio(
                   aspectRatio: 1,
-                  child: DecoratedBox(
+                  child: AnimatedDecoratedBox(
+                    duration: style.animationDuration ?? Duration.zero,
                     decoration: BoxDecoration(
                       color: style.backgroundColors?.color,
                       // If no border color => no default value
diff --git a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart
index c3562074..7976fe14 100644
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart
+++ b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart
@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class FileSelectionButtonThemeExtensionImpl
     extends FileSelectionButtonThemeExtension {
@@ -36,50 +37,39 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFFDDE0E3),
-        Color(0xFFCACCD4),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.black),
+      backgroundColors: const MultiColor.single(WyattColors.light),
+      borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        foregroundColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.lightGradient,
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+            MultiColor.single(WyattColors.black.withOpacity(0.04)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        backgroundColors: MultiColor.single(WyattColors.black.withOpacity(0.1)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
+        borderColors: WyattColors.redGradient,
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.black),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }
@@ -91,50 +81,40 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF24262A),
-        Color(0xFF24262A),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(WyattColors.black),
+      borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         foregroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        backgroundColors: const MultiColor.single(WyattColors.black),
+        borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+        backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.1)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
+        borderColors: WyattColors.redGradient,
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }
diff --git a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart
index 6afd209b..e1e6e9e9 100644
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart
+++ b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart
@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
   const FlatButtonThemeExtensionImpl({
@@ -32,54 +33,42 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
+      foregroundColors: WyattColors.blueBtnGradient,
+      backgroundColors: const MultiColor.single(WyattColors.light),
+      borderColors: WyattColors.blueBtnGradient,
       stroke: 3,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FlatButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF3C97FB).withOpacity(0.4),
+          color: WyattColors.blue1.withOpacity(0.4),
         ),
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        foregroundColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
+          color: WyattColors.light,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.blueBtnHoverGradient,
+        borderColors: WyattColors.blueBtnHoverGradient,
+      ),
+      focusedStyle: style.copyWith(
+        stroke: 5,
+        borderColors: WyattColors.blueBtnFocusGradient,
       ),
-      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
+          color: WyattColors.light,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.darkBlueGradient,
+        borderColors: WyattColors.darkBlueGradient,
       ),
     );
   }
@@ -90,43 +79,37 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(WyattColors.black),
+      borderColors: WyattColors.blueBtnGradient,
       stroke: 3,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FlatButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF60656A),
+          color: WyattColors.gray1,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        backgroundColors:
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        borderColors: WyattColors.grayGradient,
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.blueBtnHoverGradient,
+        borderColors: WyattColors.blueBtnHoverGradient,
+      ),
+      focusedStyle: style.copyWith(
+        stroke: 5,
+        borderColors: WyattColors.blueBtnFocusGradient,
       ),
-      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.darkBlueGradient,
+        borderColors: WyattColors.darkBlueGradient,
       ),
     );
   }
diff --git a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart
index 9411f0c7..ab2727c8 100644
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart
+++ b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart
@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class SimpleIconButtonThemeExtensionImpl
     extends SimpleIconButtonThemeExtension {
@@ -31,47 +32,24 @@ class SimpleIconButtonThemeExtensionImpl
     theme ??= ThemeData.light();
     final style = SimpleIconButtonStyle(
       dimension: 30,
-      radius: BorderRadius.circular(15),
-      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      radius: BorderRadius.circular(5),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
+      animationDuration: const Duration(milliseconds: 150),
     );
+
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray2.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
       ),
     );
   }
@@ -79,42 +57,24 @@ class SimpleIconButtonThemeExtensionImpl
   factory SimpleIconButtonThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
     final style = SimpleIconButtonStyle(
-      radius: BorderRadius.circular(15),
-      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      dimension: 30,
+      radius: const BorderRadius.all(Radius.circular(5)),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
       ),
     );
   }
diff --git a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart
index feba670e..b6ac5ab7 100644
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart
+++ b/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart
@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
   const SymbolButtonThemeExtensionImpl({
@@ -31,63 +32,38 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.light();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      radius: BorderRadius.circular(15),
+      dimension: 60,
+      radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      borderColors: const MultiColor.single(WyattColors.gray2),
+      stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF3C97FB).withOpacity(0.4),
+          color: WyattColors.gray1,
         ),
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
-        ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
-        ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(WyattColors.gray2),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }
@@ -96,52 +72,41 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.dark();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      radius: BorderRadius.circular(15),
+      dimension: 60,
+      radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      borderColors: const MultiColor.single(WyattColors.gray1),
+      stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF60656A),
+          color: WyattColors.gray1,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        stroke: 1,
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          fontSize: 14,
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }