diff --git a/webadmin/src/views/email.html b/webadmin/src/views/email.html
index cd6eebbab..2d5bc788f 100644
--- a/webadmin/src/views/email.html
+++ b/webadmin/src/views/email.html
@@ -103,30 +103,30 @@
                 <input type="number" class="form-control" ng-model="mailRelay.relay.port" name="port" required>
               </div>
 
-              <!-- Postmark -->
-              <div ng-show="isProvider('postmark-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.serverApiToken.$dirty && mailRelayForm.serverApiToken.$invalid) }">
-                <label class="control-label">Server API Token</label>
+              <!-- Postmark and Sendgrid -->
+              <div ng-show="isProvider('postmark-smtp') || isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.serverApiToken.$dirty && mailRelayForm.serverApiToken.$invalid) }">
+                <label class="control-label">API Token/Key</label>
                 <div class="control-label" ng-show="(!mailRelayForm.serverApiToken.$dirty && mailRelay.error.serverApiToken) || (mailRelayForm.serverApiToken.$dirty && mailRelayForm.serverApiToken.$invalid)">
                   <small ng-show="!mailRelayForm.serverApiToken.$dirty && mailRelay.error.serverApiToken">{{ mailRelay.error.serverApiToken }}</small>
                 </div>
-                <input type="text" class="form-control" ng-model="mailRelay.relay.serverApiToken" name="serverApiToken" ng-required="isProvider('postmark-smtp')">
+                <input type="text" class="form-control" ng-model="mailRelay.relay.serverApiToken" name="serverApiToken" ng-required="isProvider('postmark-smtp') || isProvider('sendgrid-smtp')">
               </div>
 
               <!-- Other -->
-              <div ng-show="!isProvider('postmark-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid) }">
+              <div ng-show="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid) }">
                 <label class="control-label">Username</label>
                 <div class="control-label" ng-show="(!mailRelayForm.username.$dirty && mailRelay.error.username) || (mailRelayForm.username.$dirty && mailRelayForm.username.$invalid)">
                   <small ng-show="!mailRelayForm.username.$dirty && mailRelay.error.username">{{ mailRelay.error.username }}</small>
                 </div>
-                <input type="text" class="form-control" ng-model="mailRelay.relay.username" name="username" ng-required="!isProvider('postmark-smtp')">
+                <input type="text" class="form-control" ng-model="mailRelay.relay.username" name="username" ng-required="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')">
               </div>
 
-              <div ng-show="!isProvider('postmark-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid) }">
+              <div ng-show="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')" class="form-group" ng-class="{ 'has-error': (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid) }">
                 <label class="control-label">Password</label>
                 <div class="control-label" ng-show="(!mailRelayForm.password.$dirty && mailRelay.error.password) || (mailRelayForm.password.$dirty && mailRelayForm.password.$invalid)">
                   <small ng-show="!mailRelayForm.password.$dirty && mailRelay.error.password">{{ mailRelay.error.password }}</small>
                 </div>
-                <input type="password" class="form-control" ng-model="mailRelay.relay.password" name="password" ng-required="!isProvider('postmark-smtp')">
+                <input type="password" class="form-control" ng-model="mailRelay.relay.password" name="password" ng-required="!isProvider('postmark-smtp') && !isProvider('sendgrid-smtp')">
               </div>
 
               <input class="ng-hide" type="submit" ng-disabled="mailRelayForm.$invalid"/>
diff --git a/webadmin/src/views/email.js b/webadmin/src/views/email.js
index 4dc78c2c0..46560f04f 100644
--- a/webadmin/src/views/email.js
+++ b/webadmin/src/views/email.js
@@ -95,7 +95,7 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
         { provider: 'google-smtp', name: 'Google', host: 'smtp.gmail.com', port: 587 },
         { provider: 'mailgun-smtp', name: 'Mailgun', host: 'smtp.mailgun.org', port: 587 },
         { provider: 'postmark-smtp', name: 'Postmark', host: 'smtp.postmarkapp.com', port: 587 },
-        { provider: 'sendgrid-smtp', name: 'SendGrid', host: 'smtp.sendgrid.net', port: 587 },
+        { provider: 'sendgrid-smtp', name: 'SendGrid', host: 'smtp.sendgrid.net', port: 587, username: 'apikey' },
     ];
 
     $scope.mailRelay = {
@@ -140,6 +140,9 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
             if (data.provider === 'postmark-smtp') {
                 data.username = $scope.mailRelay.relay.serverApiToken;
                 data.password = $scope.mailRelay.relay.serverApiToken;
+            } else if (data.provider === 'sendgrid-smtp') {
+                data.username = 'apikey';
+                data.password = $scope.mailRelay.relay.serverApiToken;
             } else {
                 data.username = $scope.mailRelay.relay.username;
                 data.password = $scope.mailRelay.relay.password;
@@ -175,6 +178,8 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
 
             if (relay.provider === 'postmark-smtp') {
                 $scope.mailRelay.relay.serverApiToken = relay.username;
+            } else if (relay.provider === 'sendgrid-smtp') {
+                $scope.mailRelay.relay.serverApiToken = relay.password;
             } else {
                 $scope.mailRelay.relay.username = relay.username;
                 $scope.mailRelay.relay.password = relay.password;