diff --git a/framework/core/js/admin/dist/app.js b/framework/core/js/admin/dist/app.js
index 37e2f47a6..8b0e472d2 100644
--- a/framework/core/js/admin/dist/app.js
+++ b/framework/core/js/admin/dist/app.js
@@ -17293,6 +17293,13 @@ System.register('flarum/components/AdminNav', ['flarum/Component', 'flarum/compo
               description: app.translator.trans('core.admin.nav.extensions_text')
             }));
 
+            items.add('mail', AdminLinkButton.component({
+              href: app.route('mail'),
+              icon: 'envelope',
+              children: app.translator.trans('core.admin.nav.mail_button'),
+              description: app.translator.trans('core.admin.nav.mail_text')
+            }));
+
             return items;
           }
         }]);
@@ -18928,6 +18935,173 @@ System.register('flarum/components/LoadingModal', ['flarum/components/Modal'], f
 });;
 'use strict';
 
+System.register('flarum/components/MailPage', ['flarum/components/Page', 'flarum/components/FieldSet', 'flarum/components/Button', 'flarum/components/Alert', 'flarum/utils/saveSettings'], function (_export, _context) {
+  var Page, FieldSet, Button, Alert, saveSettings, MailPage;
+  return {
+    setters: [function (_flarumComponentsPage) {
+      Page = _flarumComponentsPage.default;
+    }, function (_flarumComponentsFieldSet) {
+      FieldSet = _flarumComponentsFieldSet.default;
+    }, function (_flarumComponentsButton) {
+      Button = _flarumComponentsButton.default;
+    }, function (_flarumComponentsAlert) {
+      Alert = _flarumComponentsAlert.default;
+    }, function (_flarumUtilsSaveSettings) {
+      saveSettings = _flarumUtilsSaveSettings.default;
+    }],
+    execute: function () {
+      MailPage = function (_Page) {
+        babelHelpers.inherits(MailPage, _Page);
+
+        function MailPage() {
+          babelHelpers.classCallCheck(this, MailPage);
+          return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(MailPage).apply(this, arguments));
+        }
+
+        babelHelpers.createClass(MailPage, [{
+          key: 'init',
+          value: function init() {
+            var _this2 = this;
+
+            babelHelpers.get(Object.getPrototypeOf(MailPage.prototype), 'init', this).call(this);
+
+            this.loading = false;
+
+            this.fields = ['mail_driver', 'mail_host', 'mail_from', 'mail_port', 'mail_username', 'mail_password', 'mail_encryption'];
+            this.values = {};
+
+            var settings = app.settings;
+            this.fields.forEach(function (key) {
+              return _this2.values[key] = m.prop(settings[key]);
+            });
+
+            this.localeOptions = {};
+            var locales = app.locales;
+            for (var i in locales) {
+              this.localeOptions[i] = locales[i] + ' (' + i + ')';
+            }
+          }
+        }, {
+          key: 'view',
+          value: function view() {
+            return m(
+              'div',
+              { className: 'MailPage' },
+              m(
+                'div',
+                { className: 'container' },
+                m(
+                  'form',
+                  { onsubmit: this.onsubmit.bind(this) },
+                  FieldSet.component({
+                    label: app.translator.trans('core.admin.mail.heading'),
+                    className: 'MailPage-MailSettings',
+                    children: [m(
+                      'div',
+                      { className: 'helpText' },
+                      app.translator.trans('core.admin.mail.text')
+                    ), m(
+                      'div',
+                      { className: 'MailPage-MailSettings-input' },
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.driver')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_driver() || '', oninput: m.withAttr('value', this.values.mail_driver) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.host')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_host() || '', oninput: m.withAttr('value', this.values.mail_host) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.from')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_from() || '', oninput: m.withAttr('value', this.values.mail_from) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.port')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_port() || '', oninput: m.withAttr('value', this.values.mail_port) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.username')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_username() || '', oninput: m.withAttr('value', this.values.mail_username) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.password')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_password() || '', oninput: m.withAttr('value', this.values.mail_password) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.encryption')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_encryption() || '', oninput: m.withAttr('value', this.values.mail_encryption) })
+                    )]
+                  }),
+                  Button.component({
+                    type: 'submit',
+                    className: 'Button Button--primary',
+                    children: app.translator.trans('core.admin.mail.submit_button'),
+                    loading: this.loading,
+                    disabled: !this.changed()
+                  })
+                )
+              )
+            );
+          }
+        }, {
+          key: 'changed',
+          value: function changed() {
+            var _this3 = this;
+
+            return this.fields.some(function (key) {
+              return _this3.values[key]() !== app.settings[key];
+            });
+          }
+        }, {
+          key: 'onsubmit',
+          value: function onsubmit(e) {
+            var _this4 = this;
+
+            e.preventDefault();
+
+            if (this.loading) return;
+
+            this.loading = true;
+            app.alerts.dismiss(this.successAlert);
+
+            var settings = {};
+
+            this.fields.forEach(function (key) {
+              return settings[key] = _this4.values[key]();
+            });
+
+            saveSettings(settings).then(function () {
+              app.alerts.show(_this4.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }));
+            }).catch(function () {}).then(function () {
+              _this4.loading = false;
+              m.redraw();
+            });
+          }
+        }]);
+        return MailPage;
+      }(Page);
+
+      _export('default', MailPage);
+    }
+  };
+});;
+'use strict';
+
 System.register('flarum/components/Modal', ['flarum/Component', 'flarum/components/Alert', 'flarum/components/Button'], function (_export, _context) {
   var Component, Alert, Button, Modal;
   return {
@@ -20946,8 +21120,8 @@ System.register('flarum/initializers/preload', ['flarum/Session'], function (_ex
 });;
 'use strict';
 
-System.register('flarum/initializers/routes', ['flarum/components/DashboardPage', 'flarum/components/BasicsPage', 'flarum/components/PermissionsPage', 'flarum/components/AppearancePage', 'flarum/components/ExtensionsPage'], function (_export, _context) {
-  var DashboardPage, BasicsPage, PermissionsPage, AppearancePage, ExtensionsPage;
+System.register('flarum/initializers/routes', ['flarum/components/DashboardPage', 'flarum/components/BasicsPage', 'flarum/components/PermissionsPage', 'flarum/components/AppearancePage', 'flarum/components/ExtensionsPage', 'flarum/components/MailPage'], function (_export, _context) {
+  var DashboardPage, BasicsPage, PermissionsPage, AppearancePage, ExtensionsPage, MailPage;
 
   _export('default', function (app) {
     app.routes = {
@@ -20955,7 +21129,8 @@ System.register('flarum/initializers/routes', ['flarum/components/DashboardPage'
       'basics': { path: '/basics', component: BasicsPage.component() },
       'permissions': { path: '/permissions', component: PermissionsPage.component() },
       'appearance': { path: '/appearance', component: AppearancePage.component() },
-      'extensions': { path: '/extensions', component: ExtensionsPage.component() }
+      'extensions': { path: '/extensions', component: ExtensionsPage.component() },
+      'mail': { path: '/mail', component: MailPage.component() }
     };
   });
 
@@ -20970,6 +21145,8 @@ System.register('flarum/initializers/routes', ['flarum/components/DashboardPage'
       AppearancePage = _flarumComponentsAppearancePage.default;
     }, function (_flarumComponentsExtensionsPage) {
       ExtensionsPage = _flarumComponentsExtensionsPage.default;
+    }, function (_flarumComponentsMailPage) {
+      MailPage = _flarumComponentsMailPage.default;
     }],
     execute: function () {}
   };
diff --git a/framework/core/js/admin/src/components/AdminNav.js b/framework/core/js/admin/src/components/AdminNav.js
index 240872467..436f44296 100644
--- a/framework/core/js/admin/src/components/AdminNav.js
+++ b/framework/core/js/admin/src/components/AdminNav.js
@@ -67,6 +67,13 @@ export default class AdminNav extends Component {
       description: app.translator.trans('core.admin.nav.extensions_text')
     }));
 
+    items.add('mail', AdminLinkButton.component({
+      href: app.route('mail'),
+      icon: 'envelope',
+      children: app.translator.trans('core.admin.nav.mail_button'),
+      description: app.translator.trans('core.admin.nav.mail_text')
+    }))
+
     return items;
   }
 }
diff --git a/framework/core/js/admin/src/components/MailPage.js b/framework/core/js/admin/src/components/MailPage.js
new file mode 100644
index 000000000..3c7788d65
--- /dev/null
+++ b/framework/core/js/admin/src/components/MailPage.js
@@ -0,0 +1,104 @@
+import Page from 'flarum/components/Page';
+import FieldSet from 'flarum/components/FieldSet';
+import Button from 'flarum/components/Button';
+import Alert from 'flarum/components/Alert';
+import saveSettings from 'flarum/utils/saveSettings';
+
+export default class MailPage extends Page {
+  init() {
+    super.init();
+
+    this.loading = false;
+
+    this.fields = [
+      'mail_driver',
+      'mail_host',
+      'mail_from',
+      'mail_port',
+      'mail_username',
+      'mail_password',
+      'mail_encryption'
+    ];
+    this.values = {};
+
+    const settings = app.settings;
+    this.fields.forEach(key => this.values[key] = m.prop(settings[key]));
+
+    this.localeOptions = {};
+    const locales = app.locales;
+    for (const i in locales) {
+      this.localeOptions[i] = `${locales[i]} (${i})`;
+    }
+  }
+
+  view() {
+    return (
+      <div className="MailPage">
+        <div className="container">
+          <form onsubmit={this.onsubmit.bind(this)}>
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.mail.heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="helpText">
+                  {app.translator.trans('core.admin.mail.text')}
+                </div>,
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.mail.driver')}</label>
+                  <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} />
+                  <label>{app.translator.trans('core.admin.mail.host')}</label>
+                  <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} />
+                  <label>{app.translator.trans('core.admin.mail.from')}</label>
+                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
+                  <label>{app.translator.trans('core.admin.mail.port')}</label>
+                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
+                  <label>{app.translator.trans('core.admin.mail.username')}</label>
+                  <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} />
+                  <label>{app.translator.trans('core.admin.mail.password')}</label>
+                  <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} />
+                  <label>{app.translator.trans('core.admin.mail.encryption')}</label>
+                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
+                </div>
+              ]
+            })}
+
+            {Button.component({
+              type: 'submit',
+              className: 'Button Button--primary',
+              children: app.translator.trans('core.admin.mail.submit_button'),
+              loading: this.loading,
+              disabled: !this.changed()
+            })}
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  changed() {
+    return this.fields.some(key => this.values[key]() !== app.settings[key]);
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    if (this.loading) return;
+
+    this.loading = true;
+    app.alerts.dismiss(this.successAlert);
+
+    const settings = {};
+
+    this.fields.forEach(key => settings[key] = this.values[key]());
+
+    saveSettings(settings)
+      .then(() => {
+        app.alerts.show(this.successAlert = new Alert({type: 'success', children: app.translator.trans('core.admin.basics.saved_message')}));
+      })
+      .catch(() => {})
+      .then(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}
diff --git a/framework/core/js/admin/src/initializers/routes.js b/framework/core/js/admin/src/initializers/routes.js
index 5a5a416ae..29b7ffc3b 100644
--- a/framework/core/js/admin/src/initializers/routes.js
+++ b/framework/core/js/admin/src/initializers/routes.js
@@ -3,6 +3,7 @@ import BasicsPage from 'flarum/components/BasicsPage';
 import PermissionsPage from 'flarum/components/PermissionsPage';
 import AppearancePage from 'flarum/components/AppearancePage';
 import ExtensionsPage from 'flarum/components/ExtensionsPage';
+import MailPage from 'flarum/components/MailPage';
 
 /**
  * The `routes` initializer defines the admin app's routes.
@@ -15,6 +16,7 @@ export default function(app) {
     'basics': {path: '/basics', component: BasicsPage.component()},
     'permissions': {path: '/permissions', component: PermissionsPage.component()},
     'appearance': {path: '/appearance', component: AppearancePage.component()},
-    'extensions': {path: '/extensions', component: ExtensionsPage.component()}
+    'extensions': {path: '/extensions', component: ExtensionsPage.component()},
+    'mail': {path: '/mail', component: MailPage.component()}
   };
 }
diff --git a/framework/core/less/admin/MailPage.less b/framework/core/less/admin/MailPage.less
new file mode 100644
index 000000000..10ed97add
--- /dev/null
+++ b/framework/core/less/admin/MailPage.less
@@ -0,0 +1,35 @@
+.MailPage {
+  padding: 20px 0;
+
+  @media @desktop-up {
+    .container {
+      max-width: 600px;
+      margin: 0;
+    }
+  }
+
+  fieldset {
+    margin-bottom: 30px;
+
+    > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+.MailPage-MailSettings-input {
+
+  label {
+    margin-bottom: 5px;
+  }
+
+  .FormControl {
+    margin-bottom: 7px;
+  }
+
+  :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/framework/core/less/admin/app.less b/framework/core/less/admin/app.less
index 021cb346d..b16fb9c10 100644
--- a/framework/core/less/admin/app.less
+++ b/framework/core/less/admin/app.less
@@ -7,3 +7,4 @@
 @import "EditGroupModal.less";
 @import "ExtensionsPage.less";
 @import "AppearancePage.less";
+@import "MailPage.less";