diff --git a/@xen-orchestra/web/src/components/DonutWithLegends.vue b/@xen-orchestra/web/src/components/DonutWithLegends.vue
index d5400259601..ed731cf4666 100644
--- a/@xen-orchestra/web/src/components/DonutWithLegends.vue
+++ b/@xen-orchestra/web/src/components/DonutWithLegends.vue
@@ -1,18 +1,21 @@
 <template>
   <div class="donut-with-legends">
     <DonutChart :segments="donutSegments" :icon :max-value="maxValue" />
-    <ul class="legends">
-      <UiLegend
-        v-for="(segment, index) in segments"
-        :key="index"
-        :color="segment.color"
-        :value="segment.value"
-        :unit="segment.unit"
-        :tooltip="segment.tooltip"
-      >
-        {{ segment.label }}
-      </UiLegend>
-    </ul>
+    <div class="legends-and-title">
+      <slot />
+      <ul class="legends">
+        <UiLegend
+          v-for="(segment, index) in segments"
+          :key="index"
+          :color="segment.color"
+          :value="segment.value"
+          :unit="segment.unit"
+          :tooltip="segment.tooltip"
+        >
+          {{ segment.label }}
+        </UiLegend>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -36,6 +39,10 @@ const props = defineProps<{
   maxValue?: number
 }>()
 
+defineSlots<{
+  default: () => void
+}>()
+
 const donutSegments = computed(() => {
   if (props?.segments.length === 0) {
     return []
@@ -64,4 +71,16 @@ const donutSegments = computed(() => {
   align-items: center;
   gap: 3.2rem;
 }
+
+.legends-and-title {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.legends {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
 </style>