Index: sources/gui/qml/components/StepIndicator.qml
===================================================================
diff -u -r70d72796067d8a626458328e2642ab3e2b033648 -rf9f82c1e15a0c1627b88d7247ab24174b30a0f7d
--- sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 70d72796067d8a626458328e2642ab3e2b033648)
+++ sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision f9f82c1e15a0c1627b88d7247ab24174b30a0f7d)
@@ -30,87 +30,61 @@
 Rectangle { id: _root
     property bool   currentComplete     : false
     property bool   hideLabels          : false
-    property bool   vertical            : false
     property var    stepNames           : []
-    property int    spacing             : vertical ?  0 :  5
-    property int    spacerLineLength    : vertical ?  5 : 75
+    property var    subSteps            : []
+    property int    spacing             : 5
+    property int    spacerLineLength    : 75
     property int    currentStepIndex    : 0
     property int    diameter            : 15
+    property int    subStepIndex        : 0
 
-    width   : _gridSteps.width
-    height  : _gridSteps.height
-    color   : Colors.backgroundMain
+    width   : _row.width
+    height  : _row.height
+    color   : Colors.transparent
 
-    QtObject { id: _private
-        property string stepNamesFirst: ""
-        property var    stepNamesRest : []
-        function setupModel(names) {
-            stepNamesRest = [] // reset list first
-            if ( names.length > 1 ) {
-                for (let i = 0; i < names.length; i++) {
-                    if (i === 0) {
-                        stepNamesFirst = names[i]
-                    }
-                    else {
-                        stepNamesRest[i-1] = names[i]
-                    }
-                }
-            }
-            else {
-                if (names.length) stepNamesFirst = names[0]
-                else              stepNamesFirst = ""
-            }
-            /////////////////////////////////////////////////
-            // it is so odd that when the stepNamesRest set by settings the change event is not called
-            // so it has been called manually. I couldn't find why, and needs more investigation.
-            // The good point is the binding of the model (_tailStepsRepeater.model) is called once.
-            /////////////////////////////////////////////////
-            if (stepNamesRest.length) stepNamesRestChanged()
-        }
-    }
+    Row { id: _row
+        spacing         : _root.spacing
+        anchors.centerIn: parent
 
-    onStepNamesChanged: {
-        _private.setupModel(_root.stepNames)
-    }
+        Repeater { id: repeater
+            model: _root.stepNames
 
-    Grid { id: _gridSteps
-        rows            : _root.vertical ? 0 : 1
-        columns         : _root.vertical ? 1 : 0
-        rowSpacing      : _root.spacing
-        columnSpacing   : _root.spacing
-        anchors.centerIn: parent
-        StepBullet { id: _headStepBullet
-            diameter        : _root.diameter
-            currentComplete : _root.currentComplete
-            hideLabels      : _root.hideLabels
-            vertical        : _root.vertical
-            text            : _private.stepNamesFirst
-            complete        : currentStepIndex  > 0
-            current         : currentStepIndex == 0
-        }
-        Repeater { id: _tailStepsRepeater
-            model: _private.stepNamesRest
-            // DEBUG : onModelChanged: console.debug(" 88888 ", _root.stepNames)
-            Grid { id: _gridStepsRest
-                rows            : _root.vertical ? 0 : 1
-                columns         : _root.vertical ? 1 : 0
+            Grid { id: _gridSteps
+                rows            : 1
+                columns         : 0
                 rowSpacing      : _root.spacing
                 columnSpacing   : _root.spacing
                 verticalItemAlignment   : Grid.AlignVCenter
                 horizontalItemAlignment : Grid.AlignHCenter
+
                 Line { id   : _spacerLine
                     orientation: _root.vertical ? Line.Orientation.Vertical : Line.Orientation.Horizontal
                     length  : _root.spacerLineLength
-                    color   : _nextStepsBullet.color
+                    color   : _stepsBullet.color
+                    visible : index !== 0 // do not show fist line onl lines inbetween bullets
                 }
-                StepBullet { id: _nextStepsBullet
+
+                StepBullet { id: _stepsBullet
                     diameter        : _root.diameter
                     currentComplete : _root.currentComplete
                     hideLabels      : _root.hideLabels
-                    vertical        : _root.vertical
                     text            : modelData
-                    complete        : currentStepIndex > 0 && index <  currentStepIndex - 1 // first index is used for the head/first bullet
-                    current         : currentStepIndex > 0 && index == currentStepIndex - 1 // first index is used for the head/first bullet
+                    complete        : index <  currentStepIndex
+                    current         : index === currentStepIndex
+
+                    SubStepIndicator { id: _subStep
+                        anchors {
+                            top             : parent.bottom
+                            topMargin       : 25
+                            horizontalCenter: parent.horizontalCenter
+                        }
+
+                        subStepIndex    : _root.subStepIndex
+                        subStepsLength  : _root.subSteps[index] ?? 0
+                        height          : 10
+                        width           : _stepsBullet.width * _root.subSteps[index]
+                        complete        : _stepsBullet.complete
+                    }
                 }
             }
         }