Index: sources/gui/qml/components/StepIndicator.qml
===================================================================
diff -u -reefe8acbe5b10deb379c5e4ceabeaa95d429410e -r725cf5096e9664a0b6b1c4e4e902d1673bd976a9
--- sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision eefe8acbe5b10deb379c5e4ceabeaa95d429410e)
+++ sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 725cf5096e9664a0b6b1c4e4e902d1673bd976a9)
@@ -30,45 +30,48 @@
 Rectangle { id: _root
     property var stepNames          : []
     property int spacing            : 5
-    property int spacerLineLength   : 120
+    property int spacerLineLength   : 100
 
-             property string currentStepName   : ""
-    readonly property int    currentStepIndex  : _private.stepNamesTail.indexOf(_root.currentStepName) + 1
 
+    property int currentStepIndex   : 0
 
 
+
     height  : Variables.topBarMenuHeight
     color   : Colors.backgroundMain
 
     QtObject { id: _private
-        property string stepNamesHead: ""
-        property var    stepNamesTail: []
+        property string stepNamesFirst: ""
+        property var    stepNamesRest : []
     }
 
     onStepNamesChanged: {
-        if (_root.stepNames.length > 1) {
-            // javascript shift() on array will retrurn the first element
+        console.debug(_root.stepNames)
+        if ( _root.stepNames.length > 1 ) {
+            // javascript shift() on array will return the first element
             // and will update the original array by removing the first element
-            // that's why on the tail assignment the origianl has been assigned.
-            _private.stepNamesHead = _root.stepNames.shift()
-            _private.stepNamesTail = _root.stepNames
+            // that's why on the stepNamesRest assignment the origianl has been assigned.
+            let mStepNames = _root.stepNames
+            _private.stepNamesFirst = mStepNames.shift()
+            _private.stepNamesRest  = mStepNames
         }
         else {
-            if (_root.stepNames.length) _private.stepNamesHead = _root.stepNames[0]
-            else                        _private.stepNamesHead = ""
-            _private.stepNamesTail = []
+            if (_root.stepNames.length) _private.stepNamesFirst = _root.stepNames[0]
+            else                        _private.stepNamesFirst = ""
+            _private.stepNamesRest = []
         }
     }
 
     Row {
         anchors.centerIn: parent
         spacing: _root.spacing
         StepBullet { id: _headStepBullet
-            text    : _private.stepNamesHead
-            active  : true
+            text    : _private.stepNamesFirst
+            complete: currentStepIndex  > 0
+            current : currentStepIndex == 0
         }
         Repeater { id: _tailStepsRepeater
-            model: _private.stepNamesTail
+            model: _private.stepNamesRest
             Row {
                 spacing: _root.spacing
                 Line { id   : spacerLine
@@ -78,7 +81,8 @@
                 }
                 StepBullet { id: _nextStepsBullet
                     text    : modelData
-                    active  : index < currentStepIndex
+                    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
                 }
             }
         }