diff --git a/erpnext/hr/doctype/employee/employee.py b/erpnext/hr/doctype/employee/employee.py
index ed7d588..7917e3a 100755
--- a/erpnext/hr/doctype/employee/employee.py
+++ b/erpnext/hr/doctype/employee/employee.py
@@ -476,13 +476,14 @@
 	return employee_emails
 
 @frappe.whitelist()
-def get_children(doctype, parent=None, company=None, is_root=False, is_tree=False):
+def get_children(doctype, parent=None, company=None, is_root=False, is_tree=False, fields=None):
 
 	filters = [['status', '!=', 'Left']]
 	if company and company != 'All Companies':
 		filters.append(['company', '=', company])
 
-	fields = ['name as value', 'employee_name as title']
+	if not fields:
+		fields = ['name as value', 'employee_name as title']
 
 	if is_root:
 		parent = ''
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/node_card.html b/erpnext/hr/page/organizational_chart/node_card.html
new file mode 100644
index 0000000..057c45e
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/node_card.html
@@ -0,0 +1,27 @@
+<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 ml-5">
+					<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 connections == 1 %}
+					<div class="node-connections text-muted ml-2">· {{ connections }} {{ __("Connection") }} </div>
+				{% else %}
+					<div class="node-connections text-muted ml-2">· {{ connections }} {{ __("Connections") }} </div>
+				{% endif %}
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
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..04bd942
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -0,0 +1,409 @@
+frappe.pages['organizational-chart'].on_page_load = function(wrapper) {
+	frappe.ui.make_app_page({
+		parent: wrapper,
+		title: __('Organizational Chart'),
+		single_column: true
+	});
+
+	let organizational_chart = new OrganizationalChart(wrapper);
+	$(wrapper).bind('show', ()=> {
+		organizational_chart.show();
+	});
+};
+
+class OrganizationalChart {
+
+	constructor(wrapper) {
+		this.wrapper = $(wrapper);
+		this.page = wrapper.page;
+
+		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);
+			}
+		}
+	}
+
+	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
+		});
+
+		node.parent.append(node_card);
+		node.$link = $(`#${node.id}`);
+	}
+
+	show() {
+		frappe.breadcrumbs.add('HR');
+
+		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()
+
+					if (me.$hierarchy)
+						me.$hierarchy.remove();
+
+					// setup hierarchy
+					me.$hierarchy = $(
+						`<ul class="hierarchy">
+							<li class="root-level level"></li>
+						</ul>`);
+
+					me.page.main.append(me.$hierarchy);
+					me.render_root_node();
+				}
+			}
+		});
+
+		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>`);
+	}
+
+	render_root_node() {
+		this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
+		let me = this;
+
+		frappe.call({
+			method: me.method,
+			args: {
+				company: me.company
+			},
+			callback: function(r) {
+				if (r.message.length) {
+					let data = r.message[0];
+
+					let root_node = new me.Node({
+						id: data.name,
+						parent: me.$hierarchy.find('.root-level'),
+						parent_id: undefined,
+						image: data.image,
+						name: data.employee_name,
+						title: data.designation,
+						expandable: true,
+						connections: data.connections,
+						is_root: true,
+					});
+
+					me.expand_node(root_node);
+				}
+			}
+		})
+	}
+
+	expand_node(node) {
+		let 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) {
+		frappe.run_serially([
+			() => this.get_child_nodes(node.id),
+			(child_nodes) => this.render_child_nodes(node, child_nodes)
+		]);
+	}
+
+	get_child_nodes(node_id) {
+		let me = this;
+		return new Promise(resolve => {
+			frappe.call({
+				method: this.method,
+				args: {
+					parent: node_id,
+					company: me.company
+				},
+				callback: (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.name);
+					}, 250);
+				});
+			}
+		}
+
+		node.$children.show();
+		$(`path[data-parent="${node.id}"]`).show();
+		node.expanded = true;
+	}
+
+	add_node(node, data) {
+		var $li = $('<li class="child-node"></li>');
+
+		return new this.Node({
+			id: data.name,
+			parent: $li.appendTo(node.$children),
+			parent_id: node.id,
+			image: data.image,
+			name: data.employee_name,
+			title: data.designation,
+			expandable: data.expandable,
+			connections: data.connections,
+			children: undefined
+		});
+	}
+
+	add_connector(parent_id, child_id) {
+		let parent_node = document.querySelector(`#${parent_id}`);
+		let child_node = document.querySelector(`#${child_id}`);
+
+		// variable for the namespace
+		const svgns = 'http://www.w3.org/2000/svg';
+		let path = document.createElementNS(svgns, 'path');
+
+		// we need to connect right side of the parent to the left side of the child node
+		let pos_parent_right = {
+			x: parent_node.offsetLeft + parent_node.offsetWidth,
+			y: parent_node.offsetTop + parent_node.offsetHeight / 2
+		};
+		let pos_child_left = {
+			x: child_node.offsetLeft - 5,
+			y: child_node.offsetTop + child_node.offsetHeight / 2
+		};
+
+		let connector =
+			"M" +
+			(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+			"C" +
+			(pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
+			(pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
+			(pos_child_left.x) + "," + (pos_child_left.y);
+
+		path.setAttribute("d", connector);
+		path.setAttribute("data-parent", parent_id);
+		path.setAttribute("data-child", child_id);
+
+		if ($(`#${parent_id}`).hasClass('active')) {
+			path.setAttribute("class", "active-connector");
+			path.setAttribute("marker-start", "url(#arrowstart-active)");
+			path.setAttribute("marker-end", "url(#arrowhead-active)");
+		} else if ($(`#${parent_id}`).hasClass('active-path')) {
+			path.setAttribute("class", "collapsed-connector");
+			path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
+			path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
+		}
+
+		$('#connectors').append(path);
+	}
+
+	set_selected_node(node) {
+		// remove .active class from the current node
+		$('.active').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');
+		if (node_parent.parent().hasClass('root-level')) {
+			previous_level_nodes = node_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.name);
+					});
+				}
+			}
+		]);
+	}
+
+	setup_node_click_action(node) {
+		let me = this;
+		let node_element = $(`#${node.id}`);
+
+		node_element.click(function() {
+			let 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);
+		});
+	}
+
+	remove_levels_after_node(node) {
+		let level = $(`#${node.id}`).parent().parent().parent();
+
+		if ($(`#${node.id}`).parent().hasClass('root-level')) {
+			level = $(`#${node.id}`).parent();
+		}
+
+		level = $('.hierarchy > li:eq('+ level.index() + ')');
+		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) => {
+			let parent = $(path).data('parent');
+			let child = $(path).data('child');
+
+			if ($(parent).length || $(child).length)
+				return;
+
+			$(path).remove();
+		})
+	}
+}
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..be29645
--- /dev/null
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.py
@@ -0,0 +1,49 @@
+from __future__ import unicode_literals
+import frappe
+
+@frappe.whitelist()
+def get_children(parent=None, company=None, is_root=False, is_tree=False, fields=None):
+
+	filters = [['status', '!=', 'Left']]
+	if company and company != 'All Companies':
+		filters.append(['company', '=', company])
+
+	if not fields:
+		fields = ['employee_name', 'name', 'reports_to', 'image', 'designation']
+
+	if is_root:
+		parent = ''
+	if parent and company and parent!=company:
+		filters.append(['reports_to', '=', parent])
+	else:
+		filters.append(['reports_to', '=', ''])
+
+	employees = frappe.get_list('Employee', fields=fields,
+		filters=filters, order_by='name')
+
+	for employee in employees:
+		is_expandable = frappe.get_all('Employee', filters=[
+			['reports_to', '=', employee.get('name')]
+		])
+		employee.connections = get_connections(employee.name)
+		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..d3ebcdf 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/organizational_chart.scss"
 	],
 	"css/marketplace.css": [
 		"public/less/hub.less"
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
new file mode 100644
index 0000000..62f6ddc
--- /dev/null
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -0,0 +1,209 @@
+.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;
+
+	.btn-edit-node {
+		display: none;
+	}
+
+	.edit-chart-node {
+		display: none;
+	}
+
+	.node-edit-icon {
+		display: 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-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;
+	height: 5rem;
+
+	.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);
+	}
+
+	.edit-chart-node {
+		display: block;
+	}
+
+	.node-edit-icon {
+		display: block;
+	}
+
+	.edit-chart-node {
+		margin-right: 0.25rem;
+	}
+
+	.node-edit-icon > .icon{
+		stroke: var(--blue-500);
+	}
+
+	.node-name {
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 2px;
+	}
+}
+
+.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 {
+	display: flex;
+	padding-top: 30px;
+}
+
+.hierarchy li {
+	list-style-type: none;
+}
+
+.child-node {
+	margin: 0px 0px 16px 0px;
+}
+
+.level {
+	margin-right: 8px;
+}
+
+#arrows {
+	position: absolute;
+}
+
+.active-connector {
+	stroke: var(--blue-500);
+}
+
+.collapsed-connector {
+	stroke: var(--blue-300);
+}