diff --git a/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue b/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
new file mode 100644
index 00000000000..26ed3ca648c
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="donut-with-legends">
+    <DonutChart :segments="donutSegments" :icon :max-value="maxValue" />
+    <div class="legends-and-title">
+      <slot />
+      <ul class="legends">
+        <UiLegend
+          v-for="(legendSegment, index) in legendSegments"
+          :key="index"
+          :color="legendSegment.color"
+          :value="legendSegment.value"
+          :unit="legendSegment.unit"
+          :tooltip="legendSegment.tooltip"
+        >
+          {{ legendSegment.label }}
+        </UiLegend>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DonutChart from '@core/components/DonutChart.vue'
+import UiLegend from '@core/components/UiLegend.vue'
+import type { DonutSegmentColor } from '@core/types/donut-chart.type'
+import type { LegendColor } from '@core/types/legend.type'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
+const props = defineProps<{
+  segments: {
+    label: string
+    value: number
+    unit?: string
+    color: DonutSegmentColor
+    tooltip?: string
+  }[]
+  icon?: IconDefinition
+  maxValue?: number
+}>()
+defineSlots<{
+  default: () => void
+}>()
+const donutSegments = computed(() =>
+  props.segments.map(segment => ({
+    value: segment.value,
+    color: segment.color,
+  }))
+)
+const legendSegments = computed(() =>
+  props.segments.map(segment => ({
+    label: segment.label,
+    value: segment.value,
+    unit: segment.unit,
+    color: segment.color === 'unknown' ? 'disabled' : (segment.color as LegendColor),
+    tooltip: segment.tooltip,
+  }))
+)
+</script>
+
+<style lang="postcss" scoped>
+.donut-with-legends {
+  display: flex;
+  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>
diff --git a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts b/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
index fa3d2f946c7..19d1adcec14 100644
--- a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
+++ b/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
@@ -1,5 +1,5 @@
-export type DonutColor = 'success' | 'warning' | 'error' | 'unknown'
+export type DonutSegmentColor = 'success' | 'warning' | 'error' | 'unknown'
 export type DonutSegment = {
   value: number
-  color: DonutColor
+  color: DonutSegmentColor
 }
diff --git a/@xen-orchestra/web-core/lib/types/ui-legend.type.ts b/@xen-orchestra/web-core/lib/types/legend.type.ts
similarity index 100%
rename from @xen-orchestra/web-core/lib/types/ui-legend.type.ts
rename to @xen-orchestra/web-core/lib/types/legend.type.ts
diff --git a/@xen-orchestra/web/src/components/DonutWithLegends.vue b/@xen-orchestra/web/src/components/DonutWithLegends.vue
deleted file mode 100644
index ca209113b49..00000000000
--- a/@xen-orchestra/web/src/components/DonutWithLegends.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="donut-with-legends">
-    <DonutChart :segments="donutSegments" :icon="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>
-</template>
-
-<script setup lang="ts">
-import type { DonutSegment } from '@core/types/donut-chart.type'
-import type { LegendColor } from '@core/types/ui-legend.type'
-import DonutChart from '@core/components/DonutChart.vue'
-import UiLegend from '@core/components/UiLegend.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  segments: {
-    label: string
-    value: number
-    unit?: string
-    color: LegendColor
-    tooltip?: string
-  }[]
-  icon: IconDefinition
-}>()
-
-const maxValue = computed(() => {
-  return props.segments.reduce((acc, segment) => {
-    return acc + segment.value
-  }, 0)
-})
-
-const donutSegments = computed(() => {
-  if (props?.segments.length === 0) {
-    return []
-  }
-  return props.segments
-    .filter(segment => segment.color !== 'dark-blue')
-    .map(segment => {
-      let color
-      if (segment.color === 'disabled' || segment.color === 'default') {
-        color = 'unknown'
-      } else {
-        color = segment.color
-      }
-
-      return {
-        value: segment.value,
-        color,
-      }
-    }) as DonutSegment[]
-})
-</script>
-
-<style lang="postcss" scoped>
-.donut-with-legends {
-  display: flex;
-  align-items: center;
-  gap: 3.2rem;
-}
-</style>
diff --git a/@xen-orchestra/web/src/components/pool/dashboard/VmStatus.vue b/@xen-orchestra/web/src/components/pool/dashboard/VmStatus.vue
index b4b79ee8d9d..a0310375e57 100644
--- a/@xen-orchestra/web/src/components/pool/dashboard/VmStatus.vue
+++ b/@xen-orchestra/web/src/components/pool/dashboard/VmStatus.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import DonutWithLegends from '@/components/DonutWithLegends.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { Vm } from '@/types/vm.type'
-import type { LegendColor } from '@core/types/ui-legend.type'
+import type { DonutSegmentColor } from '@core/types/donut.type'
 import CardTitle from '@core/components/card/CardTitle.vue'
 import CardNumbers from '@core/components/CardNumbers.vue'
+import DonutWithLegends from '@core/components/DonutWithLegends.vue'
 import UiCard from '@core/components/UiCard.vue'
 import { faDesktop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -40,18 +40,18 @@ const segments = computed(() => [
   {
     label: t('vms-running-status'),
     value: runningVmsCount.value,
-    color: 'success' as LegendColor,
+    color: 'success' as DonutSegmentColor,
   },
   {
     label: t('vms-halted-status'),
     value: inactiveVmsCount.value,
-    color: 'dark-blue' as LegendColor,
+    color: 'warning' as DonutSegmentColor,
     tooltip: t('vms-halted-status-tooltip'),
   },
   {
     label: t('vms-unknown-status'),
     value: unknownVmsCount.value,
-    color: 'disabled' as LegendColor,
+    color: 'unknown' as DonutSegmentColor,
     tooltip: t('vms-unknown-status-tooltip'),
   },
 ])