diff --git a/@vates/nbd-client/multi.mjs b/@vates/nbd-client/multi.mjs
index 5bea8e50f95..fb0f76e85e9 100644
--- a/@vates/nbd-client/multi.mjs
+++ b/@vates/nbd-client/multi.mjs
@@ -34,9 +34,8 @@ export default class MultiNbdClient {
   async connect() {
     const candidates = [...this.#settings]
 
-    const promises = []
     const baseOptions = this.#options
-    const  _connect = async () => {
+    const _connect = async () => {
       if (candidates.length === 0) {
         return
       }
@@ -63,11 +62,11 @@ export default class MultiNbdClient {
         return _connect()
       }
     }
+    // don't connect in parallel since this can lead to race condition
+    // on distributed systems ( like the NBD server of the XAPI)
     for (let i = 0; i < this.#nbdConcurrency; i++) {
-      promises.push(_connect())
+      await _connect()
     }
-    await Promise.all(promises)
-
     if (this.#clients.length === 0) {
       throw new Error(`Fail to connect to any Nbd client`)
     }
diff --git a/@vates/nbd-client/package.json b/@vates/nbd-client/package.json
index 89b31c243ca..e0d747b0b86 100644
--- a/@vates/nbd-client/package.json
+++ b/@vates/nbd-client/package.json
@@ -13,7 +13,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "engines": {
     "node": ">=14.0"
   },
diff --git a/@xen-orchestra/backups/docs/VM backups/README.md b/@xen-orchestra/backups/docs/VM backups/README.md
index 51150dc6633..bd81f8b13ee 100644
--- a/@xen-orchestra/backups/docs/VM backups/README.md	
+++ b/@xen-orchestra/backups/docs/VM backups/README.md	
@@ -65,7 +65,7 @@ In case any incoherence is detected, the file is deleted so it will be fully gen
   - `xo:backup:deltaChainLength` = n (number of delta copies/replicated since a full)
   - `xo:backup:exported` = 'true' (added at the end of the backup)
 
-### Of created VMs , their associated VDIs and snapshots 
+### Of created VMs , their associated VDIs and snapshots
 
 - `other_config`:
   - `xo:backup:datetime`: format is UTC %Y%m%dT%H:%M:%SZ
diff --git a/@xen-orchestra/backups/package.json b/@xen-orchestra/backups/package.json
index fa2f6129ef5..22de23fb562 100644
--- a/@xen-orchestra/backups/package.json
+++ b/@xen-orchestra/backups/package.json
@@ -25,7 +25,7 @@
     "@vates/decorate-with": "^2.1.0",
     "@vates/disposable": "^0.1.6",
     "@vates/fuse-vhd": "^2.1.2",
-    "@vates/nbd-client": "^3.1.1",
+    "@vates/nbd-client": "^3.1.2",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
     "@xen-orchestra/fs": "^4.2.1",
diff --git a/@xen-orchestra/defined/README.md b/@xen-orchestra/defined/README.md
index 942553f41aa..0a533fb49f6 100644
--- a/@xen-orchestra/defined/README.md
+++ b/@xen-orchestra/defined/README.md
@@ -21,6 +21,7 @@ npm install --save @xen-orchestra/defined
 Returns the first non-`undefined` value from a list of arguments, evaluating functions if needed.
 
 There is two ways to use this function:
+
 - either with a single array argument: it should return the first non-undefined item
 - or with multiple arguments: it should return the first non-undefined argument
 
diff --git a/@xen-orchestra/fs/package.json b/@xen-orchestra/fs/package.json
index b54cb5d4962..9de7636dcbe 100644
--- a/@xen-orchestra/fs/package.json
+++ b/@xen-orchestra/fs/package.json
@@ -41,7 +41,7 @@
     "proper-lockfile": "^4.1.2",
     "readable-stream": "^4.1.0",
     "through2": "^4.0.2",
-    "xo-remote-parser": "^0.9.2"
+    "xo-remote-parser": "^0.9.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
diff --git a/@xen-orchestra/fs/src/local.js b/@xen-orchestra/fs/src/local.js
index 0caefbe1124..d9a76d3ae2d 100644
--- a/@xen-orchestra/fs/src/local.js
+++ b/@xen-orchestra/fs/src/local.js
@@ -58,7 +58,7 @@ export default class LocalHandler extends RemoteHandlerAbstract {
   constructor(remote, opts = {}) {
     super(remote)
 
-    this.#addSyncStackTrace = opts.syncStackTraces ?? true ? addSyncStackTrace : dontAddSyncStackTrace
+    this.#addSyncStackTrace = (opts.syncStackTraces ?? true) ? addSyncStackTrace : dontAddSyncStackTrace
     this.#retriesOnEagain = {
       delay: 1e3,
       retries: 9,
diff --git a/@xen-orchestra/lite/package.json b/@xen-orchestra/lite/package.json
index 4a461f81aa2..a3e9b519573 100644
--- a/@xen-orchestra/lite/package.json
+++ b/@xen-orchestra/lite/package.json
@@ -26,7 +26,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.19.7",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/math": "^10.7.1",
@@ -38,7 +38,7 @@
     "echarts": "^5.4.3",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.9.0",
-    "human-format": "^1.2.0",
+    "human-format": "^1.2.1",
     "iterable-backoff": "^0.1.0",
     "json-rpc-2.0": "^1.7.0",
     "json5": "^2.2.3",
@@ -48,19 +48,19 @@
     "marked": "^9.1.5",
     "minimist": "^1.2.8",
     "npm-run-all": "^4.1.5",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.6",
     "placement.js": "^1.0.0-beta.5",
     "postcss": "^8.4.33",
     "postcss-color-function": "^4.1.0",
     "postcss-custom-media": "^10.0.2",
     "postcss-nested": "^6.0.1",
-    "typescript": "~5.3.3",
-    "vite": "^5.0.11",
-    "vue": "~3.4.13",
+    "typescript": "~5.6.3",
+    "vite": "^5.4.10",
+    "vue": "~3.5.12",
     "vue-echarts": "^6.6.8",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.4.0",
-    "vue-tsc": "^1.8.27",
+    "vue-tsc": "^2.1.10",
     "zx": "^7.2.3"
   },
   "private": true,
diff --git a/@xen-orchestra/lite/src/App.vue b/@xen-orchestra/lite/src/App.vue
index 425d2fccc5f..b76eb0e0930 100644
--- a/@xen-orchestra/lite/src/App.vue
+++ b/@xen-orchestra/lite/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!$route.meta.hasStoryNav && !xenApiStore.isConnected">
+  <div v-if="!route.meta.hasStoryNav && !xenApiStore.isConnected">
     <AppLogin />
   </div>
   <div v-else>
@@ -10,7 +10,7 @@
         <RouterView />
       </main>
     </div>
-    <TooltipList />
+    <VtsTooltipList />
   </div>
   <ModalList />
 </template>
@@ -24,12 +24,15 @@ import { useChartTheme } from '@/composables/chart-theme.composable'
 import { useUnreachableHosts } from '@/composables/unreachable-hosts.composable'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { useXenApiStore } from '@/stores/xen-api.store'
-import TooltipList from '@core/components/tooltip/TooltipList.vue'
+import VtsTooltipList from '@core/components/tooltip-list/VtsTooltipList.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 const xenApiStore = useXenApiStore()
 
diff --git a/@xen-orchestra/lite/src/components/AppLogin.vue b/@xen-orchestra/lite/src/components/AppLogin.vue
index 6e9e161fffa..736d365f0b8 100644
--- a/@xen-orchestra/lite/src/components/AppLogin.vue
+++ b/@xen-orchestra/lite/src/components/AppLogin.vue
@@ -27,7 +27,7 @@
           <FormCheckbox v-model="rememberMe" />
           {{ $t('keep-me-logged') }}
         </label>
-        <UiButton size="medium" color="info" level="primary" type="submit" :busy="isConnecting">
+        <UiButton size="medium" accent="info" variant="primary" type="submit" :busy="isConnecting">
           {{ $t('login') }}
         </UiButton>
       </template>
@@ -45,7 +45,7 @@ import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import type { XenApiError } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useXenApiStore } from '@/stores/xen-api.store'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 import { useLocalStorage, whenever } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
diff --git a/@xen-orchestra/lite/src/components/AppNavigation.vue b/@xen-orchestra/lite/src/components/AppNavigation.vue
index 1140a3df754..5f5dae460fd 100644
--- a/@xen-orchestra/lite/src/components/AppNavigation.vue
+++ b/@xen-orchestra/lite/src/components/AppNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <Transition name="slide">
     <nav v-if="isDesktop || isOpen" ref="navElement" :class="{ collapsible: isMobile }" class="app-navigation">
-      <StoryMenu v-if="$route.meta.hasStoryNav" />
+      <StoryMenu v-if="route.meta.hasStoryNav" />
       <InfraPoolList v-else />
     </nav>
   </Transition>
@@ -15,6 +15,9 @@ import { useUiStore } from '@core/stores/ui.store'
 import { onClickOutside, whenever } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 const uiStore = useUiStore()
 const { isMobile, isDesktop } = storeToRefs(uiStore)
@@ -58,6 +61,7 @@ whenever(isOpen, () => {
 .slide-leave-active {
   transition: transform 0.3s ease;
 }
+
 .slide-enter-from,
 .slide-leave-to {
   transform: translateX(-37rem);
diff --git a/@xen-orchestra/lite/src/components/FormWidget.vue b/@xen-orchestra/lite/src/components/FormWidget.vue
index 71f35a31da3..aef41daacb0 100644
--- a/@xen-orchestra/lite/src/components/FormWidget.vue
+++ b/@xen-orchestra/lite/src/components/FormWidget.vue
@@ -1,12 +1,12 @@
 <template>
   <label class="form-widget">
-    <span v-if="label || $slots.label" class="label">
+    <span v-if="label || slots.label" class="label">
       <slot name="label">
         {{ label }}
       </slot>
     </span>
     <span class="widget">
-      <span v-if="before || $slots.before" class="before">
+      <span v-if="before || slots.before" class="before">
         <slot name="before">
           <UiIcon v-if="isIcon(before)" :icon="before" fixed-width />
           <template v-else>{{ before }}</template>
@@ -15,7 +15,7 @@
       <span class="element">
         <slot />
       </span>
-      <span v-if="after || $slots.after" class="after">
+      <span v-if="after || slots.after" class="after">
         <slot name="after">
           <UiIcon v-if="isIcon(after)" :icon="after" fixed-width />
           <template v-else>{{ after }}</template>
@@ -36,6 +36,13 @@ defineProps<{
   inline?: boolean
 }>()
 
+const slots = defineSlots<{
+  default(): any
+  label?(): any
+  before?(): any
+  after?(): any
+}>()
+
 const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon === 'object'
 </script>
 
diff --git a/@xen-orchestra/lite/src/components/HostPatchesTable.vue b/@xen-orchestra/lite/src/components/HostPatchesTable.vue
index 4fa69f74f97..d3f50ed1fc2 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" />
-        <VtsCounter
+        <UiCounter
           v-else
           v-tooltip="{
             placement: 'left',
@@ -33,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 VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.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/XoaButton.vue b/@xen-orchestra/lite/src/components/XoaButton.vue
index 115de4d5845..8b16bd80f0f 100644
--- a/@xen-orchestra/lite/src/components/XoaButton.vue
+++ b/@xen-orchestra/lite/src/components/XoaButton.vue
@@ -2,8 +2,8 @@
   <UiButton
     v-if="xoaFound"
     size="medium"
-    color="info"
-    level="primary"
+    accent="info"
+    variant="primary"
     :left-icon="faArrowUpRightFromSquare"
     class="xoa-button"
     @click="openXoa()"
@@ -13,8 +13,8 @@
   <UiButton
     v-else
     size="medium"
-    color="info"
-    level="primary"
+    accent="info"
+    variant="primary"
     :left-icon="faDownload"
     class="xoa-button"
     @click="openXoaDeploy()"
@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import type { PRIMARY_ADDRESS_TYPE } from '@/libs/xen-api/xen-api.enums'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faDownload, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
index d512ca4473c..68fb4f1a63b 100644
--- a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
+++ b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -3,7 +3,7 @@
     <TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
     <TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
       Events
-      <VtsCounter
+      <UiCounter
         v-if="unreadEventsCount > 0"
         :value="unreadEventsCount"
         accent="success"
@@ -41,7 +41,13 @@
         <UiCardTitle>
           Logs
           <template #right>
-            <UiButton v-if="eventsLog.length > 0" size="medium" color="info" level="tertiary" @click="eventsLog = []">
+            <UiButton
+              v-if="eventsLog.length > 0"
+              size="medium"
+              accent="info"
+              variant="tertiary"
+              @click="eventsLog = []"
+            >
               Clear
             </UiButton>
           </template>
@@ -85,12 +91,12 @@ import {
   ModelParam,
   type Param,
 } from '@/libs/story/story-param'
-import UiButton from '@core/components/button/UiButton.vue'
-import VtsCounter from '@core/components/counter/VtsCounter.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 UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCounter from '@core/components/ui/counter/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/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
index 9b69f93710b..313c2a1739a 100644
--- a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
+++ b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
@@ -6,7 +6,7 @@
       :disabled="isDisabled"
       :type="type === 'radio' ? 'radio' : 'checkbox'"
       class="input"
-      v-bind="$attrs"
+      v-bind="attrs"
     />
     <span class="fake-checkbox">
       <UiIcon :fixed-width="false" :icon class="icon" />
@@ -21,7 +21,7 @@ import { DisabledContext } from '@/context'
 import { IK_CHECKBOX_TYPE, IK_FORM_HAS_LABEL } from '@/types/injection-keys'
 import { faCheck, faCircle, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { useVModel } from '@vueuse/core'
-import { computed, type HTMLAttributes, inject } from 'vue'
+import { computed, type HTMLAttributes, inject, useAttrs } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -38,6 +38,8 @@ const emit = defineEmits<{
   'update:modelValue': [value: boolean]
 }>()
 
+const attrs = useAttrs()
+
 const value = useVModel(props, 'modelValue', emit)
 const type = inject(IK_CHECKBOX_TYPE, 'checkbox')
 const hasLabel = inject(
diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue
index 6b34b611487..0e62dc72b44 100644
--- a/@xen-orchestra/lite/src/components/form/FormInput.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInput.vue
@@ -9,7 +9,7 @@
         :disabled="isDisabled"
         :required
         class="select"
-        v-bind="$attrs"
+        v-bind="attrs"
       >
         <slot />
       </select>
@@ -26,7 +26,7 @@
       :disabled="isDisabled"
       :required
       class="textarea"
-      v-bind="$attrs"
+      v-bind="attrs"
     />
     <input
       v-else
@@ -37,7 +37,7 @@
       :disabled="isDisabled"
       :required
       class="input"
-      v-bind="$attrs"
+      v-bind="attrs"
     />
     <span v-if="before !== undefined" class="before">
       <template v-if="typeof before === 'string'">{{ before }}</template>
@@ -59,7 +59,7 @@ import { IK_INPUT_ID, IK_INPUT_TYPE } from '@/types/injection-keys'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { useTextareaAutosize, useVModel } from '@vueuse/core'
-import { computed, type HTMLAttributes, inject, nextTick, ref, watch } from 'vue'
+import { computed, type HTMLAttributes, inject, nextTick, ref, useAttrs, watch } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -84,6 +84,8 @@ const emit = defineEmits<{
   'update:modelValue': [value: any]
 }>()
 
+const attrs = useAttrs()
+
 const { name: contextColor } = useContext(ColorContext, () => props.color)
 
 const inputElement = ref()
diff --git a/@xen-orchestra/lite/src/components/infra/InfraAction.vue b/@xen-orchestra/lite/src/components/infra/InfraAction.vue
deleted file mode 100644
index 92009efffd0..00000000000
--- a/@xen-orchestra/lite/src/components/infra/InfraAction.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="infra-action">
-    <slot>
-      <UiIcon :icon fixed-width />
-    </slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  icon?: IconDefinition
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.infra-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  width: 3rem;
-  height: 3rem;
-}
-</style>
diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index 6828f455bc2..d494b1bd01d 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -1,10 +1,14 @@
 <template>
-  <TreeItem v-if="host !== undefined" :expanded="isExpanded" class="infra-host-item">
-    <TreeItemLabel :icon="faServer" :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }" @toggle="toggle()">
+  <VtsTreeItem v-if="host !== undefined" :expanded="isExpanded" class="infra-host-item">
+    <UiTreeItemLabel
+      :icon="faServer"
+      :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }"
+      @toggle="toggle()"
+    >
       {{ host.name_label || '(Host)' }}
       <template #addons>
-        <VtsIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
-        <VtsCounter
+        <UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
+        <UiCounter
           v-if="isReady"
           v-tooltip="$t('running-vm', { count: vmCount })"
           :value="vmCount"
@@ -13,13 +17,13 @@
           size="small"
         />
       </template>
-    </TreeItemLabel>
+    </UiTreeItemLabel>
     <template #sublist>
-      <TreeList>
+      <VtsTreeList>
         <InfraVmItems :host-opaque-ref="hostOpaqueRef" />
-      </TreeList>
+      </VtsTreeList>
     </template>
-  </TreeItem>
+  </VtsTreeItem>
 </template>
 
 <script lang="ts" setup>
@@ -28,11 +32,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 VtsCounter from '@core/components/counter/VtsCounter.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.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 UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.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/infra/InfraHostItems.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItems.vue
index a722fad9108..3a1c865ccee 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItems.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItems.vue
@@ -1,16 +1,16 @@
 <template>
-  <TreeItemError v-if="hasError">
+  <VtsTreeItemError v-if="hasError">
     {{ $t('error-no-data') }}
-  </TreeItemError>
-  <TreeLoadingItem v-else-if="!isReady" :icon="faServer">{{ $t('loading-hosts') }}</TreeLoadingItem>
+  </VtsTreeItemError>
+  <VtsTreeLoadingItem v-else-if="!isReady" :icon="faServer">{{ $t('loading-hosts') }}</VtsTreeLoadingItem>
   <InfraHostItem v-for="host in hosts" :key="host.$ref" :host-opaque-ref="host.$ref" />
 </template>
 
 <script lang="ts" setup>
 import InfraHostItem from '@/components/infra/InfraHostItem.vue'
 import { useHostStore } from '@/stores/xen-api/host.store'
-import TreeItemError from '@core/components/tree/TreeItemError.vue'
-import TreeLoadingItem from '@core/components/tree/TreeLoadingItem.vue'
+import VtsTreeItemError from '@core/components/tree/VtsTreeItemError.vue'
+import VtsTreeLoadingItem from '@core/components/tree/VtsTreeLoadingItem.vue'
 import { faServer } from '@fortawesome/free-solid-svg-icons'
 
 const { records: hosts, isReady, hasError } = useHostStore().subscribe()
diff --git a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue
deleted file mode 100644
index 7aec0c7172b..00000000000
--- a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <RouterLink v-slot="{ isExactActive, href, navigate }" :to="route" custom>
-    <div
-      :class="isExactActive ? 'exact-active' : $props.active ? 'active' : undefined"
-      class="infra-item-label"
-      v-bind="$attrs"
-    >
-      <a v-tooltip="{ selector: '.text-ellipsis' }" :href class="link" @click="navigate">
-        <UiIcon :icon class="icon" />
-        <div class="text-ellipsis typo h6-medium">
-          <slot />
-        </div>
-      </a>
-      <div class="actions">
-        <slot name="actions" />
-      </div>
-    </div>
-  </RouterLink>
-</template>
-
-<script lang="ts" setup>
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import type { RouteLocationRaw } from 'vue-router'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<{
-  icon: IconDefinition
-  route: RouteLocationRaw
-  active?: boolean
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.infra-item-label {
-  display: flex;
-  align-items: stretch;
-  color: var(--color-neutral-txt-primary);
-  border-radius: 0.8rem;
-  background-color: var(--color-neutral-background-primary);
-
-  &:hover {
-    color: var(--color-neutral-txt-primary);
-    background-color: var(--color-neutral-background-secondary);
-  }
-
-  &:active,
-  &.active {
-    color: var(--color-info-txt-base);
-    background-color: var(--color-neutral-background-primary);
-  }
-
-  &.exact-active {
-    color: var(--color-neutral-txt-primary);
-    background-color: var(--color-info-background-selected);
-
-    .icon {
-      color: var(--color-info-txt-base);
-    }
-  }
-}
-
-.link {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  padding: 1rem;
-  text-decoration: none;
-  color: inherit;
-  gap: 1rem;
-  font-weight: 500;
-  font-size: 2rem;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue b/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue
deleted file mode 100644
index cb946e6e68e..00000000000
--- a/@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <li class="infra-loading-item">
-    <div class="infra-item-label-placeholder">
-      <div class="link-placeholder">
-        <UiIcon :icon class="icon" />
-        <div class="loader">&nbsp;</div>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  icon: IconDefinition
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.infra-item-label-placeholder {
-  display: flex;
-  height: 6rem;
-  margin-bottom: 0.2rem;
-  background-color: var(--color-neutral-background-primary);
-}
-
-.icon {
-  color: var(--color-neutral-txt-primary);
-}
-
-.link-placeholder {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: 0 1.5rem;
-  gap: 1rem;
-}
-
-.loader {
-  flex: 1;
-  animation: pulse alternate 1s infinite;
-  background-color: var(--color-info-background-selected);
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.5;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
index b36f94fe9be..988a4a0d510 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
@@ -1,37 +1,37 @@
 <template>
-  <TreeList class="infra-pool-list">
-    <TreeItem :expanded="isExpanded">
-      <TreeItemError v-if="hasError">
+  <VtsTreeList class="infra-pool-list">
+    <VtsTreeItem :expanded="isExpanded">
+      <VtsTreeItemError v-if="hasError">
         {{ $t('error-no-data') }}
-      </TreeItemError>
-      <TreeLoadingItem v-else-if="!isReady || pool === undefined" :icon="faCity" />
-      <TreeItemLabel
+      </VtsTreeItemError>
+      <VtsTreeLoadingItem v-else-if="!isReady || pool === undefined" :icon="faCity" />
+      <UiTreeItemLabel
         v-else
         :icon="faCity"
         :route="{ name: 'pool.dashboard', params: { uuid: pool.uuid } }"
         @toggle="toggle()"
       >
         {{ pool.name_label || '(Pool)' }}
-      </TreeItemLabel>
+      </UiTreeItemLabel>
       <template #sublist>
-        <TreeList>
+        <VtsTreeList>
           <InfraHostItems />
           <InfraVmItems />
-        </TreeList>
+        </VtsTreeList>
       </template>
-    </TreeItem>
-  </TreeList>
+    </VtsTreeItem>
+  </VtsTreeList>
 </template>
 
 <script lang="ts" setup>
 import InfraHostItems from '@/components/infra/InfraHostItems.vue'
 import InfraVmItems from '@/components/infra/InfraVmItems.vue'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
-import TreeItem from '@core/components/tree/TreeItem.vue'
-import TreeItemError from '@core/components/tree/TreeItemError.vue'
-import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
-import TreeList from '@core/components/tree/TreeList.vue'
-import TreeLoadingItem from '@core/components/tree/TreeLoadingItem.vue'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeItemError from '@core/components/tree/VtsTreeItemError.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import VtsTreeLoadingItem from '@core/components/tree/VtsTreeLoadingItem.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/shared'
 
diff --git a/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue b/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue
index 2179b2a0f38..7db0d0bbafd 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraVmItem.vue
@@ -1,21 +1,21 @@
 <template>
-  <TreeItem v-if="vm !== undefined" ref="rootElement" expanded class="infra-vm-item">
-    <TreeItemLabel v-if="isVisible" :route="{ name: 'vm.console', params: { uuid: vm.uuid } }" no-indent>
+  <VtsTreeItem v-if="vm !== undefined" ref="rootElement" expanded class="infra-vm-item">
+    <UiTreeItemLabel v-if="isVisible" :route="{ name: 'vm.console', params: { uuid: vm.uuid } }" no-indent>
       {{ vm.name_label || '(VM)' }}
       <template #icon>
-        <ObjectIcon :state="vmPowerState!" type="vm" />
+        <UiObjectIcon size="medium" :state="vmPowerState!" type="vm" />
       </template>
-    </TreeItemLabel>
-  </TreeItem>
+    </UiTreeItemLabel>
+  </VtsTreeItem>
 </template>
 
 <script lang="ts" setup>
 import type { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-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 VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { useIntersectionObserver } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
diff --git a/@xen-orchestra/lite/src/components/infra/InfraVmItems.vue b/@xen-orchestra/lite/src/components/infra/InfraVmItems.vue
index c98ccb521ac..5d95a31e010 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraVmItems.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraVmItems.vue
@@ -1,7 +1,7 @@
 <template>
-  <TreeItemError v-if="hasError">{{ $t('error-no-data') }}</TreeItemError>
+  <VtsTreeItemError v-if="hasError">{{ $t('error-no-data') }}</VtsTreeItemError>
   <template v-else-if="!isReady">
-    <TreeLoadingItem v-for="i in 3" :key="i" :icon="faDisplay" />
+    <VtsTreeLoadingItem v-for="i in 3" :key="i" :icon="faDisplay" />
   </template>
   <InfraVmItem v-for="vm in vms" :key="vm.$ref" :vm-opaque-ref="vm.$ref" />
 </template>
@@ -10,8 +10,8 @@
 import InfraVmItem from '@/components/infra/InfraVmItem.vue'
 import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import TreeItemError from '@core/components/tree/TreeItemError.vue'
-import TreeLoadingItem from '@core/components/tree/TreeLoadingItem.vue'
+import VtsTreeItemError from '@core/components/tree/VtsTreeItemError.vue'
+import VtsTreeLoadingItem from '@core/components/tree/VtsTreeLoadingItem.vue'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
diff --git a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
index 86c39982b97..7017dda356a 100644
--- a/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
+++ b/@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue
@@ -23,7 +23,7 @@
       </template>
 
       <template #buttons>
-        <UiButton size="medium" color="info" level="tertiary" @click="addNewFilter()">
+        <UiButton size="medium" accent="info" variant="tertiary" @click="addNewFilter()">
           {{ $t('add-or') }}
         </UiButton>
         <ModalDeclineButton />
@@ -45,7 +45,7 @@ import UiBadge from '@/components/ui/UiBadge.vue'
 import { getFilterIcon } from '@/libs/utils'
 import type { Filters, NewFilter } from '@/types/filter'
 import { IK_MODAL } from '@/types/injection-keys'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { Or, parse } from 'complex-matcher'
 import { computed, inject, onMounted, ref } from 'vue'
 
diff --git a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
index dc979924598..0c8e107d1fb 100644
--- a/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
+++ b/@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue
@@ -6,7 +6,7 @@
       </template>
 
       <template #buttons>
-        <UiButton size="medium" color="info" level="tertiary" @click="formatJson()">
+        <UiButton size="medium" accent="info" variant="tertiary" @click="formatJson()">
           {{ $t('reformat') }}
         </UiButton>
         <ModalDeclineButton />
@@ -25,7 +25,7 @@ import ModalApproveButton from '@/components/ui/modals/ModalApproveButton.vue'
 import ModalDeclineButton from '@/components/ui/modals/ModalDeclineButton.vue'
 import UiModal from '@/components/ui/modals/UiModal.vue'
 import { IK_MODAL } from '@/types/injection-keys'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faCode } from '@fortawesome/free-solid-svg-icons'
 import { computed, inject, ref } from 'vue'
 
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue b/@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue
index 9083f8b6d75..6e79698e3f2 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>
-        <VtsCounter :value="alarms.length" accent="danger" variant="primary" size="small" />
+        <UiCounter :value="alarms.length" accent="danger" variant="primary" size="small" />
       </template>
     </UiCardTitle>
     <div v-if="!isStarted" class="pre-start">
@@ -11,7 +11,7 @@
         <p class="text typo h4-medium">
           {{ $t('click-to-display-alarms') }}
         </p>
-        <UiButton size="medium" color="info" level="primary" @click="start">{{ $t('load-now') }}</UiButton>
+        <UiButton size="medium" accent="info" variant="primary" @click="start">{{ $t('load-now') }}</UiButton>
       </div>
       <div>
         <img alt="" src="@/assets/server-status.svg" />
@@ -45,8 +45,8 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 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 VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.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 4d8e34a83b8..9e69e406b3e 100644
--- a/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiCardTitle.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="ui-section-title" :class="tags.left">
-    <component :is="tags.left" v-if="$slots.default || left" class="left">
+    <component :is="tags.left" v-if="slots.default || left" class="left">
       <slot>{{ left }}</slot>
-      <VtsCounter v-if="count > 0" class="count" :value="count" accent="info" variant="primary" size="small" />
+      <UiCounter v-if="count > 0" class="count" :value="count" accent="info" variant="primary" size="small" />
     </component>
-    <component :is="tags.right" v-if="$slots.right || right" class="right">
+    <component :is="tags.right" v-if="slots.right || right" class="right">
       <slot name="right">{{ right }}</slot>
     </component>
   </div>
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { UiCardTitleLevel } from '@/types/enums'
-import VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -25,6 +25,11 @@ const props = withDefaults(
   { count: 0, level: UiCardTitleLevel.Title }
 )
 
+const slots = defineSlots<{
+  default?(): any
+  right?(): any
+}>()
+
 const tags = computed(() => {
   switch (props.level) {
     case UiCardTitleLevel.Subtitle:
diff --git a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue
index a5277a03772..ac97e1b4159 100644
--- a/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiKeyValueRow.vue
@@ -1,14 +1,21 @@
 <template>
   <tr class="ui-key-value-row">
-    <th v-if="$slots.key" class="key typo p1-regular">
+    <th v-if="slots.key" class="key typo p1-regular">
       <slot name="key" />
     </th>
-    <td :colspan="$slots.key ? 1 : 2" class="value typo p1-regular">
+    <td :colspan="slots.key ? 1 : 2" class="value typo p1-regular">
       <slot name="value" />
     </td>
   </tr>
 </template>
 
+<script lang="ts" setup>
+const slots = defineSlots<{
+  value(): any
+  key?(): any
+}>()
+</script>
+
 <style lang="postcss" scoped>
 .key,
 .value {
diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
index a561a81503a..526184a9319 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue
@@ -1,12 +1,12 @@
 <template>
-  <UiButton size="medium" color="info" level="primary" :busy="modal.isBusy" type="submit">
+  <UiButton size="medium" accent="info" variant="primary" :busy="modal.isBusy" type="submit">
     <slot />
   </UiButton>
 </template>
 
 <script lang="ts" setup>
 import { IK_MODAL } from '@/types/injection-keys'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { inject } from 'vue'
 
 const modal = inject(IK_MODAL)!
diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalContainer.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalContainer.vue
index b569883db1f..ac3a31a4cc2 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/ModalContainer.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/ModalContainer.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="[backgroundClass, { nested: isNested }]" class="modal-container typo p1-regular">
-    <header v-if="$slots.header" class="modal-header">
+    <header v-if="slots.header" class="modal-header">
       <slot name="header" />
     </header>
-    <main v-if="$slots.default" class="modal-content">
+    <main v-if="slots.default" class="modal-content">
       <slot name="default" />
     </main>
-    <footer v-if="$slots.footer" class="modal-footer">
+    <footer v-if="slots.footer" class="modal-footer">
       <slot name="footer" />
     </footer>
   </div>
@@ -23,10 +23,10 @@ const props = defineProps<{
   color?: Color
 }>()
 
-defineSlots<{
-  header: () => any
-  default: () => any
-  footer: () => any
+const slots = defineSlots<{
+  header?(): any
+  default?(): any
+  footer?(): any
 }>()
 
 const { backgroundClass } = useContext(ColorContext, () => props.color)
diff --git a/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue b/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
index 527a69982c5..c7622e91e16 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue
@@ -1,12 +1,12 @@
 <template>
-  <UiButton size="medium" color="info" level="secondary" :busy="modal.isBusy" @click="modal.decline()">
+  <UiButton size="medium" accent="info" variant="secondary" :busy="modal.isBusy" @click="modal.decline()">
     <slot>{{ $t('cancel') }}</slot>
   </UiButton>
 </template>
 
 <script lang="ts" setup>
 import { IK_MODAL } from '@/types/injection-keys'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { inject } from 'vue'
 
 const modal = inject(IK_MODAL)!
diff --git a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
index bd89e157ced..67c4e0b6f23 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <form class="ui-modal typo p1-regular" v-bind="$attrs" @click.self="modal.decline()">
+    <form class="ui-modal typo p1-regular" v-bind="attrs" @click.self="modal.decline()">
       <slot />
     </form>
   </Teleport>
@@ -12,7 +12,7 @@ import { ColorContext, DisabledContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_MODAL } from '@/types/injection-keys'
 import { useMagicKeys, whenever } from '@vueuse/core'
-import { inject } from 'vue'
+import { inject, useAttrs } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -23,6 +23,8 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
+const attrs = useAttrs()
+
 const modal = inject(IK_MODAL)!
 
 useContext(ColorContext, () => props.color)
diff --git a/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue b/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue
index 85966b5eddb..dea109a83a7 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue
@@ -8,23 +8,23 @@
 
     <template #default>
       <UiIcon :class="textClass" :icon="icon" class="main-icon" />
-      <div v-if="$slots.title || $slots.subtitle" class="titles">
-        <UiTitle v-if="$slots.title" type="h4">
+      <div v-if="slots.title || slots.subtitle" class="titles">
+        <UiTitle v-if="slots.title" type="h4">
           <slot name="title" />
         </UiTitle>
-        <div v-if="$slots.subtitle" class="subtitle typo p1-regular">
+        <div v-if="slots.subtitle" class="subtitle typo p1-regular">
           <slot name="subtitle" />
         </div>
       </div>
-      <div v-if="$slots.default">
+      <div v-if="slots.default">
         <slot name="default" />
       </div>
     </template>
 
     <template #footer>
-      <ButtonGroup>
+      <VtsButtonGroup>
         <slot name="buttons" />
-      </ButtonGroup>
+      </VtsButtonGroup>
     </template>
   </ModalContainer>
 </template>
@@ -36,18 +36,18 @@ import ModalContainer from '@/components/ui/modals/ModalContainer.vue'
 import UiTitle from '@/components/ui/UiTitle.vue'
 import { useContext } from '@/composables/context.composable'
 import { ColorContext } from '@/context'
-import ButtonGroup from '@core/components/button/ButtonGroup.vue'
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
   icon?: IconDefinition
 }>()
 
-defineSlots<{
-  title: () => void
-  subtitle: () => void
-  default: () => void
-  buttons: () => void
+const slots = defineSlots<{
+  buttons(): any
+  default?(): any
+  title?(): any
+  subtitle?(): any
 }>()
 
 const { textClass } = useContext(ColorContext)
diff --git a/@xen-orchestra/lite/src/components/ui/modals/layouts/FormModalLayout.vue b/@xen-orchestra/lite/src/components/ui/modals/layouts/FormModalLayout.vue
index ad425d4c59f..e917f089b3d 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/layouts/FormModalLayout.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/layouts/FormModalLayout.vue
@@ -13,9 +13,9 @@
     </template>
 
     <template #footer>
-      <ButtonGroup class="footer-buttons">
+      <VtsButtonGroup class="footer-buttons">
         <slot name="buttons" />
-      </ButtonGroup>
+      </VtsButtonGroup>
     </template>
   </ModalContainer>
 </template>
@@ -26,7 +26,7 @@ import ModalCloseIcon from '@/components/ui/modals/ModalCloseIcon.vue'
 import ModalContainer from '@/components/ui/modals/ModalContainer.vue'
 import { useContext } from '@/composables/context.composable'
 import { ColorContext } from '@/context'
-import ButtonGroup from '@core/components/button/ButtonGroup.vue'
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
diff --git a/@xen-orchestra/lite/src/components/ui/progress/UiProgressLegend.vue b/@xen-orchestra/lite/src/components/ui/progress/UiProgressLegend.vue
index 00bab1439c1..a0f7b214dbd 100644
--- a/@xen-orchestra/lite/src/components/ui/progress/UiProgressLegend.vue
+++ b/@xen-orchestra/lite/src/components/ui/progress/UiProgressLegend.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="legend">
-    <template v-if="$slots.label || label">
+    <template v-if="slots.label || label">
       <span class="circle" />
       <div class="label-container">
         <div v-tooltip="{ vertical: true }" class="label">
@@ -22,6 +22,11 @@ defineProps<{
   label?: string
   value?: string
 }>()
+
+const slots = defineSlots<{
+  value(): any
+  label?(): any
+}>()
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/lite/src/components/vm/VmHeader.vue b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
index dcd52481e0a..58efff41833 100644
--- a/@xen-orchestra/lite/src/components/vm/VmHeader.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
@@ -6,8 +6,8 @@
         <template #trigger="{ open, isOpen }">
           <UiButton
             size="medium"
-            color="info"
-            level="primary"
+            accent="info"
+            variant="primary"
             :class="{ pressed: isOpen }"
             :left-icon="faPowerOff"
             @click="open"
@@ -20,13 +20,14 @@
       </MenuList>
       <MenuList v-if="vm !== undefined" placement="bottom-end" border>
         <template #trigger="{ open, isOpen }">
-          <ButtonIcon
+          <UiButtonIcon
             v-tooltip="{
               placement: 'left',
               content: $t('more-actions'),
             }"
-            :class="{ active: isOpen }"
+            :selected="isOpen"
             :icon="faEllipsisVertical"
+            accent="info"
             class="more-actions-button"
             size="large"
             @click="open"
@@ -51,9 +52,9 @@ import VmActionPowerStateItems from '@/components/vm/VmActionItems/VmActionPower
 import VmActionSnapshotItem from '@/components/vm/VmActionItems/VmActionSnapshotItem.vue'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiButton from '@core/components/button/UiButton.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faAngleDown, faDisplay, faEllipsisVertical, faPowerOff } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
index dcd4430739b..d7a320b64e9 100644
--- a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
@@ -7,7 +7,7 @@
     placement="bottom-end"
   >
     <template v-if="isMobile" #trigger="{ isOpen, open }">
-      <ButtonIcon :active="isOpen" :icon="faEllipsis" @click="open" />
+      <UiButtonIcon accent="info" size="medium" :selected="isOpen" :icon="faEllipsis" @click="open" />
     </template>
     <MenuItem :icon="faPowerOff">
       {{ $t('change-state') }}
@@ -34,9 +34,9 @@ import VmActionMigrateItem from '@/components/vm/VmActionItems/VmActionMigrateIt
 import VmActionPowerStateItems from '@/components/vm/VmActionItems/VmActionPowerStateItems.vue'
 import VmActionSnapshotItem from '@/components/vm/VmActionItems/VmActionSnapshotItem.vue'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { faEdit, faEllipsis, faPowerOff } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/lite/src/libs/story/story-param.ts b/@xen-orchestra/lite/src/libs/story/story-param.ts
index cb2b0facfa7..fdc47da6a9f 100644
--- a/@xen-orchestra/lite/src/libs/story/story-param.ts
+++ b/@xen-orchestra/lite/src/libs/story/story-param.ts
@@ -60,9 +60,9 @@ abstract class BaseParam {
   readonly #name: string
   #presetValue: any
 
-  protected abstract getNamePrefix(): string
+  abstract getNamePrefix(): string
 
-  protected abstract getNameSuffix(): string
+  abstract getNameSuffix(): string
 
   constructor(name: string) {
     this.#name = name
@@ -347,11 +347,11 @@ export class ModelParam extends BaseParam {
   readonly #prop: PropParam
   readonly #event: EventParam
 
-  protected getNameSuffix() {
+  getNameSuffix() {
     return ''
   }
 
-  protected getNamePrefix() {
+  getNamePrefix() {
     return ''
   }
 
diff --git a/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue b/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue
index 131ab068035..645ca4291bb 100644
--- a/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue
+++ b/@xen-orchestra/lite/src/stories/modals/layouts/confirm-modal-layout.story.vue
@@ -15,8 +15,8 @@
       <template #title>{{ settings.title }}</template>
       <template #subtitle>{{ settings.subtitle }}</template>
       <template #buttons>
-        <UiButton level="secondary" color="info" size="medium">I prefer not</UiButton>
-        <UiButton level="primary" color="info" size="medium">Yes, I'm sure!</UiButton>
+        <UiButton variant="secondary" accent="info" size="medium">I prefer not</UiButton>
+        <UiButton variant="primary" accent="info" size="medium">Yes, I'm sure!</UiButton>
       </template>
     </ConfirmModalLayout>
   </ComponentStory>
@@ -26,6 +26,6 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import ConfirmModalLayout from '@/components/ui/modals/layouts/ConfirmModalLayout.vue'
 import { iconProp, setting, slot } from '@/libs/story/story-param'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faShip } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue b/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue
index aa448af3736..ce657617021 100644
--- a/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue
+++ b/@xen-orchestra/lite/src/stories/modals/layouts/form-modal-layout.story.vue
@@ -23,8 +23,8 @@
       </div>
 
       <template #buttons>
-        <UiButton level="secondary" color="info" size="medium">Cancel</UiButton>
-        <UiButton level="primary" color="info" size="medium">Migrate 3 VMs</UiButton>
+        <UiButton variant="secondary" accent="info" size="medium">Cancel</UiButton>
+        <UiButton variant="primary" accent="info" size="medium">Migrate 3 VMs</UiButton>
       </template>
     </FormModalLayout>
   </ComponentStory>
@@ -36,6 +36,6 @@ import FormInput from '@/components/form/FormInput.vue'
 import FormInputWrapper from '@/components/form/FormInputWrapper.vue'
 import FormModalLayout from '@/components/ui/modals/layouts/FormModalLayout.vue'
 import { iconProp, slot } from '@/libs/story/story-param'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faRoute } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/backup-item/backup-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/backup-item/vts-backup-item.story.vue
similarity index 73%
rename from @xen-orchestra/lite/src/stories/web-core/backup-item/backup-item.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/backup-item/vts-backup-item.story.vue
index a072b1f4b4b..c11e38a4905 100644
--- a/@xen-orchestra/lite/src/stories/web-core/backup-item/backup-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/backup-item/vts-backup-item.story.vue
@@ -1,14 +1,13 @@
 <template>
   <ComponentStory v-slot="{ properties }" :params="[prop('backup').type(`Backup`).required().preset(backup)]">
-    <BackupItem v-bind="properties" />
+    <VtsBackupItem 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 type { Backup } from '@core/types/backup.type'
-import BackupItem from '@core/components/backup-item/BackupItem.vue'
+import VtsBackupItem, { type Backup } from '@core/components/backup-item/VtsBackupItem.vue'
 
 const backup: Backup = {
   label: '20191022 - JFT - test cron',
diff --git a/@xen-orchestra/lite/src/stories/web-core/backup-state/vts-backup-state.story.vue b/@xen-orchestra/lite/src/stories/web-core/backup-state/vts-backup-state.story.vue
new file mode 100644
index 00000000000..45bccd01492
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/backup-state/vts-backup-state.story.vue
@@ -0,0 +1,16 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('state').type(`BackupState`).required().enum('success', 'partial', 'failure').preset('success').widget(),
+    ]"
+  >
+    <VtsBackupState 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 VtsBackupState from '@core/components/backup-state/VtsBackupState.vue'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/button/button-group.story.vue b/@xen-orchestra/lite/src/stories/web-core/button-group/vts-button-group.story.vue
similarity index 50%
rename from @xen-orchestra/lite/src/stories/web-core/button/button-group.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/button-group/vts-button-group.story.vue
index f96676c14b5..c6e6402ea8e 100644
--- a/@xen-orchestra/lite/src/stories/web-core/button/button-group.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/button-group/vts-button-group.story.vue
@@ -6,19 +6,19 @@
       slot('tertiary').help('Meant to receive a third UiButton component, it will be on a second row'),
     ]"
   >
-    <ButtonGroup v-bind="properties">
-      <UiButton level="secondary" color="info" size="medium">Cancel</UiButton>
-      <UiButton level="primary" color="info" size="medium">Call to action</UiButton>
+    <VtsButtonGroup v-bind="properties">
+      <UiButton variant="secondary" accent="info" size="medium">Cancel</UiButton>
+      <UiButton variant="primary" accent="info" size="medium">Call to action</UiButton>
       <template #tertiary>
-        <UiButton level="tertiary" color="warning" size="medium">Secondary call to action</UiButton>
+        <UiButton variant="tertiary" accent="warning" size="medium">Secondary call to action</UiButton>
       </template>
-    </ButtonGroup>
+    </VtsButtonGroup>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { slot } from '@/libs/story/story-param'
-import ButtonGroup from '@core/components/button/ButtonGroup.vue'
-import UiButton from '@core/components/button/UiButton.vue'
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/button/button-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/button/button-icon.story.vue
deleted file mode 100644
index a361528aa28..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/button/button-icon.story.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <ComponentStory
-    v-slot="{ properties }"
-    :params="[
-      iconProp().preset(faEllipsis),
-      colorProp(),
-      prop('size')
-        .default('medium')
-        .str()
-        .widget(choice('small', 'medium', 'large')),
-      prop('disabled').bool().widget(),
-      prop('active').bool().widget(),
-      prop('dot').bool().widget(),
-      prop('targetScale')
-        .type('number | { x: number; y: number }')
-        .default(1)
-        .preset({ x: 2, y: 2 })
-        .help('Meant to increase click target size if needed')
-        .widget(),
-    ]"
-  >
-    <ButtonIcon v-bind="properties" />
-  </ComponentStory>
-</template>
-
-<script lang="ts" setup>
-import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { colorProp, iconProp, prop } from '@/libs/story/story-param'
-import { choice } from '@/libs/story/story-widget'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons'
-</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.md b/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.md
deleted file mode 100644
index 40152f2ce5e..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.md
+++ /dev/null
@@ -1,5 +0,0 @@
-Here is some doc for UiButton component
-
-```vue-template
-<UiButton level="primary" color="info" size="medium" @click="doSomething">Click me</UiButton>
-```
diff --git a/@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue b/@xen-orchestra/lite/src/stories/web-core/cell-object/vts-cell-object.story.vue
similarity index 81%
rename from @xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/cell-object/vts-cell-object.story.vue
index 88a68f4d201..41c6f459bf0 100644
--- a/@xen-orchestra/lite/src/stories/web-core/cell-object/cell-object.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/cell-object/vts-cell-object.story.vue
@@ -10,9 +10,9 @@
   >
     <table>
       <tr>
-        <CellObject v-bind="properties">
+        <VtsCellObject v-bind="properties">
           {{ settings.slot }}
-        </CellObject>
+        </VtsCellObject>
       </tr>
     </table>
   </ComponentStory>
@@ -21,5 +21,5 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
-import CellObject from '@core/components/cell-object/CellObject.vue'
+import VtsCellObject from '@core/components/cell-object/VtsCellObject.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/cell-text/cell-text.story.vue b/@xen-orchestra/lite/src/stories/web-core/cell-text/vts-cell-text.story.vue
similarity index 83%
rename from @xen-orchestra/lite/src/stories/web-core/cell-text/cell-text.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/cell-text/vts-cell-text.story.vue
index 4e7ee1e4cdd..3f149f775b1 100644
--- a/@xen-orchestra/lite/src/stories/web-core/cell-text/cell-text.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/cell-text/vts-cell-text.story.vue
@@ -10,10 +10,10 @@
   >
     <table>
       <tr>
-        <CellText v-bind="properties">
+        <VtsCellText v-bind="properties">
           {{ settings.slot }}
           <template #secondary>{{ settings.secondary }}</template>
-        </CellText>
+        </VtsCellText>
       </tr>
     </table>
   </ComponentStory>
@@ -22,5 +22,5 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { setting, slot } from '@/libs/story/story-param'
-import CellText from '@core/components/cell-text/CellText.vue'
+import VtsCellText from '@core/components/cell-text/VtsCellText.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart-with-legend.story.vue b/@xen-orchestra/lite/src/stories/web-core/donut-chart-with-legend/vts-donut-chart-with-legend.story.vue
similarity index 61%
rename from @xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart-with-legend.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/donut-chart-with-legend/vts-donut-chart-with-legend.story.vue
index b51d1f3c25b..493d8c30b65 100644
--- a/@xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart-with-legend.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/donut-chart-with-legend/vts-donut-chart-with-legend.story.vue
@@ -3,16 +3,16 @@
     v-slot="{ properties }"
     :params="[prop('segments').required().preset(segments), prop('title').preset(title), iconProp()]"
   >
-    <DonutChartWithLegend v-bind="properties" />
+    <VtsDonutChartWithLegend v-bind="properties" />
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop } from '@/libs/story/story-param'
-import DonutChartWithLegend, {
+import VtsDonutChartWithLegend, {
   type DonutChartWithLegendProps,
-} from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
+} from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 const title: DonutChartWithLegendProps['title'] = {
@@ -22,9 +22,9 @@ const title: DonutChartWithLegendProps['title'] = {
 }
 
 const segments: DonutChartWithLegendProps['segments'] = [
-  { value: 16, color: 'success', label: 'Online' },
-  { value: 22, color: 'warning', label: 'Maintenance', tooltip: 'Accessible in read-only' },
-  { value: 35, color: 'danger', label: 'Offline' },
-  { value: 12, color: 'disabled', label: 'Unknown' },
+  { value: 16, accent: 'success', label: 'Online' },
+  { value: 22, accent: 'warning', label: 'Maintenance', tooltip: 'Accessible in read-only' },
+  { value: 35, accent: 'danger', label: 'Offline' },
+  { value: 12, accent: 'muted', label: 'Unknown' },
 ]
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
deleted file mode 100644
index 1819877491e..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.md
+++ /dev/null
@@ -1,14 +0,0 @@
-ComplexIcon component usage:
-
-```vue-template
-<ComplexIcon>
-  <UiIcon :icon="faRotateRight" accent="current" />
-  <UiIcon :icon="faLightbulb" accent="current" />
-</ComplexIcon>
-```
-
-```vue-script
-import ComplexIcon from '@core/components/icon/ComplexIcon.vue'
-import UiIcon from '@core/components/icon/UiIcon.vue'
-import {faLightbulb, faRotateRight} from '@fortawesome/free-solid-svg-icons'
-```
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.md
deleted file mode 100644
index 7bbf160c433..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```vue-template
-<ObjectIcon size="small" state="running" type="vm" />
-```
diff --git a/@xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.md b/@xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.md
similarity index 72%
rename from @xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.md
rename to @xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.md
index 080640aa25a..87aff72bf11 100644
--- a/@xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.md
@@ -1,21 +1,21 @@
 ```vue-template
-<LegendGroup :items :title />
+<VtsLegendGroup :items :title />
 ```
 
 ```vue-script
-import LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+import VtsLegendGroup, { type LegendGroupProps } from '@core/components/legend/VtsLegendGroup.vue'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 const items: LegendGroupProps['items'] = [
   {
     label: 'First segment',
-    color: 'primary',
+    accent: 'info',
     value: 42,
     unit: '%'
   },
   {
     label: 'Second segment',
-    color: 'secondary',
+    accent: 'neutral',
     value: 58,
     unit: '%',
     tooltip: 'This is another tooltip'
diff --git a/@xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.vue b/@xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.vue
similarity index 79%
rename from @xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.vue
index 37b15b818b9..0dbc961e4c7 100644
--- a/@xen-orchestra/lite/src/stories/web-core/legend/legend-group.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/legend-group/vts-legend-group.story.vue
@@ -3,26 +3,26 @@
     v-slot="{ properties }"
     :params="[prop('items').required().preset(items), prop('title').preset(title)]"
   >
-    <LegendGroup v-bind="properties" />
+    <VtsLegendGroup 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 LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+import VtsLegendGroup, { type LegendGroupProps } from '@core/components/legend-group/VtsLegendGroup.vue'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 const items: LegendGroupProps['items'] = [
   {
     label: 'First segment',
-    color: 'primary',
+    accent: 'info',
     value: 42,
     unit: '%',
   },
   {
     label: 'Second segment',
-    color: 'secondary',
+    accent: 'neutral',
     value: 58,
     unit: '%',
     tooltip: 'This is another tooltip',
diff --git a/@xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar-with-legend.story.vue b/@xen-orchestra/lite/src/stories/web-core/stacked-bar-with-legend/vts-stacked-bar-with-legend.story.vue
similarity index 63%
rename from @xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar-with-legend.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/stacked-bar-with-legend/vts-stacked-bar-with-legend.story.vue
index 3046aa55fe8..2798810f215 100644
--- a/@xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar-with-legend.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/stacked-bar-with-legend/vts-stacked-bar-with-legend.story.vue
@@ -6,19 +6,19 @@
       prop('max-value').preset(50).type('number').widget().help('Maximum value for the stacked bar'),
     ]"
   >
-    <StackedBarWithLegend v-bind="properties" />
+    <VtsStackedBarWithLegend 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 StackedBarWithLegend, {
+import VtsStackedBarWithLegend, {
   type StackedBarWithLegendProps,
-} from '@core/components/stacked-bar-with-legend/StackedBarWithLegend.vue'
+} from '@core/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue'
 
 const segments: StackedBarWithLegendProps['segments'] = [
-  { value: 10.5, unit: 'GB', color: 'primary', label: 'XO backups' },
-  { value: 6.5, unit: 'GB', color: 'warning', label: 'Other' },
+  { value: 10.5, unit: 'GB', accent: 'info', label: 'XO backups' },
+  { value: 6.5, unit: 'GB', accent: 'warning', label: 'Other' },
 ]
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.md b/@xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.md
deleted file mode 100644
index 74c86a255a0..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```vue-template
-<UiCard>
-  <CardTitle>My Card</CardTitle>
-  <LoadingHero :disabled="isReady">
-    <div>Content of my card</div>
-  </LoadingHero>
-</UiCard>
-```
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/coming-soon-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-coming-soon-hero.story.vue
similarity index 72%
rename from @xen-orchestra/lite/src/stories/web-core/state-hero/coming-soon-hero.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/state-hero/vts-coming-soon-hero.story.vue
index 6b1f9ef1fcb..8356c7f3a29 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/coming-soon-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-coming-soon-hero.story.vue
@@ -3,12 +3,12 @@
     v-slot="{ properties }"
     :params="[prop('type').required().enum('page', 'card').preset('card').widget()]"
   >
-    <ComingSoonHero v-bind="properties" />
+    <VtsComingSoonHero 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 ComingSoonHero from '@core/components/state-hero/ComingSoonHero.vue'
+import VtsComingSoonHero from '@core/components/state-hero/VtsComingSoonHero.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.md b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.md
new file mode 100644
index 00000000000..de2e41dbfc8
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.md
@@ -0,0 +1,8 @@
+```vue-template
+<UiCard>
+  <UiCardTitle>My Card</UiCardTitle>
+  <VtsLoadingHero :disabled="isReady">
+    <div>Content of my card</div>
+  </VtsLoadingHero>
+</UiCard>
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.vue
similarity index 79%
rename from @xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.vue
index 8a0578ec17b..5a510204f4a 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/loading-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-loading-hero.story.vue
@@ -8,14 +8,14 @@
       setting('slotContent').preset('Content to show when loader is disabled').widget(),
     ]"
   >
-    <LoadingHero v-bind="properties">
+    <VtsLoadingHero v-bind="properties">
       {{ settings.slotContent }}
-    </LoadingHero>
+    </VtsLoadingHero>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-no-data-hero.story.vue
similarity index 74%
rename from @xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/state-hero/vts-no-data-hero.story.vue
index fff487c0574..c953fae577f 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-no-data-hero.story.vue
@@ -3,12 +3,12 @@
     v-slot="{ properties }"
     :params="[prop('type').required().enum('page', 'card').preset('card').widget()]"
   >
-    <NoDataHero v-bind="properties" />
+    <VtsNoDataHero 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 NoDataHero from '@core/components/state-hero/NoDataHero.vue'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/object-not-found-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-object-not-found-hero.story.vue
similarity index 69%
rename from @xen-orchestra/lite/src/stories/web-core/state-hero/object-not-found-hero.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/state-hero/vts-object-not-found-hero.story.vue
index 90e559c362e..5de3adbc053 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/object-not-found-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-object-not-found-hero.story.vue
@@ -1,11 +1,11 @@
 <template>
   <ComponentStory v-slot="{ properties }" :params="[prop('id').required().str().preset('123-456-789').widget()]">
-    <ObjectNotFoundHero v-bind="properties" />
+    <VtsObjectNotFoundHero 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 ObjectNotFoundHero from '@core/components/state-hero/ObjectNotFoundHero.vue'
+import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/state-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
similarity index 81%
rename from @xen-orchestra/lite/src/stories/web-core/state-hero/state-hero.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
index f7bc7fd7ccc..a2dae597ae0 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/state-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
@@ -9,14 +9,14 @@
       setting('defaultSlot').preset('Some text').widget(),
     ]"
   >
-    <StateHero v-bind="properties">
+    <VtsStateHero v-bind="properties">
       {{ settings.defaultSlot }}
-    </StateHero>
+    </VtsStateHero>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
-import StateHero from '@core/components/state-hero/StateHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.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 4ac46370b57..4890d97f933 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 }}
-        <VtsCounter v-if="settings.counter" :value="settings.counter" accent="info" variant="primary" size="small" />
+        <UiCounter v-if="settings.counter" :value="settings.counter" accent="info" variant="primary" 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 VtsCounter from '@core/components/counter/VtsCounter.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/table/column-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/table/column-title.story.vue
index 51f2431c03c..05ab53e92c9 100644
--- a/@xen-orchestra/lite/src/stories/web-core/table/column-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/table/column-title.story.vue
@@ -10,13 +10,13 @@
       slot(),
     ]"
   >
-    <UiTable vertical-border name="story">
+    <VtsTable vertical-border name="story">
       <thead>
         <tr>
           <ColumnTitle v-bind="properties" id="vm">{{ settings.slot }}</ColumnTitle>
         </tr>
       </thead>
-    </UiTable>
+    </VtsTable>
   </ComponentStory>
 </template>
 
@@ -24,5 +24,5 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop, setting, slot } from '@/libs/story/story-param'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
-import UiTable from '@core/components/table/UiTable.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/table/ui-table.story.vue b/@xen-orchestra/lite/src/stories/web-core/table/vts-table.story.vue
similarity index 91%
rename from @xen-orchestra/lite/src/stories/web-core/table/ui-table.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/table/vts-table.story.vue
index c254c196b00..62091905093 100644
--- a/@xen-orchestra/lite/src/stories/web-core/table/ui-table.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/table/vts-table.story.vue
@@ -3,7 +3,7 @@
     v-slot="{ properties }"
     :params="[prop('name').str().widget(), prop('verticalBorder').bool().default(false).widget(), slot()]"
   >
-    <UiTable v-bind="properties">
+    <VtsTable v-bind="properties">
       <thead>
         <tr>
           <ColumnTitle id="vm" :icon="faDesktop">vm</ColumnTitle>
@@ -16,7 +16,7 @@
           <td>{{ vm.description }}</td>
         </tr>
       </tbody>
-    </UiTable>
+    </VtsTable>
   </ComponentStory>
 </template>
 
@@ -24,7 +24,7 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot } from '@/libs/story/story-param'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
-import UiTable from '@core/components/table/UiTable.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
 import { faAlignLeft, faDesktop } from '@fortawesome/free-solid-svg-icons'
 
 const vms = [
diff --git a/@xen-orchestra/lite/src/stories/web-core/title/ui-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/title/ui-title.story.vue
index ead042567bd..b49f86114d8 100644
--- a/@xen-orchestra/lite/src/stories/web-core/title/ui-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/title/ui-title.story.vue
@@ -12,8 +12,8 @@
       {{ settings.default }}
 
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="medium" level="secondary" color="normal">Label</UiButton>
-        <UiButton size="medium" level="secondary" color="normal">Label</UiButton>
+        <UiButton size="medium" variant="secondary" accent="info">Label</UiButton>
+        <UiButton size="medium" variant="secondary" accent="info">Label</UiButton>
       </template>
     </UiTitle>
   </ComponentStory>
@@ -23,6 +23,6 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { setting, slot } from '@/libs/story/story-param'
 import { boolean } from '@/libs/story/story-widget'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiTitle from '@core/components/ui/title/UiTitle.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.md
deleted file mode 100644
index 4c4a54bbf90..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Example
-
-```vue-template
-<TreeItem>
-  <TreeItemLabel :icon="faServer" route="#">Host</TreeItemLabel>
-  <template #sublist>
-    <TreeList>
-      <TreeItem>
-        <TreeItemLabel no-indent route="#">Sublist goes here</TreeItemLabel>
-      </TreeItem>
-    </TreeList>
-  </template>
-</TreeItem>
-```
-
-```vue-script
-import TreeItem from '@core/components/tree/TreeItem.vue'
-import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
-```
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.vue
deleted file mode 100644
index 12b1bd04df7..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item.story.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <ComponentStory
-    :params="[
-      slot().help('Meant to receive a <TreeItemLabel>'),
-      slot('sublist').help('Meant to receive a <TreeList> child.'),
-    ]"
-  >
-    <TreeList>
-      <TreeItem>
-        <TreeItemLabel :icon="faServer" route="dashboard">Host</TreeItemLabel>
-        <template #sublist>
-          <TreeList>
-            <TreeItem>
-              <TreeItemLabel no-indent route="dashboard">Sublist goes here</TreeItemLabel>
-            </TreeItem>
-          </TreeList>
-        </template>
-      </TreeItem>
-    </TreeList>
-  </ComponentStory>
-</template>
-
-<script lang="ts" setup>
-import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { slot } from '@/libs/story/story-param'
-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 { faServer } from '@fortawesome/free-solid-svg-icons'
-</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
deleted file mode 100644
index bb7fd3410e4..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Example
-
-```vue-template
-<TreeList>
-  <TreeItem>
-    <TreeItemLabel :icon="faCity" route="#">Pool</TreeItemLabel>
-    <template #sublist>
-      <TreeList>
-        <TreeItem v-for="i of 3" :key="i">
-          <TreeItemLabel :icon="faServer" route="#">
-            Host - {{ i }}
-            <template #addons>
-              <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-              <VtsCounter accent="info" value="3" variant="secondary" size="small" />
-            </template>
-          </TreeItemLabel>
-          <template #sublist>
-            <TreeList>
-              <TreeItem v-for="j of 3" :key="j">
-                <TreeItemLabel no-indent route="#">
-                  <template #icon>
-                    <ObjectIcon :state="j === 3 ? 'halted' : 'running'" type="vm" />
-                  </template>
-                  VM {{ i }}.{{ j }}
-                  <template #addons>
-                    <VtsIcon v-if="j === 2" busy accent="current" />
-                    <ButtonIcon :icon="faEllipsis" />
-                  </template>
-                </TreeItemLabel>
-              </TreeItem>
-            </TreeList>
-          </template>
-        </TreeItem>
-      </TreeList>
-    </template>
-  </TreeItem>
-</TreeList>
-```
-
-```vue-script
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.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 { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
-```
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
deleted file mode 100644
index 4a642aa45b8..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-list.story.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <ComponentStory :params="[slot()]">
-    <TreeList>
-      <TreeItem>
-        <TreeItemLabel :icon="faCity" route="dashboard">Pool</TreeItemLabel>
-        <template #sublist>
-          <TreeList>
-            <TreeItem v-for="i of 3" :key="i">
-              <TreeItemLabel :icon="faServer" route="dashboard">
-                Host - {{ i }}
-                <template #addons>
-                  <ButtonIcon v-if="i === 2" :icon="faStar" color="warning" />
-                  <VtsCounter accent="info" value="3" variant="secondary" size="small" />
-                </template>
-              </TreeItemLabel>
-              <template #sublist>
-                <TreeList>
-                  <TreeItem v-for="j of 3" :key="j">
-                    <TreeItemLabel no-indent route="dashboard">
-                      <template #icon>
-                        <ObjectIcon :state="j === 3 ? 'halted' : 'running'" type="vm" />
-                      </template>
-                      VM {{ i }}.{{ j }}
-                      <template #addons>
-                        <VtsIcon v-if="j === 2" busy accent="current" />
-                        <ButtonIcon :icon="faEllipsis" />
-                      </template>
-                    </TreeItemLabel>
-                  </TreeItem>
-                </TreeList>
-              </template>
-            </TreeItem>
-          </TreeList>
-        </template>
-      </TreeItem>
-    </TreeList>
-  </ComponentStory>
-</template>
-
-<script lang="ts" setup>
-import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { slot } from '@/libs/story/story-param'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.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 { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
-</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-error.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item-error.story.vue
similarity index 62%
rename from @xen-orchestra/lite/src/stories/web-core/tree/tree-item-error.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item-error.story.vue
index b15f4aba46d..146d5130fc9 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-error.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item-error.story.vue
@@ -6,15 +6,15 @@
       setting('message').help('Content for default slot').preset('Error, can\'t collect data').widget(),
     ]"
   >
-    <TreeList>
-      <TreeItemError>{{ settings.message }}</TreeItemError>
-    </TreeList>
+    <VtsTreeList>
+      <VtsTreeItemError>{{ settings.message }}</VtsTreeItemError>
+    </VtsTreeList>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { setting, slot } from '@/libs/story/story-param'
-import TreeItemError from '@core/components/tree/TreeItemError.vue'
-import TreeList from '@core/components/tree/TreeList.vue'
+import VtsTreeItemError from '@core/components/tree/VtsTreeItemError.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.md
new file mode 100644
index 00000000000..99b08a3fe29
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.md
@@ -0,0 +1,20 @@
+# Example
+
+```vue-template
+<VtsTreeItem>
+  <UiTreeItemLabel :icon="faServer" route="dashboard">Host</UiTreeItemLabel>
+  <template #sublist>
+    <VtsTreeList>
+      <VtsTreeItem>
+        <UiTreeItemLabel no-indent route="#">Sublist goes here</UiTreeItemLabel>
+      </VtsTreeItem>
+    </VtsTreeList>
+  </template>
+</VtsTreeItem>
+```
+
+```vue-script
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.vue
new file mode 100644
index 00000000000..688f003d344
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-item.story.vue
@@ -0,0 +1,30 @@
+<template>
+  <ComponentStory
+    :params="[
+      slot().help('Meant to receive a <UiTreeItemLabel>'),
+      slot('sublist').help('Meant to receive a <VtsTreeList> child.'),
+    ]"
+  >
+    <VtsTreeList>
+      <VtsTreeItem>
+        <UiTreeItemLabel :icon="faServer" route="dashboard">Host</UiTreeItemLabel>
+        <template #sublist>
+          <VtsTreeList>
+            <VtsTreeItem>
+              <UiTreeItemLabel no-indent route="dashboard">Sublist goes here</UiTreeItemLabel>
+            </VtsTreeItem>
+          </VtsTreeList>
+        </template>
+      </VtsTreeItem>
+    </VtsTreeList>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { slot } from '@/libs/story/story-param'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.md b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.md
new file mode 100644
index 00000000000..4e4c6b4c5d8
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.md
@@ -0,0 +1,49 @@
+# Example
+
+```vue-template
+<VtsTreeList>
+  <VtsTreeItem>
+    <UiTreeItemLabel :icon="faCity" route="#">Pool</UiTreeItemLabel>
+    <template #sublist>
+      <VtsTreeList>
+        <VtsTreeItem v-for="i of 3" :key="i">
+          <UiTreeItemLabel :icon="faServer" route="#">
+            Host - {{ i }}
+            <template #addons>
+              <VtsIcon v-if="i === 2" :icon="faStar" accent="warning" />
+              <VtsCounter accent="info" value="3" variant="secondary" size="small" />
+            </template>
+          </UiTreeItemLabel>
+          <template #sublist>
+            <VtsTreeList>
+              <VtsTreeItem v-for="j of 3" :key="j">
+                <UiTreeItemLabel no-indent route="#">
+                  <template #icon>
+                    <ObjectIcon :state="j === 3 ? 'halted' : 'running'" type="vm" />
+                  </template>
+                  VM {{ i }}.{{ j }}
+                  <template #addons>
+                    <VtsIcon v-if="j === 2" busy accent="current" />
+                    <VtsButtonIcon accent="info" size="medium" :icon="faEllipsis" />
+                  </template>
+                </UiTreeItemLabel>
+              </VtsTreeItem>
+            </VtsTreeList>
+          </template>
+        </VtsTreeItem>
+      </VtsTreeList>
+    </template>
+  </VtsTreeItem>
+</VtsTreeList>
+```
+
+```vue-script
+import VtsButtonIcon from '@core/components/button-icon/VtsButtonIcon.vue'
+import VtsCounter from '@core/components/counter/VtsCounter.vue'
+import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.vue
new file mode 100644
index 00000000000..0ce729c3762
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-list.story.vue
@@ -0,0 +1,51 @@
+<template>
+  <ComponentStory :params="[slot()]">
+    <VtsTreeList>
+      <VtsTreeItem>
+        <UiTreeItemLabel :icon="faCity" route="dashboard">Pool</UiTreeItemLabel>
+        <template #sublist>
+          <VtsTreeList>
+            <VtsTreeItem v-for="i of 3" :key="i">
+              <UiTreeItemLabel :icon="faServer" route="dashboard">
+                Host - {{ i }}
+                <template #addons>
+                  <VtsIcon v-if="i === 2" :icon="faStar" accent="warning" />
+                  <VtsCounter accent="info" value="3" variant="secondary" size="small" />
+                </template>
+              </UiTreeItemLabel>
+              <template #sublist>
+                <VtsTreeList>
+                  <VtsTreeItem v-for="j of 3" :key="j">
+                    <UiTreeItemLabel no-indent route="dashboard">
+                      <template #icon>
+                        <UiObjectIcon size="medium" :state="j === 3 ? 'halted' : 'running'" type="vm" />
+                      </template>
+                      VM {{ i }}.{{ j }}
+                      <template #addons>
+                        <VtsIcon v-if="j === 2" busy accent="current" />
+                        <VtsButtonIcon accent="info" size="medium" :icon="faEllipsis" />
+                      </template>
+                    </UiTreeItemLabel>
+                  </VtsTreeItem>
+                </VtsTreeList>
+              </template>
+            </VtsTreeItem>
+          </VtsTreeList>
+        </template>
+      </VtsTreeItem>
+    </VtsTreeList>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { slot } from '@/libs/story/story-param'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import VtsButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import VtsCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
+import { faCity, faEllipsis, faServer, faStar } from '@fortawesome/free-solid-svg-icons'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-loading-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-loading-item.story.vue
similarity index 61%
rename from @xen-orchestra/lite/src/stories/web-core/tree/tree-loading-item.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/tree/vts-tree-loading-item.story.vue
index 9b9a2628aac..118f1ac617b 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-loading-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tree/vts-tree-loading-item.story.vue
@@ -1,15 +1,15 @@
 <template>
   <ComponentStory v-slot="{ properties }" :params="[iconProp().preset(faServer).required()]">
-    <TreeList>
-      <TreeLoadingItem v-bind="properties" />
-    </TreeList>
+    <VtsTreeList>
+      <VtsTreeLoadingItem v-bind="properties" />
+    </VtsTreeList>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp } from '@/libs/story/story-param'
-import TreeList from '@core/components/tree/TreeList.vue'
-import TreeLoadingItem from '@core/components/tree/TreeLoadingItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import VtsTreeLoadingItem from '@core/components/tree/VtsTreeLoadingItem.vue'
 import { faServer } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-card.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui-card.story.vue
deleted file mode 100644
index 36d4580e248..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/ui-card.story.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <ComponentStory v-slot="{ properties }" :params="[prop('horizontal').bool().widget()]">
-    <UiCard v-bind="properties"><UiTag>Content</UiTag><UiTag>Content</UiTag><UiTag>Content</UiTag></UiCard>
-  </ComponentStory>
-</template>
-
-<script lang="ts" setup>
-import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { prop } from '@/libs/story/story-param'
-import UiCard from '@core/components/UiCard.vue'
-import UiTag from '@core/components/UiTag.vue'
-</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/actions-title/ui-actions-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/actions-title/ui-actions-title.story.vue
similarity index 100%
rename from @xen-orchestra/lite/src/stories/web-core/actions-title/ui-actions-title.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/actions-title/ui-actions-title.story.vue
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/button-icon/ui-button-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/button-icon/ui-button-icon.story.vue
new file mode 100644
index 00000000000..06fecdc275b
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/button-icon/ui-button-icon.story.vue
@@ -0,0 +1,39 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      iconProp().preset(faEllipsis),
+      prop('accent').required().enum('info', 'success', 'warning', 'danger').preset('info').widget(),
+      prop('size').required().enum('small', 'medium', 'large').preset('medium').widget(),
+      prop('disabled').bool().widget(),
+      prop('selected').bool().widget(),
+      prop('dot').bool().widget(),
+      prop('overlay-icon')
+        .type('IconDefinition')
+        .widget(
+          choice(
+            { label: 'Ship', value: faShip },
+            { label: 'Rocket', value: faRocket },
+            { label: 'Floppy', value: faFloppyDisk },
+            { label: 'Trash', value: faTrash }
+          )
+        ),
+      prop('targetScale')
+        .type('number | { x: number; y: number }')
+        .default(1)
+        .preset({ x: 2, y: 2 })
+        .help('Meant to increase click target size if needed')
+        .widget(),
+    ]"
+  >
+    <UiButtonIcon v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop } from '@/libs/story/story-param'
+import { choice } from '@/libs/story/story-widget'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { faEllipsis, faFloppyDisk, faRocket, faShip, faTrash } from '@fortawesome/free-solid-svg-icons'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.md
new file mode 100644
index 00000000000..1659172462b
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.md
@@ -0,0 +1,5 @@
+Here is some doc for UiButton component
+
+```vue-template
+<UiButton variant="primary" accent="info" size="medium" @click="doSomething">Click me</UiButton>
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.vue
similarity index 73%
rename from @xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.vue
index f2b606b0ac4..9160fe7c44b 100644
--- a/@xen-orchestra/lite/src/stories/web-core/button/ui-button.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/button/ui-button.story.vue
@@ -2,8 +2,13 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('color').type('ButtonColor').enum('info', 'success', 'warning', 'danger').preset('info').required().widget(),
-      prop('level')
+      prop('accent')
+        .type('ButtonAccent')
+        .enum('info', 'success', 'warning', 'danger')
+        .preset('info')
+        .required()
+        .widget(),
+      prop('variant')
         .type('ButtonVariant')
         .enum('primary', 'secondary', 'tertiary')
         .preset('primary')
@@ -12,6 +17,7 @@
       prop('size').type('ButtonSize').enum('small', 'medium', 'large').preset('medium').required().widget(),
       prop('busy').bool().widget(),
       prop('disabled').bool().widget().ctx(),
+      prop('lockIcon').bool().widget(),
       prop('leftIcon')
         .type('IconDefinition')
         .widget(
@@ -22,22 +28,12 @@
             { label: 'Trash', value: faTrash }
           )
         ),
-      prop('rightIcon')
-        .type('IconDefinition')
-        .widget(
-          choice(
-            { label: 'Ship', value: faShip },
-            { label: 'Rocket', value: faRocket },
-            { label: 'Floppy', value: faFloppyDisk },
-            { label: 'Trash', value: faTrash }
-          )
-        ),
       setting('label').preset('Click me').widget(),
     ]"
     :presets="{
       'Save Button': {
         props: {
-          color: 'success',
+          accent: 'success',
           leftIcon: faFloppyDisk,
           rightIcon: undefined,
         },
@@ -49,7 +45,7 @@
         props: {
           leftIcon: undefined,
           rightIcon: faTrash,
-          color: 'danger',
+          accent: 'danger',
         },
         settings: {
           label: 'Delete',
@@ -65,6 +61,6 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting } from '@/libs/story/story-param'
 import { choice } from '@/libs/story/story-widget'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faFloppyDisk, faRocket, faShip, faTrash } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/card-numbers.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card-numbers/ui-card-numbers.story.vue
similarity index 82%
rename from @xen-orchestra/lite/src/stories/web-core/card-numbers.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/card-numbers/ui-card-numbers.story.vue
index 51f0558d93b..249601d4808 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card-numbers.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/card-numbers/ui-card-numbers.story.vue
@@ -9,12 +9,12 @@
       prop('max').num().widget(),
     ]"
   >
-    <CardNumbers v-bind="properties" />
+    <UiCardNumbers 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 CardNumbers from '@core/components/CardNumbers.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/card/card-subtitle.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-subtitle.story.vue
similarity index 83%
rename from @xen-orchestra/lite/src/stories/web-core/card/card-subtitle.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-subtitle.story.vue
index 5aadd48990a..dcaea785c60 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card/card-subtitle.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-subtitle.story.vue
@@ -8,10 +8,10 @@
       setting('infoSlotContent').preset('Info').widget(text()),
     ]"
   >
-    <CardSubtitle>
+    <UiCardSubtitle>
       {{ settings.defaultSlotContent }}
       <template #info>{{ settings.infoSlotContent }}</template>
-    </CardSubtitle>
+    </UiCardSubtitle>
   </ComponentStory>
 </template>
 
@@ -19,5 +19,5 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { slot, setting } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
-import CardSubtitle from '@core/components/card/CardSubtitle.vue'
+import UiCardSubtitle from '@core/components/ui/card-subtitle/UiCardSubtitle.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-title.story.vue
similarity index 70%
rename from @xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-title.story.vue
index 2343d8f2a38..34b2cd3ce1e 100644
--- a/@xen-orchestra/lite/src/stories/web-core/card/card-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-title.story.vue
@@ -10,15 +10,15 @@
       setting('descriptionSlotContent').preset('Description').widget(text()),
     ]"
   >
-    <CardTitle v-bind="properties">
+    <UiCardTitle v-bind="properties">
       {{ settings.defaultSlotContent }}
-      <VtsCounter :value="3" accent="danger" size="medium" variant="primary" />
+      <UiCounter :value="3" accent="danger" size="medium" variant="primary" />
       <template #info>
         {{ settings.infoSlotContent }}
-        <UiButton level="tertiary" size="small" color="info" :right-icon="faAngleRight">See all</UiButton>
+        <UiButton variant="tertiary" size="small" accent="info" :right-icon="faAngleRight">See all</UiButton>
       </template>
       <template #description>{{ settings.descriptionSlotContent }}</template>
-    </CardTitle>
+    </UiCardTitle>
   </ComponentStory>
 </template>
 
@@ -26,8 +26,8 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 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 VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card.story.vue
new file mode 100644
index 00000000000..d44204ba27e
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card.story.vue
@@ -0,0 +1,22 @@
+<template>
+  <ComponentStory v-slot="{ properties }" :params="[prop('horizontal').bool().widget()]">
+    <UiCard v-bind="properties">
+      <div class="content">Content 1</div>
+      <div class="content">Content 2</div>
+      <div class="content">Content 3</div>
+    </UiCard>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+</script>
+
+<style lang="postcss" scoped>
+.content {
+  padding: 1rem;
+  background-color: var(--color-neutral-background-secondary);
+}
+</style>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/checkbox/ui-checkbox.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/checkbox/ui-checkbox.story.vue
new file mode 100644
index 00000000000..657d2abe9f7
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/checkbox/ui-checkbox.story.vue
@@ -0,0 +1,31 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('accent')
+        .type('CheckboxAccent')
+        .required()
+        .enum('info', 'success', 'warning', 'danger')
+        .preset('info')
+        .widget(),
+      prop('disabled').bool().widget(),
+      slot(),
+      slot('info'),
+      setting('defaultSlot').widget(text()).preset('Label'),
+      setting('info').widget(text()).preset('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+      model().type('boolean').preset(undefined),
+    ]"
+  >
+    <UiCheckbox v-bind="properties">
+      {{ settings.defaultSlot }}
+      <template v-if="settings.info" #info>{{ settings.info }}</template>
+    </UiCheckbox>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { model, prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-chip.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/chip/ui-chip.story.vue
similarity index 60%
rename from @xen-orchestra/lite/src/stories/web-core/ui-chip.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/chip/ui-chip.story.vue
index 05fd6e88412..0ca459450cf 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-chip.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/chip/ui-chip.story.vue
@@ -3,8 +3,8 @@
     v-slot="{ properties, settings }"
     :params="[
       iconProp(),
-      colorProp(),
-      prop('disabled').bool().widget().ctx(),
+      prop('accent').required().enum('info', 'success', 'warning', 'danger').preset('info').widget(),
+      prop('disabled').bool().widget(),
       event('edit'),
       event('remove'),
       slot(),
@@ -17,6 +17,6 @@
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { colorProp, event, iconProp, prop, setting, slot } from '@/libs/story/story-param'
-import UiChip from '@core/components/chip/UiChip.vue'
+import { event, iconProp, prop, setting, slot } from '@/libs/story/story-param'
+import UiChip from '@core/components/ui/chip/UiChip.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.md
new file mode 100644
index 00000000000..e675f8642a6
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.md
@@ -0,0 +1,14 @@
+ComplexIcon component usage:
+
+```vue-template
+<UiComplexIcon>
+  <VtsIcon :icon="faRotateRight" accent="current" />
+  <VtsIcon :icon="faLightbulb" accent="current" />
+</UiComplexIcon>
+```
+
+```vue-script
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import {faLightbulb, faRotateRight} from '@fortawesome/free-solid-svg-icons'
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.vue
similarity index 60%
rename from @xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.vue
index 32752f906cd..3aa1113b8b4 100644
--- a/@xen-orchestra/lite/src/stories/web-core/icon/complex-icon.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/complex-icon/ui-complex-icon.story.vue
@@ -2,21 +2,21 @@
   <ComponentStory
     v-slot="{ properties }"
     :params="[
-      prop('size').enum('small', 'medium', 'large').default('medium').widget(),
-      slot().help('Meant to receive two <UiIcon> components. The second icon component is the stacked icon'),
+      prop('size').required().enum('small', 'medium', 'large').preset('medium').widget(),
+      slot().help('Meant to receive two <VtsIcon> components. The second icon component is the stacked icon'),
     ]"
   >
-    <ComplexIcon v-bind="properties">
+    <UiComplexIcon v-bind="properties">
       <VtsIcon :icon="faRotateRight" accent="current" />
       <VtsIcon :icon="faLightbulb" accent="current" />
-    </ComplexIcon>
+    </UiComplexIcon>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot } from '@/libs/story/story-param'
-import ComplexIcon from '@core/components/icon/ComplexIcon.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
 import { faLightbulb, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/counter/ui-counter.story.vue
similarity index 86%
rename from @xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/counter/ui-counter.story.vue
index 4c3f981c85a..0347bb4157d 100644
--- a/@xen-orchestra/lite/src/stories/web-core/counter/vts-counter.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/counter/ui-counter.story.vue
@@ -12,12 +12,12 @@
       prop('variant').enum('primary', 'secondary').required().preset('primary').widget(),
     ]"
   >
-    <VtsCounter v-bind="properties" />
+    <UiCounter 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 VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/donut-chart/ui-donut-chart.story.vue
similarity index 57%
rename from @xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/donut-chart/ui-donut-chart.story.vue
index 84183b8f7b8..666c5943236 100644
--- a/@xen-orchestra/lite/src/stories/web-core/donut-chart/donut-chart.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/donut-chart/ui-donut-chart.story.vue
@@ -3,7 +3,7 @@
     v-slot="{ properties }"
     :params="[prop('segments').type('DonutSegment[]').required().preset(segments).widget(object()), iconProp()]"
   >
-    <DonutChart v-bind="properties" />
+    <UiDonutChart v-bind="properties" />
   </ComponentStory>
 </template>
 
@@ -11,12 +11,14 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, iconProp } from '@/libs/story/story-param'
 import { object } from '@/libs/story/story-widget'
-import DonutChart, { type DonutSegment } from '@core/components/donut-chart/DonutChart.vue'
+import UiDonutChart, { type DonutSegment } from '@core/components/ui/donut-chart/UiDonutChart.vue'
 
 const segments: DonutSegment[] = [
-  { value: 16, color: 'success' },
-  { value: 22, color: 'warning' },
-  { value: 35, color: 'danger' },
-  { value: 12, color: 'disabled' },
+  { value: 13, accent: 'info' },
+  { value: 14, accent: 'neutral' },
+  { value: 16, accent: 'success' },
+  { value: 22, accent: 'warning' },
+  { value: 35, accent: 'danger' },
+  { value: 12, accent: 'muted' },
 ]
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.md
similarity index 77%
rename from @xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md
rename to @xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.md
index f91273e7745..92b69cd9133 100644
--- a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.md
@@ -1,7 +1,7 @@
-`HeadBar` component usage with `ObjectIcon` and `UiButton` components:
+`UiHeadBar` component usage with `ObjectIcon` and `UiButton` components:
 
 ```vue-template
-<HeadBar>
+<UiHeadBar>
   Host name
   <template #icon>
     <ObjectIcon type="host" state="running" size="medium" />
@@ -10,12 +10,12 @@
     <UiButton size="medium" level="primary" color="info" :left-icon="faPlus">New VM</UiButton>
     <UiButton size="medium" level="secondary" color="info" :left-icon="faPowerOff">Change state</UiButton>
   </template>
-</HeadBar>
+</UiHeadBar>
 ```
 
 ```vue-script
 import UiButton from '@core/components/button/UiButton.vue'
-import HeadBar from '@core/components/head-bar/HeadBar.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
 import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import { faPlus, faPowerOff } from '@fortawesome/free-solid-svg-icons'
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue
similarity index 71%
rename from @xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue
index e270149cb9d..fd91aabae6b 100644
--- a/@xen-orchestra/lite/src/stories/web-core/head-bar/head-bar.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/head-bar/ui-head-bar.story.vue
@@ -12,17 +12,17 @@
       setting('showStatusSlotDemoContent').widget(boolean()),
     ]"
   >
-    <HeadBar v-bind="properties">
+    <UiHeadBar v-bind="properties">
       {{ settings.default }}
       <template v-if="settings.showStatusSlotDemoContent" #status>
-        <UiSpinner class="spinner" />
+        <UiLoader class="loader" />
         migrating... (34%)
       </template>
       <template v-if="settings.showDemoButtons" #actions>
-        <UiButton size="medium" level="primary" color="info" :left-icon="faPlus">New VM</UiButton>
-        <UiButton size="medium" level="secondary" color="info" :left-icon="faPowerOff">Change state</UiButton>
+        <UiButton size="medium" variant="primary" accent="normal" :left-icon="faPlus">New VM</UiButton>
+        <UiButton size="medium" variant="secondary" accent="normal" :left-icon="faPowerOff">Change state</UiButton>
       </template>
-    </HeadBar>
+    </UiHeadBar>
   </ComponentStory>
 </template>
 
@@ -30,14 +30,14 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, setting, slot } from '@/libs/story/story-param'
 import { boolean } from '@/libs/story/story-widget'
-import UiButton from '@core/components/button/UiButton.vue'
-import HeadBar from '@core/components/head-bar/HeadBar.vue'
-import UiSpinner from '@core/components/UiSpinner.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { faPlus, faPowerOff } from '@fortawesome/free-solid-svg-icons'
 </script>
 
 <style lang="postcss" scoped>
-.spinner {
+.loader {
   font-size: 2rem;
   color: var(--color-info-txt-base);
 }
diff --git a/@xen-orchestra/lite/src/stories/web-core/info/vts-info.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/info/ui-info.story.vue
similarity index 80%
rename from @xen-orchestra/lite/src/stories/web-core/info/vts-info.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/info/ui-info.story.vue
index 97c8c7f230f..c79ea660f68 100644
--- a/@xen-orchestra/lite/src/stories/web-core/info/vts-info.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/info/ui-info.story.vue
@@ -7,7 +7,7 @@
       setting('defaultSlot').widget(text()).preset('message'),
     ]"
   >
-    <VtsInfo v-bind="properties">{{ settings.defaultSlot }}</VtsInfo>
+    <UiInfo v-bind="properties">{{ settings.defaultSlot }}</UiInfo>
   </ComponentStory>
 </template>
 
@@ -15,5 +15,5 @@
 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 VtsInfo from '@core/components/info/VtsInfo.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/input/ui-input.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
similarity index 90%
rename from @xen-orchestra/lite/src/stories/web-core/input/ui-input.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
index f2ba2dd2b12..cd5f1bea0c2 100644
--- a/@xen-orchestra/lite/src/stories/web-core/input/ui-input.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
@@ -14,6 +14,6 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, model, prop } from '@/libs/story/story-param'
-import UiInput from '@core/components/input/UiInput.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-textarea.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-textarea.story.vue
new file mode 100644
index 00000000000..f09eb498da1
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-textarea.story.vue
@@ -0,0 +1,30 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      model().type('string').preset(''),
+      prop('accent').enum('info', 'warning', 'danger').required().preset('info').widget(),
+      prop('disabled').bool().widget(),
+      prop('href').str().widget(),
+      iconProp(),
+      prop('placeholder').str().widget(),
+      prop('required').bool().widget(),
+      slot(),
+      slot('info'),
+      setting('defaultSlot').widget(text()).preset('Some label'),
+      setting('info').widget(text()).preset('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+    ]"
+  >
+    <UiTextarea v-bind="properties">
+      {{ settings.defaultSlot }}
+      <template v-if="settings.info" #info>{{ settings.info }}</template>
+    </UiTextarea>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop, setting, slot, model } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+</script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/input/vts-label.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/label/ui-label.story.vue
similarity index 70%
rename from @xen-orchestra/lite/src/stories/web-core/input/vts-label.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/label/ui-label.story.vue
index 855d0c72918..4e0556a173f 100644
--- a/@xen-orchestra/lite/src/stories/web-core/input/vts-label.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/label/ui-label.story.vue
@@ -2,7 +2,7 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('accent').enum('brand', 'warning', 'danger').required().preset('brand').widget(),
+      prop('accent').enum('neutral', 'warning', 'danger').required().preset('neutral').widget(),
       prop('required').bool().widget(),
       prop('href').str().widget(),
       slot(),
@@ -10,7 +10,7 @@
       iconProp(),
     ]"
   >
-    <VtsLabel v-bind="properties">{{ settings.defaultSlot }}</VtsLabel>
+    <UiLabel v-bind="properties">{{ settings.defaultSlot }}</UiLabel>
   </ComponentStory>
 </template>
 
@@ -18,5 +18,5 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
-import VtsLabel from '@core/components/input/VtsLabel.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/legend/legend-title.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend-title.story.vue
similarity index 75%
rename from @xen-orchestra/lite/src/stories/web-core/legend/legend-title.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend-title.story.vue
index 6505d348488..7b975be5a0c 100644
--- a/@xen-orchestra/lite/src/stories/web-core/legend/legend-title.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend-title.story.vue
@@ -8,7 +8,7 @@
       setting('defaultSlotContent').preset('Legend title').widget(text()),
     ]"
   >
-    <LegendTitle v-bind="properties">{{ settings.defaultSlotContent }}</LegendTitle>
+    <UiLegendTitle v-bind="properties">{{ settings.defaultSlotContent }}</UiLegendTitle>
   </ComponentStory>
 </template>
 
@@ -16,5 +16,5 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, iconProp, slot, setting } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
-import LegendTitle from '@core/components/LegendTitle.vue'
+import UiLegendTitle from '@core/components/ui/legend-title/UiLegendTitle.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.md
similarity index 55%
rename from @xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.md
rename to @xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.md
index 97a1ba5a99e..79ce7dc5843 100644
--- a/@xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.md
@@ -1,12 +1,12 @@
 ```vue-template
-<LegendList>
-  <LegendItem
-    color="success"
+<VtsLegendList>
+  <UiLegend
+    accent="success"
     :value="4"
     unit="GB"
     tooltip="This is a tooltip"
   >
     Some label
-  </LegendItem>
-</LegendList>
+  </UiLegend>
+</VtsLegendList>
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.vue
similarity index 60%
rename from @xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.vue
index fff0ca607bb..8541c512417 100644
--- a/@xen-orchestra/lite/src/stories/web-core/legend/legend-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/legend/ui-legend.story.vue
@@ -2,11 +2,11 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('color')
-        .type('LegendColor')
+      prop('accent')
+        .type('LegendAccent')
         .required()
-        .preset('primary')
-        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
+        .preset('info')
+        .enum('neutral', 'info', 'success', 'warning', 'danger', 'muted')
         .widget(),
       prop('value').num().widget().preset(4),
       prop('unit').str().preset('GB').widget(),
@@ -15,9 +15,9 @@
       setting('slot').preset('Legend label').widget(text()),
     ]"
   >
-    <LegendList>
-      <LegendItem v-bind="properties">{{ settings.slot }}</LegendItem>
-    </LegendList>
+    <VtsLegendList>
+      <UiLegend v-bind="properties">{{ settings.slot }}</UiLegend>
+    </VtsLegendList>
   </ComponentStory>
 </template>
 
@@ -25,6 +25,6 @@
 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 LegendItem from '@core/components/legend/LegendItem.vue'
-import LegendList from '@core/components/legend/LegendList.vue'
+import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend from '@core/components/ui/legend/UiLegend.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.md
new file mode 100644
index 00000000000..237983653e8
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.md
@@ -0,0 +1,3 @@
+```vue-template
+<UiObjectIcon size="medium" state="running" type="vm" />
+```
diff --git a/@xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.vue
similarity index 78%
rename from @xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.vue
index ab2f7f5eeb6..5257c07c557 100644
--- a/@xen-orchestra/lite/src/stories/web-core/icon/object-icon.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/object-icon/ui-object-icon.story.vue
@@ -8,7 +8,7 @@
         .required()
         .preset('vm')
         .widget(),
-      prop('size').type('ObjectIconSize').enum('extra-small', 'small', 'medium').default('small').widget(),
+      prop('size').type('ObjectIconSize').enum('small', 'medium', 'large').required().preset('medium').widget(),
       prop('state')
         .type(`SupportedStates<TType> | 'disabled'`)
         .enum(
@@ -27,12 +27,12 @@
         .widget(),
     ]"
   >
-    <ObjectIcon v-bind="properties" />
+    <UiObjectIcon 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 ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/object-link/object-link.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/object-link/ui-object-link.story.vue
similarity index 82%
rename from @xen-orchestra/lite/src/stories/web-core/object-link/object-link.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/object-link/ui-object-link.story.vue
index 9f637882d15..e7e70f48dd3 100644
--- a/@xen-orchestra/lite/src/stories/web-core/object-link/object-link.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/object-link/ui-object-link.story.vue
@@ -10,13 +10,13 @@
       setting('label').preset('Pool name').widget(),
     ]"
   >
-    <ObjectLink v-bind="properties">{{ settings.label }}</ObjectLink>
+    <UiObjectLink v-bind="properties">{{ settings.label }}</UiObjectLink>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop, setting, slot } from '@/libs/story/story-param'
-import ObjectLink from '@core/components/object-link/ObjectLink.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.md
similarity index 92%
rename from @xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.md
rename to @xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.md
index fa5eb2b7267..04c332395e4 100644
--- a/@xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.md
@@ -1,5 +1,5 @@
 ```vue-template
-<QuerySearchBar @search="(value: string) => (filter = value)" />
+<UiQuerySearchBar @search="(value: string) => (filter = value)" />
 
 <ul>
   <li v-for="vm in vms" :key="vm.id">{{ vm.label }}</li>
diff --git a/@xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.vue
similarity index 94%
rename from @xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.vue
index 7136c969883..d7e23805e64 100644
--- a/@xen-orchestra/lite/src/stories/web-core/query-search-bar/query-search-bar.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/query-search-bar/ui-query-search-bar.story.vue
@@ -1,6 +1,6 @@
 <template>
   <ComponentStory v-slot="{ properties }" :params="[event('search').args({ value: 'string' })]">
-    <QuerySearchBar id="search-bar" v-bind="properties" @search="(value: string) => (filter = value)" />
+    <UiQuerySearchBar id="search-bar" v-bind="properties" @search="(value: string) => (filter = value)" />
 
     <p class="text">Example data:</p>
     <ul class="data-list">
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { event } from '@/libs/story/story-param'
-import QuerySearchBar from '@core/components/query-search-bar/QuerySearchBar.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
 import { defineTree } from '@core/composables/tree/define-tree'
 import { useTreeFilter } from '@core/composables/tree-filter.composable'
 import { useTree } from '@core/composables/tree.composable'
diff --git a/@xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/stacked-bar/ui-stacked-bar.story.vue
similarity index 69%
rename from @xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/stacked-bar/ui-stacked-bar.story.vue
index 6c41226f046..268a7ac52ae 100644
--- a/@xen-orchestra/lite/src/stories/web-core/stacked-bar/stacked-bar.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/stacked-bar/ui-stacked-bar.story.vue
@@ -11,19 +11,19 @@
       prop('max-value').preset(100).type('number').widget().help('Maximum value for the stacked bar'),
     ]"
   >
-    <StackedBar v-bind="properties" />
+    <UiStackedBar 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 StackedBar from '@core/components/stacked-bar/StackedBar.vue'
+import UiStackedBar from '@core/components/ui/stacked-bar/UiStackedBar.vue'
 
 const segments = [
-  { value: 30, color: 'primary' },
-  { value: 20, color: 'success' },
-  { value: 10, color: 'warning' },
-  { value: 3, color: 'danger' },
+  { value: 30, accent: 'info' },
+  { value: 20, accent: 'success' },
+  { value: 10, accent: 'warning' },
+  { value: 3, accent: 'danger' },
 ]
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/tag/ui-tag.story.vue
similarity index 61%
rename from @xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/tag/ui-tag.story.vue
index 59f1777d877..54a5f1bb6a4 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui-tag.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/tag/ui-tag.story.vue
@@ -3,13 +3,13 @@
     v-slot="{ properties, settings }"
     :params="[
       iconProp(),
-      prop('color')
-        .type('TagColor')
+      prop('accent')
+        .type('TagAccent')
         .required()
-        .preset('primary')
-        .enum('primary', 'secondary', 'success', 'warning', 'danger', 'disabled')
+        .preset('info')
+        .enum('info', 'neutral', 'success', 'warning', 'danger', 'muted')
         .widget(),
-      prop('light').bool().widget(),
+      prop('variant').type('TagVariant').required().preset('primary').enum('primary', 'secondary').widget(),
       slot(),
       setting('slot').preset('Label').widget(),
     ]"
@@ -21,5 +21,5 @@
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop, setting, slot } from '@/libs/story/story-param'
-import UiTag from '@core/components/UiTag.vue'
+import UiTag from '@core/components/ui/tag/UiTag.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.md b/@xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.md
similarity index 50%
rename from @xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.md
rename to @xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.md
index 6582e1b51c8..bf68cc3c1cb 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.md
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.md
@@ -1,13 +1,13 @@
 # Example
 
 ```vue-template
-<TreeItemLabel :icon="faCity" route="#">
+<UiTreeItemLabel :icon="faCity" route="#">
   Pool
   <template #addons>...</template>
-</TreeItemLabel>
+</UiTreeItemLabel>
 ```
 
 ```vue-script
-import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 ```
diff --git a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.vue
similarity index 72%
rename from @xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.vue
index a9903711a74..ac5f134e693 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tree/tree-item-label.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/tree-item-label/ui-tree-item-label.story.vue
@@ -11,20 +11,21 @@
       prop('active').bool().widget(),
       prop('no-indent').bool().help('Remove indentation based on component depth in the tree'),
       slot('default'),
+      slot('icon').help('Meant to receive a VtsIcon or another icon component in case the icon prop is not used'),
       slot('addons').help('Add any extra information like quick actions button or counter'),
     ]"
   >
-    <TreeList>
-      <TreeItemLabel route="dashboard" v-bind="properties">Pool</TreeItemLabel>
-    </TreeList>
+    <VtsTreeList>
+      <UiTreeItemLabel route="dashboard" v-bind="properties">Pool</UiTreeItemLabel>
+    </VtsTreeList>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { iconProp, prop, slot } from '@/libs/story/story-param'
-import TreeItemLabel from '@core/components/tree/TreeItemLabel.vue'
-import TreeList from '@core/components/tree/TreeList.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 import { computed, provide } from 'vue'
diff --git a/@xen-orchestra/lite/src/stories/web-core/user/user-link.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/user-link/ui-user-link.story.vue
similarity index 80%
rename from @xen-orchestra/lite/src/stories/web-core/user/user-link.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/user-link/ui-user-link.story.vue
index 9de6ee14483..4aec3e81222 100644
--- a/@xen-orchestra/lite/src/stories/web-core/user/user-link.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/user-link/ui-user-link.story.vue
@@ -7,12 +7,12 @@
       prop('username').str().required().preset('username').widget(),
     ]"
   >
-    <UserLink v-bind="properties" />
+    <UiUserLink 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 UserLink from '@core/components/user/UserLink.vue'
+import UiUserLink from '@core/components/ui/user-link/UiUserLink.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/backup-state/backup-state.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/user-logo/user-logo.story.vue
similarity index 54%
rename from @xen-orchestra/lite/src/stories/web-core/backup-state/backup-state.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/ui/user-logo/user-logo.story.vue
index 6f49e4149d1..d6519087ac5 100644
--- a/@xen-orchestra/lite/src/stories/web-core/backup-state/backup-state.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/user-logo/user-logo.story.vue
@@ -2,15 +2,15 @@
   <ComponentStory
     v-slot="{ properties }"
     :params="[
-      prop('state').type(`'BackupState`).required().enum('success', 'partial', 'failure').preset('success').widget(),
+      prop('size').type('UserLogoSize').enum('extra-small', 'small', 'medium').required().preset('small').widget(),
     ]"
   >
-    <BackupState v-bind="properties" />
+    <UiUserLogo 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 BackupState from '@core/components/backup-state/BackupState.vue'
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/user/user-logo.story.vue b/@xen-orchestra/lite/src/stories/web-core/user/user-logo.story.vue
deleted file mode 100644
index 55e3a873240..00000000000
--- a/@xen-orchestra/lite/src/stories/web-core/user/user-logo.story.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <ComponentStory
-    v-slot="{ properties }"
-    :params="[prop('size').type('UserLogoSize').enum('extra-small', 'small', 'medium').widget()]"
-  >
-    <UserLogo 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 UserLogo from '@core/components/user/UserLogo.vue'
-</script>
diff --git a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
index db3481ac607..5aa121cd854 100644
--- a/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
+++ b/@xen-orchestra/lite/src/views/ObjectNotFoundView.vue
@@ -2,7 +2,7 @@
   <div>
     <img alt="" src="../assets/object-not-found.svg" />
     <p class="text">{{ $t('object-not-found', { id }) }}</p>
-    <UiButton size="medium" color="info" level="primary" @click="router.push({ name: 'home' })">
+    <UiButton size="medium" accent="info" variant="primary" @click="router.push({ name: 'home' })">
       {{ $t('back-pool-dashboard') }}
     </UiButton>
   </div>
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { usePageTitleStore } from '@/stores/page-title.store'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
diff --git a/@xen-orchestra/lite/src/views/PageNotFoundView.vue b/@xen-orchestra/lite/src/views/PageNotFoundView.vue
index 3361592d431..c6fe9695afa 100644
--- a/@xen-orchestra/lite/src/views/PageNotFoundView.vue
+++ b/@xen-orchestra/lite/src/views/PageNotFoundView.vue
@@ -3,7 +3,7 @@
     <img alt="" src="../assets/page-not-found.svg" />
     <p class="numeric">404</p>
     <p class="text">{{ $t('page-not-found') }}</p>
-    <UiButton size="medium" color="info" level="primary" @click="router.push({ name: 'home' })">
+    <UiButton size="medium" accent="info" variant="primary" @click="router.push({ name: 'home' })">
       {{ $t('back-pool-dashboard') }}
     </UiButton>
   </div>
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { usePageTitleStore } from '@/stores/page-title.store'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
diff --git a/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue b/@xen-orchestra/lite/src/views/pool/PoolTasksView.vue
index 1ff0e1a0fae..ac4c481ad29 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') }}
-      <VtsCounter :value="pendingTasks.length" accent="info" size="medium" variant="primary" />
+      <UiCounter :value="pendingTasks.length" accent="info" size="medium" variant="primary" />
     </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 VtsCounter from '@core/components/counter/VtsCounter.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import { useI18n } from 'vue-i18n'
 
 const { pendingTasks, finishedTasks, isReady, hasError } = useTaskStore().subscribe()
diff --git a/@xen-orchestra/lite/src/views/story/HomeView.vue b/@xen-orchestra/lite/src/views/story/HomeView.vue
index 313acbc35ca..cd5a4472e07 100644
--- a/@xen-orchestra/lite/src/views/story/HomeView.vue
+++ b/@xen-orchestra/lite/src/views/story/HomeView.vue
@@ -16,8 +16,8 @@
       Slot names, separated by comma
       <span class="slots">
         <FormInput v-model="slots" />
-        <UiButton size="medium" color="info" level="primary" @click="slots = 'default'">Default</UiButton>
-        <UiButton size="medium" color="info" level="secondary" @click="slots = ''">Clear</UiButton>
+        <UiButton size="medium" accent="info" variant="primary" @click="slots = 'default'">Default</UiButton>
+        <UiButton size="medium" accent="info" variant="secondary" @click="slots = ''">Clear</UiButton>
       </span>
     </div>
 
@@ -37,7 +37,7 @@ import FormSelect from '@/components/form/FormSelect.vue'
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import UiCard from '@/components/ui/UiCard.vue'
 import UiCardTitle from '@/components/ui/UiCardTitle.vue'
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faWarning } from '@fortawesome/free-solid-svg-icons'
 import { castArray } from 'lodash-es'
 import { type ComponentOptions, computed, ref, watch } from 'vue'
diff --git a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
index f145fc194aa..dda670d14db 100644
--- a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
+++ b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
@@ -2,7 +2,7 @@
   <div :class="{ 'no-ui': !uiStore.hasUi }" class="vm-console-view">
     <div v-if="hasError">{{ $t('error-occurred') }}</div>
     <UiSpinner v-else-if="!isReady" class="spinner" />
-    <UiStatusPanel v-else-if="!isVmRunning" :image-source="monitor" :title="$t('power-on-for-console')" />
+    <UiStatusPanel v-else-if="!isVmRunning" :image-source="monitor" :title="$t('power-on-vm-for-console')" />
     <template v-else-if="vm && vmConsole">
       <MenuList horizontal>
         <MenuItem v-if="uiStore.hasUi" :icon="faArrowUpRightFromSquare" @click="openInNewTab">
diff --git a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
index 35f480f2e05..ba79255594d 100644
--- a/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
+++ b/@xen-orchestra/lite/src/views/xoa-deploy/XoaDeployView.vue
@@ -13,7 +13,7 @@
         <strong>{{ $t('check-errors') }}</strong>
         <UiRaw>{{ error }}</UiRaw>
       </div>
-      <UiButton size="medium" color="info" level="primary" :left-icon="faDownload" @click="resetValues()">
+      <UiButton size="medium" accent="info" variant="primary" :left-icon="faDownload" @click="resetValues()">
         {{ $t('xoa-deploy-retry') }}
       </UiButton>
     </template>
@@ -24,7 +24,7 @@
         <h2>{{ $t('xoa-deploy-successful') }}</h2>
         <UiIcon :icon="faCircleCheck" class="success" />
       </div>
-      <UiButton size="medium" color="info" level="primary" :left-icon="faArrowUpRightFromSquare" @click="openXoa">
+      <UiButton size="medium" accent="info" variant="primary" :left-icon="faArrowUpRightFromSquare" @click="openXoa">
         {{ $t('access-xoa') }}
       </UiButton>
     </template>
@@ -40,7 +40,7 @@
         <UiIcon :icon="faExclamationCircle" />
         {{ $t('keep-page-open') }}
       </p>
-      <UiButton size="medium" :disabled="vmRef === undefined" color="danger" level="secondary" @click="cancel()">
+      <UiButton size="medium" :disabled="vmRef === undefined" accent="danger" variant="secondary" @click="cancel()">
         {{ $t('cancel') }}
       </UiButton>
     </template>
@@ -201,14 +201,14 @@
           </div>
         </FormSection>
 
-        <ButtonGroup>
-          <UiButton size="medium" color="info" level="secondary" @click="router.back()">
+        <VtsButtonGroup>
+          <UiButton size="medium" accent="info" variant="secondary" @click="router.back()">
             {{ $t('cancel') }}
           </UiButton>
-          <UiButton size="medium" color="info" level="primary" type="submit">
+          <UiButton size="medium" accent="info" variant="primary" type="submit">
             {{ $t('deploy') }}
           </UiButton>
-        </ButtonGroup>
+        </VtsButtonGroup>
       </form>
     </UiCard>
   </div>
@@ -231,8 +231,8 @@ import { usePageTitleStore } from '@/stores/page-title.store'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
 import { useSrStore } from '@/stores/xen-api/sr.store'
 import { useXenApiStore } from '@/stores/xen-api.store'
-import ButtonGroup from '@core/components/button/ButtonGroup.vue'
-import UiButton from '@core/components/button/UiButton.vue'
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import {
   faArrowUpRightFromSquare,
diff --git a/@xen-orchestra/log/_createTransport.js b/@xen-orchestra/log/_createTransport.js
index da0667eb8c3..c2f54254674 100644
--- a/@xen-orchestra/log/_createTransport.js
+++ b/@xen-orchestra/log/_createTransport.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const { resolve } = require('./_levels')
+const { resolve } = require('./levels.js')
 const compileGlobPattern = require('./_compileGlobPattern.js')
 
 function compileFilter(filter) {
diff --git a/@xen-orchestra/log/configure.js b/@xen-orchestra/log/configure.js
index 6445086470e..a521f5e29d3 100644
--- a/@xen-orchestra/log/configure.js
+++ b/@xen-orchestra/log/configure.js
@@ -2,7 +2,7 @@
 
 const createConsoleTransport = require('./transports/console')
 const createTransport = require('./_createTransport')
-const { LEVELS, resolve } = require('./_levels')
+const { LEVELS, resolve } = require('./levels')
 
 // ===================================================================
 
diff --git a/@xen-orchestra/log/index.js b/@xen-orchestra/log/index.js
index 0c9fe157c6b..3d864b09abf 100644
--- a/@xen-orchestra/log/index.js
+++ b/@xen-orchestra/log/index.js
@@ -3,7 +3,7 @@
 const compileGlobPattern = require('./_compileGlobPattern.js')
 const createTransport = require('./transports/console')
 const Log = require('./_Log')
-const { LEVELS, resolve } = require('./_levels')
+const { LEVELS, resolve } = require('./levels.js')
 
 const symbol = typeof Symbol !== 'undefined' ? Symbol.for('@xen-orchestra/log') : '@@@xen-orchestra/log'
 if (!(symbol in global)) {
diff --git a/@xen-orchestra/log/_levels.js b/@xen-orchestra/log/levels.js
similarity index 77%
rename from @xen-orchestra/log/_levels.js
rename to @xen-orchestra/log/levels.js
index da4ab200f06..9d22d66b161 100644
--- a/@xen-orchestra/log/_levels.js
+++ b/@xen-orchestra/log/levels.js
@@ -16,10 +16,14 @@ for (const name in LEVELS) {
   NAMES[LEVELS[name]] = name
 }
 
-// resolves to the number representation of a level
-//
-// returns `defaultLevel` if invalid
-const resolve = (level, defaultLevel) => {
+/**
+ * Resolves the number representation of a level
+ *
+ * @param {number|string} level
+ * @param {number} [defaultLevel]
+ * @returns If the passed level is not valid, defaultLevel is returned
+ */
+function resolve(level, defaultLevel) {
   const type = typeof level
   if (type === 'number') {
     if (level in NAMES) {
diff --git a/@xen-orchestra/log/_levels.test.js b/@xen-orchestra/log/levels.test.js
similarity index 93%
rename from @xen-orchestra/log/_levels.test.js
rename to @xen-orchestra/log/levels.test.js
index 77eacc6cbe8..8d4fb04decd 100644
--- a/@xen-orchestra/log/_levels.test.js
+++ b/@xen-orchestra/log/levels.test.js
@@ -5,7 +5,7 @@ const assert = require('assert').strict
 
 const { forEach, isInteger } = require('lodash')
 
-const { LEVELS, NAMES, resolve } = require('./_levels')
+const { LEVELS, NAMES, resolve } = require('./levels')
 
 describe('LEVELS', () => {
   it('maps level names to their integer values', () => {
diff --git a/@xen-orchestra/log/transports/console.js b/@xen-orchestra/log/transports/console.js
index 25a2d87c69c..c5c74123393 100644
--- a/@xen-orchestra/log/transports/console.js
+++ b/@xen-orchestra/log/transports/console.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const { LEVELS, NAMES } = require('../_levels')
+const { LEVELS, NAMES } = require('../levels')
 
 const { DEBUG, ERROR, FATAL, INFO, WARN } = LEVELS
 
diff --git a/@xen-orchestra/log/transports/email.js b/@xen-orchestra/log/transports/email.js
index e660c95ee6c..53afbcdb23e 100644
--- a/@xen-orchestra/log/transports/email.js
+++ b/@xen-orchestra/log/transports/email.js
@@ -5,7 +5,7 @@ const nodemailer = require('nodemailer') // eslint-disable-line n/no-extraneous-
 const prettyFormat = require('pretty-format') // eslint-disable-line n/no-extraneous-require
 
 const { evalTemplate, required } = require('../_utils')
-const { NAMES } = require('../_levels')
+const { NAMES } = require('../levels')
 
 function createTransport({
   // transport options (https://nodemailer.com/smtp/)
diff --git a/@xen-orchestra/log/transports/syslog.js b/@xen-orchestra/log/transports/syslog.js
index 4c72f0142c5..ac1bdb1508c 100644
--- a/@xen-orchestra/log/transports/syslog.js
+++ b/@xen-orchestra/log/transports/syslog.js
@@ -6,7 +6,7 @@ const splitHost = require('split-host')
 // eslint-disable-next-line n/no-extraneous-require
 const { createClient, Facility, Severity, Transport } = require('syslog-client')
 
-const LEVELS = require('../_levels')
+const LEVELS = require('../levels')
 
 // https://github.com/paulgrove/node-syslog-client#syslogseverity
 const LEVEL_TO_SEVERITY = {
diff --git a/@xen-orchestra/web-core/lib/components/CardNumbers.vue b/@xen-orchestra/web-core/lib/components/CardNumbers.vue
deleted file mode 100644
index 90a454dc277..00000000000
--- a/@xen-orchestra/web-core/lib/components/CardNumbers.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="card-numbers" :class="size">
-    <span class="label typo" :class="labelFontClass">{{ label }}</span>
-    <div class="values" :class="size">
-      <span v-if="percentValue" class="value typo c2-semi-bold">
-        {{ percentValue }}
-      </span>
-
-      <div class="value typo" :class="valueFontClass">
-        {{ value ?? '-' }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-interface CardNumbersProps {
-  label: string
-  size: TSize
-  value?: number
-  unit?: string
-  max?: TSize extends 'small' ? number : never
-}
-
-const props = defineProps<CardNumbersProps>()
-
-const { n } = useI18n()
-
-const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
-
-const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
-
-const percentValue = computed(() => {
-  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
-    return undefined
-  }
-
-  if (props.value === undefined) {
-    return n(0, 'percent').replace('0', '-')
-  }
-
-  return n(props.value / props.max, 'percent')
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.card-numbers {
-  &.small {
-    --label-color: var(--color-neutral-txt-primary);
-  }
-
-  &.medium {
-    --label-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.card-numbers {
-  display: flex;
-  gap: 0.8rem;
-  width: fit-content;
-
-  &.medium {
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-}
-
-.label {
-  color: var(--label-color);
-}
-
-.values {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  align-items: flex-end;
-
-  &.medium {
-    align-items: flex-start;
-  }
-}
-
-.value {
-  color: var(--color-neutral-txt-primary);
-  display: flex;
-  gap: 0.2rem;
-  align-items: center;
-}
-
-.unit {
-  color: var(--color-neutral-txt-primary);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue b/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
deleted file mode 100644
index 2384ece5f0a..00000000000
--- a/@xen-orchestra/web-core/lib/components/PowerStateIcon.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { POWER_STATE } from '@core/types/power-state.type'
-import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  state: POWER_STATE
-}>()
-
-const icons = {
-  running: faPlay,
-  paused: faPause,
-  suspended: faMoon,
-  halted: faStop,
-}
-
-const icon = computed(() => icons[props.state])
-
-const className = computed(() => `state-${props.state}`)
-</script>
-
-<style lang="postcss" scoped>
-.power-state-icon {
-  &.state-suspended {
-    color: var(--color-info-txt-item);
-  }
-
-  &.state-running {
-    color: var(--color-success-item-base);
-  }
-
-  &.state-paused {
-    color: var(--color-info-item-active);
-  }
-
-  &.state-halted {
-    color: var(--color-danger-item-base);
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/UiTag.vue b/@xen-orchestra/web-core/lib/components/UiTag.vue
deleted file mode 100644
index 2d55738f29a..00000000000
--- a/@xen-orchestra/web-core/lib/components/UiTag.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<!-- v1.2 -->
-<template>
-  <span :class="[color, { light }]" class="ui-tag typo p3-regular">
-    <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
-    </slot>
-    <span class="text-ellipsis"><slot /></span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { TagColor } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  color: TagColor
-  light?: boolean
-  icon?: IconDefinition
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-tag {
-  &.primary {
-    --background-color: var(--color-info-item-base);
-    --color: var(--color-info-txt-item);
-
-    &.light {
-      --background-color: var(--color-info-background-selected);
-      --color: var(--color-info-txt-base);
-    }
-  }
-
-  &.secondary {
-    --background-color: var(--color-neutral-txt-primary);
-    --color: var(--color-neutral-background-primary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-primary);
-    }
-  }
-
-  &.success {
-    --background-color: var(--color-success-item-base);
-    --color: var(--color-success-txt-item);
-
-    &.light {
-      --background-color: var(--color-success-background-selected);
-      --color: var(--color-success-txt-base);
-    }
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-item-base);
-    --color: var(--color-warning-txt-item);
-
-    &.light {
-      --background-color: var(--color-warning-background-selected);
-      --color: var(--color-warning-txt-base);
-    }
-  }
-
-  &.danger {
-    --background-color: var(--color-danger-item-base);
-    --color: var(--color-danger-txt-item);
-
-    &.light {
-      --background-color: var(--color-danger-background-selected);
-      --color: var(--color-danger-txt-base);
-    }
-  }
-
-  &.disabled {
-    --background-color: var(--color-neutral-background-disabled);
-    --color: var(--color-neutral-txt-secondary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.8rem;
-  white-space: nowrap;
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: 0.2rem 0.8rem;
-  border-radius: 0.4rem;
-  vertical-align: middle;
-  min-width: 0;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/backdrop/Backdrop.vue b/@xen-orchestra/web-core/lib/components/backdrop/VtsBackdrop.vue
similarity index 100%
rename from @xen-orchestra/web-core/lib/components/backdrop/Backdrop.vue
rename to @xen-orchestra/web-core/lib/components/backdrop/VtsBackdrop.vue
diff --git a/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue b/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue
deleted file mode 100644
index 2ab4eeb9829..00000000000
--- a/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="backup-item">
-    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
-      {{ backup.label }}
-    </RouterLink>
-    <p v-else class="typo p3-medium">
-      {{ backup.label }}
-    </p>
-    <div class="states">
-      <BackupState v-for="(state, index) in backup.states" :key="index" :state />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BackupState from '@core/components/backup-state/BackupState.vue'
-import type { Backup } from '@core/types/backup.type'
-
-defineProps<{
-  backup: Backup
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.backup-item {
-  padding: 0.8rem 0.4rem;
-  border-top: 0.1rem solid var(--color-neutral-border);
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-
-.states {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/backup-item/VtsBackupItem.vue b/@xen-orchestra/web-core/lib/components/backup-item/VtsBackupItem.vue
new file mode 100644
index 00000000000..7b1431a867c
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/backup-item/VtsBackupItem.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="vts-backup-item">
+    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
+      {{ backup.label }}
+    </RouterLink>
+    <p v-else class="typo p3-medium">
+      {{ backup.label }}
+    </p>
+    <div class="states">
+      <VtsBackupState v-for="(state, index) in backup.states" :key="index" :state />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsBackupState, { type BackupState } from '@core/components/backup-state/VtsBackupState.vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type BackupStates = BackupState[]
+
+export type Backup = {
+  label: string
+  route?: RouteLocationRaw
+  states: BackupStates
+}
+
+defineProps<{
+  backup: Backup
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-backup-item {
+  padding: 0.8rem 0.4rem;
+  border-top: 0.1rem solid var(--color-neutral-border);
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+
+  .states {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue b/@xen-orchestra/web-core/lib/components/backup-state/VtsBackupState.vue
similarity index 85%
rename from @xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
rename to @xen-orchestra/web-core/lib/components/backup-state/VtsBackupState.vue
index 1b1c7e4556f..1bda32cfa0f 100644
--- a/@xen-orchestra/web-core/lib/components/backup-state/BackupState.vue
+++ b/@xen-orchestra/web-core/lib/components/backup-state/VtsBackupState.vue
@@ -1,15 +1,15 @@
-<!-- v1.0 -->
 <template>
-  <VtsIcon :accent="color" :icon class="backup-state" />
+  <VtsIcon :accent="color" :icon class="vts-backup-state" />
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { BackupState } from '@core/types/backup.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
+export type BackupState = 'success' | 'failure' | 'partial'
+
 type Props = {
   state: BackupState
 }
@@ -27,7 +27,7 @@ const color = computed(() => states[props.state].color)
 </script>
 
 <style lang="postcss" scoped>
-.backup-state {
+.vts-backup-state {
   font-size: 1rem;
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/button/ButtonGroup.vue b/@xen-orchestra/web-core/lib/components/button-group/VtsButtonGroup.vue
similarity index 75%
rename from @xen-orchestra/web-core/lib/components/button/ButtonGroup.vue
rename to @xen-orchestra/web-core/lib/components/button-group/VtsButtonGroup.vue
index c20e17fe80b..9547999524e 100644
--- a/@xen-orchestra/web-core/lib/components/button/ButtonGroup.vue
+++ b/@xen-orchestra/web-core/lib/components/button-group/VtsButtonGroup.vue
@@ -1,7 +1,8 @@
-<!-- v1.0 -->
 <template>
-  <div class="button-group">
-    <div class="line"><slot /></div>
+  <div class="vts-button-group">
+    <div class="line">
+      <slot />
+    </div>
     <div v-if="slots.tertiary" class="line">
       <slot name="tertiary" />
     </div>
@@ -10,13 +11,13 @@
 
 <script lang="ts" setup>
 const slots = defineSlots<{
-  default: () => void
-  tertiary?: () => void
+  default(): any
+  tertiary?(): any
 }>()
 </script>
 
 <style lang="postcss" scoped>
-.button-group {
+.vts-button-group {
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue b/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
deleted file mode 100644
index c2299b8c546..00000000000
--- a/@xen-orchestra/web-core/lib/components/button/ButtonIcon.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <VtsIcon :icon accent="current" />
-    <span v-if="dot" class="dot" />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    icon: IconDefinition
-    size?: 'small' | 'medium' | 'large'
-    color?: Color
-    disabled?: boolean
-    active?: boolean
-    dot?: boolean
-    targetScale?: number | { x: number; y: number }
-  }>(),
-  { color: 'info', size: 'medium', targetScale: 1 }
-)
-
-const cssTargetScale = computed(() => {
-  if (typeof props.targetScale === 'number') {
-    return `scale(${props.targetScale})`
-  }
-
-  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.button-icon {
-  &.info {
-    & {
-      --color: var(--color-info-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-info-txt-base);
-      --background-color: var(--color-info-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-info-txt-hover);
-      --background-color: var(--color-info-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-info-txt-active);
-      --background-color: var(--color-info-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &.success {
-    & {
-      --color: var(--color-success-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-success-txt-base);
-      --background-color: var(--color-success-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-success-txt-hover);
-      --background-color: var(--color-success-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-success-txt-active);
-      --background-color: var(--color-success-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &.warning {
-    & {
-      --color: var(--color-warning-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-warning-txt-base);
-      --background-color: var(--color-warning-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-warning-txt-hover);
-      --background-color: var(--color-warning-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-warning-txt-active);
-      --background-color: var(--color-warning-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &:is(.danger, .error) {
-    & {
-      --color: var(--color-danger-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-warning-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-danger-txt-base);
-      --background-color: var(--color-danger-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-danger-txt-hover);
-      --background-color: var(--color-danger-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-danger-txt-active);
-      --background-color: var(--color-danger-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-}
-
-/* SIZE VARIANTS */
-.button-icon {
-  &.small {
-    --size: 1.6rem;
-    --font-size: 1.2rem;
-    --dot-size: 0.4rem;
-    --dot-offset: 0.2rem;
-  }
-
-  &.medium {
-    --size: 2.4rem;
-    --font-size: 1.6rem;
-    --dot-size: 0.5rem;
-    --dot-offset: 0.4rem;
-  }
-
-  &.large {
-    --size: 4rem;
-    --font-size: 2.4rem;
-    --dot-size: 0.8rem;
-    --dot-offset: 0.8rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.button-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  padding: 0;
-  border-radius: 0.2rem;
-  width: var(--size);
-  height: var(--size);
-  font-size: var(--font-size);
-  color: var(--color);
-  background-color: var(--background-color);
-  position: relative;
-  cursor: pointer;
-  outline: none;
-
-  &:is(:disabled, .disabled) {
-    cursor: not-allowed;
-  }
-
-  .dot {
-    position: absolute;
-    display: block;
-    width: var(--dot-size);
-    height: var(--dot-size);
-    border-radius: 50%;
-    background-color: var(--dot-color);
-    top: var(--dot-offset);
-    right: var(--dot-offset);
-  }
-}
-
-/*
- * Increase the size of the clickable area,
- * without changing the padding of the ButtonIcon component
- */
-.button-icon::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: v-bind(cssTargetScale);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/button/UiButton.vue
deleted file mode 100644
index 1472db0b631..00000000000
--- a/@xen-orchestra/web-core/lib/components/button/UiButton.vue
+++ /dev/null
@@ -1,470 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
-    <slot />
-    <VtsIcon :icon="rightIcon" accent="current" class="icon" fixed-width />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
-import type { ButtonLevel, ButtonSize } from '@core/types/button.type'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    level: ButtonLevel
-    color: Color
-    size: ButtonSize
-    busy?: boolean
-    disabled?: boolean
-    leftIcon?: IconDefinition
-    rightIcon?: IconDefinition
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
-
-const isDisabled = useContext(DisabledContext, () => props.disabled)
-
-const fontClasses = {
-  small: 'typo p3-medium',
-  medium: 'typo h6-medium',
-  large: 'typo h3-semi-bold',
-}
-
-const className = computed(() => {
-  return [
-    props.color,
-    props.level,
-    props.size,
-    fontClasses[props.size],
-    {
-      busy: props.busy,
-      disabled: isDisabled.value,
-    },
-  ]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-button {
-  &.primary {
-    &.info {
-      --background-color: var(--color-info-item-base);
-      --border-color: var(--color-info-item-base);
-      --color: var(--color-info-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-info-item-hover);
-        --border-color: var(--color-info-item-hover);
-        --color: var(--color-info-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-info-item-active);
-        --border-color: var(--color-info-item-active);
-        --color: var(--color-info-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-info-item-disabled);
-        --border-color: var(--color-info-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-info-item-base);
-        --border-color: var(--color-info-item-base);
-        --color: var(--color-info-txt-item);
-      }
-    }
-
-    &.success {
-      --background-color: var(--color-success-item-base);
-      --border-color: var(--color-success-item-base);
-      --color: var(--color-success-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-success-item-hover);
-        --border-color: var(--color-success-item-hover);
-        --color: var(--color-success-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-success-item-active);
-        --border-color: var(--color-success-item-active);
-        --color: var(--color-success-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-success-item-disabled);
-        --border-color: var(--color-success-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-success-item-base);
-        --border-color: var(--color-success-item-base);
-        --color: var(--color-success-txt-item);
-      }
-    }
-
-    &.warning {
-      --background-color: var(--color-warning-item-base);
-      --border-color: var(--color-warning-item-base);
-      --color: var(--color-warning-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-warning-item-hover);
-        --border-color: var(--color-warning-item-hover);
-        --color: var(--color-warning-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-warning-item-active);
-        --border-color: var(--color-warning-item-active);
-        --color: var(--color-warning-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-warning-item-disabled);
-        --border-color: var(--color-warning-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-warning-item-base);
-        --border-color: var(--color-warning-item-base);
-        --color: var(--color-warning-txt-item);
-      }
-    }
-
-    &.danger {
-      --background-color: var(--color-danger-item-base);
-      --border-color: var(--color-danger-item-base);
-      --color: var(--color-danger-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-danger-item-hover);
-        --border-color: var(--color-danger-item-hover);
-        --color: var(--color-danger-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-danger-item-active);
-        --border-color: var(--color-danger-item-active);
-        --color: var(--color-danger-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-danger-item-disabled);
-        --border-color: var(--color-danger-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-danger-item-base);
-        --border-color: var(--color-danger-item-base);
-        --color: var(--color-danger-txt-item);
-      }
-    }
-  }
-
-  &.secondary {
-    &.info {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-info-item-base);
-      --color: var(--color-info-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-info-item-hover);
-        --color: var(--color-info-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-info-item-active);
-        --color: var(--color-info-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-info-item-base);
-        --color: var(--color-info-txt-base);
-      }
-    }
-
-    &.success {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-success-txt-base);
-      --color: var(--color-success-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-hover);
-        --color: var(--color-success-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-active);
-        --color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-base);
-        --color: var(--color-success-txt-base);
-      }
-    }
-
-    &.warning {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-warning-txt-base);
-      --color: var(--color-warning-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-hover);
-        --color: var(--color-warning-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-active);
-        --color: var(--color-warning-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-base);
-        --color: var(--color-warning-txt-base);
-      }
-    }
-
-    &.danger {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-danger-txt-base);
-      --color: var(--color-danger-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-hover);
-        --color: var(--color-danger-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-active);
-        --color: var(--color-danger-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-base);
-        --color: var(--color-danger-txt-base);
-      }
-    }
-  }
-
-  &.tertiary {
-    &.info {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-info-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-info-background-hover);
-        --border-color: var(--color-info-background-hover);
-        --color: var(--color-info-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-info-background-active);
-        --border-color: var(--color-info-background-active);
-        --color: var(--color-info-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-info-background-selected);
-        --border-color: var(--color-info-background-selected);
-        --color: var(--color-info-txt-base);
-      }
-    }
-
-    &.success {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-success-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-success-background-hover);
-        --border-color: var(--color-success-background-hover);
-        --color: var(--color-success-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-success-background-active);
-        --border-color: var(--color-success-background-active);
-        --color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-success-background-selected);
-        --border-color: var(--color-success-background-selected);
-        --color: var(--color-success-txt-base);
-      }
-    }
-
-    &.warning {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-warning-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-warning-background-hover);
-        --border-color: var(--color-warning-background-hover);
-        --color: var(--color-warning-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-warning-background-active);
-        --border-color: var(--color-warning-background-active);
-        --color: var(--color-warning-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-warning-background-selected);
-        --border-color: var(--color-warning-background-selected);
-        --color: var(--color-warning-txt-base);
-      }
-    }
-
-    &.danger {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-danger-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-danger-background-hover);
-        --border-color: var(--color-danger-background-hover);
-        --color: var(--color-danger-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-danger-background-active);
-        --border-color: var(--color-danger-background-active);
-        --color: var(--color-danger-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-danger-background-selected);
-        --border-color: var(--color-danger-background-selected);
-        --color: var(--color-danger-txt-base);
-      }
-    }
-  }
-}
-
-/* SIZE VARIANTS */
-.ui-button {
-  &.small {
-    --padding: 0.4rem 0.8rem;
-    --border-radius: 0.2rem;
-  }
-
-  &.medium {
-    --padding: 0.8rem 1.6rem;
-    --border-radius: 0.4rem;
-  }
-
-  &.large {
-    --padding: 1.6rem 2.4rem;
-    --border-radius: 0.8rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  vertical-align: middle;
-  gap: 0.75em;
-  border-width: 0.1rem;
-  outline: none;
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: solid;
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: var(--padding);
-
-  &.busy,
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.icon {
-  font-size: 0.8em;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/card/CardTitle.vue b/@xen-orchestra/web-core/lib/components/card/CardTitle.vue
deleted file mode 100644
index 064fcafc31b..00000000000
--- a/@xen-orchestra/web-core/lib/components/card/CardTitle.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="card-title">
-    <div class="main-content">
-      <div class="title typo h6-medium">
-        <slot />
-      </div>
-
-      <div v-if="$slots.info" class="info typo h7-semi-bold">
-        <slot name="info" />
-      </div>
-    </div>
-    <p v-if="$slots.description" class="description typo p3-regular">
-      <slot name="description" />
-    </p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineSlots<{
-  default: () => void
-  info: () => void
-  description: () => void
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.card-title {
-  display: flex;
-  flex-direction: column;
-}
-
-.main-content {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  gap: 1.6rem;
-  color: var(--color-neutral-txt-primary);
-}
-
-.info {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  color: var(--color-info-txt-base);
-}
-
-.description {
-  color: var(--color-neutral-txt-secondary);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue b/@xen-orchestra/web-core/lib/components/cell-object/VtsCellObject.vue
similarity index 72%
rename from @xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
rename to @xen-orchestra/web-core/lib/components/cell-object/VtsCellObject.vue
index 80a16f45fd3..87a0eba3de9 100644
--- a/@xen-orchestra/web-core/lib/components/cell-object/CellObject.vue
+++ b/@xen-orchestra/web-core/lib/components/cell-object/VtsCellObject.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- WIP -->
 <template>
-  <td class="cell-object">
+  <td class="vts-cell-object">
     <div class="data">
       <slot />
       <template v-if="id !== undefined">
@@ -10,9 +10,9 @@
         <UiButton
           v-if="isSupported && copiableId"
           :left-icon="faCopy"
-          level="secondary"
+          variant="secondary"
           size="small"
-          :color="copied ? 'success' : 'info'"
+          :accent="copied ? 'success' : 'info'"
           @click="copy(id)"
         >
           {{ copied ? $t('core.copied') : $t('core.copy-id') }}
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiButton from '@core/components/button/UiButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCopy } from '@fortawesome/free-solid-svg-icons'
 import { useClipboard } from '@vueuse/core'
@@ -37,18 +37,18 @@ const { isSupported, copy, copied } = useClipboard()
 </script>
 
 <style lang="postcss" scoped>
-.cell-object {
+.vts-cell-object {
   padding: 0.8rem;
   border: 0.1rem solid var(--color-neutral-border);
-}
 
-.data {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-}
+  .data {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
 
-.id {
-  color: var(--color-neutral-txt-secondary);
+  .id {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue b/@xen-orchestra/web-core/lib/components/cell-text/VtsCellText.vue
similarity index 75%
rename from @xen-orchestra/web-core/lib/components/cell-text/CellText.vue
rename to @xen-orchestra/web-core/lib/components/cell-text/VtsCellText.vue
index 0f32bd8419b..7fdb439084b 100644
--- a/@xen-orchestra/web-core/lib/components/cell-text/CellText.vue
+++ b/@xen-orchestra/web-core/lib/components/cell-text/VtsCellText.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- WIP -->
 <template>
-  <td class="cell-text">
+  <td class="vts-cell-text">
     <div class="data typo p2-regular">
       <span v-tooltip class="text-ellipsis">
         <slot />
@@ -22,19 +22,19 @@ const slots = defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.cell-text {
+.vts-cell-text {
   padding: 0.8rem;
   border: 0.1rem solid var(--color-neutral-border);
   color: var(--color-neutral-txt-primary);
-}
 
-.data {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-}
+  .data {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
 
-.info {
-  color: var(--color-neutral-txt-secondary);
+  .info {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue b/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
deleted file mode 100644
index 7a009a0cbc1..00000000000
--- a/@xen-orchestra/web-core/lib/components/chip/ChipIcon.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <!-- TODO: replace with correct color typing when available -->
-  <VtsIcon :class="{ disabled }" :accent="color" :icon class="chip-icon" fixed-width />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  color: Color
-  icon?: IconDefinition
-  disabled?: boolean
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.chip-icon {
-  color: var(--color-neutral-txt-secondary);
-
-  &.disabled {
-    color: var(--color-info-txt-item);
-
-    &.info {
-      color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/chip/ChipRemoveIcon.vue b/@xen-orchestra/web-core/lib/components/chip/ChipRemoveIcon.vue
deleted file mode 100644
index 00ca478c3ac..00000000000
--- a/@xen-orchestra/web-core/lib/components/chip/ChipRemoveIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <ButtonIcon :color :icon="faXmark" class="chip-remove-icon" size="small" />
-</template>
-
-<script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import type { Color } from '@core/types/color.type'
-import { faXmark } from '@fortawesome/free-solid-svg-icons'
-
-defineProps<{
-  color: Color
-}>()
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/chip/UiChip.vue b/@xen-orchestra/web-core/lib/components/chip/UiChip.vue
deleted file mode 100644
index 2b01f0a9597..00000000000
--- a/@xen-orchestra/web-core/lib/components/chip/UiChip.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <span :class="[color, { disabled }]" class="ui-chip typo p3-regular" @click="emit('edit')">
-    <ChipIcon :color :disabled :icon />
-    <span class="content text-ellipsis">
-      <slot />
-    </span>
-    <ChipRemoveIcon v-if="!disabled" :color @click.stop="emit('remove')" />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import ChipIcon from '@core/components/chip/ChipIcon.vue'
-import ChipRemoveIcon from '@core/components/chip/ChipRemoveIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-withDefaults(
-  defineProps<{
-    icon?: IconDefinition
-    color?: Color
-    disabled?: boolean
-  }>(),
-  { color: 'info' }
-)
-
-const emit = defineEmits<{
-  edit: []
-  remove: []
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-chip {
-  --color: var(--color-neutral-txt-primary);
-
-  &.disabled {
-    --color: var(--color-info-txt-item);
-
-    &.info {
-      --color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/* BACKGROUND COLOR VARIANTS */
-.ui-chip {
-  &.info {
-    --background-color: var(--color-info-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-info-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-info-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-neutral-background-secondary);
-    }
-  }
-
-  &.success {
-    --background-color: var(--color-success-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-success-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-success-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-success-item-disabled);
-    }
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-warning-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-warning-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-warning-item-disabled);
-    }
-  }
-
-  &:is(.danger, .error) {
-    --background-color: var(--color-danger-background-selected);
-
-    &:is(:hover, .hover, :focus-visible) {
-      --background-color: var(--color-danger-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --background-color: var(--color-danger-background-active);
-    }
-
-    &.disabled {
-      --background-color: var(--color-danger-item-disabled);
-    }
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-chip {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 0.4rem 0.8rem;
-  border-radius: 10rem;
-  color: var(--color);
-  background-color: var(--background-color);
-  cursor: pointer;
-  min-height: 2.4rem;
-  vertical-align: middle;
-  white-space: nowrap;
-  min-width: 0;
-
-  &.disabled {
-    pointer-events: none;
-  }
-
-  .content {
-    line-height: 1.6rem;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/console/RemoteConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
similarity index 86%
rename from @xen-orchestra/web-core/lib/components/console/RemoteConsole.vue
rename to @xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
index 6879118d9be..e2d06b82e0d 100644
--- a/@xen-orchestra/web-core/lib/components/console/RemoteConsole.vue
+++ b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
     <div ref="consoleContainer" class="console" />
   </div>
 </template>
@@ -96,26 +96,20 @@ const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
-.remote-console {
-  --padding: 0.8rem;
-  --height: 80rem;
-  --width: 100%;
+.vts-remote-console {
+  padding: 0.8rem;
+  height: 80rem;
+  width: 100%;
+  max-width: 100%;
 
   &.mobile {
-    --padding: 0.8rem 0;
-    --height: 100%;
-    --width: 95vw;
+    padding: 0.8rem 0;
+    height: 100%;
+    width: 95vw;
   }
-}
-
-.remote-console {
-  padding: var(--padding);
-  height: var(--height);
-  width: var(--width);
-  max-width: 100%;
-}
 
-.console {
-  height: 100%;
+  .console {
+    height: 100%;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue b/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue
deleted file mode 100644
index 160dfbec10d..00000000000
--- a/@xen-orchestra/web-core/lib/components/counter/VtsCounter.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<!-- v2 -->
-<template>
-  <span :class="classNames" class="vts-counter">
-    <span class="inner">{{ value }}</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { toVariants } from '@core/utils/to-variants.util'
-import { computed } from 'vue'
-
-type CounterAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
-type CounterVariant = 'primary' | 'secondary'
-type CounterSize = 'small' | 'medium'
-
-const props = defineProps<{
-  value: number | string
-  accent: CounterAccent
-  variant: CounterVariant
-  size: CounterSize
-}>()
-
-const typoClasses = {
-  small: 'typo p4-semi-bold',
-  medium: 'typo p1-medium',
-}
-
-const classNames = computed(() => {
-  return [
-    typoClasses[props.size],
-    toVariants({
-      accent: props.accent,
-      variant: props.variant,
-      size: props.size,
-    }),
-  ]
-})
-</script>
-
-<style lang="postcss" scoped>
-/*
-VARIANT + ACCENT
---vts-counter--background-color
---vts-counter--color
-*/
-.vts-counter {
-  &.variant--primary {
-    &.accent--info {
-      --vts-counter--background-color: var(--color-info-item-base);
-      --vts-counter--color: var(--color-info-txt-item);
-    }
-
-    &.accent--neutral {
-      --vts-counter--background-color: var(--color-neutral-txt-primary);
-      --vts-counter--color: var(--color-neutral-background-primary);
-    }
-
-    &.accent--success {
-      --vts-counter--background-color: var(--color-success-item-base);
-      --vts-counter--color: var(--color-success-txt-item);
-    }
-
-    &.accent--warning {
-      --vts-counter--background-color: var(--color-warning-item-base);
-      --vts-counter--color: var(--color-warning-txt-item);
-    }
-
-    &.accent--danger {
-      --vts-counter--background-color: var(--color-danger-item-base);
-      --vts-counter--color: var(--color-danger-txt-item);
-    }
-
-    &.accent--muted {
-      --vts-counter--background-color: var(--color-neutral-background-disabled);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-  }
-
-  &.variant--secondary {
-    &.accent--info {
-      --vts-counter--background-color: var(--color-info-background-selected);
-      --vts-counter--color: var(--color-info-txt-base);
-    }
-
-    &.accent--neutral {
-      --vts-counter--background-color: var(--color-neutral-background-secondary);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-
-    &.accent--success {
-      --vts-counter--background-color: var(--color-success-background-selected);
-      --vts-counter--color: var(--color-success-txt-base);
-    }
-
-    &.accent--warning {
-      --vts-counter--background-color: var(--color-warning-background-selected);
-      --vts-counter--color: var(--color-warning-txt-base);
-    }
-
-    &.accent--danger {
-      --vts-counter--background-color: var(--color-danger-background-selected);
-      --vts-counter--color: var(--color-danger-txt-base);
-    }
-
-    &.accent--muted {
-      --vts-counter--background-color: var(--color-neutral-background-secondary);
-      --vts-counter--color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/*
-SIZE
---vts-counter--height
---vts-counter--padding
-*/
-.vts-counter {
-  &.size--small {
-    --vts-counter--height: 1.5rem;
-    --vts-counter--padding: 0 0.4rem;
-  }
-
-  &.size--medium {
-    --vts-counter--height: 2.4rem;
-    --vts-counter--padding: 0 0.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.vts-counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-transform: lowercase;
-  color: var(--vts-counter--color);
-  height: var(--vts-counter--height);
-  min-width: var(--vts-counter--height);
-  padding: var(--vts-counter--padding);
-  background-color: var(--vts-counter--background-color);
-  border-radius: calc(var(--vts-counter--height) / 2);
-
-  .inner {
-    line-height: 0;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/divider/Divider.vue b/@xen-orchestra/web-core/lib/components/divider/VtsDivider.vue
similarity index 100%
rename from @xen-orchestra/web-core/lib/components/divider/Divider.vue
rename to @xen-orchestra/web-core/lib/components/divider/VtsDivider.vue
diff --git a/@xen-orchestra/web-core/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue b/@xen-orchestra/web-core/lib/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue
similarity index 52%
rename from @xen-orchestra/web-core/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue
rename to @xen-orchestra/web-core/lib/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue
index cd80efd80cc..3804da7eb97 100644
--- a/@xen-orchestra/web-core/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue
+++ b/@xen-orchestra/web-core/lib/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="donut-chart-with-legend">
-    <DonutChart :icon :segments />
-    <LegendGroup :items="segments" :title />
+  <div class="vts-donut-chart-with-legend">
+    <UiDonutChart :icon :segments />
+    <VtsLegendGroup :items="segments" :title />
   </div>
 </template>
 
 <script lang="ts" setup>
-import DonutChart, { type DonutChartProps } from '@core/components/donut-chart/DonutChart.vue'
-import LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+import VtsLegendGroup, { type LegendGroupProps } from '@core/components/legend-group/VtsLegendGroup.vue'
+import UiDonutChart, { type DonutChartProps } from '@core/components/ui/donut-chart/UiDonutChart.vue'
 
 export type DonutChartWithLegendProps = {
   segments: (DonutChartProps['segments'][number] & LegendGroupProps['items'][number])[]
@@ -19,7 +19,7 @@ defineProps<DonutChartWithLegendProps>()
 </script>
 
 <style lang="postcss" scoped>
-.donut-chart-with-legend {
+.vts-donut-chart-with-legend {
   display: flex;
   align-items: center;
   gap: 3.2rem;
diff --git a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
index dc76ec4bc3b..837c93009bc 100644
--- a/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
+++ b/@xen-orchestra/web-core/lib/components/dropdown/DropdownItem.vue
@@ -1,6 +1,5 @@
 <template>
   <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
-    <!-- TODO: replace with correct color typing when available -->
     <VtsIcon v-if="checkbox" :accent="color" :icon="selected ? faSquareCheck : faSquare" />
     <slot name="icon">
       <VtsIcon :icon accent="current" />
@@ -14,9 +13,8 @@
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsIcon, { type IconAccent } from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Color } from '@core/types/color.type'
 import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faSquare } from '@fortawesome/free-regular-svg-icons'
@@ -25,7 +23,7 @@ import { computed, inject } from 'vue'
 
 defineProps<{
   arrow?: boolean
-  color: Color
+  color: IconAccent
   disabled?: boolean
   icon?: IconDefinition
   info?: string
diff --git a/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue b/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
index f79d75b37d5..056991b8e95 100644
--- a/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
@@ -1,6 +1,6 @@
 <!-- WIP -->
 <template>
-  <UiSpinner v-if="busy" class="vts-icon" />
+  <UiLoader v-if="busy" class="vts-icon" />
   <div v-else-if="overlayIcon !== undefined && icon !== undefined" class="vts-icon stacked" :class="accent">
     <FontAwesomeIcon :fixed-width="fixedWidth" :icon />
     <FontAwesomeIcon class="overlay-icon" :fixed-width="fixedWidth" :icon="overlayIcon" />
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-export type IconAccent = 'current' | 'info' | 'success' | 'warning' | 'danger'
+export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
 
 defineProps<{
   accent: IconAccent
@@ -25,71 +25,67 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-/*
-ACCENT
---vts-icon--color
---vts-icon__overlay-icon--color
-*/
 .vts-icon {
-  &.current {
-    --vts-icon--color: currentColor;
+  &.stacked {
+    display: inline-grid;
+    place-items: center;
+
+    svg {
+      grid-area: 1 / -1;
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-neutral-background-primary);
+      &:last-child {
+        font-size: 0.75rem;
+      }
     }
   }
 
-  &.info {
-    --vts-icon--color: var(--color-info-item-base);
+  /* COLOR VARIANTS */
+
+  &.current {
+    color: currentColor;
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-info-txt-item);
+    .overlay-icon {
+      color: var(--color-neutral-background-primary);
     }
   }
 
-  &.success {
-    --vts-icon--color: var(--color-success-item-base);
+  &.brand {
+    color: var(--color-info-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-success-txt-item);
+    .overlay-icon {
+      color: var(--color-info-txt-item);
     }
   }
 
-  &.warning {
-    --vts-icon--color: var(--color-warning-item-base);
+  &.info {
+    color: var(--color-info-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-warning-txt-item);
+    .overlay-icon {
+      color: var(--color-info-txt-item);
     }
   }
 
-  &.danger {
-    --vts-icon--color: var(--color-danger-item-base);
+  &.success {
+    color: var(--color-success-item-base);
 
-    &.stacked {
-      --vts-icon__overlay-icon--color: var(--color-danger-txt-item);
+    .overlay-icon {
+      color: var(--color-success-txt-item);
     }
   }
-}
 
-/* IMPLEMENTATION */
-.vts-icon {
-  color: var(--vts-icon--color);
-
-  &.stacked {
-    display: inline-grid;
-    place-items: center;
+  &.warning {
+    color: var(--color-warning-item-base);
 
     .overlay-icon {
-      color: var(--vts-icon__overlay-icon--color);
+      color: var(--color-warning-txt-item);
     }
+  }
 
-    svg {
-      grid-area: 1 / -1;
+  &.danger {
+    color: var(--color-danger-item-base);
 
-      &:last-child {
-        font-size: 0.75rem;
-      }
+    .overlay-icon {
+      color: var(--color-danger-txt-item);
     }
   }
 }
diff --git a/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue b/@xen-orchestra/web-core/lib/components/layout/VtsLayoutSidebar.vue
similarity index 68%
rename from @xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue
rename to @xen-orchestra/web-core/lib/components/layout/VtsLayoutSidebar.vue
index f015642ffbf..d1ed7e2da55 100644
--- a/@xen-orchestra/web-core/lib/components/layout/LayoutSidebar.vue
+++ b/@xen-orchestra/web-core/lib/components/layout/VtsLayoutSidebar.vue
@@ -1,8 +1,7 @@
-<!-- v1.0 -->
 <template>
   <div
     :class="{ locked: sidebar.isLocked && !ui.isMobile, expanded: sidebar.isExpanded, mobile: ui.isMobile }"
-    class="layout-sidebar"
+    class="vts-layout-sidebar"
   >
     <div v-if="!ui.isMobile" class="lock">
       <UiButtonIcon
@@ -10,17 +9,19 @@
           content: sidebar.isLocked ? $t('core.sidebar.unlock') : $t('core.sidebar.lock'),
           placement: 'right',
         }"
+        accent="info"
+        size="medium"
         :icon="sidebar.isLocked ? faLock : faLockOpen"
         @click="sidebar.toggleLock()"
       />
     </div>
-    <div v-if="$slots.header">
+    <div v-if="slots.header">
       <slot name="header" />
     </div>
     <div class="content">
       <slot />
     </div>
-    <div v-if="$slots.footer">
+    <div v-if="slots.footer">
       <slot name="footer" />
     </div>
     <div
@@ -33,16 +34,16 @@
 </template>
 
 <script lang="ts" setup>
-import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
 
-defineSlots<{
-  header(): any
+const slots = defineSlots<{
   default(): any
-  footer(): any
+  header?(): any
+  footer?(): any
 }>()
 
 const sidebar = useSidebarStore()
@@ -50,7 +51,7 @@ const ui = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
-.layout-sidebar {
+.vts-layout-sidebar {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -70,31 +71,31 @@ const ui = useUiStore()
     position: absolute;
     transform: translateX(v-bind('sidebar.cssOffset'));
   }
-}
 
-.lock {
-  text-align: right;
-  padding: 0.8rem;
-}
+  .lock {
+    text-align: right;
+    padding: 0.8rem;
+  }
 
-.content {
-  flex: 1;
-  overflow: auto;
-}
+  .content {
+    flex: 1;
+    overflow: auto;
+  }
 
-.resize-handle {
-  position: absolute;
-  inset: 0 0 0 auto;
-  width: 0.8rem;
-  background-color: transparent;
-  cursor: col-resize;
-  transition: background-color 0.4s;
-  user-select: none;
+  .resize-handle {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 0.8rem;
+    background-color: transparent;
+    cursor: col-resize;
+    transition: background-color 0.4s;
+    user-select: none;
 
-  &:hover,
-  &.active {
-    background-color: var(--color-neutral-border);
-    transition: background-color 0.05s;
+    &:hover,
+    &.active {
+      background-color: var(--color-neutral-border);
+      transition: background-color 0.05s;
+    }
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/legend-group/VtsLegendGroup.vue b/@xen-orchestra/web-core/lib/components/legend-group/VtsLegendGroup.vue
new file mode 100644
index 00000000000..45194e2903b
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/legend-group/VtsLegendGroup.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="vts-legend-group">
+    <UiLegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
+      {{ title.label }}
+    </UiLegendTitle>
+    <VtsLegendList class="list">
+      <UiLegend
+        v-for="item in items"
+        :key="item.label"
+        :accent="item.accent"
+        :tooltip="item.tooltip"
+        :unit="item.unit"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </UiLegend>
+    </VtsLegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend, { type LegendItemProps } from '@core/components/ui/legend/UiLegend.vue'
+import UiLegendTitle, { type LegendTitleProps } from '@core/components/ui/legend-title/UiLegendTitle.vue'
+
+export type LegendGroupProps = {
+  items: (LegendItemProps & { label: string })[]
+  title?: LegendTitleProps & { label: string }
+}
+
+defineProps<LegendGroupProps>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-legend-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+
+  .list {
+    padding-left: 1.6rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendList.vue b/@xen-orchestra/web-core/lib/components/legend-list/VtsLegendList.vue
similarity index 81%
rename from @xen-orchestra/web-core/lib/components/legend/LegendList.vue
rename to @xen-orchestra/web-core/lib/components/legend-list/VtsLegendList.vue
index 8cdbe0cd000..099f9ef3906 100644
--- a/@xen-orchestra/web-core/lib/components/legend/LegendList.vue
+++ b/@xen-orchestra/web-core/lib/components/legend-list/VtsLegendList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="legend-list" :class="{ horizontal }">
+  <ul class="vts-legend-list" :class="{ horizontal }">
     <slot />
   </ul>
 </template>
@@ -15,7 +15,7 @@ defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.legend-list {
+.vts-legend-list {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendGroup.vue b/@xen-orchestra/web-core/lib/components/legend/LegendGroup.vue
deleted file mode 100644
index 00c402f2860..00000000000
--- a/@xen-orchestra/web-core/lib/components/legend/LegendGroup.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="legend-group">
-    <LegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
-      {{ title.label }}
-    </LegendTitle>
-    <LegendList class="list">
-      <LegendItem
-        v-for="item in items"
-        :key="item.label"
-        :color="item.color"
-        :tooltip="item.tooltip"
-        :unit="item.unit"
-        :value="item.value"
-      >
-        {{ item.label }}
-      </LegendItem>
-    </LegendList>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
-import LegendList from '@core/components/legend/LegendList.vue'
-import LegendTitle, { type LegendTitleProps } from '@core/components/LegendTitle.vue'
-
-export type LegendGroupProps = {
-  items: (LegendItemProps & { label: string })[]
-  title?: LegendTitleProps & { label: string }
-}
-
-defineProps<LegendGroupProps>()
-</script>
-
-<style lang="postcss" scoped>
-.legend-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-
-.list {
-  padding-left: 1.6rem;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue b/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
deleted file mode 100644
index c976a7bdac2..00000000000
--- a/@xen-orchestra/web-core/lib/components/legend/LegendItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <li :class="color" class="legend-item">
-    <VtsIcon :icon="faCircle" accent="info" class="circle-icon" />
-    <span class="label typo p3-regular"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
-    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
-
-export type LegendItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
-
-export type LegendItemProps = {
-  color: LegendItemColor
-  value?: number
-  unit?: string
-  tooltip?: string
-}
-
-const props = defineProps<LegendItemProps>()
-
-defineSlots<{
-  default(): void
-}>()
-
-const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.legend-item {
-  &.primary {
-    --circle-color: var(--color-info-item-base);
-  }
-
-  &.secondary {
-    --circle-color: var(--color-neutral-txt-primary);
-  }
-
-  &.success {
-    --circle-color: var(--color-success-item-base);
-  }
-
-  &.warning {
-    --circle-color: var(--color-warning-item-base);
-  }
-
-  &.danger {
-    --circle-color: var(--color-danger-item-base);
-  }
-
-  &.disabled {
-    --circle-color: var(--color-neutral-background-disabled);
-  }
-}
-
-/* IMPLEMENTATION */
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-}
-
-.circle-icon {
-  font-size: 0.8rem;
-  color: var(--circle-color);
-}
-
-.tooltip-icon {
-  font-size: 1.2rem;
-}
-
-.label {
-  color: var(--color-neutral-txt-primary);
-}
-
-.value-and-unit {
-  color: var(--color-neutral-txt-secondary);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue b/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
deleted file mode 100644
index b347a6a9945..00000000000
--- a/@xen-orchestra/web-core/lib/components/object-link/ObjectLink.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
-    <span class="icon">
-      <slot name="icon">
-        <VtsIcon :icon accent="current" />
-      </slot>
-    </span>
-    <span v-tooltip class="content text-ellipsis">
-      <slot />
-    </span>
-  </RouterLink>
-  <span v-else :class="{ disabled }" class="object-link typo p3-medium">
-    <span class="icon">
-      <slot name="icon">
-        <VtsIcon :icon accent="current" />
-      </slot>
-    </span>
-    <slot />
-  </span>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { type RouteLocationRaw } from 'vue-router'
-
-defineProps<{
-  route?: RouteLocationRaw
-  disabled?: boolean
-  icon?: IconDefinition
-}>()
-
-defineSlots<{
-  default: () => any
-  icon: () => any
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.object-link {
-  --color: var(--color-info-txt-base);
-  --border-color: var(--color-info-txt-base);
-
-  &.is-link {
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-info-txt-hover);
-      --border-color: var(--color-info-txt-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-info-txt-active);
-      --border-color: var(--color-info-txt-active);
-    }
-  }
-
-  &.disabled {
-    --color: var(--color-neutral-txt-secondary);
-    --border-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.object-link {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  color: var(--color);
-  gap: 1rem;
-  border-top: 0.1rem solid transparent;
-  border-bottom: 0.1rem solid var(--border-color);
-  line-height: 1;
-  padding-block: 0.5rem;
-  text-decoration: none;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.icon {
-  color: var(--color-neutral-txt-primary);
-  font-size: 0.8rem;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar-with-legend/StackedBarWithLegend.vue b/@xen-orchestra/web-core/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue
similarity index 53%
rename from @xen-orchestra/web-core/lib/components/stacked-bar-with-legend/StackedBarWithLegend.vue
rename to @xen-orchestra/web-core/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue
index b42ff618380..f56193142f2 100644
--- a/@xen-orchestra/web-core/lib/components/stacked-bar-with-legend/StackedBarWithLegend.vue
+++ b/@xen-orchestra/web-core/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="stacked-bar-with-legend">
-    <StackedBar :segments :max-value="maxValue" />
-    <LegendList class="list" :horizontal="uiStore.isDesktop">
-      <LegendItem
+  <div class="vts-stacked-bar-with-legend">
+    <UiStackedBar :segments :max-value="maxValue" />
+    <VtsLegendList class="list" :horizontal="uiStore.isDesktop">
+      <UiLegend
         v-for="segment in segments"
         :key="segment.label"
-        :color="segment.color"
+        :accent="segment.accent"
         :tooltip="segment.tooltip"
         :unit="segment.unit"
         :value="segment.value"
       >
         {{ segment.label }}
-      </LegendItem>
-    </LegendList>
+      </UiLegend>
+    </VtsLegendList>
   </div>
 </template>
 
 <script setup lang="ts">
-import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
-import LegendList from '@core/components/legend/LegendList.vue'
-import StackedBar, { type StackedBarProps } from '@core/components/stacked-bar/StackedBar.vue'
+import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
+import UiLegend, { type LegendItemProps } from '@core/components/ui/legend/UiLegend.vue'
+import UiStackedBar, { type StackedBarProps } from '@core/components/ui/stacked-bar/UiStackedBar.vue'
 import { useUiStore } from '@core/stores/ui.store'
 
 type Segment = StackedBarProps['segments'][number] & LegendItemProps & { label: string }
@@ -35,13 +35,13 @@ const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
-.stacked-bar-with-legend {
+.vts-stacked-bar-with-legend {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-}
 
-.list {
-  margin-inline-start: auto;
+  .list {
+    margin-inline-start: auto;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/ComingSoonHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/ComingSoonHero.vue
deleted file mode 100644
index 5b5f845ca01..00000000000
--- a/@xen-orchestra/web-core/lib/components/state-hero/ComingSoonHero.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <StateHero :type class="coming-soon-hero" image="under-construction">
-    {{ $t('coming-soon') }}
-  </StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-}>()
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/LoadingHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/LoadingHero.vue
deleted file mode 100644
index f88fe21df32..00000000000
--- a/@xen-orchestra/web-core/lib/components/state-hero/LoadingHero.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <StateHero v-if="!disabled" :type busy class="loading-hero">
-    {{ $t('loading-in-progress') }}
-  </StateHero>
-  <slot v-else />
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-  disabled?: boolean
-}>()
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/NoDataHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/NoDataHero.vue
deleted file mode 100644
index 9761bb730e2..00000000000
--- a/@xen-orchestra/web-core/lib/components/state-hero/NoDataHero.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <StateHero class="no-data-hero" image="no-data" :type>{{ $t('no-data') }}</StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  type: StateHeroType
-}>()
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/ObjectNotFoundHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/ObjectNotFoundHero.vue
deleted file mode 100644
index ac373572f2a..00000000000
--- a/@xen-orchestra/web-core/lib/components/state-hero/ObjectNotFoundHero.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <StateHero class="object-not-found-hero" image="no-result" type="page">
-    {{ $t('object-not-found', { id }) }}
-  </StateHero>
-</template>
-
-<script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
-
-defineProps<{
-  id: string
-}>()
-</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsComingSoonHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsComingSoonHero.vue
new file mode 100644
index 00000000000..d3ca67c7121
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsComingSoonHero.vue
@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-coming-soon-hero" image="under-construction">
+    {{ $t('coming-soon') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsLoadingHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsLoadingHero.vue
new file mode 100644
index 00000000000..d0b57409bc1
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsLoadingHero.vue
@@ -0,0 +1,15 @@
+<template>
+  <VtsStateHero v-if="!disabled" :type busy class="vts-loading-hero">
+    {{ $t('loading-in-progress') }}
+  </VtsStateHero>
+  <slot v-else />
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+  disabled?: boolean
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsNoDataHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsNoDataHero.vue
new file mode 100644
index 00000000000..e573dfb09a0
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsNoDataHero.vue
@@ -0,0 +1,11 @@
+<template>
+  <VtsStateHero class="vts-no-data-hero" image="no-data" :type>{{ $t('no-data') }}</VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsObjectNotFoundHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsObjectNotFoundHero.vue
new file mode 100644
index 00000000000..7a4b3890d52
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsObjectNotFoundHero.vue
@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero class="vts-object-not-found-hero" image="no-result" type="page">
+    {{ $t('object-not-found', { id }) }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  id: string
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
similarity index 50%
rename from @xen-orchestra/web-core/lib/components/state-hero/StateHero.vue
rename to @xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
index 710436a244f..e16821f669f 100644
--- a/@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
@@ -1,15 +1,15 @@
 <template>
-  <div :class="type" class="state-hero">
-    <UiSpinner v-if="busy" class="spinner" />
+  <div :class="type" class="vts-state-hero">
+    <UiLoader v-if="busy" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
-    <p v-if="$slots.default" :class="typoClass" class="typo text">
+    <p v-if="slots.default" :class="typoClass" class="text">
       <slot />
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { computed } from 'vue'
 
 export type StateHeroType = 'page' | 'card'
@@ -20,7 +20,11 @@ const props = defineProps<{
   image?: 'no-result' | 'under-construction' | 'no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
-const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
+const slots = defineSlots<{
+  default?(): any
+}>()
+
+const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
 
 const imageSrc = computed(() => {
   if (!props.image) {
@@ -32,43 +36,46 @@ const imageSrc = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.state-hero {
-  &.page {
-    --image-width: 90%;
-    --image-max-height: none;
-    --spinner-size: 10rem;
-    --gap: 8.2rem;
-  }
-
-  &.card {
-    --image-width: 70%;
-    --image-max-height: 20rem;
-    --spinner-size: 6rem;
-    --gap: 2rem;
-  }
-}
-
-.state-hero {
+.vts-state-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--gap);
-}
 
-.image {
-  width: var(--image-width);
-  max-width: 55rem;
-  max-height: var(--image-max-height);
-}
+  .image {
+    max-width: 55rem;
+  }
 
-.spinner {
-  color: var(--color-info-txt-base);
-  font-size: var(--spinner-size);
-}
+  .loader,
+  .text {
+    color: var(--color-info-txt-base);
+  }
+
+  &.page {
+    gap: 8.2rem;
+
+    .image {
+      width: 90%;
+      max-height: none;
+    }
 
-.text {
-  color: var(--color-info-txt-base);
+    .loader {
+      font-size: 10rem;
+    }
+  }
+
+  &.card {
+    gap: 2rem;
+
+    .image {
+      width: 70%;
+      max-height: 20rem;
+    }
+
+    .loader {
+      font-size: 6rem;
+    }
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/table/UiTable.vue b/@xen-orchestra/web-core/lib/components/table/VtsTable.vue
similarity index 88%
rename from @xen-orchestra/web-core/lib/components/table/UiTable.vue
rename to @xen-orchestra/web-core/lib/components/table/VtsTable.vue
index 5caed2731fa..9e24bf999cc 100644
--- a/@xen-orchestra/web-core/lib/components/table/UiTable.vue
+++ b/@xen-orchestra/web-core/lib/components/table/VtsTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <table :class="{ 'vertical-border': verticalBorder }" class="ui-table typo p2-regular">
+  <table :class="{ 'vertical-border': verticalBorder }" class="vts-table typo p2-regular">
     <slot />
   </table>
 </template>
@@ -12,11 +12,15 @@ const props = defineProps<{
   verticalBorder?: boolean
 }>()
 
+defineSlots<{
+  default(): any
+}>()
+
 provide('tableName', props.name)
 </script>
 
 <style lang="postcss" scoped>
-.ui-table {
+.vts-table {
   width: 100%;
   border-spacing: 0;
   background-color: var(--color-neutral-background-primary);
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskButton.vue b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskButton.vue
similarity index 74%
rename from @xen-orchestra/web-core/lib/components/task/QuickTaskButton.vue
rename to @xen-orchestra/web-core/lib/components/task/VtsQuickTaskButton.vue
index cfd6cfbca11..eb928cf15bf 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskButton.vue
+++ b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskButton.vue
@@ -1,24 +1,25 @@
 <template>
-  <ButtonIcon
+  <UiButtonIcon
     ref="buttonRef"
     v-tooltip="{ content: $t('tasks.quick-view'), placement: 'bottom-end' }"
+    accent="info"
     :dot="hasNewTask"
     :icon="faBarsProgress"
     size="large"
     @click="isPanelOpen = true"
   />
   <Teleport v-if="isPanelOpen" to="body">
-    <Backdrop @click="isPanelOpen = false" />
-    <QuickTaskPanel ref="panelRef" :loading :tasks />
+    <VtsBackdrop @click="isPanelOpen = false" />
+    <UiQuickTaskPanel ref="panelRef" :loading :tasks />
   </Teleport>
 </template>
 
 <script lang="ts" setup>
-import Backdrop from '@core/components/backdrop/Backdrop.vue'
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import QuickTaskPanel from '@core/components/task/QuickTaskPanel.vue'
+import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
+import UiQuickTaskPanel from '@core/components/ui/quick-task-panel/UiQuickTaskPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Task } from '@core/types/task.type'
 import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'
 import { unrefElement, watchArray, whenever } from '@vueuse/core'
 import placementJs from 'placement.js'
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskList.vue b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskList.vue
similarity index 67%
rename from @xen-orchestra/web-core/lib/components/task/QuickTaskList.vue
rename to @xen-orchestra/web-core/lib/components/task/VtsQuickTaskList.vue
index 2d07a7d5bc0..2875e07684e 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskList.vue
+++ b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskList.vue
@@ -2,21 +2,20 @@
   <ul :class="{ sublist }" class="vts-quick-task-list">
     <li v-if="loading">
       <div class="loading">
-        <UiSpinner />
+        <UiLoader />
         <div>{{ $t('loading-in-progress') }}</div>
       </div>
     </li>
     <template v-else>
       <li v-if="tasks.length === 0" class="typo p1-medium">{{ $t('tasks.no-tasks') }}</li>
-      <QuickTaskItem v-for="task of tasks" :key="task.id" :task />
+      <UiQuickTaskItem v-for="task of tasks" :key="task.id" :task />
     </template>
   </ul>
 </template>
 
 <script lang="ts" setup>
-import QuickTaskItem from '@core/components/task/QuickTaskItem.vue'
-import UiSpinner from '@core/components/UiSpinner.vue'
-import type { Task } from '@core/types/task.type'
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import UiQuickTaskItem, { type Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 
 defineProps<{
   tasks: Task[]
@@ -37,12 +36,12 @@ defineProps<{
     max-height: 40rem;
     overflow: auto;
   }
-}
 
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskTabBar.vue
similarity index 76%
rename from @xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
rename to @xen-orchestra/web-core/lib/components/task/VtsQuickTaskTabBar.vue
index a46c6aa0461..8b8b37593a7 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
+++ b/@xen-orchestra/web-core/lib/components/task/VtsQuickTaskTabBar.vue
@@ -2,17 +2,11 @@
   <TabList :disabled="loading">
     <TabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
-      <VtsCounter
-        v-if="pendingCount !== undefined"
-        :value="pendingCount"
-        accent="info"
-        variant="primary"
-        size="small"
-      />
+      <UiCounter v-if="pendingCount !== undefined" :value="pendingCount" accent="info" variant="primary" size="small" />
     </TabItem>
     <TabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
-      <VtsCounter
+      <UiCounter
         v-if="successCount !== undefined"
         :value="successCount"
         accent="success"
@@ -22,7 +16,7 @@
     </TabItem>
     <TabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
-      <VtsCounter
+      <UiCounter
         v-if="failureCount !== undefined"
         :value="failureCount"
         accent="danger"
@@ -30,7 +24,7 @@
         size="small"
       />
     </TabItem>
-    <Divider type="tab" />
+    <VtsDivider type="tab" />
     <TabItem v-bind="tabs.all.bindings">
       {{ $t('tasks.quick-view.all') }}
     </TabItem>
@@ -44,12 +38,14 @@
 </template>
 
 <script lang="ts" setup>
-import VtsCounter from '@core/components/counter/VtsCounter.vue'
-import Divider from '@core/components/divider/Divider.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import type { TaskStatus } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useTabList } from '@core/composables/tab-list.composable'
-import type { TaskTab } from '@core/types/task.type'
+
+export type TaskTab = TaskStatus | 'all'
 
 defineProps<{
   loading?: boolean
diff --git a/@xen-orchestra/web-core/lib/components/tooltip/TooltipList.vue b/@xen-orchestra/web-core/lib/components/tooltip-list/VtsTooltipList.vue
similarity index 55%
rename from @xen-orchestra/web-core/lib/components/tooltip/TooltipList.vue
rename to @xen-orchestra/web-core/lib/components/tooltip-list/VtsTooltipList.vue
index ea04c220693..9f185148c47 100644
--- a/@xen-orchestra/web-core/lib/components/tooltip/TooltipList.vue
+++ b/@xen-orchestra/web-core/lib/components/tooltip-list/VtsTooltipList.vue
@@ -1,10 +1,9 @@
-<!-- v1.0 -->
 <template>
-  <AppTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
+  <UiTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
 </template>
 
 <script lang="ts" setup>
-import AppTooltip from '@core/components/tooltip/TooltipItem.vue'
+import UiTooltip from '@core/components/ui/tooltip/UiTooltip.vue'
 import { useTooltipStore } from '@core/stores/tooltip.store'
 import { storeToRefs } from 'pinia'
 
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItemError.vue b/@xen-orchestra/web-core/lib/components/tree/TreeItemError.vue
deleted file mode 100644
index 86c33e8329a..00000000000
--- a/@xen-orchestra/web-core/lib/components/tree/TreeItemError.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <li class="tree-item-error typo h6-semi-bold">
-    <slot />
-  </li>
-</template>
-
-<style lang="postcss" scoped>
-.tree-item-error {
-  padding-left: 3rem;
-  color: var(--color-danger-txt-base);
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue b/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
deleted file mode 100644
index 6207a51d30a..00000000000
--- a/@xen-orchestra/web-core/lib/components/tree/TreeLoadingItem.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <li class="tree-loading-item">
-    <div class="tree-loading-item-label-placeholder">
-      <div class="link-placeholder">
-        <template v-if="depth > 1">
-          <TreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
-        </template>
-        <VtsIcon :icon accent="current" />
-        <div class="loader">&nbsp;</div>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import TreeLine from '@core/components/tree/TreeLine.vue'
-import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { inject } from 'vue'
-
-defineProps<{
-  icon: IconDefinition
-}>()
-
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
-</script>
-
-<style lang="postcss" scoped>
-.tree-loading-item-label-placeholder {
-  display: flex;
-  height: 4rem;
-  background-color: var(--color-neutral-background-primary);
-}
-
-.link-placeholder {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: 0 0.8rem;
-  gap: 0.4rem;
-}
-
-.loader {
-  flex: 1;
-  animation: pulse alternate 1s infinite;
-  background-color: var(--color-info-background-selected);
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.5;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItem.vue b/@xen-orchestra/web-core/lib/components/tree/VtsTreeItem.vue
similarity index 89%
rename from @xen-orchestra/web-core/lib/components/tree/TreeItem.vue
rename to @xen-orchestra/web-core/lib/components/tree/VtsTreeItem.vue
index 7d2fc51ace0..ef3535addef 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/VtsTreeItem.vue
@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <li class="tree-item">
+  <li class="vts-tree-item">
     <slot />
     <slot v-if="expanded" name="sublist" />
   </li>
@@ -15,8 +14,8 @@ const props = defineProps<{
 }>()
 
 defineSlots<{
-  default: () => void
-  sublist: () => void
+  default(): any
+  sublist?(): any
 }>()
 
 const hasChildren = ref(false)
diff --git a/@xen-orchestra/web-core/lib/components/tree/VtsTreeItemError.vue b/@xen-orchestra/web-core/lib/components/tree/VtsTreeItemError.vue
new file mode 100644
index 00000000000..c99edac2bf3
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/tree/VtsTreeItemError.vue
@@ -0,0 +1,18 @@
+<template>
+  <li class="vts-tree-item-error typo h6-semi-bold">
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tree-item-error {
+  padding-left: 3rem;
+  color: var(--color-danger-txt-base);
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue b/@xen-orchestra/web-core/lib/components/tree/VtsTreeLine.vue
similarity index 74%
rename from @xen-orchestra/web-core/lib/components/tree/TreeLine.vue
rename to @xen-orchestra/web-core/lib/components/tree/VtsTreeLine.vue
index 1cb75f21c15..7b5b0c5f018 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeLine.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/VtsTreeLine.vue
@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <div class="tree-line">
+  <div class="vts-tree-line">
     <div :class="{ 'tree-line-half-height': halfHeight }" class="tree-line-vertical" />
     <div :class="{ right }" class="tree-line-horizontal" />
   </div>
@@ -14,8 +13,7 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-.tree-line {
-  --offset: 0.7rem;
+.vts-tree-line {
   flex: 0 1 1em;
   align-self: stretch;
   display: flex;
@@ -25,8 +23,8 @@ defineProps<{
   .tree-line-vertical {
     width: 0.1rem;
     background: var(--color-info-txt-base);
-    height: calc(100% + var(--offset));
-    transform: translateY(calc(var(--offset) * -1));
+    height: calc(100% + 0.7rem);
+    transform: translateY(calc(0.7rem * -1));
   }
 
   .tree-line-horizontal {
@@ -40,11 +38,11 @@ defineProps<{
   }
 }
 
-.tree-item:last-child {
-  > .tree-item-label {
+.vts-tree-item:last-child {
+  > .ui-tree-item-label {
     .tree-line-half-height {
       align-self: start;
-      height: calc(50% + var(--offset));
+      height: calc(50% + 0.7rem);
     }
   }
 }
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeList.vue b/@xen-orchestra/web-core/lib/components/tree/VtsTreeList.vue
similarity index 80%
rename from @xen-orchestra/web-core/lib/components/tree/TreeList.vue
rename to @xen-orchestra/web-core/lib/components/tree/VtsTreeList.vue
index c952a94b126..b0dafb5f371 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeList.vue
+++ b/@xen-orchestra/web-core/lib/components/tree/VtsTreeList.vue
@@ -1,6 +1,5 @@
-<!-- v1.1 -->
 <template>
-  <ul class="tree-list">
+  <ul class="vts-tree-list">
     <slot />
   </ul>
 </template>
@@ -9,6 +8,10 @@
 import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import { inject, provide } from 'vue'
 
+defineSlots<{
+  default(): any
+}>()
+
 const depth = inject(IK_TREE_LIST_DEPTH, 0)
 provide(IK_TREE_LIST_DEPTH, depth + 1)
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/tree/VtsTreeLoadingItem.vue b/@xen-orchestra/web-core/lib/components/tree/VtsTreeLoadingItem.vue
new file mode 100644
index 00000000000..3f3217ff6d8
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/tree/VtsTreeLoadingItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <li class="vts-tree-loading-item">
+    <div class="label-placeholder">
+      <div class="link-placeholder">
+        <template v-if="depth > 1">
+          <VtsTreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
+        </template>
+        <VtsIcon :icon accent="current" />
+        <div class="loader">&nbsp;</div>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
+import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { inject } from 'vue'
+
+defineProps<{
+  icon: IconDefinition
+}>()
+
+const depth = inject(IK_TREE_LIST_DEPTH, 0)
+</script>
+
+<style lang="postcss" scoped>
+.vts-tree-loading-item {
+  .label-placeholder {
+    display: flex;
+    height: 4rem;
+    background-color: var(--color-neutral-background-primary);
+
+    .link-placeholder {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      padding: 0 0.8rem;
+      gap: 0.4rem;
+    }
+
+    .loader {
+      flex: 1;
+      animation: pulse alternate 1s infinite;
+      background-color: var(--color-info-background-selected);
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 0.5;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/actions-title/UiActionsTitle.vue b/@xen-orchestra/web-core/lib/components/ui/actions-title/UiActionsTitle.vue
index 8005545d54f..c7ad090ccfd 100644
--- a/@xen-orchestra/web-core/lib/components/ui/actions-title/UiActionsTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/actions-title/UiActionsTitle.vue
@@ -1,6 +1,6 @@
 <!-- v2 -->
 <template>
-  <span class="actions-title typo p2-regular">
+  <span class="ui-actions-title typo p2-regular">
     <slot />
   </span>
 </template>
@@ -12,7 +12,7 @@ defineSlots<{
 </script>
 
 <style scoped lang="postcss">
-.actions-title {
+.ui-actions-title {
   color: var(--color-neutral-txt-secondary);
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/button-icon/UiButtonIcon.vue b/@xen-orchestra/web-core/lib/components/ui/button-icon/UiButtonIcon.vue
new file mode 100644
index 00000000000..480f4ef2b6b
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/button-icon/UiButtonIcon.vue
@@ -0,0 +1,248 @@
+<!-- WIP -->
+<!-- TODO: Add complex icon -->
+<template>
+  <button :class="classNames" :disabled class="ui-button-icon" type="button">
+    <VtsIcon :icon accent="current" />
+    <span v-if="dot" class="dot" />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
+
+type ButtonIconAccent = 'info' | 'success' | 'warning' | 'danger'
+type ButtonSize = 'small' | 'medium' | 'large'
+
+const props = withDefaults(
+  defineProps<{
+    icon: IconDefinition
+    size: ButtonSize
+    accent: ButtonIconAccent
+    disabled?: boolean
+    selected?: boolean
+    dot?: boolean
+    targetScale?: number | { x: number; y: number }
+  }>(),
+  { targetScale: 1 }
+)
+
+const cssTargetScale = computed(() => {
+  if (typeof props.targetScale === 'number') {
+    return `scale(${props.targetScale})`
+  }
+
+  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+})
+
+const classNames = computed(() => {
+  return [
+    toVariants({
+      accent: props.accent,
+      size: props.size,
+      muted: props.disabled,
+      selected: props.selected,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 0;
+  border-radius: 0.2rem;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  .dot {
+    position: absolute;
+    display: block;
+    border-radius: 50%;
+    background-color: var(--color-danger-txt-base);
+  }
+
+  /* ACCENT VARIANTS */
+
+  &.accent--info {
+    & {
+      color: var(--color-info-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-info-txt-hover);
+      background-color: var(--color-info-background-hover);
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+      background-color: var(--color-info-background-active);
+    }
+
+    &.selected {
+      color: var(--color-info-txt-base);
+      background-color: var(--color-info-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--success {
+    & {
+      color: var(--color-success-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-success-txt-hover);
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      color: var(--color-success-txt-active);
+      background-color: var(--color-success-background-active);
+    }
+
+    &.selected {
+      color: var(--color-success-txt-base);
+      background-color: var(--color-success-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--warning {
+    & {
+      color: var(--color-warning-txt-base);
+      background-color: transparent;
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-warning-txt-hover);
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      color: var(--color-warning-txt-active);
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.selected {
+      color: var(--color-warning-txt-base);
+      background-color: var(--color-warning-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  &.accent--danger {
+    & {
+      color: var(--color-danger-txt-base);
+      background-color: transparent;
+
+      .dot {
+        background-color: var(--color-warning-txt-base);
+      }
+    }
+
+    &:is(:hover, :focus-visible) {
+      color: var(--color-danger-txt-hover);
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      color: var(--color-danger-txt-active);
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.selected {
+      color: var(--color-danger-txt-base);
+      background-color: var(--color-danger-background-selected);
+    }
+
+    &.muted {
+      color: var(--color-neutral-txt-secondary);
+      background-color: transparent;
+    }
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    & {
+      width: 1.6rem;
+      height: 1.6rem;
+      font-size: 1.2rem;
+    }
+
+    .dot {
+      width: 0.4rem;
+      height: 0.4rem;
+      top: 0.2rem;
+      right: 0.2rem;
+    }
+  }
+
+  &.size--medium {
+    & {
+      width: 2.4rem;
+      height: 2.4rem;
+      font-size: 1.6rem;
+    }
+
+    .dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      top: 0.4rem;
+      right: 0.4rem;
+    }
+  }
+
+  &.size--large {
+    & {
+      width: 4rem;
+      height: 4rem;
+      font-size: 2.4rem;
+    }
+
+    .dot {
+      width: 0.8rem;
+      height: 0.8rem;
+      top: 0.8rem;
+      right: 0.8rem;
+    }
+  }
+
+  /*
+   * Increase the size of the clickable area,
+   * without changing the padding of the ButtonIcon component
+  */
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: v-bind(cssTargetScale);
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
new file mode 100644
index 00000000000..4035fb6f573
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
@@ -0,0 +1,532 @@
+<!-- v4 -->
+<template>
+  <button :class="classNames" :disabled="busy || isDisabled || lockIcon" class="ui-button" type="button">
+    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
+    <slot />
+    <VtsIcon v-if="lockIcon" :icon="faLock" accent="current" class="icon" fixed-width />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faLock } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+type ButtonAccent = 'info' | 'success' | 'warning' | 'danger'
+type ButtonSize = 'small' | 'medium' | 'large'
+
+const props = withDefaults(
+  defineProps<{
+    variant: ButtonVariant
+    accent: ButtonAccent
+    size: ButtonSize
+    busy?: boolean
+    disabled?: boolean
+    lockIcon?: boolean
+    leftIcon?: IconDefinition
+  }>(),
+  {
+    disabled: undefined,
+  }
+)
+
+defineSlots<{
+  default(): any
+}>()
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const fontClasses = {
+  small: 'typo p3-medium',
+  medium: 'typo h6-medium',
+  large: 'typo h3-semi-bold',
+}
+
+const classNames = computed(() => [
+  fontClasses[props.size],
+  toVariants({
+    accent: props.accent,
+    variant: props.variant,
+    size: props.size,
+    busy: props.busy,
+    lock: props.lockIcon,
+    disabled: isDisabled.value,
+  }),
+])
+</script>
+
+<style lang="postcss" scoped>
+/* IMPLEMENTATION */
+.ui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  vertical-align: middle;
+  gap: 0.75em;
+  border-width: 0.1rem;
+  outline: none;
+  border-style: solid;
+
+  &.lock {
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.5rem;
+      border-radius: 0.4rem;
+      border-width: 0.2rem;
+      border-style: solid;
+    }
+  }
+
+  .icon {
+    font-size: 0.8em;
+  }
+
+  /* ACCENT + VARIANT */
+
+  &.accent--info {
+    &.variant--primary {
+      background-color: var(--color-info-item-base);
+      border-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+
+      &:hover {
+        background-color: var(--color-info-item-hover);
+        border-color: var(--color-info-item-hover);
+        color: var(--color-info-txt-item);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-info-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-info-item-active);
+        border-color: var(--color-info-item-active);
+        color: var(--color-info-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-info-item-disabled);
+        border-color: var(--color-info-item-disabled);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-info-item-base);
+        border-color: var(--color-info-item-base);
+        color: var(--color-info-txt-item);
+      }
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-primary);
+      border-color: var(--color-info-item-base);
+      color: var(--color-info-txt-base);
+
+      &:hover {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-info-item-hover);
+        color: var(--color-info-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-info-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-info-item-active);
+        color: var(--color-info-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-txt-secondary);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-info-item-base);
+        color: var(--color-info-txt-base);
+      }
+    }
+
+    &.variant--tertiary {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-info-txt-base);
+
+      &:hover {
+        background-color: var(--color-info-background-hover);
+        border-color: var(--color-info-background-hover);
+        color: var(--color-info-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-info-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-info-background-active);
+        border-color: var(--color-info-background-active);
+        color: var(--color-info-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-info-background-selected);
+        border-color: var(--color-info-background-selected);
+        color: var(--color-info-txt-base);
+      }
+    }
+  }
+
+  &.accent--success {
+    &.variant--primary {
+      background-color: var(--color-success-item-base);
+      border-color: var(--color-success-item-base);
+      color: var(--color-success-txt-item);
+
+      &:hover {
+        background-color: var(--color-success-item-hover);
+        border-color: var(--color-success-item-hover);
+        color: var(--color-success-txt-item);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-success-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-success-item-active);
+        border-color: var(--color-success-item-active);
+        color: var(--color-success-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-success-item-disabled);
+        border-color: var(--color-success-item-disabled);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-success-item-base);
+        border-color: var(--color-success-item-base);
+        color: var(--color-success-txt-item);
+      }
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-primary);
+      border-color: var(--color-success-txt-base);
+      color: var(--color-success-txt-base);
+
+      &:hover {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-success-txt-hover);
+        color: var(--color-success-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-success-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-success-txt-active);
+        color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-txt-secondary);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-success-txt-base);
+        color: var(--color-success-txt-base);
+      }
+    }
+
+    &.variant--tertiary {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-success-txt-base);
+
+      &:hover {
+        background-color: var(--color-success-background-hover);
+        border-color: var(--color-success-background-hover);
+        color: var(--color-success-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-success-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-success-background-active);
+        border-color: var(--color-success-background-active);
+        color: var(--color-success-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-success-background-selected);
+        border-color: var(--color-success-background-selected);
+        color: var(--color-success-txt-base);
+      }
+    }
+  }
+
+  &.accent--warning {
+    &.variant--primary {
+      background-color: var(--color-warning-item-base);
+      border-color: var(--color-warning-item-base);
+      color: var(--color-warning-txt-item);
+
+      &:hover {
+        background-color: var(--color-warning-item-hover);
+        border-color: var(--color-warning-item-hover);
+        color: var(--color-warning-txt-item);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-warning-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-warning-item-active);
+        border-color: var(--color-warning-item-active);
+        color: var(--color-warning-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-warning-item-disabled);
+        border-color: var(--color-warning-item-disabled);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-warning-item-base);
+        border-color: var(--color-warning-item-base);
+        color: var(--color-warning-txt-item);
+      }
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-primary);
+      border-color: var(--color-warning-txt-base);
+      color: var(--color-warning-txt-base);
+
+      &:hover {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-warning-txt-hover);
+        color: var(--color-warning-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-warning-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-warning-txt-active);
+        color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-txt-secondary);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-warning-txt-base);
+        color: var(--color-warning-txt-base);
+      }
+    }
+
+    &.variant--tertiary {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-warning-txt-base);
+
+      &:hover {
+        background-color: var(--color-warning-background-hover);
+        border-color: var(--color-warning-background-hover);
+        color: var(--color-warning-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-warning-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-warning-background-active);
+        border-color: var(--color-warning-background-active);
+        color: var(--color-warning-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-warning-background-selected);
+        border-color: var(--color-warning-background-selected);
+        color: var(--color-warning-txt-base);
+      }
+    }
+  }
+
+  &.accent--danger {
+    &.variant--primary {
+      background-color: var(--color-danger-item-base);
+      border-color: var(--color-danger-item-base);
+      color: var(--color-danger-txt-item);
+
+      &:hover {
+        background-color: var(--color-danger-item-hover);
+        border-color: var(--color-danger-item-hover);
+        color: var(--color-danger-txt-item);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-danger-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-danger-item-active);
+        border-color: var(--color-danger-item-active);
+        color: var(--color-danger-txt-item);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-danger-item-disabled);
+        border-color: var(--color-danger-item-disabled);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-danger-item-base);
+        border-color: var(--color-danger-item-base);
+        color: var(--color-danger-txt-item);
+      }
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-primary);
+      border-color: var(--color-danger-txt-base);
+      color: var(--color-danger-txt-base);
+
+      &:hover {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-danger-txt-hover);
+        color: var(--color-danger-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-danger-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-danger-txt-active);
+        color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-txt-secondary);
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-neutral-background-primary);
+        border-color: var(--color-danger-txt-base);
+        color: var(--color-danger-txt-base);
+      }
+    }
+
+    &.variant--tertiary {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--color-danger-txt-base);
+
+      &:hover {
+        background-color: var(--color-danger-background-hover);
+        border-color: var(--color-danger-background-hover);
+        color: var(--color-danger-txt-hover);
+      }
+
+      &:focus-visible::before {
+        border-color: var(--color-danger-txt-base);
+      }
+
+      &:active {
+        background-color: var(--color-danger-background-active);
+        border-color: var(--color-danger-background-active);
+        color: var(--color-danger-txt-active);
+      }
+
+      &:is(:disabled, .disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--color-neutral-txt-secondary);
+      }
+
+      &.busy {
+        background-color: var(--color-danger-background-selected);
+        border-color: var(--color-danger-background-selected);
+        color: var(--color-danger-txt-base);
+      }
+    }
+  }
+
+  /* SIZE */
+
+  &.size--small {
+    padding: 0.4rem 0.8rem;
+    border-radius: 0.2rem;
+  }
+
+  &.size--medium {
+    padding: 0.8rem 1.6rem;
+    border-radius: 0.4rem;
+  }
+
+  &.size--large {
+    padding: 1.6rem 2.4rem;
+    border-radius: 0.8rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/card-numbers/UiCardNumbers.vue b/@xen-orchestra/web-core/lib/components/ui/card-numbers/UiCardNumbers.vue
new file mode 100644
index 00000000000..3aceee92eb1
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/card-numbers/UiCardNumbers.vue
@@ -0,0 +1,103 @@
+<!-- v1 -->
+<template>
+  <div class="ui-card-numbers" :class="sizeClass">
+    <span class="label" :class="labelFontClass">{{ label }}</span>
+    <div class="values" :class="sizeClass">
+      <span v-if="percentValue" class="value typo c2-semi-bold">
+        {{ percentValue }}
+      </span>
+
+      <div class="value" :class="valueFontClass">
+        {{ value ?? '-' }}<span class="unit" :class="unitFontClass">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  label: string
+  size: TSize
+  value?: number
+  unit?: string
+  max?: TSize extends 'small' ? number : never
+}>()
+
+const { n } = useI18n()
+
+const sizeClass = computed(() => toVariants({ size: props.size }))
+
+const labelFontClass = computed(() => (props.size === 'medium' ? 'typo c3-semi-bold' : 'typo c2-semi-bold'))
+
+const valueFontClass = computed(() => (props.size === 'medium' ? 'typo h3-semi-bold' : 'typo c2-semi-bold'))
+
+const unitFontClass = computed(() => (props.size === 'medium' ? 'typo p2-medium' : 'typo c2-semi-bold'))
+
+const percentValue = computed(() => {
+  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
+    return undefined
+  }
+
+  if (props.value === undefined) {
+    return n(0, 'percent').replace('0', '-')
+  }
+
+  return n(props.value / props.max, 'percent')
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-numbers {
+  display: flex;
+  width: fit-content;
+
+  .values {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .value {
+    color: var(--color-neutral-txt-primary);
+    display: flex;
+    gap: 0.2rem;
+    align-items: center;
+  }
+
+  .unit {
+    color: var(--color-neutral-txt-primary);
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    gap: 0.8rem;
+    flex-direction: row;
+
+    .label {
+      color: var(--color-neutral-txt-primary);
+    }
+
+    .values {
+      align-items: flex-end;
+    }
+  }
+
+  &.size--medium {
+    gap: 0.4rem;
+    flex-direction: column;
+
+    .label {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    .values {
+      align-items: flex-start;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/card/CardSubtitle.vue b/@xen-orchestra/web-core/lib/components/ui/card-subtitle/UiCardSubtitle.vue
similarity index 61%
rename from @xen-orchestra/web-core/lib/components/card/CardSubtitle.vue
rename to @xen-orchestra/web-core/lib/components/ui/card-subtitle/UiCardSubtitle.vue
index 843bafe627b..26ea4099579 100644
--- a/@xen-orchestra/web-core/lib/components/card/CardSubtitle.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/card-subtitle/UiCardSubtitle.vue
@@ -1,20 +1,20 @@
-<!-- v1.0 -->
+<!-- v1 -->
 <template>
-  <div class="card-subtitle">
+  <div class="ui-card-subtitle">
     <span class="typo h7-semi-bold"><slot /></span>
-    <span v-if="$slots.info" class="typo p3-medium"><slot name="info" /></span>
+    <span v-if="slots.info" class="typo p3-medium"><slot name="info" /></span>
   </div>
 </template>
 
 <script setup lang="ts">
-defineSlots<{
-  default: () => void
-  info: () => void
+const slots = defineSlots<{
+  default(): any
+  info?(): any
 }>()
 </script>
 
 <style lang="postcss" scoped>
-.card-subtitle {
+.ui-card-subtitle {
   color: var(--color-info-txt-base);
   border-bottom: 0.1rem solid var(--color-info-txt-base);
   display: flex;
diff --git a/@xen-orchestra/web-core/lib/components/ui/card-title/UiCardTitle.vue b/@xen-orchestra/web-core/lib/components/ui/card-title/UiCardTitle.vue
new file mode 100644
index 00000000000..edbe6f4fd09
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/card-title/UiCardTitle.vue
@@ -0,0 +1,56 @@
+<!-- v1 -->
+<template>
+  <div class="ui-card-title">
+    <div class="main-content">
+      <div class="title typo h6-medium">
+        <slot />
+      </div>
+      <div v-if="slots.info" class="info typo h7-semi-bold">
+        <slot name="info" />
+      </div>
+    </div>
+    <p v-if="slots.description" class="description typo p3-regular">
+      <slot name="description" />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const slots = defineSlots<{
+  default(): any
+  info?(): any
+  description?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-title {
+  display: flex;
+  flex-direction: column;
+
+  .main-content {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    color: var(--color-neutral-txt-primary);
+  }
+
+  .info {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    color: var(--color-info-txt-base);
+  }
+
+  .description {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/UiCard.vue b/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
similarity index 80%
rename from @xen-orchestra/web-core/lib/components/UiCard.vue
rename to @xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
index e8297d6d928..e22ef9bcd12 100644
--- a/@xen-orchestra/web-core/lib/components/UiCard.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
@@ -5,11 +5,13 @@
 </template>
 
 <script lang="ts" setup>
-type Props = {
+defineProps<{
   horizontal?: boolean
-}
+}>()
 
-defineProps<Props>()
+defineSlots<{
+  default(): any
+}>()
 </script>
 
 <style lang="postcss" scoped>
@@ -21,9 +23,9 @@ defineProps<Props>()
   background-color: var(--color-neutral-background-primary);
   border: 0.1rem solid var(--color-neutral-border);
   border-radius: 0.8rem;
-}
 
-.horizontal {
-  flex-direction: row;
+  &.horizontal {
+    flex-direction: row;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
new file mode 100644
index 00000000000..8b1bdaf05b3
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -0,0 +1,410 @@
+<!-- v3 -->
+<template>
+  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+    <input
+      v-model="checkboxModel"
+      :class="{ indeterminate: isIndeterminate }"
+      :disabled="isDisabled"
+      type="checkbox"
+      class="input"
+      v-bind="attrs"
+    />
+    <span class="fake-checkbox">
+      <VtsIcon :icon class="icon" accent="info" />
+    </span>
+    <span v-if="slots.default" class="typo p1-regular">
+      <slot />
+    </span>
+  </label>
+  <UiInfo v-if="slots.info" :accent>
+    <slot name="info" />
+  </UiInfo>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
+
+type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    accent: CheckboxAccent
+    disabled?: boolean
+    wrapperAttrs?: LabelHTMLAttributes
+  }>(),
+  { disabled: undefined }
+)
+
+const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const classNames = computed(() => [
+  toVariants({
+    accent: props.accent,
+    disabled: isDisabled.value,
+  }),
+])
+
+const isIndeterminate = computed(() => checkboxModel.value === undefined)
+
+const icon = computed(() => {
+  if (isIndeterminate.value) {
+    return faMinus
+  }
+
+  return faCheck
+})
+
+const attrs = useAttrs()
+</script>
+
+<style lang="postcss" scoped>
+.ui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .fake-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.6rem;
+    width: 1.6rem;
+    transition:
+      background-color 0.125s ease-in-out,
+      border-color 0.125s ease-in-out;
+    border: 0.2rem solid transparent;
+    border-radius: 0.2rem;
+
+    .icon {
+      font-size: 0.75rem;
+      position: absolute;
+      color: var(--color-info-txt-item);
+      transition: opacity 0.125s ease-in-out;
+    }
+  }
+
+  .input {
+    font-size: inherit;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+
+    &.indeterminate + .fake-checkbox > .icon {
+      opacity: 1;
+      color: var(--color-info-txt-item);
+    }
+
+    & + .fake-checkbox > .icon {
+      opacity: 0;
+    }
+
+    &:checked + .fake-checkbox > .icon {
+      opacity: 1;
+    }
+
+    &:focus-visible + .fake-checkbox {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.5rem;
+        border-radius: 0.4rem;
+        border-width: 0.2rem;
+        border-style: solid;
+      }
+    }
+  }
+
+  &.accent--info {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-info-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-info-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-info-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-info-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-info-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-info-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-info-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-info-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-info-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-info-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-info-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-info-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--success {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-success-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-success-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-success-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-success-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-success-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-success-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-success-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-success-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-success-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-success-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-success-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-success-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--warning {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-warning-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-warning-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-warning-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-warning-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-warning-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-warning-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-warning-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-warning-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-warning-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-warning-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-warning-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-warning-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--danger {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-danger-item-base);
+
+        > .icon {
+          color: var(--color-danger-txt-item);
+        }
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-danger-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-danger-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-danger-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-danger-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-danger-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-danger-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-danger-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-danger-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-danger-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-danger-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-danger-item-disabled);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/chip/ChipIcon.vue b/@xen-orchestra/web-core/lib/components/ui/chip/ChipIcon.vue
new file mode 100644
index 00000000000..f01879d66f9
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/chip/ChipIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <VtsIcon :class="{ muted: disabled }" accent="current" :icon class="chip-icon" fixed-width />
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  icon?: IconDefinition
+  disabled?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.chip-icon {
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/chip/ChipRemoveIcon.vue b/@xen-orchestra/web-core/lib/components/ui/chip/ChipRemoveIcon.vue
new file mode 100644
index 00000000000..4585be699fa
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/chip/ChipRemoveIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <VtsButtonIcon :accent :icon="faXmark" size="small" />
+</template>
+
+<script lang="ts" setup>
+import VtsButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+defineProps<{
+  accent: ChipAccent
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/chip/UiChip.vue b/@xen-orchestra/web-core/lib/components/ui/chip/UiChip.vue
new file mode 100644
index 00000000000..0b6abb166bb
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/chip/UiChip.vue
@@ -0,0 +1,135 @@
+<!-- v4 -->
+<template>
+  <span :class="classNames" class="ui-chip typo p3-regular" @click="emit('edit')">
+    <ChipIcon :disabled :icon />
+    <span class="content text-ellipsis">
+      <slot />
+    </span>
+    <ChipRemoveIcon v-if="!disabled" :accent @click.stop="emit('remove')" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import ChipIcon from '@core/components/ui/chip/ChipIcon.vue'
+import ChipRemoveIcon from '@core/components/ui/chip/ChipRemoveIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
+
+export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  accent: ChipAccent
+  icon?: IconDefinition
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: []
+  remove: []
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const classNames = computed(() => {
+  return [
+    toVariants({
+      accent: props.accent,
+      muted: props.disabled,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 10rem;
+  color: var(--color-neutral-txt-primary);
+  cursor: pointer;
+  min-height: 2.4rem;
+  vertical-align: middle;
+  white-space: nowrap;
+  min-width: 0;
+
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
+    pointer-events: none;
+  }
+
+  .content {
+    line-height: 1.6rem;
+  }
+
+  /* COLOR VARIANTS */
+
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-info-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-info-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-info-item-disabled);
+    }
+  }
+
+  &.accent--success {
+    background-color: var(--color-success-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-success-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-success-item-disabled);
+    }
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-warning-item-disabled);
+    }
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-danger-item-disabled);
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue b/@xen-orchestra/web-core/lib/components/ui/complex-icon/UiComplexIcon.vue
similarity index 54%
rename from @xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue
rename to @xen-orchestra/web-core/lib/components/ui/complex-icon/UiComplexIcon.vue
index a7a591f5d29..81cfc1ecd92 100644
--- a/@xen-orchestra/web-core/lib/components/icon/ComplexIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/complex-icon/UiComplexIcon.vue
@@ -1,41 +1,21 @@
-<!-- v1.1 -->
+<!-- v2 -->
 <template>
-  <FontAwesomeLayers :class="size" class="complex-icon">
+  <FontAwesomeLayers :class="toVariants({ size })" class="ui-complex-icon">
     <slot />
   </FontAwesomeLayers>
 </template>
 
 <script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
-withDefaults(
-  defineProps<{
-    size?: 'small' | 'medium' | 'large'
-  }>(),
-  { size: 'medium' }
-)
+defineProps<{
+  size: 'small' | 'medium' | 'large'
+}>()
 </script>
 
 <style lang="postcss" scoped>
-/* SIZE VARIANTS */
-.complex-icon {
-  &.small {
-    --font-size: 1.2rem;
-  }
-
-  &.medium {
-    --font-size: 1.6rem;
-  }
-
-  &.large {
-    --font-size: 2rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.complex-icon {
-  font-size: var(--font-size);
-
+.ui-complex-icon {
   :nth-child(2) {
     font-size: 0.5em;
     transform: translate(100%, 80%);
@@ -47,5 +27,19 @@ withDefaults(
       paint-order: stroke;
     }
   }
+
+  /*SIZE VARIANTS*/
+
+  &.size--small {
+    font-size: 1.2rem;
+  }
+
+  &.size--medium {
+    font-size: 1.6rem;
+  }
+
+  &.size--large {
+    font-size: 2rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/counter/UiCounter.vue b/@xen-orchestra/web-core/lib/components/ui/counter/UiCounter.vue
new file mode 100644
index 00000000000..ae7ee085677
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/counter/UiCounter.vue
@@ -0,0 +1,134 @@
+<!-- v2 -->
+<template>
+  <span :class="classNames" class="ui-counter">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+import { computed } from 'vue'
+
+type CounterAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type CounterVariant = 'primary' | 'secondary'
+type CounterSize = 'small' | 'medium'
+
+const props = defineProps<{
+  value: number | string
+  accent: CounterAccent
+  variant: CounterVariant
+  size: CounterSize
+}>()
+
+const typoClasses = {
+  small: 'typo p4-semi-bold',
+  medium: 'typo p1-medium',
+}
+
+const classNames = computed(() => {
+  return [
+    typoClasses[props.size],
+    toVariants({
+      accent: props.accent,
+      variant: props.variant,
+      size: props.size,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+
+  .inner {
+    line-height: 0;
+  }
+
+  /* VARIANT + ACCENT VARIANTS */
+
+  &.variant--primary {
+    &.accent--info {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
+    &.accent--neutral {
+      background-color: var(--color-neutral-txt-primary);
+      color: var(--color-neutral-background-primary);
+    }
+
+    &.accent--success {
+      background-color: var(--color-success-item-base);
+      color: var(--color-success-txt-item);
+    }
+
+    &.accent--warning {
+      background-color: var(--color-warning-item-base);
+      color: var(--color-warning-txt-item);
+    }
+
+    &.accent--danger {
+      background-color: var(--color-danger-item-base);
+      color: var(--color-danger-txt-item);
+    }
+
+    &.accent--muted {
+      background-color: var(--color-neutral-background-disabled);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  &.variant--secondary {
+    &.accent--info {
+      background-color: var(--color-info-background-selected);
+      color: var(--color-info-txt-base);
+    }
+
+    &.accent--neutral {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &.accent--success {
+      background-color: var(--color-success-background-selected);
+      color: var(--color-success-txt-base);
+    }
+
+    &.accent--warning {
+      background-color: var(--color-warning-background-selected);
+      color: var(--color-warning-txt-base);
+    }
+
+    &.accent--danger {
+      background-color: var(--color-danger-background-selected);
+      color: var(--color-danger-txt-base);
+    }
+
+    &.accent--muted {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    height: 1.5rem;
+    min-width: 1.5rem;
+    border-radius: calc(1.5rem / 2);
+    padding: 0 0.4rem;
+  }
+
+  &.size--medium {
+    height: 2.4rem;
+    min-width: 2.4rem;
+    border-radius: calc(2.4rem / 2);
+    padding: 0 0.6rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue b/@xen-orchestra/web-core/lib/components/ui/donut-chart/UiDonutChart.vue
similarity index 61%
rename from @xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
rename to @xen-orchestra/web-core/lib/components/ui/donut-chart/UiDonutChart.vue
index 654e9b26636..5f381346ac3 100644
--- a/@xen-orchestra/web-core/lib/components/donut-chart/DonutChart.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/donut-chart/UiDonutChart.vue
@@ -1,11 +1,11 @@
-<!-- v1.1 -->
+<!-- v3 -->
 <template>
-  <svg class="donut-chart" viewBox="0 0 100 100">
+  <svg class="ui-donut-chart" viewBox="0 0 100 100">
     <circle class="segment" cx="50" cy="50" r="40" />
     <circle
       v-for="(segment, index) in computedSegments"
       :key="index"
-      :class="segment.color"
+      :class="`accent--${segment.accent}`"
       :stroke-dasharray="`${segment.percent} ${circumference - segment.percent}`"
       :stroke-dashoffset="segment.offset"
       class="segment"
@@ -22,11 +22,11 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-export type DonutSegmentColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+export type DonutSegmentAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 export type DonutSegment = {
   value: number
-  color: DonutSegmentColor
+  accent: DonutSegmentAccent
 }
 
 export type DonutChartProps = {
@@ -49,7 +49,7 @@ const computedSegments = computed(() => {
     nextOffset -= percent
 
     return {
-      color: segment.color,
+      accent: segment.accent,
       percent,
       offset,
     }
@@ -58,39 +58,37 @@ const computedSegments = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.donut-chart {
+.ui-donut-chart {
   width: 100px;
   height: 100px;
-}
 
-.segment {
-  stroke: var(--stroke-color);
-  stroke-width: 10;
-  fill: transparent;
-  --stroke-color: var(--color-neutral-txt-primary);
+  .segment {
+    stroke-width: 10;
+    fill: transparent;
 
-  &.primary {
-    --stroke-color: var(--color-info-item-base);
-  }
+    &.accent--neutral {
+      stroke: var(--color-neutral-txt-primary);
+    }
 
-  &.secondary {
-    --stroke-color: var(--color-neutral-txt-primary);
-  }
+    &.accent--info {
+      stroke: var(--color-info-item-base);
+    }
 
-  &.success {
-    --stroke-color: var(--color-success-item-base);
-  }
+    &.accent--success {
+      stroke: var(--color-success-item-base);
+    }
 
-  &.warning {
-    --stroke-color: var(--color-warning-item-base);
-  }
+    &.accent--warning {
+      stroke: var(--color-warning-item-base);
+    }
 
-  &.danger {
-    --stroke-color: var(--color-danger-item-base);
-  }
+    &.accent--danger {
+      stroke: var(--color-danger-item-base);
+    }
 
-  &.disabled {
-    --stroke-color: var(--color-neutral-background-disabled);
+    &.accent--muted {
+      stroke: var(--color-neutral-background-disabled);
+    }
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue b/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
similarity index 65%
rename from @xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
rename to @xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
index 5ad56018928..838396f95fc 100644
--- a/@xen-orchestra/web-core/lib/components/head-bar/HeadBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v3 -->
 <template>
-  <div class="head-bar">
+  <div class="ui-head-bar">
     <div class="label-wrapper">
       <span v-if="slots.icon || icon" class="icon">
         <slot name="icon">
@@ -30,49 +30,49 @@ defineProps<{
 }>()
 
 const slots = defineSlots<{
-  default: () => any
-  icon?: () => any
-  status?: () => any
-  actions?: () => any
+  default(): any
+  icon?(): any
+  status?(): any
+  actions?(): any
 }>()
 </script>
 
 <style lang="postcss" scoped>
-.head-bar {
+.ui-head-bar {
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 4.8rem;
   align-items: center;
   border-bottom: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-primary);
-}
 
-.label-wrapper {
-  display: flex;
-  gap: 1.6rem;
-  align-items: center;
-  min-width: 0;
-}
+  .label-wrapper {
+    display: flex;
+    gap: 1.6rem;
+    align-items: center;
+    min-width: 0;
+  }
 
-.label {
-  color: var(--color-neutral-txt-primary);
-}
+  .label {
+    color: var(--color-neutral-txt-primary);
+  }
 
-.icon {
-  font-size: 2.4rem;
-}
+  .icon {
+    font-size: 2.4rem;
+  }
 
-.status {
-  color: var(--color-neutral-txt-secondary);
-  display: flex;
-  align-items: center;
-  gap: 1.6rem;
-}
+  .status {
+    color: var(--color-neutral-txt-secondary);
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+  }
 
-.actions {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
+  .actions {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/info/VtsInfo.vue b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
similarity index 83%
rename from @xen-orchestra/web-core/lib/components/info/VtsInfo.vue
rename to @xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
index 77941283c43..1a42b2e673f 100644
--- a/@xen-orchestra/web-core/lib/components/info/VtsInfo.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
@@ -1,8 +1,10 @@
 <!-- v2 -->
 <template>
-  <div class="vts-info">
+  <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p class="message"><slot /></p>
+    <p class="message">
+      <slot />
+    </p>
   </div>
 </template>
 
@@ -39,17 +41,17 @@ const icon = computed(() => iconByAccent[props.accent])
 </script>
 
 <style lang="postcss" scoped>
-.vts-info {
+.ui-info {
   align-items: start;
   display: flex;
   gap: 0.8rem;
-}
 
-.icon {
-  font-size: 1.6rem;
-}
+  .icon {
+    font-size: 1.6rem;
+  }
 
-.message {
-  font-size: 1.2rem;
+  .message {
+    font-size: 1.2rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
similarity index 94%
rename from @xen-orchestra/web-core/lib/components/input/UiInput.vue
rename to @xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index cc372c936bf..03b1c8cb5d5 100644
--- a/@xen-orchestra/web-core/lib/components/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -2,9 +2,9 @@
 <template>
   <div class="ui-input">
     <VtsIcon :icon accent="current" class="before" />
-    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
+    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="attrs" />
     <VtsIcon
-      v-if="!$attrs.disabled && modelValue"
+      v-if="!attrs.disabled && modelValue"
       :icon="faXmark"
       class="after"
       accent="info"
@@ -18,7 +18,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { uniqueId } from '@core/utils/unique-id.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -30,6 +30,8 @@ defineProps<{
 
 const modelValue = defineModel<string>({ required: true })
 
+const attrs = useAttrs()
+
 const id = computed(() => uniqueId('input-'))
 </script>
 
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiTextarea.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiTextarea.vue
new file mode 100644
index 00000000000..09f319f45d2
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiTextarea.vue
@@ -0,0 +1,120 @@
+<!-- v2 -->
+<template>
+  <div class="ui-textarea" :class="toVariants({ accent })">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href><slot /></UiLabel>
+    <textarea v-model="model" :disabled class="textarea" v-bind="attrs" />
+    <UiInfo v-if="slots.info" :accent><slot name="info" /></UiInfo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  accent: 'info' | 'warning' | 'danger'
+  disabled?: boolean
+  href?: string
+  icon?: IconDefinition
+  required?: boolean
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
+
+const attrs = useAttrs()
+
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+</script>
+
+<style lang="postcss" scoped>
+.ui-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .textarea {
+    border-radius: 0.4rem;
+    border-width: 0.1rem;
+    background-color: var(--color-neutral-background-primary);
+    height: 8rem;
+    outline: none;
+    padding: 0.8rem 1.6rem;
+    width: 100%;
+  }
+
+  &.accent--info {
+    .textarea {
+      border-color: var(--color-neutral-border);
+
+      &:hover {
+        border-color: var(--color-info-item-hover);
+      }
+      &:active {
+        border-color: var(--color-info-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-info-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+
+  &.accent--warning {
+    .textarea {
+      border-color: var(--color-warning-item-base);
+
+      &:hover {
+        border-color: var(--color-warning-item-hover);
+      }
+      &:active {
+        border-color: var(--color-warning-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-warning-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+
+  &.accent--danger {
+    .textarea {
+      border-color: var(--color-danger-item-base);
+
+      &:hover {
+        border-color: var(--color-danger-item-hover);
+      }
+      &:active {
+        border-color: var(--color-danger-item-active);
+      }
+      &:focus:not(:active) {
+        border-width: 0.2rem;
+        border-color: var(--color-danger-item-base);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-background-disabled);
+        border-color: var(--color-neutral-border);
+      }
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/input/VtsLabel.vue b/@xen-orchestra/web-core/lib/components/ui/label/UiLabel.vue
similarity index 72%
rename from @xen-orchestra/web-core/lib/components/input/VtsLabel.vue
rename to @xen-orchestra/web-core/lib/components/ui/label/UiLabel.vue
index afa3661955f..a9c5c92f5be 100644
--- a/@xen-orchestra/web-core/lib/components/input/VtsLabel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/label/UiLabel.vue
@@ -1,6 +1,6 @@
 <!-- WIP -->
 <template>
-  <div :class="accent" class="vts-label">
+  <div :class="toVariants({ accent })" class="ui-label">
     <VtsIcon accent="current" :icon class="left-icon" />
     <span :class="{ required }" class="typo c2-semi-bold label"><slot /></span>
     <!-- @TODO: Replace it by the VtsLink component when available -->
@@ -13,11 +13,12 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 
 defineProps<{
-  accent: 'brand' | 'warning' | 'danger'
+  accent: 'neutral' | 'warning' | 'danger'
   icon?: IconDefinition
   required?: boolean
   href?: string
@@ -25,26 +26,7 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-/**
-ACCENT
---vts-label--color
-*/
-.vts-label {
-  &.brand {
-    --vts-label--color: var(--color-neutral-txt-primary);
-  }
-
-  &.warning {
-    --vts-label--color: var(--color-warning-txt-base);
-  }
-
-  &.danger {
-    --vts-label--color: var(--color-danger-txt-base);
-  }
-}
-
-/* IMPLEMENTATION */
-.vts-label {
+.ui-label {
   display: flex;
   align-items: center;
 
@@ -53,8 +35,6 @@ ACCENT
   }
 
   .label {
-    color: var(--vts-label--color);
-
     &.required::after {
       content: '*';
       margin-left: 0.4rem;
@@ -72,5 +52,25 @@ ACCENT
   .link-icon {
     font-size: 0.8rem;
   }
+
+  /* ACCENT VARIANTS */
+
+  &.accent--neutral {
+    .label {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--warning {
+    .label {
+      color: var(--color-warning-txt-base);
+    }
+  }
+
+  &.accent--danger {
+    .label {
+      color: var(--color-danger-txt-base);
+    }
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/LegendTitle.vue b/@xen-orchestra/web-core/lib/components/ui/legend-title/UiLegendTitle.vue
similarity index 88%
rename from @xen-orchestra/web-core/lib/components/LegendTitle.vue
rename to @xen-orchestra/web-core/lib/components/ui/legend-title/UiLegendTitle.vue
index c5e05482762..94b0ecd75a1 100644
--- a/@xen-orchestra/web-core/lib/components/LegendTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/legend-title/UiLegendTitle.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v3 -->
 <template>
-  <div class="legend-title typo c3-semi-bold">
+  <div class="ui-legend-title typo c3-semi-bold">
     <slot />
     <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
   </div>
@@ -24,7 +24,7 @@ defineSlots<{
 </script>
 
 <style lang="postcss" scoped>
-.legend-title {
+.ui-legend-title {
   color: var(--color-neutral-txt-secondary);
   display: flex;
   gap: 0.8rem;
diff --git a/@xen-orchestra/web-core/lib/components/ui/legend/UiLegend.vue b/@xen-orchestra/web-core/lib/components/ui/legend/UiLegend.vue
new file mode 100644
index 00000000000..19f343fb01f
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/legend/UiLegend.vue
@@ -0,0 +1,98 @@
+<!-- v3 -->
+<template>
+  <li :class="classNames" class="ui-legend">
+    <VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
+    <span class="label typo p3-regular"><slot /></span>
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
+
+export type LegendItemProps = {
+  accent: LegendItemAccent
+  value?: number
+  unit?: string
+  tooltip?: string
+}
+
+const props = defineProps<LegendItemProps>()
+
+defineSlots<{
+  default(): void
+}>()
+
+const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
+
+const classNames = computed(() => toVariants({ accent: props.accent }))
+</script>
+
+<style lang="postcss" scoped>
+.ui-legend {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .circle-icon {
+    font-size: 0.8rem;
+  }
+
+  .tooltip-icon {
+    font-size: 1.2rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-primary);
+  }
+
+  .value-and-unit {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  /* COLORS VARIANTS */
+
+  &.accent--neutral {
+    .circle-icon {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--info {
+    .circle-icon {
+      color: var(--color-info-item-base);
+    }
+  }
+
+  &.accent--success {
+    .circle-icon {
+      color: var(--color-success-item-base);
+    }
+  }
+
+  &.accent--warning {
+    .circle-icon {
+      color: var(--color-warning-item-base);
+    }
+  }
+
+  &.accent--danger {
+    .circle-icon {
+      color: var(--color-danger-item-base);
+    }
+  }
+
+  &.accent--muted {
+    .circle-icon {
+      color: var(--color-neutral-background-disabled);
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/UiSpinner.vue b/@xen-orchestra/web-core/lib/components/ui/loader/UiLoader.vue
similarity index 91%
rename from @xen-orchestra/web-core/lib/components/UiSpinner.vue
rename to @xen-orchestra/web-core/lib/components/ui/loader/UiLoader.vue
index 253f4d1d901..cf9c7d493ee 100644
--- a/@xen-orchestra/web-core/lib/components/UiSpinner.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/loader/UiLoader.vue
@@ -1,8 +1,8 @@
 <!-- Adapted from https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ -->
 
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <svg class="ui-spinner" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <svg class="ui-loader" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient :id="secondHalfId">
         <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
@@ -30,7 +30,7 @@ const secondHalfId = uniqueId('spinner-second-half-')
 </script>
 
 <style lang="postcss" scoped>
-.ui-spinner {
+.ui-loader {
   width: 1.2em;
   height: 1.2em;
   animation: rotate 1s linear infinite;
diff --git a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue b/@xen-orchestra/web-core/lib/components/ui/object-icon/UiObjectIcon.vue
similarity index 80%
rename from @xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
rename to @xen-orchestra/web-core/lib/components/ui/object-icon/UiObjectIcon.vue
index 41cae332102..77b14a452fa 100644
--- a/@xen-orchestra/web-core/lib/components/icon/ObjectIcon.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/object-icon/UiObjectIcon.vue
@@ -1,10 +1,10 @@
-<!-- VM v1.0 -->
-<!-- Host v1.0 -->
-<!-- SR v1.0 -->
-<!-- Backup Repository v1.0 -->
-<!-- Network v1.0 -->
+<!-- VM v2 -->
+<!-- Host v2 -->
+<!-- SR v2 -->
+<!-- Backup Repository v2 -->
+<!-- Network v2 -->
 <template>
-  <FontAwesomeLayers :class="[size, { disabled: stateConfig === undefined }]" class="object-icon">
+  <FontAwesomeLayers :class="[toVariants({ size }), { muted: stateConfig === undefined }]" class="ui-object-icon">
     <VtsIcon :icon="mainIcon" accent="current" />
     <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
   </FontAwesomeLayers>
@@ -12,7 +12,8 @@
 
 <script generic="TType extends SupportedType" lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { ObjectIconConfig, ObjectIconSize, SupportedState, SupportedType } from '@core/types/object-icon.type'
+import type { ObjectIconConfig, SupportedState, SupportedType } from '@core/types/object-icon.type'
+import { toVariants } from '@core/utils/to-variants.util'
 import {
   faCheckCircle,
   faCircleMinus,
@@ -31,13 +32,15 @@ import {
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 import { computed } from 'vue'
 
+export type ObjectIconSize = 'small' | 'medium' | 'large'
+
 const props = withDefaults(
   defineProps<{
     type: TType
+    size: ObjectIconSize
     state?: SupportedState<TType> | 'disabled'
-    size?: ObjectIconSize
   }>(),
-  { size: 'small', state: 'disabled' }
+  { state: 'disabled' }
 )
 
 const config: ObjectIconConfig = {
@@ -62,7 +65,7 @@ const config: ObjectIconConfig = {
       },
       suspended: {
         icon: faMoon,
-        color: '--color-normal-item-base',
+        color: '--color-info-item-base',
         translate: {
           x: [88, 130, 140],
           y: [65, 75, 90],
@@ -70,7 +73,7 @@ const config: ObjectIconConfig = {
       },
       paused: {
         icon: faPause,
-        color: '--color-normal-item-active',
+        color: '--color-info-item-active',
         translate: {
           x: [110, 154, 170],
           y: [65, 75, 90],
@@ -191,16 +194,16 @@ const stateIconStyle = computed(() => {
 
   let translateIndex: number
 
-  if (props.size === 'extra-small') {
+  if (props.size === 'small') {
     translateIndex = 0
-  } else if (props.size === 'medium') {
+  } else if (props.size === 'large') {
     translateIndex = 2
   } else {
     translateIndex = 1
   }
 
   return {
-    '--vts-icon--color': `var(${stateConfig.value.color})`,
+    color: `var(${stateConfig.value.color})`,
     '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
     '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
   }
@@ -208,36 +211,41 @@ const stateIconStyle = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-/* SIZE VARIANTS */
-.object-icon {
-  &.extra-small {
-    --font-size: 0.8rem;
-    --state-icon-font-size: 0.75em;
+.ui-object-icon {
+  flex-shrink: 0;
+
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
   }
 
-  &.small {
-    --font-size: 1.6rem;
-    --state-icon-font-size: 0.625em;
+  .state {
+    transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
   }
 
-  &.medium {
-    --font-size: 2.4rem;
-    --state-icon-font-size: 0.5em;
+  /* SIZE VARIANTS */
+
+  &.size--small {
+    font-size: 0.8rem;
+
+    .state {
+      font-size: 0.75em;
+    }
   }
-}
 
-/* IMPLEMENTATION */
-.object-icon {
-  flex-shrink: 0;
-  font-size: var(--font-size);
+  &.size--medium {
+    font-size: 1.6rem;
 
-  &.disabled {
-    color: var(--color-neutral-txt-secondary);
+    .state {
+      font-size: 0.625em;
+    }
   }
-}
 
-.state {
-  font-size: var(--state-icon-font-size);
-  transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
+  &.size--large {
+    font-size: 2.4rem;
+
+    .state {
+      font-size: 0.5em;
+    }
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/object-link/UiObjectLink.vue b/@xen-orchestra/web-core/lib/components/ui/object-link/UiObjectLink.vue
new file mode 100644
index 00000000000..576ebc6137b
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/object-link/UiObjectLink.vue
@@ -0,0 +1,83 @@
+<!-- v3 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon accent="current" />
+      </slot>
+    </span>
+    <span v-tooltip class="content text-ellipsis">
+      <slot />
+    </span>
+  </RouterLink>
+  <span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon accent="current" />
+      </slot>
+    </span>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  route?: RouteLocationRaw
+  disabled?: boolean
+  icon?: IconDefinition
+}>()
+
+defineSlots<{
+  default(): any
+  icon(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-object-link {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  color: var(--color-info-txt-base);
+  gap: 1rem;
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+    cursor: not-allowed;
+  }
+
+  .icon {
+    color: var(--color-neutral-txt-primary);
+    font-size: 0.8rem;
+  }
+
+  /* INTERACTION VARIANTS */
+
+  &.is-link {
+    &:hover {
+      color: var(--color-info-txt-hover);
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.6rem;
+        border: 0.2rem solid var(--color-info-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
similarity index 61%
rename from @xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
rename to @xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
index 5c6cb90c0fb..3dfe9b4bd86 100644
--- a/@xen-orchestra/web-core/lib/components/query-search-bar/QuerySearchBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
@@ -1,6 +1,6 @@
-<!-- v1.2 -->
+<!-- v3 -->
 <template>
-  <form class="search-bar" @submit.prevent="emit('search', value)">
+  <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
       {{ $t('core.query-search-bar.label') }}
     </label>
@@ -12,13 +12,13 @@
       :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" color="info" level="primary" type="submit">{{ $t('core.search') }}</UiButton>
-      <Divider type="stretch" />
+      <UiButton size="medium" accent="info" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <VtsDivider type="stretch" />
       <UiButton
         v-tooltip="$t('coming-soon')"
         size="medium"
-        color="info"
-        level="secondary"
+        accent="info"
+        variant="secondary"
         :left-icon="faFilter"
         disabled
       >
@@ -26,17 +26,17 @@
       </UiButton>
     </template>
     <template v-else>
-      <ButtonIcon type="submit" :icon="faMagnifyingGlass" />
-      <ButtonIcon disabled :icon="faFilter" />
+      <UiButtonIcon accent="info" size="medium" type="submit" :icon="faMagnifyingGlass" />
+      <UiButtonIcon accent="info" size="medium" disabled :icon="faFilter" />
     </template>
   </form>
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import UiButton from '@core/components/button/UiButton.vue'
-import Divider from '@core/components/divider/Divider.vue'
-import UiInput from '@core/components/input/UiInput.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
@@ -55,13 +55,13 @@ const value = ref<string>('')
 </script>
 
 <style lang="postcss" scoped>
-.search-bar {
+.ui-query-search-bar {
   display: flex;
   gap: 1.6rem;
   align-items: center;
-}
 
-.label {
-  color: var(--color-neutral-txt-secondary);
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue b/@xen-orchestra/web-core/lib/components/ui/quick-task-item/UiQuickTaskItem.vue
similarity index 56%
rename from @xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
rename to @xen-orchestra/web-core/lib/components/ui/quick-task-item/UiQuickTaskItem.vue
index ad9d9ac009a..66ec4adff88 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskItem.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/quick-task-item/UiQuickTaskItem.vue
@@ -1,7 +1,8 @@
+<!-- WIP -->
 <template>
-  <li class="vts-quick-task-item">
+  <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <ButtonIcon :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="info" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
     </div>
     <div class="content">
       <div class="typo p1-medium">
@@ -9,7 +10,7 @@
       </div>
       <div class="informations">
         <div class="line-1">
-          <UiTag v-if="task.tag" color="secondary">{{ task.tag }}</UiTag>
+          <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
             <span class="typo p4-medium">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
@@ -23,21 +24,32 @@
           </template>
         </div>
       </div>
-      <QuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
+      <VtsQuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
     </div>
   </li>
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import QuickTaskList from '@core/components/task/QuickTaskList.vue'
-import UiTag from '@core/components/UiTag.vue'
-import type { Task } from '@core/types/task.type'
+import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 
+export type TaskStatus = 'pending' | 'success' | 'failure'
+
+export type Task = {
+  id: string | number
+  name: string
+  status: TaskStatus
+  tag?: string
+  start?: number
+  end?: number
+  subtasks?: Task[]
+}
+
 const props = defineProps<{
   task: Task
 }>()
@@ -50,42 +62,42 @@ const hasSubTasks = computed(() => subTasksCount.value > 0)
 </script>
 
 <style lang="postcss" scoped>
-.vts-quick-task-item {
+.ui-quick-task-item {
   display: flex;
 
   &:not(:last-child) {
     border-bottom: 0.1rem solid var(--color-neutral-border);
   }
-}
 
-.toggle {
-  padding: 0.4rem 0;
-}
+  .toggle {
+    padding: 0.4rem 0;
+  }
 
-.content {
-  flex: 1;
-  padding: 0.4rem 0.4rem 0.4rem 0.8rem;
-}
+  .content {
+    flex: 1;
+    padding: 0.4rem 0.4rem 0.4rem 0.8rem;
+  }
 
-.informations {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
+  .informations {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
 
-.line-1 {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem 0.8rem;
-}
+  .line-1 {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem 0.8rem;
+  }
 
-.line-2 {
-  color: var(--color-neutral-txt-secondary);
-}
+  .line-2 {
+    color: var(--color-neutral-txt-secondary);
+  }
 
-.subtasks {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
+  .subtasks {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskPanel.vue b/@xen-orchestra/web-core/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue
similarity index 75%
rename from @xen-orchestra/web-core/lib/components/task/QuickTaskPanel.vue
rename to @xen-orchestra/web-core/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue
index 85a7abb002c..46a8003b424 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/quick-task-panel/UiQuickTaskPanel.vue
@@ -1,21 +1,22 @@
+<!-- WIP -->
 <template>
-  <div :class="{ mobile: isMobile }" class="vts-quick-tasks">
-    <QuickTaskTabBar
+  <div :class="{ mobile: isMobile }" class="ui-quick-task-panel">
+    <VtsQuickTaskTabBar
       v-model="currentTab"
       :failure-count="failureTasks.length"
       :loading
       :pending-count="pendingTasks.length"
       :success-count="successTasks.length"
     />
-    <QuickTaskList :loading :tasks="currentTasks" />
+    <VtsQuickTaskList :loading :tasks="currentTasks" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import QuickTaskList from '@core/components/task/QuickTaskList.vue'
-import QuickTaskTabBar from '@core/components/task/QuickTaskTabBar.vue'
+import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
+import VtsQuickTaskTabBar, { type TaskTab } from '@core/components/task/VtsQuickTaskTabBar.vue'
+import type { Task } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import type { Task, TaskTab } from '@core/types/task.type'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -48,7 +49,7 @@ const currentTasks = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.vts-quick-tasks {
+.ui-quick-task-panel {
   width: fit-content;
   min-width: 65rem;
   border-radius: 0.8rem;
diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue b/@xen-orchestra/web-core/lib/components/ui/stacked-bar/StackedBarSegment.vue
similarity index 66%
rename from @xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue
rename to @xen-orchestra/web-core/lib/components/ui/stacked-bar/StackedBarSegment.vue
index 935c2e424b7..d21e12ee970 100644
--- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBarSegment.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/stacked-bar/StackedBarSegment.vue
@@ -2,7 +2,7 @@
   <div
     v-if="percentage > 0"
     v-tooltip="{ selector: '.text-ellipsis' }"
-    :class="color"
+    :class="`accent--${accent}`"
     :style="{ width: percentage + '%' }"
     class="stacked-bar-segment typo c4-semi-bold"
   >
@@ -18,10 +18,10 @@ import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
 
-export type StackedBarSegmentColor = 'primary' | 'success' | 'warning' | 'danger'
+export type StackedBarSegmentAccent = 'info' | 'success' | 'warning' | 'danger'
 
 export type StackedBarSegmentProps = {
-  color: StackedBarSegmentColor
+  accent: StackedBarSegmentAccent
   percentage: number
 }
 
@@ -36,37 +36,34 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANT */
 .stacked-bar-segment {
-  &.primary {
-    --background-color: var(--color-info-item-base);
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-info-txt-item);
+  padding-inline: 0.8rem;
 
-  &.success {
-    --background-color: var(--color-success-item-base);
+  .hidden {
+    visibility: hidden;
   }
 
-  &.warning {
-    --background-color: var(--color-warning-item-base);
+  /* ACCENT VARIANTS */
+
+  &.accent--info {
+    background-color: var(--color-info-item-base);
   }
 
-  &.danger {
-    --background-color: var(--color-danger-item-base);
+  &.accent--success {
+    background-color: var(--color-success-item-base);
   }
-}
 
-/* IMPLEMENTATION */
-.stacked-bar-segment {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-  color: var(--color-info-txt-item);
-  background-color: var(--background-color);
-  padding-inline: 0.8rem;
-}
+  &.accent--warning {
+    background-color: var(--color-warning-item-base);
+  }
 
-.hidden {
-  visibility: hidden;
+  &.accent--danger {
+    background-color: var(--color-danger-item-base);
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue b/@xen-orchestra/web-core/lib/components/ui/stacked-bar/UiStackedBar.vue
similarity index 81%
rename from @xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue
rename to @xen-orchestra/web-core/lib/components/ui/stacked-bar/UiStackedBar.vue
index 406877ce18b..7d8470d629b 100644
--- a/@xen-orchestra/web-core/lib/components/stacked-bar/StackedBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/stacked-bar/UiStackedBar.vue
@@ -1,22 +1,22 @@
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <div class="stacked-bar">
+  <div class="ui-stacked-bar">
     <StackedBarSegment
       v-for="(segment, index) in segments"
       :key="index"
-      :color="segment.color"
+      :accent="segment.accent"
       :percentage="max === 0 ? 0 : (segment.value / max) * 100"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/stacked-bar/StackedBarSegment.vue'
+import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/ui/stacked-bar/StackedBarSegment.vue'
 import { computed } from 'vue'
 
 type Segment = {
   value: number
-  color: StackedBarSegmentProps['color']
+  accent: StackedBarSegmentProps['accent']
 }
 
 export type StackedBarProps = {
@@ -32,7 +32,7 @@ const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
 </script>
 
 <style lang="postcss" scoped>
-.stacked-bar {
+.ui-stacked-bar {
   width: 100%;
   display: flex;
   height: 4rem;
diff --git a/@xen-orchestra/web-core/lib/components/ui/tag/UiTag.vue b/@xen-orchestra/web-core/lib/components/ui/tag/UiTag.vue
new file mode 100644
index 00000000000..7b46e9b66a6
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/tag/UiTag.vue
@@ -0,0 +1,118 @@
+<!-- v3 -->
+<!-- TODO: implement tertiary variant to bump to v4 -->
+<template>
+  <span :class="toVariants({ accent, variant })" class="ui-tag typo p3-regular">
+    <slot name="icon">
+      <VtsIcon :icon accent="current" fixed-width />
+    </slot>
+    <span class="text-ellipsis"><slot /></span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type TagVariant = 'primary' | 'secondary'
+
+defineProps<{
+  accent: TagAccent
+  variant: TagVariant
+  icon?: IconDefinition
+}>()
+
+defineSlots<{
+  default(): any
+  icon?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  white-space: nowrap;
+  padding: 0.2rem 0.8rem;
+  border-radius: 0.4rem;
+  vertical-align: middle;
+  min-width: 0;
+
+  /* COLOR VARIANTS */
+
+  &.accent--info {
+    &.variant--primary {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-info-background-selected);
+      color: var(--color-info-txt-base);
+    }
+  }
+
+  &.accent--neutral {
+    &.variant--primary {
+      background-color: var(--color-neutral-txt-primary);
+      color: var(--color-neutral-background-primary);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-primary);
+    }
+  }
+
+  &.accent--success {
+    &.variant--primary {
+      background-color: var(--color-success-item-base);
+      color: var(--color-success-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-success-background-selected);
+      color: var(--color-success-txt-base);
+    }
+  }
+
+  &.accent--warning {
+    &.variant--primary {
+      background-color: var(--color-warning-item-base);
+      color: var(--color-warning-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-warning-background-selected);
+      color: var(--color-warning-txt-base);
+    }
+  }
+
+  &.accent--danger {
+    &.variant--primary {
+      background-color: var(--color-danger-item-base);
+      color: var(--color-danger-txt-item);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-danger-background-selected);
+      color: var(--color-danger-txt-base);
+    }
+  }
+
+  &.accent--muted {
+    &.variant--primary {
+      background-color: var(--color-neutral-background-disabled);
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &.variant--secondary {
+      background-color: var(--color-neutral-background-secondary);
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue b/@xen-orchestra/web-core/lib/components/ui/tooltip/UiTooltip.vue
similarity index 82%
rename from @xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue
rename to @xen-orchestra/web-core/lib/components/ui/tooltip/UiTooltip.vue
index 7ac3dcf869e..6fa3917dc57 100644
--- a/@xen-orchestra/web-core/lib/components/tooltip/TooltipItem.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/tooltip/UiTooltip.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <div v-if="!isDisabled" ref="tooltipElement" class="app-tooltip typo p3-regular">
+  <div v-if="!isDisabled" ref="tooltipElement" class="ui-tooltip typo p3-regular">
     {{ content }}
   </div>
 </template>
@@ -57,7 +57,7 @@ watch(content, () => updatePlacement(), { flush: 'post' })
 </script>
 
 <style lang="postcss" scoped>
-.app-tooltip {
+.ui-tooltip {
   position: relative;
   display: inline-flex;
   padding: 0.4rem 0.8rem;
@@ -66,21 +66,21 @@ watch(content, () => updatePlacement(), { flush: 'post' })
   border-radius: 0.4rem;
   background-color: var(--color-neutral-txt-primary);
   z-index: 999999;
-}
 
-[data-placement^='top'] {
-  margin-bottom: 0.7rem;
-}
+  [data-placement^='top'] {
+    margin-bottom: 0.7rem;
+  }
 
-[data-placement^='right'] {
-  margin-left: 0.7rem;
-}
+  [data-placement^='right'] {
+    margin-left: 0.7rem;
+  }
 
-[data-placement^='bottom'] {
-  margin-top: 0.7rem;
-}
+  [data-placement^='bottom'] {
+    margin-top: 0.7rem;
+  }
 
-[data-placement^='left'] {
-  margin-right: 0.7rem;
+  [data-placement^='left'] {
+    margin-right: 0.7rem;
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue b/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
similarity index 60%
rename from @xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
rename to @xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
index 2944f85f478..33a6cee7e6a 100644
--- a/@xen-orchestra/web-core/lib/components/tree/TreeItemLabel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/tree-item-label/UiTreeItemLabel.vue
@@ -1,23 +1,24 @@
-<!-- v1.1 -->
+<!-- v2 -->
 <template>
   <RouterLink v-slot="{ isExactActive, isActive, href, navigate }" :to="route" custom>
     <div
       :class="isExactActive ? 'exact-active' : active || isActive ? 'active' : undefined"
-      class="tree-item-label"
-      v-bind="$attrs"
+      class="ui-tree-item-label"
+      v-bind="attrs"
     >
       <template v-if="depth > 1">
-        <TreeLine
+        <VtsTreeLine
           v-for="i in depth - 1"
           :key="i"
           :half-height="(!hasToggle && i === depth - 1) || !isExpanded"
           :right="i === depth - 1"
         />
       </template>
-      <ButtonIcon
+      <UiButtonIcon
         v-if="hasToggle"
         v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
         class="toggle"
+        accent="info"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
@@ -26,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <VtsIcon :icon accent="current" class="icon" />
+          <UiIcon :icon accent="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -38,14 +39,14 @@
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import TreeLine from '@core/components/tree/TreeLine.vue'
+import UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { inject, ref } from 'vue'
+import { inject, ref, useAttrs } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOptions({
@@ -53,8 +54,8 @@ defineOptions({
 })
 
 defineProps<{
-  icon?: IconDefinition
   route: RouteLocationRaw
+  icon?: IconDefinition
   active?: boolean
 }>()
 
@@ -62,6 +63,14 @@ const emit = defineEmits<{
   toggle: []
 }>()
 
+defineSlots<{
+  default(): any
+  icon?(): any
+  addons?(): any
+}>()
+
+const attrs = useAttrs()
+
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
@@ -70,65 +79,57 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.tree-item-label {
-  --color: var(--color-neutral-txt-primary);
-  --background-color: var(--color-neutral-background-primary);
-
-  &:is(.exact-active, .active) {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-info-background-selected);
-  }
-
-  &:hover {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-info-background-hover);
-  }
-
-  &:active {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-info-background-active);
-  }
-}
-
-/* IMPLEMENTATION */
-.tree-item-label {
+.ui-tree-item-label {
   display: flex;
   align-items: center;
-  color: var(--color);
-  background-color: var(--background-color);
+  color: var(--color-neutral-txt-primary);
+  background-color: var(--color-neutral-background-primary);
   border-radius: 0.8rem;
   gap: 0.4rem;
   padding: 0 0.8rem;
   margin-bottom: 0.2rem;
-}
 
-.link {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  padding: 0.8rem 0;
-  text-decoration: none;
-  color: inherit;
-  gap: 1.2rem;
+  .link {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    padding: 0.8rem 0;
+    text-decoration: none;
+    color: inherit;
+    gap: 1.2rem;
+
+    &:hover {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
 
-  &:hover {
-    color: var(--color-neutral-txt-primary);
+  .text {
+    padding-inline-end: 0.4rem;
   }
-}
 
-.text {
-  padding-inline-end: 0.4rem;
-}
+  .icon {
+    font-size: 1.6rem;
+  }
 
-.icon {
-  font-size: 1.6rem;
-}
+  .h-line {
+    width: 2rem;
+    border-bottom: 0.1rem solid var(--color-info-txt-base);
+    margin-left: -0.4rem;
+  }
+
+  /* INTERACTION VARIANTS */
 
-.h-line {
-  width: 2rem;
-  border-bottom: 0.1rem solid var(--color-info-txt-base);
-  margin-left: -0.4rem;
+  &:is(.exact-active, .active) {
+    background-color: var(--color-info-background-selected);
+  }
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+
+  &:active {
+    background-color: var(--color-info-background-active);
+  }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/user-link/UiUserLink.vue b/@xen-orchestra/web-core/lib/components/ui/user-link/UiUserLink.vue
new file mode 100644
index 00000000000..b84c967dc2f
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/user-link/UiUserLink.vue
@@ -0,0 +1,76 @@
+<!-- v3 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-user-link is-link typo p3-regular-underline">
+    <UiUserLogo size="extra-small" class="logo" />
+    {{ username }}
+  </RouterLink>
+  <span v-else :class="toVariants({ disabled })" class="ui-user-link typo p3-regular-underline">
+    <UiUserLogo size="extra-small" class="logo" />
+    {{ username }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  username: string
+  route?: RouteLocationRaw
+  disabled?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-user-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-info-txt-base);
+  gap: 0.8rem;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /* INTERACTION VARIANTS */
+
+  &.is-link {
+    &:hover {
+      color: var(--color-info-txt-hover);
+
+      .logo {
+        border-color: var(--color-info-txt-hover);
+      }
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+
+      .logo {
+        border-color: var(--color-info-txt-active);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.6rem;
+        border: 0.2rem solid var(--color-info-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+  }
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+
+    .logo {
+      border-color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/user-logo/UiUserLogo.vue b/@xen-orchestra/web-core/lib/components/ui/user-logo/UiUserLogo.vue
new file mode 100644
index 00000000000..b403f862132
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/user-logo/UiUserLogo.vue
@@ -0,0 +1,50 @@
+<!-- v2 -->
+<template>
+  <span :class="toVariants({ size })" class="ui-user-logo" />
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+
+export type UserLogoSize = 'extra-small' | 'small' | 'medium'
+
+defineProps<{
+  size: UserLogoSize
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-user-logo {
+  display: block;
+  background: var(--color-neutral-txt-primary) url('../../../assets/user.png') no-repeat;
+  border-style: solid;
+  border-color: var(--color-info-item-base);
+  border-radius: 20rem;
+
+  /* SIZE VARIANTS */
+
+  &.size--extra-small {
+    width: 1.6rem;
+    height: 1.6rem;
+    border-width: 0.1rem;
+    background-position: -0.85rem -0.55rem;
+    background-size: 2.88rem;
+  }
+
+  &.size--small {
+    width: 2.4rem;
+    height: 2.4rem;
+    border-width: 0.1rem;
+    background-position: -1.3rem -0.8rem;
+    background-size: 4.32rem;
+  }
+
+  &.size--medium {
+    width: 4rem;
+    height: 4rem;
+    border-width: 0.2rem;
+    background-position: -2.2rem -1.4rem;
+    background-size: 7.2rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/user/UserLink.vue b/@xen-orchestra/web-core/lib/components/user/UserLink.vue
deleted file mode 100644
index 553c663ca95..00000000000
--- a/@xen-orchestra/web-core/lib/components/user/UserLink.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <RouterLink v-if="route && !disabled" :to="route" class="user-link is-link typo p3-medium">
-    <UserLogo class="logo" />
-    {{ username }}
-  </RouterLink>
-  <span v-else :class="{ disabled }" class="user-link typo p3-medium">
-    <UserLogo class="logo" />
-    {{ username }}
-  </span>
-</template>
-
-<script lang="ts" setup>
-import UserLogo from '@core/components/user/UserLogo.vue'
-import { type RouteLocationRaw } from 'vue-router'
-
-defineProps<{
-  route?: RouteLocationRaw
-  disabled?: boolean
-  username: string
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.user-link {
-  --color: var(--color-info-txt-base);
-  --border-color: var(--color-info-txt-base);
-
-  &.is-link {
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-info-txt-hover);
-      --border-color: var(--color-info-txt-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-info-txt-active);
-      --border-color: var(--color-info-txt-active);
-    }
-  }
-
-  &.disabled {
-    --color: var(--color-neutral-txt-secondary);
-    --border-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.user-link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color);
-  gap: 0.8rem;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--border-color);
-  line-height: 0;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.is-link {
-    text-decoration: none;
-  }
-
-  .logo {
-    /* Override the default color of UserLogo,
-     to apply hover, active and disabled styles */
-    --border-color: inherit;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/user/UserLogo.vue b/@xen-orchestra/web-core/lib/components/user/UserLogo.vue
deleted file mode 100644
index 7a3399bb33d..00000000000
--- a/@xen-orchestra/web-core/lib/components/user/UserLogo.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <span :class="size" class="user-logo" />
-</template>
-
-<script lang="ts" setup>
-import type { UserLogoSize } from '@core/types/size.type'
-
-withDefaults(
-  defineProps<{
-    size?: UserLogoSize
-  }>(),
-  { size: 'extra-small' }
-)
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.user-logo {
-  --border-color: var(--color-info-txt-base);
-}
-
-/* SIZE VARIANTS */
-.user-logo {
-  &.extra-small {
-    --size: 1.6rem;
-    --border-size: 0.1rem;
-    --background-position: -0.8rem -0.493rem;
-    --background-size: 2.88rem;
-  }
-
-  &.small {
-    --size: 2.4rem;
-    --border-size: 0.1rem;
-    --background-position: -1.2rem -0.739rem;
-    --background-size: 4.32rem;
-  }
-
-  &.medium {
-    --size: 4rem;
-    --border-size: 0.2rem;
-    --background-position: -2rem -1.232rem;
-    --background-size: 7.2rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.user-logo {
-  display: block;
-  width: var(--size);
-  height: var(--size);
-  background: var(--color-neutral-txt-primary) url('../../assets/user.png') no-repeat var(--background-position) /
-    var(--background-size);
-  border: var(--border-size) solid var(--border-color);
-  border-radius: 20rem;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/composables/tree/define-tree.ts b/@xen-orchestra/web-core/lib/composables/tree/define-tree.ts
index 9bed7238d34..b5f67f8004c 100644
--- a/@xen-orchestra/web-core/lib/composables/tree/define-tree.ts
+++ b/@xen-orchestra/web-core/lib/composables/tree/define-tree.ts
@@ -50,7 +50,7 @@ export function defineTree<
   optionsOrGetChildTree?: TreeNodeOptions<TData, TDiscriminator> | ChildTreeDefinitionGetter<TData, TChildDefinition>,
   getChildTreeOrNone?: ChildTreeDefinitionGetter<TData, TChildDefinition>
 ) {
-  const options = (typeof optionsOrGetChildTree === 'function' ? {} : optionsOrGetChildTree ?? {}) as TreeNodeOptions<
+  const options = (typeof optionsOrGetChildTree === 'function' ? {} : (optionsOrGetChildTree ?? {})) as TreeNodeOptions<
     TData,
     TDiscriminator
   >
diff --git a/@xen-orchestra/web-core/lib/composables/tree/tree-node-base.ts b/@xen-orchestra/web-core/lib/composables/tree/tree-node-base.ts
index a07e44d9270..8f69cfc7f70 100644
--- a/@xen-orchestra/web-core/lib/composables/tree/tree-node-base.ts
+++ b/@xen-orchestra/web-core/lib/composables/tree/tree-node-base.ts
@@ -1,5 +1,5 @@
 import type { Branch } from '@core/composables/tree/branch'
-import type { Identifiable, Labeled, TreeContext, TreeNodeOptions } from '@core/composables/tree/types'
+import type { Identifiable, Labeled, TreeContext, TreeNodeId, TreeNodeOptions } from '@core/composables/tree/types'
 
 export abstract class TreeNodeBase<TData extends object = any, TDiscriminator = any> {
   abstract readonly isBranch: boolean
@@ -27,16 +27,16 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     this.options = options ?? ({} as TreeNodeOptions<TData, TDiscriminator>)
   }
 
-  get id() {
+  get id(): TreeNodeId {
     if (this.options.getId === undefined) {
       return (this.data as Identifiable).id
     }
 
     if (typeof this.options.getId === 'function') {
-      return this.options.getId(this.data)
+      return this.options.getId(this.data as Identifiable)
     }
 
-    return this.data[this.options.getId]
+    return this.data[this.options.getId as keyof TData] as TreeNodeId
   }
 
   get label() {
@@ -45,10 +45,10 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     }
 
     if (typeof this.options.getLabel === 'function') {
-      return this.options.getLabel(this.data)
+      return this.options.getLabel(this.data as Labeled)
     }
 
-    return this.data[this.options.getLabel]
+    return this.data[this.options.getLabel as keyof TData]
   }
 
   get discriminator() {
diff --git a/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue b/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue
index 7ed3314d779..8393c0da76b 100644
--- a/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue
+++ b/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue
@@ -7,6 +7,8 @@
           content: sidebarStore.isExpanded ? $t('core.sidebar.close') : $t('core.sidebar.open'),
           placement: 'right',
         }"
+        accent="info"
+        size="medium"
         :icon="sidebarStore.isExpanded ? faAngleDoubleLeft : faBars"
         class="sidebar-toggle"
         @click="sidebarStore.toggleExpand()"
@@ -14,8 +16,8 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <Backdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
-      <LayoutSidebar class="sidebar">
+      <VtsBackdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
+      <VtsLayoutSidebar class="sidebar">
         <template #header>
           <slot name="sidebar-header" />
         </template>
@@ -25,7 +27,7 @@
         <template #footer>
           <slot name="sidebar-footer" />
         </template>
-      </LayoutSidebar>
+      </VtsLayoutSidebar>
       <main class="main-container">
         <slot name="content" />
       </main>
@@ -34,9 +36,9 @@
 </template>
 
 <script lang="ts" setup>
-import Backdrop from '@core/components/backdrop/Backdrop.vue'
-import UiButtonIcon from '@core/components/button/ButtonIcon.vue'
-import LayoutSidebar from '@core/components/layout/LayoutSidebar.vue'
+import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import VtsLayoutSidebar from '@core/components/layout/VtsLayoutSidebar.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/web-core/lib/locales/de.json b/@xen-orchestra/web-core/lib/locales/de.json
index f765cdb2f0f..1bf4d47feef 100644
--- a/@xen-orchestra/web-core/lib/locales/de.json
+++ b/@xen-orchestra/web-core/lib/locales/de.json
@@ -28,7 +28,8 @@
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
   "patches": "Patches",
-  "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
+  "power-on-vm-for-console": "Konsole ist nach Start der VM verfügbar",
+  "power-on-host-for-console": "Konsole ist nach Start des Hosts verfügbar",
   "running-vm": "VM eingeschalten | VMs eingeschalten",
   "stats": "Statistiken",
   "storage": "Speicher",
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index 7dcf17bee0c..abb891c1db5 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -52,7 +52,8 @@
   "object-not-found": "Object {id} can't be found…",
   "other": "Other",
   "patches": "Patches",
-  "power-on-for-console": "Power on your VM to access its console",
+  "power-on-vm-for-console": "Power on your VM to access its console",
+  "power-on-host-for-console": "Power on your host to access its console",
   "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
   "stats": "Stats",
diff --git a/@xen-orchestra/web-core/lib/locales/fa.json b/@xen-orchestra/web-core/lib/locales/fa.json
index 25eed5574fa..9ba04b8a41a 100644
--- a/@xen-orchestra/web-core/lib/locales/fa.json
+++ b/@xen-orchestra/web-core/lib/locales/fa.json
@@ -39,7 +39,8 @@
   "master": "میزبان اصلی",
   "network": "شبکه",
   "patches": "وصله ها",
-  "power-on-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "power-on-vm-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "power-on-host-for-console": "هاست خود را برای دسترسی به کنسول آن روشن کنید",
   "running-vm": "ماشین های مجازی در حال اجرا | ماشین مجازی در حال اجرا",
   "stats": "آمار",
   "storage": "ذخیره سازی",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index 8ff48dc5e5c..a023fdfcb37 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -52,7 +52,8 @@
   "object-not-found": "L'objet {id} est introuvable…",
   "other": "Autre",
   "patches": "Patches",
-  "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
+  "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
   "stats": "Stats",
diff --git a/@xen-orchestra/web-core/lib/types/backup.type.ts b/@xen-orchestra/web-core/lib/types/backup.type.ts
deleted file mode 100644
index 97e0345a648..00000000000
--- a/@xen-orchestra/web-core/lib/types/backup.type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { RouteLocationRaw } from 'vue-router'
-
-export type BackupState = 'success' | 'failure' | 'partial'
-
-export type BackupStates = BackupState[]
-
-export type Backup = {
-  label: string
-  route?: RouteLocationRaw
-  states: BackupStates
-}
diff --git a/@xen-orchestra/web-core/lib/types/color.type.ts b/@xen-orchestra/web-core/lib/types/color.type.ts
index 6b8a036c4ac..20ada938870 100644
--- a/@xen-orchestra/web-core/lib/types/color.type.ts
+++ b/@xen-orchestra/web-core/lib/types/color.type.ts
@@ -1,3 +1 @@
-export type Color = 'info' | 'success' | 'warning' | 'danger'
-
-export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+export type Color = 'normal' | 'success' | 'warning' | 'danger'
diff --git a/@xen-orchestra/web-core/lib/types/size.type.ts b/@xen-orchestra/web-core/lib/types/size.type.ts
deleted file mode 100644
index 87af42d1773..00000000000
--- a/@xen-orchestra/web-core/lib/types/size.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type UserLogoSize = 'extra-small' | 'small' | 'medium'
diff --git a/@xen-orchestra/web-core/lib/types/task.type.ts b/@xen-orchestra/web-core/lib/types/task.type.ts
deleted file mode 100644
index bc27a184951..00000000000
--- a/@xen-orchestra/web-core/lib/types/task.type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type TaskStatus = 'pending' | 'success' | 'failure'
-
-export type TaskTab = TaskStatus | 'all'
-
-export type Task = {
-  id: string | number
-  name: string
-  status: TaskStatus
-  tag?: string
-  start?: number
-  end?: number
-  subtasks?: Task[]
-}
diff --git a/@xen-orchestra/web-core/package.json b/@xen-orchestra/web-core/package.json
index e0bb15207ad..3aaea515377 100644
--- a/@xen-orchestra/web-core/package.json
+++ b/@xen-orchestra/web-core/package.json
@@ -23,19 +23,19 @@
     "placement.js": "^1.0.0-beta.5"
   },
   "peerDependencies": {
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
diff --git a/@xen-orchestra/web/package.json b/@xen-orchestra/web/package.json
index 35137305d40..90a87beba32 100644
--- a/@xen-orchestra/web/package.json
+++ b/@xen-orchestra/web/package.json
@@ -20,26 +20,26 @@
     "@tsconfig/node18": "^18.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^18.19.7",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/math": "^10.7.1",
     "@xen-orchestra/web-core": "^0.4.0",
-    "human-format": "^1.2.0",
+    "human-format": "^1.2.1",
     "lodash-es": "^4.17.21",
     "npm-run-all2": "^6.1.1",
-    "pinia": "^2.1.7",
+    "pinia": "^2.2.6",
     "postcss": "^8.4.33",
     "postcss-color-function": "^4.1.0",
     "postcss-custom-media": "^10.0.2",
     "postcss-nested": "^6.0.1",
-    "typescript": "~5.3.3",
+    "typescript": "~5.6.3",
     "unplugin-vue-router": "^0.10.1",
-    "vite": "^5.0.11",
-    "vue": "~3.4.13",
+    "vite": "^5.4.10",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0",
-    "vue-tsc": "^1.8.27"
+    "vue-router": "^4.4.5",
+    "vue-tsc": "^2.1.10"
   },
   "overrides": {
     "vite": {
diff --git a/@xen-orchestra/web/src/App.vue b/@xen-orchestra/web/src/App.vue
index 637f3aaf2c9..458609601f1 100644
--- a/@xen-orchestra/web/src/App.vue
+++ b/@xen-orchestra/web/src/App.vue
@@ -2,12 +2,12 @@
   <AppLayout>
     <RouterView />
   </AppLayout>
-  <TooltipList />
+  <VtsTooltipList />
 </template>
 
 <script lang="ts" setup>
 import AppLayout from '@/layouts/AppLayout.vue'
-import TooltipList from '@core/components/tooltip/TooltipList.vue'
+import VtsTooltipList from '@core/components/tooltip-list/VtsTooltipList.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { logicAnd } from '@vueuse/math'
diff --git a/@xen-orchestra/web/src/components/SidebarSearch.vue b/@xen-orchestra/web/src/components/SidebarSearch.vue
index 314179bcadd..4881e023ef3 100644
--- a/@xen-orchestra/web/src/components/SidebarSearch.vue
+++ b/@xen-orchestra/web/src/components/SidebarSearch.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import DropdownTitle from '@core/components/dropdown/DropdownTitle.vue'
-import UiInput from '@core/components/input/UiInput.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 
 const search = defineModel<string>({ default: '' })
diff --git a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
index 01ba8f5de52..9d4ee7ac3a2 100644
--- a/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
+++ b/@xen-orchestra/web/src/components/account-menu/AccountMenuTrigger.vue
@@ -5,14 +5,14 @@
     class="account-menu-trigger"
     type="button"
   >
-    <UserLogo class="logo" size="medium" />
+    <UiUserLogo class="logo" size="medium" />
     <VtsIcon :icon="faAngleDown" class="icon" accent="info" />
   </button>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import UserLogo from '@core/components/user/UserLogo.vue'
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { vTooltip } from '@core/directives/tooltip.directive'
diff --git a/@xen-orchestra/web/src/components/host/HostHeader.vue b/@xen-orchestra/web/src/components/host/HostHeader.vue
index 8584ba91c95..dc5bb9e4dc3 100644
--- a/@xen-orchestra/web/src/components/host/HostHeader.vue
+++ b/@xen-orchestra/web/src/components/host/HostHeader.vue
@@ -1,13 +1,17 @@
 <template>
-  <HeadBar>
+  <UiHeadBar>
     <template #icon>
-      <ObjectIcon type="host" :state="host.power_state.toLocaleLowerCase() as HostState" />
+      <UiObjectIcon size="medium" type="host" :state="host.power_state.toLocaleLowerCase() as HostState" />
     </template>
     {{ host.name_label }}
-  </HeadBar>
+  </UiHeadBar>
   <TabList>
     <TabItem disabled>{{ $t('dashboard') }}</TabItem>
-    <TabItem disabled>{{ $t('console') }}</TabItem>
+    <RouterLink v-slot="{ isActive, href }" :to="`/host/${host.id}/console`" custom>
+      <TabItem :active="isActive" :href tag="a">
+        {{ $t('console') }}
+      </TabItem>
+    </RouterLink>
     <TabItem disabled>{{ $t('alarms') }}</TabItem>
     <TabItem disabled>{{ $t('stats') }}</TabItem>
     <TabItem disabled>{{ $t('system') }}</TabItem>
@@ -25,10 +29,10 @@
 <script lang="ts" setup>
 import type { XoHost } from '@/types/xo/host.type'
 import type { HostState } from '@core/types/object-icon.type'
-import HeadBar from '@core/components/head-bar/HeadBar.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
 
 defineProps<{
   host: XoHost
diff --git a/@xen-orchestra/web/src/components/pool/PoolHeader.vue b/@xen-orchestra/web/src/components/pool/PoolHeader.vue
index 4edad32394b..fa9bf1764dd 100644
--- a/@xen-orchestra/web/src/components/pool/PoolHeader.vue
+++ b/@xen-orchestra/web/src/components/pool/PoolHeader.vue
@@ -1,7 +1,7 @@
 <template>
-  <HeadBar :icon="faCity">
+  <UiHeadBar :icon="faCity">
     {{ pool.name_label }}
-  </HeadBar>
+  </UiHeadBar>
   <TabList>
     <TabItem disabled>{{ $t('dashboard') }}</TabItem>
     <TabItem disabled>{{ $t('alarms') }}</TabItem>
@@ -25,9 +25,9 @@
 
 <script lang="ts" setup>
 import type { XoPool } from '@/types/xo/pool.type'
-import HeadBar from '@core/components/head-bar/HeadBar.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 
 defineProps<{
diff --git a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
index a735852a9ab..3633201f1a3 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue
@@ -1,28 +1,28 @@
 <template>
   <UiCard>
-    <CardTitle>
+    <UiCardTitle>
       {{ $t('backup-issues') }}
-      <VtsCounter :value="backupIssues.length" accent="danger" size="medium" variant="primary" />
+      <UiCounter :value="backupIssues.length" accent="danger" size="medium" variant="primary" />
       <template #description>{{ $t('in-last-three-jobs') }}</template>
-    </CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
-      <NoDataHero v-if="!hasBackupIssues" type="card" />
+    </UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
+      <VtsNoDataHero v-if="!hasBackupIssues" type="card" />
       <div v-else class="backup-items">
-        <BackupItem v-for="(coreBackupIssue, index) in coreBackupIssues" :key="index" :backup="coreBackupIssue" />
+        <VtsBackupItem v-for="(coreBackupIssue, index) in coreBackupIssues" :key="index" :backup="coreBackupIssue" />
       </div>
-    </LoadingHero>
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 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 VtsCounter from '@core/components/counter/VtsCounter.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 VtsBackupItem from '@core/components/backup-item/VtsBackupItem.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import { computed } from 'vue'
 
 const { backupIssues, isReady } = useDashboardStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/site/dashboard/BackupRepository.vue b/@xen-orchestra/web/src/components/site/dashboard/BackupRepository.vue
index 87c178ed3f8..50041dc2a99 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/BackupRepository.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/BackupRepository.vue
@@ -1,43 +1,43 @@
 <template>
   <div class="backup-repository">
-    <CardTitle>
+    <UiCardTitle>
       {{ $t('backup-repository') }}
       <template #description>{{ $t('for-backup') }}</template>
-    </CardTitle>
-    <LoadingHero type="card" :disabled="isReady">
-      <StackedBarWithLegend :max-value="backupRepositories.total?.value" :segments />
+    </UiCardTitle>
+    <VtsLoadingHero type="card" :disabled="isReady">
+      <VtsStackedBarWithLegend :max-value="backupRepositories.total?.value" :segments />
       <div class="numbers">
-        <CardNumbers
+        <UiCardNumbers
           :value="backupRepositories.used?.value"
           :unit="backupRepositories.used?.prefix"
           :label="$t('used')"
           size="medium"
         />
-        <CardNumbers
+        <UiCardNumbers
           :value="backupRepositories.available?.value"
           :unit="backupRepositories.available?.prefix"
           :label="$t('available')"
           size="medium"
         />
-        <CardNumbers
+        <UiCardNumbers
           :value="backupRepositories.total?.value"
           :unit="backupRepositories.total?.prefix"
           :label="$t('total')"
           size="medium"
         />
       </div>
-    </LoadingHero>
+    </VtsLoadingHero>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import StackedBarWithLegend, {
+import VtsStackedBarWithLegend, {
   type StackedBarWithLegendProps,
-} from '@core/components/stacked-bar-with-legend/StackedBarWithLegend.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+} from '@core/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -49,13 +49,13 @@ const segments: ComputedRef<StackedBarWithLegendProps['segments']> = computed(()
   {
     label: t('backups'),
     value: backupRepositories.value.backups?.value ?? 0,
-    color: 'primary',
+    accent: 'info',
     unit: backupRepositories.value.backups?.prefix,
   },
   {
     label: t('other'),
     value: backupRepositories.value.other?.value ?? 0,
-    color: 'warning',
+    accent: 'warning',
     unit: backupRepositories.value.other?.prefix,
   },
 ])
diff --git a/@xen-orchestra/web/src/components/site/dashboard/Backups.vue b/@xen-orchestra/web/src/components/site/dashboard/Backups.vue
index 8b58ad50ba7..f32bb3d29ad 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/Backups.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/Backups.vue
@@ -1,29 +1,29 @@
 <template>
   <UiCard>
-    <CardTitle>{{ $t('backups') }}</CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
-      <NoDataHero v-if="record?.backups === undefined" type="card" />
+    <UiCardTitle>{{ $t('backups') }}</UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
+      <VtsNoDataHero v-if="record?.backups === undefined" type="card" />
       <template v-else>
-        <DonutChartWithLegend :segments="jobsSegments" :title="jobsTitle" />
-        <CardNumbers :label="t('total')" :value="record?.backups?.jobs.total" size="small" />
-        <Divider type="stretch" />
-        <DonutChartWithLegend :segments="vmsProtectionSegments" :title="vmsProtectionTitle" />
+        <VtsDonutChartWithLegend :segments="jobsSegments" :title="jobsTitle" />
+        <UiCardNumbers :label="t('total')" :value="record?.backups?.jobs.total" size="small" />
+        <VtsDivider type="stretch" />
+        <VtsDonutChartWithLegend :segments="vmsProtectionSegments" :title="vmsProtectionTitle" />
       </template>
-    </LoadingHero>
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import Divider from '@core/components/divider/Divider.vue'
-import DonutChartWithLegend, {
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import VtsDonutChartWithLegend, {
   type DonutChartWithLegendProps,
-} from '@core/components/donut-chart-with-legend/DonutChartWithLegend.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'
+} from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -42,22 +42,22 @@ const jobsSegments = computed<DonutChartWithLegendProps['segments']>(() => [
   {
     label: t('backups.jobs.running-good'),
     value: record.value?.backups?.jobs.successful ?? 0,
-    color: 'success',
+    accent: 'success',
   },
   {
     label: t('backups.jobs.at-least-one-skipped'),
     value: record.value?.backups?.jobs.skipped ?? 0,
-    color: 'primary',
+    accent: 'info',
   },
   {
     label: t('backups.jobs.looks-like-issue'),
     value: record.value?.backups?.jobs.failed ?? 0,
-    color: 'danger',
+    accent: 'danger',
   },
   {
     label: t('backups.jobs.disabled'),
     value: record.value?.backups?.jobs.disabled ?? 0,
-    color: 'disabled',
+    accent: 'muted',
   },
 ])
 
@@ -71,17 +71,17 @@ const vmsProtectionSegments = computed<DonutChartWithLegendProps['segments']>(()
   {
     label: t('backups.vms-protection.protected'),
     value: record.value?.backups?.vmsProtection.protected ?? 0,
-    color: 'success',
+    accent: 'success',
   },
   {
     label: t('backups.vms-protection.unprotected'),
     value: record.value?.backups?.vmsProtection.unprotected ?? 0,
-    color: 'warning',
+    accent: 'warning',
   },
   {
     label: t('backups.vms-protection.no-job'),
     value: record.value?.backups?.vmsProtection.notInJob ?? 0,
-    color: 'danger',
+    accent: 'danger',
   },
 ])
 </script>
diff --git a/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue b/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
index 90790909ce6..cacfb4df11c 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
@@ -1,22 +1,22 @@
 <template>
   <UiCard>
-    <CardTitle>{{ $t('hosts-status') }}</CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
-      <DonutChartWithLegend :icon="faServer" :segments />
-      <CardNumbers :label="t('total')" :value="hosts.length" class="total" size="small" />
-    </LoadingHero>
+    <UiCardTitle>{{ $t('hosts-status') }}</UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
+      <VtsDonutChartWithLegend :icon="faServer" :segments />
+      <UiCardNumbers :label="t('total')" :value="hosts.length" class="total" size="small" />
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import { HOST_POWER_STATE } from '@/types/xo/host.type'
-import type { DonutChartWithLegendProps } from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import DonutChartWithLegend from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import UiCard from '@core/components/UiCard.vue'
+import type { DonutChartWithLegendProps } from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
+import VtsDonutChartWithLegend from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { useItemCounter } from '@core/composables/item-counter.composable'
 import { faServer } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -34,17 +34,17 @@ const segments = computed<DonutChartWithLegendProps['segments']>(() => [
   {
     label: t('hosts-status.running'),
     value: hostsCount.value.running,
-    color: 'success',
+    accent: 'success',
   },
   {
     label: t('hosts-status.halted'),
     value: hostsCount.value.halted,
-    color: 'warning',
+    accent: 'warning',
   },
   {
     label: t('hosts-status.unknown'),
     value: hostsCount.value.$other,
-    color: 'disabled',
+    accent: 'muted',
     tooltip: t('hosts-status.unknown.tooltip'),
   },
 ])
diff --git a/@xen-orchestra/web/src/components/site/dashboard/Patches.vue b/@xen-orchestra/web/src/components/site/dashboard/Patches.vue
index 51d830d89ef..3c221891afa 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/Patches.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/Patches.vue
@@ -1,23 +1,23 @@
 <template>
   <UiCard>
-    <CardTitle>{{ $t('patches') }}</CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
-      <DonutChartWithLegend :segments="poolsSegments" :title="poolsTitle" />
-      <Divider type="stretch" />
-      <DonutChartWithLegend :segments="hostsSegments" :title="hostsTitle" />
-    </LoadingHero>
+    <UiCardTitle>{{ $t('patches') }}</UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
+      <VtsDonutChartWithLegend :segments="poolsSegments" :title="poolsTitle" />
+      <VtsDivider type="stretch" />
+      <VtsDonutChartWithLegend :segments="hostsSegments" :title="hostsTitle" />
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import Divider from '@core/components/divider/Divider.vue'
-import DonutChartWithLegend, {
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import VtsDonutChartWithLegend, {
   type DonutChartWithLegendProps,
-} from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import UiCard from '@core/components/UiCard.vue'
+} from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -36,8 +36,8 @@ const poolsSegments: ComputedRef<DonutChartWithLegendProps['segments']> = comput
   const nUpToDatePools = nPools - nPoolsWithMissingPatches
 
   return [
-    { value: nUpToDatePools, color: 'success', label: t('up-to-date') },
-    { value: nPoolsWithMissingPatches, color: 'warning', label: t('missing-patches') },
+    { value: nUpToDatePools, accent: 'success', label: t('up-to-date') },
+    { value: nPoolsWithMissingPatches, accent: 'warning', label: t('missing-patches') },
   ]
 })
 
@@ -53,12 +53,12 @@ const hostsSegments = computed(() => {
   const nUpToDateHosts = (nHosts ?? 0) - (nHostsWithMissingPatches + (nHostsEol ?? 0))
 
   const segments: DonutChartWithLegendProps['segments'] = [
-    { value: nUpToDateHosts, color: 'success', label: t('up-to-date') },
-    { value: nHostsWithMissingPatches, color: 'warning', label: t('missing-patches') },
+    { value: nUpToDateHosts, accent: 'success', label: t('up-to-date') },
+    { value: nHostsWithMissingPatches, accent: 'warning', label: t('missing-patches') },
   ]
 
   if (nHostsEol !== undefined) {
-    segments.push({ value: nHostsEol, color: 'danger', label: t('eol'), tooltip: t('end-of-life') })
+    segments.push({ value: nHostsEol, accent: 'danger', label: t('eol'), tooltip: t('end-of-life') })
   }
 
   return segments
diff --git a/@xen-orchestra/web/src/components/site/dashboard/Repositories.vue b/@xen-orchestra/web/src/components/site/dashboard/Repositories.vue
index d42e8f4053b..0b9e5093815 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/Repositories.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/Repositories.vue
@@ -1,9 +1,9 @@
 <template>
   <UiCard :horizontal="uiStore.isDesktop">
     <BackupRepository />
-    <Divider type="stretch" />
+    <VtsDivider type="stretch" />
     <StorageRepository />
-    <Divider type="stretch" />
+    <VtsDivider type="stretch" />
     <S3BackupRepository />
   </UiCard>
 </template>
@@ -12,8 +12,8 @@
 import BackupRepository from '@/components/site/dashboard/BackupRepository.vue'
 import S3BackupRepository from '@/components/site/dashboard/S3BackupRepository.vue'
 import StorageRepository from '@/components/site/dashboard/StorageRepository.vue'
-import Divider from '@core/components/divider/Divider.vue'
-import UiCard from '@core/components/UiCard.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useUiStore } from '@core/stores/ui.store'
 
 const uiStore = useUiStore()
diff --git a/@xen-orchestra/web/src/components/site/dashboard/ResourcesOverview.vue b/@xen-orchestra/web/src/components/site/dashboard/ResourcesOverview.vue
index 1c52186699d..4a938cd7064 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/ResourcesOverview.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/ResourcesOverview.vue
@@ -1,28 +1,33 @@
 <template>
   <UiCard>
-    <CardTitle>{{ $t('resources-overview') }}</CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
+    <UiCardTitle>{{ $t('resources-overview') }}</UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
       <div class="line-1">
-        <CardNumbers :label="$t('total-memory')" :value="memorySize?.value" :unit="memorySize?.prefix" size="medium" />
-        <CardNumbers :label="$t('total-cpus')" :value="nCpus" size="medium" />
+        <UiCardNumbers
+          :label="$t('total-memory')"
+          :value="memorySize?.value"
+          :unit="memorySize?.prefix"
+          size="medium"
+        />
+        <UiCardNumbers :label="$t('total-cpus')" :value="nCpus" size="medium" />
       </div>
-      <CardNumbers
+      <UiCardNumbers
         :label="$t('total-storage-repository')"
         :value="srSize?.value"
         :unit="srSize?.prefix"
         size="medium"
       />
-    </LoadingHero>
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
 import { formatSizeRaw } from '@/utils/size.util'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import UiCard from '@core/components/UiCard.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { computed } from 'vue'
 
 const { record, isReady } = useDashboardStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/site/dashboard/S3BackupRepository.vue b/@xen-orchestra/web/src/components/site/dashboard/S3BackupRepository.vue
index ac34015c291..84d12cd3b23 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/S3BackupRepository.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/S3BackupRepository.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="s3-backup-repository">
-    <CardTitle>
+    <UiCardTitle>
       {{ $t('s3-backup-repository') }}
       <template #description>{{ $t('for-backup') }}</template>
-    </CardTitle>
-    <CardNumbers :value="usedSize?.value" :unit="usedSize?.prefix" :label="$t('used')" size="medium" />
+    </UiCardTitle>
+    <UiCardNumbers :value="usedSize?.value" :unit="usedSize?.prefix" :label="$t('used')" size="medium" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
 import { formatSizeRaw } from '@/utils/size.util'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { computed } from 'vue'
 
 const { record } = useDashboardStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/site/dashboard/StorageRepository.vue b/@xen-orchestra/web/src/components/site/dashboard/StorageRepository.vue
index 560f43177b8..14d2e3a60f6 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/StorageRepository.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/StorageRepository.vue
@@ -1,43 +1,43 @@
 <template>
   <div class="storage-repository">
-    <CardTitle>
+    <UiCardTitle>
       {{ $t('storage-repository') }}
       <template #description>{{ $t('for-replication') }}</template>
-    </CardTitle>
-    <LoadingHero type="card" :disabled="isReady">
-      <StackedBarWithLegend :max-value="storageRepositories.total?.value" :segments />
+    </UiCardTitle>
+    <VtsLoadingHero type="card" :disabled="isReady">
+      <VtsStackedBarWithLegend :max-value="storageRepositories.total?.value" :segments />
       <div class="numbers">
-        <CardNumbers
+        <UiCardNumbers
           :value="storageRepositories.used?.value"
           :unit="storageRepositories.used?.prefix"
           :label="$t('used')"
           size="medium"
         />
-        <CardNumbers
+        <UiCardNumbers
           :value="storageRepositories.available?.value"
           :unit="storageRepositories.available?.prefix"
           :label="$t('available')"
           size="medium"
         />
-        <CardNumbers
+        <UiCardNumbers
           :value="storageRepositories.total?.value"
           :unit="storageRepositories.total?.prefix"
           :label="$t('total')"
           size="medium"
         />
       </div>
-    </LoadingHero>
+    </VtsLoadingHero>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import StackedBarWithLegend, {
+import VtsStackedBarWithLegend, {
   type StackedBarWithLegendProps,
-} from '@core/components/stacked-bar-with-legend/StackedBarWithLegend.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+} from '@core/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -49,7 +49,7 @@ const segments: ComputedRef<StackedBarWithLegendProps['segments']> = computed(()
   {
     label: t('backups'),
     value: storageRepositories.value.used?.value ?? 0,
-    color: 'primary',
+    accent: 'info',
     unit: storageRepositories.value.used?.prefix,
   },
 ])
diff --git a/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue b/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
index cc1557fc764..0f07bd436f3 100644
--- a/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
+++ b/@xen-orchestra/web/src/components/site/dashboard/VmsStatus.vue
@@ -1,23 +1,23 @@
 <template>
   <UiCard>
-    <CardTitle>{{ $t('vms-status') }}</CardTitle>
-    <LoadingHero :disabled="isReady" type="card">
-      <DonutChartWithLegend :icon="faDesktop" :segments />
-      <CardNumbers :label="t('total')" :value="vms.length" class="total" size="small" />
-    </LoadingHero>
+    <UiCardTitle>{{ $t('vms-status') }}</UiCardTitle>
+    <VtsLoadingHero :disabled="isReady" type="card">
+      <VtsDonutChartWithLegend :icon="faDesktop" :segments />
+      <UiCardNumbers :label="t('total')" :value="vms.length" class="total" size="small" />
+    </VtsLoadingHero>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import { VM_POWER_STATE } from '@/types/xo/vm.type'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import DonutChartWithLegend, {
+import VtsDonutChartWithLegend, {
   type DonutChartWithLegendProps,
-} from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import UiCard from '@core/components/UiCard.vue'
+} from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import { useItemCounter } from '@core/composables/item-counter.composable'
 import { faDesktop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -35,18 +35,18 @@ const segments = computed<DonutChartWithLegendProps['segments']>(() => [
   {
     label: t('vms-status.running'),
     value: vmsCount.value.running,
-    color: 'success',
+    accent: 'success',
   },
   {
     label: t('vms-status.inactive'),
     value: vmsCount.value.inactive,
-    color: 'secondary',
+    accent: 'neutral',
     tooltip: t('vms-status.inactive.tooltip'),
   },
   {
     label: t('vms-status.unknown'),
     value: vmsCount.value.$other,
-    color: 'disabled',
+    accent: 'muted',
     tooltip: t('vms-status.unknown.tooltip'),
   },
 ])
diff --git a/@xen-orchestra/web/src/components/task/QuickTaskButton.vue b/@xen-orchestra/web/src/components/task/QuickTaskButton.vue
index a3ce8edc74e..4feaf69afff 100644
--- a/@xen-orchestra/web/src/components/task/QuickTaskButton.vue
+++ b/@xen-orchestra/web/src/components/task/QuickTaskButton.vue
@@ -1,11 +1,11 @@
 <template>
-  <QuickTaskButton :loading="!isReady" :tasks />
+  <VtsQuickTaskButton :loading="!isReady" :tasks />
 </template>
 
 <script lang="ts" setup>
 import { useTaskStore } from '@/stores/xo-rest-api/task.store'
 import { convertTaskToCore } from '@/utils/convert-task-to-core.util'
-import QuickTaskButton from '@core/components/task/QuickTaskButton.vue'
+import VtsQuickTaskButton from '@core/components/task/VtsQuickTaskButton.vue'
 import { computed } from 'vue'
 
 const { records, isReady } = useTaskStore().subscribe()
diff --git a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
index b4e59b8bed7..143b611472e 100644
--- a/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/HostTreeItem.vue
@@ -1,17 +1,18 @@
 <template>
-  <TreeItem :expanded="branch.isExpanded">
-    <TreeItemLabel :icon="faServer" :route="`/host/${branch.data.id}`" @toggle="branch.toggleExpand()">
+  <VtsTreeItem :expanded="branch.isExpanded">
+    <UiTreeItemLabel :icon="faServer" :route="`/host/${branch.data.id}`" @toggle="branch.toggleExpand()">
       {{ branch.data.name_label }}
       <template #icon>
-        <ObjectIcon
+        <UiObjectIcon
           v-tooltip="branch.data.power_state"
           type="host"
+          size="medium"
           :state="branch.data.power_state.toLocaleLowerCase() as HostState"
         />
       </template>
       <template #addons>
-        <VtsIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
-        <VtsCounter
+        <UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
+        <UiCounter
           v-tooltip="$t('running-vm', runningVmsCount)"
           :value="runningVmsCount"
           accent="info"
@@ -19,13 +20,13 @@
           size="small"
         />
       </template>
-    </TreeItemLabel>
+    </UiTreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
-      <TreeList>
+      <VtsTreeList>
         <VmTreeList :leaves="branch.children" />
-      </TreeList>
+      </VtsTreeList>
     </template>
-  </TreeItem>
+  </VtsTreeItem>
 </template>
 
 <script lang="ts" setup>
@@ -34,12 +35,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 VtsCounter from '@core/components/counter/VtsCounter.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.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 UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.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 ea5ab801817..e7fb5105c33 100644
--- a/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/PoolTreeItem.vue
@@ -1,9 +1,9 @@
 <template>
-  <TreeItem :expanded="branch.isExpanded">
-    <TreeItemLabel :icon="faCity" :route="`/pool/${branch.data.id}`" @toggle="branch.toggleExpand()">
+  <VtsTreeItem :expanded="branch.isExpanded">
+    <UiTreeItemLabel :icon="faCity" :route="`/pool/${branch.data.id}`" @toggle="branch.toggleExpand()">
       {{ branch.data.name_label }}
       <template #addons>
-        <VtsCounter
+        <UiCounter
           v-tooltip="$t('running-vm', runningVmsCount)"
           :value="runningVmsCount"
           accent="info"
@@ -11,14 +11,14 @@
           size="small"
         />
       </template>
-    </TreeItemLabel>
+    </UiTreeItemLabel>
     <template v-if="branch.hasChildren" #sublist>
-      <TreeList>
+      <VtsTreeList>
         <HostTreeList :branches="treeBranches" />
         <VmTreeList :leaves="vmLeaves" />
-      </TreeList>
+      </VtsTreeList>
     </template>
-  </TreeItem>
+  </VtsTreeItem>
 </template>
 
 <script lang="ts" setup>
@@ -26,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 VtsCounter from '@core/components/counter/VtsCounter.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 VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
diff --git a/@xen-orchestra/web/src/components/tree/PoolTreeList.vue b/@xen-orchestra/web/src/components/tree/PoolTreeList.vue
index d20f88cff03..707130ba5b0 100644
--- a/@xen-orchestra/web/src/components/tree/PoolTreeList.vue
+++ b/@xen-orchestra/web/src/components/tree/PoolTreeList.vue
@@ -1,13 +1,13 @@
 <template>
-  <TreeList class="pool-tree-list">
+  <VtsTreeList class="pool-tree-list">
     <PoolTreeItem v-for="branch in branches" :key="branch.id" :branch />
-  </TreeList>
+  </VtsTreeList>
 </template>
 
 <script lang="ts" setup>
 import PoolTreeItem from '@/components/tree/PoolTreeItem.vue'
 import type { PoolBranch } from '@/types/tree.type'
-import TreeList from '@core/components/tree/TreeList.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
 
 defineProps<{
   branches: PoolBranch[]
diff --git a/@xen-orchestra/web/src/components/tree/VmTreeItem.vue b/@xen-orchestra/web/src/components/tree/VmTreeItem.vue
index e2e994a2fd5..6e25228b4d6 100644
--- a/@xen-orchestra/web/src/components/tree/VmTreeItem.vue
+++ b/@xen-orchestra/web/src/components/tree/VmTreeItem.vue
@@ -1,25 +1,25 @@
 <template>
-  <TreeItem expanded>
-    <TreeItemLabel :route="`/vm/${leaf.data.id}/console`" no-indent>
+  <VtsTreeItem expanded>
+    <UiTreeItemLabel :route="`/vm/${leaf.data.id}/console`" no-indent>
       {{ leaf.data.name_label }}
       <template #icon>
-        <ObjectIcon
+        <UiObjectIcon
           v-tooltip="leaf.data.power_state"
           :state="leaf.data.power_state.toLocaleLowerCase() as POWER_STATE"
-          size="small"
+          size="medium"
           type="vm"
         />
       </template>
-    </TreeItemLabel>
-  </TreeItem>
+    </UiTreeItemLabel>
+  </VtsTreeItem>
 </template>
 
 <script lang="ts" setup>
 import type { VmLeaf } from '@/types/tree.type'
 import type { POWER_STATE } from '@core/types/power-state.type'
-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 VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiTreeItemLabel from '@core/components/ui/tree-item-label/UiTreeItemLabel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 
 defineProps<{
diff --git a/@xen-orchestra/web/src/components/vm/VmHeader.vue b/@xen-orchestra/web/src/components/vm/VmHeader.vue
index b427ccd48fa..b8cee22b4bc 100644
--- a/@xen-orchestra/web/src/components/vm/VmHeader.vue
+++ b/@xen-orchestra/web/src/components/vm/VmHeader.vue
@@ -1,10 +1,10 @@
 <template>
-  <HeadBar>
+  <UiHeadBar>
     {{ vm.name_label }}
     <template #icon>
-      <ObjectIcon :state="vm.power_state.toLocaleLowerCase() as VmState" type="vm" />
+      <UiObjectIcon size="medium" :state="vm.power_state.toLocaleLowerCase() as VmState" type="vm" />
     </template>
-  </HeadBar>
+  </UiHeadBar>
   <TabList>
     <TabItem disabled>{{ $t('dashboard') }}</TabItem>
     <TabItem active>{{ $t('console') }}</TabItem>
@@ -20,10 +20,10 @@
 <script lang="ts" setup>
 import type { XoVm } from '@/types/xo/vm.type'
 import type { VmState } from '@core/types/object-icon.type'
-import HeadBar from '@core/components/head-bar/HeadBar.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
+import UiHeadBar from '@core/components/ui/head-bar/UiHeadBar.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
 
 defineProps<{
   vm: XoVm
diff --git a/@xen-orchestra/web/src/layouts/AppLayout.vue b/@xen-orchestra/web/src/layouts/AppLayout.vue
index b5cf7997c65..55fc8021f27 100644
--- a/@xen-orchestra/web/src/layouts/AppLayout.vue
+++ b/@xen-orchestra/web/src/layouts/AppLayout.vue
@@ -8,9 +8,9 @@
     <template #app-header>
       <UiButton
         size="medium"
-        color="info"
+        accent="info"
         :right-icon="faArrowUpRightFromSquare"
-        level="tertiary"
+        variant="tertiary"
         @click="openUrl('/', true)"
       >
         XO 5
@@ -22,9 +22,9 @@
       <SidebarSearch v-model="filter" />
     </template>
     <template #sidebar-content>
-      <TreeList v-if="!isReady">
-        <TreeLoadingItem v-for="i in 5" :key="i" :icon="faCity" />
-      </TreeList>
+      <VtsTreeList v-if="!isReady">
+        <VtsTreeLoadingItem v-for="i in 5" :key="i" :icon="faCity" />
+      </VtsTreeList>
       <NoResults v-else-if="pools.length === 0" />
       <PoolTreeList v-else :branches="pools" />
     </template>
@@ -42,9 +42,9 @@ import SidebarSearch from '@/components/SidebarSearch.vue'
 import QuickTaskButton from '@/components/task/QuickTaskButton.vue'
 import PoolTreeList from '@/components/tree/PoolTreeList.vue'
 import { usePoolTree } from '@/composables/pool-tree.composable'
-import UiButton from '@core/components/button/UiButton.vue'
-import TreeList from '@core/components/tree/TreeList.vue'
-import TreeLoadingItem from '@core/components/tree/TreeLoadingItem.vue'
+import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
+import VtsTreeLoadingItem from '@core/components/tree/VtsTreeLoadingItem.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import CoreLayout from '@core/layouts/CoreLayout.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import { openUrl } from '@core/utils/open-url.utils'
diff --git a/@xen-orchestra/web/src/pages/host/[id].vue b/@xen-orchestra/web/src/pages/host/[id].vue
index 6e84968048a..35b2ca03f07 100644
--- a/@xen-orchestra/web/src/pages/host/[id].vue
+++ b/@xen-orchestra/web/src/pages/host/[id].vue
@@ -1,6 +1,6 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
-  <ObjectNotFoundHero v-else-if="!host" :id="route.params.id" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
+  <VtsObjectNotFoundHero v-else-if="!host" :id="route.params.id" />
   <RouterView v-else v-slot="{ Component }">
     <HostHeader :host />
     <component :is="Component" :host />
@@ -11,8 +11,8 @@
 import HostHeader from '@/components/host/HostHeader.vue'
 import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import type { XoHost } from '@/types/xo/host.type'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import ObjectNotFoundHero from '@core/components/state-hero/ObjectNotFoundHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 
diff --git a/@xen-orchestra/web/src/pages/host/[id]/console.vue b/@xen-orchestra/web/src/pages/host/[id]/console.vue
new file mode 100644
index 00000000000..8d3123f7323
--- /dev/null
+++ b/@xen-orchestra/web/src/pages/host/[id]/console.vue
@@ -0,0 +1,20 @@
+<template>
+  <p v-if="!isHostConsoleAvailable" class="typo h5-medium">{{ $t('power-on-host-for-console') }}</p>
+  <VtsRemoteConsole v-else :url />
+</template>
+
+<script lang="ts" setup>
+import type { XoHost } from '@/types/xo/host.type'
+import VtsRemoteConsole from '@core/components/console/VtsRemoteConsole.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  host: XoHost
+}>()
+
+const url = computed(
+  () => new URL(`/api/consoles/${props.host.controlDomain}`, window.location.origin.replace(/^http/, 'ws'))
+)
+
+const isHostConsoleAvailable = computed(() => props.host.power_state === 'Running')
+</script>
diff --git a/@xen-orchestra/web/src/pages/host/[id]/index.vue b/@xen-orchestra/web/src/pages/host/[id]/index.vue
index 065454187df..db3ac17a4d9 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/index.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/index.vue
@@ -4,6 +4,6 @@
 // The `definePage` macro is removed during the build, leaving an empty script tag that causes the build to fail.
 definePage({
   name: '/host/:id',
-  redirect: (to: any) => `/host/${to.params.id}/vms`,
+  redirect: (to: any) => `/host/${to.params.id}/console`,
 })
 </script>
diff --git a/@xen-orchestra/web/src/pages/host/[id]/vms.vue b/@xen-orchestra/web/src/pages/host/[id]/vms.vue
index bb8c2758f2d..5e669da37e1 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/vms.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/vms.vue
@@ -1,9 +1,9 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
   <UiCard v-else class="vms">
     <!-- TODO: update with item selection button and TopBottomTable component when available -->
     <p class="typo p3-regular count">{{ $t('n-vms', { n: vms.length }) }}</p>
-    <UiTable vertical-border>
+    <VtsTable vertical-border>
       <thead>
         <tr>
           <ColumnTitle id="vm" :icon="faDesktop">{{ $t('vm') }}</ColumnTitle>
@@ -12,18 +12,18 @@
       </thead>
       <tbody>
         <tr v-for="vm in vms" :key="vm.id">
-          <CellObject :id="vm.data.id">
-            <ObjectLink :route="`/vm/${vm.data.id}/console`">
+          <VtsCellObject :id="vm.data.id">
+            <UiObjectLink :route="`/vm/${vm.data.id}/console`">
               <template #icon>
-                <ObjectIcon :state="vm.data.power_state.toLocaleLowerCase() as VmState" type="vm" />
+                <UiObjectIcon size="medium" :state="vm.data.power_state.toLocaleLowerCase() as VmState" type="vm" />
               </template>
               {{ vm.data.name_label }}
-            </ObjectLink>
-          </CellObject>
-          <CellText>{{ vm.data.name_description }}</CellText>
+            </UiObjectLink>
+          </VtsCellObject>
+          <VtsCellText>{{ vm.data.name_description }}</VtsCellText>
         </tr>
       </tbody>
-    </UiTable>
+    </VtsTable>
   </UiCard>
 </template>
 
@@ -31,14 +31,14 @@
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { XoHost } from '@/types/xo/host.type'
 import type { VmState } from '@core/types/object-icon.type'
-import CellObject from '@core/components/cell-object/CellObject.vue'
-import CellText from '@core/components/cell-text/CellText.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import ObjectLink from '@core/components/object-link/ObjectLink.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import VtsCellObject from '@core/components/cell-object/VtsCellObject.vue'
+import VtsCellText from '@core/components/cell-text/VtsCellText.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
-import UiTable from '@core/components/table/UiTable.vue'
-import UiCard from '@core/components/UiCard.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
 import { defineTree } from '@core/composables/tree/define-tree'
 import { useTree } from '@core/composables/tree.composable'
 import { faAlignLeft, faDesktop } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/web/src/pages/pool/[id].vue b/@xen-orchestra/web/src/pages/pool/[id].vue
index 9ba104a6740..db48f89aa23 100644
--- a/@xen-orchestra/web/src/pages/pool/[id].vue
+++ b/@xen-orchestra/web/src/pages/pool/[id].vue
@@ -1,6 +1,6 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
-  <ObjectNotFoundHero v-else-if="!pool" :id="route.params.id" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
+  <VtsObjectNotFoundHero v-else-if="!pool" :id="route.params.id" />
   <RouterView v-else v-slot="{ Component }">
     <PoolHeader :pool />
     <component :is="Component" :pool />
@@ -11,8 +11,8 @@
 import PoolHeader from '@/components/pool/PoolHeader.vue'
 import { usePoolStore } from '@/stores/xo-rest-api/pool.store'
 import type { XoPool } from '@/types/xo/pool.type'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import ObjectNotFoundHero from '@core/components/state-hero/ObjectNotFoundHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
index db642c59117..b0677086398 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
@@ -1,9 +1,9 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
   <UiCard v-else class="hosts">
     <!-- TODO: update with item selection button and TopBottomTable component when available -->
     <p class="typo p3-regular count">{{ $t('n-hosts', { n: hosts.length }) }}</p>
-    <UiTable vertical-border>
+    <VtsTable vertical-border>
       <thead>
         <tr>
           <ColumnTitle id="host" :icon="faServer">{{ $t('host') }}</ColumnTitle>
@@ -12,18 +12,22 @@
       </thead>
       <tbody>
         <tr v-for="host in hosts" :key="host.id">
-          <CellObject :id="host.data.id">
-            <ObjectLink :route="`/host/${host.data.id}`">
+          <VtsCellObject :id="host.data.id">
+            <UiObjectLink :route="`/host/${host.data.id}`">
               <template #icon>
-                <ObjectIcon type="host" :state="host.data.power_state.toLocaleLowerCase() as HostState" />
+                <UiObjectIcon
+                  size="medium"
+                  type="host"
+                  :state="host.data.power_state.toLocaleLowerCase() as HostState"
+                />
               </template>
               {{ host.data.name_label }}
-            </ObjectLink>
-          </CellObject>
-          <CellText>{{ host.data.name_description }}</CellText>
+            </UiObjectLink>
+          </VtsCellObject>
+          <VtsCellText>{{ host.data.name_description }}</VtsCellText>
         </tr>
       </tbody>
-    </UiTable>
+    </VtsTable>
   </UiCard>
 </template>
 
@@ -31,14 +35,14 @@
 import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import type { XoPool } from '@/types/xo/pool.type'
 import type { HostState } from '@core/types/object-icon.type'
-import CellObject from '@core/components/cell-object/CellObject.vue'
-import CellText from '@core/components/cell-text/CellText.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import ObjectLink from '@core/components/object-link/ObjectLink.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import VtsCellObject from '@core/components/cell-object/VtsCellObject.vue'
+import VtsCellText from '@core/components/cell-text/VtsCellText.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
-import UiTable from '@core/components/table/UiTable.vue'
-import UiCard from '@core/components/UiCard.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
 import { defineTree } from '@core/composables/tree/define-tree'
 import { useTree } from '@core/composables/tree.composable'
 import { faAlignLeft, faServer } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
index ce68c3a0793..6ce19206342 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
@@ -1,9 +1,9 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
   <UiCard v-else class="vms">
     <!-- TODO: update with item selection button and TopBottomTable component when available -->
     <p class="typo p3-regular count">{{ $t('n-vms', { n: vms.length }) }}</p>
-    <UiTable vertical-border>
+    <VtsTable vertical-border>
       <thead>
         <tr>
           <ColumnTitle id="vm" :icon="faDesktop">{{ $t('vm') }}</ColumnTitle>
@@ -12,18 +12,18 @@
       </thead>
       <tbody>
         <tr v-for="vm in vms" :key="vm.id">
-          <CellObject :id="vm.data.id">
-            <ObjectLink :route="`/vm/${vm.data.id}/console`">
+          <VtsCellObject :id="vm.data.id">
+            <UiObjectLink :route="`/vm/${vm.data.id}/console`">
               <template #icon>
-                <ObjectIcon :state="vm.data.power_state.toLocaleLowerCase() as VmState" type="vm" />
+                <UiObjectIcon size="medium" :state="vm.data.power_state.toLocaleLowerCase() as VmState" type="vm" />
               </template>
               {{ vm.data.name_label }}
-            </ObjectLink>
-          </CellObject>
-          <CellText>{{ vm.data.name_description }}</CellText>
+            </UiObjectLink>
+          </VtsCellObject>
+          <VtsCellText>{{ vm.data.name_description }}</VtsCellText>
         </tr>
       </tbody>
-    </UiTable>
+    </VtsTable>
   </UiCard>
 </template>
 
@@ -31,14 +31,14 @@
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { XoPool } from '@/types/xo/pool.type'
 import type { VmState } from '@core/types/object-icon.type'
-import CellObject from '@core/components/cell-object/CellObject.vue'
-import CellText from '@core/components/cell-text/CellText.vue'
-import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
-import ObjectLink from '@core/components/object-link/ObjectLink.vue'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import VtsCellObject from '@core/components/cell-object/VtsCellObject.vue'
+import VtsCellText from '@core/components/cell-text/VtsCellText.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
-import UiTable from '@core/components/table/UiTable.vue'
-import UiCard from '@core/components/UiCard.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
 import { defineTree } from '@core/composables/tree/define-tree'
 import { useTree } from '@core/composables/tree.composable'
 import { faAlignLeft, faDesktop } from '@fortawesome/free-solid-svg-icons'
diff --git a/@xen-orchestra/web/src/pages/vm/[id].vue b/@xen-orchestra/web/src/pages/vm/[id].vue
index e01668013b9..702df30e131 100644
--- a/@xen-orchestra/web/src/pages/vm/[id].vue
+++ b/@xen-orchestra/web/src/pages/vm/[id].vue
@@ -1,6 +1,6 @@
 <template>
-  <LoadingHero v-if="!isReady" type="page" />
-  <ObjectNotFoundHero v-else-if="!vm" :id="route.params.id" />
+  <VtsLoadingHero v-if="!isReady" type="page" />
+  <VtsObjectNotFoundHero v-else-if="!vm" :id="route.params.id" />
   <RouterView v-else v-slot="{ Component }">
     <VmHeader :vm />
     <component :is="Component" :vm />
@@ -11,8 +11,8 @@
 import VmHeader from '@/components/vm/VmHeader.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { XoVm } from '@/types/xo/vm.type'
-import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
-import ObjectNotFoundHero from '@core/components/state-hero/ObjectNotFoundHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/console.vue b/@xen-orchestra/web/src/pages/vm/[id]/console.vue
index aafa01d57ac..b8958f6eabd 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/console.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/console.vue
@@ -1,11 +1,11 @@
 <template>
-  <p v-if="!isVmConsoleAvailable" class="typo h5-medium">{{ $t('power-on-for-console') }}</p>
-  <RemoteConsole v-else :url />
+  <p v-if="!isVmConsoleAvailable" class="typo h5-medium">{{ $t('power-on-vm-for-console') }}</p>
+  <VtsRemoteConsole v-else :url />
 </template>
 
 <script lang="ts" setup>
 import type { XoVm } from '@/types/xo/vm.type'
-import RemoteConsole from '@core/components/console/RemoteConsole.vue'
+import VtsRemoteConsole from '@core/components/console/VtsRemoteConsole.vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
diff --git a/@xen-orchestra/web/src/types/xo/host.type.ts b/@xen-orchestra/web/src/types/xo/host.type.ts
index a0d0eae730a..902e507725e 100644
--- a/@xen-orchestra/web/src/types/xo/host.type.ts
+++ b/@xen-orchestra/web/src/types/xo/host.type.ts
@@ -17,6 +17,7 @@ export type XoHost = {
   enabled: boolean
   name_label: string
   name_description: string
+  controlDomain: string
   power_state: HOST_POWER_STATE
   residentVms: XoVm['id'][]
 }
diff --git a/@xen-orchestra/web/src/utils/convert-backup-issue-to-core.util.ts b/@xen-orchestra/web/src/utils/convert-backup-issue-to-core.util.ts
index 3862acf6e84..6d081dc07b1 100644
--- a/@xen-orchestra/web/src/utils/convert-backup-issue-to-core.util.ts
+++ b/@xen-orchestra/web/src/utils/convert-backup-issue-to-core.util.ts
@@ -1,5 +1,5 @@
 import type { BackupIssue } from '@/types/xo/dashboard.type'
-import type { Backup as CoreBackup } from '@core/types/backup.type'
+import type { Backup as CoreBackup } from '@core/components/backup-item/VtsBackupItem.vue'
 
 export const convertBackupIssueToCore = (backupIssue: BackupIssue): CoreBackup => ({
   label: backupIssue.name,
diff --git a/@xen-orchestra/web/src/utils/convert-task-to-core.util.ts b/@xen-orchestra/web/src/utils/convert-task-to-core.util.ts
index ab10cfc12fb..ee71e858ab1 100644
--- a/@xen-orchestra/web/src/utils/convert-task-to-core.util.ts
+++ b/@xen-orchestra/web/src/utils/convert-task-to-core.util.ts
@@ -1,5 +1,5 @@
 import type { XoTask } from '@/types/xo/task.type'
-import type { Task as CoreTask } from '@core/types/task.type'
+import type { Task as CoreTask } from '@core/components/ui/quick-task-item/UiQuickTaskItem.vue'
 
 export const convertTaskToCore = (task: XoTask): CoreTask => ({
   id: task.id,
diff --git a/@xen-orchestra/web/src/utils/size.util.ts b/@xen-orchestra/web/src/utils/size.util.ts
index d55a461149d..9481193e432 100644
--- a/@xen-orchestra/web/src/utils/size.util.ts
+++ b/@xen-orchestra/web/src/utils/size.util.ts
@@ -1,11 +1,11 @@
-import format from 'human-format'
+import { Scale, raw } from 'human-format'
 
-const scale = format.Scale.create(['', 'KiB', 'MiB', 'GiB', 'TiB'], 1024)
+const scale = Scale.create(['', 'KiB', 'MiB', 'GiB', 'TiB'], 1024)
 
 export const formatSizeRaw = (bytes: number | undefined, decimals: number) => {
   if (bytes === undefined) {
     return undefined
   }
 
-  return format.raw(bytes, { maxDecimals: decimals, scale })
+  return raw(bytes, { maxDecimals: decimals, scale })
 }
diff --git a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
index 35114ac6ebb..ffc3aaa3fe6 100644
--- a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
+++ b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
@@ -15,7 +15,7 @@ export const xoApiDefinition = {
   host: {
     type: 'collection',
     path: 'hosts',
-    fields: 'id,name_label,name_description,power_state,residentVms,$pool',
+    fields: 'id,name_label,name_description,power_state,controlDomain,residentVms,$pool',
     handler: (record: XoHost) => record,
   },
   vm: {
diff --git a/@xen-orchestra/web/typed-router.d.ts b/@xen-orchestra/web/typed-router.d.ts
index ea3a94c65d5..736e878bac4 100644
--- a/@xen-orchestra/web/typed-router.d.ts
+++ b/@xen-orchestra/web/typed-router.d.ts
@@ -24,6 +24,7 @@ declare module 'vue-router/auto-routes' {
     '/dev/token': RouteRecordInfo<'/dev/token', '/dev/token', Record<never, never>, Record<never, never>>,
     '/host/[id]': RouteRecordInfo<'/host/[id]', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/host/:id': RouteRecordInfo<'/host/:id', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/host/[id]/console': RouteRecordInfo<'/host/[id]/console', '/host/:id/console', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/host/[id]/vms': RouteRecordInfo<'/host/[id]/vms', '/host/:id/vms', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]': RouteRecordInfo<'/pool/[id]', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/:id': RouteRecordInfo<'/pool/:id', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
diff --git a/@xen-orchestra/web/vite.config.ts b/@xen-orchestra/web/vite.config.ts
index 5564cbb07f0..b5fdf4117ef 100644
--- a/@xen-orchestra/web/vite.config.ts
+++ b/@xen-orchestra/web/vite.config.ts
@@ -1,9 +1,8 @@
 import { fileURLToPath, URL } from 'node:url'
-import { resolve } from 'path'
 import vueI18n from '@intlify/unplugin-vue-i18n/vite'
 import vue from '@vitejs/plugin-vue'
 import vueRouter from 'unplugin-vue-router/vite'
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig, loadEnv, PluginOption } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -17,9 +16,12 @@ export default defineConfig(({ mode }) => {
       }),
       vue(),
       vueI18n({
-        include: [resolve(__dirname, 'src/locales/**'), resolve(__dirname, '../web-core/lib/locales/**')],
+        include: [
+          fileURLToPath(new URL('./src/locales/**', import.meta.url)),
+          fileURLToPath(new URL('../web-core/lib/locales/**', import.meta.url)),
+        ],
       }),
-    ],
+    ] as PluginOption[],
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/@xen-orchestra/xapi/package.json b/@xen-orchestra/xapi/package.json
index 4cbed26e005..77fcbf5cf03 100644
--- a/@xen-orchestra/xapi/package.json
+++ b/@xen-orchestra/xapi/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@vates/async-each": "^1.0.0",
     "@vates/decorate-with": "^2.1.0",
-    "@vates/nbd-client": "^3.1.1",
+    "@vates/nbd-client": "^3.1.2",
     "@vates/read-chunk": "^1.2.0",
     "@vates/task": "^0.6.0",
     "@xen-orchestra/async-map": "^0.1.2",
diff --git a/@xen-orchestra/xapi/vdi.mjs b/@xen-orchestra/xapi/vdi.mjs
index 194140d5ccb..6dedf94adfa 100644
--- a/@xen-orchestra/xapi/vdi.mjs
+++ b/@xen-orchestra/xapi/vdi.mjs
@@ -151,7 +151,7 @@ class Vdi {
    * in the raw vdi has changed
    */
   async listChangedBlock(ref, baseRef) {
-    const encoded = await this.call('VDI.list_changed_blocks', baseRef, ref)
+    const encoded = await this.callAsync('VDI.list_changed_blocks', baseRef, ref)
     return Buffer.from(encoded, 'base64')
   }
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53d9fe5d217..4253e64372f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,28 @@
 # ChangeLog
 
-## **5.100.0** (2024-10-31)
+## **5.100.1** (2024-11-07)
 
 <img id="latest" src="https://badgen.net/badge/channel/latest/yellow" alt="Channel: latest" />
 
+### Enhancements
+
+- [Dashboard/Health] Do not count PVS cache VDI as orphan VDIs [#7938](https://github.com/vatesfr/xen-orchestra/issues/7938) (PR [#8039](https://github.com/vatesfr/xen-orchestra/pull/8039))
+- [OTP] Use numeric mode for easier input on mobile devices
+
+### Bug fixes
+
+- [Remote] Better encoding of special chars in username in remote (PR [#8106](https://github.com/vatesfr/xen-orchestra/pull/8106))
+- [Backup] Connect sequentially to hosts when using multiple NBD to alleviate a race condition leading to `VDI_IN_USE` errors (PR [#8086](https://github.com/vatesfr/xen-orchestra/pull/8086))
+
+### Released packages
+
+- xo-remote-parser 0.9.3
+- @vates/nbd-client 3.1.2
+- xo-server 5.160.0
+- xo-web 5.160.0
+
+## **5.100.0** (2024-10-31)
+
 ### Highlights
 
 - [REST API] Ability to generate an authentication token via `POST /rest/v0/users/authentication_tokens` (using Basic Authentication) (PR [#8065](https://github.com/vatesfr/xen-orchestra/pull/8065))
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 70a3440a612..6c9f3cd3823 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -11,12 +11,15 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- Ignore leading and trailing spaces when editing VM/Pools/Hosts/SRs names and descriptions (PR [#8115](https://github.com/vatesfr/xen-orchestra/pull/8115))
 - [VM/Advanced] in Nested virtualization section, add warning tooltip and link to documentation (PR [#8107](https://github.com/vatesfr/xen-orchestra/pull/8107))
 
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
 
+- [Backup/CBT] use asynchronous method to list changed block, reducing the number of fall back to full backup
+
 ### Packages to release
 
 > When modifying a package, add it here with its release type.
@@ -33,8 +36,10 @@
 
 <!--packages-start-->
 
+- @xen-orchestra/log minor
 - @xen-orchestra/web patch
 - @xen-orchestra/web-core minor
+- @xen-orchestra/xapi patch
 - xo-web minor
 
 <!--packages-end-->
diff --git a/docs/airgap.md b/docs/airgap.md
index d1a862b18a7..dbc1638dc10 100644
--- a/docs/airgap.md
+++ b/docs/airgap.md
@@ -69,19 +69,24 @@ Please [contact us](https://vates.tech/contact) if you need more details.
 
 After downloading the dedicated air-gap XOA provided by our support team, follow these steps to deploy it:
 
-1. **Obtain the Deployment Script**: On a machine with internet access (or any non-air-gap machine), run the following command to download the deployment script:  
+1. **Obtain the Deployment Script**: On a machine with internet access (or any non-air-gap machine), run the following command to download the deployment script:
+
    ```bash
    curl https://xoa.io/deploy > deploy.sh
-   ```  
+   ```
+
    Alternatively, you can manually copy the content from https://xoa.io/deploy into a file named `deploy.sh`.
 
 2. **Transfer Files to Your XCP-ng Host**: Copy both the `deploy.sh` script and the XOA appliance file (`XOA.xva`) to your air-gapped XCP-ng host.
 
-3. **Make the Script Executable**: On your XCP-ng host, ensure the `deploy.sh` script is executable by running:  
+3. **Make the Script Executable**: On your XCP-ng host, ensure the `deploy.sh` script is executable by running:
+
    ```bash
    chmod +x deploy.sh
-   ```  
-   Then, execute the following command to deploy the XOA appliance:  
+   ```
+
+   Then, execute the following command to deploy the XOA appliance:
+
    ```bash
    ./deploy.sh XOA.xva
    ```
diff --git a/docs/manage_infrastructure.md b/docs/manage_infrastructure.md
index 43eafc018ab..8e85a07abee 100644
--- a/docs/manage_infrastructure.md
+++ b/docs/manage_infrastructure.md
@@ -639,7 +639,6 @@ Maintenance mode will trigger two actions internally:
 
 This way, you can do whatever is needed on the storage, and when done, re-enable it: all the hosts will be reconnected to it. No manual process to find all VMs related to this SR, shut them down, then disconnect all the PBDs.
 
-
 ### Reclaim free space
 
 If your SAN supports it, Xen Orchestra can instruct your XCP-ng host to send a trim command to perform some cleaning.
diff --git a/docs/users.md b/docs/users.md
index 706d15ff570..3b138dcc3e0 100644
--- a/docs/users.md
+++ b/docs/users.md
@@ -115,7 +115,6 @@ Save the configuration and then activate the plugin (button on top).
 
 Use the screenshots below as a reference as how to setup SAML with Google Workspace.
 
-
 > Note: Right now even when the authorization is successfull, you will be redirected to the `https://xo.company.net/signin` page. However, just browse directly into the bare URL `https://xo.company.net`, and you'll now be logged in and can use the XO-dashboard.
 
 The first login will create the user inside XO, as a non-privileged user. An administrator then has to promote the user to the apropriate group. (XO: Settings/Users).
diff --git a/packages/xo-remote-parser/index.test.js b/packages/xo-remote-parser/index.test.js
index 4e2b756687e..f7939398626 100644
--- a/packages/xo-remote-parser/index.test.js
+++ b/packages/xo-remote-parser/index.test.js
@@ -118,6 +118,20 @@ const data = deepFreeze({
       compressionOptions: { level: 1 },
     },
   },
+  'S3 with 2 points': {
+    string:
+      's3://a%40b%2Fc%2Bd%3Ae%3D%3A%2F%2F%20:e%40d%2Fc%2Bb%3Aa%3Ds%3A%2F%2F%20@s3-us-west-2.amazonaws.com/test-bucket/dir?allowUnauthorized=false',
+    object: {
+      type: 's3',
+      protocol: 'https',
+      host: 's3-us-west-2.amazonaws.com',
+      path: '/test-bucket/dir',
+      username: 'a@b/c+d:e=:// ',
+      password: 'e@d/c+b:a=s:// ',
+      region: undefined,
+      allowUnauthorized: false,
+    },
+  },
 })
 
 const parseData = deepFreeze({
diff --git a/packages/xo-remote-parser/package.json b/packages/xo-remote-parser/package.json
index 8853a9c3216..537cb684140 100644
--- a/packages/xo-remote-parser/package.json
+++ b/packages/xo-remote-parser/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "xo-remote-parser",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "license": "AGPL-3.0-or-later",
   "description": "Parse and format XO remote URLs",
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/packages/xo-remote-parser",
diff --git a/packages/xo-remote-parser/src/index.js b/packages/xo-remote-parser/src/index.js
index 1c91ec9fdb0..b5363d4c3a9 100644
--- a/packages/xo-remote-parser/src/index.js
+++ b/packages/xo-remote-parser/src/index.js
@@ -74,7 +74,7 @@ export const parse = string => {
     object.region = parsed.hash.length < 2 ? undefined : parsed.hash.slice(1) // remove '#'
     object.host = parsed.host
     object.path = parsed.pathname
-    object.username = parsed.username
+    object.username = decodeURIComponent(parsed.username)
     object.password = decodeURIComponent(parsed.password)
     object = { ...parseOptionList(parsed.query), ...object }
   }
@@ -92,7 +92,7 @@ export const format = ({ type, host, path, port, username, password, domain, pro
   }
   if (type === 's3') {
     string = protocol === 'https' ? 's3://' : 's3+http://'
-    string += `${username}:${encodeURIComponent(password)}@${host}`
+    string += `${encodeURIComponent(username)}:${encodeURIComponent(password)}@${host}`
   }
   path = sanitizePath(path)
   if (type === 'smb') {
diff --git a/packages/xo-server/package.json b/packages/xo-server/package.json
index be53cfe7b9a..8437ef9954b 100644
--- a/packages/xo-server/package.json
+++ b/packages/xo-server/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "xo-server",
-  "version": "5.159.1",
+  "version": "5.160.0",
   "license": "AGPL-3.0-or-later",
   "description": "Server part of Xen-Orchestra",
   "keywords": [
@@ -140,7 +140,7 @@
     "xo-acl-resolver": "^0.5.0",
     "xo-collection": "^0.5.0",
     "xo-common": "^0.8.0",
-    "xo-remote-parser": "^0.9.2",
+    "xo-remote-parser": "^0.9.3",
     "xo-vmdk-to-vhd": "^2.5.7"
   },
   "devDependencies": {
diff --git a/packages/xo-server/signin.pug b/packages/xo-server/signin.pug
index ca1d733e928..186283c13da 100644
--- a/packages/xo-server/signin.pug
+++ b/packages/xo-server/signin.pug
@@ -25,6 +25,7 @@ html
                 autofocus
                 name = 'otp'
                 type = 'text'
+                inputmode = 'numeric'
                 placeholder = 'Code'
                 required
               )
diff --git a/packages/xo-server/src/xapi-object-to-xo.mjs b/packages/xo-server/src/xapi-object-to-xo.mjs
index 9f3272d1b7f..f2b8a36eec2 100644
--- a/packages/xo-server/src/xapi-object-to-xo.mjs
+++ b/packages/xo-server/src/xapi-object-to-xo.mjs
@@ -556,7 +556,7 @@ const TRANSFORMS = {
       physical_usage: +obj.physical_utilisation,
 
       allocationStrategy:
-        srType === 'linstor' ? obj.$PBDs[0]?.device_config.provisioning ?? 'unknown' : ALLOCATION_BY_TYPE[srType],
+        srType === 'linstor' ? (obj.$PBDs[0]?.device_config.provisioning ?? 'unknown') : ALLOCATION_BY_TYPE[srType],
       current_operations: obj.current_operations,
       inMaintenanceMode: obj.other_config['xo:maintenanceState'] !== undefined,
       name_description: obj.name_description,
@@ -749,9 +749,7 @@ const TRANSFORMS = {
     if (obj.other_config.applies_to) {
       const object = obj.$xapi.getObject(obj.other_config.applies_to, undefined)
       if (object === undefined) {
-        debug(
-          `Unknown other_config.applies_to reference ${obj.other_config.applies_to} in task ${obj.$id}`
-        )
+        debug(`Unknown other_config.applies_to reference ${obj.other_config.applies_to} in task ${obj.$id}`)
       } else {
         applies_to = object.uuid
       }
diff --git a/packages/xo-server/src/xo-mixins/api.mjs b/packages/xo-server/src/xo-mixins/api.mjs
index 5233f025edb..e72fcf0a350 100644
--- a/packages/xo-server/src/xo-mixins/api.mjs
+++ b/packages/xo-server/src/xo-mixins/api.mjs
@@ -402,7 +402,10 @@ export default class Api {
       let result = await (name in NO_LOG_METHODS
         ? method.call(app, resolvedParams)
         : app.tasks
-            .create({ name: 'API call: ' + name, method: name, params: data.params, type: 'api.call' }, { clearLogOnSuccess: true })
+            .create(
+              { name: 'API call: ' + name, method: name, params: data.params, type: 'api.call' },
+              { clearLogOnSuccess: true }
+            )
             .run(() => method.call(app, resolvedParams)))
 
       // If nothing was returned, consider this operation a success
diff --git a/packages/xo-web/package.json b/packages/xo-web/package.json
index 83b38faae14..b70035bca79 100644
--- a/packages/xo-web/package.json
+++ b/packages/xo-web/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "xo-web",
-  "version": "5.159.0",
+  "version": "5.160.0",
   "license": "AGPL-3.0-or-later",
   "description": "Web interface client for Xen-Orchestra",
   "keywords": [
@@ -139,7 +139,7 @@
     "xo-acl-resolver": "^0.5.0",
     "xo-common": "^0.8.0",
     "xo-lib": "^0.11.1",
-    "xo-remote-parser": "^0.9.2",
+    "xo-remote-parser": "^0.9.3",
     "xo-vmdk-to-vhd": "^2.5.7"
   },
   "scripts": {
diff --git a/packages/xo-web/src/common/editable/index.js b/packages/xo-web/src/common/editable/index.js
index 324ac9a2509..2a2a4309f14 100644
--- a/packages/xo-web/src/common/editable/index.js
+++ b/packages/xo-web/src/common/editable/index.js
@@ -228,7 +228,7 @@ export class Text extends Editable {
       throw new Error(error)
     }
 
-    return input.value
+    return input.value.trim()
   }
 
   _onInput = ({ target }) => {
diff --git a/packages/xo-web/src/common/intl/locales/fa.js b/packages/xo-web/src/common/intl/locales/fa.js
index f10df1eef53..1a2b6e4191b 100644
--- a/packages/xo-web/src/common/intl/locales/fa.js
+++ b/packages/xo-web/src/common/intl/locales/fa.js
@@ -7,7 +7,6 @@ addLocaleData(reactIntlData)
 // ===================================================================
 
 export default {
-  
   // Original text: '{key}: {value}'
   keyValue: 'undefined',
 
@@ -999,7 +998,8 @@ export default {
   migrateBackupSchedule: 'مهاجرت به backup NG',
 
   // Original text: 'This will migrate this backup to a backup NG. This operation is not reversible. Do you want to continue?'
-  migrateBackupScheduleMessage: 'این کار نسخه پشتیبان را به یک backup NG مهاجرت خواهد داد. این عملیات قابل برگشت نیست. آیا می خواهید ادامه دهید؟',
+  migrateBackupScheduleMessage:
+    'این کار نسخه پشتیبان را به یک backup NG مهاجرت خواهد داد. این عملیات قابل برگشت نیست. آیا می خواهید ادامه دهید؟',
 
   // Original text: 'Are you sure you want to run {name} ({id})?'
   runBackupNgJobConfirm: 'آیا مطمئن هستید که می خواهید {name} ({id}) را اجرا کنید؟',
@@ -1158,7 +1158,8 @@ export default {
   remoteType: 'نوع',
 
   // Original text: 'SMB remotes are meant to work on Windows Server. For other systems (Linux Samba, which means almost all NAS), please use NFS.'
-  remoteSmbWarningMessage: 'ریموت های SMB برای کار روی ویندوز سرور طراحی شده اند. برای سیستم های دیگر (Linux Samba، که به معنای تقریباً تمام NAS ها است)، لطفاً از NFS استفاده کنید.',
+  remoteSmbWarningMessage:
+    'ریموت های SMB برای کار روی ویندوز سرور طراحی شده اند. برای سیستم های دیگر (Linux Samba، که به معنای تقریباً تمام NAS ها است)، لطفاً از NFS استفاده کنید.',
 
   // Original text: 'Test your remote'
   remoteTestTip: 'ریموت خود را تست کنید',
@@ -1197,7 +1198,8 @@ export default {
   confirmDeleteBackupJobsTitle: 'حذف کار پشتیبان{nJobs, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nJobs, number} backup job{nJobs, plural, one {} other {s}}?'
-  confirmDeleteBackupJobsBody: 'آیا مطمئن هستید که می‌خواهید {nJobs, number} کار پشتیبان{nJobs، plural، one {} other {s}} را حذف کنید؟',
+  confirmDeleteBackupJobsBody:
+    'آیا مطمئن هستید که می‌خواهید {nJobs, number} کار پشتیبان{nJobs، plural، one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Name'
   remoteName: 'نام',
@@ -1779,7 +1781,8 @@ export default {
   addHostLabel: 'اضافه کردن میزبان',
 
   // Original text: 'This host needs to install {patches, number} patch{patches, plural, one {} other {es}} before it can be added to the pool. This operation may be long.'
-  hostNeedsPatchUpdate: 'این میزبان قبل از اینکه بتواند به استخر اضافه شود نیاز به نصب {patches, number} وصله {patches, plural, one {} other {es}} دارد. این عملیات ممکن است طولانی باشد.',
+  hostNeedsPatchUpdate:
+    'این میزبان قبل از اینکه بتواند به استخر اضافه شود نیاز به نصب {patches, number} وصله {patches, plural, one {} other {es}} دارد. این عملیات ممکن است طولانی باشد.',
 
   // Original text: "This host cannot be added to the pool because it's missing some patches."
   hostNeedsPatchUpdateNoInstall: '.این میزبان نمی تواند به استخر اضافه شود زیرا برخی از وصله ها را ندارد.',
@@ -1818,13 +1821,15 @@ export default {
   noHostsAvailableErrorTitle: 'خطا هنگام راه اندازی مجدد میزبان',
 
   // Original text: 'Some VMs cannot be migrated before restarting this host. Please try force reboot.'
-  noHostsAvailableErrorMessage: 'برخی از ماشین های مجازی را نمی توان قبل از راه اندازی مجدد این میزبان منتقل کرد. لطفاً راه اندازی مجدد اجباری را امتحان کنید.',
+  noHostsAvailableErrorMessage:
+    'برخی از ماشین های مجازی را نمی توان قبل از راه اندازی مجدد این میزبان منتقل کرد. لطفاً راه اندازی مجدد اجباری را امتحان کنید.',
 
   // Original text: 'Error while restarting hosts'
   failHostBulkRestartTitle: 'خطا هنگام راه اندازی مجدد میزبان ها',
 
   // Original text: '{failedHosts, number}/{totalHosts, number} host{failedHosts, plural, one {} other {s}} could not be restarted.'
-  failHostBulkRestartMessage: '{failedHosts, number}/{totalHosts, number} میزبان{failedHosts, plural, one {} other {s}} نمی توان راه اندازی مجدد کرد.',
+  failHostBulkRestartMessage:
+    '{failedHosts, number}/{totalHosts, number} میزبان{failedHosts, plural, one {} other {s}} نمی توان راه اندازی مجدد کرد.',
 
   // Original text: 'Reboot to apply updates'
   rebootUpdateHostLabel: 'راه اندازی مجدد برای اعمال به روز رسانی',
@@ -2100,7 +2105,8 @@ export default {
   installPatchWarningTitle: 'نصب وصله توصیه نشده',
 
   // Original text: 'This will install a patch only on this host. This is NOT the recommended way: please go into the Pool patch view and follow instructions there. If you are sure about this, you can continue anyway'
-  installPatchWarningContent: 'این کار فقط یک وصله را بر روی این میزبان نصب می کند. این روش توصیه‌شده نیست: لطفاً به نمای وصله استخر بروید و دستورالعمل‌های آنجا را دنبال کنید. اگر در این مورد مطمئن هستید، به هر حال می توانید ادامه دهید',
+  installPatchWarningContent:
+    'این کار فقط یک وصله را بر روی این میزبان نصب می کند. این روش توصیه‌شده نیست: لطفاً به نمای وصله استخر بروید و دستورالعمل‌های آنجا را دنبال کنید. اگر در این مورد مطمئن هستید، به هر حال می توانید ادامه دهید',
 
   // Original text: 'Go to pool'
   installPatchWarningReject: 'رفتن به استخر',
@@ -2112,7 +2118,8 @@ export default {
   patchRelease: 'انتشار',
 
   // Original text: 'Update plugin is not installed on this host. Please run `yum install xcp-ng-updater` first.'
-  updatePluginNotInstalled: 'افزونه آپدیت روی این میزبان نصب نیست. لطفا ابتدا دستور yum install xcp-ng-updater را اجرا کنید.',
+  updatePluginNotInstalled:
+    'افزونه آپدیت روی این میزبان نصب نیست. لطفا ابتدا دستور yum install xcp-ng-updater را اجرا کنید.',
 
   // Original text: 'Show changelog'
   showChangelog: 'نمایش تغییرات',
@@ -2418,7 +2425,8 @@ export default {
   selectVdiMessage: 'فایل VHD را اینجا رها کنید',
 
   // Original text: 'Creating this disk will use the disk space quota from the resource set {resourceSet} ({spaceLeft} left)'
-  useQuotaWarning: 'ایجاد این دیسک از سهمیه فضای دیسک از مجموعه منابع {resourceSet} ({spaceLeft} left) استفاده خواهد کرد',
+  useQuotaWarning:
+    'ایجاد این دیسک از سهمیه فضای دیسک از مجموعه منابع {resourceSet} ({spaceLeft} left) استفاده خواهد کرد',
 
   // Original text: 'Not enough space in resource set {resourceSet} ({spaceLeft} left)'
   notEnoughSpaceInResourceSet: 'فضای کافی در مجموعه منابع {resourceSet} ({spaceLeft} left) وجود ندارد',
@@ -2655,7 +2663,8 @@ export default {
   vmChooseCoresPerSocket: 'رفتار پیش فرض',
 
   // Original text: '{nSockets, number} socket{nSockets, plural, one {} other {s}} with {nCores, number} core{nCores, plural, one {} other {s}} per socket'
-  vmCoresPerSocket: '{nSockets, number} سوکت{nSockets, plural, one {} other {s}} با {nCores, number} هسته{nCores, plural, one {} other {s}} در هر سوکت',
+  vmCoresPerSocket:
+    '{nSockets, number} سوکت{nSockets, plural, one {} other {s}} با {nCores, number} هسته{nCores, plural, one {} other {s}} در هر سوکت',
 
   // Original text: 'None'
   vmCoresPerSocketNone: 'هیچ یک',
@@ -2718,7 +2727,8 @@ export default {
   templateDeleteModalTitle: 'حذف قالب ماشین مجازی{templates, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {templates, plural, one {this} other {these}} template{templates, plural, one {} other {s}}?'
-  templateDeleteModalBody: 'آیا مطمئنید که میخواهید {templates, plural, one {this} other {these}} قالب {templates, plural, one {} other {s}} را حذف کنید؟',
+  templateDeleteModalBody:
+    'آیا مطمئنید که میخواهید {templates, plural, one {this} other {these}} قالب {templates, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete template{nTemplates, plural, one {} other {s}} failed'
   failedToDeleteTemplatesTitle: 'حذف قالب {nTemplates, plural, one {} other {s}} انجام نشد',
@@ -2730,7 +2740,8 @@ export default {
   deleteDefaultTemplatesTitle: 'حذف قالب پیش فرض {nDefaultTemplates, plural, one {} other {s}}',
 
   // Original text: 'You are attempting to delete {nDefaultTemplates, number} default template{nDefaultTemplates, plural, one {} other {s}}. Do you want to continue?'
-  deleteDefaultTemplatesMessage: 'شما در حال تلاش برای حذف کردن {nDefaultTemplates, number} default template{nDefaultTemplates, plural, one {} other {s}} هستید. آیا میخواهید ادامه بدهید؟',
+  deleteDefaultTemplatesMessage:
+    'شما در حال تلاش برای حذف کردن {nDefaultTemplates, number} default template{nDefaultTemplates, plural, one {} other {s}} هستید. آیا میخواهید ادامه بدهید؟',
 
   // Original text: 'Pool{pools, plural, one {} other {s}}'
   poolPanel: 'استخر{pools, plural, one {} other {s}}',
@@ -2793,7 +2804,8 @@ export default {
   ofUsage: '{usage} (of {total})',
 
   // Original text: '{nVcpus, number} vCPU{nVcpus, plural, one {} other {s}} (of {nCpus, number} CPU{nCpus, plural, one {} other {s}})'
-  ofCpusUsage: '{nVcpus, number} vCPU{nVcpus, plural, one {} other {s}} (of {nCpus, number} CPU{nCpus, plural, one {} other {s}})',
+  ofCpusUsage:
+    '{nVcpus, number} vCPU{nVcpus, plural, one {} other {s}} (of {nCpus, number} CPU{nCpus, plural, one {} other {s}})',
 
   // Original text: 'No storage'
   noSrs: 'ذخیره ساز وجود ندارد',
@@ -3225,7 +3237,8 @@ export default {
   resourceSetNew: 'جدید',
 
   // Original text: 'Try dropping some VMs files here, or click to select VMs to upload. Accept only .xva/.ova files.'
-  importVmsList: 'سعی کنید برخی از فایل های ماشین مجازی را در اینجا رها کنید یا برای انتخاب ماشین های مجازی برای بارگذاری کلیک کنید. فقط فایل‌های xva/.ova قابل قبول است.',
+  importVmsList:
+    'سعی کنید برخی از فایل های ماشین مجازی را در اینجا رها کنید یا برای انتخاب ماشین های مجازی برای بارگذاری کلیک کنید. فقط فایل‌های xva/.ova قابل قبول است.',
 
   // Original text: 'No selected VMs.'
   noSelectedVms: 'هیچ ماشین مجازی انتخاب شده ای وجود ندارد.',
@@ -3444,7 +3457,8 @@ export default {
   restoreVmBackupsBulkTitle: 'بازیابی {nVms, number} VM{nVms, plural, one {} other {s}}',
 
   // Original text: 'Restore {nVms, number} VM{nVms, plural, one {} other {s}} from {nVms, plural, one {its} other {their}} {oldestOrLatest} backup.'
-  restoreVmBackupsBulkMessage: 'بازیابی {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} از {nVms, plural, one {its} other {their}} {oldestOrLatest} نسخه پشتیبان.',
+  restoreVmBackupsBulkMessage:
+    'بازیابی {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} از {nVms, plural, one {its} other {their}} {oldestOrLatest} نسخه پشتیبان.',
 
   // Original text: 'oldest'
   oldest: 'قدیمی ترین',
@@ -3477,7 +3491,8 @@ export default {
   deleteVmBackupsBulkTitle: 'حذف کردن نسخه های پشتیبان',
 
   // Original text: 'Are you sure you want to delete all the backups from {nVms, number} VM{nVms, plural, one {} other {s}}?'
-  deleteVmBackupsBulkMessage: 'آیا مطمئن هستید که می‌خواهید همه نسخه‌های پشتیبان را از {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} حذف کنید؟',
+  deleteVmBackupsBulkMessage:
+    'آیا مطمئن هستید که می‌خواهید همه نسخه‌های پشتیبان را از {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} حذف کنید؟',
 
   // Original text: 'delete {nBackups} backup{nBackups, plural, one {} other {s}}'
   deleteVmBackupsBulkConfirmText: 'حذف {nBackups} نسخه پشتیبان{nBackups, plural, one {} other {s}}',
@@ -3537,13 +3552,15 @@ export default {
   emergencyShutdownHostsModalTitle: 'خاموش کردن اضطراری میزبان{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to shutdown {nHosts, number} Host{nHosts, plural, one {} other {s}}?'
-  emergencyShutdownHostsModalMessage: 'آیا مطمئن هستید که می‌خواهید {nHosts, number} میزبان {nHosts, plural, one {} other {s}} را خاموش کنید؟',
+  emergencyShutdownHostsModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {nHosts, number} میزبان {nHosts, plural, one {} other {s}} را خاموش کنید؟',
 
   // Original text: 'Shutdown host'
   stopHostModalTitle: 'خاموش کردن میزبان',
 
   // Original text: "This will shutdown your host. Do you want to continue? If it's the pool master, your connection to the pool will be lost"
-  stopHostModalMessage: 'با این کار میزبان شما خاموش می شود. می خواهید ادامه دهید؟ اگر استخر اصلی باشد، ارتباط شما با استخر قطع خواهد شد',
+  stopHostModalMessage:
+    'با این کار میزبان شما خاموش می شود. می خواهید ادامه دهید؟ اگر استخر اصلی باشد، ارتباط شما با استخر قطع خواهد شد',
 
   // Original text: 'Add host'
   addHostModalTitle: 'اضافه کردن میزبان',
@@ -3558,16 +3575,19 @@ export default {
   restartHostModalMessage: 'با این کار میزبان شما راه اندازی مجدد می شود. می خواهید ادامه دهید؟',
 
   // Original text: 'Restart Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}'
-  restartHostsAgentsModalTitle: 'راه اندازی مجدد میزبان{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}',
+  restartHostsAgentsModalTitle:
+    'راه اندازی مجدد میزبان{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to restart {nHosts, number} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?'
-  restartHostsAgentsModalMessage: 'آیا مطمئن هستید که می‌خواهید {nHosts, number} از میزبان {nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
+  restartHostsAgentsModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {nHosts, number} از میزبان {nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
 
   // Original text: 'Restart Host{nHosts, plural, one {} other {s}}'
   restartHostsModalTitle: 'راه اندازی مجدد میزبان{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to restart {nHosts, number} Host{nHosts, plural, one {} other {s}}?'
-  restartHostsModalMessage: 'آیا مطمئن هستید که می خواهید {nHosts, number} از میزبان {nHosts, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
+  restartHostsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nHosts, number} از میزبان {nHosts, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
 
   // Original text: 'Start VM{vms, plural, one {} other {s}}'
   startVmsModalTitle: 'اجرای ماشین مجازی{vms, plural, one {} other {s}}',
@@ -3588,10 +3608,12 @@ export default {
   blockedStartVmsModalMessage: 'عملیات شروع برای {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} ممنوع است.',
 
   // Original text: 'Are you sure you want to start {vms, number} VM{vms, plural, one {} other {s}}?'
-  startVmsModalMessage: 'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی {vms, plural, one {} other {s}} را اجرا کنید؟',
+  startVmsModalMessage:
+    'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی {vms, plural, one {} other {s}} را اجرا کنید؟',
 
   // Original text: '{nVms, number} vm{nVms, plural, one {} other {s}} are failed. Please see your logs to get more information'
-  failedVmsErrorMessage: '{nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} ناموفق بوده اند.لطفا برای دریافت اطلاعات بیشتر گزارش های خود را بررسی کنید.',
+  failedVmsErrorMessage:
+    '{nVms, number} ماشین مجازی{nVms, plural, one {} other {s}} ناموفق بوده اند.لطفا برای دریافت اطلاعات بیشتر گزارش های خود را بررسی کنید.',
 
   // Original text: 'Start failed'
   failedVmsErrorTitle: 'شروع ناموفق بود',
@@ -3600,13 +3622,15 @@ export default {
   stopHostsModalTitle: 'توقف میزبان{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to stop {nHosts, number} Host{nHosts, plural, one {} other {s}}?'
-  stopHostsModalMessage: 'آیا مطمئن هستید که می‌خواهید {nHosts, number} از میزبان{nHosts, plural, one {} other {s}} را متوقف کنید؟',
+  stopHostsModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {nHosts, number} از میزبان{nHosts, plural, one {} other {s}} را متوقف کنید؟',
 
   // Original text: 'Stop VM{vms, plural, one {} other {s}}'
   stopVmsModalTitle: 'متوقف کردن ماشین مجازی{vms, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to stop {vms, number} VM{vms, plural, one {} other {s}}?'
-  stopVmsModalMessage: 'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را متوقف کنید؟',
+  stopVmsModalMessage:
+    'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را متوقف کنید؟',
 
   // Original text: 'Restart VM'
   restartVmModalTitle: 'راه اندازی مجدد ماشین مجازی',
@@ -3624,25 +3648,29 @@ export default {
   suspendVmsModalTitle: 'ماشین مجازی{vms, plural, one {} other {s}} معلق شده است',
 
   // Original text: 'Are you sure you want to suspend {vms, number} VM{vms, plural, one {} other {s}}?'
-  suspendVmsModalMessage: 'آیا مطمئن هستید که می‌خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را به حالت تعلیق درآورید؟',
+  suspendVmsModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را به حالت تعلیق درآورید؟',
 
   // Original text: 'Restart VM{vms, plural, one {} other {s}}'
   restartVmsModalTitle: 'راه اندازی مجدد ماشین مجازی{vms, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to restart {vms, number} VM{vms, plural, one {} other {s}}?'
-  restartVmsModalMessage: 'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
+  restartVmsModalMessage:
+    'آیا مطمئن هستید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را راه اندازی مجدد کنید؟',
 
   // Original text: 'Snapshot VM{vms, plural, one {} other {s}}'
   snapshotVmsModalTitle: 'اسنپ شات ماشین مجازی{vms, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to snapshot {vms, number} VM{vms, plural, one {} other {s}}?'
-  snapshotVmsModalMessage: 'آیا مطمئن هستید که می‌خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را اسنپ شات کنید؟',
+  snapshotVmsModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را اسنپ شات کنید؟',
 
   // Original text: 'Delete VM{vms, plural, one {} other {s}}'
   deleteVmsModalTitle: 'حذف ماشین مجازی{vms, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {vms, number} VM{vms, plural, one {} other {s}}? ALL VM DISKS WILL BE REMOVED'
-  deleteVmsModalMessage: 'آیا مطمئنید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را حذف کنید؟ همه دیسک های ماشین مجازی حذف خواهند شد',
+  deleteVmsModalMessage:
+    'آیا مطمئنید که می خواهید {vms, number} ماشین مجازی{vms, plural, one {} other {s}} را حذف کنید؟ همه دیسک های ماشین مجازی حذف خواهند شد',
 
   // Original text: 'delete {nVms, number} vm{nVms, plural, one {} other {s}}'
   deleteVmsConfirmText: 'حذف {nVms, number} ماشین مجازی{nVms, plural, one {} other {s}}',
@@ -3651,7 +3679,8 @@ export default {
   deleteVmModalTitle: 'حذف ماشین مجازی',
 
   // Original text: 'Are you sure you want to delete this VM? ALL VM DISKS WILL BE REMOVED'
-  deleteVmModalMessage: 'آیا مطمئن هستید که می خواهید این ماشین مجازی را حذف کنید؟ همه دیسک های ماشین مجازی حذف خواهند شد',
+  deleteVmModalMessage:
+    'آیا مطمئن هستید که می خواهید این ماشین مجازی را حذف کنید؟ همه دیسک های ماشین مجازی حذف خواهند شد',
 
   // Original text: 'Blocked operation'
   deleteVmBlockedModalTitle: 'عملیات مسدود شده است',
@@ -3720,37 +3749,43 @@ export default {
   deleteJobsModalTitle: 'حذف کار{nJobs, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nJobs, number} job{nJobs, plural, one {} other {s}}?'
-  deleteJobsModalMessage: 'آیا مطمئن هستید که می خواهید {nJobs, number} کار{nJobs, plural, one {} other {s}} را حذف کنید؟',
+  deleteJobsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nJobs, number} کار{nJobs, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete VBD{nVbds, plural, one {} other {s}}'
   deleteVbdsModalTitle: 'حذف VBD{nVbds, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nVbds, number} VBD{nVbds, plural, one {} other {s}}?'
-  deleteVbdsModalMessage: 'آیا مطمئن هستید که می خواهید {nVbds, number} از VBD{nVbds, plural, one {} other {s}} را حذف کنید؟',
+  deleteVbdsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nVbds, number} از VBD{nVbds, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete VDI'
   deleteVdiModalTitle: 'حذف VDI',
 
   // Original text: 'Are you sure you want to delete this disk? ALL DATA ON THIS DISK WILL BE LOST'
-  deleteVdiModalMessage: 'آیا مطمئن هستید که می خواهید این دیسک را حذف کنید؟ تمام داده های روی این دیسک از بین خواهد رفت',
+  deleteVdiModalMessage:
+    'آیا مطمئن هستید که می خواهید این دیسک را حذف کنید؟ تمام داده های روی این دیسک از بین خواهد رفت',
 
   // Original text: 'Delete VDI{nVdis, plural, one {} other {s}}'
   deleteVdisModalTitle: 'حذف VDI{nVdis, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nVdis, number} disk{nVdis, plural, one {} other {s}}? ALL DATA ON THESE DISKS WILL BE LOST'
-  deleteVdisModalMessage: 'آیا مطمئن هستید که می خواهید {nVdis, number} از دیسک{nVdis, plural, one {} other {s}} را حذف کنید؟ تمام داده های روی این دیسک ها از بین خواهند رفت',
+  deleteVdisModalMessage:
+    'آیا مطمئن هستید که می خواهید {nVdis, number} از دیسک{nVdis, plural, one {} other {s}} را حذف کنید؟ تمام داده های روی این دیسک ها از بین خواهند رفت',
 
   // Original text: 'Delete schedule{nSchedules, plural, one {} other {s}}'
   deleteSchedulesModalTitle: 'حذف زمان بندی{nSchedules, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nSchedules, number} schedule{nSchedules, plural, one {} other {s}}?'
-  deleteSchedulesModalMessage: 'آیا مطمئن هستید که می خواهید {nSchedules, number} از زمان بندی{nSchedules, plural, one {} other {s}} را حذف کنید؟',
+  deleteSchedulesModalMessage:
+    'آیا مطمئن هستید که می خواهید {nSchedules, number} از زمان بندی{nSchedules, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete remote{nRemotes, plural, one {} other {s}}'
   deleteRemotesModalTitle: 'حذف ریموت{nRemotes, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nRemotes, number} remote{nRemotes, plural, one {} other {s}}?'
-  deleteRemotesModalMessage: 'آیا مطمئن هستید که می خواهید {nRemotes, number} از ریموت{nRemotes, plural, one {} other {s}} را حذف کنید؟',
+  deleteRemotesModalMessage:
+    'آیا مطمئن هستید که می خواهید {nRemotes, number} از ریموت{nRemotes, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Revert your VM'
   revertVmModalTitle: 'ماشین مجازی خود را برگردانید',
@@ -3759,13 +3794,15 @@ export default {
   shareVmInResourceSetModalTitle: 'ماشین مجازی خود را به اشتراک بگذارید',
 
   // Original text: 'This VM will be shared with all the members of the self-service {self}. Are you sure?'
-  shareVmInResourceSetModalMessage: 'این ماشین مجازی با همه اعضای سلف سرویس {self} به اشتراک گذاشته خواهد شد. آیا مطمئن هستید؟',
+  shareVmInResourceSetModalMessage:
+    'این ماشین مجازی با همه اعضای سلف سرویس {self} به اشتراک گذاشته خواهد شد. آیا مطمئن هستید؟',
 
   // Original text: 'Delete VIF{nVifs, plural, one {} other {s}}'
   deleteVifsModalTitle: 'حذف VIF{nVifs, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nVifs, number} VIF{nVifs, plural, one {} other {s}}?'
-  deleteVifsModalMessage: 'آیا مطمئن هستید که می خواهید {nVifs, number} از VIF{nVifs, plural, one {} other {s}} را حذف کنید؟',
+  deleteVifsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nVifs, number} از VIF{nVifs, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete snapshot'
   deleteSnapshotModalTitle: 'حذف اسنپ شات',
@@ -3777,16 +3814,19 @@ export default {
   deleteSnapshotsModalTitle: 'حذف اسنپ شات{nVms, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nVms, number} snapshot{nVms, plural, one {} other {s}}?'
-  deleteSnapshotsModalMessage: 'آیا مطمئن هستید که می خواهید {nVms, number} از اسنپ شات{nVms, plural, one {} other {s}} را حذف کنید؟',
+  deleteSnapshotsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nVms, number} از اسنپ شات{nVms, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Disconnect VBD{nVbds, plural, one {} other {s}}'
   disconnectVbdsModalTitle: 'قطع کردن VBD{nVbds, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to disconnect {nVbds, number} VBD{nVbds, plural, one {} other {s}}?'
-  disconnectVbdsModalMessage: 'آیا مطمئن هستید که می خواهید {nVbds, number} از VBD{nVbds, plural, one {} other {s}} را قطع کنید؟',
+  disconnectVbdsModalMessage:
+    'آیا مطمئن هستید که می خواهید {nVbds, number} از VBD{nVbds, plural, one {} other {s}} را قطع کنید؟',
 
   // Original text: 'Are you sure you want to revert this VM to the snapshot state? This operation is irreversible.'
-  revertVmModalMessage: 'آیا مطمئن هستید که می خواهید این ماشین مجازی را به حالت اسنپ شات برگردانید؟ این عمل غیر قابل برگشت است.',
+  revertVmModalMessage:
+    'آیا مطمئن هستید که می خواهید این ماشین مجازی را به حالت اسنپ شات برگردانید؟ این عمل غیر قابل برگشت است.',
 
   // Original text: 'Snapshot before'
   revertVmModalSnapshotBefore: 'اسنپ شات قبل',
@@ -3819,37 +3859,43 @@ export default {
   existingSrModalTitle: 'استفاده قبلی از مخزن ذخیره سازی (SR)',
 
   // Original text: 'This path has been previously used as a Storage by a XenServer host. All data will be lost if you choose to continue the SR creation.'
-  existingSrModalText: 'این مسیر قبلاً به عنوان یک ذخیره ساز توسط یک میزبان XenServer استفاده شده است. اگر ادامه ایجاد مخزن ذخیره سازی (SR) را انتخاب کنید، همه داده ها از بین خواهند رفت.',
+  existingSrModalText:
+    'این مسیر قبلاً به عنوان یک ذخیره ساز توسط یک میزبان XenServer استفاده شده است. اگر ادامه ایجاد مخزن ذخیره سازی (SR) را انتخاب کنید، همه داده ها از بین خواهند رفت.',
 
   // Original text: 'Previous LUN Usage'
   existingLunModalTitle: 'استفاده قبلی از LUN',
 
   // Original text: 'This LUN has been previously used as a Storage by a XenServer host. All data will be lost if you choose to continue the SR creation.'
-  existingLunModalText: 'این LUN قبلاً به عنوان یک ذخیره ساز توسط یک میزبان XenServer استفاده شده است. اگر ادامه ایجاد مخزن ذخیره سازی (SR) را انتخاب کنید، همه داده ها از بین خواهند رفت.',
+  existingLunModalText:
+    'این LUN قبلاً به عنوان یک ذخیره ساز توسط یک میزبان XenServer استفاده شده است. اگر ادامه ایجاد مخزن ذخیره سازی (SR) را انتخاب کنید، همه داده ها از بین خواهند رفت.',
 
   // Original text: 'Replace current registration?'
   alreadyRegisteredModal: 'ثبت نام فعلی جایگزین شود؟',
 
   // Original text: 'Your XO appliance is already registered to {email}, do you want to forget and replace this registration?'
-  alreadyRegisteredModalText: 'دستگاه XO شما قبلاً با {email} ثبت شده است، آیا می خواهید این ثبت نام را فراموش کرده و جایگزین کنید؟',
+  alreadyRegisteredModalText:
+    'دستگاه XO شما قبلاً با {email} ثبت شده است، آیا می خواهید این ثبت نام را فراموش کرده و جایگزین کنید؟',
 
   // Original text: 'Ready for trial?'
   trialReadyModal: 'آماده برای آزمایش؟',
 
   // Original text: 'During the trial period, XOA need to have a working internet connection. This limitation does not apply for our paid plans!'
-  trialReadyModalText: 'در طول دوره آزمایشی، XOA باید یک اتصال اینترنتی فعال داشته باشد. این محدودیت برای طرح های پولی ما اعمال نمی شود!',
+  trialReadyModalText:
+    'در طول دوره آزمایشی، XOA باید یک اتصال اینترنتی فعال داشته باشد. این محدودیت برای طرح های پولی ما اعمال نمی شود!',
 
   // Original text: 'Cancel task{nTasks, plural, one {} other {s}}'
   cancelTasksModalTitle: 'لغو کار{nTasks, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to cancel {nTasks, number} task{nTasks, plural, one {} other {s}}?'
-  cancelTasksModalMessage: 'آیا مطمئن هستید که می‌خواهید {nTasks, number} کار{nTasks, plural, one {} other {s}} را لغو کنید؟',
+  cancelTasksModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {nTasks, number} کار{nTasks, plural, one {} other {s}} را لغو کنید؟',
 
   // Original text: 'Destroy task{nTasks, plural, one {} other {s}}'
   destroyTasksModalTitle: 'از بین بردن کار{nTasks, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to destroy {nTasks, number} task{nTasks, plural, one {} other {s}}?'
-  destroyTasksModalMessage: 'آیا مطمئن هستید که می خواهید {nTasks, number} کار{nTasks, plural, one {} other {s}} را از بین ببرید؟',
+  destroyTasksModalMessage:
+    'آیا مطمئن هستید که می خواهید {nTasks, number} کار{nTasks, plural, one {} other {s}} را از بین ببرید؟',
 
   // Original text: 'Label'
   serverLabel: 'برچسب',
@@ -3876,7 +3922,8 @@ export default {
   serverAllowUnauthorizedCertificates: 'اجازه دادن به گواهینامه های غیرمجاز',
 
   // Original text: "Enable it if your certificate is rejected, but it's not recommended because your connection will not be secured."
-  serverUnauthorizedCertificatesInfo: 'اگر گواهی شما رد شد، آن را فعال کنید، اما این کار توصیه نمی شود زیرا اتصال شما ایمن نخواهد بود.',
+  serverUnauthorizedCertificatesInfo:
+    'اگر گواهی شما رد شد، آن را فعال کنید، اما این کار توصیه نمی شود زیرا اتصال شما ایمن نخواهد بود.',
 
   // Original text: 'Disconnect server'
   serverDisconnect: 'قطع کردن سرور',
@@ -3927,7 +3974,8 @@ export default {
   serverSelfSignedCertError: 'گواهینامه self-signed نامعتبر است',
 
   // Original text: 'Do you want to accept self-signed certificate for this server even though it would decrease security?'
-  serverSelfSignedCertQuestion: 'آیا می خواهید گواهینامه self-signed را برای این سرور بپذیرید حتی اگر امنیت را کاهش دهد؟',
+  serverSelfSignedCertQuestion:
+    'آیا می خواهید گواهینامه self-signed را برای این سرور بپذیرید حتی اگر امنیت را کاهش دهد؟',
 
   // Original text: 'Copy VM'
   copyVm: 'کپی کردن ماشین مجازی',
@@ -3969,7 +4017,8 @@ export default {
   detachHostModalTitle: 'جدا کردن میزبان',
 
   // Original text: 'Are you sure you want to detach {host} from its pool? THIS WILL REMOVE ALL VMs ON ITS LOCAL STORAGE AND REBOOT THE HOST.'
-  detachHostModalMessage: 'آیا مطمئن هستید که می خواهید {host} را از استخر آن جدا کنید؟ این کار تمام ماشین های مجازی در ذخیره ساز محلی را از بین خواهد برد و میزبان راه اندازی مجدد می شود.',
+  detachHostModalMessage:
+    'آیا مطمئن هستید که می خواهید {host} را از استخر آن جدا کنید؟ این کار تمام ماشین های مجازی در ذخیره ساز محلی را از بین خواهد برد و میزبان راه اندازی مجدد می شود.',
 
   // Original text: 'Detach'
   detachHost: 'جدا کردن',
@@ -3978,7 +4027,8 @@ export default {
   forgetHostModalTitle: 'فراموش کردن میزبان',
 
   // Original text: "Are you sure you want to forget {host} from its pool? Be sure this host can't be back online, or use detach instead."
-  forgetHostModalMessage: 'آیا مطمئن هستید که می‌خواهید {host} را از استخر آن فراموش کنید؟ مطمئن باشید که این میزبان نمی تواند دوباره آنلاین شود یا به جای آن از جدا کردن استفاده کنید.',
+  forgetHostModalMessage:
+    'آیا مطمئن هستید که می‌خواهید {host} را از استخر آن فراموش کنید؟ مطمئن باشید که این میزبان نمی تواند دوباره آنلاین شود یا به جای آن از جدا کردن استفاده کنید.',
 
   // Original text: 'Forget'
   forgetHost: 'فراموش کردن',
@@ -4176,10 +4226,12 @@ export default {
   noUpdaterCommunity: 'هیچ به‌روزرسانی‌کننده‌ای برای نسخه عمومی در دسترس نیست',
 
   // Original text: 'Please consider subscribing and trying it with all the features for free during 30 days on {link}.'
-  considerSubscribe: 'لطفاً مشترک شدن را در نظر داشته باشید و این محصول را با تمام ویژگی های آن به صورت رایگان در مدت 30 روز در {link} امتحان کنید.',
+  considerSubscribe:
+    'لطفاً مشترک شدن را در نظر داشته باشید و این محصول را با تمام ویژگی های آن به صورت رایگان در مدت 30 روز در {link} امتحان کنید.',
 
   // Original text: 'Manual update could break your current installation due to dependencies issues, do it with caution'
-  noUpdaterWarning: 'به‌روزرسانی دستی می‌تواند نصب فعلی شما را به دلیل مشکلات وابستگی خراب کند، این کار را با احتیاط انجام دهید',
+  noUpdaterWarning:
+    'به‌روزرسانی دستی می‌تواند نصب فعلی شما را به دلیل مشکلات وابستگی خراب کند، این کار را با احتیاط انجام دهید',
 
   // Original text: 'Current version:'
   currentVersion: 'نسخه فعلی:',
@@ -4197,13 +4249,15 @@ export default {
   trialStartButton: 'اجرای نسخه آزمایشی',
 
   // Original text: 'You can use a trial version until {date, date, medium}. Upgrade your appliance to get it.'
-  trialAvailableUntil: 'می توانید از نسخه آزمایشی تا {date, date, medium} استفاده کنید. برای دریافت آن، دستگاه خود را ارتقا دهید.',
+  trialAvailableUntil:
+    'می توانید از نسخه آزمایشی تا {date, date, medium} استفاده کنید. برای دریافت آن، دستگاه خود را ارتقا دهید.',
 
   // Original text: 'Your trial has been ended. Contact us or downgrade to Free version'
   trialConsumed: 'نسخه آزمایشی شما به پایان رسیده است. با ما تماس بگیرید یا به نسخه رایگان برگردید',
 
   // Original text: 'Your xoa-updater service appears to be down. Your XOA cannot run fully without reaching this service.'
-  trialLocked: 'به نظر می رسد سرویس xoa-updater شما از کار افتاده است. XOA شما بدون دسترسی به این سرویس نمی تواند به طور کامل اجرا شود.',
+  trialLocked:
+    'به نظر می رسد سرویس xoa-updater شما از کار افتاده است. XOA شما بدون دسترسی به این سرویس نمی تواند به طور کامل اجرا شود.',
 
   // Original text: 'No update information available'
   noUpdateInfo: 'اطلاعات به روز رسانی در دسترس نیست',
@@ -4227,13 +4281,15 @@ export default {
   promptUpgradeReloadTitle: 'ارتقا با موفقیت انجام شد',
 
   // Original text: 'Your XOA has successfully upgraded, and your browser must reload the application. Do you want to reload now?'
-  promptUpgradeReloadMessage: 'XOA شما با موفقیت ارتقا یافته است و مرورگر شما باید برنامه را دوباره بارگیری کند. آیا می خواهید اکنون بارگیری مجدد را انجام دهید؟',
+  promptUpgradeReloadMessage:
+    'XOA شما با موفقیت ارتقا یافته است و مرورگر شما باید برنامه را دوباره بارگیری کند. آیا می خواهید اکنون بارگیری مجدد را انجام دهید؟',
 
   // Original text: 'Upgrade warning'
   upgradeWarningTitle: 'هشدار ارتقا',
 
   // Original text: 'You have some backup jobs in progress. If you upgrade now, these jobs will be interrupted! Are you sure you want to continue?'
-  upgradeWarningMessage: 'شما چند کار پشتیبان گیری در حال انجام دارید. اگر همین الان ارتقا دهید، این کارها قطع می شود! آیا مطمئن هستید که میخواهید ادامه دهید؟',
+  upgradeWarningMessage:
+    'شما چند کار پشتیبان گیری در حال انجام دارید. اگر همین الان ارتقا دهید، این کارها قطع می شود! آیا مطمئن هستید که میخواهید ادامه دهید؟',
 
   // Original text: 'Xen Orchestra from the sources'
   disclaimerTitle: 'Xen Orchestra از منابع',
@@ -4242,7 +4298,8 @@ export default {
   disclaimerText1: 'شما از XO از منابع استفاده می کنید! این برای استفاده شخصی/غیرانتفاعی عالی است.',
 
   // Original text: "If you are a company, it's better to use it with our appliance + pro support included:"
-  disclaimerText2: 'اگر یک شرکت هستید، بهتر است از آن با برنامه های ما که برای استفاده فوری آماده شده است + پشتیبانی حرفه ای که گنجانده شده است استفاده کنید:',
+  disclaimerText2:
+    'اگر یک شرکت هستید، بهتر است از آن با برنامه های ما که برای استفاده فوری آماده شده است + پشتیبانی حرفه ای که گنجانده شده است استفاده کنید:',
 
   // Original text: 'This version is not bundled with any support nor updates. Use it with caution for critical tasks.'
   disclaimerText3: 'این نسخه با هیچ پشتیبانی و به روز رسانی همراه نیست. برای کارهای مهم با احتیاط از آن استفاده کنید.',
@@ -4362,7 +4419,8 @@ export default {
   deleteSshKeysConfirm: 'حذف کلید SSH{nKeys, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nKeys, number} SSH key{nKeys, plural, one {} other {s}}?'
-  deleteSshKeysConfirmMessage: 'آیا مطمئن هستید که می خواهید {nKeys, number} کلید SSH{nKeys, plural, one {} other {s}} را حذف کنید؟',
+  deleteSshKeysConfirmMessage:
+    'آیا مطمئن هستید که می خواهید {nKeys, number} کلید SSH{nKeys, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Others'
   others: 'دیگران',
@@ -4410,7 +4468,8 @@ export default {
   logDeleteMultiple: 'حذف گزارش{nLogs, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nLogs, number} log{nLogs, plural, one {} other {s}}?'
-  logDeleteMultipleMessage: 'آیا مطمئن هستید که می خواهید {nLogs, number} گزارش{nLogs, plural, one {} other {s}} را حذف کنید؟',
+  logDeleteMultipleMessage:
+    'آیا مطمئن هستید که می خواهید {nLogs, number} گزارش{nLogs, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete all logs'
   logDeleteAll: 'حذف کردن تمام گزارش ها',
@@ -4560,7 +4619,8 @@ export default {
   confirmDeleteCloudConfigsTitle: 'حذف پیکربندی ابری{nCloudConfigs, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {nCloudConfigs, number} cloud config{nCloudConfigs, plural, one {} other {s}}?'
-  confirmDeleteCloudConfigsBody: 'آیا مطمئن هستید که می‌خواهید {nCloudConfigs, number} پیکربندی ابری{nCloudConfigs, plural, one {} other {s}} را حذف کنید؟',
+  confirmDeleteCloudConfigsBody:
+    'آیا مطمئن هستید که می‌خواهید {nCloudConfigs, number} پیکربندی ابری{nCloudConfigs, plural, one {} other {s}} را حذف کنید؟',
 
   // Original text: 'Delete cloud config'
   deleteCloudConfig: 'حذف پیکربندی ابری',
@@ -4605,7 +4665,8 @@ export default {
   srReconnectAllModalMessage: 'این کار این مخزن ذخیره سازی (SR) را دوباره به همه میزبان هایش متصل می کند.',
 
   // Original text: 'This will reconnect each selected SR to its host (local SR) or to every hosts of its pool (shared SR).'
-  srsReconnectAllModalMessage: 'این کار هر مخزن ذخیره سازی (SR) انتخاب شده را به میزبان خود (مخزن ذخیره سازی محلی) یا به هر میزبان از استخر خود (مخزن ذخیره سازی مشترک) دوباره متصل می کند.',
+  srsReconnectAllModalMessage:
+    'این کار هر مخزن ذخیره سازی (SR) انتخاب شده را به میزبان خود (مخزن ذخیره سازی محلی) یا به هر میزبان از استخر خود (مخزن ذخیره سازی مشترک) دوباره متصل می کند.',
 
   // Original text: 'Disconnect all hosts'
   srDisconnectAllModalTitle: 'قطع کردن تمام میزبان ها',
@@ -4614,7 +4675,8 @@ export default {
   srDisconnectAllModalMessage: 'این کار مخزن ذخیره سازی (SR) را از همه میزبان هایش جدا می کند.',
 
   // Original text: 'This will disconnect each selected SR from its host (local SR) or from every hosts of its pool (shared SR).'
-  srsDisconnectAllModalMessage: 'این کار هر مخزن ذخیره سازی (SR) انتخاب شده را از میزبان خود (مخزن ذخیره سازی محلی) یا از هر میزبان از استخر خود (مخزن ذخیره سازی مشترک) جدا می کند.',
+  srsDisconnectAllModalMessage:
+    'این کار هر مخزن ذخیره سازی (SR) انتخاب شده را از میزبان خود (مخزن ذخیره سازی محلی) یا از هر میزبان از استخر خود (مخزن ذخیره سازی مشترک) جدا می کند.',
 
   // Original text: 'Forget SR'
   srForgetModalTitle: 'فراموش کردن مخزن ذخیره سازی (SR)',
@@ -4623,10 +4685,12 @@ export default {
   srsForgetModalTitle: 'فراموش کردن مخزن های ذخیره سازی (SR) انتخاب شده',
 
   // Original text: "Are you sure you want to forget this SR? VDIs on this storage won't be removed."
-  srForgetModalMessage: 'آیا مطمئن هستید که می خواهید این مخزن ذخیره سازی (SR) را فراموش کنید؟ VDIها روی این ذخیره ساز حذف نمی شوند.',
+  srForgetModalMessage:
+    'آیا مطمئن هستید که می خواهید این مخزن ذخیره سازی (SR) را فراموش کنید؟ VDIها روی این ذخیره ساز حذف نمی شوند.',
 
   // Original text: "Are you sure you want to forget all the selected SRs? VDIs on these storages won't be removed."
-  srsForgetModalMessage: 'آیا مطمئن هستید که می خواهید همه مخزن های ذخیره سازی (SR) انتخاب شده را فراموش کنید؟ VDIهای موجود در این ذخیره سازها حذف نمی شوند.',
+  srsForgetModalMessage:
+    'آیا مطمئن هستید که می خواهید همه مخزن های ذخیره سازی (SR) انتخاب شده را فراموش کنید؟ VDIهای موجود در این ذخیره سازها حذف نمی شوند.',
 
   // Original text: 'Disconnected'
   srAllDisconnected: 'قطع شده است',
@@ -4686,7 +4750,8 @@ export default {
   xosanInstallIt: 'اکنون آن را نصب کنید!',
 
   // Original text: 'Some hosts need their toolstack to be restarted before you can create an XOSAN'
-  xosanNeedRestart: 'برخی از هاست ها قبل از اینکه بتوانید یک XOSAN ایجاد کنید، نیاز به راه اندازی مجدد toolstack خود دارند',
+  xosanNeedRestart:
+    'برخی از هاست ها قبل از اینکه بتوانید یک XOSAN ایجاد کنید، نیاز به راه اندازی مجدد toolstack خود دارند',
 
   // Original text: 'Restart toolstacks'
   xosanRestartAgents: 'راه اندازی مجدد toolstackها',
@@ -4740,7 +4805,8 @@ export default {
   xosanAddSubvolume: 'افزودن حجم فرعی…',
 
   // Original text: "This version of XOSAN SR is from the first beta phase. You can keep using it, but to modify it you'll have to save your disks and re-create it."
-  xosanWarning: 'این نسخه از مخزن ذخیره سازی (SR) XOSAN از اولین فاز بتا است. می توانید به استفاده از آن ادامه دهید، اما برای تغییر آن باید دیسک های خود را ذخیره کرده و دوباره آن را ایجاد کنید.',
+  xosanWarning:
+    'این نسخه از مخزن ذخیره سازی (SR) XOSAN از اولین فاز بتا است. می توانید به استفاده از آن ادامه دهید، اما برای تغییر آن باید دیسک های خود را ذخیره کرده و دوباره آن را ایجاد کنید.',
 
   // Original text: 'VLAN'
   xosanVlan: 'شبکه مجازی محلی',
@@ -4764,7 +4830,8 @@ export default {
   xosanPackUpdateChecking: 'در حال بررسی برای روز رسانی',
 
   // Original text: 'Error while checking XOSAN packs. Please make sure that the Cloud plugin is installed and loaded and that the updater is reachable.'
-  xosanPackUpdateError: 'خطا هنگام بررسی بسته های XOSAN. لطفاً مطمئن شوید که افزونه Cloud نصب و بارگذاری شده است و به‌روزرسانی‌کننده قابل دسترسی است.',
+  xosanPackUpdateError:
+    'خطا هنگام بررسی بسته های XOSAN. لطفاً مطمئن شوید که افزونه Cloud نصب و بارگذاری شده است و به‌روزرسانی‌کننده قابل دسترسی است.',
 
   // Original text: 'XOSAN resources are unavailable'
   xosanPackUpdateUnavailable: 'منابع XOSAN در دسترس نیستند',
@@ -4941,10 +5008,12 @@ export default {
   licensesTitle: 'لایسنس ها',
 
   // Original text: 'You are not registered and therefore will not be able to create or manage your XOSAN SRs. {link}'
-  xosanUnregisteredDisclaimer: 'شما ثبت نام نکرده اید و بنابراین نمی توانید مخزن های ذخیره سازی (SR) XOSAN خود را ایجاد یا مدیریت کنید. {link}',
+  xosanUnregisteredDisclaimer:
+    'شما ثبت نام نکرده اید و بنابراین نمی توانید مخزن های ذخیره سازی (SR) XOSAN خود را ایجاد یا مدیریت کنید. {link}',
 
   // Original text: 'In order to create a XOSAN SR, you need to use the Xen Orchestra Appliance and buy a XOSAN license on {link}.'
-  xosanSourcesDisclaimer: 'برای ایجاد یک مخزن ذخیره سازی (SR) XOSAN باید از دستگاه Xen Orchestra استفاده کنید و یک مجوز XOSAN در {link} خریداری کنید.',
+  xosanSourcesDisclaimer:
+    'برای ایجاد یک مخزن ذخیره سازی (SR) XOSAN باید از دستگاه Xen Orchestra استفاده کنید و یک مجوز XOSAN در {link} خریداری کنید.',
 
   // Original text: 'Register now!'
   registerNow: 'اکنون ثبت نام کنید!',
@@ -4992,7 +5061,8 @@ export default {
   xosanAdminNoLicenseDisclaimer: 'برای مدیریت XOSAN به یک لایسنس در این مخزن ذخیره سازی (SR) نیاز دارید.',
 
   // Original text: 'Your XOSAN license has expired. You can still use the SR but cannot administrate it anymore.'
-  xosanAdminExpiredLicenseDisclaimer: 'لایسنس XOSAN شما منقضی شده است. شما همچنان می توانید از مخزن ذخیره سازی (SR) استفاده کنید اما دیگر نمی توانید آن را مدیریت کنید.',
+  xosanAdminExpiredLicenseDisclaimer:
+    'لایسنس XOSAN شما منقضی شده است. شما همچنان می توانید از مخزن ذخیره سازی (SR) استفاده کنید اما دیگر نمی توانید آن را مدیریت کنید.',
 
   // Original text: 'Could not check the license on this XOSAN SR'
   xosanCheckLicenseError: 'نمی‌توان لایسنس را بر روی این مخزن ذخیره سازی (SR) XOSAN بررسی کرد',
@@ -5040,5 +5110,6 @@ export default {
   secondsFormat: '{seconds, plural, one {# second} other {# seconds}}',
 
   // Original text: '{days, plural, =0 {} one {# day } other {# days }}{hours, plural, =0 {} one {# hour } other {# hours }}{minutes, plural, =0 {} one {# minute } other {# minutes }}{seconds, plural, =0 {} one {# second} other {# seconds}}'
-  durationFormat: '{days, plural, =0 {} one {# day } other {# days }}{hours, plural, =0 {} one {# hour } other {# hours }}{minutes, plural, =0 {} one {# minute } other {# minutes }}{seconds, plural, =0 {} one {# second} other {# seconds}}',
+  durationFormat:
+    '{days, plural, =0 {} one {# day } other {# days }}{hours, plural, =0 {} one {# hour } other {# hours }}{minutes, plural, =0 {} one {# minute } other {# minutes }}{seconds, plural, =0 {} one {# second} other {# seconds}}',
 }
diff --git a/packages/xo-web/src/common/intl/locales/se.js b/packages/xo-web/src/common/intl/locales/se.js
index 73e03cf3ef9..0c73ffa60ee 100644
--- a/packages/xo-web/src/common/intl/locales/se.js
+++ b/packages/xo-web/src/common/intl/locales/se.js
@@ -18,7 +18,7 @@ export default {
   statusLoading: 'Laddar…',
 
   // Original text: 'Page not found'
-  errorPageNotFound: 'Sida hittas ej' ,
+  errorPageNotFound: 'Sida hittas ej',
 
   // Original text: 'no such item'
   errorNoSuchItem: 'Inget sådant objekt',
@@ -1369,7 +1369,7 @@ export default {
 
   // Original text: "Reboot"
   rebootHostLabel: 'Starta om',
-  
+
   // Original text: 'Error while restarting host'
   noHostsAvailableErrorTitle: undefined,
 
@@ -1492,7 +1492,7 @@ export default {
 
   // Original text: 'Add a bonded network'
   networkCreateBondedButton: undefined,
-//FORTSÄTT
+  //FORTSÄTT
   // Original text: "Device"
   pifDeviceLabel: 'Enhet',
 
@@ -2169,7 +2169,8 @@ export default {
   templateDeleteModalTitle: 'Radera VM-mall{templates, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to delete {templates, plural, one {this} other {these}} template{templates, plural, one {} other {s}}?'
-  templateDeleteModalBody: 'Är du säker du vill radera {templates, plural, one {this} other {these}} template{templates, plural, one {} other {s}}?',
+  templateDeleteModalBody:
+    'Är du säker du vill radera {templates, plural, one {this} other {these}} template{templates, plural, one {} other {s}}?',
 
   // Original text: "Pool{pools, plural, one {} other {s}}"
   poolPanel: 'Pool{pools, plural, one {} other {s}}',
@@ -2770,13 +2771,15 @@ export default {
   emergencyShutdownHostsModalTitle: 'Nödavstängning värd{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to shutdown {nHosts, number} Host{nHosts, plural, one {} other {s}}?'
-  emergencyShutdownHostsModalMessage: 'Är du säker att du vill stänga ner {nHosts, number} Host{nHosts, plural, one {} other {s}}?',
+  emergencyShutdownHostsModalMessage:
+    'Är du säker att du vill stänga ner {nHosts, number} Host{nHosts, plural, one {} other {s}}?',
 
   // Original text: 'Shutdown host'
   stopHostModalTitle: 'Stäng av värd',
 
   // Original text: "This will shutdown your host. Do you want to continue? If it's the pool master, your connection to the pool will be lost"
-  stopHostModalMessage: 'Detta kommer stänga ner din värd. Vill du fortsätta? Om det är poolens master, kommer din anslutning till poolen att förloras',
+  stopHostModalMessage:
+    'Detta kommer stänga ner din värd. Vill du fortsätta? Om det är poolens master, kommer din anslutning till poolen att förloras',
 
   // Original text: 'Add host'
   addHostModalTitle: 'Lägg till värd',
@@ -2791,10 +2794,12 @@ export default {
   restartHostModalMessage: 'Detta kommer starta om din värd. Vill du fortsätta?',
 
   // Original text: 'Restart Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}'
-  restartHostsAgentsModalTitle: 'Starta om Värd{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}',
+  restartHostsAgentsModalTitle:
+    'Starta om Värd{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}',
 
   // Original text: 'Are you sure you want to restart {nHosts, number} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?'
-  restartHostsAgentsModalMessage: 'Är du säker du vill starta om {nHosts, number} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?',
+  restartHostsAgentsModalMessage:
+    'Är du säker du vill starta om {nHosts, number} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?',
 
   // Original text: 'Restart Host{nHosts, plural, one {} other {s}}'
   restartHostsModalTitle: 'Starta om Värd{nHosts, plural, one {} other {s}}',
@@ -2995,7 +3000,8 @@ export default {
   alreadyRegisteredModal: 'Ersätt nuvarande registrering',
 
   // Original text: "Your XO appliance is already registered to {email}, do you want to forget and replace this registration ?"
-  alreadyRegisteredModalText: 'Din XO appliance är redan registrerad till {email}. Vill du ersätta denna regitreringen?',
+  alreadyRegisteredModalText:
+    'Din XO appliance är redan registrerad till {email}. Vill du ersätta denna regitreringen?',
 
   // Original text: "Ready for trial?"
   trialReadyModal: 'Redo för testperiod?',
@@ -3029,7 +3035,8 @@ export default {
   serverAllowUnauthorizedCertificates: 'Tillåt oautentiserade certifikat',
 
   // Original text: "Enable it if your certificate is rejected, but it's not recommended because your connection will not be secured."
-  serverUnauthorizedCertificatesInfo: 'Aktivera det om ditt certifikat är avvisat, men det är inte rekomenderat eftersom anslutningen kommer inte vara säkrad',
+  serverUnauthorizedCertificatesInfo:
+    'Aktivera det om ditt certifikat är avvisat, men det är inte rekomenderat eftersom anslutningen kommer inte vara säkrad',
 
   // Original text: 'username'
   serverPlaceHolderUser: 'användarnamn',
@@ -3071,7 +3078,8 @@ export default {
   serverSelfSignedCertError: 'Ogiltigt självsignerat certifikat',
 
   // Original text: 'Do you want to accept self-signed certificate for this server even though it would decrease security?'
-  serverSelfSignedCertQuestion: 'Vill du acceptera självsignerat certifikat för denna servern, även om det minskar säkerheten?',
+  serverSelfSignedCertQuestion:
+    'Vill du acceptera självsignerat certifikat för denna servern, även om det minskar säkerheten?',
 
   // Original text: "Copy VM"
   copyVm: 'Kopiera VM',
@@ -3107,7 +3115,8 @@ export default {
   detachHostModalTitle: 'Koppla bort värd',
 
   // Original text: 'Are you sure you want to detach {host} from its pool? THIS WILL REMOVE ALL VMs ON ITS LOCAL STORAGE AND REBOOT THE HOST.'
-  detachHostModalMessage: 'Är du säker du vill koppla bort {host} från poolen? DETTA KOMMER TA BORT ALLA VMs PÅ DESS LOKALA LAGRING OCH STARTA OM VÄRDEN.',
+  detachHostModalMessage:
+    'Är du säker du vill koppla bort {host} från poolen? DETTA KOMMER TA BORT ALLA VMs PÅ DESS LOKALA LAGRING OCH STARTA OM VÄRDEN.',
 
   // Original text: 'Detach'
   detachHost: 'Koppla bort',
@@ -3116,7 +3125,8 @@ export default {
   forgetHostModalTitle: 'Glöm värd',
 
   // Original text: "Are you sure you want to forget {host} from its pool? Be sure this host can't be back online, or use detach instead."
-  forgetHostModalMessage: 'Är du säker du vill glömma {host} från poolen? Var säker denna inte kan komma tillbaka online, eller använd koppla bort istället',
+  forgetHostModalMessage:
+    'Är du säker du vill glömma {host} från poolen? Var säker denna inte kan komma tillbaka online, eller använd koppla bort istället',
 
   // Original text: 'Forget'
   forgetHost: 'Glöm',
@@ -3296,12 +3306,10 @@ export default {
   noUpdaterCommunity: 'Ingen uppgraderare tillgänglig för Community Edition',
 
   // Original text: "Please consider subscribe and try it with all features for free during 30 days on {link}.""
-  considerSubscribe:
-    'Vänligen överväg att prenumera och testa gratis med alla funktioner på {link}',
+  considerSubscribe: 'Vänligen överväg att prenumera och testa gratis med alla funktioner på {link}',
 
   // Original text: "Manual update could break your current installation due to dependencies issues, do it with caution"
-  noUpdaterWarning:
-    'Manuell uppdatering kan förstöra din nuvarande installation. Använd med försiktighet',
+  noUpdaterWarning: 'Manuell uppdatering kan förstöra din nuvarande installation. Använd med försiktighet',
 
   // Original text: "Current version:"
   currentVersion: 'Aktuell version',
@@ -3326,8 +3334,7 @@ export default {
   trialConsumed: 'Din testperiod har löpt ut. Kontakta oss eller nedgradera till gratisversionen',
 
   // Original text: "Your xoa-updater service appears to be down. Your XOA cannot run fully without reaching this service."
-  trialLocked:
-    'Din xoa-uppdaterare verkar vara nere. Din XOA kan inte köra fullt ut utan att nå denna tjänst.',
+  trialLocked: 'Din xoa-uppdaterare verkar vara nere. Din XOA kan inte köra fullt ut utan att nå denna tjänst.',
 
   // Original text: "No update information available"
   noUpdateInfo: 'Ingen uppdateringsinformation tillgänglig',
@@ -3351,7 +3358,8 @@ export default {
   promptUpgradeReloadTitle: 'Uppgradering lyckades',
 
   // Original text: 'Your XOA has successfully upgraded, and your browser must reload the application. Do you want to reload now ?'
-  promptUpgradeReloadMessage: 'Din XOA uppgradering lyckades. Din webbläsare behöver ladda om applikationen. Vill du ladda om nu?',
+  promptUpgradeReloadMessage:
+    'Din XOA uppgradering lyckades. Din webbläsare behöver ladda om applikationen. Vill du ladda om nu?',
 
   // Original text: "Xen Orchestra from the sources"
   disclaimerTitle: 'Xen Orchestra från källkod',
@@ -3363,7 +3371,8 @@ export default {
   disclaimerText2: 'Om ni är ett företag är det bättre att använda vår XO Appliance + Pro support inkluderad:',
 
   // Original text: "This version is not bundled with any support nor updates. Use it with caution for critical tasks."
-  disclaimerText3: 'Denna version inkluderar inte någon support eller uppdateringar. Använd med försiktighet för kritiska uppgifter',
+  disclaimerText3:
+    'Denna version inkluderar inte någon support eller uppdateringar. Använd med försiktighet för kritiska uppgifter',
 
   // Original text: "Connect PIF"
   connectPif: 'Anslut PIF',
@@ -3651,7 +3660,8 @@ export default {
   srReconnectAllModalMessage: 'Detta kommer återansluta denna SR till alla dess värdar',
 
   // Original text: 'This will reconnect each selected SR to its host (local SR) or to every hosts of its pool (shared SR).'
-  srsReconnectAllModalMessage: 'Detta kommer återansluta varje vald SR till dess värd (lokal SR) eller till varje värd i dess pool (delad SR)',
+  srsReconnectAllModalMessage:
+    'Detta kommer återansluta varje vald SR till dess värd (lokal SR) eller till varje värd i dess pool (delad SR)',
 
   // Original text: 'Disconnect all hosts'
   srDisconnectAllModalTitle: 'Koppla bort alla värdar',
@@ -3660,7 +3670,8 @@ export default {
   srDisconnectAllModalMessage: 'Detta kommer koppla bort denna SR från alla dess värdar',
 
   // Original text: 'This will disconnect each selected SR from its host (local SR) or from every hosts of its pool (shared SR).'
-  srsDisconnectAllModalMessage: 'Detta kommer koppla bort varje vald SR från dess värd (lokal SR) eller från varje värd i dess pool (shared SR)',
+  srsDisconnectAllModalMessage:
+    'Detta kommer koppla bort varje vald SR från dess värd (lokal SR) eller från varje värd i dess pool (shared SR)',
 
   // Original text: 'Forget SR'
   srForgetModalTitle: 'Glöm SR',
@@ -3788,4 +3799,3 @@ export default {
   // Original text: 'At least one of these version requirements must be satisfied by all the hosts in this pool:'
   xosanPackRequirements: 'Åtminstone en av dessa versionskrav måste uppfyllas av alla värdar i denna poolen:',
 }
-
diff --git a/packages/xo-web/src/common/intl/messages.js b/packages/xo-web/src/common/intl/messages.js
index 7edd76763c3..d2b8a7c4a23 100644
--- a/packages/xo-web/src/common/intl/messages.js
+++ b/packages/xo-web/src/common/intl/messages.js
@@ -1004,6 +1004,7 @@ const messages = {
   addSrLabel: 'Add SR',
   addVmLabel: 'Add VM',
   addHostsLabel: 'Add hosts',
+  clickLinkForDetails: 'Follow this link for more details',
   missingPatchesPool:
     'The pool needs to install {nMissingPatches, number} patch{nMissingPatches, plural, one {} other {es}}. This operation may take a while.',
   missingPatchesHost:
diff --git a/packages/xo-web/src/common/xo/add-otp-modal.js b/packages/xo-web/src/common/xo/add-otp-modal.js
index e4be017be58..9fe16746ed5 100644
--- a/packages/xo-web/src/common/xo/add-otp-modal.js
+++ b/packages/xo-web/src/common/xo/add-otp-modal.js
@@ -42,7 +42,7 @@ export class AddOtpModal extends PureComponent {
             <strong>{_('password')}</strong>
           </Col>
           <Col size={8}>
-            <input className='form-control' onChange={this._saveValue} />
+            <input className='form-control' inputMode='numeric' onChange={this._saveValue} />
             {this.value === this.props.failedToken && <p className='text-warning'>{_('addOtpInvalidPassword')}</p>}
           </Col>
         </Row>
diff --git a/packages/xo-web/src/xo-app/dashboard/health/index.js b/packages/xo-web/src/xo-app/dashboard/health/index.js
index 3c223995004..0c154e21dc8 100644
--- a/packages/xo-web/src/xo-app/dashboard/health/index.js
+++ b/packages/xo-web/src/xo-app/dashboard/health/index.js
@@ -528,7 +528,8 @@ const HANDLED_VDI_TYPES = new Set(['system', 'user', 'ephemeral'])
         if (
           vdi.$VBDs.length !== 0 || // vdi with a vbd aren't orphans
           !HANDLED_VDI_TYPES.has(vdi.VDI_type) || // only for vdi with handled types
-          vdi.size === 0 // empty vdi aren't considered as orphans
+          vdi.size === 0 || // empty vdi aren't considered as orphans
+          (vdi.name_label === 'PVS cache VDI' && vdi.name_description === 'PVS cache VDI') // see https://github.com/vatesfr/xen-orchestra/issues/7938
         ) {
           return false
         }
diff --git a/packages/xo-web/src/xo-app/home/host-item.js b/packages/xo-web/src/xo-app/home/host-item.js
index b29da8b2c12..c4c0f8f2889 100644
--- a/packages/xo-web/src/xo-app/home/host-item.js
+++ b/packages/xo-web/src/xo-app/home/host-item.js
@@ -221,6 +221,13 @@ export default class HostItem extends Component {
                 <li>{_('longerCustomCertficate')}</li>
                 <li>{_('longerDefaultCertificate')}</li>
               </ul>
+              <a
+                href='https://docs.xcp-ng.org/releases/release-8-3/#host-certificate-key-too-small-prevents-upgrade'
+                target='_blank'
+                rel='noreferrer'
+              >
+                <Icon icon='info' /> {_('clickLinkForDetails')}
+              </a>
             </span>
           ),
         })
diff --git a/packages/xo-web/src/xo-app/vm/tab-general.js b/packages/xo-web/src/xo-app/vm/tab-general.js
index 39083ee78b6..35a935c5940 100644
--- a/packages/xo-web/src/xo-app/vm/tab-general.js
+++ b/packages/xo-web/src/xo-app/vm/tab-general.js
@@ -262,7 +262,7 @@ const GeneralTab = decorate([
                   vmTemplate !== undefined ? (
                     <VmTemplate id={vmTemplate.id} />
                   ) : (
-                    vm.other.base_template_name ?? _('unknown')
+                    (vm.other.base_template_name ?? _('unknown'))
                   ),
               })}
             </p>
diff --git a/yarn.lock b/yarn.lock
index 7e38e3d5bd6..0d09ac5cea3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -898,7 +898,7 @@
     regenerator-runtime "^0.14.0"
     v8flags "^3.1.1"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.5", "@babel/parser@^7.23.9", "@babel/parser@^7.24.7", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3", "@babel/parser@^7.25.6", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.5", "@babel/parser@^7.23.9", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3", "@babel/parser@^7.25.6", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
   integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
@@ -4594,32 +4594,31 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue@^5.0.3":
+"@vitejs/plugin-vue@^5.1.4":
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz#72b8b705cfce36b00b59af196195146e356500c4"
   integrity sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==
 
-"@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.11.1.tgz#ecdf12ea8dc35fb8549e517991abcbf449a5ad4f"
-  integrity sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==
+"@volar/language-core@2.4.8", "@volar/language-core@~2.4.8":
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.8.tgz#022f9a8f8c0615469d2f8290f9b44528807c99ca"
+  integrity sha512-K/GxMOXGq997bO00cdFhTNuR85xPxj0BEEAy+BaqqayTmy9Tmhfgmq2wpJcVspRhcwfgPoE2/mEJa26emUhG/g==
   dependencies:
-    "@volar/source-map" "1.11.1"
+    "@volar/source-map" "2.4.8"
 
-"@volar/source-map@1.11.1", "@volar/source-map@~1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.11.1.tgz#535b0328d9e2b7a91dff846cab4058e191f4452f"
-  integrity sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==
-  dependencies:
-    muggle-string "^0.3.1"
+"@volar/source-map@2.4.8":
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.8.tgz#bc699a095aaab405ddc0e2c5a011edc151e787fd"
+  integrity sha512-jeWJBkC/WivdelMwxKkpFL811uH/jJ1kVxa+c7OvG48DXc3VrP7pplSWPP2W1dLMqBxD+awRlg55FQQfiup4cA==
 
-"@volar/typescript@~1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.11.1.tgz#ba86c6f326d88e249c7f5cfe4b765be3946fd627"
-  integrity sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==
+"@volar/typescript@~2.4.8":
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.8.tgz#4cfb90b3226e04d781d48fa519fed0838d7b1504"
+  integrity sha512-6xkIYJ5xxghVBhVywMoPMidDDAFT1OoQeXwa27HSgJ6AiIKRe61RXLoik+14Z7r0JvnblXVsjsRLmCr42SGzqg==
   dependencies:
-    "@volar/language-core" "1.11.1"
+    "@volar/language-core" "2.4.8"
     path-browserify "^1.0.1"
+    vscode-uri "^3.0.8"
 
 "@vue-macros/common@^1.12.2":
   version "1.14.0"
@@ -4767,13 +4766,13 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.4.0"
     camelcase "^5.0.0"
 
-"@vue/compiler-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
-  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
+"@vue/compiler-core@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.12.tgz#bd70b7dabd12b0b6f31bc53418ba3da77994c437"
+  integrity sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==
   dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/shared" "3.4.38"
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.12"
     entities "^4.5.0"
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
@@ -4789,15 +4788,15 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
-"@vue/compiler-dom@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
-  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
+"@vue/compiler-dom@3.5.12", "@vue/compiler-dom@^3.5.0":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz#456d631d11102535b7ee6fd954cf2c93158d0354"
+  integrity sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==
   dependencies:
-    "@vue/compiler-core" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-core" "3.5.12"
+    "@vue/shared" "3.5.12"
 
-"@vue/compiler-dom@3.5.6", "@vue/compiler-dom@^3.3.0":
+"@vue/compiler-dom@3.5.6":
   version "3.5.6"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.6.tgz#0942c290d3a52eb396243850ec73005f669c210d"
   integrity sha512-xRXqxDrIqK8v8sSScpistyYH0qYqxakpsIvqMD2e5sV/PXQ1mTwtXp4k42yHK06KXxKSmitop9e45Ui/3BrTEw==
@@ -4816,19 +4815,19 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/compiler-sfc@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
-  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
-  dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/compiler-core" "3.4.38"
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
+"@vue/compiler-sfc@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz#6688120d905fcf22f7e44d3cb90f8dabc4dd3cc8"
+  integrity sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.12"
+    "@vue/compiler-dom" "3.5.12"
+    "@vue/compiler-ssr" "3.5.12"
+    "@vue/shared" "3.5.12"
     estree-walker "^2.0.2"
-    magic-string "^0.30.10"
-    postcss "^8.4.40"
+    magic-string "^0.30.11"
+    postcss "^8.4.47"
     source-map-js "^1.2.0"
 
 "@vue/compiler-sfc@^3.2.47", "@vue/compiler-sfc@^3.5.3", "@vue/compiler-sfc@^3.5.4":
@@ -4846,13 +4845,13 @@
     postcss "^8.4.47"
     source-map-js "^1.2.0"
 
-"@vue/compiler-ssr@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
-  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+"@vue/compiler-ssr@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz#5f1a3fbd5c44b79a6dbe88729f7801d9c9218bde"
+  integrity sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==
   dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-dom" "3.5.12"
+    "@vue/shared" "3.5.12"
 
 "@vue/compiler-ssr@3.5.6":
   version "3.5.6"
@@ -4862,6 +4861,14 @@
     "@vue/compiler-dom" "3.5.6"
     "@vue/shared" "3.5.6"
 
+"@vue/compiler-vue2@^2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz#2ba837cbd3f1b33c2bc865fbe1a3b53fb611e249"
+  integrity sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -4900,60 +4907,59 @@
     "@typescript-eslint/parser" "^6.7.0"
     vue-eslint-parser "^9.3.1"
 
-"@vue/language-core@1.8.27":
-  version "1.8.27"
-  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-1.8.27.tgz#2ca6892cb524e024a44e554e4c55d7a23e72263f"
-  integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
+"@vue/language-core@2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.1.10.tgz#5988e9ea155f3e09ccbbb3b2a0ddd530dad912e6"
+  integrity sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==
   dependencies:
-    "@volar/language-core" "~1.11.1"
-    "@volar/source-map" "~1.11.1"
-    "@vue/compiler-dom" "^3.3.0"
-    "@vue/shared" "^3.3.0"
-    computeds "^0.0.1"
+    "@volar/language-core" "~2.4.8"
+    "@vue/compiler-dom" "^3.5.0"
+    "@vue/compiler-vue2" "^2.7.16"
+    "@vue/shared" "^3.5.0"
+    alien-signals "^0.2.0"
     minimatch "^9.0.3"
-    muggle-string "^0.3.1"
+    muggle-string "^0.4.1"
     path-browserify "^1.0.1"
-    vue-template-compiler "^2.7.14"
 
-"@vue/reactivity@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
-  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
+"@vue/reactivity@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.12.tgz#a2815d91842ed7b9e7e7936c851923caf6b6e603"
+  integrity sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==
   dependencies:
-    "@vue/shared" "3.4.38"
+    "@vue/shared" "3.5.12"
 
-"@vue/runtime-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
-  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
+"@vue/runtime-core@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.12.tgz#849207f203d0fd82971f19574d30dbe7134c78c7"
+  integrity sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/reactivity" "3.5.12"
+    "@vue/shared" "3.5.12"
 
-"@vue/runtime-dom@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
-  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
+"@vue/runtime-dom@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz#6d4de3df49a90a460b311b1100baa5e2d0d1c8c9"
+  integrity sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/runtime-core" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/reactivity" "3.5.12"
+    "@vue/runtime-core" "3.5.12"
+    "@vue/shared" "3.5.12"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
-  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
+"@vue/server-renderer@3.5.12":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.12.tgz#79c6bc3860e4e4ef80d85653c5d03fd94b26574e"
+  integrity sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==
   dependencies:
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-ssr" "3.5.12"
+    "@vue/shared" "3.5.12"
 
-"@vue/shared@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
-  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
+"@vue/shared@3.5.12", "@vue/shared@^3.5.0":
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.12.tgz#f9e45b7f63f2c3f40d84237b1194b7f67de192e3"
+  integrity sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==
 
-"@vue/shared@3.5.6", "@vue/shared@^3.3.0":
+"@vue/shared@3.5.6":
   version "3.5.6"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.6.tgz#602b3c2dccfe612f9e2e52e861dd7db340961a4f"
   integrity sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA==
@@ -5748,6 +5754,11 @@ algoliasearch@^3.24.5:
     semver "^5.1.0"
     tunnel-agent "^0.6.0"
 
+alien-signals@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/alien-signals/-/alien-signals-0.2.0.tgz#f159e1b767802f2444fed4e58b8d15fd8bab1c24"
+  integrity sha512-StlonZhBBrsPPwrDjiPAiVTf/rolxffLxVPT60Qv/t88BZ81BvUVzHgGqEFvJ1ii8HXtm1+zU2Icr59tfWEcag==
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -8110,11 +8121,6 @@ compression@^1.7.3, compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
-computeds@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
-  integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -13044,6 +13050,11 @@ human-format@^1.0.0, human-format@^1.2.0:
   resolved "https://registry.yarnpkg.com/human-format/-/human-format-1.2.0.tgz#7971038a78a2235be9e8aac8047d23886a25dad7"
   integrity sha512-GIjOefWusTiXEPezbuI59uc1G2SNMpym6w1wNfoWAG6QrTsWueuauR5We0xHHuzoJKIYTwwNtTEy0ahyji5KXw==
 
+human-format@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/human-format/-/human-format-1.2.1.tgz#37a56cb46b0c5a84b5dd67740dd34638d71c0a67"
+  integrity sha512-o5Ldz62VWR5lYUZ8aVQaLKiN37NsHnmk3xjMoUjza3mGkk8MvMofgZT0T6HKSCKSJIir+AWk9Dx8KhxvZAUgCg==
+
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -16724,10 +16735,10 @@ ms@2.1.3, ms@^2.1.1, ms@^2.1.2, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-muggle-string@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
-  integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
+muggle-string@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
+  integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
 
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
@@ -18209,10 +18220,10 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinia@^2.1.7:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.2.2.tgz#dcf576c9a778187d1542c5e6a9f8b8cd5b6aea14"
-  integrity sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==
+pinia@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.2.6.tgz#ff93f35b8c02033eaedc8c92ad5f10f215d6c804"
+  integrity sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==
   dependencies:
     "@vue/devtools-api" "^6.6.3"
     vue-demi "^0.14.10"
@@ -18712,7 +18723,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.33, postcss@^8.4.40, postcss@^8.4.43, postcss@^8.4.47:
+postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.33, postcss@^8.4.43, postcss@^8.4.47:
   version "8.4.47"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
   integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -22550,10 +22561,10 @@ typescript@5.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
   integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
-typescript@~5.3.3:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
-  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+typescript@~5.6.3:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
 
 ua-parser-js@^0.7.30:
   version "0.7.39"
@@ -23158,10 +23169,10 @@ vinyl@^2.0.0, vinyl@^2.1.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vite@^5.0.11:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.6.tgz#85a93a1228a7fb5a723ca1743e337a2588ed008f"
-  integrity sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==
+vite@^5.4.10:
+  version "5.4.10"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.10.tgz#d358a7bd8beda6cf0f3b7a450a8c7693a4f80c18"
+  integrity sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"
@@ -23184,6 +23195,11 @@ void-elements@^3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
+vscode-uri@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
+
 vue-demi@>=0.14.8, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
@@ -23245,7 +23261,7 @@ vue-router@^3.4.5:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
   integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
 
-vue-router@^4.4.0:
+vue-router@^4.4.0, vue-router@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.5.tgz#bdf535e4cf32414ebdea6b4b403593efdb541388"
   integrity sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==
@@ -23274,7 +23290,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.10, vue-template-compiler@^2.7.14:
+vue-template-compiler@^2.6.10:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
   integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
@@ -23287,13 +23303,13 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-tsc@^1.8.27:
-  version "1.8.27"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.8.27.tgz#feb2bb1eef9be28017bb9e95e2bbd1ebdd48481c"
-  integrity sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==
+vue-tsc@^2.1.10:
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.1.10.tgz#4d61a64e5fad763b8b40c1884259fd48986f0b4e"
+  integrity sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==
   dependencies:
-    "@volar/typescript" "~1.11.1"
-    "@vue/language-core" "1.8.27"
+    "@volar/typescript" "~2.4.8"
+    "@vue/language-core" "2.1.10"
     semver "^7.5.4"
 
 vue@^2.6.10, vue@^2.7.14:
@@ -23304,16 +23320,16 @@ vue@^2.6.10, vue@^2.7.14:
     "@vue/compiler-sfc" "2.7.16"
     csstype "^3.1.0"
 
-vue@~3.4.13:
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
-  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
-  dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-sfc" "3.4.38"
-    "@vue/runtime-dom" "3.4.38"
-    "@vue/server-renderer" "3.4.38"
-    "@vue/shared" "3.4.38"
+vue@~3.5.12:
+  version "3.5.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.12.tgz#e08421c601b3617ea2c9ef0413afcc747130b36c"
+  integrity sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==
+  dependencies:
+    "@vue/compiler-dom" "3.5.12"
+    "@vue/compiler-sfc" "3.5.12"
+    "@vue/runtime-dom" "3.5.12"
+    "@vue/server-renderer" "3.5.12"
+    "@vue/shared" "3.5.12"
 
 vuepress-html-webpack-plugin@^3.2.0:
   version "3.2.0"