diff --git a/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html b/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
index 691d1e4..c37e010 100644
--- a/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
+++ b/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
@@ -20,7 +20,7 @@
     {% endif %}
     connectNodes(jsPlumbHierarchy, connectionOptions);
 
-    {% if related_parent.parent.related_parents.exists %}
+    {% if related_parent.parent_count > 0 %}
       var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy';
       addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl);
     {% endif %}
@@ -58,7 +58,7 @@
     {% endif %}
     connectNodes(jsPlumbHierarchy, connectionOptions);
 
-    {% if related_child.child.children.exists %}
+    {% if related_child.child_count > 0 %}
       var linkUrl = '{{ related_child.child.get_absolute_url }}#hierarchy';
       addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl);
     {% endif %}
diff --git a/component_catalog/tests/test_views.py b/component_catalog/tests/test_views.py
index e954c84..9c891b0 100644
--- a/component_catalog/tests/test_views.py
+++ b/component_catalog/tests/test_views.py
@@ -598,7 +598,7 @@ def test_component_catalog_detail_view_owner_tab_hierarchy_availability(self):
         self.client.login(username="nexb_user", password="t3st")
         url = self.component1.get_absolute_url()
         response = self.client.get(url)
-        self.assertNotContains(response, "jsPlumbHierarchy")
+        self.assertNotContains(response, "jsPlumb")
         self.assertNotContains(response, "Selected Owner")
         self.assertNotContains(response, "Child Owners")
 
diff --git a/component_catalog/views.py b/component_catalog/views.py
index abb89fe..943eb8c 100644
--- a/component_catalog/views.py
+++ b/component_catalog/views.py
@@ -21,6 +21,7 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.core import signing
 from django.core.validators import EMPTY_VALUES
+from django.db.models import Count
 from django.db.models import Prefetch
 from django.http import FileResponse
 from django.http import Http404
@@ -630,18 +631,38 @@ def get_queryset(self):
             "licenses",
         )
 
-        related_children_qs = Subcomponent.objects.select_related(
-            "usage_policy",
-        ).prefetch_related(
-            "licenses",
-            Prefetch("child", queryset=component_prefetch_qs),
+        related_children_qs = (
+            Subcomponent.objects.select_related(
+                "usage_policy",
+            )
+            .prefetch_related(
+                "licenses",
+                Prefetch("child", queryset=component_prefetch_qs),
+            )
+            .annotate(
+                child_count=Count("child__children"),
+            )
+            .order_by(
+                "child__name",
+                "child__version",
+            )
         )
 
-        related_parents_qs = Subcomponent.objects.select_related(
-            "usage_policy",
-        ).prefetch_related(
-            "licenses",
-            Prefetch("parent", queryset=component_prefetch_qs),
+        related_parents_qs = (
+            Subcomponent.objects.select_related(
+                "usage_policy",
+            )
+            .prefetch_related(
+                "licenses",
+                Prefetch("parent", queryset=component_prefetch_qs),
+            )
+            .annotate(
+                parent_count=Count("parent__related_parents"),
+            )
+            .order_by(
+                "parent__name",
+                "parent__version",
+            )
         )
 
         return (
diff --git a/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html b/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
index 1ee1a3a..31e6926 100644
--- a/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
+++ b/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
@@ -15,8 +15,7 @@
       {% endif %}
       connectNodes(jsPlumbHierarchy, connectionOptions);
 
-      {# Hierarchy is only supported on components, not yet on packages.
-      {% if relation.component.children.exists %}
+      {% if relation.children_count > 0 %}
         var linkUrl = '{{ relation.component.get_absolute_url }}#hierarchy';
         addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl);
       {% endif %}
diff --git a/product_portfolio/views.py b/product_portfolio/views.py
index 54e945e..f4e5d74 100644
--- a/product_portfolio/views.py
+++ b/product_portfolio/views.py
@@ -389,6 +389,9 @@ def tab_hierarchy(self):
             .prefetch_related(
                 "component__licenses",
             )
+            .annotate(
+                children_count=Count("component__children"),
+            )
             .order_by(
                 "feature",
                 "component",