diff --git a/addons/hr_org_chart/models/hr_org_chart_mixin.py b/addons/hr_org_chart/models/hr_org_chart_mixin.py
index 4e76945df7266..3668a4dfdefdb 100644
--- a/addons/hr_org_chart/models/hr_org_chart_mixin.py
+++ b/addons/hr_org_chart/models/hr_org_chart_mixin.py
@@ -12,6 +12,12 @@ class HrEmployeeBase(models.AbstractModel):
         'Indirect Subordinates Count',
         compute='_compute_subordinates', recursive=True, store=False,
         compute_sudo=True)
+    department_color = fields.Integer("Department Color", related="department_id.color")
+    child_count = fields.Integer(
+        'Direct Subordinates Count',
+        compute='_compute_child_count', recursive=True,
+        compute_sudo=True,
+    )
 
     def _get_subordinates(self, parents=None):
         """
@@ -56,3 +62,13 @@ def _search_is_subordinate(self, operator, value):
         if not self.env.user.employee_id.subordinate_ids:
             return [('id', operator, self.env.user.employee_id.id)]
         return (['!'] if operator == '!=' else []) + [('id', 'in', self.env.user.employee_id.subordinate_ids.ids)]
+
+    def _compute_child_count(self):
+        employee_read_group = self._read_group(
+            [('parent_id', 'in', self.ids)],
+            ['parent_id'],
+            ['id:count'],
+        )
+        child_count_per_parent_id = dict(employee_read_group)
+        for employee in self:
+            employee.child_count = child_count_per_parent_id.get(employee._origin, 0)
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
new file mode 100644
index 0000000000000..972a1f744556b
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import { Avatar } from "@mail/views/web/fields/avatar/avatar";
+
+import { HierarchyRenderer } from "../hierarchy/hierarchy_renderer";
+
+export class HrEmployeeHierarchyRenderer extends HierarchyRenderer {
+   static template = "hr_org_chart.HrEmployeeHierarchyRenderer";
+   static components = {
+      ...HierarchyRenderer.components,
+      Avatar,
+   };
+}
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss
new file mode 100644
index 0000000000000..d82a9429f2e71
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.scss
@@ -0,0 +1,7 @@
+.o_hierarchy_renderer {
+    .o_hierarchy_parent_node_container {
+        .o_avatar > span {
+            width: 100% !important;
+        }
+    }
+}
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
new file mode 100644
index 0000000000000..760af418f3f24
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_renderer.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<templates>
+
+    <t t-name="hr_org_chart.HrEmployeeHierarchyRenderer" t-inherit="hr_org_chart.HierarchyRenderer">
+        <xpath expr="//div[hasclass('o_hierarchy_parent_node_container')]/span" position="replace">
+            <Avatar
+                resModel="row.parentNode.model.resModel"
+                resId="row.parentNode.resId"
+                displayName="row.parentNode.data.name"
+            />
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
new file mode 100644
index 0000000000000..05fb680dcb8e4
--- /dev/null
+++ b/addons/hr_org_chart/static/src/views/hr_employee_hierarchy/hr_employee_hierarchy_view.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { hierarchyView } from "../hierarchy/hierarchy_view";
+import { HrEmployeeHierarchyRenderer } from "./hr_employee_hierarchy_renderer";
+
+export const hrEmployeeHierarchyView = {
+    ...hierarchyView,
+    Renderer: HrEmployeeHierarchyRenderer,
+};
+
+registry.category("views").add("hr_employee_hierarchy", hrEmployeeHierarchyView);
diff --git a/addons/hr_org_chart/views/hr_views.xml b/addons/hr_org_chart/views/hr_views.xml
index 90c17ebe13321..a4d99775ced9a 100644
--- a/addons/hr_org_chart/views/hr_views.xml
+++ b/addons/hr_org_chart/views/hr_views.xml
@@ -14,6 +14,36 @@
         </field>
     </record>
 
+    <record id="hr_employee_hierarchy_view" model="ir.ui.view">
+        <field name="name">hr.employee.view.hierarchy</field>
+        <field name="model">hr.employee</field>
+        <field name="arch" type="xml">
+            <hierarchy child_field="child_ids" js_class="hr_employee_hierarchy">
+                <field name="name" />
+                <field name="job_id" />
+                <field name="department_color" />
+                <field name="hr_icon_display" />
+                <field name="department_id" />
+                <templates>
+                    <t t-name="hierarchy-box">
+                        <div t-attf-class="o_hierarchy_node_header d-flex justify-content-center pb-4 o_hierarchy_node_color_{{ record.department_color.raw_value }}"
+                             t-att-title="record.department_id.value"
+                        >
+                            <field name="image_1024" preview_image="image_128" options="{'zoom': true, 'zoom_delay': 1000}" widget="background_image" />
+                        </div>
+                        <div class="o_hierarchy_node_body d-flex flex-column text-center">
+                            <div class="w-100 position-relative">
+                                <field class="fw-bold" name="name" />
+                                <field name="hr_icon_display" class="d-flex align-items-end o_employee_availability" widget="hr_presence_status" />
+                            </div>
+                            <field name="job_id" />
+                        </div>
+                    </t>
+                </templates>
+            </hierarchy>
+        </field>
+    </record>
+
     <record id="hr_employee_public_view_form_inherit_org_chart" model="ir.ui.view">
         <field name="name">hr.employee.public.view.form.inherit.org_chart</field>
         <field name="model">hr.employee.public</field>
@@ -41,4 +71,8 @@
             </div>
         </field>
     </record>
+
+    <record id="hr.open_view_employee_list_my" model="ir.actions.act_window">
+        <field name="view_mode">kanban,tree,form,activity,graph,pivot,hierarchy</field>
+    </record>
 </odoo>