diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 9f5a6ef6834..a1b0ae022d1 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -21,7 +21,7 @@ function get_item_card_html(item) {
 	}
 
 	const item_html = `
-		<div class="col-md-3 col-sm-4 col-xs-6">
+		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
 			<div class="hub-card"
 				data-hub-item-code="${item.hub_item_code}"
 				data-route="${item.route}">
@@ -74,7 +74,7 @@ function get_local_item_card_html(item) {
 	</div>`;
 
 	const item_html = `
-		<div class="col-md-3 col-sm-4 col-xs-6">
+		<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>
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index 5eb317891cb..f49365833e6 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -226,7 +226,14 @@ erpnext.hub.Publish = class Publish extends SubPage {
 
 		items.map(item => {
 			this.fetched_items_dict[item.item_code] = item;
-		})
+		});
+
+		// remove the items which doesn't have a valid image
+		setTimeout(() => {
+			items_container.find('.no-image').each(function() {
+				$(this).closest('.hub-card-container').remove();
+			});
+		}, 1000);
 	}
 
 	get_valid_items() {