diff --git a/erpnext/public/js/hub/PageContainer.vue b/erpnext/public/js/hub/PageContainer.vue
new file mode 100644
index 00000000000..456da9a4f12
--- /dev/null
+++ b/erpnext/public/js/hub/PageContainer.vue
@@ -0,0 +1,40 @@
+<template>
+	<div class="hub-page-container">
+		<component :is="current_page"></component>
+	</div>
+</template>
+<script>
+import Home from './pages/Home.vue';
+import SavedProducts from './pages/SavedProducts.vue';
+import Publish from './pages/Publish.vue';
+import Category from './pages/Category.vue';
+import Search from './pages/Search.vue';
+import PublishedProducts from './pages/PublishedProducts.vue';
+
+const route_map = {
+	'marketplace/home': Home,
+	'marketplace/saved-products': SavedProducts,
+	'marketplace/publish': Publish
+}
+
+export default {
+	data() {
+		return {
+			current_page: this.get_current_page()
+		}
+	},
+	mounted() {
+		frappe.route.on('change', () => {
+			this.set_current_page();
+		});
+	},
+	methods: {
+		set_current_page() {
+			this.current_page = this.get_current_page();
+		},
+		get_current_page() {
+			return route_map[frappe.get_route_str()];
+		}
+	}
+}
+</script>
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index a2c855389fc..7cb228118c7 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -1,8 +1,4 @@
 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;
@@ -52,7 +48,62 @@ function get_item_card_html(item) {
 	return item_html;
 }
 
-function get_item_message_card_html(item) {
+function get_local_item_card_html(item) {
+	const item_name = item.item_name || item.name;
+	const title = strip_html(item_name);
+	const img_url = item.image;
+	const company_name = item.company;
+
+	const is_active = item.publish_in_hub;
+	const id = item.hub_item_code || item.item_code;
+
+	// 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) {
+		subtitle.push(company_name);
+	}
+
+	let dot_spacer = '<span aria-hidden="true"> · </span>';
+	subtitle = subtitle.join(dot_spacer);
+
+	const edit_item_button = `<div class="hub-card-overlay-button" data-route="Form/Item/${item.item_name}">
+		<button class="btn btn-default zoom-view">
+			<i class="octicon octicon-pencil text-muted"></i>
+		</button>
+	</div>`;
+
+	const item_html = `
+		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
+			<div class="hub-card is-local ${is_active ? 'active' : ''}" data-id="${id}">
+				<div class="hub-card-header flex">
+					<div class="ellipsis">
+						<div class="hub-card-title ellipsis bold">${title}</div>
+						<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+					</div>
+					<i class="octicon octicon-check text-success"></i>
+				</div>
+				<div class="hub-card-body">
+					<img class="hub-card-image" src="${img_url}" />
+					<div class="hub-card-overlay">
+						<div class="hub-card-overlay-body">
+							${edit_item_button}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	`;
+
+	return item_html;
+}
+
+function get_buying_item_message_card_html(item) {
 	const item_name = item.item_name || item.name;
 	const title = strip_html(item_name);
 
@@ -60,21 +111,64 @@ function get_item_message_card_html(item) {
 	const sender = message.sender === frappe.session.user ? 'You' : message.sender
 	const content = strip_html(message.content)
 
+	// route
+	item.route = `marketplace/buying/${item.hub_item_code}`
+
+	const item_html = `
+		<div class="col-md-7">
+			<div class="hub-list-item" data-route="${item.route}">
+				<div class="hub-list-left">
+					<img class="hub-list-image" src="${item.image}">
+					<div class="hub-list-body ellipsis">
+						<div class="hub-list-title">${item_name}</div>
+						<div class="hub-list-subtitle ellipsis">
+							<span>${sender}: </span>
+							<span>${content}</span>
+						</div>
+					</div>
+				</div>
+				<div class="hub-list-right">
+					<span class="text-muted">${comment_when(message.creation, true)}</span>
+				</div>
+			</div>
+		</div>
+	`;
+
+	return item_html;
+}
+
+function get_selling_item_message_card_html(item) {
+	const item_name = item.item_name || item.name;
+	const title = strip_html(item_name);
+
 	// route
 	if (!item.route) {
 		item.route = `marketplace/item/${item.hub_item_code}`
 	}
 
+	let received_messages = '';
+	item.received_messages.forEach(message => {
+		const sender = message.sender === frappe.session.user ? 'You' : message.sender
+		const content = strip_html(message.content)
+
+		received_messages += `
+			<div class="received-message">
+				<span class="text-muted">${comment_when(message.creation, true)}</span>
+				<div class="ellipsis">
+					<span class="bold">${sender}: </span>
+					<span>${content}</span>
+				</div>
+			</div>
+		`
+	});
 
 	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 class="selling-item-message-card">
+			<div class="selling-item-detail" data-route="${item.route}">
+				<img class="item-image" src="${item.image}">
+				<h5 class="item-name">${item_name}</h5>
+				<div class="received-message-container">
+					${received_messages}
 				</div>
 			</div>
 		</div>
@@ -84,5 +178,8 @@ function get_item_message_card_html(item) {
 }
 
 export {
-	get_item_card_html
+	get_item_card_html,
+	get_local_item_card_html,
+	get_buying_item_message_card_html,
+	get_selling_item_message_card_html
 }
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
index 5db2c561a57..61b8af6b0b8 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 margin-bottom flex">
+		? `<div class="hub-items-header flex">
 				<h4>${title}</h4>
 				${action}
 			</div>`
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 433f7da85b1..0b0e1be652c 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -7,6 +7,7 @@ import './pages/messages';
 import './pages/buying_messages';
 import './pages/not_found';
 
+import PageContainer from './PageContainer.vue';
 import Home from './pages/Home.vue';
 import SavedProducts from './pages/SavedProducts.vue';
 import Publish from './pages/Publish.vue';
@@ -91,9 +92,13 @@ erpnext.hub.Marketplace = class Marketplace {
 				<li class="hub-sidebar-item text-muted" data-route="marketplace/publish">
 					${__('Publish Products')}
 				</li>
-				<li class="hub-sidebar-item text-muted" data-route="marketplace/messages">
-					${__('Messages')}
-				</li>`
+				<li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
+					${__('Selling')}
+				</li>
+				<li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
+					${__('Buying')}
+				</li>
+				`
 
 			: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
 					${__('Become a seller')}
@@ -143,6 +148,13 @@ erpnext.hub.Marketplace = class Marketplace {
 
 	make_body() {
 		this.$body = this.$parent.find('.layout-main-section');
+		// this.$page_container = $('<div class="hub-page-container">').appendTo(this.$body);
+
+		// new Vue({
+		// 	el: '.hub-page-container',
+		// 	render: h => h(PageContainer)
+		// });
+
 		erpnext.hub.on('seller-registered', () => {
 			this.registered = 1;
 			this.make_sidebar_nav_buttons();
@@ -214,12 +226,12 @@ erpnext.hub.Marketplace = class Marketplace {
 			this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body);
 		}
 
-		if (route[1] === 'messages' && !this.subpages['messages']) {
-			this.subpages['messages'] = new erpnext.hub.Messages(this.$body);
+		if (route[1] === 'buying' && !this.subpages['buying']) {
+			this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
 		}
 
-		if (route[1] === 'buy' && !this.subpages['buy']) {
-			this.subpages['buy'] = new erpnext.hub.BuyingMessages(this.$body);
+		if (route[1] === 'selling' && !this.subpages['selling']) {
+			this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
 		}
 
 		// dont allow unregistered users to access registered routes
diff --git a/erpnext/public/js/hub/pages/buying_messages.js b/erpnext/public/js/hub/pages/buying_messages.js
index 2be6d78d836..7835fc36fdc 100644
--- a/erpnext/public/js/hub/pages/buying_messages.js
+++ b/erpnext/public/js/hub/pages/buying_messages.js
@@ -1,19 +1,24 @@
 import SubPage from './subpage';
 
-erpnext.hub.BuyingMessages = class BuyingMessages extends SubPage {
+erpnext.hub.MessageList = class BuyingMessages extends SubPage {
 	make_wrapper() {
+		const messages_of = this.options[0];
+		if (messages_of === 'Buying') {
+			this.back_route = 'marketplace/buying-messages'
+		} else {
+			this.back_route = 'marketplace/selling-messages'
+		}
 		super.make_wrapper();
-		this.add_back_link(__('Back to Messages'), 'marketplace/messages');
+		this.add_back_link(__('Back to Messages'), this.back_route);
 		this.$message_container = this.add_section({ title: 'Buy' });
 	}
 
 	refresh() {
 		const item_code = frappe.get_route()[2] || null;
 		if (!item_code) {
-			frappe.set_route('marketplace/messages');
+			frappe.set_route(this.back_route);
 			return;
 		}
-
 		this.get_item_details(item_code)
 			.then(item_details => {
 				this.item_details = item_details;
diff --git a/erpnext/public/js/hub/pages/messages.js b/erpnext/public/js/hub/pages/messages.js
index 683cba01f03..f8faa99934c 100644
--- a/erpnext/public/js/hub/pages/messages.js
+++ b/erpnext/public/js/hub/pages/messages.js
@@ -1,43 +1,28 @@
 import SubPage from './subpage';
 import { get_item_card_container_html } from '../components/items_container';
+import { get_buying_item_message_card_html } from '../components/item_card';
+import { get_selling_item_message_card_html } from '../components/item_card';
 import { get_empty_state } from '../components/empty_state';
 
-erpnext.hub.Messages = class Messages extends SubPage {
-	make_wrapper() {
-		super.make_wrapper();
-	}
-
+erpnext.hub.Buying = class Buying extends SubPage {
 	refresh() {
-		const res = Promise.all([
-			this.get_buying_items(),
-			this.get_selling_items()
-		]);
-
-		res.then(([buying_items, selling_items]) => {
+		this.get_items_for_messages().then((items) => {
 			this.empty();
-
-			if (selling_items.length) {
-				// selling_items.map(item => {
-				// 	item.route = `marketplace/sell/${item.hub_item_code}/${}`
-				// });
-				this.render(selling_items, __('Selling'));
-			}
-
-			if (buying_items.length) {
-				buying_items.map(item => {
-					item.route = `marketplace/buy/${item.hub_item_code}`
+			if (items.length) {
+				items.map(item => {
+					item.route = `marketplace/buying/${item.hub_item_code}`
 				})
-				this.render(buying_items, __('Buying'));
+				this.render(items, __('Buying'));
 			}
 
-			if (!buying_items.length && !selling_items.length) {
+			if (!items.length && !items.length) {
 				this.render_empty_state();
 			}
 		});
 	}
 
 	render(items = [], title) {
-		const html = get_item_card_container_html(items, title);
+		const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
 		this.$wrapper.append(html);
 	}
 
@@ -46,16 +31,40 @@ erpnext.hub.Messages = class Messages extends SubPage {
 		this.$wrapper.html(empty_state);
 	}
 
-	get_buying_items() {
+	get_items_for_messages() {
 		return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
 	}
+}
 
-	get_selling_items() {
-		return hub.call('get_selling_items_for_messages');
+erpnext.hub.Selling = class Selling extends SubPage {
+	refresh() {
+		this.get_items_for_messages().then((items) => {
+			this.empty();
+			if (items.length) {
+				items.map(item => {
+					item.route = `marketplace/selling/${item.hub_item_code}`
+				})
+				this.render(items, __('Selling'));
+			}
+
+			if (!items.length && !items.length) {
+				this.render_empty_state();
+			}
+		});
 	}
 
-	get_interactions() {
-		return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
+	render(items = [], title) {
+		const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
+		this.$wrapper.append(html);
+	}
+
+	render_empty_state() {
+		const empty_state = get_empty_state(__('You haven\'t interacted with any seller yet.'));
+		this.$wrapper.html(empty_state);
+	}
+
+	get_items_for_messages() {
+		return hub.call('get_selling_items_for_messages', {});
 	}
 }
 
@@ -92,4 +101,4 @@ function get_message_html(message) {
 			<p>${message.content}</p>
 		</div>
 	`;
-}
+}
\ No newline at end of file
diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js
index 07ea11e0d49..162aa52b294 100644
--- a/erpnext/public/js/hub/pages/subpage.js
+++ b/erpnext/public/js/hub/pages/subpage.js
@@ -1,6 +1,7 @@
 export default class SubPage {
-	constructor(parent, options) {
+	constructor(parent, ...options) {
 		this.$parent = $(parent);
+		this.options = options;
 		this.make_wrapper(options);
 
 		// generic action handler
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 720a9d80603..779d45d90bc 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -192,24 +192,75 @@ body[data-route^="marketplace/"] {
 		margin-bottom: 20px;
 	}
 
-	.item-message-card {
-		height: 80px;
+	.hub-list-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border: 1px solid @border-color;
+		margin-bottom: 15px;
+		border-radius: 3px;
+	}
+
+	.hub-list-left {
+		display: flex;
+		align-items: center;
+		max-width: 90%;
+	}
+
+	.hub-list-right {
+		padding-right: 15px;
+	}
+
+	.hub-list-image {
+		width: 58px;
+		height: 58px;
+		border-right: 1px solid @border-color;
+
+		&::after {
+			font-size: 12px;
+		}
+	}
+
+	.hub-list-body {
+		padding: 12px 15px;
+	}
+
+	.hub-list-title {
+		font-weight: bold;
+	}
+
+	.hub-list-subtitle {
+		color: @text-muted;
+	}
+
+	.selling-item-message-card {
 		max-width: 500px;
-		margin-bottom: 10px;
-		padding: 10px;
-		border-radius: 4px;
-		.message-body {
-			margin-left: 60px;
+		margin-bottom: 15px;
+		border-radius: 3px;
+		border: 1px solid @border-color;
+		.selling-item-detail {
+			overflow: auto;
+			.item-image {
+				float: left;
+				height: 80px;
+				width: 80px;
+				object-fit: contain;
+				margin: 5px;
+			}
+			.item-name {
+				margin-left: 10px;
+			}
 		}
-		.item-image {
-			float: left;
-			height: 50px;
-			width: 50px;
-			object-fit: contain;
-			// border-radius: 50%
-		}
-		.frappe-timestamp {
-			float: right;
+		.received-message-container {
+			clear: left;
+			background-color: @light-bg;
+			.received-message {
+				border-top: 1px solid @border-color;
+				padding: 10px;
+			}
+			.frappe-timestamp {
+				float: right;
+			}
 		}
 	}