Index: sources/gui/qml/compounds/InstructionView.qml
===================================================================
diff -u -r35106f5fb28d36aaae6e17449a39f89b8bcdab46 -r8f6ecb60abf6d47d4554cfd3019ca496d79b6f69
--- sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision 35106f5fb28d36aaae6e17449a39f89b8bcdab46)
+++ sources/gui/qml/compounds/InstructionView.qml	(.../InstructionView.qml)	(revision 8f6ecb60abf6d47d4554cfd3019ca496d79b6f69)
@@ -20,17 +20,20 @@
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
+import "qrc:/compounds"
 
 Rectangle { id: _root
     property string title           : ""
     property var    stepNames       : []
     property var    stepImages      : []
     property int    currentIndex    : 0
 
-    color           : Colors.offWhite
+    color           : _colorMode.modeBackgroundColor
     radius          : Variables.alarmDialogRadius
     clip            : true
 
+    onVisibleChanged: if (visible) { _autoStepController.isPlaying = true }
+
     Text { id: _title
         anchors {
             left        : parent.left
@@ -39,7 +42,7 @@
             topMargin   : Variables.defaultMargin * 2 // with current resolution this makes the screen look nice
         }
         text            : _root.title
-        color           : Colors.backgroundMainMenu
+        color           : _colorMode.modeTextColor
         font.pixelSize  : Fonts.fontPixelInstructionTitle
         font.weight     : Font.Medium
     }
@@ -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 ?  _colorMode.modeButtonColor : _colorMode.modeBackgroundColor
+                        border {
+                            color: _colorMode.modeButtonColor
+                            width: 2
+                        }
 
                         Text { id: _stepNumberRect
                             anchors.centerIn: parent
                             text            : index + 1
-                            color           : Colors.white
+                            color           : vSettings.darkMode ? Colors.offWhite : index === _root.currentIndex ? _colorMode.modeBackgroundColor :  _colorMode.modeButtonColor
                             font.pixelSize  : 28
                             font.weight     : Font.Medium
                         }
@@ -92,7 +113,7 @@
                         }
                         text            : _root.stepNames.length        ? _root.stepNames[index]    : ""
                         font.weight     : index === _root.currentIndex  ? Font.Medium               : Font.Normal
-                        color           : index === _root.currentIndex  ? "#18559E"                 : Colors.alarmDialogText
+                        color           : index === _root.currentIndex  ? _colorMode.modeSelctedColor   : _colorMode.modeTextColor
                         wrapMode        : Text.WordWrap
                         font.pixelSize  : Fonts.fontPixelInstructionStep
                     }
@@ -101,15 +122,30 @@
                         anchors.fill: parent
                         onClicked: {
                             _root.currentIndex = index
+                            _autoStepController.refresh()
                         }
                     }
                 }
             }
         }
 
         Image { id: _image
-            anchors.right   : parent.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] : ""
+//        }
     }
 }