diff --git a/erpnext/public/js/hub/components/SectionHeader.vue b/erpnext/public/js/hub/components/SectionHeader.vue
new file mode 100644
index 0000000000..05a2f838a0
--- /dev/null
+++ b/erpnext/public/js/hub/components/SectionHeader.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="hub-items-header level"><slot></slot></div>
+</template>
diff --git a/erpnext/public/js/hub/pages/Home.vue b/erpnext/public/js/hub/pages/Home.vue
index e91fb38e60..1d1973caf9 100644
--- a/erpnext/public/js/hub/pages/Home.vue
+++ b/erpnext/public/js/hub/pages/Home.vue
@@ -7,36 +7,34 @@
 			:placeholder="search_placeholder"
 			:on_search="set_search_route"
 			v-model="search_value"
-		>
-		</search-input>
+		/>
 
-		<div v-for="section in sections"
-			:key="section.title"
-		>
-			<div class="hub-items-header margin-bottom level">
+		<div v-for="section in sections" :key="section.title">
+
+			<section-header>
 				<h4>{{ section.title }}</h4>
 				<p :data-route="'marketplace/category/' + section.title">{{ 'See All' }}</p>
-			</div>
+			</section-header>
 
 			<item-cards-container
 				:container_name="section.title"
 				:items="section.items"
 				:item_id_fieldname="item_id_fieldname"
 				:on_click="go_to_item_details_page"
-			>
-			</item-cards-container>
+			/>
 		</div>
-
 	</div>
 </template>
 
 <script>
 import SearchInput from '../components/SearchInput.vue';
+import SectionHeader from '../components/SectionHeader.vue';
 import ItemCardsContainer from '../components/ItemCardsContainer.vue';
 
 export default {
 	name: 'home-page',
 	components: {
+		SectionHeader,
 		SearchInput,
 		ItemCardsContainer
 	},