diff --git a/background.html b/background.html
index 3d9ff300b..bc86e1adf 100644
--- a/background.html
+++ b/background.html
@@ -74,10 +74,12 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
-    <div class='message'>{{ message }}</div>
-    <div class='buttons'>
-      <button class='cancel'>{{ cancel }}</button>
-      <button class='ok'>{{ ok }}</button>
+    <div class="modal">
+      <div class='message'>{{ message }}</div>
+      <div class='buttons'>
+        <button class='cancel'>{{ cancel }}</button>
+        <button class='ok'>{{ ok }}</button>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='attachment-preview'>
diff --git a/js/views/whisper_view.js b/js/views/whisper_view.js
index 26bff2eeb..fac15f75f 100644
--- a/js/views/whisper_view.js
+++ b/js/views/whisper_view.js
@@ -54,7 +54,7 @@
                     resolve: resolve,
                     reject: reject
                 });
-                this.$el.append(dialog.el);
+                this.$el.closest('body').append(dialog.el);
             }.bind(this));
         },
         i18n_with_link: function(message, href){
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 475c53545..4146ddf7e 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -578,17 +578,47 @@
 
 .confirmation-dialog {
   position: absolute;
-  top: $header-height;
-  padding: 1em;
-  background: white;
-  border: solid 2px $blue;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px;
 
-  .message {
-    text-align: center;
-  }
+  .modal {
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: 10px;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
 
-  button {
-    float: right;
-    margin-left: 10px;
+    .message {
+      text-align: center;
+    }
+
+    .buttons {
+      margin-top: 10px;
+
+      button {
+        float: right;
+        margin-left: 10px;
+        background-color: $grey_l;
+        border-radius: 5px;
+        outline: none;
+        padding: 5px 8px;
+        border: 1px solid darken($grey_l, 10%);
+
+        &:focus {
+          border-color: darken($grey_l, 40%);
+        }
+
+        &:hover {
+          background-color: darken($grey_l, 10%);
+          border-color: darken($grey_l, 20%);
+        }
+      }
+    }
   }
 }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d88c31cf8..e5934904e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1010,14 +1010,36 @@ input.search {
 
 .confirmation-dialog {
   position: absolute;
-  top: 36px;
-  padding: 1em;
-  background: white;
-  border: solid 2px #2090ea; }
-  .confirmation-dialog .message {
-    text-align: center; }
-  .confirmation-dialog button {
-    float: right;
-    margin-left: 10px; }
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 0 20px; }
+  .confirmation-dialog .modal {
+    max-width: 350px;
+    margin: 100px auto;
+    padding: 1em;
+    background: white;
+    border-radius: 10px;
+    overflow: auto;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); }
+    .confirmation-dialog .modal .message {
+      text-align: center; }
+    .confirmation-dialog .modal .buttons {
+      margin-top: 10px; }
+      .confirmation-dialog .modal .buttons button {
+        float: right;
+        margin-left: 10px;
+        background-color: #f3f3f3;
+        border-radius: 5px;
+        outline: none;
+        padding: 5px 8px;
+        border: 1px solid #dadada; }
+        .confirmation-dialog .modal .buttons button:focus {
+          border-color: #8d8d8d; }
+        .confirmation-dialog .modal .buttons button:hover {
+          background-color: #dadada;
+          border-color: silver; }
 
 /*# sourceMappingURL=manifest.css.map */