diff --git a/framework/core/js/src/admin/components/MailPage.js b/framework/core/js/src/admin/components/MailPage.js
index a4c7a11da..a658bd0b9 100644
--- a/framework/core/js/src/admin/components/MailPage.js
+++ b/framework/core/js/src/admin/components/MailPage.js
@@ -2,6 +2,7 @@ import Page from './Page';
 import FieldSet from '../../common/components/FieldSet';
 import Button from '../../common/components/Button';
 import Alert from '../../common/components/Alert';
+import Select from '../../common/components/Select';
 import saveSettings from '../utils/saveSettings';
 
 export default class MailPage extends Page {
@@ -41,36 +42,6 @@ export default class MailPage extends Page {
               {app.translator.trans('core.admin.email.text')}
             </div>
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.server_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
-                <div className="MailPage-MailSettings-input">
-                  <label>{app.translator.trans('core.admin.email.driver_label')}</label>
-                  <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} />
-                  <label>{app.translator.trans('core.admin.email.host_label')}</label>
-                  <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} />
-                  <label>{app.translator.trans('core.admin.email.port_label')}</label>
-                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
-                  <label>{app.translator.trans('core.admin.email.encryption_label')}</label>
-                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
-                </div>
-              ]
-            })}
-
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.email.account_heading'),
-              className: 'MailPage-MailSettings',
-              children: [
-                <div className="MailPage-MailSettings-input">
-                  <label>{app.translator.trans('core.admin.email.username_label')}</label>
-                  <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} />
-                  <label>{app.translator.trans('core.admin.email.password_label')}</label>
-                  <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} />
-                </div>
-              ]
-            })}
-
             {FieldSet.component({
               label: app.translator.trans('core.admin.email.addresses_heading'),
               className: 'MailPage-MailSettings',
@@ -82,6 +53,36 @@ export default class MailPage extends Page {
               ]
             })}
 
+            {FieldSet.component({
+              label: app.translator.trans('core.admin.email.driver_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.driver_label')}</label>
+                  <Select value={this.values.mail_driver()} options={Object.keys(this.driverFields).reduce((memo, val) => ({...memo, [val]: val}), {})} onchange={this.values.mail_driver} />
+                </div>
+              ]
+            })}
+
+            {this.values.mail_driver() == 'smtp' && FieldSet.component({
+              label: app.translator.trans('core.admin.email.smtp_heading'),
+              className: 'MailPage-MailSettings',
+              children: [
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.email.host_label')}</label>
+                  <input className = "FormControl" value={this.values.mail_host() || ''} onInput={m.withAttr('value', this.values.mail_host)} />
+                  <label>{app.translator.trans('core.admin.email.port_label')}</label>
+                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
+                  <label>{app.translator.trans('core.admin.email.encryption_label')}</label>
+                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
+                  <label>{app.translator.trans('core.admin.email.username_label')}</label>
+                  <input className="FormControl" value={this.values.mail_username() || ''} onInput={m.withAttr('value', this.values.mail_username)}/>
+                  <label>{app.translator.trans('core.admin.email.password_label')}</label>
+                  <input className="FormControl" value={this.values.mail_password() || ''} onInput={m.withAttr('value', this.values.mail_password)}/>
+                </div>
+              ]
+            })}
+
             {Button.component({
               type: 'submit',
               className: 'Button Button--primary',
diff --git a/framework/core/less/admin/MailPage.less b/framework/core/less/admin/MailPage.less
index 10ed97add..964453d74 100644
--- a/framework/core/less/admin/MailPage.less
+++ b/framework/core/less/admin/MailPage.less
@@ -29,6 +29,10 @@
     margin-bottom: 7px;
   }
 
+  .Select {
+    display: block;
+  }
+
   :last-child {
     margin-bottom: 0;
   }