diff --git a/@xen-orchestra/lite/src/components/RouterTab.vue b/@xen-orchestra/lite/src/components/RouterTab.vue
index ba35972099c..be292a189e5 100644
--- a/@xen-orchestra/lite/src/components/RouterTab.vue
+++ b/@xen-orchestra/lite/src/components/RouterTab.vue
@@ -1,18 +1,18 @@
 <template>
   <RouterLink v-slot="{ isActive, href }" :to custom>
-    <TabItem
-      :active="isActive"
+    <VtsTabItem
+      :selected="isActive"
       :disabled="isDisabled"
       :href="isDisabled ? undefined : href"
       :tag="isDisabled ? undefined : 'a'"
     >
       <slot />
-    </TabItem>
+    </VtsTabItem>
   </RouterLink>
 </template>
 
 <script lang="ts" setup>
-import TabItem from '@core/components/tab/TabItem.vue'
+import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import type { RouteLocationRaw } 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 fd4569ab04c..e3de61e1470 100644
--- a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
+++ b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -1,7 +1,7 @@
 <template>
-  <TabList>
-    <TabItem v-bind="tab(TAB.PROPS, propParams)">Props</TabItem>
-    <TabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
+  <VtsTabList>
+    <VtsTabItem v-bind="tab(TAB.PROPS, propParams)">Props</VtsTabItem>
+    <VtsTabItem class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
       Events
       <VtsCounter
         v-if="unreadEventsCount > 0"
@@ -10,21 +10,21 @@
         variant="primary"
         size="small"
       />
-    </TabItem>
-    <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
-    <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
+    </VtsTabItem>
+    <VtsTabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</VtsTabItem>
+    <VtsTabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</VtsTabItem>
     <MenuList placement="bottom" border>
       <template #trigger="{ open, isOpen }">
-        <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
+        <VtsTabItem :selected="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
           <UiIcon :icon="faSliders" />
           Presets
-        </TabItem>
+        </VtsTabItem>
       </template>
       <MenuItem v-for="(preset, label) in presets" :key="label" @click="applyPreset(preset)">
         {{ label }}
       </MenuItem>
     </MenuList>
-  </TabList>
+  </VtsTabList>
 
   <div :class="{ 'full-width': fullWidthComponent }" class="tabs">
     <UiCard v-if="selectedTab === TAB.NONE" class="tab-content">
@@ -89,8 +89,8 @@ 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 VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.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/pool/PoolTabBar.vue b/@xen-orchestra/lite/src/components/pool/PoolTabBar.vue
index 91680551a8f..63c16e65cdb 100644
--- a/@xen-orchestra/lite/src/components/pool/PoolTabBar.vue
+++ b/@xen-orchestra/lite/src/components/pool/PoolTabBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabList :disabled="!isReady">
+  <VtsTabList :disabled="!isReady">
     <RouterTab :to="{ name: 'pool.dashboard', params: { uuid: pool?.uuid } }">
       {{ $t('dashboard') }}
     </RouterTab>
@@ -27,13 +27,13 @@
     <RouterTab :to="{ name: 'pool.vms', params: { uuid: pool?.uuid } }">
       {{ $t('vms') }}
     </RouterTab>
-  </TabList>
+  </VtsTabList>
 </template>
 
 <script lang="ts" setup>
 import RouterTab from '@/components/RouterTab.vue'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
-import TabList from '@core/components/tab/TabList.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 
 const { pool, isReady } = usePoolStore().subscribe()
 </script>
diff --git a/@xen-orchestra/lite/src/components/vm/VmTabBar.vue b/@xen-orchestra/lite/src/components/vm/VmTabBar.vue
index 03d8c334ff4..11648620a75 100644
--- a/@xen-orchestra/lite/src/components/vm/VmTabBar.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmTabBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabList>
+  <VtsTabList>
     <RouterTab :to="{ name: 'vm.dashboard', params: { uuid } }" disabled>
       {{ $t('dashboard') }}
     </RouterTab>
@@ -24,12 +24,12 @@
     <RouterTab :to="{ name: 'vm.tasks', params: { uuid } }" disabled>
       {{ $t('tasks') }}
     </RouterTab>
-  </TabList>
+  </VtsTabList>
 </template>
 
 <script lang="ts" setup>
 import RouterTab from '@/components/RouterTab.vue'
-import TabList from '@core/components/tab/TabList.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 
 defineProps<{
   uuid: string
diff --git a/@xen-orchestra/lite/src/stories/web-core/tab/router-tab.story.vue b/@xen-orchestra/lite/src/stories/web-core/tab/router-tab.story.vue
index a9b0a02d2df..15d387a1955 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tab/router-tab.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tab/router-tab.story.vue
@@ -8,9 +8,9 @@
       setting('label').widget(text()).preset('Foobar'),
     ]"
   >
-    <TabList>
+    <VtsTabList>
       <RouterTab v-bind="properties">{{ settings.label }}</RouterTab>
-    </TabList>
+    </VtsTabList>
   </ComponentStory>
 </template>
 
@@ -19,5 +19,5 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import RouterTab from '@/components/RouterTab.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
-import TabList from '@core/components/tab/TabList.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.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 04cf1573283..3e5dfbb425f 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
@@ -3,19 +3,19 @@
     v-slot="{ properties, settings }"
     :params="[
       prop('disabled').bool().widget().ctx(),
-      prop('active').bool().widget(),
+      prop('selected').bool().widget(),
       prop('tag').str().default('span'),
       slot(),
       setting('label').widget(text()).preset('Foobar'),
       setting('counter').widget(text()),
     ]"
   >
-    <TabList>
-      <TabItem v-bind="properties">
+    <VtsTabList>
+      <VtsTabItem v-bind="properties">
         {{ settings.label }}
         <VtsCounter v-if="settings.counter" :value="settings.counter" accent="brand" variant="primary" size="small" />
-      </TabItem>
-    </TabList>
+      </VtsTabItem>
+    </VtsTabList>
   </ComponentStory>
 </template>
 
@@ -24,6 +24,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 VtsCounter from '@core/components/counter/VtsCounter.vue'
-import TabItem from '@core/components/tab/TabItem.vue'
-import TabList from '@core/components/tab/TabList.vue'
+import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tab/tab-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tab/tab-list.story.vue
index be09517f843..8c0d895388c 100644
--- a/@xen-orchestra/lite/src/stories/web-core/tab/tab-list.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/tab/tab-list.story.vue
@@ -1,19 +1,19 @@
 <template>
   <ComponentStory
     v-slot="{ properties }"
-    :params="[prop('disabled').bool().widget(), slot().help('Contains <RouterTab> or <TabItem>')]"
+    :params="[prop('disabled').bool().widget(), slot().help('Contains <RouterTab> or <VtsTabItem>')]"
   >
-    <TabList v-bind="properties">
-      <TabItem>Foo</TabItem>
-      <TabItem>Bar</TabItem>
-      <TabItem>Baz</TabItem>
-    </TabList>
+    <VtsTabList v-bind="properties">
+      <VtsTabItem>Foo</VtsTabItem>
+      <VtsTabItem>Bar</VtsTabItem>
+      <VtsTabItem>Baz</VtsTabItem>
+    </VtsTabList>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, slot } from '@/libs/story/story-param'
-import TabItem from '@core/components/tab/TabItem.vue'
-import TabList from '@core/components/tab/TabList.vue'
+import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
deleted file mode 100644
index 1479dc4b256..00000000000
--- a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <component :is="tag" :class="classNames" class="tab-item typo">
-    <slot />
-  </component>
-</template>
-
-<script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
-import { useUiStore } from '@core/stores/ui.store'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    active?: boolean
-    tag?: string
-  }>(),
-  { tag: 'span', disabled: undefined }
-)
-
-const { isMobile } = storeToRefs(useUiStore())
-
-const isDisabled = useContext(DisabledContext, () => props.disabled)
-
-const classNames = computed(() => {
-  return [
-    isMobile.value ? 'c3-semi-bold' : 'c1-semi-bold',
-    {
-      disabled: isDisabled.value,
-      active: props.active,
-    },
-  ]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.tab-item {
-  & {
-    --color: var(--color-neutral-txt-primary);
-    --border-color: transparent;
-    --background-color: transparent;
-  }
-
-  &:is(:hover, .hover, :focus-visible) {
-    --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-hover);
-    --background-color: var(--color-normal-background-hover);
-  }
-
-  &:is(:active, .pressed) {
-    --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-active);
-    --background-color: var(--color-normal-background-active);
-  }
-
-  &:is(.active, .selected) {
-    --color: var(--color-neutral-txt-primary);
-    --border-color: var(--color-normal-item-base);
-    --background-color: var(--color-normal-background-selected);
-  }
-
-  &:is(:disabled, .disabled) {
-    --color: var(--color-neutral-txt-secondary);
-    --border-color: transparent;
-    --background-color: transparent;
-  }
-}
-
-/* SIZE VARIANTS */
-.tab-item {
-  &.c3-semi-bold {
-    --spacing: 0.8rem;
-  }
-
-  &.c1-semi-bold {
-    --spacing: 1.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.tab-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing);
-  padding: var(--spacing);
-  text-decoration: none;
-  color: var(--color);
-  background-color: var(--background-color);
-  border-bottom: 0.2rem solid var(--border-color);
-  cursor: pointer;
-
-  &.disabled {
-    pointer-events: none;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/components/tab/VtsTabItem.vue b/@xen-orchestra/web-core/lib/components/tab/VtsTabItem.vue
new file mode 100644
index 00000000000..6f365b82757
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/tab/VtsTabItem.vue
@@ -0,0 +1,84 @@
+<!-- v2 -->
+<template>
+  <component :is="tag" :class="classNames" class="vts-tab-item">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { useUiStore } from '@core/stores/ui.store'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    selected?: boolean
+    tag?: string
+  }>(),
+  { tag: 'span', disabled: undefined }
+)
+
+defineSlots<{
+  default(): any
+}>()
+
+const { isMobile } = storeToRefs(useUiStore())
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const classNames = computed(() => {
+  return [
+    isMobile.value ? 'typo c3-semi-bold' : 'typo c1-semi-bold',
+    {
+      disabled: isDisabled.value,
+      selected: props.selected,
+      mobile: isMobile.value,
+    },
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-tab-item {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  text-decoration: none;
+  color: var(--color-neutral-txt-primary);
+  border-bottom: 0.2rem solid transparent;
+  cursor: pointer;
+
+  &.mobile {
+    gap: 0.8rem;
+    padding: 0.8rem;
+  }
+
+  /* INTERACTION VARIANTS */
+
+  &:hover {
+    border-color: var(--color-normal-item-hover);
+    background-color: var(--color-normal-background-hover);
+  }
+
+  &:active {
+    border-color: var(--color-normal-item-active);
+    background-color: var(--color-normal-background-active);
+  }
+
+  &.selected {
+    border-color: var(--color-normal-item-base);
+    background-color: var(--color-normal-background-selected);
+  }
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+    border-color: transparent;
+    background-color: transparent;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabList.vue b/@xen-orchestra/web-core/lib/components/tab/VtsTabList.vue
similarity index 86%
rename from @xen-orchestra/web-core/lib/components/tab/TabList.vue
rename to @xen-orchestra/web-core/lib/components/tab/VtsTabList.vue
index c515828d658..44068679baa 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabList.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/VtsTabList.vue
@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <div class="tab-list">
+  <div class="vts-tab-list">
     <slot />
   </div>
 </template>
@@ -16,11 +16,15 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
+defineSlots<{
+  default(): any
+}>()
+
 useContext(DisabledContext, () => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
-.tab-list {
+.vts-tab-list {
   display: flex;
   align-items: stretch;
   height: 5rem;
diff --git a/@xen-orchestra/web-core/lib/composables/tab-list.composable.ts b/@xen-orchestra/web-core/lib/components/tab/tab-list.composable.ts
similarity index 89%
rename from @xen-orchestra/web-core/lib/composables/tab-list.composable.ts
rename to @xen-orchestra/web-core/lib/components/tab/tab-list.composable.ts
index 16263009878..d03d5fa637c 100644
--- a/@xen-orchestra/web-core/lib/composables/tab-list.composable.ts
+++ b/@xen-orchestra/web-core/lib/components/tab/tab-list.composable.ts
@@ -1,4 +1,4 @@
-import type { Tab, TabList } from '@core/types/tab.type'
+import type { Tab, TabList } from '@core/components/tab/tab.type'
 import { computed, type MaybeRefOrGetter, type Ref, toRef } from 'vue'
 
 export function useTabList<TName extends string>(names: TName[], initialTab?: MaybeRefOrGetter<TName>) {
@@ -22,7 +22,7 @@ export function useTabList<TName extends string>(names: TName[], initialTab?: Ma
               event.preventDefault()
               activate(name)
             },
-            active: isActive(name),
+            selected: isActive(name),
           },
         },
       ])
diff --git a/@xen-orchestra/web-core/lib/types/tab.type.ts b/@xen-orchestra/web-core/lib/components/tab/tab.type.ts
similarity index 94%
rename from @xen-orchestra/web-core/lib/types/tab.type.ts
rename to @xen-orchestra/web-core/lib/components/tab/tab.type.ts
index 038408326f1..a1576bbf230 100644
--- a/@xen-orchestra/web-core/lib/types/tab.type.ts
+++ b/@xen-orchestra/web-core/lib/components/tab/tab.type.ts
@@ -5,7 +5,7 @@ export type Tab = {
   activate: () => void
   bindings: {
     onClick: (event: MouseEvent) => void
-    active: boolean
+    selected: boolean
   }
 }
 
diff --git a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
index 255253e3696..46c8c446709 100644
--- a/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
+++ b/@xen-orchestra/web-core/lib/components/task/QuickTaskTabBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <TabList :disabled="loading">
-    <TabItem v-bind="tabs.pending.bindings">
+  <VtsTabList :disabled="loading">
+    <VtsTabItem v-bind="tabs.pending.bindings">
       {{ $t('tasks.quick-view.in-progress') }}
       <VtsCounter
         v-if="pendingCount !== undefined"
@@ -9,8 +9,8 @@
         variant="primary"
         size="small"
       />
-    </TabItem>
-    <TabItem v-bind="tabs.success.bindings">
+    </VtsTabItem>
+    <VtsTabItem v-bind="tabs.success.bindings">
       {{ $t('tasks.quick-view.done') }}
       <VtsCounter
         v-if="successCount !== undefined"
@@ -19,8 +19,8 @@
         variant="primary"
         size="small"
       />
-    </TabItem>
-    <TabItem v-bind="tabs.failure.bindings">
+    </VtsTabItem>
+    <VtsTabItem v-bind="tabs.failure.bindings">
       {{ $t('tasks.quick-view.failed') }}
       <VtsCounter
         v-if="failureCount !== undefined"
@@ -29,26 +29,26 @@
         variant="primary"
         size="small"
       />
-    </TabItem>
+    </VtsTabItem>
     <Divider type="tab" />
-    <TabItem v-bind="tabs.all.bindings">
+    <VtsTabItem v-bind="tabs.all.bindings">
       {{ $t('tasks.quick-view.all') }}
-    </TabItem>
+    </VtsTabItem>
     <!--
     TODO
     <UiButton :right-icon="faAngleRight" class="see-all" level="tertiary" size="extra-small">
       {{ $t('see-all') }}
     </UiButton>
     -->
-  </TabList>
+  </VtsTabList>
 </template>
 
 <script lang="ts" setup>
 import VtsCounter from '@core/components/counter/VtsCounter.vue'
 import Divider from '@core/components/divider/Divider.vue'
-import TabItem from '@core/components/tab/TabItem.vue'
-import TabList from '@core/components/tab/TabList.vue'
-import { useTabList } from '@core/composables/tab-list.composable'
+import { useTabList } from '@core/components/tab/tab-list.composable'
+import VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 import type { TaskTab } from '@core/types/task.type'
 
 defineProps<{
diff --git a/@xen-orchestra/web/src/components/host/HostHeader.vue b/@xen-orchestra/web/src/components/host/HostHeader.vue
index 8584ba91c95..f298d9b4fc8 100644
--- a/@xen-orchestra/web/src/components/host/HostHeader.vue
+++ b/@xen-orchestra/web/src/components/host/HostHeader.vue
@@ -5,21 +5,21 @@
     </template>
     {{ host.name_label }}
   </HeadBar>
-  <TabList>
-    <TabItem disabled>{{ $t('dashboard') }}</TabItem>
-    <TabItem disabled>{{ $t('console') }}</TabItem>
-    <TabItem disabled>{{ $t('alarms') }}</TabItem>
-    <TabItem disabled>{{ $t('stats') }}</TabItem>
-    <TabItem disabled>{{ $t('system') }}</TabItem>
-    <TabItem disabled>{{ $t('network') }}</TabItem>
-    <TabItem disabled>{{ $t('storage') }}</TabItem>
-    <TabItem disabled>{{ $t('tasks') }}</TabItem>
+  <VtsTabList>
+    <VtsTabItem disabled>{{ $t('dashboard') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('console') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('alarms') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('stats') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('system') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('network') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('storage') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('tasks') }}</VtsTabItem>
     <RouterLink v-slot="{ isActive, href }" :to="`/host/${host.id}/vms`" custom>
-      <TabItem :active="isActive" :href tag="a">
+      <VtsTabItem :selected="isActive" :href tag="a">
         {{ $t('vms') }}
-      </TabItem>
+      </VtsTabItem>
     </RouterLink>
-  </TabList>
+  </VtsTabList>
 </template>
 
 <script lang="ts" setup>
@@ -27,8 +27,8 @@ 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 VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.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..5322475a10c 100644
--- a/@xen-orchestra/web/src/components/pool/PoolHeader.vue
+++ b/@xen-orchestra/web/src/components/pool/PoolHeader.vue
@@ -2,32 +2,32 @@
   <HeadBar :icon="faCity">
     {{ pool.name_label }}
   </HeadBar>
-  <TabList>
-    <TabItem disabled>{{ $t('dashboard') }}</TabItem>
-    <TabItem disabled>{{ $t('alarms') }}</TabItem>
-    <TabItem disabled>{{ $t('stats') }}</TabItem>
-    <TabItem disabled>{{ $t('system') }}</TabItem>
-    <TabItem disabled>{{ $t('network') }}</TabItem>
-    <TabItem disabled>{{ $t('storage') }}</TabItem>
-    <TabItem disabled>{{ $t('tasks') }}</TabItem>
+  <VtsTabList>
+    <VtsTabItem disabled>{{ $t('dashboard') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('alarms') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('stats') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('system') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('network') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('storage') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('tasks') }}</VtsTabItem>
     <RouterLink v-slot="{ isActive, href }" :to="`/pool/${pool.id}/hosts`" custom>
-      <TabItem :active="isActive" :href tag="a">
+      <VtsTabItem :selected="isActive" :href tag="a">
         {{ $t('hosts') }}
-      </TabItem>
+      </VtsTabItem>
     </RouterLink>
     <RouterLink v-slot="{ isActive, href }" :to="`/pool/${pool.id}/vms`" custom>
-      <TabItem :active="isActive" :href tag="a">
+      <VtsTabItem :selected="isActive" :href tag="a">
         {{ $t('vms') }}
-      </TabItem>
+      </VtsTabItem>
     </RouterLink>
-  </TabList>
+  </VtsTabList>
 </template>
 
 <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 VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 import { faCity } from '@fortawesome/free-solid-svg-icons'
 
 defineProps<{
diff --git a/@xen-orchestra/web/src/components/vm/VmHeader.vue b/@xen-orchestra/web/src/components/vm/VmHeader.vue
index b427ccd48fa..d3de7b0a0c0 100644
--- a/@xen-orchestra/web/src/components/vm/VmHeader.vue
+++ b/@xen-orchestra/web/src/components/vm/VmHeader.vue
@@ -5,16 +5,16 @@
       <ObjectIcon :state="vm.power_state.toLocaleLowerCase() as VmState" type="vm" />
     </template>
   </HeadBar>
-  <TabList>
-    <TabItem disabled>{{ $t('dashboard') }}</TabItem>
-    <TabItem active>{{ $t('console') }}</TabItem>
-    <TabItem disabled>{{ $t('alarms') }}</TabItem>
-    <TabItem disabled>{{ $t('stats') }}</TabItem>
-    <TabItem disabled>{{ $t('system') }}</TabItem>
-    <TabItem disabled>{{ $t('network') }}</TabItem>
-    <TabItem disabled>{{ $t('storage') }}</TabItem>
-    <TabItem disabled>{{ $t('tasks') }}</TabItem>
-  </TabList>
+  <VtsTabList>
+    <VtsTabItem disabled>{{ $t('dashboard') }}</VtsTabItem>
+    <VtsTabItem selected>{{ $t('console') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('alarms') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('stats') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('system') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('network') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('storage') }}</VtsTabItem>
+    <VtsTabItem disabled>{{ $t('tasks') }}</VtsTabItem>
+  </VtsTabList>
 </template>
 
 <script lang="ts" setup>
@@ -22,8 +22,8 @@ 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 VtsTabItem from '@core/components/tab/VtsTabItem.vue'
+import VtsTabList from '@core/components/tab/VtsTabList.vue'
 
 defineProps<{
   vm: XoVm