diff --git a/.prettierignore b/.prettierignore
index a50140d249..2c6de51e84 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,3 +4,4 @@
 
 # Generated files
 /@xen-orchestra/web/src/route-map.d.ts
+/@xen-orchestra/lite/src/route-map.d.ts
diff --git a/@xen-orchestra/lite/CHANGELOG.md b/@xen-orchestra/lite/CHANGELOG.md
index dcf3ae79f7..8230328084 100644
--- a/@xen-orchestra/lite/CHANGELOG.md
+++ b/@xen-orchestra/lite/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Update the UiCard component to use the one from web-core (PR [#9980](https://github.com/vatesfr/xen-orchestra/pull/9980))
 - Update the UiCardTitle component to use the one from web-core (PR [#9982](https://github.com/vatesfr/xen-orchestra/pull/9982))
 - Replacement of the UiSeparator component with VtsDivider from web-core (PR [#10017](https://github.com/vatesfr/xen-orchestra/pull/10017))
+- Update side panels (PR [#9836](https://github.com/vatesfr/xen-orchestra/pull/9836))
 
 ## **0.22.0** (2026-05-28)
 
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue b/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
index f8b35821d6..8163f9c8de 100644
--- a/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
@@ -1,41 +1,28 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-if="uiStore.isSmall"
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          icon="fa:angle-left"
-          @click="emit('close')"
-        />
-        <div class="action-buttons">
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="brand"
-            left-icon="fa:edit"
-          >
-            {{ t('action:edit') }}
-          </UiButton>
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="danger"
-            left-icon="fa:trash"
-          >
-            {{ t('action:delete') }}
-          </UiButton>
-        </div>
-      </div>
+  <VtsSidePanel :has-selection="!!pif" @close="emit('close')">
+    <template v-if="pif" #actions>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="brand"
+        left-icon="action:edit"
+      >
+        {{ t('action:edit') }}
+      </UiButton>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="danger"
+        left-icon="action:delete"
+      >
+        {{ t('action:delete') }}
+      </UiButton>
     </template>
-    <template #default>
+    <template v-if="pif" #default>
       <!-- PIF -->
       <UiCard class="card">
         <UiCardTitle>{{ isBond ? t('bond') : t('pif') }}</UiCardTitle>
@@ -282,7 +269,7 @@
         </div>
       </UiCard>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -293,22 +280,21 @@ import { usePifStore } from '@/stores/xen-api/pif.store'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import humanFormat from 'human-format'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { pif } = defineProps<{
-  pif: XenApiPif
+  pif?: XenApiPif
 }>()
 
 const emit = defineEmits<{
@@ -318,21 +304,32 @@ const emit = defineEmits<{
 const { getByOpaqueRef: getPifMetricsByOpaqueRef, getPifCarrier } = usePifMetricsStore().subscribe()
 const { getByOpaqueRef: getNetworkByOpaqueRef } = useNetworkStore().subscribe()
 const { getBondsDevices, isBondMaster } = usePifStore().subscribe()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
-const ipAddresses = computed(() => [pif.IP, ...pif.IPv6].filter(ip => ip))
+const ipAddresses = computed(() => {
+  if (pif === undefined) {
+    return []
+  }
 
-const network = computed(() => getNetworkByOpaqueRef(pif.network))
+  return [pif.IP, ...pif.IPv6].filter(ip => ip)
+})
+
+const network = computed(() => (pif !== undefined ? getNetworkByOpaqueRef(pif.network) : undefined))
 
 const networkPurpose = computed(() => (network.value?.purpose?.[0] ? t('on') : t('off')))
 
-const status = computed(() => (pif.currently_attached ? 'connected' : 'disconnected'))
+const status = computed(() => (pif?.currently_attached ? 'connected' : 'disconnected'))
 
-const physicalInterfaceStatus = computed(() => (getPifCarrier(pif) ? 'connected' : 'physically-disconnected'))
+const physicalInterfaceStatus = computed(() =>
+  pif !== undefined && getPifCarrier(pif) ? 'connected' : 'physically-disconnected'
+)
 
 const ipConfigurationMode = computed(() => {
+  if (pif === undefined) {
+    return t('none')
+  }
+
   switch (pif.ip_configuration_mode) {
     case 'Static':
       return t('static')
@@ -343,11 +340,15 @@ const ipConfigurationMode = computed(() => {
   }
 })
 
-const bondDevices = computed(() => getBondsDevices(pif))
+const bondDevices = computed(() => (pif !== undefined ? getBondsDevices(pif) : []))
 
-const isBond = computed(() => isBondMaster(pif))
+const isBond = computed(() => (pif !== undefined ? isBondMaster(pif) : false))
 
 const speed = computed(() => {
+  if (pif === undefined) {
+    return ''
+  }
+
   const speed = getPifMetricsByOpaqueRef(pif.metrics)?.speed || 0
   const speedInBytes = speed * 1000000
 
@@ -384,21 +385,4 @@ const speed = computed(() => {
     content: '-';
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
 </style>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworksTable.vue
index fed7e65103..9ff468f0fd 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworksTable.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworksTable.vue
@@ -125,7 +125,7 @@ const { HeadCells, BodyCells } = useNetworkColumns({
     description: r => r(network.name_description),
     mtu: r => r(network.MTU),
     defaultLockingMode: r => r(getLockingMode(network.default_locking_mode)),
-    selectItem: r => r(() => selectedNetworkId.value === network.uuid),
+    selectItem: r => r(() => (selectedNetworkId.value = network.uuid)),
   }),
 })
 </script>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworkSidePanel.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworkSidePanel.vue
index 4ea347d0e1..7054bd5ca4 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolNetworkSidePanel.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolNetworkSidePanel.vue
@@ -1,42 +1,28 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-if="uiStore.isSmall"
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          icon="fa:angle-left"
-          @click="emit('close')"
-        />
-        <div class="action-buttons">
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="brand"
-            left-icon="fa:edit"
-          >
-            {{ t('action:edit') }}
-          </UiButton>
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="danger"
-            left-icon="fa:trash"
-          >
-            {{ t('action:delete') }}
-          </UiButton>
-          <UiButtonIcon v-tooltip="t('coming-soon!')" disabled accent="brand" size="small" icon="fa:ellipsis" />
-        </div>
-      </div>
+  <VtsSidePanel :has-selection="!!network" @close="emit('close')">
+    <template v-if="network" #actions>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="brand"
+        left-icon="action:edit"
+      >
+        {{ t('action:edit') }}
+      </UiButton>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="danger"
+        left-icon="action:delete"
+      >
+        {{ t('action:delete') }}
+      </UiButton>
     </template>
-    <template #default>
+    <template v-if="network" #default>
       <UiCard class="card-container">
         <UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo-body-bold">
           {{ network.name_label }}
@@ -113,7 +99,7 @@
         </table>
       </UiCard>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -123,19 +109,17 @@ import { usePifStore } from '@/stores/xen-api/pif.store'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.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 UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { network } = defineProps<{
-  network: XenApiNetwork
+  network?: XenApiNetwork
 }>()
 
 const emit = defineEmits<{
@@ -143,11 +127,10 @@ const emit = defineEmits<{
 }>()
 
 const { getPifsByNetworkRef } = usePifStore().subscribe()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
-const pifs = computed(() => getPifsByNetworkRef(network.$ref))
+const pifs = computed(() => (network !== undefined ? getPifsByNetworkRef(network.$ref) : []))
 
 const networkVlan = computed(() => {
   if (pifs.value.length === 0) {
@@ -157,10 +140,10 @@ const networkVlan = computed(() => {
   return pifs.value[0].VLAN !== -1 ? pifs.value[0].VLAN.toString() : t('none')
 })
 
-const networkNbd = computed(() => (network.purpose[0] ? t('on') : t('off')))
+const networkNbd = computed(() => (network?.purpose[0] ? t('on') : t('off')))
 
 const networkDefaultLockingMode = computed(() =>
-  network.default_locking_mode === 'disabled' ? t('disabled') : t('unlocked')
+  network?.default_locking_mode === 'disabled' ? t('disabled') : t('unlocked')
 )
 
 const pifsCount = computed(() => pifs.value.length)
@@ -195,21 +178,4 @@ const pifsCount = computed(() => pifs.value.length)
     content: '-';
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
 </style>
diff --git a/@xen-orchestra/lite/src/components/vm/network/VmVifsSidePanel.vue b/@xen-orchestra/lite/src/components/vm/network/VmVifsSidePanel.vue
index b73a32590f..a08523c3e9 100644
--- a/@xen-orchestra/lite/src/components/vm/network/VmVifsSidePanel.vue
+++ b/@xen-orchestra/lite/src/components/vm/network/VmVifsSidePanel.vue
@@ -1,41 +1,28 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-if="uiStore.isSmall"
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          icon="fa:angle-left"
-          @click="emit('close')"
-        />
-        <div class="action-buttons">
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="brand"
-            left-icon="fa:edit"
-          >
-            {{ t('action:edit') }}
-          </UiButton>
-          <UiButton
-            v-tooltip="t('coming-soon!')"
-            disabled
-            size="medium"
-            variant="tertiary"
-            accent="danger"
-            left-icon="fa:trash"
-          >
-            {{ t('action:delete') }}
-          </UiButton>
-        </div>
-      </div>
+  <VtsSidePanel :has-selection="!!vif" @close="emit('close')">
+    <template v-if="vif" #actions>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="brand"
+        left-icon="fa:edit"
+      >
+        {{ t('action:edit') }}
+      </UiButton>
+      <UiButton
+        v-tooltip="t('coming-soon!')"
+        disabled
+        size="medium"
+        variant="tertiary"
+        accent="danger"
+        left-icon="fa:trash"
+      >
+        {{ t('action:delete') }}
+      </UiButton>
     </template>
-    <template #default>
+    <template v-if="vif" #default>
       <!-- VIF -->
       <UiCard class="card">
         <UiCardTitle>{{ t('vif') }}</UiCardTitle>
@@ -144,7 +131,7 @@
         </div>
       </UiCard>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -155,20 +142,19 @@ import { useVmStore } from '@/stores/xen-api/vm.store'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { getUniqueIpAddressesForDevice } from '@core/utils/ip-address.utils.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { vif } = defineProps<{
-  vif: XenApiVif
+  vif?: XenApiVif
 }>()
 
 const emit = defineEmits<{
@@ -180,9 +166,12 @@ const { t } = useI18n()
 const { getByOpaqueRef: getNetworkByOpaqueRef } = useNetworkStore().subscribe()
 const { getByOpaqueRef: getGuestMetricsByOpaqueRef } = useVmGuestMetricsStore().subscribe()
 const { getByOpaqueRef: getVmByOpaqueRef } = useVmStore().subscribe()
-const uiStore = useUiStore()
 
 const ipAddresses = computed(() => {
+  if (vif === undefined) {
+    return []
+  }
+
   const vm = getVmByOpaqueRef(vif.VM)
 
   if (!vm) {
@@ -194,9 +183,9 @@ const ipAddresses = computed(() => {
   return getUniqueIpAddressesForDevice(networks, vif.device)
 })
 
-const network = computed(() => getNetworkByOpaqueRef(vif.network))
+const network = computed(() => (vif !== undefined ? getNetworkByOpaqueRef(vif.network) : undefined))
 
-const status = computed(() => (vif.currently_attached ? 'connected' : 'disconnected'))
+const status = computed(() => (vif?.currently_attached ? 'connected' : 'disconnected'))
 </script>
 
 <style scoped lang="postcss">
@@ -213,21 +202,4 @@ const status = computed(() => (vif.currently_attached ? 'connected' : 'disconnec
     content: '-';
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.action-buttons {
-  display: flex;
-  align-items: center;
-}
 </style>
diff --git a/@xen-orchestra/lite/src/pages/host/[uuid]/network.vue b/@xen-orchestra/lite/src/pages/host/[uuid]/network.vue
index 801ad8df57..d4a50b74ab 100644
--- a/@xen-orchestra/lite/src/pages/host/[uuid]/network.vue
+++ b/@xen-orchestra/lite/src/pages/host/[uuid]/network.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="host-network-view" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="network">
     <UiCard class="container">
       <HostPifsTable :pifs />
     </UiCard>
-    <HostPifSidePanel v-if="selectedPif" :pif="selectedPif" @close="selectedPif = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <HostPifSidePanel :pif="selectedPif" @close="selectedPif = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -19,18 +14,15 @@ import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePifStore } from '@/stores/xen-api/pif.store'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 const { records } = usePifStore().subscribe()
 const { getByOpaqueRef: getHostOpaqueRef } = useHostStore().subscribe()
-const uiStore = useUiStore()
 
 const route = useRoute<'/host/[uuid]/network'>()
 
@@ -52,12 +44,7 @@ const selectedPif = useRouteQuery<XenApiPif | undefined>('id', {
 </script>
 
 <style lang="postcss" scoped>
-.host-network-view {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
+.network {
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/lite/src/pages/pool/[uuid]/network.vue b/@xen-orchestra/lite/src/pages/pool/[uuid]/network.vue
index 3994b3afe4..f52538d1ff 100644
--- a/@xen-orchestra/lite/src/pages/pool/[uuid]/network.vue
+++ b/@xen-orchestra/lite/src/pages/pool/[uuid]/network.vue
@@ -1,16 +1,11 @@
 <template>
-  <div class="pool-network-view" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="network">
     <UiCard class="container">
       <PoolNetworksTable :networks="networksWithPifs" />
       <PoolHostInternalNetworksTable :networks="networksWithoutPifs" />
     </UiCard>
-    <PoolNetworkSidePanel v-if="selectedNetwork" :network="selectedNetwork" @close="selectedNetwork = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <PoolNetworkSidePanel :network="selectedNetwork" @close="selectedNetwork = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -20,18 +15,15 @@ import PoolNetworksTable from '@/components/pool/network/PoolNetworksTable.vue'
 import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 usePageTitleStore().setTitle(t('network'))
 
 const { getByUuid, networksWithPifs, networksWithoutPifs } = useNetworkStore().subscribe()
-const uiStore = useUiStore()
 
 const selectedNetwork = useRouteQuery<XenApiNetwork | undefined>('id', {
   toData: id => getByUuid(id as XenApiNetwork['uuid']),
@@ -40,12 +32,7 @@ const selectedNetwork = useRouteQuery<XenApiNetwork | undefined>('id', {
 </script>
 
 <style lang="postcss" scoped>
-.pool-network-view {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
+.network {
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/lite/src/pages/vm/[uuid]/network.vue b/@xen-orchestra/lite/src/pages/vm/[uuid]/network.vue
index 32ad523b8e..32cd610ea3 100644
--- a/@xen-orchestra/lite/src/pages/vm/[uuid]/network.vue
+++ b/@xen-orchestra/lite/src/pages/vm/[uuid]/network.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="vm-network-view" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="network">
     <UiCard class="container">
       <VmVifsTable :vifs />
     </UiCard>
-    <VmVifsSidePanel v-if="selectedVif" :vif="selectedVif" @close="selectedVif = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VmVifsSidePanel :vif="selectedVif" @close="selectedVif = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -19,18 +14,15 @@ import type { XenApiVif } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useVifStore } from '@/stores/xen-api/vif.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { useArrayFilter } from '@vueuse/shared'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 const { records } = useVifStore().subscribe()
 const { getByOpaqueRef } = useVmStore().subscribe()
-const uiStore = useUiStore()
 
 const route = useRoute<'/vm/[uuid]/network'>()
 
@@ -50,12 +42,7 @@ const selectedVif = useRouteQuery<XenApiVif | undefined>('id', {
 </script>
 
 <style lang="postcss" scoped>
-.vm-network-view {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
+.network {
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/lite/src/route-map.d.ts b/@xen-orchestra/lite/src/route-map.d.ts
index ccd33c4624..d21c9b60ae 100644
--- a/@xen-orchestra/lite/src/route-map.d.ts
+++ b/@xen-orchestra/lite/src/route-map.d.ts
@@ -386,6 +386,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/story/web-core/panel/vts-panel': RouteRecordInfo<
+      '/story/web-core/panel/vts-panel',
+      '/story/web-core/panel/vts-panel',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/story/web-core/resources/vts-resource': RouteRecordInfo<
       '/story/web-core/resources/vts-resource',
       '/story/web-core/resources/vts-resource',
@@ -1317,6 +1324,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/stories/web-core/panel/vts-panel.story.vue': {
+      routes:
+        | '/story/web-core/panel/vts-panel'
+      views:
+        | never
+    }
     'src/stories/web-core/resources/vts-resource.story.vue': {
       routes:
         | '/story/web-core/resources/vts-resource'
diff --git a/@xen-orchestra/lite/src/stories/web-core/panel/vts-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/panel/vts-panel.story.vue
new file mode 100644
index 0000000000..18d1c75cfa
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/panel/vts-panel.story.vue
@@ -0,0 +1,69 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('error').bool().widget().preset(false),
+      prop('closable').bool().widget().preset(true),
+      iconProp('closeIcon')
+        .preset('action:close-cancel-clear')
+        .default('action:close-cancel-clear')
+        .help('The close icon (can be different on mobile)'),
+      event('close').args({}).help('Emitted when the user clicks the close button'),
+      slot(),
+      slot('header').help('Meant to receive text or other information'),
+      slot('actions').help('For the main action buttons'),
+      slot('more-actions').help('For other action buttons, shown in a dropdown menu'),
+      slot('corner-actions').help('For action icon buttons, like the pin button on VtsSidePanel'),
+      setting('headerText').widget(text()),
+      setting('forceMaxWidth').widget(boolean()).preset(true).help('Simulate the side panel\'s default width'),
+      setting('showButtons').widget(boolean()).preset(true),
+      setting('showMoreButtons').widget(boolean()).preset(false),
+      setting('showHero').widget(boolean()).preset(true),
+      setting('heroType')
+        .widget(choice(...STATE_HERO_TYPES))
+        .preset('no-selection'),
+    ]"
+  >
+    <VtsPanel v-bind="properties" :class="{ 'force-max-width': settings.forceMaxWidth }">
+      <template v-if="settings.headerText" #header>
+        <span>{{ settings.headerText }}</span>
+      </template>
+      <template v-if="settings.showButtons" #actions>
+        <UiButton variant="tertiary" size="medium" accent="brand" left-icon="action:edit">Edit</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="danger" left-icon="action:delete">Delete</UiButton>
+      </template>
+      <template v-if="settings.showMoreButtons" #more-actions>
+        <UiButton variant="tertiary" size="medium" accent="warning" left-icon="action:disconnect">
+          Disconnect<UiCounter value="3" accent="warning" variant="primary" size="small" />
+        </UiButton>
+        <UiButton variant="tertiary" size="medium" accent="brand" left-icon="action:copy">Copy</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="brand" left-icon="action:download">Download</UiButton>
+      </template>
+      <template #default>
+        <VtsStateHero v-if="settings.showHero" format="card" :type="settings.heroType" size="medium" />
+        <UiCard v-else>
+          <div>Card Content</div>
+        </UiCard>
+      </template>
+    </VtsPanel>
+  </ComponentStory>
+</template>
+
+<script setup lang="ts">
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { event, iconProp, prop, setting, slot } from '@/libs/story/story-param'
+import { boolean, choice, text } from '@/libs/story/story-widget'
+import VtsPanel from '@core/components/panel/VtsPanel.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import { STATE_HERO_TYPES } from '@core/types/state-hero.type.ts'
+</script>
+
+<style scoped lang="postcss">
+.force-max-width {
+  max-width: 40rem;
+  margin: 0 auto;
+}
+</style>
diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
index 9d5bc7482d..a0a98a780f 100644
--- a/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/vts-state-hero.story.vue
@@ -7,17 +7,7 @@
       prop('horizontal').bool().widget(),
       prop('imageSize').enum('small', 'medium', 'large').preset('medium').widget(),
       prop('type')
-        .enum(
-          'no-result',
-          'under-construction',
-          'no-data',
-          'no-selection',
-          'error',
-          'not-found',
-          'offline',
-          'all-good',
-          'all-done'
-        )
+        .enum(...STATE_HERO_TYPES)
         .widget(),
       prop('noBackground').bool().widget(),
       slot(),
@@ -34,4 +24,5 @@
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import { prop, setting, slot } from '@/libs/story/story-param'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import { STATE_HERO_TYPES } from '@core/types/state-hero.type.ts'
 </script>
diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
index 5613a6a192..c14449cdf1 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
@@ -2,54 +2,26 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('error').bool().widget(),
-      setting('action1').widget(text()).preset('Edit'),
-      setting('action2').widget(text()).preset('Delete'),
+      prop('error').bool().widget().preset(false),
       slot(),
-      slot('header').help('Meant to receive UiButton or other information'),
+      slot('header').help('Optional panel header'),
+      setting('showHeader').widget(boolean()).preset(true),
+      setting('headerContent').widget(text()).preset('Panel header'),
     ]"
-    :presets="{
-      Normal: {
-        props: {
-          error: false,
-        },
-      },
-      Error: {
-        props: {
-          error: true,
-        },
-      },
-    }"
   >
-    <UiSidePanel v-bind="properties" :error="properties.error">
-      <template #header>
-        <UiButton variant="tertiary" size="medium" accent="brand" @click="toggle()">Toggle</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="brand" left-icon="fa:edit"> {{ settings.action1 }}</UiButton>
-        <UiButton variant="tertiary" size="medium" accent="danger" left-icon="fa:trash">
-          {{ settings.action2 }}
-        </UiButton>
-      </template>
-      <VtsStateHero v-if="!isReady" format="card" type="busy" size="medium" />
-      <UiCard v-else-if="!properties.error">
-        <div>Content 1</div>
-        <div>Content 1</div>
-        <div>Content 1</div>
+    <UiPanel v-bind="properties">
+      <template v-if="settings.showHeader" #header>{{ settings.headerContent }}</template>
+      <UiCard>
+        <div>Card content</div>
       </UiCard>
-    </UiSidePanel>
+    </UiPanel>
   </ComponentStory>
 </template>
 
 <script setup lang="ts">
 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 VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import UiButton from '@core/components/ui/button/UiButton.vue'
+import { boolean, text } from '@/libs/story/story-widget'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiSidePanel from '@core/components/ui/panel/UiPanel.vue'
-import { useToggle } from '@vueuse/core'
-import { computed } from 'vue'
-
-const [isToggled, toggle] = useToggle()
-const isReady = computed(() => isToggled.value)
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/layout/VtsContentSidePanel.vue b/@xen-orchestra/web-core/lib/components/layout/VtsContentSidePanel.vue
new file mode 100644
index 0000000000..0374b49335
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/layout/VtsContentSidePanel.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="vts-content-side-panel"
+    :class="{
+      mobile: uiStore.isSmall,
+      'has-panel-column': hasPanelColumn,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePanelStore } from '@core/stores/panel.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { computed } from 'vue'
+
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const hasPanelColumn = computed(() => (panelStore.isLocked || panelStore.isExpanded) && !uiStore.isSmall)
+</script>
+
+<style scoped lang="postcss">
+.vts-content-side-panel {
+  --side-panel-width: 40rem;
+
+  &:not(.mobile) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 0;
+    align-items: start;
+    overflow-x: clip;
+    min-height: min-content;
+    transition: grid-template-columns 0.25s;
+
+    &.has-panel-column {
+      grid-template-columns: minmax(0, 1fr) var(--side-panel-width);
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/operation-card/VtsOperationCard.vue b/@xen-orchestra/web-core/lib/components/operation-card/VtsOperationCard.vue
index f13cf9227f..776392642f 100644
--- a/@xen-orchestra/web-core/lib/components/operation-card/VtsOperationCard.vue
+++ b/@xen-orchestra/web-core/lib/components/operation-card/VtsOperationCard.vue
@@ -12,9 +12,10 @@
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useUiStore } from '@core/stores/ui.store.ts'
+import type { StateHeroType } from '@core/types/state-hero.type.ts'
 
 defineProps<{
   title: string
diff --git a/@xen-orchestra/web-core/lib/components/panel/VtsPanel.vue b/@xen-orchestra/web-core/lib/components/panel/VtsPanel.vue
new file mode 100644
index 0000000000..67e9d0d7d5
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/panel/VtsPanel.vue
@@ -0,0 +1,80 @@
+<!-- v5 -->
+<template>
+  <UiPanel :error>
+    <template v-if="needsHeader" #header>
+      <slot v-if="slots.header" name="header" />
+      <div v-if="slots.actions || slots['more-actions']" class="action-buttons">
+        <template v-if="slots.actions">
+          <slot name="actions" />
+        </template>
+        <MenuList v-if="slots['more-actions']" placement="bottom-end">
+          <template #trigger="{ open }">
+            <UiButtonIcon icon="action:more-actions" accent="brand" size="medium" @click="open($event)" />
+          </template>
+          <slot name="more-actions" />
+        </MenuList>
+      </div>
+      <div v-if="slots['corner-actions'] || closable" class="corner-actions">
+        <slot v-if="slots['corner-actions']" name="corner-actions" />
+        <UiButtonIcon
+          v-if="closable"
+          v-tooltip="t('action:close')"
+          size="small"
+          variant="tertiary"
+          accent="brand"
+          :icon="closeIcon"
+          @click="emit('close')"
+        />
+      </div>
+    </template>
+    <slot />
+  </UiPanel>
+</template>
+
+<script setup lang="ts">
+import MenuList from '@core/components/menu/MenuList.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { closable, closeIcon = 'action:close-cancel-clear' } = defineProps<{
+  error?: boolean
+  closable?: boolean
+  closeIcon?: IconName
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  header?(): any
+  actions?(): any
+  'more-actions'?(): any
+  'corner-actions'?(): any
+}>()
+
+const { t } = useI18n()
+
+const needsHeader = computed(
+  () => slots.header || slots.actions || slots['more-actions'] || slots['corner-actions'] || closable
+)
+</script>
+
+<style scoped lang="postcss">
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+.corner-actions {
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+  gap: 0.8rem;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/panel/VtsSidePanel.vue b/@xen-orchestra/web-core/lib/components/panel/VtsSidePanel.vue
new file mode 100644
index 0000000000..d0ef25b060
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/panel/VtsSidePanel.vue
@@ -0,0 +1,140 @@
+<!-- v5 -->
+<template>
+  <div class="vts-side-panel-sticky" :class="{ mobile: uiStore.isSmall }">
+    <VtsPanel
+      :closable="hasSelection"
+      :close-icon="uiStore.isSmall ? 'fa:angle-left' : 'action:close-cancel-clear'"
+      class="vts-side-panel"
+      :class="{
+        locked: panelStore.isLocked && !uiStore.isSmall,
+        mobile: uiStore.isSmall,
+      }"
+      @close="handleClose"
+    >
+      <template v-if="slots.actions" #actions>
+        <slot name="actions" />
+      </template>
+
+      <template v-if="slots['more-actions']" #more-actions>
+        <slot name="more-actions" />
+      </template>
+
+      <template v-if="slots['corner-actions'] || !uiStore.isSmall" #corner-actions>
+        <slot v-if="slots['corner-actions']" name="corner-actions" />
+        <UiButtonIcon
+          v-if="!uiStore.isSmall"
+          v-tooltip="{
+            content: panelStore.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
+            placement: 'left',
+          }"
+          accent="brand"
+          size="small"
+          :icon="panelStore.isLocked ? 'action:pin-panel-hide' : 'action:pin-panel'"
+          @click="panelStore.toggleLock()"
+        />
+      </template>
+
+      <VtsStateHero v-if="!hasSelection" format="panel" type="no-selection" size="medium" />
+      <slot v-else />
+    </VtsPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsPanel from '@core/components/panel/VtsPanel.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { usePanelStore } from '@core/stores/panel.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { hasSelection } = defineProps<{
+  hasSelection?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  actions?(): any
+  'more-actions'?(): any
+  'corner-actions'?(): any
+}>()
+
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const { t } = useI18n()
+
+watch(
+  [() => hasSelection, () => panelStore.isLocked, () => uiStore.isSmall],
+  ([hasSelection]) => {
+    if (hasSelection === undefined) {
+      return
+    }
+
+    panelStore.syncWithSelection(hasSelection)
+  },
+  { immediate: true }
+)
+
+function handleClose() {
+  if (panelStore.syncsOpenStateWithSelection) {
+    panelStore.collapse()
+  }
+
+  emit('close')
+}
+</script>
+
+<style scoped lang="postcss">
+.vts-side-panel-sticky:not(.mobile) {
+  position: sticky;
+  top: 0;
+  align-self: start;
+}
+
+.vts-side-panel {
+  width: var(--side-panel-width, 40rem);
+  transition: transform 0.25s;
+
+  &:not(.mobile) {
+    --panel-viewport-height: calc(100dvh - 5.6rem);
+    --panel-min-height: calc(100dvh - 16.6rem);
+
+    min-height: var(--panel-min-height);
+    max-height: var(--panel-viewport-height);
+    overflow: hidden;
+    transform: translateX(v-bind('panelStore.cssHorizontalOffset'));
+
+    :deep(> .content) {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+    }
+  }
+
+  &.mobile {
+    z-index: 1010;
+    position: fixed;
+    width: 100dvw;
+    height: 100dvh;
+    inset: 0;
+    transform: translateX(v-bind('panelStore.cssHorizontalOffset'));
+
+    :deep(.corner-actions) {
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+      order: -1;
+    }
+
+    :deep(> .content) {
+      overflow: auto;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
index 253aa87125..9ab590cce0 100644
--- a/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
@@ -9,32 +9,24 @@
       <div v-if="success">{{ t('all-good!') }}</div>
       <slot />
     </div>
+    <div v-else-if="type === 'no-selection'" :class="typoClass" class="content">
+      <I18nT keypath="select-to-see-details" scope="global" tag="p">
+        <template #icon>
+          <VtsIcon name="fa:eye" size="current" />
+        </template>
+      </I18nT>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { useUiStore } from '@core/stores/ui.store'
+import type { StateHeroFormat, StateHeroSize, StateHeroType } from '@core/types/state-hero.type.ts'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-
-export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
-
-export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'
-
-export type StateHeroType =
-  | 'busy'
-  | 'no-result'
-  | 'under-construction'
-  | 'no-data'
-  | 'no-selection'
-  | 'error'
-  | 'not-found'
-  | 'offline'
-  | 'all-good'
-  | 'all-done'
-  | 'creating'
+import VtsIcon from '../icon/VtsIcon.vue'
 
 const { format, type, size, horizontal } = defineProps<{
   format: StateHeroFormat
diff --git a/@xen-orchestra/web-core/lib/components/table/VtsTable.vue b/@xen-orchestra/web-core/lib/components/table/VtsTable.vue
index 65b1d5c853..f8d96e54f6 100644
--- a/@xen-orchestra/web-core/lib/components/table/VtsTable.vue
+++ b/@xen-orchestra/web-core/lib/components/table/VtsTable.vue
@@ -16,9 +16,10 @@
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero, { type StateHeroSize, type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiTablePagination from '@core/components/ui/table-pagination/UiTablePagination.vue'
 import type { PaginationBindings } from '@core/composables/pagination.composable'
+import type { StateHeroType, StateHeroSize } from '@core/types/state-hero.type.ts'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useResizeObserver, useScroll } from '@vueuse/core'
diff --git a/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue b/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
index 12d3a6ceba..5d620254e5 100644
--- a/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/head-bar/UiHeadBar.vue
@@ -37,7 +37,7 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .ui-head-bar {
-  min-height: 5.6rem;
+  min-height: 6rem;
   padding: 0.8rem 1.6rem;
   display: flex;
   gap: 1.6rem;
diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
index 6d3180ac0a..b17d3687db 100644
--- a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -1,6 +1,6 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
-  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isSmall }">
+  <div class="ui-panel" :class="{ error }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
@@ -11,8 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUiStore } from '@core/stores/ui.store'
-
 defineProps<{
   error?: boolean
 }>()
@@ -21,31 +19,25 @@ const slots = defineSlots<{
   default(): any
   header?(): any
 }>()
-
-const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
 .ui-panel {
-  position: sticky;
-  top: 0;
   display: flex;
   flex-direction: column;
   border-inline-start: 0.1rem solid var(--color-neutral-border);
+  border-block-end: 0.1rem solid var(--color-neutral-border);
+  border-end-start-radius: 0.8rem;
   background-color: var(--color-neutral-background-secondary);
 
-  &:not(.mobile-drawer) {
-    min-height: calc(100dvh - 16rem);
-  }
-
   .header {
+    flex-shrink: 0;
+    padding: 0.4rem 1.6rem;
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
     display: flex;
-    justify-content: flex-end;
     align-items: center;
     gap: 1.6rem;
-    padding: 0.4rem 1.6rem;
   }
 
   .content {
@@ -53,20 +45,11 @@ const uiStore = useUiStore()
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
-  }
-
-  &.mobile-drawer {
-    .content {
-      overflow: auto;
-    }
+    scrollbar-width: thin;
   }
 
   &.error {
     background-color: var(--color-danger-background-selected);
-
-    .content {
-      padding-top: 15rem;
-    }
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/composables/table-state.composable.ts b/@xen-orchestra/web-core/lib/composables/table-state.composable.ts
index c591645a2d..89eebe129e 100644
--- a/@xen-orchestra/web-core/lib/composables/table-state.composable.ts
+++ b/@xen-orchestra/web-core/lib/composables/table-state.composable.ts
@@ -1,5 +1,5 @@
-import type { StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 import type { TableState } from '@core/components/table/VtsTable.vue'
+import type { StateHeroType } from '@core/types/state-hero.type.ts'
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index bf5d61969e..0d0d2403b0 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -886,7 +886,7 @@
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "select-host": "Select host",
-  "select-to-see-details": "Select an element to see details",
+  "select-to-see-details": "Click on {icon} to see details",
   "selected-vms-in-execution": "Some selected VMs are running",
   "self-signed-certificates": "Self-signed certificates",
   "send-us-feedback": "Send us feedback",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index e5015d9bf1..1c000216f8 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -886,7 +886,7 @@
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "select-host": "Sélectionnez un hôte",
-  "select-to-see-details": "Sélectionnez un élément pour voir les détails",
+  "select-to-see-details": "Cliquez sur {icon} pour voir les détails",
   "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
   "self-signed-certificates": "Certificats auto-signés",
   "send-us-feedback": "Envoyez-nous vos commentaires",
diff --git a/@xen-orchestra/web-core/lib/stores/panel.store.ts b/@xen-orchestra/web-core/lib/stores/panel.store.ts
index 4f6e7eaa2d..6f7a48baa0 100644
--- a/@xen-orchestra/web-core/lib/stores/panel.store.ts
+++ b/@xen-orchestra/web-core/lib/stores/panel.store.ts
@@ -1,12 +1,63 @@
 import { useUiStore } from '@core/stores/ui.store'
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, watch } from 'vue'
 
 export const usePanelStore = defineStore('panel', () => {
   const uiStore = useUiStore()
-  const isExpanded = ref(false)
-  const open = () => (isExpanded.value = true)
-  const close = () => (isExpanded.value = false)
+  const isExpanded = useLocalStorage('panel.expanded', true)
+  const isLocked = useLocalStorage('panel.locked', true)
 
-  return { open, close, isExpanded: computed(() => !uiStore.isSmall || isExpanded.value) }
+  const cssHorizontalOffset = computed(() => (isExpanded.value ? 0 : '100%'))
+  /* Panel closes automatically when it has no content (true on small UI or when not locked) */
+  const syncsOpenStateWithSelection = computed(() => uiStore.isSmall || !isLocked.value)
+
+  function expand() {
+    isExpanded.value = true
+  }
+
+  function collapse() {
+    isExpanded.value = false
+  }
+
+  function syncWithSelection(hasSelection: boolean) {
+    if (!syncsOpenStateWithSelection.value) {
+      return
+    }
+    if (!hasSelection && isExpanded.value) {
+      collapse()
+    } else if (hasSelection && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  function toggleLock() {
+    const next = !isLocked.value
+    isLocked.value = next
+    if (next && !uiStore.isSmall && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  watch(
+    () => uiStore.isSmall,
+    isSmall => {
+      /* Expand when coming back from small to large UI, if locked and not expanded */
+      if (!isSmall && isLocked.value && !isExpanded.value) {
+        expand()
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    isExpanded,
+    isLocked,
+    syncsOpenStateWithSelection,
+    expand,
+    collapse,
+    toggleLock,
+    syncWithSelection,
+    cssHorizontalOffset,
+  }
 })
diff --git a/@xen-orchestra/web-core/lib/types/state-hero.type.ts b/@xen-orchestra/web-core/lib/types/state-hero.type.ts
new file mode 100644
index 0000000000..3bd0550507
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/types/state-hero.type.ts
@@ -0,0 +1,19 @@
+export const STATE_HERO_TYPES = [
+  'busy',
+  'no-result',
+  'under-construction',
+  'no-data',
+  'no-selection',
+  'error',
+  'not-found',
+  'offline',
+  'all-good',
+  'all-done',
+  'creating',
+] as const
+
+export type StateHeroType = (typeof STATE_HERO_TYPES)[number]
+
+export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
+
+export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'
diff --git a/@xen-orchestra/web/src/modules/backup/components/jobs/panel/BackupJobSidePanel.vue b/@xen-orchestra/web/src/modules/backup/components/jobs/panel/BackupJobSidePanel.vue
index 010227b0ca..05d6b6b68c 100644
--- a/@xen-orchestra/web/src/modules/backup/components/jobs/panel/BackupJobSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/backup/components/jobs/panel/BackupJobSidePanel.vue
@@ -1,18 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!backupJob" @close="emit('close')">
+    <template v-if="backupJob">
       <BackupJobInfosCard :backup-job />
       <BackupJobSchedulesCard :backup-job-schedules />
       <BackupJobLogsCard v-if="lastThreeLogs.length > 0" :backup-logs="lastThreeLogs" />
@@ -22,7 +10,7 @@
       <BackupJobTargetsCard :storage-repository-targets :backup-repository-targets />
       <BackupJobSettingsCard v-if="hasSettings" :backup-job />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -34,7 +22,9 @@ import BackupJobLogsCard from '@/modules/backup/components/panel/cards/BackupJob
 import BackupJobSchedulesCard from '@/modules/backup/components/panel/cards/BackupJobSchedulesCard.vue'
 import BackupJobSourceRepositoryCard from '@/modules/backup/components/panel/cards/BackupJobSourceRepositoryCard.vue'
 import BackupJobTargetsCard from '@/modules/backup/components/panel/cards/BackupJobTargetsCard.vue'
-import { useXoBackupJobSettingsUtils } from '@/modules/backup/composables/backup-job-settings/xo-backup-job-settings.composable.ts'
+import { getMetadataBackupJobSettings } from '@/modules/backup/composables/backup-job-settings/get-metadata-backup-job-settings'
+import { getMirrorBackupJobSettings } from '@/modules/backup/composables/backup-job-settings/get-mirror-backup-job-settings'
+import { getVmBackupJobSettings } from '@/modules/backup/composables/backup-job-settings/get-vm-backup-job-settings'
 import type { FrontAnyXoBackupJob } from '@/modules/backup/remote-resources/use-xo-backup-job-collection.ts'
 import { useXoBackupLogCollection } from '@/modules/backup/remote-resources/use-xo-backup-log-collection.ts'
 import { useXoBackupRepositoryCollection } from '@/modules/backup/remote-resources/use-xo-br-collection.ts'
@@ -42,37 +32,32 @@ import { useXoPoolCollection } from '@/modules/pool/remote-resources/use-xo-pool
 import { useXoScheduleCollection } from '@/modules/schedule/remote-resources/use-xo-schedule-collection.ts'
 import { useXoSrCollection } from '@/modules/storage-repository/remote-resources/use-xo-sr-collection.ts'
 import { extractIdsFromSimplePattern } from '@/shared/utils/pattern.util.ts'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import type { XoSr, XoPool, XoBackupRepository } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { backupJob } = defineProps<{
-  backupJob: FrontAnyXoBackupJob
+  backupJob?: FrontAnyXoBackupJob
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const { t } = useI18n()
-const uiStore = useUiStore()
-
 const { getSrsByIds } = useXoSrCollection()
 const { getBackupRepositoriesByIds } = useXoBackupRepositoryCollection()
 const { getLastNBackupLogsByJobId } = useXoBackupLogCollection()
 const { schedulesByJobId } = useXoScheduleCollection()
 const { getPoolsByIds } = useXoPoolCollection()
 
-const backupJobSchedules = computed(() => schedulesByJobId.value.get(backupJob.id) ?? [])
+const backupJobSchedules = computed(() =>
+  backupJob !== undefined ? (schedulesByJobId.value.get(backupJob.id) ?? []) : []
+)
 
-const lastThreeLogs = computed(() => getLastNBackupLogsByJobId(backupJob.id))
+const lastThreeLogs = computed(() => (backupJob !== undefined ? getLastNBackupLogsByJobId(backupJob.id) : []))
 
 const backedUpPools = computed(() => {
-  if (backupJob.type !== 'metadataBackup' || backupJob.pools === undefined) {
+  if (backupJob?.type !== 'metadataBackup' || backupJob.pools === undefined) {
     return []
   }
 
@@ -80,32 +65,31 @@ const backedUpPools = computed(() => {
 })
 
 const backupRepositoryTargets = computed(() =>
-  getBackupRepositoriesByIds(extractIdsFromSimplePattern(backupJob.remotes) as XoBackupRepository['id'][])
+  backupJob !== undefined
+    ? getBackupRepositoriesByIds(extractIdsFromSimplePattern(backupJob.remotes) as XoBackupRepository['id'][])
+    : []
 )
 
 const storageRepositoryTargets = computed(() => {
-  if (!(backupJob.type === 'backup' && backupJob.srs)) {
+  if (!(backupJob?.type === 'backup' && backupJob.srs)) {
     return []
   }
 
   return getSrsByIds(extractIdsFromSimplePattern(backupJob.srs) as XoSr['id'][])
 })
 
-const { settings: backupJobSettings } = useXoBackupJobSettingsUtils(() => backupJob)
-
-const hasSettings = computed(() => Object.values(backupJobSettings).some(value => value !== undefined))
-</script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+const hasSettings = computed(() => {
+  if (backupJob === undefined) {
+    return false
   }
-}
-</style>
+
+  const settings =
+    backupJob.type === 'backup'
+      ? getVmBackupJobSettings(backupJob)
+      : backupJob.type === 'metadataBackup'
+        ? getMetadataBackupJobSettings(backupJob)
+        : getMirrorBackupJobSettings(backupJob)
+
+  return Object.values(settings).some(value => value !== undefined)
+})
+</script>
diff --git a/@xen-orchestra/web/src/modules/backup/components/logs/panel/BackupLogSidePanel.vue b/@xen-orchestra/web/src/modules/backup/components/logs/panel/BackupLogSidePanel.vue
index f0c79b7ea6..31a1a2be77 100644
--- a/@xen-orchestra/web/src/modules/backup/components/logs/panel/BackupLogSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/backup/components/logs/panel/BackupLogSidePanel.vue
@@ -1,18 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!backupLog" @close="emit('close')">
+    <template v-if="backupLog">
       <BackupLogInfosCard :backup-log />
       <BackupJobSchedulesCard :backup-job-schedules />
       <template v-if="backupLogResults !== undefined">
@@ -23,7 +11,7 @@
       <BackupJobBackedUpVmsCard v-if="backupJob?.type === 'backup' && backupJob.vms" :backed-up-vms="backupJob.vms" />
       <BackupJobBackedUpPoolsCard v-if="backedUpPools.length > 0" :backed-up-pools />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -40,37 +28,30 @@ import { useXoPoolCollection } from '@/modules/pool/remote-resources/use-xo-pool
 import { useXoScheduleCollection } from '@/modules/schedule/remote-resources/use-xo-schedule-collection.ts'
 import { getTasksResultsRecursively } from '@/modules/task/utils/xo-task.util.ts'
 import { extractIdsFromSimplePattern } from '@/shared/utils/pattern.util.ts'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import type { XoPool } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { backupLog } = defineProps<{
-  backupLog: FrontXoBackupLog
+  backupLog?: FrontXoBackupLog
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const { t } = useI18n()
-const uiStore = useUiStore()
-
 const { useGetBackupJobById } = useXoBackupJobCollection()
 const { schedulesByJobId } = useXoScheduleCollection()
 const { getPoolsByIds } = useXoPoolCollection()
 
-const backupJob = useGetBackupJobById(() => backupLog.jobId)
+const backupJob = useGetBackupJobById(() => backupLog?.jobId)
 
 const backupJobSchedules = computed(() =>
   backupJob.value ? (schedulesByJobId.value.get(backupJob.value.id) ?? []) : []
 )
 
 const backedUpPools = computed(() => {
-  if (backupJob.value?.type !== 'metadataBackup' || backupJob.value?.pools === undefined) {
+  if (backupJob.value?.type !== 'metadataBackup' || backupJob.value.pools === undefined) {
     return []
   }
 
@@ -78,7 +59,7 @@ const backedUpPools = computed(() => {
 })
 
 const backupLogResults = computed(() => {
-  if (backupLog.tasks === undefined) {
+  if (backupLog?.tasks === undefined) {
     return undefined
   }
 
@@ -89,17 +70,3 @@ const backupLogResults = computed(() => {
   }
 })
 </script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/host/components/list/panel/HostSidePanel.vue b/@xen-orchestra/web/src/modules/host/components/list/panel/HostSidePanel.vue
index a119b45392..c22f34eda3 100644
--- a/@xen-orchestra/web/src/modules/host/components/list/panel/HostSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/host/components/list/panel/HostSidePanel.vue
@@ -1,18 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!host" @close="emit('close')">
+    <template v-if="host">
       <HostInfoCard :host />
       <HostNetworkCard :host />
       <!-- host licensing -->
@@ -20,7 +8,7 @@
       <HostHardwareSpecificationsCard :host />
       <!-- host hardware health -->
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -29,35 +17,13 @@ import HostInfoCard from '@/modules/host/components/list/panel/card/HostInfoCard
 import HostNetworkCard from '@/modules/host/components/list/panel/card/HostNetworkCard.vue'
 import HostSoftwareCard from '@/modules/host/components/list/panel/card/HostSoftwareCard.vue'
 import type { FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
-import { useI18n } from 'vue-i18n'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 
 defineProps<{
-  host: FrontXoHost
+  host?: FrontXoHost
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
-
-const { t } = useI18n()
-
-const uiStore = useUiStore()
 </script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/network/components/panel/NetworkSidePanel.vue b/@xen-orchestra/web/src/modules/network/components/panel/NetworkSidePanel.vue
index 04112a4fe8..993aa5d6ed 100644
--- a/@xen-orchestra/web/src/modules/network/components/panel/NetworkSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/network/components/panel/NetworkSidePanel.vue
@@ -1,19 +1,9 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <VtsDeleteButton :busy="isDeletingNetwork" class="delete-button" @click="openDeleteModal()" />
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
+  <VtsSidePanel :has-selection="!!network" @close="emit('close')">
+    <template v-if="network" #actions>
+      <VtsDeleteButton :busy="isDeletingNetwork" @click="openDeleteModal()" />
     </template>
-    <template #default>
+    <template v-if="network" #default>
       <UiCard class="card-container">
         <UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo-body-bold">
           {{ network.name_label }}
@@ -68,7 +58,7 @@
       </UiCard>
       <NetworkPifsInfoCard :network />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -80,31 +70,30 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsDeleteButton from '@core/components/delete-button/VtsDeleteButton.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { network } = defineProps<{
-  network: FrontXoNetwork
+  network?: FrontXoNetwork
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const { openModal: openDeleteModal, isRunning: isDeletingNetwork } = useNetworkDeleteModal(() => [network])
+const { openModal: openDeleteModal, isRunning: isDeletingNetwork } = useNetworkDeleteModal(() =>
+  network !== undefined ? [network] : []
+)
 
 const { getPifsByNetworkId } = useXoPifCollection()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
-const pifs = computed(() => getPifsByNetworkId(network.id))
+const pifs = computed(() => (network !== undefined ? getPifsByNetworkId(network.id) : []))
 
 const networkVlan = computed(() => {
   if (pifs.value.length === 0) {
@@ -114,16 +103,12 @@ const networkVlan = computed(() => {
   return pifs.value[0].vlan !== -1 ? pifs.value[0].vlan.toString() : t('none')
 })
 
-const networkNbd = computed(() => (network.nbd ? t('on') : t('off')))
+const networkNbd = computed(() => (network?.nbd ? t('on') : t('off')))
 
-const networkDefaultLockingMode = computed(() => (network.defaultIsLocked ? t('disabled') : t('unlocked')))
+const networkDefaultLockingMode = computed(() => (network?.defaultIsLocked ? t('disabled') : t('unlocked')))
 </script>
 
 <style scoped lang="postcss">
-.delete-button {
-  margin-inline-end: auto;
-}
-
 .card-container {
   display: flex;
   flex-direction: column;
@@ -139,16 +124,4 @@ const networkDefaultLockingMode = computed(() => (network.defaultIsLocked ? t('d
     }
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
 </style>
diff --git a/@xen-orchestra/web/src/modules/pif/components/list/panel/PifSidePanel.vue b/@xen-orchestra/web/src/modules/pif/components/list/panel/PifSidePanel.vue
index 417e434a0b..a1204b6aaf 100644
--- a/@xen-orchestra/web/src/modules/pif/components/list/panel/PifSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/pif/components/list/panel/PifSidePanel.vue
@@ -1,18 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!pif" @close="emit('close')">
+    <template v-if="pif">
       <!-- PIF -->
       <UiCard class="card">
         <UiCardTitle>{{ pif.isBondMaster ? t('bond') : t('pif') }}</UiCardTitle>
@@ -247,7 +235,7 @@
         </div>
       </UiCard>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -258,23 +246,22 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
 import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { CONNECTION_STATUS } from '@core/types/connection.ts'
 import humanFormat from 'human-format'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { pif } = defineProps<{
-  pif: FrontXoPif
+  pif?: FrontXoPif
 }>()
 
 const emit = defineEmits<{
@@ -283,13 +270,18 @@ const emit = defineEmits<{
 
 const { useGetNetworkById } = useXoNetworkCollection()
 const { getBondsDevices } = useXoPifCollection()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
-const ipAddresses = computed(() => [pif.ip, ...pif.ipv6].filter(ip => ip))
+const ipAddresses = computed(() => {
+  if (pif === undefined) {
+    return []
+  }
 
-const network = useGetNetworkById(() => pif.$network)
+  return [pif.ip, ...pif.ipv6].filter(ip => ip)
+})
+
+const network = useGetNetworkById(() => pif?.$network)
 
 const networkTo = computed(() =>
   network.value ? getPoolNetworkRoute(network.value.$pool, network.value.id) : undefined
@@ -297,13 +289,17 @@ const networkTo = computed(() =>
 
 const networkNbd = computed(() => (network.value?.nbd ? t('on') : t('off')))
 
-const status = computed(() => (pif.attached ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.DISCONNECTED))
+const status = computed(() => (pif?.attached ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.DISCONNECTED))
 
 const physicalInterfaceStatus = computed(() =>
-  pif.carrier ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.PHYSICALLY_DISCONNECTED
+  pif?.carrier ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.PHYSICALLY_DISCONNECTED
 )
 
 const ipConfigurationMode = computed(() => {
+  if (pif === undefined) {
+    return t('none')
+  }
+
   switch (pif.mode) {
     case 'Static':
       return t('static')
@@ -314,9 +310,13 @@ const ipConfigurationMode = computed(() => {
   }
 })
 
-const bondDevices = computed(() => getBondsDevices(pif))
+const bondDevices = computed(() => (pif !== undefined ? getBondsDevices(pif) : []))
 
 const speed = computed(() => {
+  if (pif === undefined) {
+    return ''
+  }
+
   const speed = pif.speed || 0
   const speedInBytes = speed * 1000000
 
@@ -342,16 +342,4 @@ const speed = computed(() => {
     content: '-';
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
 </style>
diff --git a/@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue b/@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue
index 92b225536a..6a1eb6d76e 100644
--- a/@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue
@@ -1,175 +1,165 @@
 <template>
-  <VtsStateHero v-if="!arePoolsReady" format="panel" type="busy" size="medium" />
-  <UiPanel v-else :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
-      <UiCard v-if="server.error === undefined" class="card-container">
-        <UiCardTitle>
-          {{ t('general-information') }}
-        </UiCardTitle>
-        <div class="content">
-          <!-- ID -->
-          <VtsCodeSnippet :content="server.id" copy />
-          <!-- Pool -->
+  <VtsSidePanel :has-selection="!!server" @close="emit('close')">
+    <template v-if="server">
+      <VtsStateHero v-if="!arePoolsReady" format="panel" type="busy" size="medium" />
+      <template v-else>
+        <UiCard v-if="server.error === undefined" class="card-container">
+          <UiCardTitle>
+            {{ t('general-information') }}
+          </UiCardTitle>
+          <div class="content">
+            <!-- ID -->
+            <VtsCodeSnippet :content="server.id" copy />
+            <!-- Pool -->
+            <VtsCardRowKeyValue>
+              <template #key>{{ t('pool') }}</template>
+              <template #value>
+                <UiLink
+                  v-if="server.poolId !== undefined && server.poolNameLabel !== undefined"
+                  icon="object:pool"
+                  size="small"
+                  :to="{ name: '/pool/[id]/dashboard', params: { id: server.poolId } }"
+                >
+                  {{ server.poolNameLabel }}
+                </UiLink>
+              </template>
+              <template v-if="server.poolId !== undefined" #addons>
+                <VtsCopyButton :value="server.poolId" />
+              </template>
+            </VtsCardRowKeyValue>
+            <!-- Description -->
+            <VtsCardRowKeyValue truncate align-top>
+              <template #key>{{ t('description') }}</template>
+              <template #value>{{ server.poolNameDescription }}</template>
+              <template v-if="server.poolNameDescription !== undefined" #addons>
+                <VtsCopyButton :value="server.poolNameDescription" />
+              </template>
+            </VtsCardRowKeyValue>
+            <!-- tag -->
+            <VtsCardRowKeyValue>
+              <template #key>{{ t('tags') }}</template>
+              <template #value>
+                <UiTagsList v-if="pool !== undefined && pool.tags.length > 0">
+                  <VtsTag v-for="tag in pool.tags" :key="tag" :value="tag" />
+                </UiTagsList>
+              </template>
+              <template v-if="pool !== undefined && pool.tags.length > 0" #addons>
+                <VtsCopyButton :value="pool.tags.join(', ')" />
+              </template>
+            </VtsCardRowKeyValue>
+          </div>
+        </UiCard>
+        <UiAlert v-else accent="danger">
+          {{ t('connection-failed') }}
+          <template #description>
+            {{ t('unable-to-connect-to-the-pool') }}
+          </template>
+        </UiAlert>
+        <UiCard class="card-container">
+          <UiCardTitle>
+            {{ t('connection') }}
+          </UiCardTitle>
+          <!-- status -->
           <VtsCardRowKeyValue>
-            <template #key>{{ t('pool') }}</template>
+            <template #key>{{ t('status') }}</template>
+            <template #value>
+              <UiInfo :accent="connectionStatus.accent">
+                {{ connectionStatus.text }}
+              </UiInfo>
+            </template>
+          </VtsCardRowKeyValue>
+          <!-- primary-host -->
+          <VtsCardRowKeyValue>
+            <template #key>{{ t('master') }}</template>
             <template #value>
               <UiLink
-                v-if="server.poolId !== undefined && server.poolNameLabel !== undefined"
-                icon="object:pool"
+                v-if="primaryHost !== undefined"
+                :icon="`object:host:${toLower(primaryHost.power_state)}`"
                 size="small"
-                :to="{ name: '/pool/[id]/dashboard', params: { id: server.poolId } }"
+                :to="{ name: '/host/[id]/dashboard', params: { id: primaryHost.id } }"
+                is-primary
+                :primary-tooltip="t('master')"
               >
-                {{ server.poolNameLabel }}
+                {{ primaryHost.name_label }}
               </UiLink>
             </template>
-            <template v-if="server.poolId !== undefined" #addons>
-              <VtsCopyButton :value="server.poolId" />
+            <template v-if="primaryHost !== undefined" #addons>
+              <VtsCopyButton :value="primaryHost.id" />
             </template>
           </VtsCardRowKeyValue>
-          <!-- Description -->
-          <VtsCardRowKeyValue truncate align-top>
-            <template #key>{{ t('description') }}</template>
-            <template #value>{{ server.poolNameDescription }}</template>
-            <template v-if="server.poolNameDescription !== undefined" #addons>
-              <VtsCopyButton :value="server.poolNameDescription" />
-            </template>
-          </VtsCardRowKeyValue>
-          <!-- tag -->
+          <!-- ip-address -->
           <VtsCardRowKeyValue>
-            <template #key>{{ t('tags') }}</template>
-            <template #value>
-              <UiTagsList v-if="pool !== undefined && pool.tags.length > 0">
-                <VtsTag v-for="tag in pool.tags" :key="tag" :value="tag" />
-              </UiTagsList>
-            </template>
-            <template v-if="pool !== undefined && pool.tags.length > 0" #addons>
-              <VtsCopyButton :value="pool.tags.join(', ')" />
+            <template #key>{{ t('ip-address') }}</template>
+            <template #value>{{ server.host }}</template>
+            <template #addons>
+              <VtsCopyButton :value="server.host" />
             </template>
           </VtsCardRowKeyValue>
-        </div>
-      </UiCard>
-      <UiAlert v-else accent="danger">
-        {{ t('connection-failed') }}
-        <template #description>
-          {{ t('unable-to-connect-to-the-pool') }}
-        </template>
-      </UiAlert>
-      <UiCard class="card-container">
-        <UiCardTitle>
-          {{ t('connection') }}
-        </UiCardTitle>
-        <!-- status -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('status') }}</template>
-          <template #value>
-            <UiInfo :accent="connectionStatus.accent">
-              {{ connectionStatus.text }}
-            </UiInfo>
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- primary-host -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('master') }}</template>
-          <template #value>
+          <!-- proxy-url -->
+          <VtsCardRowKeyValue>
+            <template #key>{{ t('proxy-url') }}</template>
+            <template #value>{{ server.httpProxy }}</template>
+            <template v-if="server.httpProxy !== undefined" #addons>
+              <VtsCopyButton :value="server.httpProxy" />
+            </template>
+          </VtsCardRowKeyValue>
+          <!-- username -->
+          <VtsCardRowKeyValue>
+            <template #key>{{ t('username') }}</template>
+            <template #value>{{ server.username }}</template>
+            <template #addons>
+              <VtsCopyButton :value="server.username" />
+            </template>
+          </VtsCardRowKeyValue>
+          <!-- read-only -->
+          <VtsCardRowKeyValue>
+            <template #key>{{ t('read-only') }}</template>
+            <template #value>
+              <VtsStatus :status="server.readOnly" />
+            </template>
+          </VtsCardRowKeyValue>
+          <!-- self-signed-certificates -->
+          <VtsCardRowKeyValue>
+            <template #key>{{ t('self-signed-certificates') }}</template>
+            <template #value>
+              <!-- todo add information button. waiting modal -->
+              <VtsStatus :status="server.allowUnauthorized" />
+            </template>
+          </VtsCardRowKeyValue>
+        </UiCard>
+        <UiCard v-if="hosts !== undefined">
+          <UiCardTitle>
+            <span>
+              {{ t('hosts') }}
+              <UiCounter :value="hosts.length" accent="neutral" size="small" variant="primary" />
+            </span>
+          </UiCardTitle>
+          <VtsStateHero v-if="hosts.length === 0" format="card" type="no-data" size="small">
+            {{ t('no-data') }}
+          </VtsStateHero>
+          <template v-else>
             <UiLink
-              v-if="primaryHost !== undefined"
-              :icon="`object:host:${toLower(primaryHost.power_state)}`"
+              v-for="host in hosts"
+              :key="host.id"
+              :to="{ name: '/host/[id]/dashboard', params: { id: host.id } }"
+              :icon="`object:host:${toLower(host.power_state)}`"
               size="small"
-              :to="{ name: '/host/[id]/dashboard', params: { id: primaryHost.id } }"
-              is-primary
-              :primary-tooltip="t('master')"
             >
-              {{ primaryHost.name_label }}
+              {{ host.name_label }}
+              <VtsIcon v-if="primaryHost?.id === host.id" accent="info" name="status:primary-circle" size="medium" />
             </UiLink>
           </template>
-          <template v-if="primaryHost !== undefined" #addons>
-            <VtsCopyButton :value="primaryHost.id" />
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- ip-address -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('ip-address') }}</template>
-          <template #value>{{ server.host }}</template>
-          <template #addons>
-            <VtsCopyButton :value="server.host" />
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- proxy-url -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('proxy-url') }}</template>
-          <template #value>{{ server.httpProxy }}</template>
-          <template v-if="server.httpProxy !== undefined" #addons>
-            <VtsCopyButton :value="server.httpProxy" />
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- username -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('username') }}</template>
-          <template #value>{{ server.username }}</template>
-          <template #addons>
-            <VtsCopyButton :value="server.username" />
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- read-only -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('read-only') }}</template>
-          <template #value>
-            <VtsStatus :status="server.readOnly" />
-          </template>
-        </VtsCardRowKeyValue>
-        <!-- self-signed-certificates -->
-        <VtsCardRowKeyValue>
-          <template #key>{{ t('self-signed-certificates') }}</template>
-          <template #value>
-            <!-- todo add information button. waiting modal -->
-            <VtsStatus :status="server.allowUnauthorized" />
-          </template>
-        </VtsCardRowKeyValue>
-      </UiCard>
-      <UiCard v-if="hosts !== undefined">
-        <UiCardTitle>
-          <span>
-            {{ t('hosts') }}
-            <UiCounter :value="hosts.length" accent="neutral" size="small" variant="primary" />
-          </span>
-        </UiCardTitle>
-        <VtsStateHero v-if="hosts.length === 0" format="card" type="no-data" size="small">
-          {{ t('no-data') }}
-        </VtsStateHero>
-        <template v-else>
-          <UiLink
-            v-for="host in hosts"
-            :key="host.id"
-            :to="{ name: '/host/[id]/dashboard', params: { id: host.id } }"
-            :icon="`object:host:${toLower(host.power_state)}`"
-            size="small"
-          >
-            {{ host.name_label }}
-            <VtsIcon v-if="primaryHost?.id === host.id" accent="info" name="status:primary-circle" size="medium" />
-          </UiLink>
-        </template>
-      </UiCard>
-      <UiCard v-if="server.error">
-        <UiCardTitle>
-          {{ t('error') }}
-          <UiCounter :value="1" accent="danger" size="small" variant="primary" />
-        </UiCardTitle>
-        <UiLogEntryViewer accent="danger" :label="t('api-error-details')" size="small" :content="server.error" />
-      </UiCard>
+        </UiCard>
+        <UiCard v-if="server.error">
+          <UiCardTitle>
+            {{ t('error') }}
+            <UiCounter :value="1" accent="danger" size="small" variant="primary" />
+          </UiCardTitle>
+          <UiLogEntryViewer accent="danger" :label="t('api-error-details')" size="small" :content="server.error" />
+        </UiCard>
+      </template>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -180,28 +170,25 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiAlert from '@core/components/ui/alert/UiAlert.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.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 UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useMapper } from '@core/packages/mapper'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { toLower } from 'lodash-es'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { server } = defineProps<{
-  server: FrontXoServer
+  server?: FrontXoServer
 }>()
 
 const emit = defineEmits<{
@@ -209,16 +196,15 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const uiStore = useUiStore()
 const { arePoolsReady, useGetPoolById } = useXoPoolCollection()
 const { useGetHostById, hostsByPool } = useXoHostCollection()
 
-const pool = useGetPoolById(() => server.poolId)
-const primaryHost = useGetHostById(() => server.master)
-const hosts = computed(() => (server.poolId ? hostsByPool.value.get(server.poolId) : undefined))
+const pool = useGetPoolById(() => server?.poolId)
+const primaryHost = useGetHostById(() => server?.master)
+const hosts = computed(() => (server?.poolId ? hostsByPool.value.get(server.poolId) : undefined))
 
 const connectionStatus = useMapper(
-  () => (server.error ? 'error' : server.status),
+  () => (server ? (server.error ? 'error' : server.status) : 'error'),
   {
     error: { accent: 'danger', text: t('unable-to-connect-to-the-pool') },
     disconnected: { accent: 'muted', text: t('disconnected') },
@@ -241,16 +227,4 @@ const connectionStatus = useMapper(
     gap: 0.4rem;
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
 </style>
diff --git a/@xen-orchestra/web/src/modules/snapshot/components/list/panel/SnapshotSidePanel.vue b/@xen-orchestra/web/src/modules/snapshot/components/list/panel/SnapshotSidePanel.vue
index 0c712f6abc..d41f0ddc8a 100644
--- a/@xen-orchestra/web/src/modules/snapshot/components/list/panel/SnapshotSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/snapshot/components/list/panel/SnapshotSidePanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
+  <VtsSidePanel :has-selection="!!snapshot" @close="emit('close')">
+    <template v-if="snapshot" #actions>
       <UiButton
         :disabled="!canRevertSnapshot || isDeletingSnapshot"
         :busy="isRevertingSnapshot"
@@ -15,25 +15,14 @@
       <VtsDeleteButton
         :disabled="!canDeleteSnapshot || isRevertingSnapshot"
         :busy="isDeletingSnapshot"
-        class="delete-button"
         @click="openSnapshotDeleteModal()"
       />
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
     </template>
-    <template #default>
+    <template v-if="snapshot" #default>
       <SnapshotInfoCard :snapshot />
       <SnapshotVdiCard :snapshot />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -43,30 +32,23 @@ import type { FrontXoVmSnapshot } from '@/modules/snapshot/components/remote-res
 import { useVmSnapshotDeleteModal } from '@/modules/snapshot/composables/use-vm-snapshot-delete-modal.composable.ts'
 import { useVmSnapshotRevertModal } from '@/modules/snapshot/composables/use-vm-snapshot-revert-modal.composable.ts'
 import VtsDeleteButton from '@core/components/delete-button/VtsDeleteButton.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { useI18n } from 'vue-i18n'
 
-const { snapshot } = defineProps<{
-  snapshot: FrontXoVmSnapshot
-}>()
+const { snapshot } = defineProps<{ snapshot?: FrontXoVmSnapshot }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const uiStore = useUiStore()
-
 const { t } = useI18n()
 
 const {
   openModal: openSnapshotDeleteModal,
   canRun: canDeleteSnapshot,
   isRunning: isDeletingSnapshot,
-} = useVmSnapshotDeleteModal(() => [snapshot])
+} = useVmSnapshotDeleteModal(() => (snapshot !== undefined ? [snapshot] : []))
 
 const {
   openModal: openSnapshotRevertModal,
@@ -74,21 +56,3 @@ const {
   isRunning: isRevertingSnapshot,
 } = useVmSnapshotRevertModal(() => snapshot)
 </script>
-
-<style scoped lang="postcss">
-.delete-button {
-  margin-inline-end: auto;
-}
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/snapshot/composables/use-vm-snapshot-revert-modal.composable.ts b/@xen-orchestra/web/src/modules/snapshot/composables/use-vm-snapshot-revert-modal.composable.ts
index 549f5612f3..e22cc3e637 100644
--- a/@xen-orchestra/web/src/modules/snapshot/composables/use-vm-snapshot-revert-modal.composable.ts
+++ b/@xen-orchestra/web/src/modules/snapshot/composables/use-vm-snapshot-revert-modal.composable.ts
@@ -4,7 +4,7 @@ import { useModal } from '@core/packages/modal/use-modal.ts'
 import { toComputed } from '@core/utils/to-computed.util.ts'
 import { type MaybeRefOrGetter, ref } from 'vue'
 
-export function useVmSnapshotRevertModal(rawSnapshot: MaybeRefOrGetter<FrontXoVmSnapshot>) {
+export function useVmSnapshotRevertModal(rawSnapshot: MaybeRefOrGetter<FrontXoVmSnapshot | undefined>) {
   const snapshot = toComputed(rawSnapshot)
   const snapshotBefore = ref(true)
 
diff --git a/@xen-orchestra/web/src/modules/storage-repository/components/list/panel/StorageRepositorySidePanel.vue b/@xen-orchestra/web/src/modules/storage-repository/components/list/panel/StorageRepositorySidePanel.vue
index 3599c4e51b..e3d8f8f019 100644
--- a/@xen-orchestra/web/src/modules/storage-repository/components/list/panel/StorageRepositorySidePanel.vue
+++ b/@xen-orchestra/web/src/modules/storage-repository/components/list/panel/StorageRepositorySidePanel.vue
@@ -1,38 +1,27 @@
 <template>
-  <VtsStateHero v-if="!isReady" format="panel" size="medium" type="busy" />
-  <UiPanel v-else :key="panelSignature" :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div class="action-buttons">
-        <SrConnectButton :scope :sr />
-        <MenuList placement="bottom-end">
-          <template #trigger="{ open }">
-            <UiButtonIcon accent="brand" icon="action:more-actions" size="medium" @click="open($event)" />
-          </template>
-          <SrDisconnectButton :scope :sr />
-          <SrDeleteButton :sr />
-        </MenuList>
-      </div>
-
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          accent="brand"
-          size="small"
-          variant="tertiary"
-          @click="emit('close')"
-        />
-      </div>
+  <VtsSidePanel :key="panelSignature" :has-selection="!!sr" @close="emit('close')">
+    <template v-if="sr" #actions>
+      <SrConnectButton :scope :sr />
+      <MenuList placement="bottom-end">
+        <template #trigger="{ open }">
+          <UiButtonIcon accent="brand" icon="action:more-actions" size="medium" @click="open($event)" />
+        </template>
+        <SrDisconnectButton :scope :sr />
+        <SrDeleteButton :sr />
+      </MenuList>
     </template>
-    <template #default>
-      <StorageRepositoryInfosCard :scope :sr />
-      <StorageRepositorySpaceCard :sr />
-      <StorageRepositoryVdisCard :vdi-snapshots :vdis />
-      <StorageRepositoryHostsCard :hosts />
-      <StorageRepositoryPbdsCard :scope :sr />
-      <StorageRepositoryCustomFieldsCard :custom-fields />
+    <template v-if="sr" #default>
+      <VtsStateHero v-if="!isReady" format="panel" type="busy" size="medium" />
+      <template v-else>
+        <StorageRepositoryInfosCard :scope :sr />
+        <StorageRepositorySpaceCard :sr />
+        <StorageRepositoryVdisCard :vdi-snapshots :vdis />
+        <StorageRepositoryHostsCard :hosts />
+        <StorageRepositoryPbdsCard :scope :sr />
+        <StorageRepositoryCustomFieldsCard :custom-fields />
+      </template>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -56,18 +45,15 @@ import {
 } from '@/modules/vdi/remote-resources/use-xo-vdi-snapshot-collection.ts'
 import type { SrScope } from '@core/types/storage-repository.type.ts'
 import MenuList from '@core/components/menu/MenuList.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import type { XoVdi } from '@vates/types'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { sr, scope } = defineProps<{
-  sr: FrontXoSr
+  sr?: FrontXoSr
   scope: SrScope
 }>()
 
@@ -75,9 +61,6 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const { t } = useI18n()
-const uiStore = useUiStore()
-
 const { useGetVdisByIds, areVdisReady } = useXoVdiCollection()
 const { getHostById, areHostsReady } = useXoHostCollection()
 const { pbdsBySr, arePbdsReady } = useXoPbdCollection()
@@ -85,15 +68,15 @@ const { useGetVdiSnapshotsByIds, areVdiSnapshotsReady } = useXoVdiSnapshotCollec
 
 const isReady = logicAnd(areVdisReady, areHostsReady, arePbdsReady, areVdiSnapshotsReady)
 
-const vdis = useGetVdisByIds(() => sr.VDIs as XoVdi['id'][])
+const vdis = useGetVdisByIds(() => (sr?.VDIs ?? []) as XoVdi['id'][])
 
-const vdiSnapshots = useGetVdiSnapshotsByIds(() => sr.VDIs as FrontXoVdiSnapshot['id'][])
+const vdiSnapshots = useGetVdiSnapshotsByIds(() => (sr?.VDIs ?? []) as FrontXoVdiSnapshot['id'][])
 
 const { getSrPbdsSignature } = useGetPbdsInScope()
 
 const panelSignature = computed(() => getSrPbdsSignature(sr, scope))
 
-const pbds = computed(() => pbdsBySr.value.get(sr.id) ?? [])
+const pbds = computed(() => (sr !== undefined ? pbdsBySr.value.get(sr.id) : undefined) ?? [])
 
 const hosts = computed(() =>
   pbds.value.reduce<FrontXoHost[]>((acc, pbd) => {
@@ -108,6 +91,10 @@ const hosts = computed(() =>
 )
 
 const customFields = computed(() => {
+  if (sr === undefined) {
+    return {}
+  }
+
   const prefix = 'XenCenter.CustomFields.'
 
   return Object.entries(sr.other_config).reduce<Record<string, unknown>>((acc, [key, value]) => {
@@ -119,22 +106,3 @@ const customFields = computed(() => {
   }, {})
 })
 </script>
-
-<style lang="postcss" scoped>
-.action-buttons {
-  display: flex;
-  align-items: center;
-  margin-inline-end: auto;
-}
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/storage-repository/composables/xo-sr-utils.composable.ts b/@xen-orchestra/web/src/modules/storage-repository/composables/xo-sr-utils.composable.ts
index a718c69d5b..052d60580c 100644
--- a/@xen-orchestra/web/src/modules/storage-repository/composables/xo-sr-utils.composable.ts
+++ b/@xen-orchestra/web/src/modules/storage-repository/composables/xo-sr-utils.composable.ts
@@ -31,7 +31,11 @@ export function useGetPbdsInScope() {
     return getPbdsInScope(sr, scope).filter(pbd => !pbd.attached)
   }
 
-  function getSrPbdsSignature(sr: FrontXoSr, scope: SrScope) {
+  function getSrPbdsSignature(sr: FrontXoSr | undefined, scope: SrScope) {
+    if (sr === undefined) {
+      return scope.type === 'host' ? `host:${scope.hostId}` : 'pool'
+    }
+
     const scopedPbds = getPbdsInScope(sr, scope)
 
     return scopedPbds.map(pbd => `${pbd.id}:${pbd.attached}`).join('|') || sr.id
diff --git a/@xen-orchestra/web/src/modules/task/components/list/panel/TaskSidePanel.vue b/@xen-orchestra/web/src/modules/task/components/list/panel/TaskSidePanel.vue
index 4b3ac751bb..78f919b271 100644
--- a/@xen-orchestra/web/src/modules/task/components/list/panel/TaskSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/task/components/list/panel/TaskSidePanel.vue
@@ -1,18 +1,6 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="medium"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!task" @close="emit('close')">
+    <template v-if="task">
       <TaskQuickInfosCard :task />
       <TaskInfosCard v-if="task.infos" :task />
       <TaskWarningsCard v-if="task.warnings" :task />
@@ -20,7 +8,7 @@
       <TaskObjectsCard v-if="task.properties.objectId" :task />
       <TaskPropertiesCard v-if="properties.other && Object.keys(properties.other).length > 0" :task />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -32,39 +20,18 @@ import TaskQuickInfosCard from '@/modules/task/components/list/panel/cards/TaskQ
 import TaskWarningsCard from '@/modules/task/components/list/panel/cards/TaskWarningsCard.vue'
 import { useXoTaskPropertiesUtils } from '@/modules/task/composables/xo-task-properties-utils.composable.ts'
 import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { task } = defineProps<{
-  task: FrontXoTask
+  task?: FrontXoTask
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const { t } = useI18n()
-const uiStore = useUiStore()
-
 const { properties } = useXoTaskPropertiesUtils(() => task)
 
-const isError = computed(() => task.result && (task.status === 'failure' || task.status === 'interrupted'))
+const isError = computed(() => task && task.result && (task.status === 'failure' || task.status === 'interrupted'))
 </script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/task/composables/xo-task-properties-utils.composable.ts b/@xen-orchestra/web/src/modules/task/composables/xo-task-properties-utils.composable.ts
index 89c18738c9..2749786db1 100644
--- a/@xen-orchestra/web/src/modules/task/composables/xo-task-properties-utils.composable.ts
+++ b/@xen-orchestra/web/src/modules/task/composables/xo-task-properties-utils.composable.ts
@@ -2,15 +2,17 @@ import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-co
 import { toComputed } from '@core/utils/to-computed.util.ts'
 import { computed, type MaybeRefOrGetter } from 'vue'
 
-export function useXoTaskPropertiesUtils(rawTask: MaybeRefOrGetter<FrontXoTask>) {
+export function useXoTaskPropertiesUtils(rawTask: MaybeRefOrGetter<FrontXoTask | undefined>) {
   const task = toComputed(rawTask)
 
   const properties = computed(() => {
-    if (!task.value.properties) {
+    const taskProperties = task.value?.properties
+
+    if (!taskProperties) {
       return {}
     }
 
-    const { method, name, type, objectId, progress, userId, ...other } = task.value.properties
+    const { method, name, type, objectId, progress, userId, ...other } = taskProperties
 
     return {
       method,
diff --git a/@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/TrafficRulesSidePanel.vue b/@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/TrafficRulesSidePanel.vue
index d860476f72..a7dcf1f594 100644
--- a/@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/TrafficRulesSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/TrafficRulesSidePanel.vue
@@ -1,36 +1,26 @@
 <template>
-  <VtsStateHero v-if="!isReady" format="panel" type="busy" size="medium" />
-
-  <UiPanel v-else :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
+  <VtsSidePanel :has-selection="!!rule" @close="emit('close')">
+    <template v-if="rule" #actions>
       <TrafficRuleActions :rule class="delete-button" />
-
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
     </template>
 
-    <template #default>
-      <TrafficRuleSummaryCard :rule />
+    <template v-if="rule" #default>
+      <VtsStateHero v-if="!isReady" format="panel" type="busy" size="medium" />
+      <template v-else>
+        <TrafficRuleSummaryCard :rule />
 
-      <template v-if="vif">
-        <TrafficRuleVifInfosCard :rule :vif />
-        <TrafficRuleVifNetworkInfoCard :rule :vif />
-      </template>
+        <template v-if="vif">
+          <TrafficRuleVifInfosCard :rule :vif />
+          <TrafficRuleVifNetworkInfoCard :rule :vif />
+        </template>
 
-      <template v-else-if="network">
-        <TrafficRuleNetworkInfosCard :rule :network />
-        <TrafficRuleNetworkPifsCard :rule :network />
+        <template v-else-if="network">
+          <TrafficRuleNetworkInfosCard :rule :network />
+          <TrafficRuleNetworkPifsCard :rule :network />
+        </template>
       </template>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -42,50 +32,24 @@ import TrafficRuleSummaryCard from '@/modules/traffic-rules/components/list/pane
 import TrafficRuleVifInfosCard from '@/modules/traffic-rules/components/list/panel/cards/TrafficRuleVifInfosCard.vue'
 import TrafficRuleVifNetworkInfoCard from '@/modules/traffic-rules/components/list/panel/cards/TrafficRuleVifNetworkInfoCard.vue'
 import { useXoVifCollection } from '@/modules/vif/remote-resources/use-xo-vif-collection.ts'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import type { TrafficRule } from '@vates/types'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-const { rule } = defineProps<{
-  rule: TrafficRule
-}>()
+const { rule } = defineProps<{ rule?: TrafficRule }>()
 
 const emit = defineEmits<{
   close: []
 }>()
 
-const uiStore = useUiStore()
-const { t } = useI18n()
-
 const { getVifById, areVifsReady } = useXoVifCollection()
 const { getNetworkById, areNetworksReady } = useXoNetworkCollection()
 
-const vif = computed(() => (rule.type === 'VIF' ? getVifById(rule.sourceId) : undefined))
-const network = computed(() => getNetworkById(rule.networkId))
+const vif = computed(() => (rule?.type === 'VIF' ? getVifById(rule.sourceId) : undefined))
+
+const network = computed(() => (rule !== undefined ? getNetworkById(rule.networkId) : undefined))
 
 const isReady = logicAnd(areVifsReady, areNetworksReady)
 </script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.delete-button {
-  margin-inline-end: auto;
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/vdi/components/list/panel/VdiSidePanel.vue b/@xen-orchestra/web/src/modules/vdi/components/list/panel/VdiSidePanel.vue
index f86951ead6..a13e0a02b3 100644
--- a/@xen-orchestra/web/src/modules/vdi/components/list/panel/VdiSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/vdi/components/list/panel/VdiSidePanel.vue
@@ -1,35 +1,18 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div class="action-buttons">
-        <template v-if="vbd">
-          <VbdConnectButton v-if="!vbd.attached" :vbd :vm />
-          <VbdDisconnectButton v-else :vbd :vm />
-        </template>
-        <MenuList placement="bottom-end">
-          <template #trigger="{ open }">
-            <UiButtonIcon icon="action:more-actions" accent="brand" size="medium" @click="open($event)" />
-          </template>
-          <VdiActions :vdi :vbd :vm />
-        </MenuList>
-      </div>
-      <div :class="{ 'close-button': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
+  <VtsSidePanel :has-selection="!!vdi" @close="emit('close')">
+    <template v-if="vbd" #actions>
+      <VbdConnectButton v-if="!vbd.attached" :vbd :vm />
+      <VbdDisconnectButton v-else :vbd :vm />
     </template>
-    <template #default>
+    <template v-if="vdi" #more-actions>
+      <VdiActions :vdi :vbd :vm />
+    </template>
+    <template v-if="vdi" #default>
       <VdiInfosCard :vdi :vm />
       <VdiSpaceCard :vdi />
       <VdiConfigurationCard :vdi :vm />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -42,16 +25,11 @@ import VdiInfosCard from '@/modules/vdi/components/list/panel/cards/VdiInfosCard
 import VdiSpaceCard from '@/modules/vdi/components/list/panel/cards/VdiSpaceCard.vue'
 import type { FrontXoVdi } from '@/modules/vdi/remote-resources/use-xo-vdi-collection.ts'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import MenuList from '@core/components/menu/MenuList.vue'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { vdi, vm } = defineProps<{
-  vdi: FrontXoVdi
+  vdi?: FrontXoVdi
   vm: FrontXoVm
 }>()
 
@@ -59,32 +37,9 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const { t } = useI18n()
-
-const uiStore = useUiStore()
-
 const { useGetVbdsByIds } = useXoVbdCollection()
 
-const vbds = useGetVbdsByIds(vdi.$VBDs)
+const vbds = useGetVbdsByIds(() => vdi?.$VBDs ?? [])
 
 const vbd = computed(() => vbds.value.find(vbd => vbd.VM === vm.id))
 </script>
-
-<style scoped lang="postcss">
-.action-buttons {
-  display: flex;
-  align-items: center;
-  margin-inline-end: auto;
-}
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .close-button {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/modules/vif/components/panel/VifSidePanel.vue b/@xen-orchestra/web/src/modules/vif/components/panel/VifSidePanel.vue
index 56173244b9..ec4eaa1b05 100644
--- a/@xen-orchestra/web/src/modules/vif/components/panel/VifSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/vif/components/panel/VifSidePanel.vue
@@ -1,28 +1,13 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div class="action-buttons">
-        <VifConnectButton v-if="!vif.attached" :vif :vm />
-        <VifDisconnectButton v-else :vif :vm />
-        <MenuList placement="bottom-end">
-          <template #trigger="{ open }">
-            <UiButtonIcon icon="action:more-actions" accent="brand" size="medium" @click="open($event)" />
-          </template>
-          <VifActions :vif />
-        </MenuList>
-      </div>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
+  <VtsSidePanel :has-selection="!!vif" @close="emit('close')">
+    <template v-if="vif" #actions>
+      <VifConnectButton v-if="!vif.attached" :vif :vm />
+      <VifDisconnectButton v-else :vif :vm />
     </template>
-    <template #default>
+    <template v-if="vif" #more-actions>
+      <VifActions :vif />
+    </template>
+    <template v-if="vif" #default>
       <!-- VIF -->
       <UiCard class="card">
         <UiCardTitle>{{ t('vif') }}</UiCardTitle>
@@ -143,7 +128,7 @@
         </div>
       </UiCard>
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -157,22 +142,20 @@ import { type FrontXoVm, useXoVmCollection } from '@/modules/vm/remote-resources
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
-import MenuList from '@core/components/menu/MenuList.vue'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { CONNECTION_STATUS } from '@core/types/connection.ts'
 import { getUniqueIpAddressesForDevice } from '@core/utils/ip-address.utils.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { vif, vm } = defineProps<{
-  vif: FrontXoVif
+  vif?: FrontXoVif
   vm: FrontXoVm
 }>()
 
@@ -184,30 +167,27 @@ const { t } = useI18n()
 
 const { useGetNetworkById } = useXoNetworkCollection()
 const { getVmById } = useXoVmCollection()
-const uiStore = useUiStore()
 
 const ipAddresses = computed(() => {
+  if (vif === undefined) {
+    return []
+  }
+
   const addresses = getVmById(vif.$VM)?.addresses
 
   return getUniqueIpAddressesForDevice(addresses, vif.device)
 })
 
-const network = useGetNetworkById(() => vif.$network)
+const network = useGetNetworkById(() => vif?.$network)
 
 const networkTo = computed(() =>
   network.value ? getPoolNetworkRoute(network.value.$pool, network.value.id) : undefined
 )
 
-const status = computed(() => (vif.attached ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.DISCONNECTED))
+const status = computed(() => (vif?.attached ? CONNECTION_STATUS.CONNECTED : CONNECTION_STATUS.DISCONNECTED))
 </script>
 
 <style scoped lang="postcss">
-.action-buttons {
-  display: flex;
-  align-items: center;
-  margin-inline-end: auto;
-}
-
 .card {
   gap: 1.6rem;
 
@@ -221,16 +201,4 @@ const status = computed(() => (vif.attached ? CONNECTION_STATUS.CONNECTED : CONN
     content: '-';
   }
 }
-
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
 </style>
diff --git a/@xen-orchestra/web/src/modules/vm/components/list/panel/VmSidePanel.vue b/@xen-orchestra/web/src/modules/vm/components/list/panel/VmSidePanel.vue
index e6a71b8007..5403340709 100644
--- a/@xen-orchestra/web/src/modules/vm/components/list/panel/VmSidePanel.vue
+++ b/@xen-orchestra/web/src/modules/vm/components/list/panel/VmSidePanel.vue
@@ -1,23 +1,11 @@
 <template>
-  <UiPanel :class="{ 'mobile-drawer': uiStore.isSmall }">
-    <template #header>
-      <div :class="{ 'action-buttons-container': uiStore.isSmall }">
-        <UiButtonIcon
-          v-tooltip="t('action:close')"
-          size="small"
-          variant="tertiary"
-          accent="brand"
-          :icon="uiStore.isSmall ? 'fa:angle-left' : 'fa:close'"
-          @click="emit('close')"
-        />
-      </div>
-    </template>
-    <template #default>
+  <VtsSidePanel :has-selection="!!vm" @close="emit('close')">
+    <template v-if="vm">
       <VmInfoCard :vm />
       <VmNetworkCard :vm />
       <VmResourcesCard :vm />
     </template>
-  </UiPanel>
+  </VtsSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -25,35 +13,13 @@ import VmInfoCard from '@/modules/vm/components/list/panel/cards/VmInfoCard.vue'
 import VmNetworkCard from '@/modules/vm/components/list/panel/cards/VmNetworkCard.vue'
 import VmResourcesCard from '@/modules/vm/components/list/panel/cards/VmResourcesCard.vue'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
-import { useI18n } from 'vue-i18n'
+import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
 
 defineProps<{
-  vm: FrontXoVm
+  vm?: FrontXoVm
 }>()
 
 const emit = defineEmits<{
   close: []
 }>()
-
-const { t } = useI18n()
-
-const uiStore = useUiStore()
 </script>
-
-<style scoped lang="postcss">
-.mobile-drawer {
-  position: fixed;
-  inset: 0;
-
-  .action-buttons-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-}
-</style>
diff --git a/@xen-orchestra/web/src/pages/(site)/backups.vue b/@xen-orchestra/web/src/pages/(site)/backups.vue
index 8fa585daf2..2cfd4c125f 100644
--- a/@xen-orchestra/web/src/pages/(site)/backups.vue
+++ b/@xen-orchestra/web/src/pages/(site)/backups.vue
@@ -1,19 +1,10 @@
 <template>
-  <div class="backups" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="backups">
     <UiCard class="container">
       <BackupJobsTable :backup-jobs :busy="!areBackupJobsReady" :error="hasBackupJobFetchError" />
     </UiCard>
-    <BackupJobSidePanel
-      v-if="selectedBackupJob"
-      :backup-job="selectedBackupJob"
-      @close="selectedBackupJob = undefined"
-    />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <BackupJobSidePanel :backup-job="selectedBackupJob" @close="selectedBackupJob = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -23,19 +14,12 @@ import {
   useXoBackupJobCollection,
   type FrontAnyXoBackupJob,
 } from '@/modules/backup/remote-resources/use-xo-backup-job-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store'
-import { useI18n } from 'vue-i18n'
-
-const uiStore = useUiStore()
 
 const { backupJobs, getBackupJobById, areBackupJobsReady, hasBackupJobFetchError } = useXoBackupJobCollection()
 
-const { t } = useI18n()
-
 const selectedBackupJob = useRouteQuery<FrontAnyXoBackupJob | undefined>('id', {
   toData: id => getBackupJobById(id as FrontAnyXoBackupJob['id']),
   toQuery: backupJob => backupJob?.id ?? '',
@@ -44,11 +28,6 @@ const selectedBackupJob = useRouteQuery<FrontAnyXoBackupJob | undefined>('id', {
 
 <style scoped lang="postcss">
 .backups {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/(site)/hosts.vue b/@xen-orchestra/web/src/pages/(site)/hosts.vue
index d3f67e6b56..fdaa9e05d4 100644
--- a/@xen-orchestra/web/src/pages/(site)/hosts.vue
+++ b/@xen-orchestra/web/src/pages/(site)/hosts.vue
@@ -1,34 +1,22 @@
 <template>
-  <div class="hosts" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="hosts">
     <UiCard class="container">
       <HostsTable :hosts :busy="!areHostsReady" :error="hasHostFetchError" />
     </UiCard>
-    <HostSidePanel v-if="selectedHost" :host="selectedHost" @close="selectedHost = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <HostSidePanel :host="selectedHost" @close="selectedHost = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
 import HostsTable from '@/modules/host/components/list/HostsTable.vue'
 import HostSidePanel from '@/modules/host/components/list/panel/HostSidePanel.vue'
 import { useXoHostCollection, type FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
-import { useI18n } from 'vue-i18n'
-
-const uiStore = useUiStore()
 
 const { hosts, getHostById, hasHostFetchError, areHostsReady } = useXoHostCollection()
 
-const { t } = useI18n()
-
 const selectedHost = useRouteQuery<FrontXoHost | undefined>('id', {
   toData: id => getHostById(id as FrontXoHost['id']),
   toQuery: host => host?.id ?? '',
@@ -37,11 +25,6 @@ const selectedHost = useRouteQuery<FrontXoHost | undefined>('id', {
 
 <style scoped lang="postcss">
 .hosts {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/(site)/pools.vue b/@xen-orchestra/web/src/pages/(site)/pools.vue
index 4129746ce8..df125ab91a 100644
--- a/@xen-orchestra/web/src/pages/(site)/pools.vue
+++ b/@xen-orchestra/web/src/pages/(site)/pools.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="pools" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="pools">
     <UiCard class="container">
       <PoolsTable :servers />
     </UiCard>
-    <PoolSidePanel v-if="selectedServer" :server="selectedServer" @close="selectedServer = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <PoolSidePanel :server="selectedServer" @close="selectedServer = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -19,31 +14,20 @@ import {
   useXoServerCollection,
   type FrontXoServer,
 } from '@/modules/server/remote-resources/use-xo-server-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
-import { useI18n } from 'vue-i18n'
 
 const { servers, getServerById } = useXoServerCollection()
-const uiStore = useUiStore()
 
 const selectedServer = useRouteQuery<FrontXoServer | undefined>('id', {
   toData: id => getServerById(id as FrontXoServer['id']),
   toQuery: server => server?.id ?? '',
 })
-
-const { t } = useI18n()
 </script>
 
 <style scoped lang="postcss">
 .pools {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/(site)/tasks.vue b/@xen-orchestra/web/src/pages/(site)/tasks.vue
index be79361925..76eb095a77 100644
--- a/@xen-orchestra/web/src/pages/(site)/tasks.vue
+++ b/@xen-orchestra/web/src/pages/(site)/tasks.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="tasks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="tasks">
     <UiCard class="container">
       <TasksList :tasks="convertedTasks" :has-error="hasTaskFetchError" :busy="!areTasksReady" />
     </UiCard>
-    <TaskSidePanel v-if="selectedTask" :task="selectedTask" @close="selectedTask = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TaskSidePanel :task="selectedTask" @close="selectedTask = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -18,22 +13,15 @@ import TasksList from '@/modules/task/components/list/TasksList.vue'
 import { useXoTaskCollection, type FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
 import { convertXoTaskToCore } from '@/modules/task/utils/convert-xo-task-to-core.util.ts'
 import { useXoUserCollection } from '@/modules/user/remote-resources/use-xo-user-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store'
 import type { XoUser } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const uiStore = useUiStore()
 
 const { getTaskById, sortedTasks, hasTaskFetchError, areTasksReady } = useXoTaskCollection()
 const { getUserById } = useXoUserCollection()
 
-const { t } = useI18n()
-
 const selectedTask = useRouteQuery<FrontXoTask | undefined>('id', {
   toData: id => getTaskById(id as FrontXoTask['id']),
   toQuery: task => task?.id ?? '',
@@ -57,11 +45,6 @@ const convertedTasks = computed(() =>
 
 <style scoped lang="postcss">
 .tasks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/(site)/vms.vue b/@xen-orchestra/web/src/pages/(site)/vms.vue
index 75d4b3f729..a4db82901f 100644
--- a/@xen-orchestra/web/src/pages/(site)/vms.vue
+++ b/@xen-orchestra/web/src/pages/(site)/vms.vue
@@ -1,34 +1,22 @@
 <template>
-  <div class="vms" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="vms">
     <UiCard class="container">
       <VmsTable :vms :busy="!areVmsReady" :error="hasVmFetchError" />
     </UiCard>
-    <VmSidePanel v-if="selectedVm" :vm="selectedVm" @close="selectedVm = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VmSidePanel :vm="selectedVm" @close="selectedVm = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
 import VmSidePanel from '@/modules/vm/components/list/panel/VmSidePanel.vue'
 import VmsTable from '@/modules/vm/components/list/VmsTable.vue'
 import { useXoVmCollection, type FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
 
 const { vms, getVmById, areVmsReady, hasVmFetchError } = useXoVmCollection()
 
-const uiStore = useUiStore()
-
 const selectedVm = useRouteQuery<FrontXoVm | undefined>('id', {
   toData: id => getVmById(id as FrontXoVm['id']),
   toQuery: vm => vm?.id ?? '',
@@ -37,11 +25,6 @@ const selectedVm = useRouteQuery<FrontXoVm | undefined>('id', {
 
 <style scoped lang="postcss">
 .vms {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/backup/[id]/runs.vue b/@xen-orchestra/web/src/pages/backup/[id]/runs.vue
index 4e66833518..6f9dddcb77 100644
--- a/@xen-orchestra/web/src/pages/backup/[id]/runs.vue
+++ b/@xen-orchestra/web/src/pages/backup/[id]/runs.vue
@@ -1,19 +1,10 @@
 <template>
-  <div class="backups" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="backups">
     <UiCard class="container">
       <BackupLogsTable :backup-logs :busy="!areBackupLogsReady" :error="hasBackupLogFetchError" />
     </UiCard>
-    <BackupLogSidePanel
-      v-if="selectedBackupLog"
-      :backup-log="selectedBackupLog"
-      @close="selectedBackupLog = undefined"
-    />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <BackupLogSidePanel :backup-log="selectedBackupLog" @close="selectedBackupLog = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -24,21 +15,15 @@ import {
   useXoBackupLogCollection,
   type FrontXoBackupLog,
 } from '@/modules/backup/remote-resources/use-xo-backup-log-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { backupJob } = defineProps<{
   backupJob: FrontAnyXoBackupJob
 }>()
 
-const { t } = useI18n()
-const uiStore = useUiStore()
-
 const { backupLogsByJobId, hasBackupLogFetchError, areBackupLogsReady } = useXoBackupLogCollection()
 
 const backupLogs = computed(() => backupLogsByJobId.value.get(backupJob.id) ?? [])
@@ -51,11 +36,6 @@ const selectedBackupLog = useRouteQuery<FrontXoBackupLog | undefined>('id', {
 
 <style scoped lang="postcss">
 .backups {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/host/[id]/networks.vue b/@xen-orchestra/web/src/pages/host/[id]/networks.vue
index ce983f15fc..3124afd55d 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/networks.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/networks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="networks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="networks">
     <UiCard class="container">
       <PifsTable :pifs>
         <template #title-actions>
@@ -9,13 +9,8 @@
         </template>
       </PifsTable>
     </UiCard>
-    <PifSidePanel v-if="selectedPif" :pif="selectedPif" @close="selectedPif = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="small">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <PifSidePanel :pif="selectedPif" @close="selectedPif = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -24,12 +19,10 @@ import PifSidePanel from '@/modules/pif/components/list/panel/PifSidePanel.vue'
 import PifsTable from '@/modules/pif/components/list/PifsTable.vue'
 import { useXoPifCollection, type FrontXoPif } from '@/modules/pif/remote-resources/use-xo-pif-collection.ts'
 import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -41,7 +34,6 @@ const { buildXo5Route } = useXoRoutes()
 const xo5ScanPifsHref = computed(() => buildXo5Route(`/hosts/${host.id}/network`))
 
 const { pifsByHost } = useXoPifCollection()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
@@ -55,11 +47,6 @@ const selectedPif = useRouteQuery<FrontXoPif | undefined>('id', {
 
 <style scoped lang="postcss">
 .networks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/host/[id]/storage.vue b/@xen-orchestra/web/src/pages/host/[id]/storage.vue
index f7286ae8b5..92349c352e 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/storage.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/storage.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="storage" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="storage">
     <UiCard class="container">
       <StorageRepositoriesTable :srs :busy="!isReady" :error="hasSrFetchError" :scope />
     </UiCard>
-    <StorageRepositorySidePanel v-if="selectedSr" :sr="selectedSr" :scope @close="selectedSr = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <StorageRepositorySidePanel :sr="selectedSr" :scope @close="selectedSr = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -21,30 +16,23 @@ import {
   useXoSrCollection,
   type FrontXoSr,
 } from '@/modules/storage-repository/remote-resources/use-xo-sr-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import { useRouteQuery } from '@core/composables/route-query.composable'
 import { SR_SCOPE_TYPE, type SrScope } from '@core/types/storage-repository.type.ts'
 import { sortByNameLabel } from '@core/utils/sort-by-name-label.util.ts'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { host } = defineProps<{
   host: FrontXoHost
 }>()
 
-const { t } = useI18n()
-
 const { hasSrFetchError, getSrById, areSrsReady } = useXoSrCollection()
 const { pbdsByHost, arePbdsReady } = useXoPbdCollection()
 
 const isReady = logicAnd(areSrsReady, arePbdsReady)
 
-const uiStore = useUiStore()
-
 const srs = computed(() => {
   const hostPbds = pbdsByHost.value.get(host.id) ?? []
 
@@ -71,11 +59,6 @@ const scope: SrScope = { type: SR_SCOPE_TYPE.HOST, hostId: host.id }
 
 <style scoped lang="postcss">
 .storage {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/host/[id]/tasks.vue b/@xen-orchestra/web/src/pages/host/[id]/tasks.vue
index 6a23f3c4b7..b695ec606b 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/tasks.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/tasks.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="tasks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="tasks">
     <UiCard class="container">
       <TasksList :tasks="convertedTasks" :has-error="hasTaskFetchError" :busy="!areTasksReady" />
     </UiCard>
-    <TaskSidePanel v-if="selectedTask" :task="selectedTask" @close="selectedTask = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TaskSidePanel :task="selectedTask" @close="selectedTask = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -20,26 +15,19 @@ import TasksList from '@/modules/task/components/list/TasksList.vue'
 import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
 import { convertXoTaskToCore } from '@/modules/task/utils/convert-xo-task-to-core.util.ts'
 import { useXoUserCollection } from '@/modules/user/remote-resources/use-xo-user-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store'
 import type { XoUser } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { host } = defineProps<{
   host: FrontXoHost
 }>()
 
-const uiStore = useUiStore()
-
 const { getTaskById, sortedTasks, hasTaskFetchError, areTasksReady } = useXoHostTasksCollection({}, () => host.id)
 const { getUserById } = useXoUserCollection()
 
-const { t } = useI18n()
-
 const selectedTask = useRouteQuery<FrontXoTask | undefined>('id', {
   toData: id => getTaskById(id as FrontXoTask['id']),
   toQuery: task => task?.id ?? '',
@@ -63,11 +51,6 @@ const convertedTasks = computed(() =>
 
 <style scoped lang="postcss">
 .tasks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/host/[id]/vms.vue b/@xen-orchestra/web/src/pages/host/[id]/vms.vue
index d8d2374791..b9cf21d093 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/vms.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/vms.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="vms" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="vms">
     <UiCard class="container">
       <VmsTable :vms :busy="!areVmsReady" :error="hasVmFetchError" />
     </UiCard>
-    <VmSidePanel v-if="selectedVm" :vm="selectedVm" @close="selectedVm = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VmSidePanel :vm="selectedVm" @close="selectedVm = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -17,22 +12,15 @@ import type { FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-co
 import VmSidePanel from '@/modules/vm/components/list/panel/VmSidePanel.vue'
 import VmsTable from '@/modules/vm/components/list/VmsTable.vue'
 import { useXoVmCollection, type FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { host } = defineProps<{
   host: FrontXoHost
 }>()
 
-const uiStore = useUiStore()
-
-const { t } = useI18n()
-
 const { areVmsReady, vmsByHost, hasVmFetchError } = useXoVmCollection()
 
 const vms = computed(() => vmsByHost.value.get(host.id) ?? [])
@@ -45,11 +33,6 @@ const selectedVm = useRouteQuery<FrontXoVm | undefined>('id', {
 
 <style scoped lang="postcss">
 .vms {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
index e540587e38..df603faa62 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/hosts.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="hosts" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="hosts">
     <UiCard class="container">
       <HostsTable :hosts :busy="!areHostsReady" :error="hasHostFetchError" />
     </UiCard>
-    <HostSidePanel v-if="selectedHost" :host="selectedHost" @close="selectedHost = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <HostSidePanel :host="selectedHost" @close="selectedHost = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -17,24 +12,17 @@ import HostsTable from '@/modules/host/components/list/HostsTable.vue'
 import HostSidePanel from '@/modules/host/components/list/panel/HostSidePanel.vue'
 import { useXoHostCollection, type FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { pool } = defineProps<{
   pool: FrontXoPool
 }>()
 
-const uiStore = useUiStore()
-
 const { areHostsReady, hostsByPool, hasHostFetchError } = useXoHostCollection()
 
-const { t } = useI18n()
-
 const hosts = computed(() => hostsByPool.value.get(pool.id) ?? [])
 
 const selectedHost = useRouteQuery<FrontXoHost | undefined>('id', {
@@ -45,11 +33,6 @@ const selectedHost = useRouteQuery<FrontXoHost | undefined>('id', {
 
 <style scoped lang="postcss">
 .hosts {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/networks.vue b/@xen-orchestra/web/src/pages/pool/[id]/networks.vue
index 7a5154d58b..bb2e1fac58 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/networks.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/networks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="networks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="networks">
     <UiCard class="container">
       <NetworksTable :busy="!areNetworksReady" :error="hasNetworkFetchError" :networks>
         <template #title-actions>
@@ -38,13 +38,8 @@
         </template>
       </NetworksTable>
     </UiCard>
-    <NetworkSidePanel v-if="selectedNetwork" :network="selectedNetwork" @close="selectedNetwork = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <NetworkSidePanel :network="selectedNetwork" @close="selectedNetwork = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -55,15 +50,13 @@ import {
   useXoNetworkCollection,
 } from '@/modules/network/remote-resources/use-xo-network-collection.ts'
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiDropdownButton from '@core/components/ui/dropdown-button/UiDropdownButton.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -75,7 +68,6 @@ const { t } = useI18n()
 
 const { areNetworksReady, hasNetworkFetchError, networksWithoutPifs, networksWithPifs, getNetworkById } =
   useXoNetworkCollection()
-const uiStore = useUiStore()
 
 const internalNetworks = computed(() => networksWithoutPifs.value.filter(network => network.$pool === pool.id))
 
@@ -89,11 +81,6 @@ const selectedNetwork = useRouteQuery<FrontXoNetwork | undefined>('id', {
 
 <style scoped lang="postcss">
 .networks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/security.vue b/@xen-orchestra/web/src/pages/pool/[id]/security.vue
index 5613098c1e..87cdeb83b0 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/security.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/security.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="security" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="security">
     <UiCard class="container">
       <VtsStateHero v-if="!isReady" format="page" type="busy" size="medium" />
       <TrafficRulesTable v-else :rules="trafficRules" :pool>
@@ -10,13 +10,8 @@
         </template>
       </TrafficRulesTable>
     </UiCard>
-    <TrafficRulesSidePanel v-if="selectedRule" :rule="selectedRule" @close="selectedRule = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TrafficRulesSidePanel :rule="selectedRule" @close="selectedRule = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -26,12 +21,11 @@ import TrafficRulesSidePanel from '@/modules/traffic-rules/components/list/panel
 import TrafficRulesTable from '@/modules/traffic-rules/components/TrafficRulesTable.vue'
 import { useTrafficRules } from '@/modules/traffic-rules/composables/traffic-rules.composable'
 import { useXoVifCollection } from '@/modules/vif/remote-resources/use-xo-vif-collection.ts'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import type { TrafficRule } from '@vates/types'
 import { logicAnd } from '@vueuse/math'
 import { computed } from 'vue'
@@ -41,8 +35,6 @@ const { pool } = defineProps<{
   pool: FrontXoPool
 }>()
 
-const uiStore = useUiStore()
-
 const { t } = useI18n()
 
 const { vifs, areVifsReady } = useXoVifCollection()
@@ -65,11 +57,6 @@ const selectedRule = useRouteQuery<TrafficRule | undefined>('id', {
 
 <style scoped lang="postcss">
 .security {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/storage.vue b/@xen-orchestra/web/src/pages/pool/[id]/storage.vue
index bc47e8efd9..3e77c793f4 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/storage.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/storage.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="storage" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="storage">
     <UiCard class="container">
       <StorageRepositoriesTable :srs :scope :busy="!areSrsReady" :error="hasSrFetchError" />
     </UiCard>
-    <StorageRepositorySidePanel v-if="selectedSr" :sr="selectedSr" :scope @close="selectedSr = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <StorageRepositorySidePanel :sr="selectedSr" :scope @close="selectedSr = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -20,23 +15,17 @@ import {
   useXoSrCollection,
   type FrontXoSr,
 } from '@/modules/storage-repository/remote-resources/use-xo-sr-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
-import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
+import { useRouteQuery } from '@core/composables/route-query.composable'
 import { SR_SCOPE_TYPE, type SrScope } from '@core/types/storage-repository.type.ts'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { pool } = defineProps<{
   pool: FrontXoPool
 }>()
 
-const { t } = useI18n()
-
 const { srsByPool, hasSrFetchError, getSrById, areSrsReady } = useXoSrCollection()
-const uiStore = useUiStore()
 
 const srs = computed(() => srsByPool.value.get(pool.id) ?? [])
 
@@ -50,11 +39,6 @@ const selectedSr = useRouteQuery<FrontXoSr | undefined>('id', {
 
 <style scoped lang="postcss">
 .storage {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/tasks.vue b/@xen-orchestra/web/src/pages/pool/[id]/tasks.vue
index 74b3ccae8c..21939c2944 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/tasks.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/tasks.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="tasks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="tasks">
     <UiCard class="container">
       <TasksList :tasks="convertedTasks" :has-error="hasTaskFetchError" :busy="!areTasksReady" />
     </UiCard>
-    <TaskSidePanel v-if="selectedTask" :task="selectedTask" @close="selectedTask = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TaskSidePanel :task="selectedTask" @close="selectedTask = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -20,26 +15,19 @@ import TasksList from '@/modules/task/components/list/TasksList.vue'
 import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
 import { convertXoTaskToCore } from '@/modules/task/utils/convert-xo-task-to-core.util.ts'
 import { useXoUserCollection } from '@/modules/user/remote-resources/use-xo-user-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store'
 import type { XoUser } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { pool } = defineProps<{
   pool: FrontXoPool
 }>()
 
-const uiStore = useUiStore()
-
 const { getTaskById, sortedTasks, hasTaskFetchError, areTasksReady } = useXoPoolTasksCollection({}, () => pool.id)
 const { getUserById } = useXoUserCollection()
 
-const { t } = useI18n()
-
 const selectedTask = useRouteQuery<FrontXoTask | undefined>('id', {
   toData: id => getTaskById(id as FrontXoTask['id']),
   toQuery: task => task?.id ?? '',
@@ -63,11 +51,6 @@ const convertedTasks = computed(() =>
 
 <style scoped lang="postcss">
 .tasks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
index f14b374035..f8422140eb 100644
--- a/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
+++ b/@xen-orchestra/web/src/pages/pool/[id]/vms.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="vms" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="vms">
     <UiCard class="container">
       <VmsTable :vms :busy="!areVmsReady" :error="hasVmFetchError" />
     </UiCard>
-    <VmSidePanel v-if="selectedVm" :vm="selectedVm" @close="selectedVm = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VmSidePanel :vm="selectedVm" @close="selectedVm = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script lang="ts" setup>
@@ -17,22 +12,15 @@ import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-co
 import VmSidePanel from '@/modules/vm/components/list/panel/VmSidePanel.vue'
 import VmsTable from '@/modules/vm/components/list/VmsTable.vue'
 import { useXoVmCollection, type FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { pool } = defineProps<{
   pool: FrontXoPool
 }>()
 
-const uiStore = useUiStore()
-
-const { t } = useI18n()
-
 const { areVmsReady, vmsByPool, hasVmFetchError } = useXoVmCollection()
 
 const vms = computed(() => vmsByPool.value.get(pool.id) ?? [])
@@ -45,11 +33,6 @@ const selectedVm = useRouteQuery<FrontXoVm | undefined>('id', {
 
 <style scoped lang="postcss">
 .vms {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/vif/[id]/traffic-rules.vue b/@xen-orchestra/web/src/pages/vif/[id]/traffic-rules.vue
index b5e37a81c1..04caf0da92 100644
--- a/@xen-orchestra/web/src/pages/vif/[id]/traffic-rules.vue
+++ b/@xen-orchestra/web/src/pages/vif/[id]/traffic-rules.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="traffic-rules" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="traffic-rules">
     <UiCard class="container">
       <TrafficRulesTable :rules="trafficRules" :pool>
         <template #title-action>
@@ -9,13 +9,8 @@
         </template>
       </TrafficRulesTable>
     </UiCard>
-    <TrafficRulesSidePanel v-if="selectedRule" :rule="selectedRule" @close="selectedRule = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TrafficRulesSidePanel :rule="selectedRule" @close="selectedRule = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -24,17 +19,14 @@ import TrafficRulesSidePanel from '@/modules/traffic-rules/components/list/panel
 import TrafficRulesTable from '@/modules/traffic-rules/components/TrafficRulesTable.vue'
 import { useTrafficRules } from '@/modules/traffic-rules/composables/traffic-rules.composable.ts'
 import { type FrontXoVif } from '@/modules/vif/remote-resources/use-xo-vif-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import type { TrafficRule } from '@vates/types'
 import { useI18n } from 'vue-i18n'
 
 const { vif } = defineProps<{ vif: FrontXoVif }>()
-const uiStore = useUiStore()
 
 const { t } = useI18n()
 
@@ -51,11 +43,6 @@ const selectedRule = useRouteQuery<TrafficRule | undefined>('id', {
 
 <style scoped lang="postcss">
 .traffic-rules {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/backups.vue b/@xen-orchestra/web/src/pages/vm/[id]/backups.vue
index be481d986c..222b8e46f8 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/backups.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/backups.vue
@@ -1,19 +1,10 @@
 <template>
-  <div class="backups" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="backups">
     <UiCard class="container">
       <BackupJobsTable :backup-jobs="vmBackupJobs" :busy="!areVmBackupJobsReady" :error="hasVmBackupJobFetchError" />
     </UiCard>
-    <BackupJobSidePanel
-      v-if="selectedBackupJob"
-      :backup-job="selectedBackupJob"
-      @close="selectedBackupJob = undefined"
-    />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <BackupJobSidePanel :backup-job="selectedBackupJob" @close="selectedBackupJob = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -24,27 +15,20 @@ import {
   type FrontXoVmBackupJob,
 } from '@/modules/backup/remote-resources/use-xo-backup-job-collection.ts'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
-import { useUiStore } from '@core/stores/ui.store'
-import { useI18n } from 'vue-i18n'
 
 const { vm } = defineProps<{
   vm: FrontXoVm
 }>()
 
-const uiStore = useUiStore()
-
 const {
   backupJobs: vmBackupJobs,
   areBackupJobsReady: areVmBackupJobsReady,
   hasBackupJobFetchError: hasVmBackupJobFetchError,
 } = useXoBackupJobCollection({}, () => vm.id)
 
-const { t } = useI18n()
-
 const selectedBackupJob = useRouteQuery<FrontXoVmBackupJob | undefined>('id', {
   toData: id => vmBackupJobs.value.find(backupJob => backupJob.id === id),
   toQuery: backupJob => backupJob?.id ?? '',
@@ -53,11 +37,6 @@ const selectedBackupJob = useRouteQuery<FrontXoVmBackupJob | undefined>('id', {
 
 <style scoped lang="postcss">
 .backups {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/networks.vue b/@xen-orchestra/web/src/pages/vm/[id]/networks.vue
index 3e4b249d0d..e193002cb5 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/networks.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/networks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="networks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="networks">
     <UiCard class="container">
       <VifsTable :vifs :vm>
         <template #title-actions>
@@ -9,13 +9,8 @@
         </template>
       </VifsTable>
     </UiCard>
-    <VifSidePanel v-if="selectedVif" :vif="selectedVif" :vm @close="selectedVif = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VifSidePanel :vif="selectedVif" :vm @close="selectedVif = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -24,12 +19,10 @@ import VifsTable from '@/modules/vif/components/VifsTable.vue'
 import { type FrontXoVif, useXoVifCollection } from '@/modules/vif/remote-resources/use-xo-vif-collection.ts'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
 import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { useArrayFilter } from '@vueuse/shared'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -43,8 +36,6 @@ const xo5VmVifHref = computed(() => buildXo5Route(`/vms/${vm.id}/network`))
 
 const { vifs: rawVifs, getVifById } = useXoVifCollection()
 
-const uiStore = useUiStore()
-
 const { t } = useI18n()
 
 const vifs = useArrayFilter(rawVifs, vif => vif.$VM === vm.id)
@@ -57,11 +48,6 @@ const selectedVif = useRouteQuery<FrontXoVif | undefined>('id', {
 
 <style scoped lang="postcss">
 .networks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/snapshots.vue b/@xen-orchestra/web/src/pages/vm/[id]/snapshots.vue
index 347cb9d2a6..8ac30adbe3 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/snapshots.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/snapshots.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="snapshots" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="snapshots">
     <div>
       <VtsColumns extra-space-around>
         <VtsColumn>
@@ -13,13 +13,8 @@
         <SnapshotsTable :snapshots :vm />
       </UiCard>
     </div>
-    <SnapshotSidePanel v-if="selectedSnapshot" :snapshot="selectedSnapshot" @close="selectedSnapshot = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <SnapshotSidePanel :snapshot="selectedSnapshot" @close="selectedSnapshot = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -33,11 +28,9 @@ import VmSnapshotCard from '@/modules/vm/components/snapshot/cards/VmSnapshotCar
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
 import VtsColumn from '@core/components/column/VtsColumn.vue'
 import VtsColumns from '@core/components/columns/VtsColumns.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { useArrayFilter } from '@vueuse/shared'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -48,8 +41,6 @@ const { vm } = defineProps<{
 
 const { snapshots: snapshotsCollection, getSnapshotById } = useXoVmSnapshotCollection()
 
-const uiStore = useUiStore()
-
 const { t } = useI18n()
 
 const snapshots = useArrayFilter(snapshotsCollection, snapshot => snapshot.$snapshot_of === vm.id)
@@ -80,9 +71,6 @@ const lastRevertSnapshot = computed(() => {
 
 <style scoped lang="postcss">
 .snapshots {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 40rem;
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/tasks.vue b/@xen-orchestra/web/src/pages/vm/[id]/tasks.vue
index a25e67a6b1..61523be3f6 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/tasks.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/tasks.vue
@@ -1,15 +1,10 @@
 <template>
-  <div class="tasks" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="tasks">
     <UiCard class="container">
       <TasksList :tasks="convertedTasks" :has-error="hasTaskFetchError" :busy="!areTasksReady" />
     </UiCard>
-    <TaskSidePanel v-if="selectedTask" :task="selectedTask" @close="selectedTask = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <TaskSidePanel :task="selectedTask" @close="selectedTask = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -20,26 +15,19 @@ import { convertXoTaskToCore } from '@/modules/task/utils/convert-xo-task-to-cor
 import { useXoUserCollection } from '@/modules/user/remote-resources/use-xo-user-collection.ts'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
 import { useXoVmTasksCollection } from '@/modules/vm/remote-resources/use-xo-vm-tasks-collection.ts'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store'
 import type { XoUser } from '@vates/types'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const { vm } = defineProps<{
   vm: FrontXoVm
 }>()
 
-const uiStore = useUiStore()
-
 const { getTaskById, sortedTasks, hasTaskFetchError, areTasksReady } = useXoVmTasksCollection({}, () => vm.id)
 const { getUserById } = useXoUserCollection()
 
-const { t } = useI18n()
-
 const selectedTask = useRouteQuery<FrontXoTask | undefined>('id', {
   toData: id => getTaskById(id as FrontXoTask['id']),
   toQuery: task => task?.id ?? '',
@@ -63,11 +51,6 @@ const convertedTasks = computed(() =>
 
 <style scoped lang="postcss">
 .tasks {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     gap: 4rem;
diff --git a/@xen-orchestra/web/src/pages/vm/[id]/vdis.vue b/@xen-orchestra/web/src/pages/vm/[id]/vdis.vue
index fc230e2f40..94fdb2a3aa 100644
--- a/@xen-orchestra/web/src/pages/vm/[id]/vdis.vue
+++ b/@xen-orchestra/web/src/pages/vm/[id]/vdis.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vdis" :class="{ mobile: uiStore.isSmall }">
+  <VtsContentSidePanel class="vdis">
     <UiCard class="container">
       <VdisTable :vdis="filteredVdisByNotCdVbd" :vm :busy="!areVmVdisReady" :error="hasVmVdiFetchError">
         <template #title-actions>
@@ -31,13 +31,8 @@
         </template>
       </VdisTable>
     </UiCard>
-    <VdiSidePanel v-if="selectedVdi" :vdi="selectedVdi" :vm @close="selectedVdi = undefined" />
-    <UiPanel v-else-if="!uiStore.isSmall">
-      <VtsStateHero format="panel" type="no-selection" size="medium">
-        {{ t('select-to-see-details') }}
-      </VtsStateHero>
-    </UiPanel>
-  </div>
+    <VdiSidePanel :vdi="selectedVdi" :vm @close="selectedVdi = undefined" />
+  </VtsContentSidePanel>
 </template>
 
 <script setup lang="ts">
@@ -47,15 +42,13 @@ import type { FrontXoVdi } from '@/modules/vdi/remote-resources/use-xo-vdi-colle
 import { useXoVmVbdsUtils } from '@/modules/vm/composables/xo-vm-vbd-utils.composable.ts'
 import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
 import { useXoVmVdisCollection } from '@/modules/vm/remote-resources/use-xo-vm-vdis-collection.ts'
+import VtsContentSidePanel from '@core/components/layout/VtsContentSidePanel.vue'
 import MenuItem from '@core/components/menu/MenuItem.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiDropdownButton from '@core/components/ui/dropdown-button/UiDropdownButton.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
-import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable.ts'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -66,7 +59,6 @@ const { vm } = defineProps<{
 const { t } = useI18n()
 
 const { vmVdis, getVmVdiById, hasVmVdiFetchError, areVmVdisReady } = useXoVmVdisCollection({}, () => vm.id)
-const uiStore = useUiStore()
 
 const { notCdDriveVbds } = useXoVmVbdsUtils(() => vm)
 
@@ -82,11 +74,6 @@ const selectedVdi = useRouteQuery<FrontXoVdi | undefined>('id', {
 
 <style scoped lang="postcss">
 .vdis {
-  &:not(.mobile) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40rem;
-  }
-
   .container {
     height: fit-content;
     margin: 0.8rem;
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 3e14763fd1..8613a65a16 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -75,6 +75,7 @@
 - [REST API] `PATCH /rest/v0/vifs/{id}` to update VIF properties (allowed IPs, locking mode, rate limit, TX checksumming) (PR [#9935](https://github.com/vatesfr/xen-orchestra/pull/9935))
 - [XO 6] Add an Administration tab in the sidebar with a user management menu (PR [#9947](https://github.com/vatesfr/xen-orchestra/pull/9947))
 - [OpenMetrics] Include XO tags as a `tags` label on host, VM and SR metrics [#9628](https://github.com/vatesfr/xen-orchestra/issues/9628) (PR [#9971](https://github.com/vatesfr/xen-orchestra/pull/9971))
+- [Web stack] Updated side panels (PR [#9836](https://github.com/vatesfr/xen-orchestra/pull/9836))
 
 ### Bug fixes
 
@@ -100,7 +101,7 @@
 <!--packages-start-->
 
 - @xen-orchestra/backups patch
-- @xen-orchestra/web patch
-- @xen-orchestra/web-core patch
+- @xen-orchestra/web minor
+- @xen-orchestra/web-core minor
 
 <!--packages-end-->