diff --git a/lib/traits/color_widget.dart b/lib/traits/color_widget.dart
index 98ccb96a..61ba24b6 100644
--- a/lib/traits/color_widget.dart
+++ b/lib/traits/color_widget.dart
@@ -1,12 +1,91 @@
+import 'package:bootstrap_icons/bootstrap_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'package:yonomi_device_widgets/assets/traits/unknown_item_icon.dart';
 import 'package:yonomi_device_widgets/providers/color_provider.dart';
+import 'package:yonomi_device_widgets/ui/widget_style_constants.dart';
+import 'package:yonomi_platform_sdk/yonomi-sdk.dart';
 
 class ColorWidget extends StatelessWidget {
-  ColorWidget(ColorProvider _colorProvider);
+  final ColorProvider _colorProvider;
+  final Color _textColor = WidgetStyleConstants.darkTextColor;
+  final Color _iconColor = WidgetStyleConstants.deviceDetailIconColorActive;
+
+  ColorWidget(this._colorProvider, {Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    // TODO: implement build
-    throw UnimplementedError();
+    return _colorProvider.isBusy
+        ? Center(child: CircularProgressIndicator())
+        : Column(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
+            Row(
+              children: <Widget>[
+                Text(
+                  'COLOR',
+                  style: Theme.of(context)
+                      .textTheme
+                      .headline6
+                      ?.copyWith(color: _textColor),
+                ),
+              ],
+            ),
+            SizedBox(height: 10),
+            Center(
+                child: SizedBox(
+                    width: 100,
+                    height: 100,
+                    child: _colorProvider.isPerformingAction
+                        ? CircularProgressIndicator()
+                        : UnknownItemIcon(
+                            size: 100,
+                            color: _iconColor,
+                          ))),
+            SizedBox(height: 10),
+            _stateRow(context),
+          ]);
+  }
+
+  Widget _stateRow(BuildContext context) {
+    final state = _colorProvider.getColorState;
+    if (state == null) {
+      return Container();
+    } else {
+      final pickedColor = HSVColor.fromAHSV(
+          1.0, state.h.toDouble(), state.s / 100.0, state.b / 100.0);
+      return Row(
+        children: <Widget>[
+          Center(
+              child: CircleAvatar(
+            backgroundColor: pickedColor.toColor(),
+            radius: 46,
+          )),
+          Text(
+            'HSB(${state.h}, ${state.s}, ${state.b})',
+            style: Theme.of(context)
+                .textTheme
+                .headline6
+                ?.copyWith(color: _textColor),
+          ),
+          IconButton(
+              onPressed: () {
+                SlidePicker(
+                  pickerColor: pickedColor.toColor(),
+                  onColorChanged: (color) {
+                    final calculatedColor = HSVColor.fromColor(color);
+                    _colorProvider.setColorAction(HSBColor(
+                        calculatedColor.hue.toInt(),
+                        (calculatedColor.saturation * 100).toInt(),
+                        (calculatedColor.value * 100).toInt()));
+                  },
+                  colorModel: ColorModel.hsv,
+                );
+              },
+              icon: Icon(
+                BootstrapIcons.pencil,
+                color: WidgetStyleConstants.globalSuccessColor,
+              ))
+        ],
+      );
+    }
   }
 }
diff --git a/lib/traits/detail_screen.dart b/lib/traits/detail_screen.dart
index 08113257..3879bd21 100644
--- a/lib/traits/detail_screen.dart
+++ b/lib/traits/detail_screen.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:yonomi_device_widgets/providers/battery_level_provider.dart';
 import 'package:yonomi_device_widgets/providers/brightness_provider.dart';
+import 'package:yonomi_device_widgets/providers/color_provider.dart';
 import 'package:yonomi_device_widgets/providers/lock_provider.dart';
 import 'package:yonomi_device_widgets/providers/power_trait_provider.dart';
 import 'package:yonomi_device_widgets/providers/thermostat_provider.dart';
@@ -32,6 +33,8 @@ class DetailScreen extends StatelessWidget {
             create: (context) => ThermostatProvider(request, deviceId)),
         ChangeNotifierProvider<BrightnessProvider>(
             create: (context) => BrightnessProvider(request, deviceId)),
+        ChangeNotifierProvider<ColorProvider>(
+            create: (context) => ColorProvider(request, deviceId)),
       ],
       child: DetailScreenWidget(request, deviceId),
     );
diff --git a/pubspec.yaml b/pubspec.yaml
index e4751f5b..96a9ff10 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -19,6 +19,7 @@ dependencies:
       url: https://github.com/Yonomi/yonomi-sdk-dart
       ref: DX-361_color_trait
   built_value: ^8.1.4
+  flutter_colorpicker: ^1.0.3
 
 dev_dependencies:
   mockito: ^5.0.15