Index: sources/gui/qml/compounds/StepNavigationTitleBar.qml
===================================================================
diff -u -rbd01334f257c35b96b7b232beacbcd7fae60c852 -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/compounds/StepNavigationTitleBar.qml	(.../StepNavigationTitleBar.qml)	(revision bd01334f257c35b96b7b232beacbcd7fae60c852)
+++ sources/gui/qml/compounds/StepNavigationTitleBar.qml	(.../StepNavigationTitleBar.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    StepNavigationTitleBar.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      17-Mar-2021
+ * \date    (last)      18-Jun-2021
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  10-Mar-2021
+ * \date    (original)  18-Mar-2021
  *
  */
 
@@ -25,13 +25,14 @@
  * \brief   StepNavigationTitleBar
  */
 Rectangle { id: _root
-    property alias stepIndex        : _stepIndicator.currentStepIndex
+    property int   stepIndex        : 0
+    property int   stepLineLength   : 75
+    property var   stepNames        : []
     property alias     backVisible  : _backButton   .visible
     property alias     backEnabled  : _backButton   .enabled
     property alias  confirmVisible  : _confirmButton.visible
     property alias  confirmEnabled  : _confirmButton.enabled
     property alias confirmText      : _confirmButton.text
-    property alias stepNames        : _stepIndicator.stepNames
 
     height  : Variables.topBarMenuHeight
     color   : Colors.backgroundMain
@@ -54,15 +55,16 @@
         objectName: "_confirmButton"
         visible: false
         enabled: true
-        anchors {
-            left    : undefined
-            top     : parent.top
-            right   : parent.right
-        }
         onClicked: _root.confirmClicked()
     }
 
-    StepIndicator { id: _stepIndicator
+    Loader { id: _stepIndicatorLoader
+        active: stepNames.length
         anchors.centerIn: parent
+        sourceComponent: StepIndicator { id: _stepIndicator
+            currentStepIndex: _root.stepIndex
+            spacerLineLength: _root.stepLineLength
+            stepNames       : _root.stepNames
+        }
     }
 }