diff --git a/erpnext/public/js/hub/components/Rating.vue b/erpnext/public/js/hub/components/Rating.vue
new file mode 100644
index 00000000000..33290b8e202
--- /dev/null
+++ b/erpnext/public/js/hub/components/Rating.vue
@@ -0,0 +1,16 @@
+<template>
+    <span>
+        <i v-for="index in max_rating"
+            :key="index"
+            class="fa fa-fw star-icon"
+            :class="{'fa-star': index <= rating, 'fa-star-o': index > rating}"
+        >
+        </i>
+    </span>
+</template>
+
+<script>
+export default {
+    props: ['rating', 'max_rating']
+}
+</script>
diff --git a/erpnext/public/js/hub/components/ReviewArea.vue b/erpnext/public/js/hub/components/ReviewArea.vue
index 64057cd6ace..9454ec6197e 100644
--- a/erpnext/public/js/hub/components/ReviewArea.vue
+++ b/erpnext/public/js/hub/components/ReviewArea.vue
@@ -1,11 +1,12 @@
 <template>
 	<div>
 		<div ref="review-area" class="timeline-head"></div>
+		<div class="timeline-items"></div>
 	</div>
 </template>
 <script>
 export default {
-	props: ['hub_item_code'],
+	props: ['hub_item_name', 'reviews'],
 	mounted() {
 		this.make_input();
 	},
@@ -19,17 +20,19 @@ export default {
 		},
 
 		on_submit_review(values) {
-			values.user = frappe.session.user;
-			values.username = frappe.session.user_fullname;
+			values.user = hub.settings.company_email;
 
 			this.review_area.reset();
-			this.$emit('change', message);
 
 			hub.call('add_item_review', {
-				hub_item_code: this.hub_item_code,
+				hub_item_name: this.hub_item_name,
 				review: JSON.stringify(values)
 			})
-			// .then(this.push_review_in_review_area.bind(this));
+			.then(this.push_review.bind(this));
+		},
+
+		push_review(){
+			//
 		}
 	}
 }
diff --git a/erpnext/public/js/hub/pages/Item.vue b/erpnext/public/js/hub/pages/Item.vue
index 5ce0bcfb268..70d4237fa96 100644
--- a/erpnext/public/js/hub/pages/Item.vue
+++ b/erpnext/public/js/hub/pages/Item.vue
@@ -28,7 +28,7 @@
 
 		</detail-view>
 
-		<review-area :hub_item_name="hub_item_name"></review-area>
+		<review-area :hub_item_name="hub_item_name" :reviews="reviews"></review-area>
 	</div>
 </template>
 
@@ -52,6 +52,7 @@ export default {
 			title: null,
 			image: null,
 			sections: [],
+			reviews: [],
 
 			menu_items: [
 				{
@@ -168,6 +169,8 @@ export default {
 
 			this.image = this.item.image;
 
+			this.reviews = this.item.reviews || [];
+
 			this.sections = [
 				{
 					title: __('Product Description'),
diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js
deleted file mode 100644
index 162aa52b294..00000000000
--- a/erpnext/public/js/hub/pages/subpage.js
+++ /dev/null
@@ -1,86 +0,0 @@
-export default class SubPage {
-	constructor(parent, ...options) {
-		this.$parent = $(parent);
-		this.options = options;
-		this.make_wrapper(options);
-
-		// generic action handler
-		this.$wrapper.on('click', '[data-action]', e => {
-			const $target = $(e.currentTarget);
-			const action = $target.data().action;
-
-			if (action && this[action]) {
-				this[action].apply(this, $target);
-			}
-		})
-
-		// handle broken images after every render
-		if (this.render) {
-			this._render = this.render.bind(this);
-
-			this.render = (...args) => {
-				this._render(...args);
-				frappe.dom.handle_broken_images(this.$wrapper);
-			}
-		}
-	}
-
-	make_wrapper() {
-		const page_name = frappe.get_route()[1];
-		this.$wrapper = $(`<div class="marketplace-page"
-			data-page-name="${page_name}">`
-		).appendTo(this.$parent);
-
-		this.hide();
-	}
-
-	add_section({ title, body } = {}) {
-		this._sections = this._sections || {};
-
-		if (title && this._sections[title]) {
-			return this._sections[title];
-		}
-
-		const $section = $(`
-			<div class="row hub-section">
-				<div class="col-sm-12 hub-section-header padding-bottom flex">
-					<h4>${title || ''}</h4>
-				</div>
-				<div class="col-sm-12 hub-section-body">
-					${body || ''}
-				</div>
-			</div>
-		`);
-
-		if (title) {
-			this._sections[title] = $section;
-		}
-
-		this.$wrapper.append($section);
-		return $section;
-	}
-
-	add_back_link(title, route) {
-		const $section = this.add_section();
-		this.$wrapper.prepend($section);
-
-		$section.addClass('margin-bottom');
-		$section.find('.hub-section-header').remove()
-		$section.find('.hub-section-body').html(`
-			<button class="btn btn-xs btn-default" data-route="${route}">${title}</button>
-		`);
-	}
-
-	empty() {
-		this.$wrapper.empty();
-	}
-
-	show() {
-		this.refresh();
-		this.$wrapper.show();
-	}
-
-	hide() {
-		this.$wrapper.hide();
-	}
-}