Index: sources/gui/qml/components/TopMenuBarCreateTreatment.qml
===================================================================
diff -u -rccb91da4becded9a7ad409b758bba96784d9feba -reefe8acbe5b10deb379c5e4ceabeaa95d429410e
--- sources/gui/qml/components/TopMenuBarCreateTreatment.qml	(.../TopMenuBarCreateTreatment.qml)	(revision ccb91da4becded9a7ad409b758bba96784d9feba)
+++ sources/gui/qml/components/TopMenuBarCreateTreatment.qml	(.../TopMenuBarCreateTreatment.qml)	(revision eefe8acbe5b10deb379c5e4ceabeaa95d429410e)
@@ -5,176 +5,51 @@
  * 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 TopMenuBarCreateTreatment.qml
- * \author (last) Peter Lucia
- * \date (last) 28-Aug-2020
- * \author (original) Peter Lucia
- * \date (original) 03-Aug-2020
+ * \file    TopMenuBarCreateTreatment.qml
+ * \author  (last)      Behrouz NematiPour
+ * \date    (last)      01-Jan-2021
+ * \author  (original) Peter Lucia
+ * \date    (original) 03-Aug-2020
  *
  */
 
 // Qt
 import QtQuick 2.12
-import QtQuick.Layouts 1.12
 
 // Project
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
 
 /*!
- * \brief TopMenuBarCreateTreatment - Contains a back button as well
- * as the current progress in each of the pre-treatment steps.
+ * \brief   TopMenuBarCreateTreatment - Contains a back button as well
+ *          as the current progress in each of the pre-treatment steps.
  */
 Rectangle { id: _root
-    height: Variables.topBarMenuHeight
-    color: Colors.backgroundMain
-    property var step: "CREATE";
-    property int spacing: 5
-    signal clickedBack()
+    property alias stepName : _stepIndicator.currentStepName
 
+    height  : Variables.topBarMenuHeight
+    color   : Colors.backgroundMain
+
+    signal backClicked()
+
     BackButton { id : _backButton
         objectName: "_backButton"
         width: parent.width / 10
         anchors.verticalCenter: parent.verticalCenter
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.margins: _root.height / 4
-        onClicked: _root.clickedBack()
+        onClicked: _root.backClicked()
     }
 
-    Rectangle {
-        color: "transparent"
-        height: parent.height
-        width: parent.width
-
-        anchors {
-            verticalCenter: parent.verticalCenter
-            horizontalCenter: parent.horizontalCenter
-
-        }
-
-        Row {
-            anchors.centerIn: parent
-            spacing: 5
-
-            CircleWithText { id: _create
-                text: "CREATE"
-                state: "active"
-            }
-
-            Line { id: _confirm_line
-                length: 120
-                color: Colors.createTreatmentInactive
-                radius: 5
-                anchors.verticalCenter: _create.verticalCenter
-
-                states: [
-                    State {
-                        name: "active"
-                        PropertyChanges { target: _confirm_line; thickness: 3; color: Colors.createTreatmentActive; }
-                    },
-                    State {
-                        name: "inactive"
-                        PropertyChanges { target: _confirm_line; thickness: 1; color: Colors.createTreatmentInactive; }
-                    }
-                ]
-            }
-
-            CircleWithText { id: _confirm
-                text: "CONFIRM"
-            }
-
-            Line { id: _priming_line
-                length: 120
-                color: Colors.createTreatmentInactive
-                radius: 5
-                anchors.verticalCenter: _create.verticalCenter
-
-                states: [
-                    State {
-                        name: "active"
-                        PropertyChanges { target: _priming_line; thickness: 3; color: Colors.createTreatmentActive; }
-                    },
-                    State {
-                        name: "inactive"
-                        PropertyChanges { target: _priming_line; thickness: 1; color: Colors.createTreatmentInactive; }
-                    }
-                ]
-            }
-
-            CircleWithText { id: _prime
-                text: "PRIME"
-            }
-
-            Line { id: _begin_line
-                length: 120
-                color: Colors.createTreatmentInactive
-                radius: 5
-                anchors.verticalCenter: _create.verticalCenter
-
-                states: [
-                    State {
-                        name: "active"
-                        PropertyChanges { target: _begin_line; thickness: 3; color: Colors.createTreatmentActive; }
-                    },
-                    State {
-                        name: "inactive"
-                        PropertyChanges { target: _begin_line; thickness: 1; color: Colors.createTreatmentInactive; }
-                    }
-                ]
-            }
-
-            CircleWithText { id: _begin
-                text: "BEGIN"
-            }
-        }
+    StepIndicator { id: _stepIndicator
+        anchors.centerIn: parent
+        stepNames: [
+            Variables.preTreatmentStepLabelCreate           ,
+            Variables.preTreatmentStepLabelConfirm          ,
+            Variables.preTreatmentStepLabelPriming          ,
+            Variables.preTreatmentStepLabelUltrafiltration  ,
+        ]
     }
-
-    states: [
-        State {
-            name: "create"
-            PropertyChanges { target: _create; state:       "active"   }
-            PropertyChanges { target: _confirm; state:      "inactive" }
-            PropertyChanges { target: _confirm_line; state: "inactive" }
-            PropertyChanges { target: _prime; state:        "inactive" }
-            PropertyChanges { target: _priming_line; state: "inactive" }
-            PropertyChanges { target: _begin; state:        "inactive" }
-            PropertyChanges { target: _begin_line; state:   "inactive" }
-        },
-        State {
-            name: "confirm"
-            PropertyChanges { target: _create; state:       "active"   }
-            PropertyChanges { target: _confirm; state:      "active"   }
-            PropertyChanges { target: _confirm_line; state: "active"   }
-            PropertyChanges { target: _prime; state:        "inactive" }
-            PropertyChanges { target: _priming_line; state: "inactive" }
-            PropertyChanges { target: _begin; state:        "inactive" }
-            PropertyChanges { target: _begin_line; state:   "inactive" }
-        },
-        State {
-            name: "prime"
-            PropertyChanges { target: _create; state:       "active"   }
-            PropertyChanges { target: _confirm; state:      "active"   }
-            PropertyChanges { target: _confirm_line; state: "active"   }
-            PropertyChanges { target: _prime; state:        "active"   }
-            PropertyChanges { target: _priming_line; state: "active"   }
-            PropertyChanges { target: _begin; state:        "inactive" }
-            PropertyChanges { target: _begin_line; state:   "inactive" }
-        },
-        State {
-            name: "begin"
-            PropertyChanges { target: _create; state:       "active"   }
-            PropertyChanges { target: _confirm; state:      "active"   }
-            PropertyChanges { target: _confirm_line; state: "active"   }
-            PropertyChanges { target: _prime; state:        "active"   }
-            PropertyChanges { target: _priming_line; state: "active"   }
-            PropertyChanges { target: _begin; state:        "active"   }
-            PropertyChanges { target: _begin_line; state:   "active"   }
-        }
-
-    ]
-
-
-
 }