Index: sources/gui/qml/compounds/InstructionView.qml
===================================================================
diff -u -r0f13b03278a566e8352bc26d3f181396a2490b20 -r39a514158384c0ad4bfcfb90bafbaa4ca8dc5a26
--- sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision 0f13b03278a566e8352bc26d3f181396a2490b20)
+++ sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision 39a514158384c0ad4bfcfb90bafbaa4ca8dc5a26)
@@ -20,6 +20,7 @@
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
+import "qrc:/compounds"
 
 Rectangle { id: _root
     property string title           : ""
@@ -31,6 +32,8 @@
     radius          : Variables.alarmDialogRadius
     clip            : true
 
+    onVisibleChanged: if (visible) { _autoStepController.isPlaying = true }
+
     Text { id: _title
         anchors {
             left        : parent.left
@@ -52,9 +55,23 @@
             bottom  : _root.bottom
         }
 
+        AutoStepController { id: _autoStepController
+            anchors {
+                left        : parent.left
+                top         : parent.top
+                topMargin   : Variables.defaultMargin * 2
+            }
+            width : parent.width / 2
+
+            onTriggered : _root.currentIndex = (_root.currentIndex + 1) % _instrutionSteps.count
+        }
+
         Column { id: _contentColumn
-            anchors.top         : parent.top
-            anchors.topMargin   : Variables.defaultMargin * 2
+            anchors {
+                top         : _autoStepController.bottom
+                topMargin   : Variables.defaultMargin * 2.5
+            }
+
             spacing             : 5
             width               : parent.width / 2
 
@@ -72,12 +89,16 @@
                         height  : 50
                         width   : height
                         radius  : height
-                        color   : Colors.backgroundMainMenu
+                        color   : index === _root.currentIndex ?  Colors.backgroundMainMenu : Colors.offWhite
+                        border {
+                            color: Colors.backgroundMainMenu
+                            width: 2
+                        }
 
                         Text { id: _stepNumberRect
                             anchors.centerIn: parent
                             text            : index + 1
-                            color           : Colors.white
+                            color           : index === _root.currentIndex ? Colors.offWhite :  Colors.backgroundMainMenu
                             font.pixelSize  : 28
                             font.weight     : Font.Medium
                         }
@@ -101,16 +122,30 @@
                         anchors.fill: parent
                         onClicked: {
                             _root.currentIndex = index
+                            _autoStepController.refresh()
                         }
                     }
                 }
             }
         }
 
         Image { id: _image
-            anchors.right   : parent.right
-            anchors.left    : _contentColumn.right
-            source          : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : ""
+            anchors{
+                right       : parent.right
+                bottom      : parent.bottom
+            }
+            source        : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : ""
         }
+        // TODO TEST ON NEW DISPLAY AND ADD BACK IN
+//        InteractiveImage { id: _image
+//            anchors {
+//                bottom  : parent.bottom
+//                right   : parent.right
+//            }
+//            width       : parent.width / 2
+//            height      : _root.height
+
+//            source        : _root.stepImages.length && _root.stepImages[_root.currentIndex] ? _root.stepImages[_root.currentIndex] : ""
+//        }
     }
 }