diff --git a/ui/src/pages/Users/Unsubscribe/index.tsx b/ui/src/pages/Users/Unsubscribe/index.tsx
index b654b4f4..933614ea 100644
--- a/ui/src/pages/Users/Unsubscribe/index.tsx
+++ b/ui/src/pages/Users/Unsubscribe/index.tsx
@@ -1,8 +1,9 @@
-import { FC, memo } from 'react';
+import { FC, memo, useEffect } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
+import { unsubscribe } from '@/services';
 import { usePageTags } from '@/hooks';
 
 const Index: FC = () => {
@@ -10,6 +11,13 @@ const Index: FC = () => {
   usePageTags({
     title: t('page_title'),
   });
+  const [searchParams] = useSearchParams();
+  const code = searchParams.get('code');
+  useEffect(() => {
+    if (code) {
+      unsubscribe(code);
+    }
+  }, [code]);
   return (
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
diff --git a/ui/src/services/common.ts b/ui/src/services/common.ts
index 0f4eac3f..51f0e978 100644
--- a/ui/src/services/common.ts
+++ b/ui/src/services/common.ts
@@ -257,3 +257,8 @@ export const getAppSettings = () => {
 export const reopenQuestion = (params: { question_id: string }) => {
   return request.put('/answer/api/v1/question/reopen', params);
 };
+
+export const unsubscribe = (code: string) => {
+  const apiUrl = '/answer/api/v1/user/email/notification';
+  return request.put(apiUrl, { code });
+};