diff --git a/@xen-orchestra/lite/src/locales/cs.json b/@xen-orchestra/lite/src/locales/cs.json
index 57dc074bba0..1a79d89f0f3 100644
--- a/@xen-orchestra/lite/src/locales/cs.json
+++ b/@xen-orchestra/lite/src/locales/cs.json
@@ -59,7 +59,6 @@
 
   "descending": "sestupně",
   "description": "Popis",
-  "dhcp": "DHCP",
   "disabled": "Zakázáno",
   "display": "Zobrazení",
   "dns": "DNS",
diff --git a/@xen-orchestra/lite/src/locales/de.json b/@xen-orchestra/lite/src/locales/de.json
index e5d13c7e705..f132f383f66 100644
--- a/@xen-orchestra/lite/src/locales/de.json
+++ b/@xen-orchestra/lite/src/locales/de.json
@@ -57,7 +57,6 @@
 
   "descending": "absteigend",
   "description": "Beschreibung",
-  "dhcp": "DHCP",
   "disabled": "deaktiviert",
   "display": "Display",
   "dns": "DNS",
@@ -118,7 +117,6 @@
   "n-hosts-awaiting-patch": "Der Host {n} benötigt dieses Patch | Die Hosts {n} benötigen dieses Patch",
   "n-missing": "{n} verbleibend",
   "name": "Name",
-  "netmask": "Netzmaske",
   "network-download": "Download",
   "network-throughput": "Netzwerkdurchsatz",
   "network-upload": "Upload",
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index a9217ed7ae1..15213ae213b 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -43,7 +43,6 @@
   "cpu-provisioning": "CPU provisioning",
   "cpu-provisioning-warning": "The number of vCPUs allocated exceeds the number of physical CPUs available. System performance could be affected",
   "cpu-usage": "CPU usage",
-  "delete": "Delete",
   "delete-vms": "Delete 1 VM | Delete {n} VMs",
   "deploy": "Deploy",
   "deploy-xoa": "Deploy XOA",
@@ -59,10 +58,8 @@
 
   "descending": "descending",
   "description": "Description",
-  "dhcp": "DHCP",
   "disabled": "Disabled",
   "display": "Display",
-  "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
   "edit-config": "Edit config",
@@ -179,7 +176,6 @@
   "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch",
   "n-missing": "{n} missing",
   "name": "Name",
-  "netmask": "Netmask",
   "network-download": "Download",
   "network-throughput": "Network throughput",
   "network-upload": "Upload",
@@ -241,7 +237,6 @@
   "start": "Start",
   "start-on-host": "Start on specific host",
   "static-ip": "Static IP",
-  "status": "Status",
   "storage-usage": "Storage usage",
   "support": "Support",
   "suspend": "Suspend",
diff --git a/@xen-orchestra/lite/src/locales/fa.json b/@xen-orchestra/lite/src/locales/fa.json
index f057084aa93..d38abfd754d 100644
--- a/@xen-orchestra/lite/src/locales/fa.json
+++ b/@xen-orchestra/lite/src/locales/fa.json
@@ -58,7 +58,6 @@
 
   "descending": "نزولی",
   "description": "توصیف",
-  "dhcp": "DHCP",
   "disabled": "غیر فعال",
   "display": "نمایش",
   "dns": "DNS",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index d9f86ea546e..c07a574eda5 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -43,7 +43,6 @@
   "cpu-provisioning": "Provisionnement CPU",
   "cpu-provisioning-warning": "Le nombre de vCPU alloués dépasse le nombre de CPU physique disponible. Les performances du système pourraient être affectées",
   "cpu-usage": "Utilisation CPU",
-  "delete": "Supprimer",
   "delete-vms": "Supprimer 1 VM | Supprimer {n} VMs",
   "deploy": "Déployer",
   "deploy-xoa": "Déployer XOA",
@@ -59,8 +58,6 @@
 
   "descending": "descendant",
   "description": "Description",
-  "dhcp": "DHCP",
-  "dns": "DNS",
   "disabled": "Désactivé",
   "display": "Affichage",
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
@@ -179,7 +176,6 @@
   "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch",
   "n-missing": "{n} manquant | {n} manquants",
   "name": "Nom",
-  "netmask": "Masque réseau",
   "network-download": "Descendant",
   "network-throughput": "Débit du réseau",
   "network-upload": "Montant",
@@ -241,7 +237,6 @@
   "start": "Démarrer",
   "start-on-host": "Démarrer sur un hôte spécifique",
   "static-ip": "IP statique",
-  "status": "Statut",
   "storage-usage": "Utilisation du stockage",
   "support": "Support",
   "suspend": "Suspendre",
diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
index 513e358fd97..f9dd28f7281 100644
--- a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
+++ b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
@@ -25,11 +25,11 @@ const slots = defineSlots<{
 <style lang="postcss" scoped>
 .vts-card-row-key-value {
   display: flex;
-  align-items: center;
   gap: 0.8rem;
 
   .key {
     min-width: 12rem;
+    max-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
index 85127619f52..1b7ec7916c1 100644
--- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -3,12 +3,12 @@
   <MenuList :disabled placement="bottom-start" border>
     <template #trigger="{ open, isOpen }">
       <th
-        :class="{ interactive, disabled, focus: isOpen }"
+        :class="[headerClass, { interactive, disabled, focus: isOpen }]"
         class="column-header"
         @click="ev => (interactive ? open(ev) : noop())"
       >
-        <div class="content">
-          <span class="label">
+        <div class="content text-ellipsis">
+          <span v-tooltip class="label">
             <VtsIcon :icon accent="current" />
             <slot />
           </span>
@@ -58,6 +58,7 @@ const props = withDefaults(
     icon?: IconDefinition
     interactive?: boolean
     disabled?: boolean
+    headerClass?: string
   }>(),
   {
     disabled: false,
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
index 8b1bdaf05b3..2092b8a2d93 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -43,7 +43,7 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any
diff --git a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
index 1a42b2e673f..fc66ab019b0 100644
--- a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p class="message">
+    <p v-tooltip class="message text-ellipsis">
       <slot />
     </p>
   </div>
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import {
   faCheck,
   faCircle,
@@ -42,7 +43,6 @@ const icon = computed(() => iconByAccent[props.accent])
 
 <style lang="postcss" scoped>
 .ui-info {
-  align-items: start;
   display: flex;
   gap: 0.8rem;
 
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 bbb0c10e60d..29d8136c931 100644
--- a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -44,6 +44,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    cursor: default;
   }
 
   &.error {
diff --git a/@xen-orchestra/web-core/lib/composables/multi-select.composable.md b/@xen-orchestra/web-core/lib/composables/multi-select.composable.md
new file mode 100644
index 00000000000..03267f39189
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/composables/multi-select.composable.md
@@ -0,0 +1,33 @@
+# useMultiSelect composable
+
+```vue
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>
+          <input type="checkbox" v-model="areAllSelected" />
+        </th>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item in items">
+        <td>
+          <input type="checkbox" :value="item.id" v-model="selected" />
+        </td>
+        <td>{{ item.name }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- You can use something else than a "Select All" checkbox -->
+  <button @click="areAllSelected = !areAllSelected">Toggle all selected</button>
+</template>
+
+<script lang="ts" setup>
+import useMultiSelect from './multi-select.composable'
+
+const { selected, areAllSelected } = useMultiSelect()
+</script>
+```
diff --git a/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts b/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts
new file mode 100644
index 00000000000..d4f900f0bc5
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts
@@ -0,0 +1,32 @@
+import { computed, ref, unref, type MaybeRef, type Ref } from 'vue'
+
+export default function useMultiSelect<T>(usableIds: MaybeRef<T[]>, selectableIds?: MaybeRef<T[]>) {
+  const $selected = ref(new Set()) as Ref<Set<T>>
+
+  const selected = computed({
+    get() {
+      return unref(usableIds).filter(usableId => $selected.value.has(usableId))
+    },
+    set(ids: T[]) {
+      $selected.value = new Set(ids)
+    },
+  })
+
+  const areAllSelected = computed({
+    get() {
+      return (unref(selectableIds) ?? unref(usableIds)).every(id => $selected.value.has(id))
+    },
+    set(value: boolean) {
+      if (value) {
+        $selected.value = new Set(unref(selectableIds) ?? unref(usableIds))
+      } else {
+        $selected.value = new Set()
+      }
+    },
+  })
+
+  return {
+    selected,
+    areAllSelected,
+  }
+}
diff --git a/@xen-orchestra/web-core/lib/locales/de.json b/@xen-orchestra/web-core/lib/locales/de.json
index 5eae961a611..219b45901da 100644
--- a/@xen-orchestra/web-core/lib/locales/de.json
+++ b/@xen-orchestra/web-core/lib/locales/de.json
@@ -18,6 +18,7 @@
   "dark-mode.auto": "Automatischer Dunkelmodus",
 
   "dashboard": "Dashboard",
+  "dhcp": "DHCP",
   "documentation-name": "{name} Dokumentation",
   "error-no-data": "Fehler beim Datenabruf.",
   "fullscreen": "Vollbild",
@@ -28,6 +29,7 @@
   "log-out": "Abmelden",
   "master": "Primärer Host",
   "n-vms": "1 VM | {n} VMs",
+  "netmask": "Netzmaske",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
   "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index 7d994a6b2d4..06d6076b992 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -43,36 +43,64 @@
   "dark-mode.auto": "Auto dark mode",
 
   "access-forum": "Access forum",
-  "dashboard": "Dashboard",
+  "connected": "Connected",
+  "dashboard": "Tableau de bord",
+  "disconnected": "Disconnected",
+  "disconnected-from-physical-device": "Disconnected from physical device",
+  "device": "Device",
+  "edit": "Edit",
+  "default-locking-mode": "Default locking mode",
+  "delete": "Delete",
+  "dhcp": "DHCP",
+  "dns": "DNS",
   "documentation-name": "{name} documentation",
   "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
   "fullscreen": "Fullscreen",
   "gateway": "Gateway",
   "hosts": "Hosts",
+  "ip-addresses": "IP addresses",
+  "ip-mode": "IP mode",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
   "log-out": "Log out",
+  "mac-address": "MAC address",
+  "mac-addresses": "MAC addresses",
   "master": "Primary host",
+  "mbs": "{value} Mb/s",
+  "mtu": "MTU",
+  "netmask": "Netmask",
+  "network-block-device": "Network block device",
+  "network-information": "Network information",
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
   "no-data": "No data",
+  "none": "None",
   "object-not-found": "Object {id} can't be found…",
+  "off": "Off",
+  "on": "On",
   "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "page-not-found": "This page is not to be found…",
   "patches": "Patches",
+  "physical-interface-status": "Physical interface status",
+  "pif": "PIF",
+  "pifs": "PIFs",
+  "pif-status": "Pif status",
   "power-on-vm-for-console": "Power on your VM to access its console",
   "power-on-host-for-console": "Power on your host to access its console",
   "professional-support": "Professional support",
+  "properties": "Properties",
   "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
+  "scan-pifs": "Scan PIFs",
   "see-all": "See all",
   "select-to-see-details": "Select an element to see details",
   "send": "Send",
   "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
   "speed": "Speed",
   "stats": "Stats",
+  "status": "Status",
   "storage": "Storage",
   "system": "System",
 
@@ -85,7 +113,12 @@
   "tasks.quick-view.failed": "Failed",
   "tasks.quick-view.in-progress": "In progress",
 
+  "table-actions": "Table actions",
+  "tags": "Tags",
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unknown": "Unknown",
+  "uuid": "Uuid",
+  "vlan": "VLAN",
   "vms": "VMs"
 }
diff --git a/@xen-orchestra/web-core/lib/locales/fa.json b/@xen-orchestra/web-core/lib/locales/fa.json
index aaf2050bbfe..a35c461e6d9 100644
--- a/@xen-orchestra/web-core/lib/locales/fa.json
+++ b/@xen-orchestra/web-core/lib/locales/fa.json
@@ -32,6 +32,7 @@
   "dark-mode.auto": "حالت خودکار تاریک",
 
   "dashboard": "داشبورد",
+  "dhcp": "DHCP",
   "documentation-name": "اسناد {name}",
   "error-no-data": "خطا، نمی توان داده ها را جمع آوری کرد.",
   "fullscreen": "تمام صفحه",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index 79ef0ef481c..898d61f448c 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -43,36 +43,64 @@
   "dark-mode.auto": "Mode sombre automatique",
 
   "access-forum": "Accès au forum",
+  "connected": "Connecté",
   "dashboard": "Tableau de bord",
+  "disconnected": "Déconnécté",
+  "disconnected-from-physical-device": "Déconnécté de l'appareil physique",
+  "device": "Appareil",
+  "edit": "Éditer",
+  "default-locking-mode": "Mode de verrouillage par défaut",
+  "delete": "Supprimer",
+  "dhcp": "DHCP",
+  "dns": "DNS",
   "documentation-name": "Documentation {name}",
   "error-no-data": "Erreur, impossible de collecter les données.",
   "exit-fullscreen": "Quitter le plein écran",
   "fullscreen": "Plein écran",
   "gateway": "Passerelle",
   "hosts": "Hôtes",
+  "ip-addresses": "Adresses IP",
+  "ip-mode": "Mode IP",
   "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
   "log-out": "Se déconnecter",
+  "mac-address": "Adresse MAC",
+  "mac-addresses": "Adresses MAC",
   "master": "Hôte primaire",
+  "mbs": "{value} Mb/s",
+  "mtu": "MTU",
+  "netmask": "Masque réseau",
+  "network-block-device": "Dispositif de blocage réseau",
+  "network-information": "Information du réseau",
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
   "no-data": "Aucune donnée",
+  "none": "Aucun",
   "object-not-found": "L'objet {id} est introuvable…",
+  "off": "Éteint",
+  "on": "Allumé",
   "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "page-not-found": "Cette page est introuvable…",
   "patches": "Patches",
+  "physical-interface-status": "Status de l'interface physique",
+  "pif": "PIF",
+  "pifs": "PIFs",
+  "pif-status": "Status du Pif",
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
   "professional-support": "Support professionel",
+  "properties": "Propriétés",
   "receive": "Recevoir",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
+  "scan-pifs": "Scanner les PIFs",
   "see-all": "Voir tout",
   "select-to-see-details": "Sélectionnez un élement pour voir les details",
   "send": "Envoyer",
   "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
   "speed": "Vitesse",
   "stats": "Stats",
+  "status": "Statut",
   "storage": "Stockage",
   "system": "Système",
 
@@ -85,7 +113,12 @@
   "tasks.quick-view.failed": "Échouées",
   "tasks.quick-view.in-progress": "En cours",
 
+  "table-actions": "Actions du tableau",
+  "tags": "Etiquettes",
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unknown": "Inconnu",
+  "uuid": "Uuid",
+  "vlan": "VLAN",
   "vms": "VMs"
 }
diff --git a/@xen-orchestra/web/src/components/host/HostHeader.vue b/@xen-orchestra/web/src/components/host/HostHeader.vue
index dc5bb9e4dc3..f4bc3254f3f 100644
--- a/@xen-orchestra/web/src/components/host/HostHeader.vue
+++ b/@xen-orchestra/web/src/components/host/HostHeader.vue
@@ -15,7 +15,11 @@
     <TabItem disabled>{{ $t('alarms') }}</TabItem>
     <TabItem disabled>{{ $t('stats') }}</TabItem>
     <TabItem disabled>{{ $t('system') }}</TabItem>
-    <TabItem disabled>{{ $t('network') }}</TabItem>
+    <RouterLink v-slot="{ isActive, href }" :to="`/host/${host.id}/network`" custom>
+      <TabItem :active="isActive" :href tag="a">
+        {{ $t('network') }}
+      </TabItem>
+    </RouterLink>
     <TabItem disabled>{{ $t('storage') }}</TabItem>
     <TabItem disabled>{{ $t('tasks') }}</TabItem>
     <RouterLink v-slot="{ isActive, href }" :to="`/host/${host.id}/vms`" custom>
diff --git a/@xen-orchestra/web/src/components/pif/PifPanel.vue b/@xen-orchestra/web/src/components/pif/PifPanel.vue
new file mode 100644
index 00000000000..87e2158d2d4
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifPanel.vue
@@ -0,0 +1,289 @@
+<template>
+  <UiPanel class="pif-panel">
+    <template #header>
+      <UiButton size="medium" variant="tertiary" accent="info" :left-icon="faEdit">
+        {{ $t('edit') }}
+      </UiButton>
+      <UiButton size="medium" variant="tertiary" accent="danger" :left-icon="faTrash">
+        {{ $t('delete') }}
+      </UiButton>
+    </template>
+    <UiCard class="card">
+      <UiCardTitle>{{ $t('pif') }}</UiCardTitle>
+      <div class="content">
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('uuid') }}
+          </template>
+          <template #value>
+            {{ props.pif.id }}
+          </template>
+          <template #addons>
+            <VtsIcon accent="warning" :icon="faCircle" :overlay-icon="faStar" />
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('network') }}
+          </template>
+          <template #value>
+            {{ getNetworkData('name_label') }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('device') }}
+          </template>
+          <template #value>
+            {{ props.pif.device }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('pif-status') }}
+          </template>
+          <template #value>
+            <PifStatus :pif="props.pif" card />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('physical-interface-status') }}
+          </template>
+          <template #value>
+            <PifStatus :pif="props.pif" card />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('vlan') }}
+          </template>
+          <template #value>
+            {{ getPifData('vlan') }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('tags') }}
+          </template>
+          <template #value>
+            <div v-if="!Array.isArray(getNetworkData('tags'))">{{ getNetworkData('tags') }}</div>
+            <div v-else class="tags">
+              <UiTag v-for="tag in getNetworkData('tags')" :key="tag" accent="info" variant="secondary">
+                {{ tag }}
+              </UiTag>
+            </div>
+          </template>
+        </VtsCardRowKeyValue>
+      </div>
+    </UiCard>
+    <UiCard class="card">
+      <UiCardTitle>{{ $t('network-information') }}</UiCardTitle>
+
+      <div class="content">
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('ip-addresses') }}
+          </template>
+          <template #value>
+            <p v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ getPifData('ip') }}</p>
+            <p v-if="!allIps.length">{{ getPifData('ip') }}</p>
+          </template>
+          <template #addons>
+            <UiButtonIcon v-if="allIps.length > 1" :icon="faEllipsis" size="medium" accent="info" />
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('mac-address') }}
+          </template>
+          <template #value>
+            {{ props.pif.mac }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('netmask') }}
+          </template>
+          <template #value>
+            {{ getPifData('netmask') }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('dns') }}
+          </template>
+          <template #value>
+            {{ getPifData('dns') }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('gateway') }}
+          </template>
+          <template #value>
+            {{ getPifData('gateway') }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('ip-mode') }}
+          </template>
+          <template #value>
+            {{ getPifData('mode') }}
+          </template>
+        </VtsCardRowKeyValue>
+      </div>
+    </UiCard>
+    <UiCard class="card">
+      <UiCardTitle>{{ $t('properties') }}</UiCardTitle>
+      <div class="content">
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('mtu') }}
+          </template>
+          <template #value>
+            {{ props.pif.mtu }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('speed') }}
+          </template>
+          <template #value>
+            {{ $t('mbs', { value: props.pif.speed }) }}
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('network-block-device') }}
+          </template>
+          <template #value>
+            {{ $t(`${getNetworkData('nbd')}`) }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('default-locking-mode') }}
+          </template>
+          <template #value>
+            {{ $t(`${getNetworkData('defaultIsLocked')}`) }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+      </div>
+    </UiCard>
+  </UiPanel>
+</template>
+
+<script setup lang="ts">
+import PifStatus from '@/components/pif/PifStatus.vue'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import type { XoPif } from '@/types/xo/pif.type'
+import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.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 UiTag from '@core/components/ui/tag/UiTag.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCircle, faCopy, faEdit, faEllipsis, faStar, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  pif: XoPif
+}>()
+
+const { get } = useNetworkStore().subscribe()
+
+const allIps = computed(() => {
+  return [props.pif.ip, ...props.pif.ipv6].filter(ip => ip)
+})
+
+const getNetworkData = (type: keyof XoNetwork) => {
+  const network: XoNetwork = get(props.pif.$network)!
+
+  switch (type) {
+    case 'name_label':
+      return network.name_label || '-'
+    case 'nbd':
+    case 'defaultIsLocked':
+      return network[type] ? 'on' : 'off'
+    case 'tags':
+      return network.tags.length ? network.tags : '-'
+  }
+}
+
+const getPifData = (type: keyof XoPif) => {
+  const value = props.pif[type]
+
+  switch (type) {
+    case 'vlan':
+      return value === -1 ? '-' : value
+    case 'netmask':
+    case 'dns':
+    case 'gateway':
+    case 'ip':
+      return value === '' ? '-' : props.pif.netmask
+    case 'mode':
+      return value === 'None' ? '-' : value
+  }
+}
+</script>
+
+<style scoped lang="postcss">
+.pif-panel {
+  width: 40rem;
+  border-top: none;
+}
+
+.card {
+  gap: 1.6rem;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .tags {
+    width: 100%;
+    display: flex;
+    gap: 0.8rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/components/pif/PifStatus.vue b/@xen-orchestra/web/src/components/pif/PifStatus.vue
new file mode 100644
index 00000000000..308db323acc
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifStatus.vue
@@ -0,0 +1,48 @@
+<template>
+  <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
+    <p v-tooltip class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  pif: any
+  card?: boolean
+}>()
+
+const { t } = useI18n()
+
+type NetworkStatus = 'connected' | 'disconnected' | 'partial'
+type NetworkAccent = 'success' | 'warning' | 'danger'
+
+const states = computed<Record<NetworkStatus, { text: string; icon: IconDefinition; accent: NetworkAccent }>>(() => ({
+  connected: { text: t('connected'), icon: faCheck, accent: 'success' },
+  disconnected: { text: t('disconnected'), icon: faCheck, accent: 'danger' },
+  partial: { text: t('disconnected-from-physical-device'), icon: faExclamation, accent: 'warning' },
+}))
+
+const status = computed(() => {
+  if (props.pif.attached && props.pif.carrier) {
+    return 'connected'
+  }
+  if (props.pif.attached && !props.pif.carrier) {
+    return 'partial'
+  }
+  return 'disconnected'
+})
+
+const getStatusProps = (status: NetworkStatus) => states.value[status as NetworkStatus]
+</script>
+
+<style scoped lang="postcss">
+p:not(.card) {
+  font-size: 1.4rem !important;
+}
+</style>
diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue
new file mode 100644
index 00000000000..7eb600813bf
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifTable.vue
@@ -0,0 +1,272 @@
+<template>
+  <div v-if="isReady" class="pif-table">
+    <UiTitle type="h4" class="header">
+      <slot>{{ $t('pifs') }}</slot>
+      <template #actions>
+        <UiButton size="medium" variant="secondary" accent="info" :left-icon="faArrowsRotate">
+          {{ $t('scan-pifs') }}
+        </UiButton>
+      </template>
+    </UiTitle>
+    <div class="table-actions">
+      <UiQuerySearchBar @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions>
+        <UiButton size="medium" variant="tertiary" accent="info" :left-icon="faEdit" disabled>
+          {{ $t('edit') }}
+        </UiButton>
+        <UiButton size="medium" variant="tertiary" accent="info" :left-icon="faTrash" disabled>
+          {{ $t('delete') }}
+        </UiButton>
+        <template #title>
+          <UiActionsTitle> {{ $t('table-actions') }}</UiActionsTitle>
+        </template>
+      </UiTableActions>
+      <UiTopBottomTable
+        class="selection"
+        :selected-items="selected.length"
+        :total-items="usableRefs.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
+    <div class="table-container">
+      <VtsTable vertical-border class="table">
+        <thead>
+          <tr>
+            <template v-for="column of visibleColumns" :key="column.id">
+              <th v-if="column.id === 'checkbox'" :class="`col-${column.id}`">
+                <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+              </th>
+              <th v-else-if="column.id === 'more'" :class="`col-${column.id}`">
+                <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+                {{ column.label }}
+              </th>
+              <ColumnTitle v-else id="network" :header-class="`col-${column.id}`" :icon="getHeaderIcon(column.id)">
+                {{ column.label }}
+              </ColumnTitle>
+            </template>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row of rows"
+            :key="row.id"
+            class="row"
+            :class="{ selected: selectedRowId === row.id }"
+            @click="selectRow(row.id)"
+          >
+            <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+              <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
+              <div v-if="column.id === 'network' && getNetworkName(row.value)" class="network">
+                <UiComplexIcon size="medium">
+                  <VtsIcon :icon="faNetworkWired" accent="current" />
+                  <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+                </UiComplexIcon>
+                <p v-tooltip class="text-ellipsis">{{ getNetworkName(row.value) }}</p>
+              </div>
+              <div v-if="column.id === 'device'" v-tooltip class="text-ellipsis">{{ row.value.device }}</div>
+              <div v-if="column.id === 'status'" v-tooltip>
+                <PifStatus class="status" :pif="row.value" />
+              </div>
+              <div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">
+                {{ getPifData(row.value, 'vlan') }}
+              </div>
+              <div v-if="column.id === 'ip'" v-tooltip class="text-ellipsis">{{ row.value.ip }}</div>
+              <div v-if="column.id === 'mac'" v-tooltip class="text-ellipsis">{{ row.value.mac }}</div>
+              <div v-if="column.id === 'mode'" v-tooltip class="text-ellipsis">{{ getPifData(row.value, 'mode') }}</div>
+              <div v-if="column.id === 'more'" v-tooltip>
+                <VtsIcon accent="info" :icon="faEllipsis" />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </VtsTable>
+    </div>
+    <UiTopBottomTable
+      class="selection"
+      :selected-items="selected.length"
+      :total-items="usableRefs.length"
+      @toggle-select-all="toggleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import PifStatus from '@/components/pif/PifStatus.vue'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import type { XoPif } from '@/types/xo/pif.type'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import ColumnTitle from '@core/components/table/ColumnTitle.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import useMultiSelect from '@core/composables/table/multi-select.composable'
+import { useTable } from '@core/composables/table.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import {
+  faAlignLeft,
+  faArrowsRotate,
+  faCheck,
+  faCircle,
+  faEdit,
+  faEllipsis,
+  faNetworkWired,
+  faTrash,
+  faAt,
+  faPowerOff,
+  faCaretDown,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  pifs: XoPif[]
+}>()
+
+const emit = defineEmits<{
+  rowSelect: [value: XoPif['id']]
+}>()
+
+const { get, isReady } = useNetworkStore().subscribe()
+
+const getNetworkName = (pif: XoPif) => {
+  const network: XoNetwork = get(pif.$network)!
+  return network.name_label ? network.name_label : ''
+}
+
+const getPifData = (pif: XoPif, type: keyof XoPif) =>
+  (type === 'vlan' && pif[type] === -1) || (type === 'mode' && pif[type] === 'None') ? '' : pif[type]
+
+const searchQuery = ref('')
+
+const filteredPifs = computed(() => {
+  if (!searchQuery.value) return props.pifs
+  return props.pifs.filter(pif =>
+    Object.values(pif).some(value => String(value).toLowerCase().includes(searchQuery.value.toLowerCase()))
+  )
+})
+
+const usableRefs = computed(() => props.pifs.map(item => item.id))
+const { selected, areAllSelected } = useMultiSelect(usableRefs)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? usableRefs.value : []
+}
+
+const { visibleColumns, rows } = useTable('pifs', filteredPifs, {
+  rowId: record => record.id,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('network', record => record.$network, { label: 'Network', isHideable: true }),
+    define('device', record => record.device, { label: 'Device', isHideable: true }),
+    define('status', () => '', { label: 'Status', isHideable: true }),
+    define('vlan', record => record.vlan, { label: 'Vlan', isHideable: true }),
+    define('ip', record => record.ip, { label: 'IP Addresses', isHideable: true }),
+    define('mac', record => record.mac, { label: 'MAC address', isHideable: true }),
+    define('mode', record => record.mode, { label: 'IP mode', isHideable: true }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+
+type pifHeader = 'network' | 'device' | 'status' | 'vlan' | 'ip' | 'mac' | 'mode' | 'more'
+
+const headerIcon: Record<pifHeader, { icon: IconDefinition }> = {
+  network: { icon: faAlignLeft },
+  device: { icon: faAlignLeft },
+  status: { icon: faPowerOff },
+  vlan: { icon: faAlignLeft },
+  ip: { icon: faAt },
+  mac: { icon: faAt },
+  mode: { icon: faCaretDown },
+  more: { icon: faEllipsis },
+}
+
+const getHeaderIcon = (status: pifHeader) => {
+  return headerIcon[status].icon
+}
+
+const selectedRowId = ref<XoPif['id']>()
+
+const selectRow = (rowId: XoPif['id']) => {
+  selectedRowId.value = rowId
+  emit('rowSelect', rowId)
+}
+</script>
+
+<style scoped lang="postcss">
+.pif-table {
+  .table-actions {
+    margin-top: 2.4rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .selection {
+    margin: 0.8rem 0;
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .table {
+      .col-checkbox,
+      .col-more {
+        width: 4.5rem;
+      }
+
+      :deep(.col-vlan) {
+        width: 8.5rem;
+      }
+
+      :deep(.col-network, .col-status, .col-ip, .col-mac),
+      :deep(.col-status),
+      :deep(.col-ip),
+      :deep(.col-mac) {
+        width: 20rem;
+      }
+
+      :deep(.col-device),
+      :deep(.col-mode) {
+        width: 11rem;
+      }
+    }
+
+    tr:last-child {
+      border-bottom: 1px solid var(--color-neutral-border);
+    }
+
+    td {
+      padding: 1.1rem;
+    }
+
+    .row {
+      cursor: pointer;
+    }
+
+    .row:hover {
+      background-color: var(--color-brand-background-hover);
+      transition: all 0.3s ease;
+    }
+
+    .row.selected {
+      background-color: var(--color-brand-background-selected);
+    }
+
+    .network {
+      display: flex;
+      gap: 1.6rem;
+    }
+
+    .status {
+      font-size: 8.4rem !important;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue
new file mode 100644
index 00000000000..b7b7be8afbb
--- /dev/null
+++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="host-network-view">
+    <UiCard class="card">
+      <PifTable :pifs @row-select="selectPif" />
+    </UiCard>
+
+    <PifPanel v-if="selectedPif" :pif="selectedPif" />
+    <UiPanel v-else class="panel">
+      <VtsNoSelectionHero type="panel" />
+    </UiPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PifPanel from '@/components/pif/PifPanel.vue'
+import PifTable from '@/components/pif/PifTable.vue'
+import { usePifStore } from '@/stores/xo-rest-api/pif.store'
+import type { XoPif } from '@/types/xo/pif.type'
+import VtsNoSelectionHero from '@core/components/state-hero/VtsNoSelectionHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute<'/host/[id]/network'>()
+
+const { pifsByHost } = usePifStore().subscribe()
+const pifs = computed(() => pifsByHost.value.get(route.params.id) ?? [])
+
+const selectedPif = ref<XoPif>()
+
+const selectPif = (id: XoPif['id']) => {
+  selectedPif.value = pifs.value.find(pif => pif.id === id)
+}
+</script>
+
+<style scoped lang="postcss">
+.host-network-view {
+  display: flex;
+  height: 100%;
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+    margin: 0.8rem;
+    border: solid 0.1rem var(--color-neutral-border);
+    border-radius: 0.8rem;
+    overflow: hidden;
+  }
+
+  .panel {
+    width: 40rem;
+    border-top: none;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
index acf73b5eef9..1df34d6323e 100644
--- a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
+++ b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
@@ -41,7 +41,7 @@ export const xoApiDefinition = {
   pif: {
     type: 'collection',
     path: 'pifs',
-    fields: '$host,$network,attached,carrier,device,dns,gateway,id,ip,ipv6,mac,mode,mtu,netmask,speed',
+    fields: '$host,$network,attached,carrier,device,dns,gateway,id,ip,ipv6,mac,mode,mtu,netmask,speed,vlan',
     handler: (record: XoPif) => record,
   },
   network: {
diff --git a/@xen-orchestra/web/typed-router.d.ts b/@xen-orchestra/web/typed-router.d.ts
index e3a1a98ebf1..0abcb49c534 100644
--- a/@xen-orchestra/web/typed-router.d.ts
+++ b/@xen-orchestra/web/typed-router.d.ts
@@ -26,6 +26,7 @@ declare module 'vue-router/auto-routes' {
     '/host/[id]': RouteRecordInfo<'/host/[id]', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/host/:id': RouteRecordInfo<'/host/:id', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/host/[id]/console': RouteRecordInfo<'/host/[id]/console', '/host/:id/console', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/host/[id]/network': RouteRecordInfo<'/host/[id]/network', '/host/:id/network', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/host/[id]/vms': RouteRecordInfo<'/host/[id]/vms', '/host/:id/vms', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]': RouteRecordInfo<'/pool/[id]', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/:id': RouteRecordInfo<'/pool/:id', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,