diff --git a/examples/iotdashboard/LightDisplay.cpp b/examples/iotdashboard/LightDisplay.cpp
index 379c940e..17e71bf5 100644
--- a/examples/iotdashboard/LightDisplay.cpp
+++ b/examples/iotdashboard/LightDisplay.cpp
@@ -20,8 +20,7 @@
 
 QSK_SUBCONTROL( LightDisplay, Panel )
 QSK_SUBCONTROL( LightDisplay, Groove )
-QSK_SUBCONTROL( LightDisplay, ColdPart )
-QSK_SUBCONTROL( LightDisplay, WarmPart )
+QSK_SUBCONTROL( LightDisplay, ColdAndWarmArc )
 QSK_SUBCONTROL( LightDisplay, ValueText )
 QSK_SUBCONTROL( LightDisplay, LeftLabel )
 QSK_SUBCONTROL( LightDisplay, RightLabel )
diff --git a/examples/iotdashboard/LightDisplay.h b/examples/iotdashboard/LightDisplay.h
index 87ad394f..dfef8c29 100644
--- a/examples/iotdashboard/LightDisplay.h
+++ b/examples/iotdashboard/LightDisplay.h
@@ -14,7 +14,7 @@ class LightDisplay : public QskBoundedValueInput
     Q_OBJECT
 
   public:
-    QSK_SUBCONTROLS( Panel, Groove, ColdPart, WarmPart, ValueText, LeftLabel, RightLabel )
+    QSK_SUBCONTROLS( Panel, Groove, ColdAndWarmArc, ValueText, LeftLabel, RightLabel )
 
     LightDisplay( QQuickItem* parent = nullptr );
 
diff --git a/examples/iotdashboard/LightDisplaySkinlet.cpp b/examples/iotdashboard/LightDisplaySkinlet.cpp
index 2413f19a..a5625b2d 100644
--- a/examples/iotdashboard/LightDisplaySkinlet.cpp
+++ b/examples/iotdashboard/LightDisplaySkinlet.cpp
@@ -8,6 +8,7 @@
 
 #include "nodes/BoxShadowNode.h"
 
+#include <QskArcMetrics.h>
 #include <QskTextOptions.h>
 
 #include <QFontMetrics>
@@ -15,7 +16,7 @@
 LightDisplaySkinlet::LightDisplaySkinlet( QskSkin* skin )
     : QskSkinlet( skin )
 {
-    setNodeRoles( { GrooveRole, PanelRole, WarmPartRole, ColdPartRole,
+    setNodeRoles( { GrooveRole, PanelRole, ColdAndWarmArcRole,
                     ValueTextRole, LeftLabelRole, RightLabelRole } );
 }
 
@@ -33,21 +34,32 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
             || subControl == LightDisplay::Panel
             || subControl == LightDisplay::ValueText )
     {
-        QSizeF size = textLabelsSize( display );
+        QSizeF textSize = textLabelsSize( display );
+        QskArcMetrics arcMetrics = display->arcMetricsHint( LightDisplay::ColdAndWarmArc );
 
-        const qreal x = size.width();
-        const qreal w = contentsRect.width() - 2 * size.width();
-        const qreal y = 0;
-        const qreal h = contentsRect.height();
+        const qreal x = textSize.width() + arcMetrics.width();
+        const qreal w = contentsRect.width() - ( 2 * ( textSize.width() + arcMetrics.width() ) );
+        const qreal y = arcMetrics.width();
+        const qreal h = contentsRect.height() - 2 * arcMetrics.width();
 
         const qreal diameter = qMin( w, h );
 
         rect = QRectF( x, y, diameter, diameter );
         return rect;
     }
+    else if( subControl == LightDisplay::ColdAndWarmArc )
+    {
+        const QRectF panelRect = subControlRect( skinnable, contentsRect,
+                                                 LightDisplay::Panel );
+        auto barWidth = display->arcMetricsHint( LightDisplay::ColdAndWarmArc ).width();
+        auto rect = panelRect.marginsAdded( { barWidth, barWidth, barWidth, barWidth } );
+        return rect;
+    }
     else if( subControl == LightDisplay::LeftLabel )
     {
-        QRectF grooveRect = subControlRect( skinnable, contentsRect, LightDisplay::Groove );
+        // ### rename to panelRect?
+        const QRectF grooveRect = subControlRect( skinnable, contentsRect,
+                                                  LightDisplay::Groove );
         QSizeF size = textLabelsSize( display );
 
         rect.setWidth( size.width() );
@@ -59,14 +71,15 @@ QRectF LightDisplaySkinlet::subControlRect( const QskSkinnable* skinnable,
     }
     else if( subControl == LightDisplay::RightLabel )
     {
-        QRectF grooveRect = subControlRect( skinnable, contentsRect, LightDisplay::Groove );
+        QRectF arcRect = subControlRect( skinnable, contentsRect, LightDisplay::ColdAndWarmArc );
         QSizeF size = textLabelsSize( display );
 
-        rect.setX( rect.right() - size.width() );
+        rect.setX( arcRect.x() + arcRect.width() );
 
-        rect.setY( grooveRect.y() + ( grooveRect.height() - size.height() ) / 2 );
+        rect.setY( arcRect.y() + ( arcRect.height() - size.height() ) / 2 );
         rect.setHeight( size.height() );
 
+        qDebug() << "rl rect:" << rect;
         return rect;
     }
 
@@ -107,17 +120,12 @@ QSGNode* LightDisplaySkinlet::updateSubNode(
 
             return shadowNode;
         }
-        case WarmPartRole:
+        case ColdAndWarmArcRole:
         {
-//            const qreal startAngle = 90 * 16;
-//            const auto bar = static_cast< const LightDisplay* >( skinnable );
-//            const qreal spanAngle = bar->valueAsRatio() * -5760;
-//            return updateArcNode( skinnable, node, startAngle, spanAngle,
-//                LightDisplay::Bar );
-        }
-        case ColdPartRole:
-        {
-            return nullptr;
+            const qreal startAngle = 0;
+            const qreal spanAngle = 180 * 16;
+            return updateArcNode( skinnable, node, startAngle, spanAngle,
+                LightDisplay::ColdAndWarmArc );
         }
         case ValueTextRole:
         {
diff --git a/examples/iotdashboard/LightDisplaySkinlet.h b/examples/iotdashboard/LightDisplaySkinlet.h
index 60dad4c8..19154ff0 100644
--- a/examples/iotdashboard/LightDisplaySkinlet.h
+++ b/examples/iotdashboard/LightDisplaySkinlet.h
@@ -20,7 +20,7 @@ class LightDisplaySkinlet : public QskSkinlet
     {
         PanelRole,
         GrooveRole,
-        ColdPartRole,
+        ColdAndWarmArcRole,
         WarmPartRole,
         ValueTextRole,
         LeftLabelRole,
diff --git a/examples/iotdashboard/Skin.cpp b/examples/iotdashboard/Skin.cpp
index 2a4bb31b..c498a8c2 100644
--- a/examples/iotdashboard/Skin.cpp
+++ b/examples/iotdashboard/Skin.cpp
@@ -183,8 +183,15 @@ void Skin::initHints( const Palette& palette )
 
     // light intensity:
     ed.setBoxShape( LightDisplay::Panel, 100, Qt::RelativeSize );
-    ed.setGradient( LightDisplay::ColdPart, { Qt::Horizontal, "#a7b0ff", "#6776ff" } );
-    ed.setGradient( LightDisplay::WarmPart, { Qt::Horizontal, "#feeeb7", "#ff3122" } );
+
+    ed.setArcMetrics( LightDisplay::ColdAndWarmArc, 8.785, 0, 0 );
+    QskGradient coldGradient( Qt::Horizontal, { { 0.0, 0xffff3122 },
+                                                { 0.2, 0xfffeeeb7 },
+                                                { 0.3, 0xffa7b0ff },
+                                                { 0.5, 0xff6776ff },
+                                                { 1.0, Qt::black } } );
+    ed.setGradient( LightDisplay::ColdAndWarmArc, coldGradient );
+
     ed.setFontRole( LightDisplay::ValueText, QskSkin::LargeFont );
     ed.setColor( LightDisplay::ValueText, "#929cb2" );