diff --git a/frappe/public/js/frappe/ui/like.js b/frappe/public/js/frappe/ui/like.js
index 8bed02119f..0313f6c6ea 100644
--- a/frappe/public/js/frappe/ui/like.js
+++ b/frappe/public/js/frappe/ui/like.js
@@ -16,7 +16,7 @@ frappe.ui.get_liked_by = function(doc) {
 }
 
 frappe.ui.toggle_like = function($btn, doctype, name, callback) {
-	var add = $btn.hasClass("not-liked") ? "Yes" : "No";
+ 	var add = $btn.hasClass("not-liked") ? "Yes" : "No";
 	// disable click
 	$btn.css('pointer-events', 'none');
 
@@ -38,9 +38,9 @@ frappe.ui.toggle_like = function($btn, doctype, name, callback) {
 					+'"][data-doctype="'+ doctype.replace(/"/g, '\"')+'"]');
 
 				if(add==="Yes") {
-					action_buttons.removeClass("not-liked text-extra-muted");
+					action_buttons.removeClass("not-liked").addClass("liked");
 				} else {
-					action_buttons.addClass("not-liked text-extra-muted");
+					action_buttons.addClass("not-liked").removeClass("liked");
 				}
 
 				// update in locals (form)
@@ -98,17 +98,17 @@ frappe.ui.setup_like_popover = ($parent, selector, check_not_liked=true) => {
 			trigger: 'manual',
 			template:`<div class="liked-by-popover popover">
 				<div class="arrow"></div>
-				<div class="popover-content"></div>
+				<div class="popover-body popover-content"></div>
 			</div>`,
 			content: () => {
-				let liked_by = target_element.attr('data-liked-by');
+				let liked_by = target_element.parents(".liked-by").attr('data-liked-by');
 				liked_by = liked_by ? decodeURI(liked_by) : '[]';
 				liked_by = JSON.parse(liked_by);
 
 				const user = frappe.session.user;
 				// hack
 				if (check_not_liked) {
-					if (target_element.find(".not-liked").length) {
+					if (target_element.parents(".liked-by").find(".not-liked").length) {
 						if (liked_by.indexOf(user)!==-1) {
 							liked_by.splice(liked_by.indexOf(user), 1);
 						}
@@ -131,7 +131,7 @@ frappe.ui.setup_like_popover = ($parent, selector, check_not_liked=true) => {
 				liked_by.forEach(user => {
 					// append user list item
 					liked_by_list.append(`
-						<li data-user=${user}>${frappe.avatar(user)}
+						<li data-user=${user}>${frappe.avatar(user, "avatar-xs")}
 							<span>${frappe.user.full_name(user)}</span>
 						</li>
 					`);