diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index eafd916ea..bd83e90fe 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -54,6 +54,29 @@
     </div>
 </div>
 
+<!-- Modal enable email -->
+<div class="modal fade" id="enableEmailModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Cloudron Email Server</h4>
+            </div>
+            <div class="modal-body" ng-show="dnsConfig.provider === 'noop'">
+                No DNS provider is setup. The Cloudron cannot create necessary DNS records automatically.
+            </div>
+            <div class="modal-body" ng-show="dnsConfig.provider !== 'noop'">
+                The Cloudron will setup Email related DNS records automatically.
+                If this domain is already configured for Email with some other provider, it will <b>overwrite</b> those records, potentially breaking the setup.
+                Disabling Cloudron Email later will <b>not</b> put the old records back.
+            </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="email.enable()">Enable</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Modal backup -->
 <div class="modal fade" id="createBackupModal" tabindex="-1" role="dialog">
     <div class="modal-dialog">
@@ -257,21 +280,18 @@
 <div class="card" style="margin-bottom: 15px;">
     <div class="row">
         <div class="col-md-12">
-            <span>Cloudron has a built-in email server that allows users to send and receive email for your domain. Apps can still send email regardless of this setting. When enabled, your DNS will be configured automatically.</span>
-        </div>
-        <br/>
-        <div class="col-md-12">
-            The <a href="https://cloudron.io/references/usermanual.html#email" target="_blank">User manual</a> has information on how to setup your mail client.
+            <p>Cloudron has a built-in email server that allows users to send and receive email for your domain. Apps can still send email regardless of this setting.</p>
+            <p>The <a href="https://cloudron.io/references/usermanual.html#email" target="_blank">User manual</a> has information on how to setup your mail client.</p>
         </div>
     </div>
     <br/>
     <div class="row">
-        <p class="col-md-12" ng-show="!config.isDev && (dnsConfig.provider === 'noop' || dnsConfig.provider === 'caas')">
+        <div class="col-md-12" ng-show="!config.isDev && (dnsConfig.provider === 'noop' || dnsConfig.provider === 'caas')">
             <b>Email can only be enabled for custom domains with a DNS provider setup.</b>
-        </p>
+        </div>
 
         <div class="col-md-12" ng-show="config.isDev || !(dnsConfig.provider === 'noop' || dnsConfig.provider === 'caas')">
-            <button ng-class="mailConfig.enabled ? 'btn btn-danger pull-right' : 'btn btn-primary pull-right'" ng-click="toggleEmail()" ng-enabled="mailConfig">{{ mailConfig.enabled ? "Disable Email" : "Enable Email" }}</button>
+            <button ng-class="mailConfig.enabled ? 'btn btn-danger pull-right' : 'btn btn-primary pull-right'" ng-click="email.toggle()" ng-enabled="mailConfig">{{ mailConfig.enabled ? "Disable Email" : "Enable Email" }}</button>
         </div>
     </div>
 </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index 08cf92ce8..c003ba6ed 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -265,6 +265,33 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    $scope.email = {
+        toggle: function () {
+            if ($scope.mailConfig.enabled) return $scope.email.disable();
+
+            // show warning first
+            $('#enableEmailModal').modal('show');
+        },
+
+        enable: function () {
+            $('#enableEmailModal').modal('hide');
+
+            Client.setMailConfig({ enabled: true }, function (error) {
+                if (error) return console.error(error);
+
+                $scope.mailConfig.enabled = true;
+            });
+        },
+
+        disable: function () {
+            Client.setMailConfig({ enabled: false }, function (error) {
+                if (error) return console.error(error);
+
+                $scope.mailConfig.enabled = false;
+            });
+        }
+    };
+
     $scope.configureBackup = {
         busy: false,
         error: {},
@@ -396,14 +423,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     }
 
-    $scope.toggleEmail = function () {
-        Client.setMailConfig({ enabled: !$scope.mailConfig.enabled }, function (error) {
-            if (error) return console.error(error);
-
-            $scope.mailConfig.enabled = !$scope.mailConfig.enabled;
-        });
-    };
-
     function getPlans() {
         AppStore.getSizes(function (error, result) {
             if (error) return console.error(error);