diff --git a/ghost/portal/src/components/common/Switch.js b/ghost/portal/src/components/common/Switch.js
index 984a6e5ab0..3e4dcf2dd4 100644
--- a/ghost/portal/src/components/common/Switch.js
+++ b/ghost/portal/src/components/common/Switch.js
@@ -8,10 +8,12 @@ function Switch({id, label, onToggle, checked = false}) {
                     type="checkbox"
                     checked={checked}
                     id={id}
-                    onChange={e => onToggle(e)}
+                    onChange={() => {}}
                     aria-label={label}
                 />
-                <span className="input-toggle-component"></span>
+                <span className="input-toggle-component" onClick={(e) => {
+                    onToggle(e);
+                }}></span>
             </label>
         </div>
     );
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index 47c79b835a..fde5c59068 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -148,7 +148,15 @@ export default class AccountProfilePage extends React.Component {
         );
     }
 
+    onToggleSubscription(e, subscribed) {
+        this.context.onAction('updateMember', {subscribed: !subscribed});
+    }
+
     renderNewsletterOption() {
+        const {subscribed, paid} = this.context.member;
+        if (paid) {
+            return null;
+        }
         return (
             <div style={{padding: '0 24px', display: 'flex', alignItems: 'center'}}>
                 <div style={{flexGrow: 1}}>
@@ -164,7 +172,9 @@ export default class AccountProfilePage extends React.Component {
                     }}> You are not subscribed to email newsletters </div>
                 </div>
                 <div>
-                    <Switch onToggle={(e) => {}} />
+                    <Switch onToggle={(e) => {
+                        this.onToggleSubscription(e, subscribed);
+                    }} checked={subscribed} />
                 </div>
             </div>
         );
diff --git a/ghost/portal/src/components/pages/PaidAccountHomePage.js b/ghost/portal/src/components/pages/PaidAccountHomePage.js
index 014f829f7d..901ee421a0 100644
--- a/ghost/portal/src/components/pages/PaidAccountHomePage.js
+++ b/ghost/portal/src/components/pages/PaidAccountHomePage.js
@@ -128,12 +128,16 @@ export default class PaidAccountHomePage extends React.Component {
         this.context.onAction('editBilling');
     }
 
+    onToggleSubscription(e, subscribed) {
+        this.context.onAction('updateMember', {subscribed: !subscribed});
+    }
+
     renderAccountDetails() {
         const buttonStyle = {
             padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
             borderRadius: '5px', cursor: 'pointer'
         };
-        const {name, email, subscriptions} = this.context.member;
+        const {name, email, subscriptions, subscribed} = this.context.member;
 
         const {
             plan,
@@ -184,7 +188,9 @@ export default class PaidAccountHomePage extends React.Component {
                         </div>
                     </div>
                     <div>
-                        <Switch onToggle={(e) => {}}/>
+                        <Switch onToggle={(e) => {
+                            this.onToggleSubscription(e, subscribed);
+                        }} checked={subscribed} />
                     </div>
                 </div>
             </div>