diff --git a/frappe/public/scss/avatar.scss b/frappe/public/scss/avatar.scss
index f974c446fa..8dbf3e0c2d 100644
--- a/frappe/public/scss/avatar.scss
+++ b/frappe/public/scss/avatar.scss
@@ -6,7 +6,7 @@
 .avatar-frame {
 	display: inline-block;
 	width: 100%;
-	padding: 50%;
+	height: 100%;
 	// TODO: Remove
 	// background-color: var(--pink-200);
 	background-size: cover;
@@ -90,7 +90,7 @@
 }
 
 .avatar-group {
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	flex-direction: row-reverse;
 	&.right {
@@ -126,8 +126,6 @@
 	}
 
 	.avatar {
-		position: relative;
-
 		.avatar-frame {
 			border: 1px solid $white;
 		}
@@ -137,7 +135,7 @@
 		font-size: var(--text-sm);
 	}
 
-	.avatar+.avatar {
+	.avatar + .avatar {
 		margin-right: -0.3rem;
 	}
 }
\ No newline at end of file
diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss
index ff37779aae..51265a6159 100644
--- a/frappe/public/scss/sidebar.scss
+++ b/frappe/public/scss/sidebar.scss
@@ -105,14 +105,13 @@ body[data-route^="Module"] .main-menu {
 		}
 	}
 
-
 	a.close {
 		position: absolute;
 		right: 5px;
 	}
 
-
 	.form-shared, .form-viewers {
+		display: inline-flex;
 		.share-doc-btn {
 			cursor: pointer;
 		}
@@ -122,10 +121,6 @@ body[data-route^="Module"] .main-menu {
 			left: 4.5px;
 		}
 
-		.avatar {
-			margin-top: 5px;
-		}
-
 		.shared-with-everyone {
 			border-style: solid;
 			border-color: $control-bg;
@@ -176,7 +171,6 @@ body[data-route^="Module"] .main-menu {
 				display: block;
 			}
 		}
-
 		.sidebar-image-actions {
 			display: none;
 			position: absolute;
@@ -196,7 +190,6 @@ body[data-route^="Module"] .main-menu {
 	&:focus,
 	&:active {
 		background-color: $control-bg;
-
 		.octicon-plus {
 			color: $text-color !important;
 		}
@@ -211,7 +204,6 @@ body[data-route^="Module"] .main-menu {
 }
 
 .layout-side-section {
-
 	.overlay-sidebar {
 		@media (max-width: 991px) {
 			margin-top: 0 !important;
@@ -434,8 +426,6 @@ body[data-route^="Module"] .main-menu {
 		justify-content: center;
 		font-size: var(--text-xs);
 		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);
@@ -454,11 +444,18 @@ body[data-route^="Module"] .main-menu {
 	height: 28px;
 	width: 28px;
 	border-radius: var(--border-radius);
-	border: 1px dashed var(--gray-300);
+	border: 1px dashed var(--dark-border-color);
 	background: var(--gray-50);
 	text-align: center;
-	padding: 3px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--fg-color);
+}
+
+.form-shared .avatar-group, .add-review-btn, .share-doc-btn, .review {
 	margin-bottom: var(--margin-sm);
+	margin-right: var(--margin-sm);
 }
 
 .review-popover  {
@@ -498,7 +495,7 @@ body[data-route^="Module"] .main-menu {
 	}
 }
 
-// Remove top margin from frist child
+// Remove top margin from first child
 .sidebar-item:first-child a {
 	margin-top: 0rem;
 }
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 5d0b98d08a..16858a4f93 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -223,7 +223,7 @@ $modal-content-bg: var(--modal-bg);
 $dropdown-bg: var(--fg-color);
 $dropdown-border-color: var(--dark-border-color);
 $dropdown-link-color: var(--text-color);
-$dropdown-link-hover-color: var(--text-color);
+$dropdown-link-hover-color: var(--text-light);
 $dropdown-link-hover-bg: var(--fg-hover-color);
 $dropdown-link-disabled-color: var(--gray-600);
 $dropdown-header-color: var(--gray-600);