diff --git a/src/activities/piano_composition/Piano.qml b/src/activities/piano_composition/Piano.qml
--- a/src/activities/piano_composition/Piano.qml
+++ b/src/activities/piano_composition/Piano.qml
@@ -59,82 +59,34 @@
     property int labelSquareSize: whiteWidth - 5
 
     Repeater {
-        id: whiteRepeater
+        id: whiteKeyRepeater
         model: whiteNotes.length
-        Rectangle {
-            id: whiteKey
+        PianoKey {
             color: "white"
-            border.color: "black"
             width: whiteWidth
             height: whiteHeight
             x: index * whiteWidth
-            Rectangle {
-                width: labelSquareSize
-                height: width
-                anchors.bottom: whiteKey.bottom
-                anchors.horizontalCenter: whiteKey.horizontalCenter
-                color: colorWhiteNotes[index]
-                anchors.margins: 4
-                border.color: "black"
-                border.width: 2
-                radius: 5
-                visible: whiteLabelsVisible
-                GCText {
-                    anchors.fill: parent
-                    text: whiteNotes[index]
-                    fontSizeMode: Text.Fit
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
-            MultiPointTouchArea {
-                anchors.fill: parent
-                onPressed: {
-                    noteClicked(index + 1)
-                    whiteKey.scale = 0.95
-                }
-                onReleased: whiteKey.scale = 1
-            }
+            labelSquareSize: piano.labelSquareSize
+            noteColor: colorWhiteNotes[index]
+            keyName: whiteNotes[index]
+            labelsVisible: whiteLabelsVisible
+            onKeyPressed: noteClicked(index + 1)
         }
     }
 
     Repeater {
-        id: blackNotesLabels
+        id: blackKeyRepeater
         model: blackNotes.length
-        Rectangle {
-            id: blackKey
+        PianoKey {
             color: "black"
-            border.color: "black"
             width: blackWidth
             height: blackHeight
             x: blacks[index] * piano.width / 184
-            Rectangle {
-                width: height
-                height: labelSquareSize
-                y: parent.height - height - 5
-                x: (blackWidth - labelSquareSize)/2
-                color: colorBlackNotes[index]
-                border.color: "black"
-                border.width: 2
-                radius: 5
-                visible: blackLabelsVisible
-                GCText {
-                    anchors.fill: parent
-                    text: blackNotes[index]
-                    fontSizeMode: Text.Fit
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-            MultiPointTouchArea {
-                anchors.fill: parent
-                onPressed: {
-                    noteClicked(-index - 1)
-                    blackKey.scale = 0.95
-                }
-                onReleased: blackKey.scale = 1
-            }
+            labelSquareSize: piano.labelSquareSize
+            noteColor: colorBlackNotes[index]
+            keyName: blackNotes[index]
+            labelsVisible: blackLabelsVisible
+            onKeyPressed: noteClicked(-index - 1)
         }
     }
 }
diff --git a/src/activities/piano_composition/PianoKey.qml b/src/activities/piano_composition/PianoKey.qml
new file mode 100644
--- /dev/null
+++ b/src/activities/piano_composition/PianoKey.qml
@@ -0,0 +1,67 @@
+/* GCompris - PianoKey.qml
+*
+* Copyright (C) 2018 Aman Kumar Gupta <gupta2140@gmail.com>
+*
+* Authors:
+*   Beth Hadley <bethmhadley@gmail.com> (GTK+ version)
+*   Johnny Jazeix <jazeix@gmail.com> (Qt Quick port)
+*   Aman Kumar Gupta <gupta2140@gmail.com>
+*
+*   This program is free software; you can redistribute it and/or modify
+*   it under the terms of the GNU General Public License as published by
+*   the Free Software Foundation; either version 3 of the License, or
+*   (at your option) any later version.
+*
+*   This program is distributed in the hope that it will be useful,
+*   but WITHOUT ANY WARRANTY; without even the implied warranty of
+*   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*   GNU General Public License for more details.
+*
+*   You should have received a copy of the GNU General Public License
+*   along with this program; if not, see <http://www.gnu.org/licenses/>.
+*/
+import QtQuick 2.1
+import GCompris 1.0
+
+import "../../core"
+
+Rectangle {
+    id: pianoKey
+
+    property string noteColor
+    property string keyName
+    property real labelSquareSize
+    property bool labelsVisible
+
+    signal keyPressed
+
+    border.color: "black"
+    Rectangle {
+        width: labelSquareSize
+        height: width
+        anchors.bottom: pianoKey.bottom
+        anchors.horizontalCenter: pianoKey.horizontalCenter
+        color: noteColor
+        anchors.margins: 4
+        border.color: "black"
+        border.width: 2
+        radius: 5
+        visible: labelsVisible
+        GCText {
+            anchors.fill: parent
+            text: keyName
+            fontSizeMode: Text.Fit
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    MultiPointTouchArea {
+        anchors.fill: parent
+        onPressed: {
+            keyPressed()
+            pianoKey.scale = 0.95
+        }
+        onReleased: pianoKey.scale = 1
+    }
+}