diff --git a/controller/action/MailActions.class.php b/controller/action/MailActions.class.php
index e6371e6b..5d3d99ef 100644
--- a/controller/action/MailActions.class.php
+++ b/controller/action/MailActions.class.php
@@ -63,6 +63,10 @@ class MailActions extends Actions
     public static function editEmailSettings(string $token)
     {
         $response = LBRY::emailStatus($token);
-        return ['mail/settings',['data' => $response['data'],'error' => $response['error']]];
+        return ['mail/settings', [
+          'status' => $response['data'] ?? '/',
+          'token' => $token,
+          'error' => $response['error'] ?? false
+        ]];
     }
 }
diff --git a/view/template/mail/_settingsForm.php b/view/template/mail/_settingsForm.php
index c892d33e..d389bdf7 100644
--- a/view/template/mail/_settingsForm.php
+++ b/view/template/mail/_settingsForm.php
@@ -1,27 +1,28 @@
+<?php $formId = 'email_form' ?>
 <?php js_start() ?>
-lbry.emailSettingsForm( '<?php echo json_encode($status) ?>');
+  lbry.emailSettingsForm("#<?php echo $formId ?>", '<?php echo json_encode($status) ?>', <?php echo json_encode($token) ?>);
 <?php js_end() ?>
-<?php $error = $error ?? null ?>
-<?php $tag = $tag ?? null ?>
-<?php $largeInput = $largeInput ?? false ?>
-<form id="email_form" onsubmit="lbry.applyEmailEdit()" novalidate>
+<noscript>
+  Javascript is required to securely send your unsubscribe information. Email <a href="mailto:help@lbry.io" class="link-primary">help@lbry.io</a> for manual unsubscription.
+</noscript>
+<form id="<?php echo $formId ?>" novalidate style="display: none">
   <?php if ($error): ?>
     <div class="notice notice-error spacer1"><?php echo $error ?></div>
   <?php endif ?>
-  <div class="mail-submit" >
-  </div>
+  <div class="notice notice-success hide">Your email preferences have been updated.</div>
+  <div class="email-section">
+    <div class="notice notice-error hide spacer1"></div>
     <h2>Emails</h2>
     <h4>Choose which emails you want to receive LBRY news</h4>
-    <div>
-        <table id="email_table"></table>
-        <div><button>Apply</button></div>
-    </div>
-</form>
-<form id="tag_form" onsubmit=="lbry.applyTagEdit()" novalidate>
+    <table></table>
+  </div>
+  <div class="tag-section">
+    <div class="notice notice-error hide"></div>
     <h2>Tags</h2>
     <h4>Any particular interests?</h4>
+    <table id="tag_table"></table>
     <div>
-        <table id="tag_table"></table>
-        <div><button>Apply</button></div>
+      <input type="submit" value="Save" class="btn-primary">
     </div>
+  </div>
 </form>
\ No newline at end of file
diff --git a/view/template/mail/settings.php b/view/template/mail/settings.php
index 31d1b0be..4f5b3c53 100644
--- a/view/template/mail/settings.php
+++ b/view/template/mail/settings.php
@@ -7,10 +7,7 @@
         <div class="row-fluid">
             <div class="span9">
                 <h1>{{page.email_settings}}</h1>
-                <?php if ($error ?? false): ?>
-                    <div class="notice notice-error spacer1"><?php echo $error ?></div>
-                <?php endif ?>
-                <?php echo View::render('mail/_settingsForm',['status' => $data ?? '/']) ?>
+                <?php echo View::render('mail/_settingsForm', ['status' => $status, 'error' => $error, 'token' => $token]) ?>
             </div>
             <div class="span3">
                 <h3>{{social.also}}</h3>
@@ -19,4 +16,4 @@
         </div>
     </div>
 </main>
-<?php echo View::render('nav/_footer', ['showLearnFooter' => $learnFooter ?? false]) ?>
+<?php echo View::render('nav/_footer', ['showLearnFooter' => false]) ?>
diff --git a/web/js/emailSettings.js b/web/js/emailSettings.js
index af9adcff..8ebdd610 100644
--- a/web/js/emailSettings.js
+++ b/web/js/emailSettings.js
@@ -1,10 +1,16 @@
-lbry.emailSettingsForm = function (emailState) {
+lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
     var
+        form = $(formSelector),
         state = JSON.parse(emailState),
         emails = state.emails,
         tags = state.tags,
-        emailTable = $('#email_table'),
-        tagTable = $('#tag_table');
+        emailSection = form.find('.email-section'),
+        tagSection = form.find('.tag-section'),
+        emailTable = emailSection.find('table'),
+        tagTable = tagSection.find('table'),
+        hasError = false,
+        isEmailSubmitPending = false,
+        isTagSubmitPending = false;
 
     $.each(emails, function(email, enabled = false){
         console.log('email: ',email, ' enabled: ',enabled)
@@ -23,30 +29,63 @@ lbry.emailSettingsForm = function (emailState) {
         tagTable.append($rowTag).append($labelCell).append($checkBoxCell);
     });
 
-    $('#email_form').submit(function(e) {
-        e.preventDefault();
-    });
-    $('#tag_form').submit(function(e) {
+    function showSuccess() {
+        if (!isEmailSubmitPending && !isTagSubmitPending && !hasError)
+        {
+            form.find('.notice-success').show();
+        }
+    }
+
+    //cleverness could eliminate some mild DRY violations below
+    form.submit(function(e) {
+        //remove below obv
+        // return false;
+
         e.preventDefault();
+
+        form.find('.notice').hide();
+        hasError = false;
+        isEmailSubmitPending = true;
+        isTagSubmitPending = true;
+
+        //do email edit
+        var url = 'http://localhost:8080/user/email/edit?auth_token=' + userAuthToken,
+            //Did not test below but should be close to this, it may need to be scrubbed and/or modified.
+            formData = emailSection.find(':input').serialize();
+
+
+        fetch(url, {
+            method: "POST",
+            body: formData
+        }).then(function(value) {
+            isEmailSubmitPending = false;
+            showSuccess();
+        }).catch(function(value) {
+            isEmailSubmitPending = false;
+            hasError = true;
+            var error = "get actual error message from value";
+            emailSection.find('.notice-error').html(error).show();
+        });
+
+        //do tag edit
+        var url = 'http://localhost:8080/user/fix/me?auth_token=' + userAuthToken,
+            //Did not test below but should be close to this, it may need to be scrubbed and/or modified.
+            formData = tagSection.find(':input').serialize();
+
+
+        fetch(url, {
+            method: "POST",
+            body: formData
+        }).then(function(value) {
+            isTagSubmitPending = false;
+            showSuccess();
+        }).catch(function(value) {
+            isTagSubmitPending = false;
+            hasError = true;
+            var error = "get actual error message from value";
+            tagSection.find('.notice-error').html(error).show();
+        });
     });
 
-
-}
-
-lbry.applyEmailEdit = function () {
-    console.log("applied email settings")
-
-    //How do I call PHP api with the proper arguments from here?
-    //Then how do I go to the page again triggering a refresh or show an error?
-    //Need to get the token here as well to call the API
-
-    /*let url = 'http://localhost:8080/user/email/edit?auth_token='+token+'&'
-    fetch('http://localhost:8080/user/email/edit?').then(value => {
-        console.log(value.json())
-
-    });*/
-}
-
-lbry.applyTagEdit = function () {
-    console.log("applied tag settings")
+    form.show();
 }
\ No newline at end of file