diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift
index c267112..a5fa519 100644
--- a/example/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -15,6 +15,7 @@ import irondash_engine_context
 import just_audio
 import package_info_plus
 import path_provider_foundation
+import quill_native_bridge_macos
 import record_darwin
 import share_plus
 import shared_preferences_foundation
@@ -36,6 +37,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   JustAudioPlugin.register(with: registry.registrar(forPlugin: "JustAudioPlugin"))
   FPPPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FPPPackageInfoPlusPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  QuillNativeBridgePlugin.register(with: registry.registrar(forPlugin: "QuillNativeBridgePlugin"))
   RecordPlugin.register(with: registry.registrar(forPlugin: "RecordPlugin"))
   SharePlusMacosPlugin.register(with: registry.registrar(forPlugin: "SharePlusMacosPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock
index 5e55529..db5b26e 100644
--- a/example/macos/Podfile.lock
+++ b/example/macos/Podfile.lock
@@ -24,6 +24,8 @@ PODS:
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - quill_native_bridge_macos (0.0.1):
+    - FlutterMacOS
   - record_darwin (1.0.0):
     - Flutter
     - FlutterMacOS
@@ -59,6 +61,7 @@ DEPENDENCIES:
   - just_audio (from `Flutter/ephemeral/.symlinks/plugins/just_audio/macos`)
   - package_info_plus (from `Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos`)
   - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`)
+  - quill_native_bridge_macos (from `Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos`)
   - record_darwin (from `Flutter/ephemeral/.symlinks/plugins/record_darwin/macos`)
   - share_plus (from `Flutter/ephemeral/.symlinks/plugins/share_plus/macos`)
   - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`)
@@ -96,6 +99,8 @@ EXTERNAL SOURCES:
     :path: Flutter/ephemeral/.symlinks/plugins/package_info_plus/macos
   path_provider_foundation:
     :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin
+  quill_native_bridge_macos:
+    :path: Flutter/ephemeral/.symlinks/plugins/quill_native_bridge_macos/macos
   record_darwin:
     :path: Flutter/ephemeral/.symlinks/plugins/record_darwin/macos
   share_plus:
@@ -126,10 +131,11 @@ SPEC CHECKSUMS:
   irondash_engine_context: da62996ee25616d2f01bbeb85dc115d813359478
   just_audio: 9b67ca7b97c61cfc9784ea23cd8cc55eb226d489
   OrderedSet: e539b66b644ff081c73a262d24ad552a69be3a94
-  package_info_plus: d2f71247aab4b6521434f887276093acc70d214c
+  package_info_plus: f5790acc797bf17c3e959e9d6cf162cc68ff7523
   path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
+  quill_native_bridge_macos: f90985c5269ac7ba84d933605b463d96e5f544fe
   record_darwin: df0a677188e5fed18472550298e675f19ddaffbe
-  share_plus: a182a58e04e51647c0481aadabbc4de44b3a2bce
+  share_plus: fd717ef89a2801d3491e737630112b80c310640e
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sqflite_darwin: a553b1fd6fe66f53bbb0fe5b4f5bab93f08d7a13
   super_native_extensions: 85efee3a7495b46b04befcfc86ed12069264ebf3
diff --git a/lib/src/components/organisms/quill_editor/color_button.dart b/lib/src/components/organisms/quill_editor/color_button.dart
index 4b04ee7..8a4cc2d 100644
--- a/lib/src/components/organisms/quill_editor/color_button.dart
+++ b/lib/src/components/organisms/quill_editor/color_button.dart
@@ -4,11 +4,15 @@ import 'dart:async';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart' hide ColorExtension1;
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill/translations.dart';
 
 import '../../../utils/localizations/translation.dart';
+import '../../../utils/tools/utils.dart';
+import '../../atoms.dart';
+import '../../molecules.dart';
+import 'material_picker.dart';
 
 /// Controls color styles.
 ///
@@ -212,19 +216,18 @@ class ZdsQuillToolbarColorButtonState extends State<ZdsQuillToolbarColorButton>
       await customCallback(_controller, widget.isBackground);
       return;
     }
-    unawaited(
-      showDialog<String>(
-        context: context,
-        barrierColor:
-            _options.dialogBarrierColor ?? context.quillSharedConfigurations?.dialogBarrierColor ?? Colors.black54,
-        builder: (_) => _ColorPickerDialog(
-          isBackground: widget.isBackground,
-          onRequestChangeColor: _changeColor,
-          isToggledColor: _isToggledColor,
-          selectionStyle: _selectionStyle,
-        ),
+
+    final color = await showZdsBottomSheet<Color>(
+      context: context,
+      enableDrag: false,
+      builder: (_) => _ColorPickerDialog(
+        isBackground: widget.isBackground,
+        isToggledColor: _isToggledColor,
+        selectionStyle: _selectionStyle,
       ),
     );
+
+    _changeColor(context, color);
   }
 
   @override
@@ -251,7 +254,6 @@ enum _PickerType {
 class _ColorPickerDialog extends StatefulWidget {
   const _ColorPickerDialog({
     required this.isBackground,
-    required this.onRequestChangeColor,
     required this.isToggledColor,
     required this.selectionStyle,
   });
@@ -259,7 +261,6 @@ class _ColorPickerDialog extends StatefulWidget {
   final bool isBackground;
 
   final bool isToggledColor;
-  final void Function(BuildContext context, Color? color) onRequestChangeColor;
   final Style selectionStyle;
 
   @override
@@ -269,12 +270,6 @@ class _ColorPickerDialog extends StatefulWidget {
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
-      ..add(
-        ObjectFlagProperty<void Function(BuildContext context, Color? color)>.has(
-          'onRequestChangeColor',
-          onRequestChangeColor,
-        ),
-      )
       ..add(DiagnosticsProperty<bool>('isBackground', isBackground))
       ..add(DiagnosticsProperty<bool>('isToggledColor', isToggledColor))
       ..add(DiagnosticsProperty<Style>('selectionStyle', selectionStyle));
@@ -286,6 +281,7 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
   Color selectedColor = Colors.black;
 
   late final TextEditingController hexController;
+  final focusNode = FocusNode();
   late void Function(void Function()) colorBoxSetState;
 
   @override
@@ -299,118 +295,138 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
     }
   }
 
+  @override
+  void dispose() {
+    super.dispose();
+    hexController.dispose();
+    focusNode.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final strings = ComponentStrings.of(context);
-    return AlertDialog(
-      actions: [
-        TextButton(
-          onPressed: () {
-            widget.onRequestChangeColor(context, null);
-            Navigator.of(context).pop();
-          },
-          child: Text(strings.get('CLEAR', 'Clear')),
-        ),
-        TextButton(
-          onPressed: () {
-            Navigator.of(context).pop();
-          },
-          child: Text(strings.get('OK', 'Ok')),
-        ),
-      ],
-      backgroundColor: Theme.of(context).canvasColor,
-      content: SingleChildScrollView(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Row(
-              children: [
-                TextButton(
-                  onPressed: () {
-                    setState(() {
-                      pickerType = _PickerType.material;
-                    });
-                  },
-                  child: Text(strings.get('MATERIAL', 'Material')),
-                ),
-                TextButton(
-                  onPressed: () {
-                    setState(() {
-                      pickerType = _PickerType.color;
-                    });
-                  },
-                  child: Text(strings.get('COLOR', 'Color')),
-                ),
-              ],
-            ),
-            const SizedBox(height: 6),
-            Column(
-              children: [
-                if (pickerType == _PickerType.material)
-                  MaterialPicker(
-                    pickerColor: selectedColor,
-                    onColorChanged: (color) {
-                      widget.onRequestChangeColor(context, color);
-                      Navigator.of(context).pop();
-                    },
-                  ),
-                if (pickerType == _PickerType.color)
-                  Column(
+    return Scaffold(
+      body: LayoutBuilder(
+        builder: (context, box) {
+          return Column(
+            children: [
+              Expanded(
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.all(14),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
                     children: [
-                      ColorPicker(
-                        pickerColor: selectedColor,
-                        displayThumbColor: true,
-                        onColorChanged: (color) {
-                          widget.onRequestChangeColor(context, color);
-                          hexController.text = _colorToHex(color);
-                          selectedColor = color;
-                          colorBoxSetState(() {});
+                      ZdsToggleButton(
+                        values: [
+                          strings.get('MATERIAL', 'Material'),
+                          strings.get('COLOR', 'Color'),
+                        ],
+                        onToggleCallback: (value) {
+                          if (value == 0) {
+                            setState(() {
+                              pickerType = _PickerType.material;
+                            });
+                          } else {
+                            setState(() {
+                              pickerType = _PickerType.color;
+                            });
+                          }
                         },
                       ),
-                      const SizedBox(height: 10),
-                      Row(
+                      const SizedBox(height: 6),
+                      Column(
                         children: [
-                          Expanded(
-                            child: TextFormField(
-                              controller: hexController,
-                              onChanged: (value) {
-                                selectedColor = hexToColor(value);
-                                widget.onRequestChangeColor(context, selectedColor);
-                                colorBoxSetState(() {});
+                          if (pickerType == _PickerType.material)
+                            ZdsMaterialPicker(
+                              pickerColor: selectedColor,
+                              enableLabel: true,
+                              height: box.maxHeight,
+                              width: box.maxWidth,
+                              onColorChanged: (color) {
+                                Navigator.of(context).pop(color);
                               },
-                              decoration: InputDecoration(
-                                contentPadding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
-                                labelText: strings.get('HEX', 'Hex'),
-                                border: const OutlineInputBorder(),
-                              ),
                             ),
-                          ),
-                          const SizedBox(width: 10),
-                          StatefulBuilder(
-                            builder: (context, mcolorBoxSetState) {
-                              colorBoxSetState = mcolorBoxSetState;
-                              return Container(
-                                width: 38,
-                                height: 38,
-                                decoration: BoxDecoration(
-                                  border: Border.all(
-                                    color: Colors.black45,
-                                  ),
-                                  color: selectedColor,
-                                  borderRadius: BorderRadius.circular(5),
+                          if (pickerType == _PickerType.color)
+                            Column(
+                              children: [
+                                Row(
+                                  children: [
+                                    Expanded(
+                                      child: TextFormField(
+                                        focusNode: focusNode,
+                                        controller: hexController,
+                                        onChanged: (value) {
+                                          selectedColor = hexToColor(value);
+                                          colorBoxSetState(() {});
+                                        },
+                                        decoration: InputDecoration(
+                                          contentPadding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
+                                          labelText: strings.get('HEX', 'Hex'),
+                                          border: const OutlineInputBorder(),
+                                        ),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 10),
+                                    StatefulBuilder(
+                                      builder: (context, setState) {
+                                        colorBoxSetState = setState;
+                                        return Container(
+                                          width: 38,
+                                          height: 38,
+                                          decoration: BoxDecoration(
+                                            border: Border.all(color: Colors.black45),
+                                            color: selectedColor,
+                                            borderRadius: BorderRadius.circular(5),
+                                          ),
+                                        );
+                                      },
+                                    ),
+                                  ],
+                                ),
+                                ColorPicker(
+                                  pickerColor: selectedColor,
+                                  displayThumbColor: true,
+                                  hexInputController: hexController,
+                                  labelTypes: List.empty(),
+                                  colorPickerWidth: context.isPhone() ? box.maxWidth : 300,
+                                  onColorChanged: (color) {
+                                    hexController.text = _colorToHex(color);
+                                    selectedColor = color;
+                                    colorBoxSetState(() {});
+                                  },
                                 ),
-                              );
-                            },
-                          ),
+                              ],
+                            ),
                         ],
                       ),
                     ],
                   ),
-                const SizedBox(height: 10),
-              ],
-            ),
-          ],
-        ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.all(14),
+                child: Row(
+                  children: [
+                    const Spacer(),
+                    ZdsButton.text(
+                      child: Text(strings.get('CLEAR', 'Clear')),
+                      onTap: () {
+                        Navigator.of(context).pop();
+                      },
+                    ),
+                    const SizedBox(width: 8),
+                    ZdsButton(
+                      child: Text(strings.get('OK', 'Ok')),
+                      onTap: () {
+                        Navigator.of(context).pop(selectedColor);
+                      },
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          );
+        },
       ),
     );
   }
@@ -422,7 +438,8 @@ class _ColorPickerDialogState extends State<_ColorPickerDialog> {
       ..add(EnumProperty<_PickerType>('pickerType', pickerType))
       ..add(ColorProperty('selectedColor', selectedColor))
       ..add(DiagnosticsProperty<TextEditingController>('hexController', hexController))
-      ..add(ObjectFlagProperty<void Function(void Function() p1)>.has('colorBoxSetState', colorBoxSetState));
+      ..add(ObjectFlagProperty<void Function(void Function() p1)>.has('colorBoxSetState', colorBoxSetState))
+      ..add(DiagnosticsProperty<FocusNode>('focusNode', focusNode));
   }
 }
 
diff --git a/lib/src/components/organisms/quill_editor/material_picker.dart b/lib/src/components/organisms/quill_editor/material_picker.dart
new file mode 100644
index 0000000..d489158
--- /dev/null
+++ b/lib/src/components/organisms/quill_editor/material_picker.dart
@@ -0,0 +1,388 @@
+/// Material Color Picker
+
+library material_colorpicker;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+
+/// The Color Picker which contains Material Design Color Palette.
+class ZdsMaterialPicker extends StatefulWidget {
+  /// Constructs a ZdsMaterialPicker.
+  const ZdsMaterialPicker({
+    super.key,
+    required this.pickerColor,
+    required this.onColorChanged,
+    this.onPrimaryChanged,
+    this.enableLabel = false,
+    this.portraitOnly = false,
+    this.height = 500,
+    this.width = 300,
+  });
+
+  /// The height of the color picker.
+  ///
+  /// Defaults to 500.
+  final double height;
+
+  /// The width of the color picker.
+  ///
+  /// Defaults to 300.
+  final double width;
+
+  /// The color that is currently selected.
+  final Color pickerColor;
+
+  /// Called when the color is changed.
+  final ValueChanged<Color> onColorChanged;
+
+  /// Called when the primary color is changed.
+  final ValueChanged<Color>? onPrimaryChanged;
+
+  /// Whether to enable the label.
+  final bool enableLabel;
+
+  /// Whether to enable portrait mode only.
+  final bool portraitOnly;
+
+  @override
+  State<StatefulWidget> createState() => _ZdsMaterialPickerState();
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DoubleProperty('height', height))
+      ..add(DoubleProperty('width', width))
+      ..add(ColorProperty('pickerColor', pickerColor))
+      ..add(ObjectFlagProperty<ValueChanged<Color>>.has('onColorChanged', onColorChanged))
+      ..add(ObjectFlagProperty<ValueChanged<Color>?>.has('onPrimaryChanged', onPrimaryChanged))
+      ..add(DiagnosticsProperty<bool>('enableLabel', enableLabel))
+      ..add(DiagnosticsProperty<bool>('portraitOnly', portraitOnly));
+  }
+}
+
+class _ZdsMaterialPickerState extends State<ZdsMaterialPicker> {
+  final List<List<Color>> _colorTypes = [
+    [Colors.red, Colors.redAccent],
+    [Colors.pink, Colors.pinkAccent],
+    [Colors.purple, Colors.purpleAccent],
+    [Colors.deepPurple, Colors.deepPurpleAccent],
+    [Colors.indigo, Colors.indigoAccent],
+    [Colors.blue, Colors.blueAccent],
+    [Colors.lightBlue, Colors.lightBlueAccent],
+    [Colors.cyan, Colors.cyanAccent],
+    [Colors.teal, Colors.tealAccent],
+    [Colors.green, Colors.greenAccent],
+    [Colors.lightGreen, Colors.lightGreenAccent],
+    [Colors.lime, Colors.limeAccent],
+    [Colors.yellow, Colors.yellowAccent],
+    [Colors.amber, Colors.amberAccent],
+    [Colors.orange, Colors.orangeAccent],
+    [Colors.deepOrange, Colors.deepOrangeAccent],
+    [Colors.brown],
+    [Colors.grey],
+    [Colors.blueGrey],
+    [Colors.black],
+  ];
+
+  List<Color> _currentColorType = [Colors.red, Colors.redAccent];
+  Color _currentShading = Colors.transparent;
+
+  List<Map<Color, String>> _shadingTypes(List<Color> colors) {
+    final List<Map<Color, String>> result = [];
+
+    for (final Color colorType in colors) {
+      if (colorType == Colors.grey) {
+        result.addAll(
+          [50, 100, 200, 300, 350, 400, 500, 600, 700, 800, 850, 900]
+              .map((int shade) => {Colors.grey[shade]!: shade.toString()})
+              .toList(),
+        );
+      } else if (colorType == Colors.black || colorType == Colors.white) {
+        result.addAll([
+          {Colors.black: ''},
+          {Colors.white: ''},
+        ]);
+      } else if (colorType is MaterialAccentColor) {
+        result.addAll([100, 200, 400, 700].map((int shade) => {colorType[shade]!: 'A$shade'}).toList());
+      } else if (colorType is MaterialColor) {
+        result.addAll(
+          [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+              .map((int shade) => {colorType[shade]!: shade.toString()})
+              .toList(),
+        );
+      } else {
+        result.add({const Color(0x00000000): ''});
+      }
+    }
+
+    return result;
+  }
+
+  @override
+  void initState() {
+    for (final List<Color> colors in _colorTypes) {
+      _shadingTypes(colors).forEach((Map<Color, String> color) {
+        if (widget.pickerColor.value == color.keys.first.value) {
+          return setState(() {
+            _currentColorType = colors;
+            _currentShading = color.keys.first;
+          });
+        }
+      });
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait || widget.portraitOnly;
+
+    Widget colorList() {
+      return Container(
+        clipBehavior: Clip.hardEdge,
+        decoration: const BoxDecoration(),
+        child: Container(
+          margin: isPortrait ? const EdgeInsets.only(right: 10) : const EdgeInsets.only(bottom: 10),
+          width: isPortrait ? 60 : null,
+          height: isPortrait ? null : 60,
+          decoration: BoxDecoration(
+            color: Theme.of(context).cardColor,
+            boxShadow: [
+              BoxShadow(
+                color: (Theme.of(context).brightness == Brightness.light)
+                    ? (Theme.of(context).brightness == Brightness.light)
+                        ? Colors.grey[300]!
+                        : Colors.black38
+                    : Colors.black38,
+                blurRadius: 10,
+              ),
+            ],
+            border: isPortrait
+                ? Border(
+                    right: BorderSide(
+                      color: (Theme.of(context).brightness == Brightness.light) ? Colors.grey[300]! : Colors.black38,
+                    ),
+                  )
+                : Border(
+                    top: BorderSide(
+                      color: (Theme.of(context).brightness == Brightness.light) ? Colors.grey[300]! : Colors.black38,
+                    ),
+                  ),
+          ),
+          child: ScrollConfiguration(
+            behavior: ScrollConfiguration.of(context).copyWith(dragDevices: PointerDeviceKind.values.toSet()),
+            child: ListView(
+              scrollDirection: isPortrait ? Axis.vertical : Axis.horizontal,
+              children: [
+                if (isPortrait)
+                  const Padding(padding: EdgeInsets.only(top: 7))
+                else
+                  const Padding(padding: EdgeInsets.only(left: 7)),
+                ..._colorTypes.map((List<Color> colors) {
+                  final Color colorType = colors[0];
+                  return GestureDetector(
+                    onTap: () {
+                      widget.onPrimaryChanged?.call(colorType);
+                      setState(() => _currentColorType = colors);
+                    },
+                    child: Container(
+                      color: const Color(0x00000000),
+                      padding:
+                          isPortrait ? const EdgeInsets.fromLTRB(0, 7, 0, 7) : const EdgeInsets.fromLTRB(7, 0, 7, 0),
+                      child: Align(
+                        child: AnimatedContainer(
+                          duration: const Duration(milliseconds: 300),
+                          width: 25,
+                          height: 25,
+                          decoration: BoxDecoration(
+                            color: colorType,
+                            shape: BoxShape.circle,
+                            boxShadow: _currentColorType == colors
+                                ? [
+                                    if (colorType == Theme.of(context).cardColor)
+                                      BoxShadow(
+                                        color: (Theme.of(context).brightness == Brightness.light)
+                                            ? Colors.grey[300]!
+                                            : Colors.black38,
+                                        blurRadius: 10,
+                                      )
+                                    else
+                                      BoxShadow(
+                                        color: colorType,
+                                        blurRadius: 10,
+                                      ),
+                                  ]
+                                : null,
+                            border: colorType == Theme.of(context).cardColor
+                                ? Border.all(
+                                    color: (Theme.of(context).brightness == Brightness.light)
+                                        ? Colors.grey[300]!
+                                        : Colors.black38,
+                                  )
+                                : null,
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                }),
+                if (isPortrait)
+                  const Padding(padding: EdgeInsets.only(top: 5))
+                else
+                  const Padding(padding: EdgeInsets.only(left: 5)),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
+
+    Widget shadingList() {
+      return ScrollConfiguration(
+        behavior: ScrollConfiguration.of(context).copyWith(dragDevices: PointerDeviceKind.values.toSet()),
+        child: ListView(
+          scrollDirection: isPortrait ? Axis.vertical : Axis.horizontal,
+          children: [
+            if (isPortrait)
+              const Padding(padding: EdgeInsets.only(top: 15))
+            else
+              const Padding(padding: EdgeInsets.only(left: 15)),
+            ..._shadingTypes(_currentColorType).map((Map<Color, String> color) {
+              final Color effectiveColor = color.keys.first;
+              return GestureDetector(
+                onTap: () {
+                  setState(() => _currentShading = effectiveColor);
+                  widget.onColorChanged(effectiveColor);
+                },
+                child: Container(
+                  color: const Color(0x00000000),
+                  margin: isPortrait ? const EdgeInsets.only(right: 10) : const EdgeInsets.only(bottom: 10),
+                  padding: isPortrait ? const EdgeInsets.fromLTRB(0, 7, 0, 7) : const EdgeInsets.fromLTRB(7, 0, 7, 0),
+                  child: Align(
+                    child: AnimatedContainer(
+                      curve: Curves.fastOutSlowIn,
+                      duration: const Duration(milliseconds: 500),
+                      width: isPortrait
+                          ? (_currentShading == effectiveColor ? 250 : 230)
+                          : (_currentShading == effectiveColor ? 50 : 30),
+                      height: isPortrait ? 50 : 220,
+                      decoration: BoxDecoration(
+                        color: effectiveColor,
+                        boxShadow: _currentShading == effectiveColor
+                            ? [
+                                if ((effectiveColor == Colors.white) || (effectiveColor == Colors.black))
+                                  BoxShadow(
+                                    color: (Theme.of(context).brightness == Brightness.light)
+                                        ? Colors.grey[300]!
+                                        : Colors.black38,
+                                    blurRadius: 10,
+                                  )
+                                else
+                                  BoxShadow(
+                                    color: effectiveColor,
+                                    blurRadius: 10,
+                                  ),
+                              ]
+                            : null,
+                        border: (effectiveColor == Colors.white) || (effectiveColor == Colors.black)
+                            ? Border.all(
+                                color: (Theme.of(context).brightness == Brightness.light)
+                                    ? Colors.grey[300]!
+                                    : Colors.black38,
+                              )
+                            : null,
+                      ),
+                      child: widget.enableLabel
+                          ? isPortrait
+                              ? Row(
+                                  children: [
+                                    Text(
+                                      '  ${color.values.first}',
+                                      style: TextStyle(
+                                        color: useWhiteForeground(effectiveColor) ? Colors.white : Colors.black,
+                                      ),
+                                    ),
+                                    Expanded(
+                                      child: Align(
+                                        alignment: Alignment.centerRight,
+                                        child: Text(
+                                          '#${effectiveColor.toString().replaceFirst('Color(0xff', '').replaceFirst(')', '').toUpperCase()}  ',
+                                          style: TextStyle(
+                                            color: useWhiteForeground(effectiveColor) ? Colors.white : Colors.black,
+                                            fontWeight: FontWeight.bold,
+                                          ),
+                                        ),
+                                      ),
+                                    ),
+                                  ],
+                                )
+                              : AnimatedOpacity(
+                                  duration: const Duration(milliseconds: 300),
+                                  opacity: _currentShading == effectiveColor ? 1 : 0,
+                                  child: Container(
+                                    padding: const EdgeInsets.only(top: 16),
+                                    alignment: Alignment.topCenter,
+                                    child: Text(
+                                      color.values.first,
+                                      style: TextStyle(
+                                        color: useWhiteForeground(effectiveColor) ? Colors.white : Colors.black,
+                                        fontWeight: FontWeight.bold,
+                                        fontSize: 14,
+                                      ),
+                                      softWrap: false,
+                                    ),
+                                  ),
+                                )
+                          : const SizedBox(),
+                    ),
+                  ),
+                ),
+              );
+            }),
+            if (isPortrait)
+              const Padding(padding: EdgeInsets.only(top: 15))
+            else
+              const Padding(padding: EdgeInsets.only(left: 15)),
+          ],
+        ),
+      );
+    }
+
+    if (isPortrait) {
+      return SizedBox(
+        width: widget.width,
+        height: widget.height,
+        child: Row(
+          children: <Widget>[
+            colorList(),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: shadingList(),
+              ),
+            ),
+          ],
+        ),
+      );
+    } else {
+      return SizedBox(
+        width: widget.height,
+        height: widget.width,
+        child: Column(
+          children: <Widget>[
+            colorList(),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 12),
+                child: shadingList(),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+  }
+}
diff --git a/lib/src/utils/theme/theme_builders/divider_theme.dart b/lib/src/utils/theme/theme_builders/divider_theme.dart
index 35edf33..933c29b 100644
--- a/lib/src/utils/theme/theme_builders/divider_theme.dart
+++ b/lib/src/utils/theme/theme_builders/divider_theme.dart
@@ -19,7 +19,7 @@ extension ZetaDividerTheme on ZetaColorScheme {
       space: 1,
 
       /// Using a color from the zetaColors for the divider color
-      color: zetaColors.borderDisabled,
+      color: zetaColors.borderSubtle,
     );
   }
 }