diff --git a/shell/contents/components/DialerButton.qml b/shell/contents/components/DialerButton.qml
new file mode 100644
index 00000000..d37e5012
--- /dev/null
+++ b/shell/contents/components/DialerButton.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+Text {
+    width: parent.width / parent.columns
+    height: parent.buttonHeight
+    horizontalAlignment: Qt.AlignHCenter
+    verticalAlignment: Qt.AlignVCenter
+    font.pixelSize: Math.floor((width - (units.largeSpacing)) / 2)
+    property alias sub: longHold.text;
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            addNumber(parent.text);
+        }
+
+        onPressAndHold: {
+            if (longHold.visible) {
+                addNumber(longHold.text);
+            } else {
+                addNumber(parent.text);
+            }
+        }
+    }
+
+    Text {
+        id: longHold
+        visible: text.length > 0
+        opacity: 0.7
+        height: parent.height
+        width: parent.width / 3
+        verticalAlignment: Qt.AlignVCenter
+        anchors {
+            top: parent.top
+            right: parent.right
+        }
+
+        font.pixelSize: parent.pixelSize * .8
+    }
+}
diff --git a/shell/contents/components/DialerIconButton.qml b/shell/contents/components/DialerIconButton.qml
new file mode 100644
index 00000000..48db47ed
--- /dev/null
+++ b/shell/contents/components/DialerIconButton.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+Item {
+    width: parent.width / parent.columns
+    height: parent.buttonHeight
+    property var callback
+    property string text
+    property string sub
+    property alias source: icon.source
+
+    PlasmaCore.IconItem {
+        id: icon
+        width: units.iconSizes.medium
+        height: width
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (callback) {
+                callback();
+            } else {
+                addNumber(parent.text);
+            }
+        }
+
+        onPressAndHold: {
+            if (longHold.visible) {
+                addNumber(longHold.text);
+            } else {
+                addNumber(parent.text);
+            }
+        }
+    }
+}
diff --git a/shell/contents/components/DialerSvgButton.qml b/shell/contents/components/DialerSvgButton.qml
new file mode 100644
index 00000000..90835b6a
--- /dev/null
+++ b/shell/contents/components/DialerSvgButton.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+Item {
+    width: parent.width / parent.columns
+    height: parent.buttonHeight
+    property var callback
+    property string text
+    property string sub
+    property alias svg: icon.svg
+
+    PlasmaCore.SvgItem{
+        id: icon
+        width: units.iconSizes.medium
+        height: width
+        anchors.centerIn: parent
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (callback) {
+                callback();
+            } else {
+                addNumber(parent.text);
+            }
+        }
+
+        onPressAndHold: {
+            if (longHold.visible) {
+                addNumber(longHold.text);
+            } else {
+                addNumber(parent.text);
+            }
+        }
+    }
+}
diff --git a/shell/contents/views/Dialer.qml b/shell/contents/views/Dialer.qml
new file mode 100644
index 00000000..ef95015a
--- /dev/null
+++ b/shell/contents/views/Dialer.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+import "../components"
+
+Rectangle {
+    id: dialer
+    anchors.fill: parent;
+    color: "white"
+    opacity: 0.5
+
+    property bool calling: false // needs to be connected to a system service
+    property bool enableButtons: calling
+
+    function addNumber(number) {
+        status.text = status.text + number
+    }
+
+    function call() {
+        if (!calling) {
+            console.log("Calling: " + status.text);
+        } else {
+            console.log("Hanging up: " + status.text);
+            status.text = '';
+        }
+
+        dialer.calling = !dialer.calling;
+    }
+
+    function fromContacts() {
+        console.log("Should get from contacts!");
+        status.text = "+41 76 555 5555"
+    }
+
+    Text {
+        id: status
+        height: parent.height / 6
+        width: parent.width
+        horizontalAlignment: Qt.AlignRight
+        verticalAlignment: Qt.AlignVCenter
+        font.pixelSize: one.font.pixelSize
+    }
+
+    Grid {
+        id: pad
+        columns: 3
+        spacing: 0
+        property int buttonHeight: height / 5
+        anchors {
+            top: status.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        height: parent.height - status.height
+        width: parent.width
+
+        DialerButton { id: one; text: "1" } 
+        DialerButton { text: "2" }
+        DialerButton { text: "3" }
+
+        DialerButton { text: "4" } 
+        DialerButton { text: "5" }
+        DialerButton { text: "6" }
+
+        DialerButton { text: "7" } 
+        DialerButton { text: "8" }
+        DialerButton { text: "9" }
+
+        DialerButton { text: "*"; } 
+        DialerButton { text: "0"; sub: "+"; }
+        DialerButton { text: "#" }
+
+        DialerIconButton {
+            source: "im-user"
+            callback: fromContacts
+        }
+        DialerIconButton {
+            id: callButton
+            source: dialer.calling ? "call-stop" : "call-start"
+            callback: call
+        }
+        DialerIconButton { 
+            source: "edit-clear"
+            callback: function() { status.text = status.text.substr(0, status.text.length - 1); }
+        }
+        //DialerSvgButton { svg: PlasmaCore.Svg { imagePath: "edit-clear.svg" } }
+    }
+}