Index: sources/gui/qml/components/StepIndicator.qml
===================================================================
diff -u -r725cf5096e9664a0b6b1c4e4e902d1673bd976a9 -rc0c63c4b149dafea2b02e4cd31f223e392ff7818
--- sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision 725cf5096e9664a0b6b1c4e4e902d1673bd976a9)
+++ sources/gui/qml/components/StepIndicator.qml	(.../StepIndicator.qml)	(revision c0c63c4b149dafea2b02e4cd31f223e392ff7818)
@@ -7,7 +7,7 @@
  *
  * \file StepIndicator.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      01-Jan-2021
+ * \date    (last)      11-Mar-2021
  * \author  (original)  Behrouz NematiPour
  * \date    (original)  01-Jan-2021
  *
@@ -28,15 +28,13 @@
  *          all the steps' bullets and the line between them from the beginning up to the currentStepIndex will be activated/highlighted.
  */
 Rectangle { id: _root
-    property var stepNames          : []
-    property int spacing            : 5
-    property int spacerLineLength   : 100
+    property bool   vertical            : false
+    property var    stepNames           : []
+    property int    spacing             : vertical ?  0 :  5
+    property int    spacerLineLength    : vertical ?  5 : 75
+    property int    currentStepIndex    : 0
 
 
-    property int currentStepIndex   : 0
-
-
-
     height  : Variables.topBarMenuHeight
     color   : Colors.backgroundMain
 
@@ -62,24 +60,35 @@
         }
     }
 
-    Row {
+    Grid { id: _gridSteps
+        rows            : _root.vertical ? 0 : 1
+        columns         : _root.vertical ? 1 : 0
+        rowSpacing      : _root.spacing
+        columnSpacing   : _root.spacing
+
         anchors.centerIn: parent
-        spacing: _root.spacing
         StepBullet { id: _headStepBullet
+            vertical: _root.vertical
             text    : _private.stepNamesFirst
             complete: currentStepIndex  > 0
             current : currentStepIndex == 0
         }
         Repeater { id: _tailStepsRepeater
             model: _private.stepNamesRest
-            Row {
-                spacing: _root.spacing
-                Line { id   : spacerLine
-                    anchors.verticalCenter: _nextStepsBullet.verticalCenter
+            Grid { id: _gridStepsRest
+                rows            : _root.vertical ? 0 : 1
+                columns         : _root.vertical ? 1 : 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
                 }
                 StepBullet { id: _nextStepsBullet
+                    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