diff --git a/kudos-services/src/main/java/org/exoplatform/kudos/notification/provider/WebTemplateProvider.java b/kudos-services/src/main/java/org/exoplatform/kudos/notification/provider/WebTemplateProvider.java
deleted file mode 100644
index fa3ef0030..000000000
--- a/kudos-services/src/main/java/org/exoplatform/kudos/notification/provider/WebTemplateProvider.java
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2003-2018 eXo Platform SAS.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-package org.exoplatform.kudos.notification.provider;
-
-import static org.exoplatform.kudos.service.utils.Utils.KUDOS_RECEIVER_NOTIFICATION_ID;
-
-import org.exoplatform.commons.api.notification.annotation.TemplateConfig;
-import org.exoplatform.commons.api.notification.annotation.TemplateConfigs;
-import org.exoplatform.commons.api.notification.channel.template.TemplateProvider;
-import org.exoplatform.commons.api.notification.model.PluginKey;
-import org.exoplatform.container.xml.InitParams;
-import org.exoplatform.kudos.notification.builder.KudosTemplateBuilder;
-import org.exoplatform.social.common.xmlprocessor.XMLProcessor;
-
-@TemplateConfigs(templates = {
-    @TemplateConfig(pluginId = KUDOS_RECEIVER_NOTIFICATION_ID, template = "war:/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl") })
-public class WebTemplateProvider extends TemplateProvider {
-
-  private XMLProcessor xmlProcessor;
-
-  public WebTemplateProvider(InitParams initParams , XMLProcessor xmlProcessor) {
-    super(initParams);
-    this.xmlProcessor = xmlProcessor;
-    this.templateBuilders.put(PluginKey.key(KUDOS_RECEIVER_NOTIFICATION_ID), new KudosTemplateBuilder(this, false,this.xmlProcessor));
-  }
-
-}
diff --git a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
index e3c407ee0..57621d2ed 100644
--- a/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
+++ b/kudos-services/src/main/resources/locale/addon/Kudos_en.properties
@@ -85,3 +85,4 @@ kudos.label.button.cancel=Cancel
 kudos.label.cancelKudos=Cancel Kudos
 kudos.label.confirmCancelKudos=Do you confirm the cancellation of kudos?
 kudos.cancel.error.alreadyLinked=You have received kudos after sending this kudos. You cannot cancel it.
+kudos.notification.button=Say thank you
diff --git a/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml b/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml
index 3257e1c93..ec16e91f3 100644
--- a/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml
+++ b/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/notification-configuration.xml
@@ -98,17 +98,6 @@
 
   <external-component-plugins>
     <target-component>org.exoplatform.commons.api.notification.channel.ChannelManager</target-component>
-    <component-plugin>
-      <name>web.channel.kudos.template</name>
-      <set-method>registerTemplateProvider</set-method>
-      <type>org.exoplatform.kudos.notification.provider.WebTemplateProvider</type>
-      <init-params>
-        <value-param>
-          <name>channel-id</name>
-          <value>WEB_CHANNEL</value>
-        </value-param>
-      </init-params>
-    </component-plugin>
     <component-plugin>
       <name>mail.channel.kudos.template</name>
       <set-method>registerTemplateProvider</set-method>
diff --git a/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl b/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl
deleted file mode 100644
index abc88a78f..000000000
--- a/kudos-webapps/src/main/webapp/WEB-INF/conf/kudos/templates/notification/web/KudosReceiverWebPlugin.gtmpl
+++ /dev/null
@@ -1,48 +0,0 @@
-<li class="$READ clearfix" data-id="$NOTIFICATION_ID">
-  <div class="media kudosWebNotifContent">
-    <div class="avatarXSmall pull-left">
-      <img src="$AVATAR" alt="<%=_ctx.escapeHTML(USER)%>" />
-    </div> 
-    <div class="media-body">
-      <%
-       String message = "";
-       String profileUrl = "<a class=\"user-name text-bold\" href=\"javascript:void(0)\">" + _ctx.escapeHTML(USER) + "</a>";
-       if (Boolean.parseBoolean(IS_SPACE_RECEIVER)) {
-         String spaceUrl = "<a class=\"user-name text-bold\" href=\""+ SPACE_URL +"\">" + _ctx.escapeHTML(SPACE) + "</a>";
-         message = _ctx.appRes("Notification.kudos.spaceReceived", spaceUrl, profileUrl);
-       } else {
-         message = _ctx.appRes("Notification.kudos.received", profileUrl);
-       }
-       if(org.apache.commons.lang.StringUtils.isNotBlank(ACTIVITY)) {
-         message += " " + _ctx.appRes("Notification.kudos.onActivity");
-       }
-      %> 
-      <div class="contentSmall" data-link="$VIEW_FULL_DISCUSSION_ACTION_URL">
-        <div class="status">
-          <% if(org.apache.commons.lang3.StringUtils.isBlank(KUDOS_MESSAGE) && org.apache.commons.lang3.StringUtils.isBlank(ACTIVITY)) { %>
-            <i class="uiIcon fa fa-award uiIconKudos uiIconBlue"></i>
-          <% } %>
-          <%=message%>
-        </div>
-        <% if(org.apache.commons.lang3.StringUtils.isNotBlank(ACTIVITY)) { %>
-          <div class="content">
-            <% if(org.apache.commons.lang3.StringUtils.isBlank(KUDOS_MESSAGE)) { %>
-              <i class="uiIcon fa fa-award uiIconKudos uiIconBlue"></i>
-            <% } %>
-            <blockquote style="display:inline-block;">
-              $ACTIVITY
-            </blockquote>
-          </div>
-        <% } %>
-        <% if(org.apache.commons.lang3.StringUtils.isNotBlank(KUDOS_MESSAGE)) { %>
-          <div class="content">
-            <i class="uiIcon fa fa-award uiIconKudos uiIconBlue"></i>
-            <%= KUDOS_MESSAGE %>
-          </div>
-        <% } %>
-        <div class="lastUpdatedTime">$LAST_UPDATED_TIME</div>
-      </div>
-    </div>
-  </div>
-  <span class="remove-item" data-rest=""><i class="uiIconClose uiIconLightGray"></i></span>
-</li>
diff --git a/kudos-webapps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosNotification.vue b/kudos-webapps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosNotification.vue
new file mode 100644
index 000000000..7d94f5d73
--- /dev/null
+++ b/kudos-webapps/src/main/webapp/vue-app/notification-extension/components/NewUserKudosNotification.vue
@@ -0,0 +1,19 @@
+<template>
+  <user-notification-activity-base
+    :notification="notification"
+    message-key="Notification.kudos.received"
+    icon="fa-award"
+    reply-icon="far fa-handshake"
+    reply-key="kudos.notification.button"
+    reply />
+</template>
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: null,
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js b/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js
index 4bb323bd9..23cd2e36a 100644
--- a/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js
+++ b/kudos-webapps/src/main/webapp/vue-app/notification-extension/extensions.js
@@ -17,8 +17,19 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
+extensionRegistry.registerExtension('WebNotification', 'notification-content-extension', {
+  type: 'KudosActivityReceiverNotificationPlugin',
+  rank: 10,
+  vueComponent: Vue.options.components['user-notification-kudos-received'],
+});
 extensionRegistry.registerComponent('WebNotification', 'NewUserPlugin-actions', {
   type: 'NewUserKudosButton',
   rank: 10,
-  vueComponent: Vue.options.components['user-notification-new-user-kudos'],
+  vueComponent: Vue.options.components['user-notification-kudos-button'],
+});
+extensionRegistry.registerExtension('WebNotification', 'activity-notification-exokudos:activity', {
+  id: 'KudosActivity',
+  rank: 10,
+  isEnabled: () => true,
+  getContent: (_notification, activity) => activity?.templateParams?.kudosMessage,
 });
diff --git a/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js b/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js
index 5bcffef99..5b870c88e 100644
--- a/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js
+++ b/kudos-webapps/src/main/webapp/vue-app/notification-extension/initComponents.js
@@ -18,9 +18,11 @@
  */
 
 import NewUserKudosButton from './components/NewUserKudosButton.vue';
+import NewUserKudosNotification from './components/NewUserKudosNotification.vue';
 
 const components = {
-  'user-notification-new-user-kudos': NewUserKudosButton,
+  'user-notification-kudos-button': NewUserKudosButton,
+  'user-notification-kudos-received': NewUserKudosNotification,
 };
 
 for (const key in components) {