diff --git a/dashboard/src/views/email.html b/dashboard/src/views/email.html
index c5806cda4..bc971adf2 100644
--- a/dashboard/src/views/email.html
+++ b/dashboard/src/views/email.html
@@ -23,7 +23,7 @@
   </div>
 </div>
 
-<!-- Modal enable email -->
+<!-- Modal add mailbox -->
 <div class="modal fade" id="mailboxAddModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -107,6 +107,41 @@
   </div>
 </div>
 
+<!-- Modal add mailinglist -->
+<div class="modal fade" id="mailinglistAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Add Mailinglist</h4>
+      </div>
+      <div class="modal-body">
+        <form name="mailinglistadd_form" role="form" ng-submit="mailinglists.add.submit()" autocomplete="off">
+          <input type="password" style="display: none;">
+          <div class="form-group" ng-class="{ 'has-error': mailinglists.add.error.statusCode === 409 }">
+            <label class="control-label">Name</label>
+            <div class="control-label" ng-show="mailinglists.add.error.statusCode === 409">
+                <small>A mailbox of list with this name already exists</small>
+              </div>
+            <div class="input-group form-inline" style="margin-top: 10px;">
+              <input type="text" class="form-control" ng-model="mailinglists.add.name" placeholder="Name" required autofocus autocomplete="off"/>
+              <div class="input-group-addon">@{{ selectedDomain.domain }}</div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="control-label">Associated Mailboxes</label><br/>
+            <multiselect ng-model="mailinglists.add.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
+          </div>
+          <input class="hide" type="submit" ng-disabled="mailinglistadd_form.$invalid || mailinglists.add.members.length === 0 || mailinglists.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="mailinglists.add.submit()" ng-disabled="mailinglistadd_form.$invalid || mailinglists.add.members.length === 0 || mailinglists.add.busy"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.add.busy"></i> Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal edit mailinglist -->
 <div class="modal fade" id="mailinglistEditModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -289,44 +324,38 @@
     <div class="row">
       <div class="col-md-12">
         Mailinglists will forward all emails to the assigned mailboxes.
+
+        <br/>
+        <br/>
+
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Mailboxes</th>
+              <th class="text-right">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="list in mailinglists.mailinglists">
+              <td class="hand" ng-click="mailinglists.edit.show(list)">
+                {{ list.name }}
+              </td>
+              <td class="hand" ng-click="mailinglists.edit.show(list)">
+                {{ list.members.join(', ') }}
+              </td>
+              <td class="text-right no-wrap">
+                <button class="btn btn-xs btn-default" ng-click="mailinglists.edit.show(list)"><i class="fa fa-pencil"></i></button>
+                <button class="btn btn-xs btn-danger" ng-click="mailinglists.remove.show(list)"><i class="fa fa-trash"></i></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <button class="btn btn-primary btn-outline pull-right" ng-click="mailinglists.add.show()">
+          <i class="fa fa-list"></i> New Mailinglist
+        </button>
       </div>
     </div>
-    <br/>
-    <table class="table table-hover">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Mailboxes</th>
-          <th class="text-right">Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr ng-repeat="list in mailinglists.mailinglists">
-          <td class="hand" ng-click="mailinglists.edit.show(list)">
-            {{ list.name }}
-          </td>
-          <td class="hand" ng-click="mailinglists.edit.show(list)">
-            {{ list.members.join(', ') }}
-          </td>
-          <td class="text-right no-wrap">
-            <button class="btn btn-xs btn-default" ng-click="mailinglists.edit.show(list)"><i class="fa fa-pencil"></i></button>
-            <button class="btn btn-xs btn-danger" ng-click="mailinglists.remove.show(list)"><i class="fa fa-trash"></i></button>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="text" class="form-control" ng-model="mailinglists.add.name" placeholder="New Mailinglist">
-            <p ng-show="mailinglists.add.error" class="text-danger"><b>{{ mailinglists.add.error }}</b></p>
-          </td>
-          <td>
-            <multiselect ng-model="mailinglists.add.members" options="name for name in mailinglists.availableMailboxNames" data-multiple="true"></multiselect>
-          </td>
-          <td class="text-right no-wrap">
-            <button class="btn btn-primary" ng-disabled="!mailinglists.add.name || !mailinglists.add.members.length || mailinglists.add.busy" ng-click="mailinglists.add.submit()"><i class="fa fa-circle-o-notch fa-spin" ng-show="mailinglists.add.busy"></i> Add</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 
   <br/>
diff --git a/dashboard/src/views/email.js b/dashboard/src/views/email.js
index 404a18036..f1ace6814 100644
--- a/dashboard/src/views/email.js
+++ b/dashboard/src/views/email.js
@@ -67,26 +67,36 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
 
         add: {
             busy: false,
-            error: '',
+            error: null,
             name: '',
             members: [],
 
+            reset: function () {
+                $scope.mailinglists.add.busy = false;
+                $scope.mailinglists.add.error = null;
+                $scope.mailinglists.add.name = '';
+                $scope.mailinglists.add.members = [];
+            },
+
+            show: function () {
+                $scope.mailinglists.add.reset();
+                $('#mailinglistAddModal').modal('show');
+            },
+
             submit: function () {
                 $scope.mailinglists.add.busy = true;
 
                 Client.addMailingList($scope.selectedDomain.domain, $scope.mailinglists.add.name, $scope.mailinglists.add.members, function (error) {
-                    $scope.mailinglists.add.busy = false;
-
                     if (error) {
-                        $scope.mailinglists.add.error = error.message;
+                        $scope.mailinglists.add.busy = false;
+                        $scope.mailinglists.add.error = error;
                         return;
                     }
 
-                    $scope.mailinglists.add.error = '';
-                    $scope.mailinglists.add.name = '';
-                    $scope.mailinglists.add.members = [];
-
+                    $scope.mailinglists.add.reset();
                     $scope.mailinglists.refresh();
+
+                    $('#mailinglistAddModal').modal('hide');
                 });
             }
         },
@@ -570,7 +580,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
     });
 
     // setup all the dialog focus handling
-    ['testEmailModal', 'mailboxAddModal', 'mailboxEditModal', 'mailinglistEditModal'].forEach(function (id) {
+    ['testEmailModal', 'mailboxAddModal', 'mailboxEditModal', 'mailinglistEditModal', 'mailinglistAddModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });