Index: sources/gui/qml/components/StepIndicator.qml
===================================================================
diff -u -r6112c3191d418571246b5b6da11502b2e723ef2e -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 6112c3191d418571246b5b6da11502b2e723ef2e)
+++ sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2021-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file StepIndicator.qml
+ * \file    StepIndicator.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      11-Mar-2021
+ * \date    (last)      06-Jul-2021
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  01-Jan-2021
+ * \date    (original)  11-Jan-2021
  *
  */
 
@@ -35,8 +35,9 @@
     property int    spacing             : vertical ?  0 :  5
     property int    spacerLineLength    : vertical ?  5 : 75
     property int    currentStepIndex    : 0
+    property int    diameter            : 15
 
-
+    width   : _gridSteps.width
     height  : _gridSteps.height // Variables.topBarMenuHeight
     color   : Colors.backgroundMain
 
@@ -46,18 +47,25 @@
         function setupModel(names) {
             if ( names.length > 1 ) {
                 for (let i = 0; i < names.length; i++) {
-                    if (i === 0)
+                    if (i === 0) {
                         stepNamesFirst = names[i]
-                    else
+                    }
+                    else {
                         stepNamesRest[i-1] = names[i]
+                    }
                 }
             }
             else {
                 if (names.length) stepNamesFirst = names[0]
                 else              stepNamesFirst = ""
                 stepNamesRest = []
             }
-            console.debug(_root.stepNames, stepNamesFirst, stepNamesRest)
+            /////////////////////////////////////////////////
+            // 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()
         }
     }
 
@@ -70,9 +78,9 @@
         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
@@ -82,6 +90,7 @@
         }
         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
@@ -95,6 +104,7 @@
                     color   : _nextStepsBullet.color
                 }
                 StepBullet { id: _nextStepsBullet
+                    diameter        : _root.diameter
                     currentComplete : _root.currentComplete
                     hideLabels      : _root.hideLabels
                     vertical        : _root.vertical