Index: src/activities/lightsoff/Lightsoff.qml
===================================================================
--- src/activities/lightsoff/Lightsoff.qml
+++ src/activities/lightsoff/Lightsoff.qml
@@ -39,6 +39,8 @@
         signal start
         signal stop
 
+        property bool keyNavigationVisible: false
+
         Component.onCompleted: {
             activity.start.connect(start)
             activity.stop.connect(stop)
@@ -53,6 +55,7 @@
             property alias bonus: bonus
             property alias skyColor: background.color
             property alias modelTable: modelTable
+            property bool blockClicks: false
             property int nbCell: 5
             property int cellSize: Math.min(
                                        (parent.height - 200) / items.nbCell,
@@ -67,6 +70,21 @@
             Activity.stop()
         }
 
+        Keys.enabled: !items.blockClicks
+        Keys.onPressed: {
+            background.keyNavigationVisible = true
+            if (event.key === Qt.Key_Left)
+                grid.moveCurrentIndexLeft()
+            if (event.key === Qt.Key_Right)
+                grid.moveCurrentIndexRight()
+            if (event.key === Qt.Key_Down)
+                grid.moveCurrentIndexDown()
+            if (event.key === Qt.Key_Up)
+                grid.moveCurrentIndexUp()
+            if (event.key === Qt.Key_Space || event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
+                Activity.windowPressed(grid.currentIndex)
+        }
+
         /* The background picture */
         Image {
             source: Activity.url + "back.svg"
@@ -138,71 +156,81 @@
             z: 4
         }
 
-        Grid {
+        GridView {
             id: grid
             anchors.top: parent.top
-            anchors.topMargin: (parent.height - height) / 2
+            anchors.topMargin: (parent.height - height) / 6
             anchors.horizontalCenter: parent.horizontalCenter
-            rows: items.nbCell
-            columns: items.nbCell
-            spacing: items.cellSize / 10
+            width: items.nbCell * items.cellSize
+            height: width
+            cellWidth: items.cellSize
+            cellHeight: items.cellSize
             z: 5
 
             ListModel {
                 id: modelTable
             }
 
-            Repeater {
-                model: modelTable
-                Rectangle {
-                    color: "transparent"
-                    height: items.cellSize
-                    width: items.cellSize
-                    border {
-                        color: soluce === 1 ? "red" : "transparent"
-                        width: items.cellSize / 40
-                    }
-                    radius: items.cellSize / 10
-
-                    BarButton {
-                        anchors.fill: parent
-                        fillMode: Image.PreserveAspectFit
-                        source: Activity.url + "on.svg"
-                        opacity: lighton === 1 ? 1 : 0
-                        z: lighton === 1 ? 11 : 10
-                        sourceSize.height: items.cellSize
-                        onClicked: {
-                            activity.audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav')
-                            Activity.switchLight(index)
-                        }
-                        Behavior on opacity {
-                            PropertyAnimation {
-                                duration: 200
-                            }
+            model: modelTable
+
+            delegate: Rectangle {
+                color: "transparent"
+                height: items.cellSize
+                width: items.cellSize
+                border {
+                    color: soluce === 1 ? "red" : "transparent"
+                    width: items.cellSize / 40
+                }
+                radius: items.cellSize / 10
+
+                BarButton {
+                    anchors.fill: parent
+                    fillMode: Image.PreserveAspectFit
+                    source: Activity.url + "on.svg"
+                    opacity: lighton === 1 ? 1 : 0
+                    z: lighton === 1 ? 11 : 10
+                    sourceSize.height: items.cellSize
+                    mouseArea.hoverEnabled: !items.blockClicks
+                    mouseArea.enabled: !items.blockClicks
+                    Behavior on opacity {
+                        PropertyAnimation {
+                            duration: 200
                         }
-                        visible: true
                     }
+                    onClicked: Activity.windowPressed(index)
+                    visible: true
+                }
 
-                    BarButton {
-                        anchors.fill: parent
-                        fillMode: Image.PreserveAspectFit
-                        source: Activity.url + "off.svg"
-                        opacity: lighton === 1 ? 0 : 1
-                        z: lighton === 1 ? 10 : 11
-                        sourceSize.height: items.cellSize
-                        onClicked: {
-                            activity.audioEffects.play('qrc:/gcompris/src/core/resource/sounds/scroll.wav')
-                            Activity.switchLight(index)
+                BarButton {
+                    anchors.fill: parent
+                    fillMode: Image.PreserveAspectFit
+                    source: Activity.url + "off.svg"
+                    opacity: lighton === 1 ? 0 : 1
+                    z: lighton === 1 ? 10 : 11
+                    sourceSize.height: items.cellSize
+                    mouseArea.hoverEnabled: !items.blockClicks
+                    mouseArea.enabled: !items.blockClicks
+                    Behavior on opacity {
+                        PropertyAnimation {
+                            duration: 200
                         }
-                        Behavior on opacity {
-                            PropertyAnimation {
-                                duration: 200
-                            }
-                        }
-                        visible: true
                     }
+                    onClicked: Activity.windowPressed(index)
+                    visible: true
                 }
             }
+            interactive: false
+            keyNavigationWraps: true
+            highlightFollowsCurrentItem: true
+            highlight: Rectangle {
+                width: items.cellSize
+                height: items.cellSize
+                color: "#AAFFFFFF"
+                radius: items.cellSize / 10
+                visible: background.keyNavigationVisible
+                Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
+                Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
+            }
         }
 
         DialogHelp {
@@ -226,6 +254,7 @@
 
         Bonus {
             id: bonus
+            onStop: items.blockClicks = false
             Component.onCompleted: win.connect(Activity.nextLevel)
         }
     }
Index: src/activities/lightsoff/lightsoff.js
===================================================================
--- src/activities/lightsoff/lightsoff.js
+++ src/activities/lightsoff/lightsoff.js
@@ -245,6 +245,7 @@
     })
 
     if (nb === 0) {
+        items.blockClicks  = true
         items.bonus.good("tux")
     }
 
@@ -260,3 +261,8 @@
     /* Refresh the lights */
     refreshModel()
 }
+
+function windowPressed(index) {
+    audioEffects.play("'qrc:/gcompris/src/core/resource/sounds/scroll.wav'")
+    switchLight(index)
+}
Index: src/core/BarButton.qml
===================================================================
--- src/core/BarButton.qml
+++ src/core/BarButton.qml
@@ -33,6 +33,8 @@
     id: button
     state: "notclicked"
 
+    property alias mouseArea: mouseArea
+
     signal clicked
 
     MouseArea {