Index: sources/gui/qml/compounds/InstructionView.qml
===================================================================
diff -u -rb59827b661a423b2b1ad2ca7b8611c2c0be7bd6a -r41ba9331e6a540df0c8eced0c4d3b8684afa9afa
--- sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision b59827b661a423b2b1ad2ca7b8611c2c0be7bd6a)
+++ sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision 41ba9331e6a540df0c8eced0c4d3b8684afa9afa)
@@ -15,84 +15,107 @@
 
 // Qt
 import QtQuick 2.12
-import QtQuick.Controls 2.12 // swipeview
 
 // Project
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
 
-/*!
- * \brief   Contains a back button as well
- *          as the current progress in each of the steps.
- */
 Rectangle { id: _root
+    property string title           : ""
+    property var    stepNames       : []
+    property var    stepImages      : []
+    property int    currentIndex    : 0
+    readonly property bool  isEmpty : stepNames.length == 0 && stepImages.length == 0
 
-    property string title       : ""
-    property var    stepNames   : []
-    property var    stepImages  : []
-
-    property int    fontPixelMessage    : 25
-    property int    fontPixelTitle      : 20
-
-    readonly property bool  isEmpty         : stepNames.length == 0 && stepImages.length == 0
-
-    readonly property int   outerRadius     : Variables.dialogRadius * 2
-    readonly property int   innerRadius     : Variables.dialogRadius
-
     color           : Colors.offWhite
-    radius          : _root.outerRadius
+    radius          : Variables.alarmDialogRadius
 
     Text { id: _title
         anchors {
-            left    : parent.left
-            top     : parent.top
+            left        : parent.left
+            leftMargin  : Variables.defaultMargin * 3
+            top         : parent.top
+            topMargin   : Variables.defaultMargin * 2
         }
         text            : _root.title
         color           : Colors.backgroundMainMenu
-        font.pixelSize  : 20
+        font.pixelSize  : Fonts.fontPixelInstructionTitle
         font.weight     : Font.Medium
     }
 
-
-    Item { id: _containerSwipeView
-        clip : true // it has to be clipped although not performace friendly, otherwise the other pages will be partially shown.
+    Item { id: _instructionContainer
         anchors {
             right   : _root.right
-            left    : _root.left
-            top     : _root.top
+            left    : _title.left
+            top     : _title.bottom
             bottom  : _root.bottom
         }
 
-        Repeater {
-            model: _root.stepNames
-            Loader { id: _content
-                anchors.bottom: parent.bottom
-                active: SwipeView.isPreviousItem || SwipeView.isCurrentItem || SwipeView.isNextItem
-                sourceComponent: Item {
+        Column { id: _contentColumn
+            anchors.top         : parent.top
+            anchors.topMargin   : Variables.defaultMargin * 2
+            spacing             : 5
+            width               : parent.width * 2/3
+
+            Repeater { id: _instrutionSteps
+                model: _root.stepNames
+
+                delegate: Item { id: _delegate
+                    width   : _contentColumn.width
+                    height  : Variables.instructionHeight
+
+                    Rectangle { id: _stepRect
+                        anchors.left            : parent.left
+                        anchors.verticalCenter  : parent.verticalCenter
+
+                        height  : 50
+                        width   : height
+                        radius  : height
+                        color   : Colors.backgroundMainMenu
+
+                        Text { id: _stepNumberRect
+                            anchors.centerIn: parent
+                            text            : index + 1
+                            color           : Colors.white
+                            font.pixelSize  : 28
+                            font.weight     : Font.Medium
+                        }
+                    }
+
                     Text { id: _message
-                        text    : _root.stepNames.length ? _root.stepNames[index] : ""
-                        color   : Colors.textMain
-                        width   : parent.width
-                        height  : 65
-                        horizontalAlignment : Text.AlignHCenter
-                        verticalAlignment   : Text.AlignVCenter
-                        font.pixelSize      : _root.fontPixelMessage
+                        anchors {
+                            left            : _stepRect.right
+                            leftMargin      : Variables.defaultMargin * 2
+                            right           : parent.right
+                            verticalCenter  : parent.verticalCenter
+                        }
+                        text            : _root.stepNames.length        ? _root.stepNames[index]    : ""
+                        font.weight     : index === _root.currentIndex  ? Font.DemiBold             : Font.Normal
+                        color           : index === _root.currentIndex  ? "#18559E"                 : Colors.alarmDialogText
+                        wrapMode        : Text.WordWrap
+                        font.pixelSize  : Fonts.fontPixelInstructionStep
                     }
-                    Image { id: _image
-                        source: _root.stepImages.length && _root.stepImages[index] ?  _root.stepImages[index] : ""
-//                        width   : _innerFrame.width
-//                        height  : _innerFrame.height
-                        anchors.top                 : parent.top
-                        anchors.topMargin           : 65
-                        anchors.horizontalCenter    : parent.horizontalCenter
-                        horizontalAlignment : Image.AlignHCenter
-                        verticalAlignment   : Image.AlignVCenter
-                        fillMode            : Image.PreserveAspectFit
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            _root.currentIndex = index
+                        }
                     }
                 }
             }
         }
-    }
 
+        Image { id: _image
+            anchors {
+                right       : parent.right
+                rightMargin : Variables.defaultMargin * 2
+            }
+            source          : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : ""
+            width           : parent.width / 3
+            height          : parent.height
+            fillMode        : Image.PreserveAspectFit
+        }
+    }
 }