diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index f693cf6..15334bd 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -486,6 +486,9 @@
 				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();
 
@@ -512,6 +515,31 @@
 		$(`[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';
 
@@ -554,6 +582,14 @@
 				this.$sibling_group.empty();
 		}
 
+		// 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);
 		}
@@ -629,6 +665,10 @@
 				$.each(child_nodes, (_i, data) => {
 					this.add_node(node, data);
 					$(`#${data.name}`).addClass('active-child');
+
+					setTimeout(() => {
+						this.add_connector(node.id, data.name);
+					}, 250);
 				});
 			}
 		}
@@ -653,6 +693,83 @@
 		});
 	}
 
+	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');
+
+		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);
+
+		$('#connectors').append(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) + " " +
+			"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);
+
+		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");
+		}
+	}
+
 	set_selected_node(node) {
 		// remove .active class from the current node
 		$('.active').removeClass('active');
@@ -669,6 +786,7 @@
 		node_element.click(function() {
 			if (node_element.is(':visible') && node_element.hasClass('active-path')) {
 				me.remove_levels_after_node(node);
+				me.remove_orphaned_connectors();
 			} else {
 				me.add_node_to_hierarchy(node, true);
 				me.collapse_node();
@@ -786,4 +904,24 @@
 
 		level.empty().append(current_node);
 	}
+
+	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();
+		})
+	}
+
+	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/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
index 6012c01..16b8792 100644
--- a/erpnext/public/scss/organizational_chart.scss
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -199,6 +199,7 @@
 
 #arrows {
 	position: absolute;
+	overflow: visible;
 }
 
 .active-connector {