diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
index ae4d4296991..0c38b13f24d 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.js
@@ -34,6 +34,14 @@ export class HierarchyCard extends Component {
         this.templates = useViewCompiler(this.constructor.Compiler, templates);
     }
 
+    get classNames() {
+        const classNames = [this.props.classNames];
+        if (this.props.node.nodes.length) {
+            classNames.push("o_hierarchy_node_unfolded");
+        }
+        return classNames.join(" ");
+    }
+
     getRenderingContext(data) {
         const record = getFormattedRecord(data.record);
         return {
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
index 4e30411c9b1..258e479558f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_card.xml
@@ -2,7 +2,7 @@
 <templates>
 
     <t t-name="hr_org_chart.HierarchyCard">
-        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="props.classNames" t-att-data-node-id="props.node.id">
+        <div class="o_hierarchy_node_container mb-4 d-flex flex-column" t-att-class="classNames" t-att-data-node-id="props.node.id">
             <div class="o_hierarchy_node_button_container w-100 d-flex justify-content-end">
                 <button t-if="props.node.parentResId !== false and !props.node.parentNode"
                         name="hierarchy_search_parent_node"
diff --git a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
index 4dbda080b22..a5eb58f281f 100644
--- a/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
+++ b/addons/hr_org_chart/static/src/views/hierarchy/hierarchy_renderer.scss
@@ -4,10 +4,16 @@ $o-chart-line-color: #ababb1;
     .o_hierarchy_container {
         gap: 25px;
 
-        .o_hierarchy_row.o_hierarchy_hover {
-            background-color: $hierarchy_element_hover-background;
-            box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
-                1px 1px 0px 0px $hierarchy_element_hover-border inset;
+        .o_hierarchy_row {
+            &.o_hierarchy_hover {
+                background-color: $hierarchy_element_hover-background;
+                box-shadow: -1px -1px 0px 0px $hierarchy_element_hover-border inset,
+                    1px 1px 0px 0px $hierarchy_element_hover-border inset;
+            }
+
+            &:has(.o_hierarchy_node_unfolded) .o_hierarchy_node_container:not(.o_hierarchy_node_unfolded) {
+                opacity: 50%;
+            }
         }
 
         .o_hierarchy_separator {