diff --git a/frappe/public/js/frappe/form/footer/new_timeline.js b/frappe/public/js/frappe/form/footer/new_timeline.js
index fa12489f2f..2102b0e8e1 100644
--- a/frappe/public/js/frappe/form/footer/new_timeline.js
+++ b/frappe/public/js/frappe/form/footer/new_timeline.js
@@ -199,7 +199,7 @@ frappe.ui.form.NewTimeline = class {
 			let timeline_indicator = `
 			<div class="timeline-indicator ${log.points > 0 ? 'appreciation': 'criticism'} bold">
 				${log.points}
-			<div>`;
+			</div>`;
 
 			energy_point_timeline_contents.push({
 				timeline_indicator: timeline_indicator,
diff --git a/frappe/public/scss/sidebar.scss b/frappe/public/scss/sidebar.scss
index 637483e770..eec1d19d3d 100644
--- a/frappe/public/scss/sidebar.scss
+++ b/frappe/public/scss/sidebar.scss
@@ -376,15 +376,12 @@ body[data-route^="Module"] .main-menu {
 
 .form-reviews {
 	.review {
-		display: inline-flex;
 		font-weight: 500;
 		width: 28px;
 		height: 28px;
 		border-radius: 50%;
-		vertical-align: middle;
-		justify-content: center;
 		font-size: var(--text-xs);
-		align-items: center;
+		@extend .center-content;
 		margin-bottom: var(--margin-sm);
 		margin-right: var(--margin-xs);
 	}
diff --git a/frappe/public/scss/timeline.scss b/frappe/public/scss/timeline.scss
index df9451ff99..4a5496dffc 100644
--- a/frappe/public/scss/timeline.scss
+++ b/frappe/public/scss/timeline.scss
@@ -14,9 +14,7 @@ $threshold: 40;
 	left: calc(-1 * (#{$indicator-size}/2));
 	background-color: var(--bg-color);
 	border: 1px solid var(--dark-border-color);
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
+	@extend .center-content;
 	--icon-stroke: var(--gray-600);
 }