diff --git a/erpnext/public/js/hub/components/ItemCardsContainer.vue b/erpnext/public/js/hub/components/ItemCardsContainer.vue
index 8014296fb1..4ccb9dcc0e 100644
--- a/erpnext/public/js/hub/components/ItemCardsContainer.vue
+++ b/erpnext/public/js/hub/components/ItemCardsContainer.vue
@@ -23,6 +23,11 @@ export default {
 		item_id() {
 			return this.is_local ? 'item_code' : 'hub_item_code';
 		}
+	},
+	watch: {
+		items() {
+			frappe.dom.handle_broken_images($(this.$el));
+		}
 	}
 }
 </script>
diff --git a/erpnext/public/js/hub/components/PublishPage.vue b/erpnext/public/js/hub/components/PublishPage.vue
index 06241d6bb3..2b2956f323 100644
--- a/erpnext/public/js/hub/components/PublishPage.vue
+++ b/erpnext/public/js/hub/components/PublishPage.vue
@@ -3,6 +3,12 @@
 		class="marketplace-page"
 		:data-page-name="page_name"
 	>
+		<search-input
+			placeholder="Search Items ..."
+			:on_search="get_valid_items"
+			v-model="search_value"
+		>
+		</search-input>
 		<item-cards-container
 			:items="valid_items"
 			:is_local="1"
@@ -12,6 +18,7 @@
 </template>
 
 <script>
+import SearchInput from './SearchInput.vue';
 import ItemCardsContainer from './ItemCardsContainer.vue';
 
 export default {
@@ -24,31 +31,22 @@ export default {
 		};
 	},
 	components: {
+		SearchInput,
 		ItemCardsContainer
 	},
-	// watch: {
-	// 	// whenever search term changes, this function will run
-	// 	question: function (newQuestion, oldQuestion) {
-	// 		this.answer = 'Waiting for you to stop typing...'
-	// 		this.debouncedGetAnswer()
-	// 	}
-	// },
 	created() {
 		this.get_valid_items();
 	},
 	methods: {
 		get_valid_items() {
-			var vm = this;
-
 			frappe.call(
 				'erpnext.hub_node.api.get_valid_items',
 				{
 					search_value: this.search_value
 				}
 			)
-			.then(function (r) {
-				vm.valid_items = r.message;
-				frappe.dom.handle_broken_images(this.$wrapper);
+			.then((r) => {
+				this.valid_items = r.message;
 			})
 		}
 	}
diff --git a/erpnext/public/js/hub/components/SearchInput.vue b/erpnext/public/js/hub/components/SearchInput.vue
new file mode 100644
index 0000000000..6647b154d7
--- /dev/null
+++ b/erpnext/public/js/hub/components/SearchInput.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="hub-search-container">
+	<input
+		type="text"
+		class="form-control"
+		:placeholder="placeholder"
+		:value="value"
+		@input="on_input">
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		placeholder: String,
+		value: String,
+		on_search: Function
+	},
+	methods: {
+		on_input(event) {
+			this.$emit('input', event.target.value);
+			this.on_search();
+
+			// TODO: Debouncing doesn't fire search
+			// frappe.utils.debounce(this.on_search, 500);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index 741f080ac5..7b20907428 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -8,29 +8,32 @@ import PublishPage from '../components/PublishPage.vue';
 
 erpnext.hub.Publish = class Publish {
 	constructor(parent) {
-		this.items_data_to_publish = {};
-		this.unpublished_items = [];
-		this.fetched_items = [];
-		this.fetched_items_dict = {};
-
 		this.$wrapper = $(`<div id="vue-area">`).appendTo($(parent));
 
-		frappe.app = new Vue({
-			render: h => h(PublishPage),
-			mounted() {
-				console.log('Mounted For Publish page');
-			},
+		new Vue({
+			render: h => h(PublishPage)
 		}).$mount('#vue-area');
 	}
 
 	show() {
-		this.$wrapper.show();
+		$('[data-page-name="publish"]').show();
 	}
 
 	hide() {
-		this.$wrapper.hide();
+		$('[data-page-name="publish"]').hide();
 	}
 
+
+
+
+
+
+	// this.items_data_to_publish = {};
+	// this.unpublished_items = [];
+	// this.fetched_items = [];
+	// this.fetched_items_dict = {};
+
+
 	show_message(message) {
 		this.$wrapper.prepend(NotificationMessage(message));
 	}