diff --git a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
index 2c679ec8..2bcd564c 100644
--- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
+++ b/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
@@ -22,6 +22,10 @@ import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 const _color1 = Color(0xFF3C97FB);
 const _color2 = Color(0xFF446DF4);
 const _colors = [_color1, _color2];
+const _disabled = Color(0xFF6B7280);
+const _background = Color(0xFF16191D);
+const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF);
+const _disabledColors = [Color(0xFF60656A), Color(0xFF383C40)];
 
 class Buttons extends StatelessWidget {
   const Buttons({super.key});
@@ -37,7 +41,7 @@ class Buttons extends StatelessWidget {
           const OutlinedButton(
             label: TextWrapper('Voir notre savoir faire', gradient: _colors),
             style: OutlinedButtonStyle(
-              borderColors: _colors,
+              borderColors: MultiColor(_colors),
               stroke: 3,
             ),
             prefix: Icon(
@@ -57,7 +61,7 @@ class Buttons extends StatelessWidget {
                   context.textTheme.titleLarge?.copyWith(color: Colors.white),
             ),
             style: const FlatButtonStyle(
-              borderColors: _colors,
+              backgroundColors: MultiColor(_colors),
             ),
             prefix: const Icon(
               Icons.arrow_forward_rounded,
@@ -68,6 +72,86 @@ class Buttons extends StatelessWidget {
               color: Colors.white,
             ),
           ),
+          const Gap(20),
+          ColoredBox(
+            color: _background,
+            child: Center(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Column(
+                    children: [
+                      const Gap(20),
+                      OutlinedButton(
+                        label: TextWrapper(
+                          'Démarrer mon projet',
+                          style: context.textTheme.titleLarge
+                              ?.copyWith(color: _disabled),
+                        ),
+                        style: const OutlinedButtonStyle(
+                          borderColors: MultiColor(_disabledColors),
+                          backgroundColors:
+                              MultiColor.single(_disabledBackground),
+                          stroke: 1,
+                        ),
+                      ),
+                      const Gap(20),
+                      FlatButton(
+                        label: TextWrapper(
+                          'Démarrer mon projet',
+                          style: context.textTheme.titleLarge
+                              ?.copyWith(color: Colors.white),
+                        ),
+                        style: const FlatButtonStyle(
+                          backgroundColors: MultiColor(_colors),
+                        ),
+                      ),
+                      const Gap(20),
+                    ],
+                  ),
+                  const Gap(20),
+                  Column(
+                    children: [
+                      const Gap(20),
+                      OutlinedButton(
+                        label: TextWrapper(
+                          'Aller voir nos réalisations',
+                          style: context.textTheme.titleLarge
+                              ?.copyWith(color: Colors.white),
+                        ),
+                        style: const OutlinedButtonStyle(
+                          borderColors: MultiColor(_colors),
+                          backgroundColors:
+                              MultiColor.single(_disabledBackground),
+                          stroke: 3,
+                        ),
+                        suffix: const Icon(
+                          Icons.arrow_forward_rounded,
+                          color: Colors.white,
+                        ),
+                      ),
+                      const Gap(20),
+                      FlatButton(
+                        label: TextWrapper(
+                          'Aller voir nos réalisations',
+                          style: context.textTheme.titleLarge
+                              ?.copyWith(color: Colors.white),
+                        ),
+                        style: const FlatButtonStyle(
+                          backgroundColors: MultiColor(_colors),
+                        ),
+                        suffix: const Icon(
+                          Icons.arrow_forward_rounded,
+                          color: Colors.white,
+                        ),
+                      ),
+                      const Gap(20),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
         ],
       );
 }
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
index 075fd505..9b110970 100644
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button.dart
@@ -40,20 +40,17 @@ class FlatButton extends FlatButtonComponent with $FlatButtonCWMixin {
 
   @override
   Widget build(BuildContext context) => Material(
+        color: const Color(0x00000000),
         child: Ink(
           decoration: BoxDecoration(
-            color: style?.backgroundColor ??
-                Theme.of(context).buttonTheme.colorScheme?.onPrimary,
-            gradient: LinearGradient(
-              colors: (style?.borderColors != null &&
-                      style!.borderColors!.length >= 2)
-                  ? style!.borderColors!
-                  : [
-                      // TODO(hpcl): change this
-                      Theme.of(context).cardColor,
-                      Theme.of(context).cardColor
-                    ],
-            ),
+            color: (style != null)
+                ? style!.backgroundColors?.color
+                : Theme.of(context).buttonTheme.colorScheme?.onPrimary,
+            gradient: (style?.backgroundColors?.isGradient ?? false)
+                ? LinearGradient(
+                    colors: style!.backgroundColors!.colors,
+                  )
+                : null,
             boxShadow: [
               if (style?.shadow != null) ...[style!.shadow!]
             ],
diff --git a/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart
index 06d7e217..5bf9da67 100644
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart
+++ b/packages/wyatt_ui_kit/lib/src/components/buttons/outlined_button/outlined_button.dart
@@ -42,23 +42,20 @@ class OutlinedButton extends OutlinedButtonComponent
 
   @override
   Widget build(BuildContext context) => Material(
+        color: const Color(0x00000000),
         child: Ink(
           decoration: BoxDecoration(
-            color: style?.backgroundColor ??
-                Theme.of(context).buttonTheme.colorScheme?.onPrimary,
-            border: GradientBoxBorder(
-              gradient: LinearGradient(
-                colors: (style?.borderColors != null &&
-                        style!.borderColors!.length >= 2)
-                    ? style!.borderColors!
-                    : [
-                        // TODO(hpcl): change this
-                        Theme.of(context).cardColor,
-                        Theme.of(context).cardColor
-                      ],
-              ),
-              width: style?.stroke ?? 2,
-            ),
+            color: (style != null)
+                ? style!.backgroundColors?.color
+                : Theme.of(context).buttonTheme.colorScheme?.onPrimary,
+            border: (style?.borderColors?.isGradient ?? false)
+                ? GradientBoxBorder(
+                    gradient: LinearGradient(
+                      colors: style!.borderColors!.colors,
+                    ),
+                    width: style?.stroke ?? 2,
+                  )
+                : null,
             boxShadow: [
               if (style?.shadow != null) ...[style!.shadow!]
             ],