diff --git a/examples/iot-dashboard/CircularProgressBar.cpp b/examples/iot-dashboard/CircularProgressBar.cpp
new file mode 100644
index 00000000..1576f6e9
--- /dev/null
+++ b/examples/iot-dashboard/CircularProgressBar.cpp
@@ -0,0 +1,35 @@
+#include "CircularProgressBar.h"
+
+#include <QPainter>
+
+CircularProgressBar::CircularProgressBar(int progress, QQuickItem *parent)
+    : QQuickPaintedItem(parent)
+    , m_progress(progress)
+{
+}
+
+void CircularProgressBar::paint(QPainter *painter)
+{
+    auto size = contentsSize();
+    qDebug() << Q_FUNC_INFO << size;
+    QRectF outerRect({0, 0}, size);
+
+    painter->setRenderHint(QPainter::Antialiasing, true);
+
+    // ### chose a different color here due to the lack of inner shadow:
+    painter->setBrush({"#e8e8e8"});
+    painter->setPen(Qt::white);
+    painter->drawEllipse(outerRect);
+
+    int startAngle = 1440;
+    int endAngle = -16 * (m_progress / 100.0) * 360;
+
+    painter->setBrush(color());
+    painter->setPen(color());
+    painter->drawPie(outerRect, startAngle, endAngle);
+
+    painter->setBrush(Qt::white);
+    painter->setPen(Qt::white);
+    QRectF innerRect(width() / 2, width() / 2, size.width() - width(), size.height() - width());
+    painter->drawEllipse(innerRect);
+}
diff --git a/examples/iot-dashboard/CircularProgressBar.h b/examples/iot-dashboard/CircularProgressBar.h
new file mode 100644
index 00000000..418b5f61
--- /dev/null
+++ b/examples/iot-dashboard/CircularProgressBar.h
@@ -0,0 +1,36 @@
+#ifndef CIRCULARPROGRESSBAR_H
+#define CIRCULARPROGRESSBAR_H
+
+#include <QColor>
+#include <QQuickPaintedItem>
+
+class CircularProgressBar : public QQuickPaintedItem
+{
+public:
+    CircularProgressBar(int progress, QQuickItem* parent = nullptr);
+
+    virtual void paint(QPainter *painter) override;
+
+    QColor color() const {
+        return m_color;
+    }
+
+    void setColor(const QColor& color) {
+        m_color = color;
+    }
+
+    double width() const {
+        return m_width;
+    }
+
+    void setWidth(double width) {
+        m_width = width;
+    }
+
+private:
+    QColor m_color;
+    double m_width = 20;
+    int m_progress;
+};
+
+#endif // CIRCULARPROGRESSBAR_H
diff --git a/examples/iot-dashboard/PieChartPainted.cpp b/examples/iot-dashboard/PieChartPainted.cpp
new file mode 100644
index 00000000..4ddebc67
--- /dev/null
+++ b/examples/iot-dashboard/PieChartPainted.cpp
@@ -0,0 +1,43 @@
+#include "PieChartPainted.h"
+
+#include <QskSkin.h>
+#include <QskTextLabel.h>
+
+#include <QFontMetricsF>
+#include <QQuickPaintedItem>
+
+PieChartPainted::PieChartPainted(int progress, int value, QQuickItem *parent)
+    : QskControl(parent)
+    , m_progressBar(new CircularProgressBar(progress, this))
+    , m_progressLabel(new QskTextLabel(this))
+//    , m_numberLabel(new QskTextLabel(QString::number(value), this))
+//    , m_unitLabel(new QskTextLabel("kwH", this))
+{
+    setAutoLayoutChildren(true);
+
+    auto progressText = QString::number(progress) + " %";
+    m_progressLabel->setText(progressText);
+    m_progressLabel->setFontRole(QskSkin::SmallFont);
+}
+
+QSizeF PieChartPainted::contentsSizeHint(Qt::SizeHint sizeHint, const QSizeF& size) const
+{
+    qDebug() << Q_FUNC_INFO << sizeHint << size << layoutRect() << contentsRect();
+//    return size;
+    return {57, 57};
+}
+
+void PieChartPainted::updateLayout()
+{
+    m_progressBar->setColor(Qt::magenta);
+    m_progressBar->setContentsSize(size().toSize());
+    m_progressBar->update();
+
+    auto rect = contentsRect();
+    QFontMetricsF progressMetrics(m_progressLabel->effectiveFont(QskTextLabel::Text));
+    auto textWidth = progressMetrics.width(m_progressLabel->text());
+    auto posX = rect.width() / 2 - textWidth / 2;
+    auto posY = rect.height() / 2 - progressMetrics.height() / 2;
+    m_progressLabel->setPosition({posX, posY});
+    m_progressLabel->setFixedWidth(textWidth);
+}
diff --git a/examples/iot-dashboard/PieChartPainted.h b/examples/iot-dashboard/PieChartPainted.h
new file mode 100644
index 00000000..ec94c620
--- /dev/null
+++ b/examples/iot-dashboard/PieChartPainted.h
@@ -0,0 +1,26 @@
+#ifndef PIECHARTPAINTED_H
+#define PIECHARTPAINTED_H
+
+#include <QskControl.h>
+
+#include "CircularProgressBar.h"
+
+class QskTextLabel;
+class QQuickPaintedItem;
+
+class PieChartPainted : public QskControl
+{
+public:
+    PieChartPainted(int progress, int value, QQuickItem* parent = nullptr);
+
+    virtual QSizeF contentsSizeHint( Qt::SizeHint, const QSizeF& ) const override;
+    void updateLayout() override;
+
+private:
+    CircularProgressBar* m_progressBar;
+    QskTextLabel* m_progressLabel;
+//    QskTextLabel* m_numberLabel;
+//    QskTextLabel* m_unitLabel;
+};
+
+#endif // PIECHARTPAINTED_H
diff --git a/examples/iot-dashboard/TopBar.cpp b/examples/iot-dashboard/TopBar.cpp
index c63783b4..72f842a2 100644
--- a/examples/iot-dashboard/TopBar.cpp
+++ b/examples/iot-dashboard/TopBar.cpp
@@ -1,11 +1,12 @@
 #include "TopBar.h"
+#include "PieChartPainted.h"
 
 #include <QskSkin.h>
 #include <QskTextLabel.h>
 
 #include <QTime>
 
-TopBarItem::TopBarItem( const QString& name, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
+TopBarItem::TopBarItem(const QString& name, int progress, int value, QQuickItem* parent ) : QskLinearBox( Qt::Vertical, parent ),
     m_name( name )
 {
     setAutoLayoutChildren( true );
@@ -17,6 +18,8 @@ TopBarItem::TopBarItem( const QString& name, QQuickItem* parent ) : QskLinearBox
 
     auto* textLabel = new QskTextLabel( name, this );
     textLabel->setFontRole(QskSkin::SmallFont); // ### style
+
+    auto* pieChart = new PieChartPainted(progress, value, this);
 }
 
 TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
@@ -24,12 +27,15 @@ TopBar::TopBar(QQuickItem *parent) : QskLinearBox(Qt::Horizontal, parent)
     setAutoLayoutChildren(true);
     setAutoAddChildren(true);
     setSizePolicy(QskSizePolicy::Preferred, QskSizePolicy::Fixed);
+    setFixedHeight(100);
 
     QStringList itemStrings = { "Living Room", "Bedroom", "Bathroom", "Kitchen" };
+    int progressValues[] = {25, 45, 15, 86};
+    int values[] = {175, 205, 115, 289};
 
-    for( const auto itemString : itemStrings )
+    for(int a = 0; a < itemStrings.count(); a++)
     {
-        auto* item = new TopBarItem( itemString, this );
+        auto* item = new TopBarItem( itemStrings.at(a), progressValues[a], values[a], this );
         m_entries.append(item);
     }
 
diff --git a/examples/iot-dashboard/TopBar.h b/examples/iot-dashboard/TopBar.h
index 048c371a..64ec7d48 100644
--- a/examples/iot-dashboard/TopBar.h
+++ b/examples/iot-dashboard/TopBar.h
@@ -7,7 +7,7 @@ class TopBarItem : public QskLinearBox
     Q_OBJECT
 
 public:
-    TopBarItem( const QString& name, QQuickItem* parent );
+    TopBarItem(const QString& name, int progress, int value, QQuickItem* parent );
 
 private:
     QString m_name;
diff --git a/examples/iot-dashboard/iot-dashboard.pro b/examples/iot-dashboard/iot-dashboard.pro
index af30c8e4..c94e6c92 100644
--- a/examples/iot-dashboard/iot-dashboard.pro
+++ b/examples/iot-dashboard/iot-dashboard.pro
@@ -2,10 +2,12 @@ CONFIG += qskexample
 
 SOURCES += \
     Card.cpp \
+    CircularProgressBar.cpp \
     DaytimeSkin.cpp \
     MainContent.cpp \
     MenuBar.cpp \
     PieChart.cpp \
+    PieChartPainted.cpp \
     PieChartSkinlet.cpp \
     TopBar.cpp \
     main.cpp \
@@ -13,11 +15,13 @@ SOURCES += \
 
 HEADERS += \
     Card.h \
+    CircularProgressBar.h \
     DaytimeSkin.h \
     MainContent.h \
     MainWindow.h \
     MenuBar.h \
     PieChart.h \
+    PieChartPainted.h \
     PieChartSkinlet.h \
     TopBar.h