diff --git a/jam-ui/cypress/e2e/home/unsubscribe.cy.js b/jam-ui/cypress/e2e/home/unsubscribe.cy.js
index b73f108d2..d018ba172 100644
--- a/jam-ui/cypress/e2e/home/unsubscribe.cy.js
+++ b/jam-ui/cypress/e2e/home/unsubscribe.cy.js
@@ -2,22 +2,23 @@
 
 describe('Unsubscribe from email link', () => {
   beforeEach(() =>{
-    cy.intercept('POST', /\S+\/unsubscribe_user_match\/\S+/, { statusCode: 200, body: { ok: true } });
+    // cy.intercept('POST', /\S+\/unsubscribe_user_match\/\S+/, { statusCode: 200, body: { ok: true } });
+    cy.intercept('POST', /\S+\/unsubscribe\/\S+/, { statusCode: 200, body: { ok: true } });
   })
 
   it("redirect to home page if tok is not provided", () => {
-    cy.visit('/unsubscribe');
-    cy.location('pathname').should('eq', '/');
+    cy.visit('/public/unsubscribe');
+    cy.location('pathname').should('eq', '/errors/404');
   });
 
-  it.only("show unsubscribed message", () => {
-    cy.visit('/unsubscribe?tok=123');
-    cy.location('search')
-    .should('equal', '?tok=123')
-    .then((s) => new URLSearchParams(s))
-    .invoke('get', 'tok')
-    .should('equal', '123')
-    cy.contains("successfully unsubscribed")
+  it("show unsubscribed message", () => {
+    cy.visit('/public/unsubscribe/123');
+    // cy.location('search')
+    // .should('equal', '?tok=123')
+    // .then((s) => new URLSearchParams(s))
+    // .invoke('get', 'tok')
+    // .should('equal', '123')
+    cy.contains("Unsubscribe from JamKazam emails")
   });
 
 })
\ No newline at end of file
diff --git a/jam-ui/src/components/public/JKUnsubscribe.js b/jam-ui/src/components/public/JKUnsubscribe.js
index 66174abbf..54704abe2 100644
--- a/jam-ui/src/components/public/JKUnsubscribe.js
+++ b/jam-ui/src/components/public/JKUnsubscribe.js
@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { Card, CardBody, CardText, CardTitle  } from 'reactstrap';
 import { useTranslation } from "react-i18next";
 import { useBrowserQuery } from '../../context/BrowserQuery';
-import { useHistory } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 
 
 const unsubscribeFromNewUsersWeeklyEmail = (token) => {
   
-  const baseUrl = process.env.REACT_APP_LEGACY_BASE_URL
+  const baseUrl = process.env.REACT_APP_CLIENT_BASE_URL
 
   return new Promise((resolve, reject) => {
     fetch(`${baseUrl}/unsubscribe_user_match/${token}`, 
@@ -22,16 +22,29 @@ const unsubscribeFromNewUsersWeeklyEmail = (token) => {
   })
 }
 
+const unsubscribe = (token) => {
+  const baseUrl = process.env.REACT_APP_CLIENT_BASE_URL
+  return new Promise((resolve, reject) => {
+    fetch(`${baseUrl}/unsubscribe/${token}`, { method: 'POST' })
+    .then(response => {
+      if(response.ok){
+        resolve(response)
+      } else {
+        reject(response)
+      }
+    })
+  })
+}
+
 function JKUnsubscribe() {
   const {t} = useTranslation()
   const queryObj = useBrowserQuery();
   const history = useHistory()
   const [success, setSuccess] = useState(false)
-
+  const { tok } = useParams();
   useEffect(() => {
-    const token = queryObj.get('tok')
-    if(token){
-      unsubscribeFromNewUsersWeeklyEmail(token)
+    if(tok){
+      unsubscribe(tok)
       .then((resp) => {
         if(resp.ok){
           setSuccess(true)
@@ -46,13 +59,13 @@ function JKUnsubscribe() {
   return (
   
   
-    <Card color={ success ? 'success' : 'light' } style={{ width: '25rem', margin: '2rem auto' }}>
+    <Card style={{ width: '25rem', margin: '2rem auto' }}>
       <CardBody>
-        <CardTitle className="mb-2">Unsubscribe From Weekly Email</CardTitle>
+        <CardTitle className="mb-2">Unsubscribe from JamKazam emails</CardTitle>
         <CardText>
           {
             success? 
-            'You have successfully unsubscribed from weekly emails on newly joined musicians having low internet latency to you.' : 
+            'You have been unsubscribed from all JamKazam emails. You will no longer receive any emails from JamKazam.' : 
             'Unsubscribing...'
           }
         </CardText>
diff --git a/jam-ui/src/layouts/JKPublicRoutes.js b/jam-ui/src/layouts/JKPublicRoutes.js
index 9b09ef6ba..f808dd81d 100644
--- a/jam-ui/src/layouts/JKPublicRoutes.js
+++ b/jam-ui/src/layouts/JKPublicRoutes.js
@@ -22,7 +22,7 @@ const JKPublicRoutes = ({ match: { url } }) => (
     <Route path={`${url}/knowledge-base`} component={JKKnowledgeBase} />
     <Route path={`${url}/help-desk`} component={JKHelpDesk} />
     <Route path={`${url}/forum`} component={JKForum} />
-    <Route path={`${url}/unsubscribe`} exact component={JKUnsubscribe} />
+    <Route path={`${url}/unsubscribe/:tok`} exact component={JKUnsubscribe} />
     <Route path={`${url}/downloads`} exact component={JKDownloads} />
     <Route path={`${url}/downloads-legacy`} exact component={JKDownloadsLegacy} />
     <Route path={`${url}/obs-plugin-download`} exact component={JKObsDownloads} />
diff --git a/web/app/controllers/users_controller.rb b/web/app/controllers/users_controller.rb
index d4f5109d2..fd61096bf 100644
--- a/web/app/controllers/users_controller.rb
+++ b/web/app/controllers/users_controller.rb
@@ -450,7 +450,11 @@ JS
       @user.save!
     #end
 
-    render text: 'You have been unsubscribed.'
+    respond_to do |format|
+      format.html { render text: 'You have been unsubscribed.' }
+      format.json { render json: { status: 'success', message: 'You have been unsubscribed.' } }
+    end
+  
   end
 
   def unsubscribe_user_match
diff --git a/web/config/initializers/cors.rb b/web/config/initializers/cors.rb
index f18a58654..3c28dda6e 100644
--- a/web/config/initializers/cors.rb
+++ b/web/config/initializers/cors.rb
@@ -16,4 +16,14 @@ Rails.application.config.middleware.insert_before 0, Rack::Cors do
       methods: [:get],
       credentials: true
   end
+
+  allow do
+    origins Rails.configuration.spa_origin_url
+
+    resource '/unsubscribe/*',
+      headers: :any,
+      methods: [:get, :post, :put, :delete, :options],
+      credentials: true
+  end
+  
 end
\ No newline at end of file