diff --git a/frappe/public/js/frappe/form/sidebar/review.js b/frappe/public/js/frappe/form/sidebar/review.js
index dd991778d3..292db75393 100644
--- a/frappe/public/js/frappe/form/sidebar/review.js
+++ b/frappe/public/js/frappe/form/sidebar/review.js
@@ -143,7 +143,9 @@ frappe.ui.form.Review = class Review {
 		review_logs.forEach(log => {
 			let review_pill = $(`
 				<li class="review ${log.points < 0 ? 'criticism': 'appreciation'}">
-					${log.points > 0 ? '+': ''}${log.points}
+					<div>
+						${Math.abs(log.points)}
+					</div>
 				</li>
 			`);
 			review_pill.insertBefore(this.add_review_button_wrapper);
diff --git a/frappe/public/js/frappe/form/sidebar/share.js b/frappe/public/js/frappe/form/sidebar/share.js
index 79d6d28945..ec37d42730 100644
--- a/frappe/public/js/frappe/form/sidebar/share.js
+++ b/frappe/public/js/frappe/form/sidebar/share.js
@@ -11,44 +11,22 @@ frappe.ui.form.Share = Class.extend({
 		this.render_sidebar();
 	},
 	render_sidebar: function() {
-		var me = this;
 		this.parent.empty();
+		const shared = this.shared || this.frm.get_docinfo().shared;
+		const shared_users = shared.filter(Boolean).map(s => s.user);
 
-		var shared = this.shared || this.frm.get_docinfo().shared;
-		shared = shared.filter(function(d) { return d });
-		var users = [];
-		for (var i=0, l=shared.length; i < l; i++) {
-			var s = shared[i];
-
-			if (s.everyone) {
-				users.push({
-					icon: "octicon octicon-megaphone text-muted",
-					avatar_class: "avatar-empty share-doc-btn shared-with-everyone",
-					title: __("Shared with everyone")
-				});
-			} else {
-				var user_info = frappe.user_info(s.user);
-				users.push({
-					image: user_info.image,
-					fullname: user_info.fullname,
-					abbr: user_info.abbr,
-					color: user_info.color,
-					title: __("Shared with {0}", [user_info.fullname])
-				});
-			}
+		// REDESIGN-TODO: handle "shared with everyone"
+		this.parent.append(frappe.avatar_group(shared_users, 5, null, 'left'));
+		if (!this.frm.is_new()) {
+			this.parent.append(`
+				<div class="share-doc-btn cursor-pointer" title="${__('Share')}">
+					${frappe.utils.icon('add')}
+				</div>
+			`);
 		}
 
-		if (!me.frm.doc.__islocal) {
-			users.push({
-				icon: "octicon octicon-plus text-muted",
-				avatar_class: "avatar-empty share-doc-btn",
-				title: __("Share")
-			});
-		}
-
-		this.parent.append(frappe.render_template("users_in_sidebar", {"users": users}));
-		this.parent.find(".avatar").on("click", function() {
-			me.frm.share_doc();
+		this.parent.find(".avatar").on("click", () => {
+			this.frm.share_doc();
 		});
 	},
 	show: function() {
diff --git a/frappe/public/js/frappe/utils/common.js b/frappe/public/js/frappe/utils/common.js
index 02330e4fc3..1928f6d444 100644
--- a/frappe/public/js/frappe/utils/common.js
+++ b/frappe/public/js/frappe/utils/common.js
@@ -45,22 +45,21 @@ frappe.avatar = function (user, css_class, title, image_url = null) {
 	}
 };
 
-frappe.avatar_group = function(users,  limit=4, css_class="avatar avatar-small") {
+frappe.avatar_group = function(users,  limit=4, css_class="avatar avatar-small", align='right') {
 	let extra_count = users.length - limit;
-	let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join('')
+	let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join('');
 	if (extra_count > 0) {
-		return `<div class="avatar-group small">
+		html = `
 			<span class="avatar avatar avatar-small">
 				<div class="avatar-frame standard-image avatar-extra-count">
 					+${extra_count}
 				</div>
 			</span>
 			${html}
-		</div>`;
-	} else {
-		return `<div class="avatar-group">${html}</div>`;
+		`;
 	}
-}
+	return `<div class="avatar-group ${align}">${html}</div>`;
+};
 
 frappe.ui.scroll = function(element, animate, additional_offset) {
 	var header_offset = $(".navbar").height() + $(".page-head").height();
diff --git a/frappe/public/scss/avatar.scss b/frappe/public/scss/avatar.scss
index 3412081613..8544891787 100644
--- a/frappe/public/scss/avatar.scss
+++ b/frappe/public/scss/avatar.scss
@@ -84,7 +84,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--blue-50) !important;
+	background-color: var(--blue-50);
 	color: var(--blue-500);
 	font-weight: normal;
 }
@@ -93,18 +93,30 @@
 	display: flex;
 	align-items: center;
 	flex-direction: row-reverse;
+	&.right {
+		justify-content: flex-start;
+	}
+	&.left {
+		justify-content: flex-end;
+	}
 
 	.avatar {
 		position: relative;
 
 		.avatar-frame {
-			border: 2px solid $white;
+			border: 1px solid $white;
 		}
 
 		&:hover {
 			z-index: 1;
 		}
 	}
+	.avatar-extra-count {
+		font-size: var(--text-md);
+		font-weight: 500;
+		color: $white;
+		background-color: var(--blue-500);
+	}
 
 	.avatar+.avatar {
 		margin-right: -0.3rem;
diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss
index 638030675b..eb8311ff4f 100644
--- a/frappe/public/scss/sidebar.scss
+++ b/frappe/public/scss/sidebar.scss
@@ -424,20 +424,18 @@ body[data-route^="Module"] .main-menu {
 }
 
 .form-reviews {
-	// REDESIGN-TODO: Refactor
 	.review {
-		display: inline-block;
+		display: inline-flex;
 		font-weight: 500;
+		width: 28px;
+		height: 28px;
 		border-radius: 50%;
-		margin-bottom: var(--margin-sm);
-		margin-right: var(--margin-sm);
+		vertical-align: middle;
+		justify-content: center;
 		font-size: var(--text-xs);
-		height: 34px;
-		width: 34px;
-		text-align: center;
-		cursor: pointer;
-		padding: var(--padding-xs);
-		padding-top: 8px;
+		align-items: center;
+		margin-bottom: var(--margin-xs);
+		margin-right: var(--margin-xs);
 		&.appreciation {
 			background-color: var(--dark-green-100);
 			color: var(--dark-green-600);
@@ -450,15 +448,16 @@ body[data-route^="Module"] .main-menu {
 	li:last-child {
 		display: inline-block;
 	}
-	.add-review-btn {
-		height: 28px;
-		width: 28px;
-		border-radius: var(--border-radius);
-		border: 1px dashed var(--gray-300);
-		background: var(--gray-50);
-		text-align: center;
-		padding: 3px;
-	}
+}
+
+.add-review-btn, .share-doc-btn {
+	height: 28px;
+	width: 28px;
+	border-radius: var(--border-radius);
+	border: 1px dashed var(--gray-300);
+	background: var(--gray-50);
+	text-align: center;
+	padding: 3px;
 }
 
 .review-popover  {