diff --git a/@xen-orchestra/lite/src/locales/cs.json b/@xen-orchestra/lite/src/locales/cs.json
index 09884d7f1ea..63da1681446 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 2a1d941bbc4..c080172e969 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",
@@ -120,7 +119,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 8353acc18d8..4aa531d34c4 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",
@@ -97,7 +94,6 @@
   "force-reboot": "Force reboot",
   "force-shutdown": "Force shutdown",
   "fullscreen-leave": "Leave fullscreen",
-  "gateway": "Gateway",
   "n-gb-left": "{n} GB left",
   "n-gb-required": "{n} GB required",
   "go-back": "Go back",
@@ -122,7 +118,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",
@@ -184,7 +179,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 e9189bff927..124bd4f2c48 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 d2c010771e6..026f181d81a 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",
@@ -97,7 +94,6 @@
   "force-reboot": "Forcer le redémarrage",
   "force-shutdown": "Forcer l'arrêt",
   "fullscreen-leave": "Quitter plein écran",
-  "gateway": "Passerelle",
   "n-gb-left": "{n} Go libres",
   "n-gb-required": "{n} Go requis",
   "go-back": "Revenir en arrière",
@@ -122,7 +118,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",
@@ -184,7 +179,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/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
index 4035fb6f573..fc5a43dbc7a 100644
--- a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
@@ -72,6 +72,7 @@ const classNames = computed(() => [
   border-width: 0.1rem;
   outline: none;
   border-style: solid;
+  white-space: nowrap;
 
   &.lock {
     cursor: default;
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/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 03b1c8cb5d5..e2addf75657 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -88,6 +88,7 @@ const id = computed(() => uniqueId('input-'))
 /* IMPLEMENTATION */
 .ui-input {
   position: relative;
+  width: 100%;
 
   .before + .input {
     padding-inline-start: 4.8rem;
diff --git a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
index 3dfe9b4bd86..701a64fdc4e 100644
--- a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
@@ -61,6 +61,7 @@ const value = ref<string>('')
   align-items: center;
 
   .label {
+    white-space: nowrap;
     color: var(--color-neutral-txt-secondary);
   }
 }
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 00cb5a9286f..17b9a1a8395 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",
   "fullscreen": "Vollbild",
   "hosts": "Hosts",
@@ -26,6 +27,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 0fcf39c7b56..d284dc8b74d 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -43,32 +43,61 @@
   "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",
   "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",
   "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",
   "send": "Send",
   "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
+  "speed": "Speed",
   "stats": "Stats",
+  "status": "Status",
   "storage": "Storage",
   "system": "System",
 
@@ -81,7 +110,11 @@
   "tasks.quick-view.failed": "Failed",
   "tasks.quick-view.in-progress": "In progress",
 
+  "table-actions": "Table actions",
+  "tags": "Tags",
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "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 b944bad9476..141ebe91924 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}",
   "fullscreen": "تمام صفحه",
   "learn-more": "بیشتر بدانید",
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index 6a5b5f621f3..c14197738e0 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -43,32 +43,61 @@
   "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}",
   "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",
   "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",
   "send": "Envoyer",
   "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
+  "speed": "Vitesse",
   "stats": "Stats",
+  "status": "Statut",
   "storage": "Stockage",
   "system": "Système",
 
@@ -81,7 +110,11 @@
   "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",
+  "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..34ac4102174
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifPanel.vue
@@ -0,0 +1,257 @@
+<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>
+            {{ props.pif.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 :icon="faCircle" :pif="props.pif" card />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('physical-interface-status') }}
+          </template>
+          <template #value>
+            <PifStatus :icon="faCircle" :pif="props.pif" card />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('vlan') }}
+          </template>
+          <template #value>
+            {{ props.pif.vlan }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('tags') }}
+          </template>
+          <template #value>
+            <div class="tags">
+              <UiTag v-for="tag in pif.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">{{ 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>
+            {{ props.pif.netmask }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('dns') }}
+          </template>
+          <template #value>
+            {{ props.pif.dns }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('gateway') }}
+          </template>
+          <template #value>
+            {{ props.pif.gateway }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('ip-mode') }}
+          </template>
+          <template #value>
+            {{ props.pif.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(`${props.pif.nbd}`) }}
+          </template>
+          <template #addons>
+            <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
+          </template>
+        </VtsCardRowKeyValue>
+        <VtsCardRowKeyValue>
+          <template #key>
+            {{ $t('default-locking-mode') }}
+          </template>
+          <template #value>
+            {{ $t(`${props.pif.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 { usePifStore } from '@/stores/xo-rest-api/pif.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'
+
+// TODO: Replace mocked data by store and type values
+const props = defineProps<{
+  pif: object | null | undefined
+}>()
+
+const allIps = computed(() => {
+  return [props.pif.ip, ...props.pif.ipv6].filter(ip => ip)
+})
+</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..213417dfe4b
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifStatus.vue
@@ -0,0 +1,47 @@
+<template>
+  <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
+    <p class="text-ellipsis">{{ getStatusProps(status).text }}</p>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+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">
+.pif-status p {
+  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..f3e090c14e0
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifTable.vue
@@ -0,0 +1,261 @@
+<template>
+  <div 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>
+            <th v-for="column of visibleColumns" :key="column.id" :class="`col-${column.id}`">
+              <div v-if="column.id === 'checkbox'" class="checkbox">
+                <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+              </div>
+
+              <div v-else id="network" v-tooltip class="text-ellipsis">
+                <VtsIcon accent="info" :icon="getHeaderIcon(column.id)" />
+                {{ column.label }}
+              </div>
+            </th>
+          </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'" 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">{{ row.value.name_label }}</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 :pif="row.value" />
+              </div>
+              <div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">{{ 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">{{ 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 VtsIcon from '@core/components/icon/VtsIcon.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 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: object[]
+}>()
+
+const emit = defineEmits<{
+  rowSelect: [value: string]
+}>()
+
+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', { label: 'Network', isHideable: true }),
+    define('device', { label: 'Device', isHideable: true }),
+    define('status', { label: 'Status', isHideable: true }),
+    define('vlan', { label: 'Vlan', isHideable: true }),
+    define('ip', { label: 'IP Addresses', isHideable: true }),
+    define('mac', { label: 'MAC address', isHideable: true }),
+    define('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) => headerIcon[status].icon
+
+const selectedRowId = ref('')
+
+const selectRow = (rowId: string) => {
+  selectedRowId.value = rowId
+  emit('rowSelect', rowId)
+}
+</script>
+
+<style scoped lang="postcss">
+.pif-table {
+  height: fit-content;
+  padding: 1.6rem;
+  margin: 0.8rem;
+  border: solid 0.1rem var(--color-neutral-border);
+  border-radius: 0.8rem;
+  background-color: var(--color-neutral-background-primary);
+  overflow-x: hidden;
+
+  .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,
+      .col-vlan {
+        width: 4.5rem;
+      }
+
+      .col-network,
+      .col-status,
+      .col-ip,
+      .col-mac {
+        width: 17rem;
+      }
+
+      .col-device,
+      .col-mode {
+        width: 9.5rem;
+      }
+    }
+
+    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;
+    }
+  }
+
+  @media (max-width: 1500px) {
+    .table-container {
+      .table {
+        width: 160rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/fakeGetNetwork.ts b/@xen-orchestra/web/src/fakeGetNetwork.ts
new file mode 100644
index 00000000000..8e03acb28b3
--- /dev/null
+++ b/@xen-orchestra/web/src/fakeGetNetwork.ts
@@ -0,0 +1,8 @@
+export const getNetwork = {
+  id: 'd9424d50-def7-9882-64d3-4f305c87fb7a',
+  name_label: 'Production Management (Only For Olivier)',
+  nbd: false,
+  tags: ['Prod', 'Delete', 'QA'],
+  href: '/rest/v0/networks/d9424d50-def7-9882-64d3-4f305c87fb7a',
+  defaultIsLocked: false,
+}
diff --git a/@xen-orchestra/web/src/fakePifStore.ts b/@xen-orchestra/web/src/fakePifStore.ts
new file mode 100644
index 00000000000..5be3467f4bc
--- /dev/null
+++ b/@xen-orchestra/web/src/fakePifStore.ts
@@ -0,0 +1,618 @@
+export const pifsByHost = new Map([
+  [
+    'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+    [
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: 'd9424d50-def7-9882-64d3-4f305c87fb7a',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'ab28cb66-a66d-a7a5-3d45-f0a463177a6f',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/ab28cb66-a66d-a7a5-3d45-f0a463177a6f',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '6c4e1cdc-9fe0-0603-e53d-4790d1fce8dd',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '172.16.210.1',
+        gateway: '172.16.210.1',
+        id: '10311e10-9ff1-2054-eacd-28091af06e27',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.254.0',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/10311e10-9ff1-2054-eacd-28091af06e27',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '56694dbf-af1e-16c1-a889-d083ffb39b8c',
+        attached: true,
+        carrier: true,
+        device: 'tunnel0',
+        dns: '',
+        gateway: '',
+        id: '94961949-a233-4dd6-9795-44658d5858ca',
+        ipv6: [''],
+        mac: '52:b7:42:4e:f8:fc',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/94961949-a233-4dd6-9795-44658d5858ca',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '0728b52e-c5f0-e212-50c9-9bfef9d10a31',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'c583946a-4437-831b-01a9-0daee89af1ff',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/c583946a-4437-831b-01a9-0daee89af1ff',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '4ed73661-3574-f788-33ac-77113780280d',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'd2fbe749-f3a2-5662-a429-33e6aa72907f',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/d2fbe749-f3a2-5662-a429-33e6aa72907f',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '41260326-d783-f850-f16f-ac55d6b03cf0',
+        attached: true,
+        carrier: false,
+        device: 'eth3',
+        dns: '',
+        gateway: '',
+        id: 'c08f4687-d6b2-44f6-beaa-42c989c49f22',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:5b:ad',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        vlan: -1,
+        href: '/rest/v0/pifs/c08f4687-d6b2-44f6-beaa-42c989c49f22',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '54dcb8d8-0af0-7739-61c5-144875958b1e',
+        attached: true,
+        carrier: false,
+        device: 'eth1',
+        dns: '',
+        gateway: '',
+        id: '6130f280-aee0-8a3e-0492-3955391c35d9',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:5b:aa',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        vlan: -1,
+        href: '/rest/v0/pifs/6130f280-aee0-8a3e-0492-3955391c35d9',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '17fa6689-eb1a-77f1-0514-2d017004355a',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: 'ed842e87-bdb5-3249-3335-fc838c2f5605',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.255.0',
+        speed: 10000,
+        vlan: -1,
+        href: '/rest/v0/pifs/ed842e87-bdb5-3249-3335-fc838c2f5605',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '2de2e773-8fbb-83cc-da96-214574c1b0e1',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '73cf0263-1d9a-9ea2-4160-2e2cf6583fb5',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:5b:ac',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/73cf0263-1d9a-9ea2-4160-2e2cf6583fb5',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: '289ebdac-855a-4b49-46ce-02a4f12ff698',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'acf23945-b4d8-7d59-8c41-9954421f112d',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/acf23945-b4d8-7d59-8c41-9954421f112d',
+      },
+      {
+        $host: 'c7f1c0a6-f8b3-4375-987f-1728d0bfed67',
+        $network: 'a12df741-f34f-7d05-f120-462f0ab39a48',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: '8bea7345-773b-6289-0f5f-8b5bd61b2ca1',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:5b:a8',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 10000,
+        vlan: -1,
+        href: '/rest/v0/pifs/8bea7345-773b-6289-0f5f-8b5bd61b2ca1',
+      },
+    ],
+  ],
+  [
+    '438aca0f-429c-4ae6-accc-93c306e636a0',
+    [
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '4ed73661-3574-f788-33ac-77113780280d',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'ef35ddd4-adaf-0585-fc43-3be1dfa4074e',
+        ipv6: [
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+          '2001:0db8:0000:85a3:0000:0000:ac1f:8001',
+        ],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/ef35ddd4-adaf-0585-fc43-3be1dfa4074e',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '56694dbf-af1e-16c1-a889-d083ffb39b8c',
+        attached: true,
+        carrier: true,
+        device: 'tunnel0',
+        dns: '',
+        gateway: '',
+        id: '43a2cf42-d9fb-9382-b7df-8eb5f38ed03c',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: '6a:bd:52:81:0c:d4',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/43a2cf42-d9fb-9382-b7df-8eb5f38ed03c',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '54dcb8d8-0af0-7739-61c5-144875958b1e',
+        attached: true,
+        carrier: false,
+        device: 'eth1',
+        dns: '',
+        gateway: '',
+        id: 'ef56fe22-d03f-2461-d7fa-4f48d4d43601',
+        ipv6: [],
+        ip: '192.168.0.1',
+        mac: 'b8:ca:3a:6c:1c:4a',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        vlan: -1,
+        href: '/rest/v0/pifs/ef56fe22-d03f-2461-d7fa-4f48d4d43601',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '2de2e773-8fbb-83cc-da96-214574c1b0e1',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '7b71bca9-43c8-9b4a-2df5-eb714c93edef',
+        ipv6: [],
+        ip: '192.168.0.1',
+        mac: 'b8:ca:3a:6c:1c:4c',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/7b71bca9-43c8-9b4a-2df5-eb714c93edef',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '0728b52e-c5f0-e212-50c9-9bfef9d10a31',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'a8f8affd-f44d-ac9c-74ac-38c155d06bf0',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/a8f8affd-f44d-ac9c-74ac-38c155d06bf0',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: 'a12df741-f34f-7d05-f120-462f0ab39a48',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: '9dbe77b1-2e3f-5c11-a196-07c54680953b',
+        ipv6: [],
+        ip: '192.168.0.1',
+        mac: 'b8:ca:3a:6c:1c:48',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 10000,
+        vlan: -1,
+        href: '/rest/v0/pifs/9dbe77b1-2e3f-5c11-a196-07c54680953b',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '17fa6689-eb1a-77f1-0514-2d017004355a',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: '7fbb1487-01d6-6868-0e10-26d73e31e662',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.255.0',
+        speed: 10000,
+        vlan: -1,
+        href: '/rest/v0/pifs/7fbb1487-01d6-6868-0e10-26d73e31e662',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: 'd9424d50-def7-9882-64d3-4f305c87fb7a',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'eb600b74-76eb-204e-09ce-1130fbc4f973',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/eb600b74-76eb-204e-09ce-1130fbc4f973',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '41260326-d783-f850-f16f-ac55d6b03cf0',
+        attached: true,
+        carrier: false,
+        device: 'eth3',
+        dns: '',
+        gateway: '',
+        id: '2e435391-472d-d42d-b7aa-7aa4c2988d04',
+        ipv6: [],
+        ip: '192.168.0.1',
+        mac: 'b8:ca:3a:6c:1c:4d',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        vlan: -1,
+        href: '/rest/v0/pifs/2e435391-472d-d42d-b7aa-7aa4c2988d04',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '289ebdac-855a-4b49-46ce-02a4f12ff698',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '36819d47-c0cc-7da2-ee5a-5318524700f6',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/36819d47-c0cc-7da2-ee5a-5318524700f6',
+      },
+      {
+        $host: '438aca0f-429c-4ae6-accc-93c306e636a0',
+        $network: '6c4e1cdc-9fe0-0603-e53d-4790d1fce8dd',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '172.16.210.1',
+        gateway: '172.16.210.1',
+        id: 'e34b2a47-c2c7-8a41-7ace-a3cb1248098f',
+        ipv6: [''],
+        ip: '192.168.0.1',
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.254.0',
+        speed: 1000,
+        vlan: -1,
+        href: '/rest/v0/pifs/e34b2a47-c2c7-8a41-7ace-a3cb1248098f',
+      },
+    ],
+  ],
+  [
+    'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+    [
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '56694dbf-af1e-16c1-a889-d083ffb39b8c',
+        attached: true,
+        carrier: false,
+        device: 'tunnel0',
+        dns: '',
+        gateway: '',
+        id: '147e08e5-42f0-01fc-1f15-6616269264f5',
+        ipv6: [''],
+        mac: 'b2:94:f5:9b:11:6f',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        href: '/rest/v0/pifs/147e08e5-42f0-01fc-1f15-6616269264f5',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '17fa6689-eb1a-77f1-0514-2d017004355a',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: 'f2cc47af-6d65-7eee-84bd-920067d828f4',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.255.0',
+        speed: 10000,
+        href: '/rest/v0/pifs/f2cc47af-6d65-7eee-84bd-920067d828f4',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '6c4e1cdc-9fe0-0603-e53d-4790d1fce8dd',
+        attached: true,
+        carrier: false,
+        device: 'eth2',
+        dns: '172.16.210.1',
+        gateway: '172.16.210.1',
+        id: 'b0e4b993-daea-bd53-34c5-7c1159a9109c',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'Static',
+        mtu: 1500,
+        netmask: '255.255.254.0',
+        speed: 0,
+        href: '/rest/v0/pifs/b0e4b993-daea-bd53-34c5-7c1159a9109c',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '2de2e773-8fbb-83cc-da96-214574c1b0e1',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '3e30fb8f-ef4a-8db8-c9b8-51a5002bfebf',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:11:84',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        href: '/rest/v0/pifs/3e30fb8f-ef4a-8db8-c9b8-51a5002bfebf',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '0728b52e-c5f0-e212-50c9-9bfef9d10a31',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '2ed51e44-6499-5229-eeec-8ffccbf70d61',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        href: '/rest/v0/pifs/2ed51e44-6499-5229-eeec-8ffccbf70d61',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '4ed73661-3574-f788-33ac-77113780280d',
+        attached: true,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '2c676954-f4ea-1abc-1b00-9b041e7bd6a5',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        href: '/rest/v0/pifs/2c676954-f4ea-1abc-1b00-9b041e7bd6a5',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: 'd9424d50-def7-9882-64d3-4f305c87fb7a',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: '99045e6a-2d73-58cb-9018-76fea6b016d3',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        href: '/rest/v0/pifs/99045e6a-2d73-58cb-9018-76fea6b016d3',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '41260326-d783-f850-f16f-ac55d6b03cf0',
+        attached: true,
+        carrier: false,
+        device: 'eth3',
+        dns: '',
+        gateway: '',
+        id: 'cbd0ba1a-1bd1-ea57-e921-436030fc907e',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:11:85',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        href: '/rest/v0/pifs/cbd0ba1a-1bd1-ea57-e921-436030fc907e',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: 'a12df741-f34f-7d05-f120-462f0ab39a48',
+        attached: true,
+        carrier: true,
+        device: 'eth0',
+        dns: '',
+        gateway: '',
+        id: '7c89e2f2-ec3c-2af9-31e2-d329fc133c50',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:11:80',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 10000,
+        href: '/rest/v0/pifs/7c89e2f2-ec3c-2af9-31e2-d329fc133c50',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '289ebdac-855a-4b49-46ce-02a4f12ff698',
+        attached: false,
+        carrier: true,
+        device: 'eth2',
+        dns: '',
+        gateway: '',
+        id: 'b66c5a85-c050-2830-7344-4175f6495c64',
+        ipv6: [''],
+        mac: 'fe:ff:ff:ff:ff:ff',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 1000,
+        href: '/rest/v0/pifs/b66c5a85-c050-2830-7344-4175f6495c64',
+      },
+      {
+        $host: 'f26eb0a5-1d91-4682-ae58-96df405a3af6',
+        $network: '54dcb8d8-0af0-7739-61c5-144875958b1e',
+        attached: true,
+        carrier: false,
+        device: 'eth1',
+        dns: '',
+        gateway: '',
+        id: 'd313973a-ac54-a559-a6ab-587f6eec460d',
+        ipv6: [],
+        mac: 'b8:ca:3a:6c:11:82',
+        mode: 'None',
+        mtu: 1500,
+        netmask: '',
+        speed: 0,
+        href: '/rest/v0/pifs/d313973a-ac54-a559-a6ab-587f6eec460d',
+      },
+    ],
+  ],
+])
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..0d4af0765f3
--- /dev/null
+++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="host-network-view">
+    <PifTable :pifs="pifsWthNetworkInfo" @row-select="selectPif" />
+    <PifPanel v-if="selectedPif" :pif="selectedPif" />
+    <UiPanel v-else class="panel">
+      <VtsNoDataHero type="panel" />
+    </UiPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PifPanel from '@/components/pif/PifPanel.vue'
+import PifTable from '@/components/pif/PifTable.vue'
+import { getNetwork } from '@/fakeGetNetwork'
+import { pifsByHost } from '@/fakePifStore'
+import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue'
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
+import { computed, ref } from 'vue'
+
+const pifs = computed(() => pifsByHost.get('438aca0f-429c-4ae6-accc-93c306e636a0') ?? [])
+const network = ref(getNetwork)
+
+const selectedPif = ref<object | null>()
+
+const pifsWthNetworkInfo = computed(() =>
+  pifs.value.map(pif => ({
+    ...pif,
+    networkID: network.value.id,
+    name_label: network.value.name_label,
+    nbd: network.value.nbd ? 'on' : 'off',
+    tags: network.value.tags,
+    defaultIsLocked: network.value.defaultIsLocked ? 'on' : 'off',
+  }))
+)
+
+const selectPif = (id: string) => {
+  selectedPif.value = pifsWthNetworkInfo.value.find(pif => pif.id === id)
+}
+</script>
+
+<style scoped lang="postcss">
+.host-network-view {
+  display: flex;
+  height: 100%;
+
+  .panel {
+    width: 40rem;
+    border-top: none;
+  }
+}
+</style>
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> }>,