diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index a1388867687..08f2c94ad44 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -6,7 +6,7 @@ frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
 	});
 
 	$(wrapper).bind('show', () => {
-		frappe.require('/assets/js/hierarchy-chart.min.js', () => {
+		frappe.require('hierarchy-chart.bundle.js', () => {
 			let organizational_chart = undefined;
 			let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
 
diff --git a/erpnext/public/js/hierarchy-chart.bundle.js b/erpnext/public/js/hierarchy-chart.bundle.js
new file mode 100644
index 00000000000..26ab6d92b9d
--- /dev/null
+++ b/erpnext/public/js/hierarchy-chart.bundle.js
@@ -0,0 +1,3 @@
+import "./hierarchy_chart/hierarchy_chart_desktop.js";
+import "./hierarchy_chart/hierarchy_chart_mobile.js";
+import "./templates/node_card.html";
\ No newline at end of file
diff --git a/erpnext/public/scss/erpnext.bundle.scss b/erpnext/public/scss/erpnext.bundle.scss
index d3313c7cee2..b68ddf52b29 100644
--- a/erpnext/public/scss/erpnext.bundle.scss
+++ b/erpnext/public/scss/erpnext.bundle.scss
@@ -1,3 +1,4 @@
 @import "./erpnext";
 @import "./call_popup";
 @import "./point-of-sale";
+@import "./hierarchy_chart";