diff --git a/dialer/package/contents/ui/Dialer/Dialer.qml b/dialer/package/contents/ui/Dialer/Dialer.qml
--- a/dialer/package/contents/ui/Dialer/Dialer.qml
+++ b/dialer/package/contents/ui/Dialer/Dialer.qml
@@ -49,19 +49,17 @@
 
     ColumnLayout {
         id: dialPadArea
-
-        anchors {
-            fill: parent
-            margins: units.largeSpacing
-        }
+        anchors.fill: parent
 
         PhoneNumberInput {
             id: status
 
             Layout.fillWidth: true
-            Layout.minimumHeight: units.gridUnit * 3.5
+            Layout.topMargin: units.largeSpacing * 3
+            Layout.bottomMargin: units.largeSpacing
+            Layout.minimumHeight: units.gridUnit * 3
             Layout.maximumHeight: Layout.minimumHeight
-            font.pointSize: 30
+            font.pixelSize: units.gridUnit * 2.3
         }
 
         Dialpad {
@@ -71,12 +69,15 @@
             callback: function (string) {
                 status.append(string)
             }
+            deleteCallback: function () {
+                status.pop()
+            }
             pressedCallback: function (string) {
-                //TODO
-//                 ofonoWrapper.startTone(string);
+                // TODO
+                // ofonoWrapper.startTone(string);
             }
             releasedCallback: function (string) {
-//                 ofonoWrapper.stopTone();
+                // ofonoWrapper.stopTone();
             }
         }
     }
diff --git a/dialer/package/contents/ui/Dialpad/DialerButton.qml b/dialer/package/contents/ui/Dialpad/DialerButton.qml
--- a/dialer/package/contents/ui/Dialpad/DialerButton.qml
+++ b/dialer/package/contents/ui/Dialpad/DialerButton.qml
@@ -89,11 +89,9 @@
         PlasmaComponents.Label {
             id: main
 
+            font.pixelSize: units.gridUnit * 2
             text: root.display || root.text
             opacity: special? 0.4 : 1.0
-            // anything higher for some reason makes number 4 not rendered
-            font.pointSize: 30
-            fontSizeMode: Text.VerticalFit
             Layout.minimumWidth: parent.width
             horizontalAlignment: Text.AlignHCenter
         }
@@ -103,8 +101,6 @@
 
             text: root.subdisplay || root.sub
             opacity: 0.4
-            font.pointSize: 16
-            fontSizeMode: Text.VerticalFit
             Layout.minimumWidth: parent.width
             horizontalAlignment: Text.AlignHCenter
         }
diff --git a/dialer/package/contents/ui/Dialpad/DialerIconButton.qml b/dialer/package/contents/ui/Dialpad/DialerIconButton.qml
--- a/dialer/package/contents/ui/Dialpad/DialerIconButton.qml
+++ b/dialer/package/contents/ui/Dialpad/DialerIconButton.qml
@@ -35,6 +35,7 @@
     property string sub
     property alias source: icon.source
     property alias text: label.text
+    property int size
 
     Rectangle {
         anchors.fill: parent
@@ -56,13 +57,12 @@
             id: icon
             anchors.verticalCenter: parent.verticalCenter
             width: height
-            height: units.gridUnit * 3.5
+            height: buttonRoot.size || buttonRoot.height * 0.6
         }
         PlasmaComponents.Label {
             id: label
             height: buttonRoot.height
             anchors.verticalCenter: parent.verticalCenter
-            font.pointSize: 1024
             fontSizeMode: Text.VerticalFit
         }
     }
diff --git a/dialer/package/contents/ui/Dialpad/Dialpad.qml b/dialer/package/contents/ui/Dialpad/Dialpad.qml
--- a/dialer/package/contents/ui/Dialpad/Dialpad.qml
+++ b/dialer/package/contents/ui/Dialpad/Dialpad.qml
@@ -19,19 +19,22 @@
  */
 
 import QtQuick 2.0
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.2
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
 GridLayout {
     id: pad
     columns: 3
     rowSpacing: 10
     columnSpacing: 10
+    Layout.leftMargin: units.largeSpacing * 2
+    Layout.rightMargin: units.largeSpacing * 2
 
     property var callback
     property var pressedCallback
     property var releasedCallback
+    property var deleteCallback
 
     DialerButton { id: one; text: "1" }
     DialerButton { text: "2"; sub: "ABC" }
@@ -61,12 +64,20 @@
         enabled: status.text.length > 0
         opacity: enabled ? 1 : 0.5
         source: "call-start"
+        size: units.gridUnit * 3
         callback: function() {
             call(status.text);
         }
     }
-    Item {
+    DialerIconButton {
+        id: delButton
         Layout.fillWidth: true
         Layout.fillHeight: true
+
+        enabled: status.text.length > 0
+        opacity: enabled ? 1 : 0.5
+        source: "edit-clear"
+        size: units.gridUnit * 2
+        callback: pad.deleteCallback
     }
 }
diff --git a/dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml b/dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml
--- a/dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml
+++ b/dialer/package/contents/ui/Dialpad/PhoneNumberInput.qml
@@ -4,6 +4,7 @@
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 
+// TODO: search through contacts while typing
 PlasmaComponents.TextField {
     id: root
 
@@ -16,47 +17,18 @@
         }
     }
 
+    // append some text to the end of this input
     signal append(string digit)
     onAppend: {
         text += digit
     }
     onTextChanged: {
         text = dialerUtils.formatNumber(text);
     }
 
-    // TODO: search through contacts while typing
-
-    Row {
-        anchors {
-            right: parent.right
-            rightMargin: 6
-            verticalCenter: parent.verticalCenter
-        }
-
-        PlasmaCore.IconItem {
-            id: delBtn
-            // ltr confusingly refers to the direction of the arrow in the icon,
-            // not the text direction which it should be used in.
-            source: LayoutMirroring.enabled ?
-                    "edit-clear-locationbar-ltr" : "edit-clear-locationbar-rtl"
-            height: Math.max(root.height * 0.8, units.iconSizes.small)
-            width: height
-            opacity: (root.length > 0 && root.enabled) ? 1 : 0
-            visible: opacity > 0
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: units.longDuration
-                    easing.type: Easing.InOutQuad
-                }
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    if (text.length > 0) {
-                        text = text.slice(0, -1);
-                    }
-                }
-            }
-        }
+    // remove last character from this text input
+    signal pop()
+    onPop: {
+        text = text.slice(0, -1)
     }
 }