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);
+}