diff --git a/src/calls-call-display.c b/src/calls-call-display.c
index 568d8d1..dc97dcc 100644
--- a/src/calls-call-display.c
+++ b/src/calls-call-display.c
@@ -35,7 +35,7 @@
 
 struct _CallsCallDisplay
 {
-  GtkBox parent_instance;
+  GtkOverlay parent_instance;
 
   CallsCall *call;
   GTimer *timer;
@@ -51,9 +51,11 @@ struct _CallsCallDisplay
   GtkToggleButton *mute;
   GtkButton *hang_up;
   GtkToggleButton *speaker;
+
+  GtkRevealer *dial_pad_revealer;
 };
 
-G_DEFINE_TYPE (CallsCallDisplay, calls_call_display, GTK_TYPE_BOX);
+G_DEFINE_TYPE (CallsCallDisplay, calls_call_display, GTK_TYPE_OVERLAY);
 
 enum {
   PROP_0,
@@ -99,6 +101,20 @@ speaker_toggled_cb (GtkToggleButton  *togglebutton,
 }
 
 
+static void
+dial_pad_symbol_clicked_cb (CallsCallDisplay *self,
+                            gchar             symbol,
+                            HdyDialer        *dialer)
+{
+  calls_call_tone_start (self->call, symbol);
+}
+
+static void
+hide_dial_pad_clicked_cb (CallsCallDisplay *self)
+{
+  gtk_revealer_set_reveal_child (self->dial_pad_revealer, FALSE);
+}
+
 static gboolean
 timeout_cb (CallsCallDisplay *self)
 {
@@ -213,7 +229,7 @@ set_party (CallsCallDisplay *self, CallsParty *party)
   const gchar *name, *number;
 
   image = calls_party_create_image (party);
-  gtk_box_pack_start (self->party_box, image, TRUE, TRUE, 0);
+  gtk_box_pack_end (self->party_box, image, TRUE, FALSE, 0);
   gtk_image_set_pixel_size (GTK_IMAGE (image), 100);
   gtk_widget_show (image);
 
@@ -255,7 +271,7 @@ set_property (GObject      *object,
 static void
 constructed (GObject *object)
 {
-  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_BOX);
+  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_OVERLAY);
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
   self->timer = g_timer_new ();
@@ -276,7 +292,7 @@ calls_call_display_init (CallsCallDisplay *self)
 static void
 dispose (GObject *object)
 {
-  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_BOX);
+  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_OVERLAY);
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
   g_clear_object (&self->call);
@@ -287,7 +303,7 @@ dispose (GObject *object)
 static void
 finalize (GObject *object)
 {
-  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_BOX);
+  GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_OVERLAY);
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
   g_source_remove (self->timeout);
@@ -327,8 +343,11 @@ calls_call_display_class_init (CallsCallDisplayClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, mute);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, hang_up);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, speaker);
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, dial_pad_revealer);
   gtk_widget_class_bind_template_callback (widget_class, answer_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, hang_up_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, mute_toggled_cb);
   gtk_widget_class_bind_template_callback (widget_class, speaker_toggled_cb);
+  gtk_widget_class_bind_template_callback (widget_class, dial_pad_symbol_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, hide_dial_pad_clicked_cb);
 }
diff --git a/src/calls-call-display.h b/src/calls-call-display.h
index 6d099f8..9f121aa 100644
--- a/src/calls-call-display.h
+++ b/src/calls-call-display.h
@@ -33,7 +33,7 @@ G_BEGIN_DECLS
 
 #define CALLS_TYPE_CALL_DISPLAY (calls_call_display_get_type ())
 
-G_DECLARE_FINAL_TYPE (CallsCallDisplay, calls_call_display, CALLS, CALL_DISPLAY, GtkBox);
+G_DECLARE_FINAL_TYPE (CallsCallDisplay, calls_call_display, CALLS, CALL_DISPLAY, GtkOverlay);
 
 CallsCallDisplay *calls_call_display_new (CallsCallData *data);
 
diff --git a/src/ui/call-display.ui b/src/ui/call-display.ui
index c07f4c5..dd46ccd 100644
--- a/src/ui/call-display.ui
+++ b/src/ui/call-display.ui
@@ -2,170 +2,251 @@
 <!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <template class="CallsCallDisplay" parent="GtkBox">
+  <template class="CallsCallDisplay" parent="GtkOverlay">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="halign">center</property>
-    <property name="margin_bottom">8</property>
-    <property name="margin_left">12</property>
-    <property name="margin_right">12</property>
-    <property name="margin_top">8</property>
-    <property name="orientation">vertical</property>
-    <property name="valign">center</property>
-    <property name="width_request">300</property>
-    <child>
-      <object class="GtkBox" id="party_box">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkLabel" id="primary_contact_info">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="margin_top">6</property>
-            <property name="margin_bottom">6</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-              <attribute name="scale" value="1.6"/>
-            </attributes>
-          </object>
-        </child>
-        <child>
-          <object class="GtkLabel" id="secondary_contact_info">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="margin_top">4</property>
-            <property name="margin_bottom">4</property>
-          </object>
-        </child>
-      </object>
-    </child>
     <child>
       <object class="GtkBox">
-        <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">center</property>
+        <property name="margin_bottom">8</property>
+        <property name="margin_left">12</property>
+        <property name="margin_right">12</property>
+        <property name="margin_top">8</property>
         <property name="orientation">vertical</property>
+        <property name="valign">center</property>
+        <property name="visible">True</property>
+        <property name="width_request">300</property>
+        <property name="sensitive" bind-source="dial_pad_revealer" bind-property="reveal-child" bind-flags="invert-boolean|bidirectional|sync-create"/>
         <child>
-          <object class="GtkLabel" id="status">
+          <object class="GtkBox" id="party_box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="label" translatable="yes">Active</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkLabel" id="time">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label" translatable="yes">00:00</property>
-            <property name="margin_top">30</property>
-            <property name="margin_bottom">40</property>
-            <attributes>
-              <attribute name="scale" value="1.6"/>
-            </attributes>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="answer">
-            <property name="label" translatable="yes">Answer</property>
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="no_show_all">True</property>
-            <signal name="clicked" handler="answer_clicked_cb" swapped="no"/>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkLabel" id="primary_contact_info">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_top">6</property>
+                <property name="margin_bottom">6</property>
+                <attributes>
+                  <attribute name="weight" value="bold"/>
+                  <attribute name="scale" value="1.6"/>
+                </attributes>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="secondary_contact_info">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin_top">4</property>
+                <property name="margin_bottom">4</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="spacing">12</property>
-            <property name="homogeneous">True</property>
-            <property name="height_request">65</property>
-            <property name="margin_bottom">65</property>
+            <property name="orientation">vertical</property>
             <child>
-              <object class="GtkToggleButton" id="mute">
+              <object class="GtkLabel" id="status">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">Active</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="time">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">00:00</property>
+                <property name="margin_top">30</property>
+                <property name="margin_bottom">40</property>
+                <attributes>
+                  <attribute name="scale" value="1.6"/>
+                </attributes>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="answer">
+                <property name="label" translatable="yes">Answer</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
                 <property name="no_show_all">True</property>
-                <signal name="toggled" handler="mute_toggled_cb" swapped="no"/>
+                <signal name="clicked" handler="answer_clicked_cb" swapped="no"/>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="spacing">12</property>
+                <property name="homogeneous">True</property>
+                <property name="height_request">65</property>
+                <property name="margin_bottom">65</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkToggleButton" id="mute">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">microphone-sensitivity-muted-symbolic</property>
-                    <property name="icon_size">3</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="no_show_all">True</property>
+                    <signal name="toggled" handler="mute_toggled_cb" swapped="no"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">microphone-sensitivity-muted-symbolic</property>
+                        <property name="icon_size">3</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkToggleButton" id="dial_pad">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="no_show_all">True</property>
+                    <property name="active" bind-source="dial_pad_revealer" bind-property="reveal-child" bind-flags="bidirectional|sync-create"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">input-dialpad-symbolic</property>
+                        <property name="icon_size">3</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkToggleButton" id="speaker">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="no_show_all">True</property>
+                    <signal name="toggled" handler="speaker_toggled_cb" swapped="no"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">audio-volume-high-symbolic</property>
+                        <property name="icon_size">3</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
             </child>
             <child>
-              <object class="GtkToggleButton" id="dial_pad">
+              <object class="CallsEncryptionIndicator" id="encryption_indicator">
+                <property name="can_focus">False</property>
+                <property name="margin_bottom">30</property>
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="no_show_all">True</property>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">input-dialpad-symbolic</property>
-                    <property name="icon_size">3</property>
-                  </object>
-                </child>
               </object>
             </child>
             <child>
-              <object class="GtkToggleButton" id="speaker">
-                <property name="visible">True</property>
+              <object class="GtkButton" id="hang_up">
+                <property name="always_show_image">True</property>
                 <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="no_show_all">True</property>
-                <signal name="toggled" handler="speaker_toggled_cb" swapped="no"/>
+                <property name="halign">center</property>
+                <property name="height_request">65</property>
+                <property name="receives_default">False</property>
+                <property name="valign">start</property>
+                <property name="visible">True</property>
+                <property name="width_request">150</property>
+                <signal name="clicked" handler="hang_up_clicked_cb" swapped="no"/>
+                <style>
+                  <class name="destructive-action"/>
+                  <class name="image-button"/>
+                </style>
+                <child internal-child="accessible">
+                  <object class="AtkObject" id="a11y-hang-up">
+                    <property name="accessible-name" translatable="yes">Hang up</property>
+                  </object>
+                </child>
                 <child>
                   <object class="GtkImage">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">audio-volume-high-symbolic</property>
-                    <property name="icon_size">3</property>
+                    <property name="icon-name">call-stop-symbolic</property>
+                    <property name="icon-size">5</property>
                   </object>
                 </child>
               </object>
             </child>
           </object>
         </child>
+      </object>
+    </child>
+    <child type="overlay">
+      <object class="GtkRevealer" id="dial_pad_revealer">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">fill</property>
+        <property name="valign">end</property>
+        <property name="hexpand">True</property>
+        <property name="vexpand">False</property>
+        <property name="transition-type">slide-up</property>
+        <property name="reveal-child" bind-source="dial_pad" bind-property="active" bind-flags="bidirectional|sync-create"/>
         <child>
-          <object class="CallsEncryptionIndicator" id="encryption_indicator">
+          <object class="GtkActionBar">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="margin_bottom">30</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="hang_up">
-            <property name="always_show_image">True</property>
-            <property name="can_focus">True</property>
-            <property name="halign">center</property>
-            <property name="height_request">65</property>
-            <property name="receives_default">False</property>
-            <property name="valign">start</property>
-            <property name="visible">True</property>
-            <property name="width_request">150</property>
-            <signal name="clicked" handler="hang_up_clicked_cb" swapped="no"/>
             <style>
-              <class name="destructive-action"/>
-              <class name="image-button"/>
+              <class name="background"/>
             </style>
-            <child internal-child="accessible">
-              <object class="AtkObject" id="a11y-hang-up">
-                <property name="accessible-name" translatable="yes">Hang up</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkImage">
+            <child type="center">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="icon-name">call-stop-symbolic</property>
-                <property name="icon-size">5</property>
+                <property name="can_focus">False</property>
+                <property name="orientation">vertical</property>
+                <property name="width_request">300</property>
+                <property name="margin_bottom">6</property>
+                <property name="margin_top">12</property>
+                <child>
+                  <object class="HdyDialer">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="column_spacing">10</property>
+                    <property name="margin_bottom">10</property>
+                    <property name="receives_default">True</property>
+                    <property name="row_spacing">8</property>
+                    <property name="show_action_buttons">False</property>
+                    <property name="hexpand">False</property>
+                    <signal name="symbol-clicked" handler="dial_pad_symbol_clicked_cb" swapped="yes"/>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="always_show_image">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="halign">center</property>
+                    <property name="height_request">65</property>
+                    <property name="receives_default">True</property>
+                    <property name="valign">start</property>
+                    <property name="relief">none</property>
+                    <property name="visible">True</property>
+                    <property name="width_request">150</property>
+                    <signal name="clicked" handler="hide_dial_pad_clicked_cb" swapped="yes"/>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
+                    <child internal-child="accessible">
+                      <object class="AtkObject" id="a11y-hide-dial-pad">
+                        <property name="accessible-name" translatable="yes">Hide the dial pad</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="icon-name">go-down-symbolic</property>
+                        <property name="icon-size">5</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
             </child>
           </object>