diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index f39fb07acaa..269a3700627 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -20,6 +20,24 @@ function get_item_card_html(item) {
 		item.route = `marketplace/item/${item.hub_item_code}`
 	}
 
+	let recent_message_block = ''
+
+	if(item.recent_message) {
+		let message = item.recent_message
+		let sender = message.sender === frappe.session.user ? 'You' : message.sender
+		let content = $('<p>' + message.content + '</p>').text() //https://stackoverflow.com/a/14337611
+		recent_message_block = `
+			<div class="hub-recent-message">
+				<span class='text-muted'>${comment_when(message.creation, true)}</span>
+				<div class='bold ellipsis'>${message.receiver}</div>
+				<div class='ellipsis'>
+					<span>${sender}: </span>
+					<span>${content}</span>
+				</div>
+			</div>
+		`
+	}
+
 	const item_html = `
 		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
 			<div class="hub-card"
@@ -39,7 +57,7 @@ function get_item_card_html(item) {
 					<img class="hub-card-image" src="${img_url}" />
 					<div class="overlay hub-card-overlay"></div>
 				</div>
-
+				${recent_message_block}
 			</div>
 		</div>
 	`;
diff --git a/erpnext/public/js/hub/pages/buying_messages.js b/erpnext/public/js/hub/pages/buying_messages.js
index c307b8dfccb..2be6d78d836 100644
--- a/erpnext/public/js/hub/pages/buying_messages.js
+++ b/erpnext/public/js/hub/pages/buying_messages.js
@@ -17,9 +17,9 @@ erpnext.hub.BuyingMessages = class BuyingMessages extends SubPage {
 		this.get_item_details(item_code)
 			.then(item_details => {
 				this.item_details = item_details;
+				this.$message_container.find('.hub-section-header h4').text(this.item_details.item_name);
 
 				// make chat area
-				this.$message_container.find('.hub-section-header h4').text(this.item_details.item_name);
 				this.$message_container.find('.hub-section-body').html(`
 					<div class="col-md-7 message-container">
 						<div class="message-list"></div>
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index c0f03946a70..f06f891f71b 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -137,8 +137,19 @@ body[data-route^="marketplace/"] {
 	}
 
 	.hub-card-image {
-		min-width: 100%;
 		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	.hub-recent-message {
+		padding: 10px;
+		.frappe-timestamp {
+			float: right;
+		}
+		div {
+			padding: 3px
+		}
 	}
 
 	.hub-search-container {
@@ -239,7 +250,7 @@ body[data-route^="marketplace/"] {
 		justify-content: space-between;
 		margin-bottom: 20px;
 	}
-	
+
 	.form-container {
 		.frappe-control {
 			max-width: 100% !important;