diff --git a/dashboard/src/views/email.html b/dashboard/src/views/email.html
index 58cd49497..576cee548 100644
--- a/dashboard/src/views/email.html
+++ b/dashboard/src/views/email.html
@@ -23,6 +23,38 @@
   </div>
 </div>
 
+<!-- Modal enable email -->
+<div class="modal fade" id="mailboxAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Add Mailbox</h4>
+      </div>
+      <div class="modal-body">
+        <form name="mailboxadd_form" role="form" ng-submit="mailboxes.add.submit()" autocomplete="off">
+          <input type="password" style="display: none;">
+          <div class="form-group">
+              <label class="control-label">Name</label>
+              <div class="input-group form-inline" style="margin-top: 10px;">
+                  <input type="text" class="form-control" ng-model="mailboxes.add.name" placeholder="Name" required/>
+                  <div class="input-group-addon">@{{ selectedDomain.domain }}</div>
+                </div>
+            </div>
+          <div class="form-group">
+            <label class="control-label">Owner</label>
+            <select class="form-control" ng-model="mailboxes.add.owner" ng-options="u.display for u in users track by u.id"></select>
+          </div>
+          <input class="hide" type="submit" ng-disabled="mailboxadd_form.$invalid || mailboxes.add.busy"/>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success" ng-click="mailboxes.add.submit()" ng-disabled="mailboxadd_form.$invalid || mailboxes.add.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.add.busy"></i> Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal edit mailbox -->
 <div class="modal fade" id="mailboxEditModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -238,23 +270,11 @@
                 <button class="btn btn-xs btn-danger" ng-click="mailboxes.remove.show(mailbox)"><i class="fa fa-trash"></i></button>
               </td>
             </tr>
-            <tr>
-              <td>
-                <input type="text" class="form-control" ng-model="mailboxes.add.name" placeholder="New mailbox">
-                <p ng-show="mailboxes.add.error" class="text-danger"><b>{{ mailboxes.add.error }}</b></p>
-              </td>
-              <td class="text-left elide-table-cell">
-                <select class="form-control" ng-model="mailboxes.add.owner" ng-options="u.display for u in users track by u.id"></select>
-              </td>
-              <td>
-                &nbsp;
-              </td>
-              <td class="text-right no-wrap">
-                <button class="btn btn-primary" ng-disabled="!mailboxes.add.name || !mailboxes.add.owner || mailboxes.add.busy" ng-click="mailboxes.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailboxes.add.busy"></i> Add</button>
-              </td>
-            </tr>
           </tbody>
         </table>
+        <button class="btn btn-primary btn-outline pull-right" ng-click="mailboxes.add.show()">
+          <i class="fa fa-inbox"></i> New Mailbox
+        </button>
       </div>
     </div>
   </div>
diff --git a/dashboard/src/views/email.js b/dashboard/src/views/email.js
index 6156b4925..ee26263f8 100644
--- a/dashboard/src/views/email.js
+++ b/dashboard/src/views/email.js
@@ -192,27 +192,37 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
         mailboxes: [],
 
         add: {
-            error: '',
+            error: null,
             busy: false,
             name: '',
             owner: null,
 
+            reset: function () {
+                $scope.mailboxes.add.busy = false;
+                $scope.mailboxes.add.error = null;
+                $scope.mailboxes.add.name = '';
+                $scope.mailboxes.add.owner = null;
+            },
+
+            show: function () {
+                $scope.mailboxes.add.reset();
+                $('#mailboxAddModal').modal('show');
+            },
+
             submit: function () {
                 $scope.mailboxes.add.busy = true;
 
                 Client.addMailbox($scope.selectedDomain.domain, $scope.mailboxes.add.name, $scope.mailboxes.add.owner.id, function (error) {
-                    $scope.mailboxes.add.busy = false;
-
                     if (error) {
+                        $scope.mailboxes.add.busy = false;
                         $scope.mailboxes.add.error = error.message;
                         return;
                     }
 
-                    $scope.mailboxes.add.error = '';
-                    $scope.mailboxes.add.name = '';
-                    $scope.mailboxes.add.owner = null;
-
+                    $scope.mailboxes.add.reset();
                     $scope.mailboxes.refresh();
+
+                    $('#mailboxAddModal').modal('hide');
                 });
             }
         },