diff --git a/frappe/public/js/frappe/social/components/EnergyPointHistory.vue b/frappe/public/js/frappe/social/components/EnergyPointHistory.vue
new file mode 100644
index 0000000000..6d15e30633
--- /dev/null
+++ b/frappe/public/js/frappe/social/components/EnergyPointHistory.vue
@@ -0,0 +1,91 @@
+<template>
+	<div>
+		<ul class="log-list">
+			<li class="history-log" v-for="log in history_logs" :key="log.name">
+				<span v-html="frappe.utils.get_points(log.points)"></span>
+				<span v-html="log_body(log)"></span>
+				<span>&nbsp;-&nbsp;</span>
+				<span v-html="frappe.datetime.comment_when(log.creation)"></span>
+			</li>
+			<li v-if="!history_logs.length" class="history-log">
+				{{__('No logs found')}}
+			</li>
+		</ul>
+	</div>
+</template>
+<script>
+export default {
+	props: ['user'],
+	data() {
+		return {
+			history_logs: []
+		}
+	},
+	created() {
+		frappe.db.get_list('Energy Point Log', {
+			filters: {
+				user: this.user,
+				type: ['!=', 'Review']
+			},
+			fields: ['*']
+		}).then(data => {
+			this.history_logs = data;
+		})
+	},
+	methods: {
+		log_body(log) {
+			const doc_link = frappe.utils.get_form_link(log.reference_doctype, log.reference_name, true)
+			const owner_name = frappe.user.full_name(log.owner).bold();
+			if (log.type === 'Appreciation') {
+				return __('{0} appreciated on {1}', [owner_name, doc_link])
+			}
+			if (log.type === 'Criticism') {
+				return __('{0} criticized on {1}', [owner_name, doc_link])
+			}
+			return __('via automatic rule {0} for {1}', [log.rule.bold(), doc_link])
+		}
+	}
+
+}
+</script>
+<style lang="less">
+@import "frappe/public/less/common";
+.log-list {
+	padding: 15px;
+	padding-left: 0px;
+	position: relative;
+}
+.log-list:before {
+	content: " ";
+	border-left: 1px solid @border-color;
+	position: absolute;
+	top: 0px;
+	bottom: 0px;
+	left: 30px;
+	z-index: 0;
+}
+.history-log {
+	.text-muted;
+	.text-medium;
+	list-style: none;
+	padding: 10px;
+	padding-left: 50px;
+	display: flex;
+	span:nth-child(1) {
+		width: 40px;
+		text-align: right;
+		margin-right: 10px;
+	}
+	position: relative;
+}
+.history-log:before {
+	content: " ";
+	width: 7px;
+	height: 7px;
+	background-color: @border-color;
+	position: absolute;
+	border-radius: 50%;
+	left: 27px;
+	top: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/frappe/public/js/frappe/social/pages/UserList.vue b/frappe/public/js/frappe/social/pages/UserList.vue
index 17154542d0..c935d7e830 100644
--- a/frappe/public/js/frappe/social/pages/UserList.vue
+++ b/frappe/public/js/frappe/social/pages/UserList.vue
@@ -16,40 +16,52 @@
 				</span>
 			</li>
 			<li
-				class="user-card"
-				v-for="user in filtered_users" :key="user.name"
-				@click="go_to_profile_page(user.name)">
-				<div class="user-details flex">
-					<span v-html="get_avatar(user.name)"></span>
-					<div>
-						<div>{{ user.fullname }}</div>
-						<div class="text-muted text-medium" :class="{'italic': !user.bio}">
-							{{ frappe.ellipsis(user.bio, 100) || 'No Bio'}}
-						</div>
+				v-for="user in filtered_users"
+				:key="user.name"
+				@click="toggle_log(user.name)">
+				<div class="user-card">
+					<div class="user-details flex">
+						<span v-html="get_avatar(user.name)"></span>
+						<span>
+							<a @click="go_to_profile_page(user.name)">{{ user.fullname }}</a>
+							<div class="text-muted text-medium" :class="{'italic': !user.bio}">
+								{{ frappe.ellipsis(user.bio, 100) || 'No Bio'}}
+							</div>
+						</span>
 					</div>
+					<span class="text-muted text-nowrap user-points">
+						{{ user.energy_points }}
+					</span>
+					<span class="text-muted text-nowrap user-points">
+						{{ user.review_points }}
+					</span>
+					<span class="text-muted text-nowrap user-points">
+						{{ user.given_points }}
+					</span>
 				</div>
-				<span class="text-muted text-nowrap user-points">
-					{{ user.energy_points }}
-				</span>
-				<span class="text-muted text-nowrap user-points">
-					{{ user.review_points }}
-				</span>
-				<span class="text-muted text-nowrap user-points">
-					{{ user.given_points }}
-				</span>
+				<energy-point-history
+					v-if="show_log_for===user.name"
+					class="energy-point-history"
+					:user="user.name">
+				</energy-point-history>
 			</li>
-			<li class="text-muted" v-if="!filtered_users.length">{{__('No user found')}}</li>
+			<li class="user-card text-muted" v-if="!filtered_users.length">{{__('No user found')}}</li>
 		</ul>
 	</div>
 </template>
 <script>
+import EnergyPointHistory from '../components/EnergyPointHistory.vue';
 export default {
+	components: {
+		EnergyPointHistory
+	},
 	data() {
 		return {
 			users: [],
 			filter_users_by: null,
 			sort_users_by: 'energy_points',
 			sort_order: 'desc',
+			show_log_for: null
 		}
 	},
 	computed: {
@@ -117,6 +129,13 @@ export default {
 					return user;
 				});
 			});
+		},
+		toggle_log(user) {
+			if (this.show_log_for === user) {
+				this.show_log_for = null
+			} else {
+				this.show_log_for = user
+			}
 		}
 	}
 }
@@ -133,7 +152,6 @@ export default {
 		cursor: pointer;
 		padding: 12px 15px;
 		border-bottom: 1px solid @border-color;
-
 		.user-details {
 			flex: 1;
 
@@ -165,6 +183,12 @@ export default {
 	width: 100%;
 	left: 0;
 }
+.energy-point-history {
+	border-bottom: 1px solid @border-color;
+	max-height: 300px;
+	overflow: scroll;
+	background-color: @light-bg;
+}
 </style>