diff --git a/frappe/desk/page/user_profile/user_profile.html b/frappe/desk/page/user_profile/user_profile.html
index af9e598437..b4d0fe8c22 100644
--- a/frappe/desk/page/user_profile/user_profile.html
+++ b/frappe/desk/page/user_profile/user_profile.html
@@ -6,7 +6,10 @@
 					<h4 class="card-title">{%=__("Overview") %}</h4>
 					<div class="card-options heatmap-options"></div>
 				</div>
-				<div class="performance-heatmap">
+				<div class="chart-wrapper performance-heatmap">
+					<div class="null-state">
+						<span>No Data to Show</span>
+					</div>
 				</div>
 			</div>
 			<div class="frappe-card chart-column-container percentage-chart-container">
@@ -14,7 +17,10 @@
 					<h4 class="card-title">{%=__("Type Distribution") %}</h4>
 					<div class="card-options percentage-chart-options"></div>
 				</div>
-				<div class="performance-percentage-chart">
+				<div class="chart-wrapper performance-percentage-chart">
+					<div class="null-state">
+						<span>No Data to Show</span>
+					</div>
 				</div>
 			</div>
 			<div class="frappe-card chart-column-container line-chart-container">
@@ -22,16 +28,18 @@
 					<h4 class="card-title">{%=__("Energy Points") %}</h4>
 					<div class="card-options line-chart-options"></div>
 				</div>
-				<div class="performance-line-chart">
+				<div class="chart-wrapper performance-line-chart">
+					<div class="null-state">
+						<span>No Data to Show</span>
+					</div>
 				</div>
 			</div>
 		</div>
 		<div class="recent-activity">
 			<p class="recent-activity-title h6 uppercase">{%=__("Recent Activity") %}</p>
-			<div class="recent-activity-list">
+			<div class="recent-activity-list py-2">
 			</div>
 			<div class="show-more-activity"><a class="text-muted">{%=__("Show More Activity") %}</a></div>
 		</div>
 	</div>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/frappe/desk/page/user_profile/user_profile.js b/frappe/desk/page/user_profile/user_profile.js
index c9e211c0ef..dabbc90015 100644
--- a/frappe/desk/page/user_profile/user_profile.js
+++ b/frappe/desk/page/user_profile/user_profile.js
@@ -1,6 +1,6 @@
 frappe.provide('frappe.energy_points');
 
-frappe.pages['user-profile'].on_page_load = function(wrapper) {
+frappe.pages['user-profile'].on_page_load = function (wrapper) {
 
 	frappe.ui.make_app_page({
 		parent: wrapper,
@@ -8,7 +8,7 @@ frappe.pages['user-profile'].on_page_load = function(wrapper) {
 	});
 
 	let user_profile = new UserProfile(wrapper);
-	$(wrapper).bind('show', ()=> {
+	$(wrapper).bind('show', () => {
 		user_profile.show();
 	});
 };
@@ -27,7 +27,7 @@ class UserProfile {
 
 		//validate if user
 		if (route.length > 1) {
-			frappe.db.exists('User', this.user_id).then( exists => {
+			frappe.db.exists('User', this.user_id).then(exists => {
 				if (exists) {
 					this.make_user_profile();
 				} else {
@@ -104,7 +104,7 @@ class UserProfile {
 			user: this.user_id,
 			date: date_from || frappe.datetime.year_start(),
 		}).then((r) => {
-			this.heatmap.update( {dataPoints: r} );
+			this.heatmap.update({ dataPoints: r });
 		});
 	}
 
@@ -127,7 +127,7 @@ class UserProfile {
 			based_on: 'creation'
 		};
 
-		this.line_chart = new frappe.Chart( '.performance-line-chart', {
+		this.line_chart = new frappe.Chart('.performance-line-chart', {
 			type: 'line',
 			height: 200,
 			data: {
@@ -160,7 +160,7 @@ class UserProfile {
 			field: field
 		}).then(chart => {
 			if (chart.labels.length) {
-				this.percentage_chart = new frappe.Chart( '.performance-percentage-chart', {
+				this.percentage_chart = new frappe.Chart('.performance-percentage-chart', {
 					type: 'percentage',
 					data: {
 						labels: chart.labels,
diff --git a/frappe/public/js/frappe/utils/energy_point_utils.js b/frappe/public/js/frappe/utils/energy_point_utils.js
index df7c875ae9..113f5455ce 100644
--- a/frappe/public/js/frappe/utils/energy_point_utils.js
+++ b/frappe/public/js/frappe/utils/energy_point_utils.js
@@ -5,8 +5,8 @@ frappe.provide('frappe.energy_points');
 
 Object.assign(frappe.energy_points, {
 	get_points(points) {
-		return `<span class="bold" style="color: ${points >= 0 ? '#45A163': '#e42121'}">
-			${points > 0 ? '+': ''}${points}
+		return `<span class="bold" style="color: ${points >= 0 ? '#45A163' : '#e42121'}">
+			${points > 0 ? '+' : ''}${points}
 		</span>`;
 	},
 	format_form_log(log) {
@@ -14,7 +14,7 @@ Object.assign(frappe.energy_points, {
 		const formatted_log = `<span>
 			<!--${this.get_points(log.points)}&nbsp;-->
 			<a href="/app/Form/Energy Point Log/${log.name}">${this.get_form_log_message(log)}</a>
-			${log.reason ? separator + log.reason: ''}
+			${log.reason ? separator + log.reason : ''}
 		</span>`;
 		return formatted_log;
 	},
@@ -22,12 +22,14 @@ Object.assign(frappe.energy_points, {
 		// redundant code to honor readability and to avoid confusion
 		const separator = `<span>&nbsp;-&nbsp;</span>`;
 		const route = frappe.utils.get_form_link(log.reference_doctype, log.reference_name);
-		const formatted_log = `<span>
-			<!--${this.get_points(log.points)}&nbsp;-->
+		const formatted_log = `<div class="flex">
+			<span class="indicator-pill ${log.points >= 0 ? 'green' : 'red'} mr-2">
+				${this.get_points(log.points)}
+			</span>
 			<a href="${route}" class="text-muted">${this.get_history_log_message(log)}</a>
-			${log.reason ? separator + log.reason: ''}
+			${log.reason ? separator + log.reason : ''}
 			${separator + frappe.datetime.comment_when(log.creation)}
-		</span>`;
+		</div>`;
 		return formatted_log;
 	},
 	get_history_log_message(log) {
diff --git a/frappe/public/scss/desk/user_profile.scss b/frappe/public/scss/desk/user_profile.scss
index 4ab4bc0686..f80f91ec88 100644
--- a/frappe/public/scss/desk/user_profile.scss
+++ b/frappe/public/scss/desk/user_profile.scss
@@ -2,6 +2,15 @@
 	padding: var(--padding-md);
 	margin-bottom: var(--margin-xl);
 
+	.chart-wrapper {
+		.null-state {
+			@include flex(flex, center, center, null);
+			margin: 20px 0;
+			width: 100%;
+			height: 100px;
+		}
+	}
+
 	.chart-container {
 		margin: 0 -10px;
 	}