diff --git a/erpnext/manufacturing/doctype/bom/bom.py b/erpnext/manufacturing/doctype/bom/bom.py
index bf6bf2530ce..047b39df54f 100644
--- a/erpnext/manufacturing/doctype/bom/bom.py
+++ b/erpnext/manufacturing/doctype/bom/bom.py
@@ -1274,7 +1274,7 @@ def get_children(parent=None, is_root=False, **filters):
 
 		bom_items = frappe.get_all(
 			"BOM Item",
-			fields=["item_code", "bom_no as value", "stock_qty"],
+			fields=["item_code", "bom_no as value", "stock_qty", "qty"],
 			filters=[["parent", "=", frappe.form_dict.parent]],
 			order_by="idx",
 		)
diff --git a/erpnext/manufacturing/doctype/bom/bom_tree.js b/erpnext/manufacturing/doctype/bom/bom_tree.js
index 534de0e654b..9b4b3c8f96c 100644
--- a/erpnext/manufacturing/doctype/bom/bom_tree.js
+++ b/erpnext/manufacturing/doctype/bom/bom_tree.js
@@ -16,7 +16,14 @@ frappe.treeview_settings["BOM"] = {
 	show_expand_all: false,
 	get_label: function (node) {
 		if (node.data.qty) {
-			return node.data.qty + " x " + node.data.item_code;
+			const escape = frappe.utils.escape_html;
+			let label = escape(node.data.item_code);
+			if (node.data.item_name && node.data.item_code !== node.data.item_name) {
+				label += `: ${escape(node.data.item_name)}`;
+			}
+			return `${label} <span class="badge badge-pill badge-light">${node.data.qty} ${escape(
+				__(node.data.stock_uom)
+			)}</span>`;
 		} else {
 			return node.data.item_code || node.data.value;
 		}