diff --git a/.eslintrc b/.eslintrc
index cb45ce5..321af08 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -154,6 +154,7 @@
 		"before": true,
 		"beforeEach": true,
 		"onScan": true,
+		"html2canvas": true,
 		"extend_cscript": true,
 		"localforage": true,
 	}
diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
index 3959268..0be9bd8 100644
--- a/.github/workflows/ui-tests.yml
+++ b/.github/workflows/ui-tests.yml
@@ -104,7 +104,7 @@
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site test_site run-ui-tests erpnext --headless
         env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_RECORD_KEY: 60a8e3bf-08f5-45b1-9269-2b207d7d30cd
 
       - name: Show bench console if tests failed
         if: ${{ failure() }}
diff --git a/cypress/integration/test_organizational_chart_desktop.js b/cypress/integration/test_organizational_chart_desktop.js
new file mode 100644
index 0000000..fb46bbb
--- /dev/null
+++ b/cypress/integration/test_organizational_chart_desktop.js
@@ -0,0 +1,111 @@
+context('Organizational Chart', () => {
+	before(() => {
+		cy.login();
+		cy.visit('/app/website');
+		cy.awesomebar('Organizational Chart');
+
+		cy.window().its('frappe.csrf_token').then(csrf_token => {
+			return cy.request({
+				url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+					'X-Frappe-CSRF-Token': csrf_token
+				},
+				timeout: 60000
+			}).then(res => {
+				expect(res.status).eq(200);
+				cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
+				cy.get('@input')
+					.clear({ force: true })
+					.type('Test Org Chart{enter}', { force: true })
+					.blur({ force: true });
+			});
+		});
+	});
+
+	it('renders root nodes and loads children for the first expandable node', () => {
+		// check rendered root nodes and the node name, title, connections
+		cy.get('.hierarchy').find('.root-level ul.node-children').children()
+			.should('have.length', 2)
+			.first()
+			.as('first-child');
+
+		cy.get('@first-child').get('.node-name').contains('Test Employee 1');
+		cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
+		cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2 Connections');
+
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// children of 1st root visible
+			cy.get(`div[data-parent="${employee_records.message[0]}"]`).as('child-node');
+			cy.get('@child-node')
+				.should('have.length', 1)
+				.should('be.visible');
+			cy.get('@child-node').get('.node-name').contains('Test Employee 3');
+
+			// connectors between first root node and immediate child
+			cy.get(`path[data-parent="${employee_records.message[0]}"]`)
+				.should('be.visible')
+				.invoke('attr', 'data-child')
+				.should('equal', employee_records.message[2]);
+		});
+	});
+
+	it('hides active nodes children and connectors on expanding sibling node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// click sibling
+			cy.get(`#${employee_records.message[1]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// child nodes and connectors hidden
+			cy.get(`[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
+			cy.get(`path[data-parent="${employee_records.message[0]}"]`).should('not.be.visible');
+		});
+	});
+
+	it('collapses previous level nodes and refreshes connectors on expanding child node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// click child node
+			cy.get(`#${employee_records.message[3]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// previous level nodes: parent should be on active-path; other nodes should be collapsed
+			cy.get(`#${employee_records.message[0]}`).should('have.class', 'collapsed');
+			cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
+
+			// previous level connectors refreshed
+			cy.get(`path[data-parent="${employee_records.message[1]}"]`)
+				.should('have.class', 'collapsed-connector');
+
+			// child node's children and connectors rendered
+			cy.get(`[data-parent="${employee_records.message[3]}"]`).should('be.visible');
+			cy.get(`path[data-parent="${employee_records.message[3]}"]`).should('be.visible');
+		});
+	});
+
+	it('expands previous level nodes', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`)
+				.click()
+				.should('have.class', 'active');
+
+			cy.get(`[data-parent="${employee_records.message[0]}"]`)
+				.should('be.visible');
+
+			cy.get('ul.hierarchy').children().should('have.length', 2);
+			cy.get(`#connectors`).children().should('have.length', 1);
+		});
+	});
+
+	it('edit node navigates to employee master', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
+				.click();
+
+			cy.url().should('include', `/employee/${employee_records.message[0]}`);
+		});
+	});
+});
diff --git a/cypress/integration/test_organizational_chart_mobile.js b/cypress/integration/test_organizational_chart_mobile.js
new file mode 100644
index 0000000..df90dbf
--- /dev/null
+++ b/cypress/integration/test_organizational_chart_mobile.js
@@ -0,0 +1,190 @@
+context('Organizational Chart Mobile', () => {
+	before(() => {
+		cy.login();
+		cy.viewport(375, 667);
+		cy.visit('/app/website');
+		cy.awesomebar('Organizational Chart');
+
+		cy.window().its('frappe.csrf_token').then(csrf_token => {
+			return cy.request({
+				url: `/api/method/erpnext.tests.ui_test_helpers.create_employee_records`,
+				method: 'POST',
+				headers: {
+					Accept: 'application/json',
+					'Content-Type': 'application/json',
+					'X-Frappe-CSRF-Token': csrf_token
+				},
+				timeout: 60000
+			}).then(res => {
+				expect(res.status).eq(200);
+				cy.get('.frappe-control[data-fieldname=company] input').focus().as('input');
+				cy.get('@input')
+					.clear({ force: true })
+					.type('Test Org Chart{enter}', { force: true })
+					.blur({ force: true });
+			});
+		});
+	});
+
+	it('renders root nodes', () => {
+		// check rendered root nodes and the node name, title, connections
+		cy.get('.hierarchy-mobile').find('.root-level').children()
+			.should('have.length', 2)
+			.first()
+			.as('first-child');
+
+		cy.get('@first-child').get('.node-name').contains('Test Employee 1');
+		cy.get('@first-child').get('.node-info').find('.node-title').contains('CEO');
+		cy.get('@first-child').get('.node-info').find('.node-connections').contains('· 2');
+	});
+
+	it('expands root node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[1]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// other root node removed
+			cy.get(`#${employee_records.message[0]}`).should('not.exist');
+
+			// children of active root node
+			cy.get('.hierarchy-mobile').find('.level').first().find('ul.node-children').children()
+				.should('have.length', 2);
+
+			cy.get(`div[data-parent="${employee_records.message[1]}"]`).first().as('child-node');
+			cy.get('@child-node').should('be.visible');
+
+			cy.get('@child-node')
+				.get('.node-name')
+				.contains('Test Employee 4');
+
+			// connectors between root node and immediate children
+			cy.get(`path[data-parent="${employee_records.message[1]}"]`).as('connectors');
+			cy.get('@connectors')
+				.should('have.length', 2)
+				.should('be.visible');
+
+			cy.get('@connectors')
+				.first()
+				.invoke('attr', 'data-child')
+				.should('eq', employee_records.message[3]);
+		});
+	});
+
+	it('expands child node', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[3]}`)
+				.click()
+				.should('have.class', 'active')
+				.as('expanded_node');
+
+			// 2 levels on screen; 1 on active path; 1 collapsed
+			cy.get('.hierarchy-mobile').children().should('have.length', 2);
+			cy.get(`#${employee_records.message[1]}`).should('have.class', 'active-path');
+
+			// children of expanded node visible
+			cy.get('@expanded_node')
+				.next()
+				.should('have.class', 'node-children')
+				.as('node-children');
+
+			cy.get('@node-children').children().should('have.length', 1);
+			cy.get('@node-children')
+				.first()
+				.get('.node-card')
+				.should('have.class', 'active-child')
+				.contains('Test Employee 7');
+
+			// orphan connectors removed
+			cy.get(`#connectors`).children().should('have.length', 2);
+		});
+	});
+
+	it('renders sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// sibling group visible for parent
+			cy.get(`#${employee_records.message[1]}`)
+				.next()
+				.as('sibling_group');
+
+			cy.get('@sibling_group')
+				.should('have.attr', 'data-parent', 'undefined')
+				.should('have.class', 'node-group')
+				.and('have.class', 'collapsed');
+
+			cy.get('@sibling_group').get('.avatar-group').children().as('siblings');
+			cy.get('@siblings').should('have.length', 1);
+			cy.get('@siblings')
+				.first()
+				.should('have.attr', 'title', 'Test Employee 1');
+
+		});
+	});
+
+	it('expands previous level nodes', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[6]}`)
+				.click()
+				.should('have.class', 'active');
+
+			// clicking on previous level node should remove all the nodes ahead
+			// and expand that node
+			cy.get(`#${employee_records.message[3]}`).click();
+			cy.get(`#${employee_records.message[3]}`)
+				.should('have.class', 'active')
+				.should('not.have.class', 'active-path');
+
+			cy.get(`#${employee_records.message[6]}`).should('have.class', 'active-child');
+			cy.get('.hierarchy-mobile').children().should('have.length', 2);
+			cy.get(`#connectors`).children().should('have.length', 2);
+		});
+	});
+
+	it('expands sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			// sibling group visible for parent
+			cy.get(`#${employee_records.message[6]}`).click();
+
+			cy.get(`#${employee_records.message[3]}`)
+				.next()
+				.click();
+
+			// siblings of parent should be visible
+			cy.get('.hierarchy-mobile').prev().as('sibling_group');
+			cy.get('@sibling_group')
+				.should('exist')
+				.should('have.class', 'sibling-group')
+				.should('not.have.class', 'collapsed');
+
+			cy.get(`#${employee_records.message[1]}`)
+				.should('be.visible')
+				.should('have.class', 'active');
+
+			cy.get(`[data-parent="${employee_records.message[1]}"]`)
+				.should('be.visible')
+				.should('have.length', 2)
+				.should('have.class', 'active-child');
+		});
+	});
+
+	it('goes to the respective level after clicking on non-collapsed sibling group', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(() => {
+			// click on non-collapsed sibling group
+			cy.get('.hierarchy-mobile')
+				.prev()
+				.click();
+
+			// should take you to that level
+			cy.get('.hierarchy-mobile').find('li.level .node-card').should('have.length', 2);
+		});
+	});
+
+	it('edit node navigates to employee master', () => {
+		cy.call('erpnext.tests.ui_test_helpers.get_employee_records').then(employee_records => {
+			cy.get(`#${employee_records.message[0]}`).find('.btn-edit-node')
+				.click();
+
+			cy.url().should('include', `/employee/${employee_records.message[0]}`);
+		});
+	});
+});
diff --git a/erpnext/hr/page/organizational_chart/__init__.py b/erpnext/hr/page/organizational_chart/__init__.py
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/__init__.py
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
new file mode 100644
index 0000000..08f2c94
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -0,0 +1,21 @@
+frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
+	frappe.ui.make_app_page({
+		parent: wrapper,
+		title: __('Organizational Chart'),
+		single_column: true
+	});
+
+	$(wrapper).bind('show', () => {
+		frappe.require('hierarchy-chart.bundle.js', () => {
+			let organizational_chart = undefined;
+			let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
+			if (frappe.is_mobile()) {
+				organizational_chart = new erpnext.HierarchyChartMobile('Employee', wrapper, method);
+			} else {
+				organizational_chart = new erpnext.HierarchyChart('Employee', wrapper, method);
+			}
+			organizational_chart.show();
+		});
+	});
+};
\ No newline at end of file
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.json b/erpnext/hr/page/organizational_chart/organizational_chart.json
new file mode 100644
index 0000000..d802781
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.json
@@ -0,0 +1,26 @@
+{
+ "content": null,
+ "creation": "2021-05-25 10:53:10.107241",
+ "docstatus": 0,
+ "doctype": "Page",
+ "idx": 0,
+ "modified": "2021-05-25 10:53:18.201931",
+ "modified_by": "Administrator",
+ "module": "HR",
+ "name": "organizational-chart",
+ "owner": "Administrator",
+ "page_name": "Organizational Chart",
+ "roles": [
+  {
+   "role": "HR User"
+  },
+  {
+   "role": "HR Manager"
+  }
+ ],
+ "script": null,
+ "standard": "Yes",
+ "style": null,
+ "system_page": 0,
+ "title": "Organizational Chart"
+}
\ No newline at end of file
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.py b/erpnext/hr/page/organizational_chart/organizational_chart.py
new file mode 100644
index 0000000..1e03e3d
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.py
@@ -0,0 +1,47 @@
+from __future__ import unicode_literals
+import frappe
+
+@frappe.whitelist()
+def get_children(parent=None, company=None, exclude_node=None):
+	filters = [['status', '!=', 'Left']]
+	if company and company != 'All Companies':
+		filters.append(['company', '=', company])
+
+	if parent and company and parent != company:
+		filters.append(['reports_to', '=', parent])
+	else:
+		filters.append(['reports_to', '=', ''])
+
+	if exclude_node:
+		filters.append(['name', '!=', exclude_node])
+
+	employees = frappe.get_list('Employee',
+		fields=['employee_name as name', 'name as id', 'reports_to', 'image', 'designation as title'],
+		filters=filters,
+		order_by='name'
+	)
+
+	for employee in employees:
+		is_expandable = frappe.db.count('Employee', filters={'reports_to': employee.get('id')})
+		employee.connections = get_connections(employee.id)
+		employee.expandable = 1 if is_expandable else 0
+
+	return employees
+
+
+def get_connections(employee):
+	num_connections = 0
+
+	connections = frappe.get_list('Employee', filters=[
+			['reports_to', '=', employee]
+		])
+	num_connections += len(connections)
+
+	while connections:
+		for entry in connections:
+			connections = frappe.get_list('Employee', filters=[
+				['reports_to', '=', entry.name]
+			])
+			num_connections += len(connections)
+
+	return num_connections
\ No newline at end of file
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 7a3cb83..3c60e3e 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -3,7 +3,8 @@
 		"public/less/erpnext.less",
 		"public/less/hub.less",
 		"public/scss/call_popup.scss",
-		"public/scss/point-of-sale.scss"
+		"public/scss/point-of-sale.scss",
+		"public/scss/hierarchy_chart.scss"
 	],
 	"css/marketplace.css": [
 		"public/less/hub.less"
@@ -43,7 +44,8 @@
 		"public/js/call_popup/call_popup.js",
 		"public/js/utils/dimension_tree_filter.js",
 		"public/js/telephony.js",
-		"public/js/templates/call_link.html"
+		"public/js/templates/call_link.html",
+		"public/js/templates/node_card.html"
 	],
 	"js/item-dashboard.min.js": [
 		"stock/dashboard/item_dashboard.html",
@@ -66,5 +68,9 @@
 		"public/js/bank_reconciliation_tool/data_table_manager.js",
 		"public/js/bank_reconciliation_tool/number_card.js",
 		"public/js/bank_reconciliation_tool/dialog_manager.js"
+	],
+	"js/hierarchy-chart.min.js": [
+		"public/js/hierarchy_chart/hierarchy_chart_desktop.js",
+		"public/js/hierarchy_chart/hierarchy_chart_mobile.js"
 	]
 }
diff --git a/erpnext/public/js/hierarchy-chart.bundle.js b/erpnext/public/js/hierarchy-chart.bundle.js
new file mode 100644
index 0000000..26ab6d9
--- /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/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
new file mode 100644
index 0000000..89fb8d5
--- /dev/null
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
@@ -0,0 +1,591 @@
+import html2canvas from 'html2canvas';
+erpnext.HierarchyChart = class {
+	/* Options:
+		- doctype
+		- wrapper: wrapper for the hierarchy view
+		- method:
+			- to get the data for each node
+			- this method should return id, name, title, image, and connections for each node
+	*/
+	constructor(doctype, wrapper, method) {
+		this.page = wrapper.page;
+		this.method = method;
+		this.doctype = doctype;
+
+		this.setup_page_style();
+		this.page.main.addClass('frappe-card');
+
+		this.nodes = {};
+		this.setup_node_class();
+	}
+
+	setup_page_style() {
+		this.page.main.css({
+			'min-height': '300px',
+			'max-height': '600px',
+			'overflow': 'auto',
+			'position': 'relative'
+		});
+	}
+
+	setup_node_class() {
+		let me = this;
+		this.Node = class {
+			constructor({
+				id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
+			}) {
+				// to setup values passed via constructor
+				$.extend(this, arguments[0]);
+
+				this.expanded = 0;
+
+				me.nodes[this.id] = this;
+				me.make_node_element(this);
+
+				if (!me.all_nodes_expanded) {
+					me.setup_node_click_action(this);
+				}
+
+				me.setup_edit_node_action(this);
+			}
+		};
+	}
+
+	make_node_element(node) {
+		let node_card = frappe.render_template('node_card', {
+			id: node.id,
+			name: node.name,
+			title: node.title,
+			image: node.image,
+			parent: node.parent_id,
+			connections: node.connections,
+			is_mobile: false
+		});
+
+		node.parent.append(node_card);
+		node.$link = $(`#${node.id}`);
+	}
+
+	show() {
+		frappe.breadcrumbs.add('HR');
+
+		this.setup_actions();
+		if ($(`[data-fieldname="company"]`).length) return;
+		let me = this;
+
+		let company = this.page.add_field({
+			fieldtype: 'Link',
+			options: 'Company',
+			fieldname: 'company',
+			placeholder: __('Select Company'),
+			default: frappe.defaults.get_default('company'),
+			only_select: true,
+			reqd: 1,
+			change: () => {
+				me.company = undefined;
+
+				if (company.get_value() && me.company != company.get_value()) {
+					me.company = company.get_value();
+
+					// svg for connectors
+					me.make_svg_markers();
+					me.setup_hierarchy();
+					me.render_root_nodes();
+					me.all_nodes_expanded = false;
+				}
+			}
+		});
+
+		company.refresh();
+		$(`[data-fieldname="company"]`).trigger('change');
+	}
+
+	setup_actions() {
+		let me = this;
+		this.page.add_inner_button(__('Export'), function() {
+			me.export_chart();
+		});
+
+		this.page.add_inner_button(__('Expand All'), function() {
+			me.load_children(me.root_node, true);
+			me.all_nodes_expanded = true;
+
+			me.page.remove_inner_button(__('Expand All'));
+			me.page.add_inner_button(__('Collapse All'), function() {
+				me.setup_hierarchy();
+				me.render_root_nodes();
+				me.all_nodes_expanded = false;
+
+				me.page.remove_inner_button(__('Collapse All'));
+				me.setup_actions();
+			});
+		});
+	}
+
+	export_chart() {
+		this.page.main.css({
+			'min-height': '',
+			'max-height': '',
+			'overflow': 'visible',
+			'position': 'fixed',
+			'left': '0',
+			'top': '0'
+		});
+
+		$('.node-card').addClass('exported');
+
+		html2canvas(document.querySelector('#hierarchy-chart-wrapper'), {
+			scrollY: -window.scrollY,
+			scrollX: 0
+		}).then(function(canvas) {
+			// Export the canvas to its data URI representation
+			let dataURL = canvas.toDataURL('image/png');
+
+			// download the image
+			let a = document.createElement('a');
+			a.href = dataURL;
+			a.download = 'hierarchy_chart';
+			a.click();
+		});
+
+		this.setup_page_style();
+		$('.node-card').removeClass('exported');
+	}
+
+	setup_hierarchy() {
+		if (this.$hierarchy)
+			this.$hierarchy.remove();
+
+		$(`#connectors`).empty();
+
+		// setup hierarchy
+		this.$hierarchy = $(
+			`<ul class="hierarchy">
+				<li class="root-level level">
+					<ul class="node-children"></ul>
+				</li>
+			</ul>`);
+
+		this.page.main
+			.find('#hierarchy-chart-wrapper')
+			.append(this.$hierarchy);
+		this.nodes = {};
+	}
+
+	make_svg_markers() {
+		$('#hierarchy-chart-wrapper').remove();
+
+		this.page.main.append(`
+			<div id="hierarchy-chart-wrapper">
+				<svg id="arrows" width="100%" height="100%">
+					<defs>
+						<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
+							<path d="M 0 0 L 10 5 L 0 10 z"></path>
+						</marker>
+						<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
+							<path d="M 0 0 L 10 5 L 0 10 z"></path>
+						</marker>
+
+						<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
+							<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
+						</marker>
+						<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
+							<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
+						</marker>
+					</defs>
+					<g id="connectors" fill="none">
+					</g>
+				</svg>
+			</div>`);
+	}
+
+	render_root_nodes(expanded_view=false) {
+		let me = this;
+
+		frappe.call({
+			method: me.method,
+			args: {
+				company: me.company
+			}
+		}).then(r => {
+			if (r.message.length) {
+				let expand_node = undefined;
+				let node = undefined;
+
+				$.each(r.message, (i, data) => {
+					node = new me.Node({
+						id: data.id,
+						parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
+						parent_id: undefined,
+						image: data.image,
+						name: data.name,
+						title: data.title,
+						expandable: true,
+						connections: data.connections,
+						is_root: true
+					});
+
+					if (!expand_node && data.connections)
+						expand_node = node;
+				});
+
+				if (!expanded_view) {
+					me.root_node = expand_node;
+					me.expand_node(expand_node);
+				}
+			}
+		});
+	}
+
+	expand_node(node) {
+		const is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
+		this.set_selected_node(node);
+		this.show_active_path(node);
+		this.collapse_previous_level_nodes(node);
+
+		// since the previous node collapses, all connections to that node need to be rebuilt
+		// if a sibling node is clicked, connections don't need to be rebuilt
+		if (!is_sibling) {
+			// rebuild outgoing connections
+			this.refresh_connectors(node.parent_id);
+
+			// rebuild incoming connections
+			let grandparent = $(`#${node.parent_id}`).attr('data-parent');
+			this.refresh_connectors(grandparent);
+		}
+
+		if (node.expandable && !node.expanded) {
+			return this.load_children(node);
+		}
+	}
+
+	collapse_node() {
+		if (this.selected_node.expandable) {
+			this.selected_node.$children.hide();
+			$(`path[data-parent="${this.selected_node.id}"]`).hide();
+			this.selected_node.expanded = false;
+		}
+	}
+
+	show_active_path(node) {
+		// mark node parent on active path
+		$(`#${node.parent_id}`).addClass('active-path');
+	}
+
+	load_children(node, deep=false) {
+		if (!deep) {
+			frappe.run_serially([
+				() => this.get_child_nodes(node.id),
+				(child_nodes) => this.render_child_nodes(node, child_nodes)
+			]);
+		} else {
+			frappe.run_serially([
+				() => this.setup_hierarchy(),
+				() => this.render_root_nodes(true),
+				() => this.get_all_nodes(node.id, node.name),
+				(data_list) => this.render_children_of_all_nodes(data_list)
+			]);
+		}
+	}
+
+	get_child_nodes(node_id) {
+		return new Promise(resolve => {
+			frappe.call({
+				method: this.method,
+				args: {
+					parent: node_id,
+					company: this.company
+				}
+			}).then(r => resolve(r.message));
+		});
+	}
+
+	render_child_nodes(node, child_nodes) {
+		const last_level = this.$hierarchy.find('.level:last').index();
+		const current_level = $(`#${node.id}`).parent().parent().parent().index();
+
+		if (last_level === current_level) {
+			this.$hierarchy.append(`
+				<li class="level"></li>
+			`);
+		}
+
+		if (!node.$children) {
+			node.$children = $('<ul class="node-children"></ul>')
+				.hide()
+				.appendTo(this.$hierarchy.find('.level:last'));
+
+			node.$children.empty();
+
+			if (child_nodes) {
+				$.each(child_nodes, (_i, data) => {
+					this.add_node(node, data);
+					setTimeout(() => {
+						this.add_connector(node.id, data.id);
+					}, 250);
+				});
+			}
+		}
+
+		node.$children.show();
+		$(`path[data-parent="${node.id}"]`).show();
+		node.expanded = true;
+	}
+
+	get_all_nodes(node_id, node_name) {
+		return new Promise(resolve => {
+			frappe.call({
+				method: 'erpnext.utilities.hierarchy_chart.get_all_nodes',
+				args: {
+					method: this.method,
+					company: this.company,
+					parent: node_id,
+					parent_name: node_name
+				},
+				callback: (r) => {
+					resolve(r.message);
+				}
+			});
+		});
+	}
+
+	render_children_of_all_nodes(data_list) {
+		let entry = undefined;
+		let node = undefined;
+
+		while (data_list.length) {
+			// to avoid overlapping connectors
+			entry = data_list.shift();
+			node = this.nodes[entry.parent];
+			if (node) {
+				this.render_child_nodes_for_expanded_view(node, entry.data);
+			} else {
+				data_list.push(entry);
+			}
+		}
+	}
+
+	render_child_nodes_for_expanded_view(node, child_nodes) {
+		node.$children = $('<ul class="node-children"></ul>');
+
+		const last_level = this.$hierarchy.find('.level:last').index();
+		const node_level = $(`#${node.id}`).parent().parent().parent().index();
+
+		if (last_level === node_level) {
+			this.$hierarchy.append(`
+				<li class="level"></li>
+			`);
+			node.$children.appendTo(this.$hierarchy.find('.level:last'));
+		} else {
+			node.$children.appendTo(this.$hierarchy.find('.level:eq(' + (node_level + 1) + ')'));
+		}
+
+		node.$children.hide().empty();
+
+		if (child_nodes) {
+			$.each(child_nodes, (_i, data) => {
+				this.add_node(node, data);
+				setTimeout(() => {
+					this.add_connector(node.id, data.id);
+				}, 250);
+			});
+		}
+
+		node.$children.show();
+		$(`path[data-parent="${node.id}"]`).show();
+		node.expanded = true;
+	}
+
+	add_node(node, data) {
+		return new this.Node({
+			id: data.id,
+			parent: $('<li class="child-node"></li>').appendTo(node.$children),
+			parent_id: node.id,
+			image: data.image,
+			name: data.name,
+			title: data.title,
+			expandable: data.expandable,
+			connections: data.connections,
+			children: undefined
+		});
+	}
+
+	add_connector(parent_id, child_id) {
+		// using pure javascript for better performance
+		const parent_node = document.querySelector(`#${parent_id}`);
+		const child_node = document.querySelector(`#${child_id}`);
+
+		let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+		// we need to connect right side of the parent to the left side of the child node
+		const pos_parent_right = {
+			x: parent_node.offsetLeft + parent_node.offsetWidth,
+			y: parent_node.offsetTop + parent_node.offsetHeight / 2
+		};
+		const pos_child_left = {
+			x: child_node.offsetLeft - 5,
+			y: child_node.offsetTop + child_node.offsetHeight / 2
+		};
+
+		const connector = this.get_connector(pos_parent_right, pos_child_left);
+
+		path.setAttribute('d', connector);
+		this.set_path_attributes(path, parent_id, child_id);
+
+		document.getElementById('connectors').appendChild(path);
+	}
+
+	get_connector(pos_parent_right, pos_child_left) {
+		if (pos_parent_right.y === pos_child_left.y) {
+			// don't add arcs if it's a straight line
+			return "M" +
+			(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+			"L"+
+			(pos_child_left.x) + "," + (pos_child_left.y);
+		} else {
+			let arc_1 = "";
+			let arc_2 = "";
+			let offset = 0;
+
+			if (pos_parent_right.y > pos_child_left.y) {
+				// if child is above parent on Y axis 1st arc is anticlocwise
+				// second arc is clockwise
+				arc_1 = "a10,10 1 0 0 10,-10 ";
+				arc_2 = "a10,10 0 0 1 10,-10 ";
+				offset = 10;
+			} else {
+				// if child is below parent on Y axis 1st arc is clockwise
+				// second arc is anticlockwise
+				arc_1 = "a10,10 0 0 1 10,10 ";
+				arc_2 = "a10,10 1 0 0 10,10 ";
+				offset = -10;
+			}
+
+			return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+				"L" +
+				(pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
+				arc_1 +
+				"L" +
+				(pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
+				arc_2 +
+				"L"+
+				(pos_child_left.x) + "," + (pos_child_left.y);
+		}
+	}
+
+	set_path_attributes(path, parent_id, child_id) {
+		path.setAttribute("data-parent", parent_id);
+		path.setAttribute("data-child", child_id);
+		const parent = $(`#${parent_id}`);
+
+		if (parent.hasClass('active')) {
+			path.setAttribute("class", "active-connector");
+			path.setAttribute("marker-start", "url(#arrowstart-active)");
+			path.setAttribute("marker-end", "url(#arrowhead-active)");
+		} else {
+			path.setAttribute("class", "collapsed-connector");
+			path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
+			path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
+		}
+	}
+
+	set_selected_node(node) {
+		// remove active class from the current node
+		if (this.selected_node)
+			this.selected_node.$link.removeClass('active');
+
+		// add active class to the newly selected node
+		this.selected_node = node;
+		node.$link.addClass('active');
+	}
+
+	collapse_previous_level_nodes(node) {
+		let node_parent = $(`#${node.parent_id}`);
+		let previous_level_nodes = node_parent.parent().parent().children('li');
+		let node_card = undefined;
+
+		previous_level_nodes.each(function() {
+			node_card = $(this).find('.node-card');
+
+			if (!node_card.hasClass('active-path')) {
+				node_card.addClass('collapsed');
+			}
+		});
+	}
+
+	refresh_connectors(node_parent) {
+		if (!node_parent) return;
+
+		$(`path[data-parent="${node_parent}"]`).remove();
+
+		frappe.run_serially([
+			() => this.get_child_nodes(node_parent),
+			(child_nodes) => {
+				if (child_nodes) {
+					$.each(child_nodes, (_i, data) => {
+						this.add_connector(node_parent, data.id);
+					});
+				}
+			}
+		]);
+	}
+
+	setup_node_click_action(node) {
+		let me = this;
+		let node_element = $(`#${node.id}`);
+
+		node_element.click(function() {
+			const is_sibling = me.selected_node.parent_id === node.parent_id;
+
+			if (is_sibling) {
+				me.collapse_node();
+			} else if (node_element.is(':visible')
+				&& (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
+				me.remove_levels_after_node(node);
+				me.remove_orphaned_connectors();
+			}
+
+			me.expand_node(node);
+		});
+	}
+
+	setup_edit_node_action(node) {
+		let node_element = $(`#${node.id}`);
+		let me = this;
+
+		node_element.find('.btn-edit-node').click(function() {
+			frappe.set_route('Form', me.doctype, node.id);
+		});
+	}
+
+	remove_levels_after_node(node) {
+		let level = $(`#${node.id}`).parent().parent().parent().index();
+
+		level = $('.hierarchy > li:eq('+ level + ')');
+		level.nextAll('li').remove();
+
+		let nodes = level.find('.node-card');
+		let node_object = undefined;
+
+		$.each(nodes, (_i, element) => {
+			node_object = this.nodes[element.id];
+			node_object.expanded = 0;
+			node_object.$children = undefined;
+		});
+
+		nodes.removeClass('collapsed active-path');
+	}
+
+	remove_orphaned_connectors() {
+		let paths = $('#connectors > path');
+		$.each(paths, (_i, path) => {
+			const parent = $(path).data('parent');
+			const child = $(path).data('child');
+
+			if ($(`#${parent}`).length && $(`#${child}`).length)
+				return;
+
+			$(path).remove();
+		});
+	}
+};
\ No newline at end of file
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
new file mode 100644
index 0000000..bd7946a
--- /dev/null
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
@@ -0,0 +1,551 @@
+erpnext.HierarchyChartMobile = class {
+	/* Options:
+		- doctype
+		- wrapper: wrapper for the hierarchy view
+		- method:
+			- to get the data for each node
+			- this method should return id, name, title, image, and connections for each node
+	*/
+	constructor(doctype, wrapper, method) {
+		this.page = wrapper.page;
+		this.method = method;
+		this.doctype = doctype;
+
+		this.page.main.css({
+			'min-height': '300px',
+			'max-height': '600px',
+			'overflow': 'auto',
+			'position': 'relative'
+		});
+		this.page.main.addClass('frappe-card');
+
+		this.nodes = {};
+		this.setup_node_class();
+	}
+
+	setup_node_class() {
+		let me = this;
+		this.Node = class {
+			constructor({
+				id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
+			}) {
+				// to setup values passed via constructor
+				$.extend(this, arguments[0]);
+
+				this.expanded = 0;
+
+				me.nodes[this.id] = this;
+				me.make_node_element(this);
+				me.setup_node_click_action(this);
+				me.setup_edit_node_action(this);
+			}
+		};
+	}
+
+	make_node_element(node) {
+		let node_card = frappe.render_template('node_card', {
+			id: node.id,
+			name: node.name,
+			title: node.title,
+			image: node.image,
+			parent: node.parent_id,
+			connections: node.connections,
+			is_mobile: true
+		});
+
+		node.parent.append(node_card);
+		node.$link = $(`#${node.id}`);
+		node.$link.addClass('mobile-node');
+	}
+
+	show() {
+		frappe.breadcrumbs.add('HR');
+
+		let me = this;
+		if ($(`[data-fieldname="company"]`).length) return;
+
+		let company = this.page.add_field({
+			fieldtype: 'Link',
+			options: 'Company',
+			fieldname: 'company',
+			placeholder: __('Select Company'),
+			default: frappe.defaults.get_default('company'),
+			only_select: true,
+			reqd: 1,
+			change: () => {
+				me.company = undefined;
+
+				if (company.get_value() && me.company != company.get_value()) {
+					me.company = company.get_value();
+
+					// svg for connectors
+					me.make_svg_markers();
+
+					if (me.$sibling_group)
+						me.$sibling_group.remove();
+
+					// setup sibling group wrapper
+					me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
+					me.page.main.append(me.$sibling_group);
+
+					me.setup_hierarchy();
+					me.render_root_nodes();
+				}
+			}
+		});
+
+		company.refresh();
+		$(`[data-fieldname="company"]`).trigger('change');
+	}
+
+	make_svg_markers() {
+		$('#arrows').remove();
+
+		this.page.main.prepend(`
+			<svg id="arrows" width="100%" height="100%">
+				<defs>
+					<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
+						<path d="M 0 0 L 10 5 L 0 10 z"></path>
+					</marker>
+					<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
+						<path d="M 0 0 L 10 5 L 0 10 z"></path>
+					</marker>
+
+					<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
+						<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
+					</marker>
+					<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
+						<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
+					</marker>
+				</defs>
+				<g id="connectors" fill="none">
+				</g>
+			</svg>`);
+	}
+
+	setup_hierarchy() {
+		$(`#connectors`).empty();
+		if (this.$hierarchy)
+			this.$hierarchy.remove();
+
+		if (this.$sibling_group)
+			this.$sibling_group.empty();
+
+		this.$hierarchy = $(
+			`<ul class="hierarchy-mobile">
+				<li class="root-level level"></li>
+			</ul>`);
+
+		this.page.main.append(this.$hierarchy);
+	}
+
+	render_root_nodes() {
+		let me = this;
+
+		frappe.call({
+			method: me.method,
+			args: {
+				company: me.company
+			},
+		}).then(r => {
+			if (r.message.length) {
+				let root_level = me.$hierarchy.find('.root-level');
+				root_level.empty();
+
+				$.each(r.message, (_i, data) => {
+					return new me.Node({
+						id: data.id,
+						parent: root_level,
+						parent_id: undefined,
+						image: data.image,
+						name: data.name,
+						title: data.title,
+						expandable: true,
+						connections: data.connections,
+						is_root: true
+					});
+				});
+			}
+		});
+	}
+
+	expand_node(node) {
+		const is_same_node = (this.selected_node && this.selected_node.id === node.id);
+		this.set_selected_node(node);
+		this.show_active_path(node);
+
+		if (this.$sibling_group) {
+			const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
+			if (node.parent_id !== undefined && node.parent_id != sibling_parent)
+				this.$sibling_group.empty();
+		}
+
+		if (!is_same_node) {
+			// since the previous/parent node collapses, all connections to that node need to be rebuilt
+			// rebuild outgoing connections of parent
+			this.refresh_connectors(node.parent_id, node.id);
+
+			// rebuild incoming connections of parent
+			let grandparent = $(`#${node.parent_id}`).attr('data-parent');
+			this.refresh_connectors(grandparent, node.parent_id);
+		}
+
+		if (node.expandable && !node.expanded) {
+			return this.load_children(node);
+		}
+	}
+
+	collapse_node() {
+		let node = this.selected_node;
+		if (node.expandable && node.$children) {
+			node.$children.hide();
+			node.expanded = 0;
+
+			// add a collapsed level to show the collapsed parent
+			// and a button beside it to move to that level
+			let node_parent = node.$link.parent();
+			node_parent.prepend(
+				`<div class="collapsed-level d-flex flex-row"></div>`
+			);
+
+			node_parent
+				.find('.collapsed-level')
+				.append(node.$link);
+
+			frappe.run_serially([
+				() => this.get_child_nodes(node.parent_id, node.id),
+				(child_nodes) => this.get_node_group(child_nodes, node.parent_id),
+				(node_group) => node_parent.find('.collapsed-level').append(node_group),
+				() => this.setup_node_group_action()
+			]);
+		}
+	}
+
+	show_active_path(node) {
+		// mark node parent on active path
+		$(`#${node.parent_id}`).addClass('active-path');
+	}
+
+	load_children(node) {
+		frappe.run_serially([
+			() => this.get_child_nodes(node.id),
+			(child_nodes) => this.render_child_nodes(node, child_nodes)
+		]);
+	}
+
+	get_child_nodes(node_id, exclude_node=null) {
+		let me = this;
+		return new Promise(resolve => {
+			frappe.call({
+				method: this.method,
+				args: {
+					parent: node_id,
+					company: me.company,
+					exclude_node: exclude_node
+				}
+			}).then(r => resolve(r.message));
+		});
+	}
+
+	render_child_nodes(node, child_nodes) {
+		if (!node.$children) {
+			node.$children = $('<ul class="node-children"></ul>')
+				.hide()
+				.appendTo(node.$link.parent());
+
+			node.$children.empty();
+
+			if (child_nodes) {
+				$.each(child_nodes, (_i, data) => {
+					this.add_node(node, data);
+					$(`#${data.id}`).addClass('active-child');
+
+					setTimeout(() => {
+						this.add_connector(node.id, data.id);
+					}, 250);
+				});
+			}
+		}
+
+		node.$children.show();
+		node.expanded = 1;
+	}
+
+	add_node(node, data) {
+		var $li = $('<li class="child-node"></li>');
+
+		return new this.Node({
+			id: data.id,
+			parent: $li.appendTo(node.$children),
+			parent_id: node.id,
+			image: data.image,
+			name: data.name,
+			title: data.title,
+			expandable: data.expandable,
+			connections: data.connections,
+			children: undefined
+		});
+	}
+
+	add_connector(parent_id, child_id) {
+		const parent_node = document.querySelector(`#${parent_id}`);
+		const child_node = document.querySelector(`#${child_id}`);
+
+		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+		let connector = undefined;
+
+		if ($(`#${parent_id}`).hasClass('active')) {
+			connector = this.get_connector_for_active_node(parent_node, child_node);
+		} else if ($(`#${parent_id}`).hasClass('active-path')) {
+			connector = this.get_connector_for_collapsed_node(parent_node, child_node);
+		}
+
+		path.setAttribute('d', connector);
+		this.set_path_attributes(path, parent_id, child_id);
+
+		document.getElementById('connectors').appendChild(path);
+	}
+
+	get_connector_for_active_node(parent_node, child_node) {
+		// we need to connect the bottom left of the parent to the left side of the child node
+		let pos_parent_bottom = {
+			x: parent_node.offsetLeft + 20,
+			y: parent_node.offsetTop + parent_node.offsetHeight
+		};
+		let pos_child_left = {
+			x: child_node.offsetLeft - 5,
+			y: child_node.offsetTop + child_node.offsetHeight / 2
+		};
+
+		let connector =
+			"M" +
+			(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
+			"L" +
+			(pos_parent_bottom.x) + "," + (pos_child_left.y - 10) + " " +
+			"a10,10 1 0 0 10,10 " +
+			"L" +
+			(pos_child_left.x) + "," + (pos_child_left.y);
+
+		return connector;
+	}
+
+	get_connector_for_collapsed_node(parent_node, child_node) {
+		// we need to connect the bottom left of the parent to the top left of the child node
+		let pos_parent_bottom = {
+			x: parent_node.offsetLeft + 20,
+			y: parent_node.offsetTop + parent_node.offsetHeight
+		};
+		let pos_child_top = {
+			x: child_node.offsetLeft + 20,
+			y: child_node.offsetTop
+		};
+
+		let connector =
+			"M" +
+			(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
+			"L" +
+			(pos_child_top.x) + "," + (pos_child_top.y);
+
+		return connector;
+	}
+
+	set_path_attributes(path, parent_id, child_id) {
+		path.setAttribute("data-parent", parent_id);
+		path.setAttribute("data-child", child_id);
+		const parent = $(`#${parent_id}`);
+
+		if (parent.hasClass('active')) {
+			path.setAttribute("class", "active-connector");
+			path.setAttribute("marker-start", "url(#arrowstart-active)");
+			path.setAttribute("marker-end", "url(#arrowhead-active)");
+		} else if (parent.hasClass('active-path')) {
+			path.setAttribute("class", "collapsed-connector");
+		}
+	}
+
+	set_selected_node(node) {
+		// remove .active class from the current node
+		if (this.selected_node)
+			this.selected_node.$link.removeClass('active');
+
+		// add active class to the newly selected node
+		this.selected_node = node;
+		node.$link.addClass('active');
+	}
+
+	setup_node_click_action(node) {
+		let me = this;
+		let node_element = $(`#${node.id}`);
+
+		node_element.click(function() {
+			let el = undefined;
+
+			if (node.is_root) {
+				el = $(this).detach();
+				me.$hierarchy.empty();
+				$(`#connectors`).empty();
+				me.add_node_to_hierarchy(el, node);
+			} else if (node_element.is(':visible') && node_element.hasClass('active-path')) {
+				me.remove_levels_after_node(node);
+				me.remove_orphaned_connectors();
+			} else {
+				el = $(this).detach();
+				me.add_node_to_hierarchy(el, node);
+				me.collapse_node();
+			}
+
+			me.expand_node(node);
+		});
+	}
+
+	setup_edit_node_action(node) {
+		let node_element = $(`#${node.id}`);
+		let me = this;
+
+		node_element.find('.btn-edit-node').click(function() {
+			frappe.set_route('Form', me.doctype, node.id);
+		});
+	}
+
+	setup_node_group_action() {
+		let me = this;
+
+		$('.node-group').on('click', function() {
+			let parent = $(this).attr('data-parent');
+			if (parent === 'undefined') {
+				me.setup_hierarchy();
+				me.render_root_nodes();
+			} else {
+				me.expand_sibling_group_node(parent);
+			}
+		});
+	}
+
+	add_node_to_hierarchy(node_element, node) {
+		this.$hierarchy.append(`<li class="level"></li>`);
+		node_element.removeClass('active-child active-path');
+		this.$hierarchy.find('.level:last').append(node_element);
+
+		let node_object = this.nodes[node.id];
+		node_object.expanded = 0;
+		node_object.$children = undefined;
+		this.nodes[node.id] = node_object;
+	}
+
+	get_node_group(nodes, parent, collapsed=true) {
+		let limit = 2;
+		const display_nodes = nodes.slice(0, limit);
+		const extra_nodes = nodes.slice(limit);
+
+		let html = display_nodes.map(node =>
+			this.get_avatar(node)
+		).join('');
+
+		if (extra_nodes.length === 1) {
+			let node = extra_nodes[0];
+			html += this.get_avatar(node);
+		} else if (extra_nodes.length > 1) {
+			html = `
+				${html}
+				<span class="avatar avatar-small">
+					<div class="avatar-frame standard-image avatar-extra-count"
+						title="${extra_nodes.map(node => node.name).join(', ')}">
+						+${extra_nodes.length}
+					</div>
+				</span>
+			`;
+		}
+
+		if (html) {
+			const $node_group =
+				$(`<div class="node-group card cursor-pointer" data-parent=${parent}>
+					<div class="avatar-group right overlap">
+						${html}
+					</div>
+				</div>`);
+
+			if (collapsed)
+				$node_group.addClass('collapsed');
+
+			return $node_group;
+		}
+
+		return null;
+	}
+
+	get_avatar(node) {
+		return `<span class="avatar avatar-small" title="${node.name}">
+			<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
+		</span>`;
+	}
+
+	expand_sibling_group_node(parent) {
+		let node_object = this.nodes[parent];
+		let node = node_object.$link;
+
+		node.removeClass('active-child active-path');
+		node_object.expanded = 0;
+		node_object.$children = undefined;
+		this.nodes[node.id] = node_object;
+
+		// show parent's siblings and expand parent node
+		frappe.run_serially([
+			() => this.get_child_nodes(node_object.parent_id, node_object.id),
+			(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
+			(node_group) => {
+				if (node_group)
+					this.$sibling_group.empty().append(node_group);
+			},
+			() => this.setup_node_group_action(),
+			() => this.reattach_and_expand_node(node, node_object)
+		]);
+	}
+
+	reattach_and_expand_node(node, node_object) {
+		var el = node.detach();
+
+		this.$hierarchy.empty().append(`
+			<li class="level"></li>
+		`);
+		this.$hierarchy.find('.level').append(el);
+		$(`#connectors`).empty();
+		this.expand_node(node_object);
+	}
+
+	remove_levels_after_node(node) {
+		let level = $(`#${node.id}`).parent().parent().index();
+
+		level = $('.hierarchy-mobile > li:eq('+ level + ')');
+		level.nextAll('li').remove();
+
+		let node_object = this.nodes[node.id];
+		let current_node = level.find(`#${node.id}`).detach();
+		current_node.removeClass('active-child active-path');
+
+		node_object.expanded = 0;
+		node_object.$children = undefined;
+
+		level.empty().append(current_node);
+	}
+
+	remove_orphaned_connectors() {
+		let paths = $('#connectors > path');
+		$.each(paths, (_i, path) => {
+			const parent = $(path).data('parent');
+			const child = $(path).data('child');
+
+			if ($(`#${parent}`).length && $(`#${child}`).length)
+				return;
+
+			$(path).remove();
+		});
+	}
+
+	refresh_connectors(node_parent, node_id) {
+		if (!node_parent) return;
+
+		$(`path[data-parent="${node_parent}"]`).remove();
+		this.add_connector(node_parent, node_id);
+	}
+};
\ No newline at end of file
diff --git a/erpnext/public/js/templates/node_card.html b/erpnext/public/js/templates/node_card.html
new file mode 100644
index 0000000..fb94df8
--- /dev/null
+++ b/erpnext/public/js/templates/node_card.html
@@ -0,0 +1,33 @@
+<div class="node-card card cursor-pointer" id="{%= id %}" data-parent="{%= parent %}">
+	<div class="node-meta d-flex flex-row">
+		<div class="mr-3">
+			<span class="avatar node-image" title="{{ name }}">
+				<span class="avatar-frame" src={{image}} style="background-image: url(\'{%= image %}\')"></span>
+			</span>
+		</div>
+		<div>
+			<div class="node-name d-flex flex-row mb-1">
+				<span class="ellipsis">{{ name }}</span>
+				<div class="btn-xs btn-edit-node d-flex flex-row">
+					<a class="node-edit-icon">{{ frappe.utils.icon("edit", "xs") }}</a>
+					<span class="edit-chart-node text-xs">{{ __("Edit") }}</span>
+				</div>
+			</div>
+			<div class="node-info d-flex flex-row mb-1">
+				<div class="node-title text-muted ellipsis">{{ title }}</div>
+
+				{% if is_mobile %}
+					<div class="node-connections text-muted ml-2 ellipsis">
+						· {{ connections }} <span class="fa fa-level-down"></span>
+					</div>
+				{% else %}
+					{% if connections == 1 %}
+						<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connection</div>
+					{% else %}
+						<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connections</div>
+					{% endif %}
+				{% endif %}
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/erpnext/public/scss/erpnext.bundle.scss b/erpnext/public/scss/erpnext.bundle.scss
index d3313c7..b68ddf5 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";
diff --git a/erpnext/public/scss/hierarchy_chart.scss b/erpnext/public/scss/hierarchy_chart.scss
new file mode 100644
index 0000000..a66d647
--- /dev/null
+++ b/erpnext/public/scss/hierarchy_chart.scss
@@ -0,0 +1,313 @@
+.node-card {
+	background: white;
+	stroke: 1px solid var(--gray-200);
+	box-shadow: var(--shadow-base);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	margin-left: 3rem;
+	width: 18rem;
+	overflow: hidden;
+
+	.btn-edit-node {
+		display: none;
+	}
+
+	.edit-chart-node {
+		display: none;
+	}
+
+	.node-edit-icon {
+		display: none;
+	}
+}
+
+.node-card.exported {
+	box-shadow: none
+}
+
+.node-image {
+	width: 3.0rem;
+	height: 3.0rem;
+}
+
+.node-name {
+	font-size: 1rem;
+	line-height: 1.72;
+}
+
+.node-title {
+	font-size: 0.75rem;
+	line-height: 1.35;
+}
+
+.node-info {
+	width: 12.7rem;
+}
+
+.node-connections {
+	font-size: 0.75rem;
+	line-height: 1.35;
+}
+
+.node-card.active {
+	background: var(--blue-50);
+	border: 1px solid var(--blue-500);
+	box-shadow: var(--shadow-md);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	width: 18rem;
+
+	.btn-edit-node {
+		display: flex;
+		background: var(--blue-100);
+		color: var(--blue-500);
+		padding: .25rem .5rem;
+		font-size: .75rem;
+		justify-content: center;
+		box-shadow: var(--shadow-sm);
+		margin-left: auto;
+	}
+
+	.edit-chart-node {
+		display: block;
+		margin-right: 0.25rem;
+	}
+
+	.node-edit-icon {
+		display: block;
+	}
+
+	.node-edit-icon > .icon{
+		stroke: var(--blue-500);
+	}
+
+	.node-name {
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 2px;
+		width: 12.2rem;
+	}
+}
+
+.node-card.active-path {
+	background: var(--blue-100);
+	border: 1px solid var(--blue-300);
+	box-shadow: var(--shadow-sm);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	width: 15rem;
+	height: 3.0rem;
+
+	.btn-edit-node {
+		display: none !important;
+	}
+
+	.edit-chart-node {
+		display: none;
+	}
+
+	.node-edit-icon {
+		display: none;
+	}
+
+	.node-info {
+		display: none;
+	}
+
+	.node-title {
+		display: none;
+	}
+
+	.node-connections {
+		display: none;
+	}
+
+	.node-name {
+		font-size: 0.85rem;
+		line-height: 1.35;
+	}
+
+	.node-image {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	.node-meta {
+		align-items: baseline;
+	}
+}
+
+.node-card.collapsed {
+	background: white;
+	stroke: 1px solid var(--gray-200);
+	box-shadow: var(--shadow-sm);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	width: 15rem;
+	height: 3.0rem;
+
+	.btn-edit-node {
+		display: none !important;
+	}
+
+	.edit-chart-node {
+		display: none;
+	}
+
+	.node-edit-icon {
+		display: none;
+	}
+
+	.node-info {
+		display: none;
+	}
+
+	.node-title {
+		display: none;
+	}
+
+	.node-connections {
+		display: none;
+	}
+
+	.node-name {
+		font-size: 0.85rem;
+		line-height: 1.35;
+	}
+
+	.node-image {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	.node-meta {
+		align-items: baseline;
+	}
+}
+
+// horizontal hierarchy tree view
+#hierarchy-chart-wrapper {
+	padding-top: 30px;
+
+	#arrows {
+		margin-top: -80px;
+	}
+}
+
+.hierarchy {
+	display: flex;
+}
+
+.hierarchy li {
+	list-style-type: none;
+}
+
+.child-node {
+	margin: 0px 0px 16px 0px;
+}
+
+.hierarchy, .hierarchy-mobile {
+	.level {
+		margin-right: 8px;
+		align-items: flex-start;
+		flex-direction: column;
+	}
+}
+
+#arrows {
+	position: absolute;
+	overflow: visible;
+}
+
+.active-connector {
+	stroke: var(--blue-500);
+}
+
+.collapsed-connector {
+	stroke: var(--blue-300);
+}
+
+// mobile
+
+.hierarchy-mobile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-top: 10px;
+	padding-left: 0px;
+}
+
+.hierarchy-mobile li {
+	list-style-type: none;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.mobile-node {
+	margin-left: 0;
+}
+
+.mobile-node.active-path {
+	width: 12.25rem;
+}
+
+.active-child {
+	width: 15.5rem;
+}
+
+.mobile-node .node-connections {
+	max-width: 80px;
+}
+
+.hierarchy-mobile .node-children {
+	margin-top: 16px;
+}
+
+.root-level .node-card {
+	margin: 0 0 16px;
+}
+
+// node group
+
+.collapsed-level {
+	margin-bottom: 16px;
+	width: 18rem;
+}
+
+.node-group {
+	background: white;
+	border: 1px solid var(--gray-300);
+	box-shadow: var(--shadow-sm);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	width: 18rem;
+	height: 3rem;
+	overflow: hidden;
+	align-items: center;
+}
+
+.node-group .avatar-group {
+	margin-left: 0px;
+}
+
+.node-group .avatar-extra-count {
+	background-color: var(--blue-100);
+	color: var(--blue-500);
+}
+
+.node-group .avatar-frame {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.node-group.collapsed {
+	width: 5rem;
+	margin-left: 12px;
+}
+
+.sibling-group {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
\ No newline at end of file
diff --git a/erpnext/tests/ui_test_helpers.py b/erpnext/tests/ui_test_helpers.py
new file mode 100644
index 0000000..fc3aa29
--- /dev/null
+++ b/erpnext/tests/ui_test_helpers.py
@@ -0,0 +1,59 @@
+import frappe
+from frappe.utils import getdate
+
+@frappe.whitelist()
+def create_employee_records():
+	create_company()
+	create_missing_designation()
+
+	emp1 = create_employee('Test Employee 1', 'CEO')
+	emp2 = create_employee('Test Employee 2', 'CTO')
+	emp3 = create_employee('Test Employee 3', 'Head of Marketing and Sales', emp1)
+	emp4 = create_employee('Test Employee 4', 'Project Manager', emp2)
+	emp5 = create_employee('Test Employee 5', 'Engineer', emp2)
+	emp6 = create_employee('Test Employee 6', 'Analyst', emp3)
+	emp7 = create_employee('Test Employee 7', 'Software Developer', emp4)
+
+	employees = [emp1, emp2, emp3, emp4, emp5, emp6, emp7]
+	return employees
+
+@frappe.whitelist()
+def get_employee_records():
+	return frappe.db.get_list('Employee', filters={
+		'company': 'Test Org Chart'
+	}, pluck='name', order_by='name')
+
+def create_company():
+	company = frappe.db.exists('Company', 'Test Org Chart')
+	if not company:
+		company = frappe.get_doc({
+			'doctype': 'Company',
+			'company_name': 'Test Org Chart',
+			'country': 'India',
+			'default_currency': 'INR'
+		}).insert().name
+
+	return company
+
+def create_employee(first_name, designation, reports_to=None):
+	employee = frappe.db.exists('Employee', {'first_name': first_name, 'designation': designation})
+	if not employee:
+		employee = frappe.get_doc({
+			'doctype': 'Employee',
+			'first_name': first_name,
+			'company': 'Test Org Chart',
+			'gender': 'Female',
+			'date_of_birth': getdate('08-12-1998'),
+			'date_of_joining': getdate('01-01-2021'),
+			'designation': designation,
+			'reports_to': reports_to
+		}).insert().name
+
+	return employee
+
+def create_missing_designation():
+	if not frappe.db.exists('Designation', 'CTO'):
+		frappe.get_doc({
+			'doctype': 'Designation',
+			'designation_name': 'CTO'
+		}).insert()
\ No newline at end of file
diff --git a/erpnext/utilities/hierarchy_chart.py b/erpnext/utilities/hierarchy_chart.py
new file mode 100644
index 0000000..fb58a5d
--- /dev/null
+++ b/erpnext/utilities/hierarchy_chart.py
@@ -0,0 +1,29 @@
+# Copyright (c) 2021, Frappe Technologies Pvt. Ltd. and Contributors
+# MIT License. See license.txt
+
+from __future__ import unicode_literals
+import frappe
+from frappe import _
+
+@frappe.whitelist()
+def get_all_nodes(parent, parent_name, method, company):
+	'''Recursively gets all data from nodes'''
+	method = frappe.get_attr(method)
+
+	if method not in frappe.whitelisted:
+		frappe.throw(_('Not Permitted'), frappe.PermissionError)
+
+	data = method(parent, company)
+	result = [dict(parent=parent, parent_name=parent_name, data=data)]
+
+	nodes_to_expand = [{'id': d.get('id'), 'name': d.get('name')} for d in data if d.get('expandable')]
+
+	while nodes_to_expand:
+		parent = nodes_to_expand.pop(0)
+		data = method(parent.get('id'), company)
+		result.append(dict(parent=parent.get('id'), parent_name=parent.get('name'), data=data))
+		for d in data:
+			if d.get('expandable'):
+				nodes_to_expand.append({'id': d.get('id'), 'name': d.get('name')})
+
+	return result
\ No newline at end of file
diff --git a/package.json b/package.json
index c9ee7a6..5bc1e56 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "snyk": "^1.518.0"
   },
   "dependencies": {
-    "onscan.js": "^1.5.2"
+    "onscan.js": "^1.5.2",
+    "html2canvas": "^1.1.4"
   },
   "scripts": {
     "snyk-protect": "snyk protect",
diff --git a/yarn.lock b/yarn.lock
index 242695c..82e9821 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -688,6 +688,11 @@
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-arraybuffer@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
+  integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -997,6 +1002,13 @@
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-line-break@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
+  integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
+  dependencies:
+    base64-arraybuffer "^0.2.0"
+
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -1472,6 +1484,13 @@
   dependencies:
     lru-cache "^6.0.0"
 
+html2canvas@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.1.4.tgz#53ae91cd26e9e9e623c56533cccb2e3f57c8124c"
+  integrity sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==
+  dependencies:
+    css-line-break "1.1.1"
+
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"