diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 269a3700627..e2546e60c4f 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -1,4 +1,7 @@
 function get_item_card_html(item) {
+	if (item.recent_message) {
+		return get_item_message_card_html(item);
+	}
 	const item_name = item.item_name || item.name;
 	const title = strip_html(item_name);
 	const img_url = item.image;
@@ -7,9 +10,11 @@ function get_item_card_html(item) {
 	// Subtitle
 	let subtitle = [comment_when(item.creation)];
 	const rating = item.average_rating;
+
 	if (rating > 0) {
 		subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
 	}
+	
 	subtitle.push(company_name);
 
 	let dot_spacer = '<span aria-hidden="true"> · </span>';
@@ -20,24 +25,6 @@ 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"
@@ -57,7 +44,6 @@ 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>
 	`;
@@ -77,10 +63,12 @@ function get_local_item_card_html(item) {
 	// Subtitle
 	let subtitle = [comment_when(item.creation)];
 	const rating = item.average_rating;
+
 	if (rating > 0) {
 		subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
 	}
-	if(company_name) {
+
+	if (company_name) {
 		subtitle.push(company_name);
 	}
 
@@ -118,7 +106,38 @@ function get_local_item_card_html(item) {
 	return item_html;
 }
 
+function get_item_message_card_html(item) {
+	const item_name = item.item_name || item.name;
+	const title = strip_html(item_name);
+
+	const message = item.recent_message
+	const sender = message.sender === frappe.session.user ? 'You' : message.sender
+	const content = strip_html(message.content)
+
+	// route
+	if (!item.route) {
+		item.route = `marketplace/item/${item.hub_item_code}`
+	}
+
+
+	const item_html = `
+		<div class="item-message-card" data-route="${item.route}">
+			<img class="item-image" src='${item.image}'>
+			<div class="message-body">
+				<span class='text-muted'>${comment_when(message.creation, true)}</span>
+				<span class="bold">${item_name}</span>
+				<div class='ellipsis'>
+					<span>${sender}: </span>
+					<span>${content}</span>
+				</div>
+			</div>
+		</div>
+	`;
+
+	return item_html;
+}
+
 export {
 	get_item_card_html,
-    get_local_item_card_html
+	get_local_item_card_html
 }
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
index 918569bd16d..5db2c561a57 100644
--- a/erpnext/public/js/hub/components/items_container.js
+++ b/erpnext/public/js/hub/components/items_container.js
@@ -3,7 +3,7 @@ import { get_item_card_html } from './item_card';
 function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
 	const items_html = (items || []).map(item => get_item_html(item)).join('');
 	const title_html = title
-		? `<div class="hub-items-header col-sm-12 margin-bottom flex">
+		? `<div class="hub-items-header margin-bottom flex">
 				<h4>${title}</h4>
 				${action}
 			</div>`
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index f06f891f71b..5f497d9712b 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -142,16 +142,6 @@ body[data-route^="marketplace/"] {
 		object-fit: contain;
 	}
 
-	.hub-recent-message {
-		padding: 10px;
-		.frappe-timestamp {
-			float: right;
-		}
-		div {
-			padding: 3px
-		}
-	}
-
 	.hub-search-container {
 		margin-bottom: 20px;
 
@@ -251,6 +241,27 @@ body[data-route^="marketplace/"] {
 		margin-bottom: 20px;
 	}
 
+	.item-message-card {
+		height: 80px;
+		max-width: 500px;
+		margin-bottom: 10px;
+		padding: 10px;
+		border-radius: 4px;
+		.message-body {
+			margin-left: 60px;
+		}
+		.item-image {
+			float: left;
+			height: 50px;
+			width: 50px;
+			object-fit: contain;
+			// border-radius: 50%
+		}
+		.frappe-timestamp {
+			float: right;
+		}
+	}
+
 	.form-container {
 		.frappe-control {
 			max-width: 100% !important;