diff --git a/@xen-orchestra/lite/src/components/HostPatchesTable.vue b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
index 0354bf7c70b..3adf60a4440 100644
--- a/@xen-orchestra/lite/src/components/HostPatchesTable.vue
+++ b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
@@ -9,7 +9,7 @@
       </th>
       <td v-if="hasMultipleHosts">
         <UiSpinner v-if="!areAllLoaded" />
-        <UiCounter
+        <Counter
           v-else
           v-tooltip="{
             placement: 'left',
@@ -20,6 +20,8 @@
           :value="patch.$hostRefs.size"
           class="counter"
           color="danger"
+          appearance="accent"
+          size="small"
         />
       </td>
     </tr>
@@ -31,7 +33,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiSpinner from '@/components/ui/UiSpinner.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import type { XenApiPatchWithHostRefs } from '@/composables/host-patches.composable'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
index 3a16d3fb9c8..99f9d62fb1f 100644
--- a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
+++ b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -3,7 +3,13 @@
     <TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
     <TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
       Events
-      <UiCounter v-if="unreadEventsCount > 0" :value="unreadEventsCount" color="success" />
+      <Counter
+        v-if="unreadEventsCount > 0"
+        :value="unreadEventsCount"
+        color="success"
+        appearance="accent"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
@@ -80,11 +86,11 @@ import {
   type Param,
 } from '@/libs/story/story-param'
 import UiButton from '@core/components/button/UiButton.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faSliders } from '@fortawesome/free-solid-svg-icons'
 import 'highlight.js/styles/github-dark.css'
 import { uniqueId, upperFirst } from 'lodash-es'
diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index 43064c5dbe7..da8b3b80c8a 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -4,7 +4,14 @@
       {{ host.name_label || '(Host)' }}
       <template #addons>
         <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-if="isReady" v-tooltip="$t('running-vm', { count: vmCount })" :value="vmCount" color="primary" />
+        <Counter
+          v-if="isReady"
+          v-tooltip="$t('running-vm', { count: vmCount })"
+          :value="vmCount"
+          color="primary"
+          appearance="neutral"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template #sublist>
@@ -21,11 +28,11 @@ import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
+import Counter from '@core/components/counter/Counter.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/shared'
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
index 2ea46b6642c..5ade6b42685 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
+++ b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
@@ -3,7 +3,7 @@
     <UiCardTitle>
       {{ $t('alarms') }}
       <template v-if="isReady && alarms.length > 0" #right>
-        <UiCounter :value="alarms.length" color="danger" />
+        <Counter :value="alarms.length" color="danger" appearance="accent" size="small" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
@@ -46,7 +46,7 @@ import UiCardTitle from '@/components/ui/UiCardTitle.vue'
 import UiTable from '@/components/ui/UiTable.vue'
 import { useAlarmStore } from '@/stores/xen-api/alarm.store'
 import UiButton from '@core/components/button/UiButton.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 
 const { records: alarms, start, isStarted, isReady, hasError } = useAlarmStore().subscribe({ defer: true })
 </script>
diff --git a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
index 26ae1cc9c06..41cf9032f32 100644
--- a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
@@ -2,7 +2,7 @@
   <div class="ui-section-title" :class="tags.left">
     <component :is="tags.left" v-if="$slots.default || left" class="left">
       <slot>{{ left }}</slot>
-      <UiCounter v-if="count > 0" class="count" :value="count" color="primary" />
+      <Counter v-if="count > 0" class="count" :value="count" color="primary" appearance="accent" size="small" />
     </component>
     <component :is="tags.right" v-if="$slots.right || right" class="right">
       <slot name="right">{{ right }}</slot>
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { UiCardTitleLevel } from '@/types/enums'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(
diff --git a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
index ca5d018b953..cc370e3fdeb 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
@@ -12,7 +12,7 @@
   >
     <CardTitle v-bind="properties">
       {{ settings.defaultSlotContent }}
-      <UiCounter :value="3" color="danger" size="medium" />
+      <Counter :value="3" color="danger" size="medium" appearance="accent" />
       <template #info>
         {{ settings.infoSlotContent }}
         <UiButton level="tertiary" size="small" :right-icon="faAngleRight">See all</UiButton>
@@ -28,6 +28,6 @@ import { slot, setting } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
 import UiButton from '@core/components/button/UiButton.vue'
 import CardTitle from '@core/components/card/CardTitle.vue'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue b/@xen-orchestra/lite/src/stories/web-core/counter/counter.story.vue
similarity index 64%
rename from @xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/counter/counter.story.vue
index be11650c59e..71a0ccb4f7e 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-counter.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/counter/counter.story.vue
@@ -9,15 +9,16 @@
         .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
         .preset('primary')
         .widget(),
-      prop('size').type('CounterSize').enum('small', 'medium').widget(),
+      prop('size').type('CounterSize').enum('small', 'medium').required().preset('small').widget(),
+      prop('appearance').type(`'accent' | 'neutral'`).enum('accent', 'neutral').required().preset('accent').widget(),
     ]"
   >
-    <UiCounter v-bind="properties" />
+    <Counter v-bind="properties" />
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop } from '@/libs/story/story-param'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
index 67077932140..dcdde52e8bd 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tab/tab-item.story.vue
@@ -13,7 +13,7 @@
     <TabList>
       <TabItem v-bind="properties">
         {{ settings.label }}
-        <UiCounter v-if="settings.counter" :value="settings.counter" color="info" />
+        <Counter v-if="settings.counter" :value="settings.counter" color="primary" appearance="accent" size="small" />
       </TabItem>
     </TabList>
   </ComponentStory>
@@ -23,7 +23,7 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
+import Counter from '@core/components/counter/Counter.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
index dc37424eae1..15f81e01a05 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
@@ -10,7 +10,7 @@
                 Host - {{ i }}
                 <template #addons>
                   <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-                  <UiCounter color="info" value="3" />
+                  <Counter color="primary" value="3" appearance="neutral" size="small" />
                 </template>
               </TreeItemLabel>
               <template #sublist>
@@ -42,10 +42,10 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { slot } from '@/libs/story/story-param'
 import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
index fab0e833cbd..27d263f01b8 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
@@ -2,7 +2,7 @@
   <UiCard :color="hasError ? 'error' : undefined">
     <UiTitle class="title-with-counter" type="h4">
       {{ $t('tasks') }}
-      <UiCounter :value="pendingTasks.length" color="primary" size="medium" />
+      <Counter :value="pendingTasks.length" color="primary" size="medium" appearance="accent" />
     </UiTitle>
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
     <UiCardSpinner v-if="!isReady" />
@@ -16,7 +16,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import UiTitle from '@/components/ui/UiTitle.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useTaskStore } from '@/stores/xen-api/task.store'
-import UiCounter from '@core/components/UiCounter.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import { useI18n } from 'vue-i18n'
 
 const { pendingTasks, finishedTasks, isReady, hasError } = useTaskStore().subscribe()
diff --git a/@xen-orchestra/web-core/lib/components/UiCounter.vue b/@xen-orchestra/web-core/lib/components/UiCounter.vue
deleted file mode 100644
index 9e426b6f780..00000000000
--- a/@xen-orchestra/web-core/lib/components/UiCounter.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <span :class="classNames" class="ui-counter typo">
-    <span class="inner">{{ value }}</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import type { CounterColor } from '@core/types/color.type'
-import type { CounterSize } from '@core/types/size.type'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    value: number | string
-    color: CounterColor
-    size?: CounterSize
-  }>(),
-  { size: 'small' }
-)
-
-const fontClasses = {
-  small: 'p4-semi-bold',
-  medium: 'p1-medium',
-}
-
-const classNames = computed(() => {
-  return [props.color, props.size, fontClasses[props.size]]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-counter {
-  &.primary {
-    --background-color: var(--color-normal-item-base);
-    --color: var(--color-normal-txt-item);
-  }
-
-  &.secondary {
-    --background-color: var(--color-neutral-txt-primary);
-    --color: var(--color-neutral-background-primary);
-  }
-
-  &.success {
-    --background-color: var(--color-success-item-base);
-    --color: var(--color-success-txt-item);
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-item-base);
-    --color: var(--color-warning-txt-item);
-  }
-
-  &.danger {
-    --background-color: var(--color-danger-item-base);
-    --color: var(--color-danger-txt-item);
-  }
-
-  &.disabled {
-    --background-color: var(--color-neutral-background-disabled);
-    --color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* SIZE VARIANTS */
-.ui-counter {
-  &.small {
-    --height: 1.5rem;
-    --padding: 0 0.4rem;
-  }
-
-  &.medium {
-    --height: 2.4rem;
-    --padding: 0 0.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-transform: lowercase;
-  color: var(--color);
-  height: var(--height);
-  min-width: var(--height);
-  padding: var(--padding);
-  background-color: var(--background-color);
-  border-radius: calc(var(--height) / 2);
-
-  .inner {
-    line-height: 0;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/counter/Counter.vue b/@xen-orchestra/web-core/lib/components/counter/Counter.vue
new file mode 100644
index 00000000000..f864515d74b
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/counter/Counter.vue
@@ -0,0 +1,129 @@
+<!-- v2 -->
+<template>
+  <span :class="classNames" class="ui-counter typo">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import type { CounterColor } from '@core/types/color.type'
+import type { CounterSize } from '@core/types/size.type'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  value: number | string
+  color: CounterColor
+  appearance: 'accent' | 'neutral'
+  size: CounterSize
+}>()
+
+const fontClasses = {
+  small: 'p4-semi-bold',
+  medium: 'p1-medium',
+}
+
+const classNames = computed(() => {
+  return [props.color, props.size, fontClasses[props.size], props.appearance]
+})
+</script>
+
+<style lang="postcss" scoped>
+/* APPEARANCE + COLOR VARIANTS */
+.ui-counter {
+  &.accent {
+    &.primary {
+      --background-color: var(--color-normal-item-base);
+      --color: var(--color-normal-txt-item);
+    }
+
+    &.secondary {
+      --background-color: var(--color-neutral-txt-primary);
+      --color: var(--color-neutral-background-primary);
+    }
+
+    &.success {
+      --background-color: var(--color-success-item-base);
+      --color: var(--color-success-txt-item);
+    }
+
+    &.warning {
+      --background-color: var(--color-warning-item-base);
+      --color: var(--color-warning-txt-item);
+    }
+
+    &.danger {
+      --background-color: var(--color-danger-item-base);
+      --color: var(--color-danger-txt-item);
+    }
+
+    &.disabled {
+      --background-color: var(--color-neutral-background-disabled);
+      --color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  &.neutral {
+    &.primary {
+      --background-color: var(--color-normal-background-selected);
+      --color: var(--color-normal-txt-base);
+    }
+
+    &.secondary {
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-secondary);
+    }
+
+    &.success {
+      --background-color: var(--color-success-background-selected);
+      --color: var(--color-success-txt-base);
+    }
+
+    &.warning {
+      --background-color: var(--color-warning-background-selected);
+      --color: var(--color-warning-txt-base);
+    }
+
+    &.danger {
+      --background-color: var(--color-danger-background-selected);
+      --color: var(--color-danger-txt-base);
+    }
+
+    &.disabled {
+      --background-color: var(--color-neutral-background-secondary);
+      --color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+
+/* SIZE VARIANTS */
+.ui-counter {
+  &.small {
+    --height: 1.5rem;
+    --padding: 0 0.4rem;
+  }
+
+  &.medium {
+    --height: 2.4rem;
+    --padding: 0 0.6rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+  color: var(--color);
+  height: var(--height);
+  min-width: var(--height);
+  padding: var(--padding);
+  background-color: var(--background-color);
+  border-radius: calc(var(--height) / 2);
+
+  .inner {
+    line-height: 0;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
index 64471bdad6a..c34f9a00583 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
@@ -2,15 +2,33 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" color="primary" />
+      <Counter
+        v-if="pendingCount !== undefined"
+        :value="pendingCount"
+        color="primary"
+        appearance="accent"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
-      <UiCounter v-if="successCount !== undefined" :value="successCount" color="success" />
+      <Counter
+        v-if="successCount !== undefined"
+        :value="successCount"
+        color="success"
+        appearance="accent"
+        size="small"
+      />
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
-      <UiCounter v-if="failureCount !== undefined" :value="failureCount" color="danger" />
+      <Counter
+        v-if="failureCount !== undefined"
+        :value="failureCount"
+        color="danger"
+        appearance="accent"
+        size="small"
+      />
     </TabItem>
     <Divider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
@@ -26,10 +44,10 @@
 </template>
 
 <script lang="ts" setup>
+import Counter from '@core/components/counter/Counter.vue'
 import Divider from '@core/components/divider/Divider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
 import type { TaskTab } from '@core/types/task.type'
 
diff --git a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
index 7a265c12326..f40ae813bf8 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
@@ -2,7 +2,7 @@
   <UiCard>
     <CardTitle>
       {{ $t('backup-issues') }}
-      <UiCounter :value="backupIssues.length" color="danger" size="medium" />
+      <Counter :value="backupIssues.length" color="danger" size="medium" appearance="accent" />
       <template #description>{{ $t('in-last-three-jobs') }}</template>
     </CardTitle>
     <LoadingHero :disabled="isReady" type="card">
@@ -19,10 +19,10 @@ import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
 import { convertBackupIssueToCore } from '@/utils/convert-backup-issue-to-core.util'
 import BackupItem from '@core/components/backup-item/BackupItem.vue'
 import CardTitle from '@core/components/card/CardTitle.vue'
+import Counter from '@core/components/counter/Counter.vue'
 import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
 import NoDataHero from '@core/components/state-hero/NoDataHero.vue'
 import UiCard from '@core/components/UiCard.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { computed } from 'vue'
 
 const { backupIssues, isReady } = useDashboardStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
index 405ea366823..207bc299522 100644
--- a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
@@ -11,7 +11,13 @@
       </template>
       <template #addons>
         <UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" color="warning" />
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
+        <Counter
+          v-tooltip="$t('running-vm', runningVmsCount)"
+          :value="runningVmsCount"
+          color="primary"
+          appearance="neutral"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
@@ -28,12 +34,12 @@ import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { HostBranch } from '@/types/tree.type'
 import type { HostState } from '@core/types/object-icon.type'
+import Counter from '@core/components/counter/Counter.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faServer, faStar } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
index b7e92c99f94..5d284c7de46 100644
--- a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
@@ -3,7 +3,13 @@
     <TreeItemLabel :icon="faCity" :route="`/pool/${branch.data.id}`" @toggle="branch.toggleExpand()">
       {{ branch.data.name_label }}
       <template #addons>
-        <UiCounter v-tooltip="$t('running-vm', runningVmsCount)" :value="runningVmsCount" color="primary" />
+        <Counter
+          v-tooltip="$t('running-vm', runningVmsCount)"
+          :value="runningVmsCount"
+          color="primary"
+          appearance="neutral"
+          size="small"
+        />
       </template>
     </TreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
@@ -20,10 +26,10 @@ import HostTreeList from '@/components/tree/HostTreeList.vue'
 import VmTreeList from '@/components/tree/VmTreeList.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { HostBranch, PoolBranch, VmLeaf } from '@/types/tree.type'
+import Counter from '@core/components/counter/Counter.vue'
 import TreeItem from '@core/components/tree/TreeItem.vue'
 import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
 import TreeList from '@core/components/tree/TreeList.vue'
-import UiCounter from '@core/components/UiCounter.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'