diff --git a/frontend/app/components/ComponentHierarchy.vue b/frontend/app/components/ComponentHierarchy.vue
index f1c5a87..5f89d0b 100644
--- a/frontend/app/components/ComponentHierarchy.vue
+++ b/frontend/app/components/ComponentHierarchy.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="space-y-4">
+  <div class="space-y-3">
     <!-- Root Components -->
-    <div v-for="component in components" :key="component.id" class="border border-gray-200 rounded-lg p-4">
+    <div v-for="component in components" :key="component.id">
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"
diff --git a/frontend/app/components/ComponentItem.vue b/frontend/app/components/ComponentItem.vue
index 9fbba4b..16cfc0f 100644
--- a/frontend/app/components/ComponentItem.vue
+++ b/frontend/app/components/ComponentItem.vue
@@ -13,29 +13,42 @@
       @updated="handleDocumentUpdated"
     />
 
-    <!-- Component Header -->
+    <!-- ═══ HEADER BAR ═══ -->
     <div
-      class="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-shadow"
+      class="group/header flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer select-none transition-all duration-200"
       :class="[
-        component.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200',
-        !isCollapsed ? 'sticky top-16 z-10 shadow-sm' : '',
+        component.pendingEntity
+          ? 'bg-error/10 border border-error/40 hover:border-error/60'
+          : 'bg-base-200/70 border border-base-300/30 hover:border-base-300/60 hover:bg-base-200',
+        !isCollapsed ? 'sticky top-16 z-10 shadow-md ring-1 ring-base-300/20' : 'shadow-sm',
       ]"
       @click="toggleCollapse"
     >
-      <IconLucideChevronRight
-        class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
-        :class="{ 'rotate-90': !isCollapsed }"
-        aria-hidden="true"
-      />
-      <div class="flex-1 min-w-0">
+      <!-- Chevron -->
+      <div
+        class="w-6 h-6 rounded-md grid place-items-center shrink-0 transition-all duration-200"
+        :class="isCollapsed ? 'bg-base-300/40' : 'bg-primary/15'"
+      >
+        <IconLucideChevronRight
+          class="w-3.5 h-3.5 transition-transform duration-200"
+          :class="[
+            isCollapsed ? 'text-base-content/40' : 'rotate-90 text-primary',
+          ]"
+          aria-hidden="true"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 space-y-1.5">
+        <!-- Row 1: Name + identifiers -->
         <div class="flex items-center gap-2 flex-wrap">
-          <h3 class="text-sm font-semibold truncate" :class="component.pendingEntity ? 'text-error' : 'text-base-content'">
+          <h3 class="text-sm font-bold tracking-tight truncate" :class="component.pendingEntity ? 'text-error' : 'text-base-content'">
             <NuxtLink
               v-if="!isEditMode && !component.pendingEntity && component.composantId"
               :to="machineId
                 ? { path: `/component/${component.composantId}`, query: { from: 'machine', machineId } }
                 : `/component/${component.composantId}`"
-              class="hover:underline hover:text-primary transition-colors"
+              class="hover:text-primary transition-colors"
               @click.stop
             >
               {{ component.name }}
@@ -51,232 +64,282 @@
           >
             À remplir
           </button>
-          <span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
-          <span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
+          <span v-if="component.reference" class="text-[0.65rem] font-mono text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">{{ component.reference }}</span>
+          <span v-if="component.referenceAuto" class="text-[0.65rem] font-mono font-semibold text-secondary bg-secondary/20 px-1.5 py-0.5 rounded border border-secondary/30" title="Référence auto">{{ component.referenceAuto }}</span>
+          <span v-if="component.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ component.prix }}€</span>
         </div>
-        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
+
+        <!-- Row 2: Metadata tags -->
+        <div
+          v-if="componentConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          class="flex flex-wrap items-center gap-1.5"
+        >
           <span
             v-for="constructeur in componentConstructeursDisplay"
             :key="constructeur.id"
-            class="text-xs text-base-content/50"
+            class="text-[0.65rem] text-base-content/45"
           >
             {{ constructeur.name }}
-            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-70">({{ supplierReferenceMap.get(constructeur.id) }})</span>
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-60">({{ supplierReferenceMap.get(constructeur.id) }})</span>
           </span>
-          <span v-if="displayProductName" class="badge badge-info badge-xs">
+          <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
             {{ displayProductName }}
           </span>
+          <!-- Context field tags (consultation only) -->
+          <template v-if="!isEditMode">
+            <span
+              v-for="field in visibleContextFieldTags"
+              :key="field.name"
+              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
+              :class="contextFieldBadgeClass(field)"
+            >
+              {{ field.name }} : {{ field.value }}
+            </span>
+          </template>
         </div>
       </div>
+
+      <!-- Delete button -->
       <button
         v-if="showDelete"
         type="button"
-        class="btn btn-ghost btn-xs text-error shrink-0"
+        class="btn btn-ghost btn-xs btn-circle text-error opacity-0 group-hover/header:opacity-100 transition-opacity shrink-0"
         title="Supprimer ce composant"
         @click.stop="$emit('delete')"
       >
-        Supprimer
+        <IconLucideTrash2 class="w-3.5 h-3.5" aria-hidden="true" />
       </button>
     </div>
 
-    <!-- Expanded content -->
-    <div v-show="!isCollapsed && !component.pendingEntity" class="mt-3 space-y-4 pl-7">
-      <!-- Info fields -->
-      <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
-          <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+    <!-- ═══ EXPANDED PANEL ═══ -->
+    <div v-show="!isCollapsed && !component.pendingEntity" class="ml-[1.125rem] border-l-2 border-primary/30 pl-5 pt-3 pb-1 space-y-3">
+
+      <!-- ── Section: Informations ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Informations</p>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
-          <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Nom</span></label>
+              <input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Référence</span></label>
+              <input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Prix</span></label>
+              <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Fournisseur</span></label>
+              <ConstructeurSelect
+                class="w-full"
+                :model-value="componentConstructeurIds"
+                :initial-options="componentConstructeursDisplay"
+                @update:model-value="handleConstructeurChange"
+              />
+            </div>
+          </div>
+          <!-- Read-only mode -->
+          <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Nom</p>
+              <p class="text-sm text-base-content font-medium">{{ component.name }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Référence</p>
+              <p class="text-sm text-base-content" :class="component.reference ? 'font-mono' : 'text-base-content/30'">{{ component.reference || '—' }}</p>
+            </div>
+            <div v-if="component.referenceAuto">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Réf. auto</p>
+              <p class="text-sm text-base-content font-mono">{{ component.referenceAuto }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Prix</p>
+              <p class="text-sm" :class="component.prix ? 'text-base-content font-semibold' : 'text-base-content/30'">{{ component.prix ? `${component.prix} €` : '—' }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Fournisseur</p>
+              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
+                <p
+                  v-for="constructeur in componentConstructeursDisplay"
+                  :key="constructeur.id"
+                  class="text-sm text-base-content"
+                >
+                  {{ constructeur.name }}
+                  <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs text-base-content/50">
+                    — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                  </span>
+                  <span v-if="formatConstructeurContact(constructeur)" class="text-[0.65rem] text-base-content/40 block">
+                    {{ formatConstructeurContact(constructeur) }}
+                  </span>
+                </p>
+              </div>
+              <p v-else class="text-sm text-base-content/30">—</p>
+            </div>
+          </div>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
-          <input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
+      </div>
+
+      <!-- ── Section: Produit catalogue ── -->
+      <div v-if="displayProduct" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-info/10 border-b border-info/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-info">Produit catalogue</p>
         </div>
-        <div class="form-control">
-          <label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
-          <ConstructeurSelect
-            class="w-full"
-            :model-value="componentConstructeurIds"
-            :initial-options="componentConstructeursDisplay"
-            @update:model-value="handleConstructeurChange"
+        <div class="p-4">
+          <div class="flex items-start justify-between gap-3">
+            <div class="space-y-1.5">
+              <p class="text-sm font-bold text-base-content">{{ displayProductName }}</p>
+              <div class="flex flex-wrap gap-x-4 gap-y-1">
+                <p
+                  v-for="info in productInfoRows"
+                  :key="info.label"
+                  class="text-xs text-base-content/55"
+                >
+                  <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                </p>
+              </div>
+            </div>
+            <NuxtLink
+              v-if="component.product?.id"
+              :to="`/product/${component.product.id}`"
+              class="btn btn-ghost btn-xs shrink-0 gap-1"
+            >
+              <IconLucideExternalLink class="w-3 h-3" aria-hidden="true" />
+              Voir
+            </NuxtLink>
+          </div>
+          <!-- Product documents -->
+          <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200/50 space-y-2">
+            <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/35">Documents du produit</p>
+            <div
+              v-for="document in productDocuments"
+              :key="document.id || document.path || document.name"
+              class="flex items-center justify-between gap-3 text-xs"
+            >
+              <div class="flex items-center gap-2 min-w-0">
+                <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
+                  <img
+                    v-if="isImageDocument(document) && (document.fileUrl || document.path)"
+                    :src="document.fileUrl || document.path"
+                    class="h-full w-full object-cover"
+                    :alt="`Aperçu de ${document.name}`"
+                  >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
+                  <component
+                    v-else
+                    :is="documentIcon(document).component"
+                    class="h-4 w-4"
+                    :class="documentIcon(document).colorClass"
+                    aria-hidden="true"
+                  />
+                </div>
+                <span class="truncate text-base-content">{{ document.name }}</span>
+              </div>
+              <div class="flex items-center gap-1 shrink-0">
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs"
+                  :disabled="!canPreviewDocument(document)"
+                  @click="openPreview(document)"
+                >
+                  Consulter
+                </button>
+                <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                  Télécharger
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Section: Champs personnalisés ── -->
+      <div v-if="displayedCustomFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Champs personnalisés item</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="displayedCustomFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="false"
+            @field-blur="updateComponentCustomField"
           />
         </div>
       </div>
 
-      <!-- Read-only info -->
-      <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Nom</p>
-          <p class="text-base-content">{{ component.name }}</p>
+      <div v-if="mergedContextFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-secondary/10 border-b border-secondary/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-secondary">Champs personnalisés machine</p>
         </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Référence</p>
-          <p class="text-base-content">{{ component.reference || '—' }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Prix</p>
-          <p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
-          <div v-if="componentConstructeursDisplay.length">
-            <p
-              v-for="constructeur in componentConstructeursDisplay"
-              :key="constructeur.id"
-              class="text-base-content"
-            >
-              {{ constructeur.name }}
-              <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm text-base-content/60">
-                — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
-              </span>
-              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
-                {{ formatConstructeurContact(constructeur) }}
-              </span>
-            </p>
-          </div>
-          <p v-else class="text-base-content">—</p>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="mergedContextFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="true"
+            :emit-blur="false"
+            @field-input="queueContextCustomFieldUpdate"
+          />
         </div>
       </div>
 
-      <!-- Product -->
-      <div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
-        <div class="flex items-start justify-between gap-3">
-          <div class="space-y-1">
-            <p class="text-xs text-base-content/40">Produit catalogue</p>
-            <p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="text-xs text-base-content/60"
-            >
-              {{ info.label }} : {{ info.value }}
-            </p>
-          </div>
-          <NuxtLink
-            v-if="component.product?.id"
-            :to="`/product/${component.product.id}`"
-            class="btn btn-ghost btn-xs shrink-0"
-          >
-            Voir le produit
-          </NuxtLink>
-        </div>
-        <!-- Product documents -->
-        <div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
-          <p class="text-xs font-medium text-base-content/50">Documents du produit</p>
-          <div
-            v-for="document in productDocuments"
-            :key="document.id || document.path || document.name"
-            class="flex items-center justify-between gap-3 text-xs"
-          >
-            <div class="flex items-center gap-2 min-w-0">
-              <div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
-                <img
-                  v-if="isImageDocument(document) && (document.fileUrl || document.path)"
-                  :src="document.fileUrl || document.path"
-                  class="h-full w-full object-cover"
-                  :alt="`Aperçu de ${document.name}`"
-                >
-                <iframe
-                  v-else-if="shouldInlinePdf(document)"
-                  :src="documentPreviewSrc(document)"
-                  class="h-full w-full border-0 bg-white"
-                  title="Aperçu PDF"
-                />
-                <component
-                  v-else
-                  :is="documentIcon(document).component"
-                  class="h-4 w-4"
-                  :class="documentIcon(document).colorClass"
-                  aria-hidden="true"
-                />
-              </div>
-              <span class="truncate text-base-content">{{ document.name }}</span>
-            </div>
-            <div class="flex items-center gap-1 shrink-0">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs"
-                :disabled="!canPreviewDocument(document)"
-                @click="openPreview(document)"
-              >
-                Consulter
-              </button>
-              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                Télécharger
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Custom Fields -->
-      <CustomFieldDisplay
-        :fields="displayedCustomFields"
-        :is-edit-mode="isEditMode"
-        :columns="2"
-        title="Champs personnalisés item"
-        :editable="false"
-        @field-blur="updateComponentCustomField"
-      />
-
-      <template v-if="mergedContextFields.length">
-        <div class="divider my-4 text-xs text-base-content/50">
-          Champs personnalisés machine
-        </div>
-        <CustomFieldDisplay
-          :fields="mergedContextFields"
-          :is-edit-mode="isEditMode"
-          :columns="2"
-          :show-header="false"
-          :with-top-border="false"
-          :editable="true"
-          :emit-blur="false"
-          @field-input="queueContextCustomFieldUpdate"
-        />
-      </template>
-
-      <!-- Documents -->
-      <div class="space-y-2">
-        <div class="flex items-center justify-between">
-          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
+      <!-- ── Section: Documents ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50 flex items-center justify-between">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Documents</p>
           <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
             {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
           </span>
         </div>
+        <div class="p-4 space-y-3">
+          <p v-if="loadingDocuments" class="text-xs text-base-content/50">Chargement...</p>
 
-        <p v-if="loadingDocuments" class="text-xs text-base-content/50">
-          Chargement...
-        </p>
+          <DocumentUpload
+            v-if="isEditMode"
+            v-model="selectedFiles"
+            title="Déposer des fichiers pour ce composant"
+            subtitle="Formats acceptés : PDF, images, documents..."
+            @files-added="handleFilesAdded"
+          />
 
-        <DocumentUpload
-          v-if="isEditMode"
-          v-model="selectedFiles"
-          title="Déposer des fichiers pour ce composant"
-          subtitle="Formats acceptés : PDF, images, documents..."
-          @files-added="handleFilesAdded"
-        />
-
-        <DocumentListInline
-          :documents="componentDocuments"
-          :can-delete="isEditMode"
-          :can-edit="isEditMode"
-          :delete-disabled="uploadingDocuments"
-          empty-text="Aucun document lié à ce composant."
-          @preview="openPreview"
-          @edit="openEditModal"
-          @delete="removeDocument"
-        />
+          <DocumentListInline
+            :documents="componentDocuments"
+            :can-delete="isEditMode"
+            :can-edit="isEditMode"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document lié à ce composant."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
       </div>
 
-      <!-- Component Pieces (real MachinePieceLinks) -->
-      <div v-if="linkedPieces.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Pièces du composant
-        </p>
-        <div class="space-y-2">
+      <!-- ── Section: Pièces du composant ── -->
+      <div v-if="linkedPieces.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Pièces du composant
+            <span class="ml-1 text-base-content/25">({{ linkedPieces.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <PieceItem
             v-for="piece in linkedPieces"
             :key="piece.id"
@@ -290,12 +353,15 @@
         </div>
       </div>
 
-      <!-- Structure pieces (read-only, from composant definition) -->
-      <div v-if="structurePieces.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Pièces incluses par défaut
-        </p>
-        <div class="space-y-2">
+      <!-- ── Section: Pièces structure ── -->
+      <div v-if="structurePieces.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Pièces incluses par défaut
+            <span class="ml-1 text-base-content/25">({{ structurePieces.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <PieceItem
             v-for="piece in structurePieces"
             :key="piece.id"
@@ -305,12 +371,15 @@
         </div>
       </div>
 
-      <!-- Sub Components -->
-      <div v-if="childComponents.length > 0" class="space-y-2">
-        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
-          Sous-composants
-        </p>
-        <div class="space-y-2 pl-4 border-l-2 border-base-200">
+      <!-- ── Section: Sous-composants ── -->
+      <div v-if="childComponents.length > 0" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">
+            Sous-composants
+            <span class="ml-1 text-base-content/25">({{ childComponents.length }})</span>
+          </p>
+        </div>
+        <div class="p-3 space-y-2">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -336,6 +405,8 @@ import DocumentUpload from './DocumentUpload.vue'
 import ConstructeurSelect from './ConstructeurSelect.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucideExternalLink from '~icons/lucide/external-link'
 import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import {
@@ -461,6 +532,24 @@ const mergedContextFields = computed(() => {
   return mergeDefinitionsWithValues(definitions, values)
 })
 
+// Context fields shown as tags on the header (consultation mode)
+const visibleContextFieldTags = computed(() =>
+  mergedContextFields.value.filter(f => f.value !== null && f.value !== undefined && String(f.value).trim() !== ''),
+)
+
+const CONTEXT_FIELD_COLORS = [
+  'bg-secondary/25 text-secondary border border-secondary/35',
+  'bg-accent/25 text-accent border border-accent/35',
+  'bg-info/25 text-info border border-info/35',
+  'bg-success/25 text-success border border-success/35',
+  'bg-warning/25 text-warning border border-warning/35',
+]
+
+const contextFieldBadgeClass = (field: any) => {
+  const idx = visibleContextFieldTags.value.indexOf(field)
+  return CONTEXT_FIELD_COLORS[idx % CONTEXT_FIELD_COLORS.length]
+}
+
 const queueContextCustomFieldUpdate = (field, value) => {
   const linkId = props.component?.linkId
   if (!linkId || !field) return
diff --git a/frontend/app/components/PieceItem.vue b/frontend/app/components/PieceItem.vue
index 9dd391f..71c9ea6 100644
--- a/frontend/app/components/PieceItem.vue
+++ b/frontend/app/components/PieceItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -13,303 +13,333 @@
       @updated="handleDocumentUpdated"
     />
 
-    <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
-    <div class="flex items-start justify-between p-4 rounded-lg" :class="piece._emptySlot || piece.pendingEntity ? 'bg-error/10 border border-error' : 'bg-base-200'">
-      <div class="flex items-start gap-3 flex-1 min-w-0">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle shrink-0 transition-transform"
-          :class="{ 'rotate-90': !isCollapsed }"
-          :aria-expanded="!isCollapsed"
-          :title="isCollapsed ? 'Déplier les détails de la pièce' : 'Replier les détails de la pièce'"
-          @click="toggleCollapse"
-        >
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
-        </button>
-        <div class="flex-1 min-w-0">
-          <h3 class="text-lg font-semibold" :class="{ 'text-error': piece._emptySlot || piece.pendingEntity }">
+    <!-- ═══ HEADER BAR ═══ -->
+    <div
+      class="group/header flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer select-none transition-all duration-200"
+      :class="[
+        piece._emptySlot || piece.pendingEntity
+          ? 'bg-error/10 border border-error/40 hover:border-error/60'
+          : 'bg-base-200/70 border border-base-300/30 hover:border-base-300/60 hover:bg-base-200',
+        !isCollapsed ? 'shadow-md ring-1 ring-base-300/20' : 'shadow-sm',
+      ]"
+      @click="toggleCollapse"
+    >
+      <!-- Chevron -->
+      <div
+        class="w-6 h-6 rounded-md grid place-items-center shrink-0 transition-all duration-200"
+        :class="isCollapsed ? 'bg-base-300/40' : 'bg-primary/15'"
+      >
+        <IconLucideChevronRight
+          class="w-3.5 h-3.5 transition-transform duration-200"
+          :class="[
+            isCollapsed ? 'text-base-content/40' : 'rotate-90 text-primary',
+          ]"
+          aria-hidden="true"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 space-y-1.5">
+        <!-- Row 1: Name + identifiers -->
+        <div class="flex items-center gap-2 flex-wrap">
+          <h3 class="text-sm font-bold tracking-tight truncate" :class="{ 'text-error': piece._emptySlot || piece.pendingEntity }">
             <NuxtLink
               v-if="!isEditMode && !piece.pendingEntity && !piece._emptySlot && piece.pieceId"
               :to="machineId
                 ? { path: `/piece/${piece.pieceId}`, query: { from: 'machine', machineId } }
                 : `/piece/${piece.pieceId}`"
-              class="hover:underline hover:text-primary transition-colors"
+              class="hover:text-primary transition-colors"
               @click.stop
             >
               {{ pieceData.name }}
             </NuxtLink>
             <template v-else>{{ pieceData.name }}</template>
-            <span v-if="piece._emptySlot" class="text-sm font-semibold text-error ml-1">— manquant</span>
-            <button
-              v-if="piece.pendingEntity"
-              type="button"
-              class="badge badge-error badge-sm cursor-pointer hover:badge-outline transition-colors ml-1"
-              title="Cliquer pour associer un item"
-              @click.stop="$emit('fill-entity', piece.linkId, piece.modelTypeId)"
-            >
-              À remplir
-            </button>
-            <span
-              v-if="displayQuantity > 1"
-              class="text-sm font-normal text-base-content/60 ml-1"
-            >
-              ×{{ displayQuantity }}
-            </span>
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
-            <span v-if="piece.parentComponentName" class="badge badge-ghost badge-sm">
-              Rattachée à {{ piece.parentComponentName }}
-            </span>
-            <span v-if="pieceData.reference" class="badge badge-outline badge-sm">{{ pieceData.reference }}</span>
-            <span v-if="pieceData.referenceAuto" class="badge badge-secondary badge-sm" title="Référence auto">{{ pieceData.referenceAuto }}</span>
-            <template v-if="pieceConstructeursDisplay.length">
-              <span
-                v-for="constructeur in pieceConstructeursDisplay"
-                :key="constructeur.id"
-                class="badge badge-outline badge-sm"
-              >
-                {{ constructeur.name }}
-                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs opacity-60 ml-0.5">
-                  ({{ supplierReferenceMap.get(constructeur.id) }})
-                </span>
-              </span>
-            </template>
-            <span v-if="pieceData.prix" class="badge badge-primary badge-sm">{{ pieceData.prix }}€</span>
+          <span v-if="piece._emptySlot" class="text-[0.65rem] font-bold text-error bg-error/10 px-1.5 py-0.5 rounded">manquant</span>
+          <button
+            v-if="piece.pendingEntity"
+            type="button"
+            class="badge badge-error badge-sm cursor-pointer hover:badge-outline transition-colors"
+            title="Cliquer pour associer un item"
+            @click.stop="$emit('fill-entity', piece.linkId, piece.modelTypeId)"
+          >
+            À remplir
+          </button>
+          <span v-if="displayQuantity > 1" class="text-[0.65rem] font-bold text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">×{{ displayQuantity }}</span>
+          <span v-if="pieceData.reference" class="text-[0.65rem] font-mono text-base-content/70 bg-base-300/50 px-1.5 py-0.5 rounded border border-base-300/40">{{ pieceData.reference }}</span>
+          <span v-if="pieceData.referenceAuto" class="text-[0.65rem] font-mono font-semibold text-secondary bg-secondary/20 px-1.5 py-0.5 rounded border border-secondary/30" title="Référence auto">{{ pieceData.referenceAuto }}</span>
+          <span v-if="pieceData.prix" class="text-[0.65rem] font-bold text-primary bg-primary/20 px-1.5 py-0.5 rounded border border-primary/30">{{ pieceData.prix }}€</span>
+        </div>
+
+        <!-- Row 2: Metadata tags -->
+        <div
+          v-if="piece.parentComponentName || pieceConstructeursDisplay.length || displayProductName || (!isEditMode && visibleContextFieldTags.length)"
+          class="flex flex-wrap items-center gap-1.5"
+        >
+          <span v-if="piece.parentComponentName" class="text-[0.65rem] text-base-content/40 bg-base-300/20 px-1.5 py-0.5 rounded">
+            {{ piece.parentComponentName }}
+          </span>
+          <span
+            v-for="constructeur in pieceConstructeursDisplay"
+            :key="constructeur.id"
+            class="text-[0.65rem] text-base-content/45"
+          >
+            {{ constructeur.name }}
+            <span v-if="supplierReferenceMap.get(constructeur.id)" class="opacity-60">({{ supplierReferenceMap.get(constructeur.id) }})</span>
+          </span>
+          <span v-if="displayProductName" class="text-[0.65rem] font-semibold text-info bg-info/20 px-1.5 py-0.5 rounded border border-info/30">
+            {{ displayProductName }}
+          </span>
+          <!-- Context field tags (consultation only) -->
+          <template v-if="!isEditMode">
             <span
-              v-if="displayProductName"
-              class="badge badge-info badge-sm"
+              v-for="field in visibleContextFieldTags"
+              :key="field.name"
+              class="text-[0.65rem] font-semibold px-1.5 py-0.5 rounded"
+              :class="contextFieldBadgeClass(field)"
             >
-              Produit&nbsp;: {{ displayProductName }}
+              {{ field.name }} : {{ field.value }}
             </span>
-          </div>
+          </template>
         </div>
       </div>
+
+      <!-- Delete button -->
       <button
         v-if="showDelete"
         type="button"
-        class="btn btn-ghost btn-xs text-error shrink-0"
+        class="btn btn-ghost btn-xs btn-circle text-error opacity-0 group-hover/header:opacity-100 transition-opacity shrink-0"
         title="Supprimer cette pièce"
-        @click="$emit('delete')"
+        @click.stop="$emit('delete')"
       >
-        Supprimer
+        <IconLucideTrash2 class="w-3.5 h-3.5" aria-hidden="true" />
       </button>
     </div>
 
-    <div v-show="!isCollapsed && !piece.pendingEntity" class="space-y-4">
-      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
-        <div class="space-y-2 text-sm">
-      <div v-if="isEditMode" class="form-control">
-        <label class="label">
-          <span class="label-text text-sm">Quantité</span>
-        </label>
-        <input
-          v-model.number="pieceData.quantity"
-          type="number"
-          min="1"
-          step="1"
-          class="input input-bordered input-sm md:input-md w-24"
-          @blur="updatePiece"
-        />
-      </div>
-      <div v-else-if="displayQuantity > 1">
-        <span class="font-medium">Quantité:</span>
-        <span class="ml-2">{{ displayQuantity }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Référence:</span>
-        <input
-          v-if="isEditMode"
-          :id="`piece-reference-${piece.id}`"
-          v-model="pieceData.reference"
-          type="text"
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
-        />
-        <span v-else class="ml-2">{{
-          pieceData.reference || "Non définie"
-        }}</span>
-      </div>
-      <div v-if="pieceData.referenceAuto">
-        <span class="font-medium">Référence auto:</span>
-        <span class="ml-2">{{ pieceData.referenceAuto }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Fournisseur:</span>
-        <div v-if="!isEditMode" class="ml-2">
-          <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
-            <div
-              v-for="constructeur in pieceConstructeursDisplay"
-              :key="constructeur.id"
-              class="flex flex-col"
-            >
-              <span class="font-medium">
-                {{ constructeur.name }}
-                <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-sm font-normal text-base-content/60">
-                  — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
-                </span>
-              </span>
-              <span
-                v-if="formatConstructeurContact(constructeur)"
-                class="text-xs text-base-content/50"
-              >
-                {{ formatConstructeurContact(constructeur) }}
-              </span>
+    <!-- ═══ EXPANDED PANEL ═══ -->
+    <div v-show="!isCollapsed && !piece.pendingEntity" class="ml-[1.125rem] border-l-2 border-primary/30 pl-5 pt-3 pb-1 space-y-3">
+
+      <!-- ── Section: Informations ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Informations</p>
+        </div>
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="space-y-3">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Quantité</span></label>
+                <input
+                  v-model.number="pieceData.quantity"
+                  type="number"
+                  min="1"
+                  step="1"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Référence</span></label>
+                <input
+                  :id="`piece-reference-${piece.id}`"
+                  v-model="pieceData.reference"
+                  type="text"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+              <div class="form-control">
+                <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Prix</span></label>
+                <input
+                  :id="`piece-prix-${piece.id}`"
+                  v-model="pieceData.prix"
+                  type="number"
+                  step="0.01"
+                  class="input input-bordered input-sm w-full"
+                  @blur="updatePiece"
+                />
+              </div>
+            </div>
+            <div class="form-control">
+              <label class="label py-0.5"><span class="label-text text-[0.65rem] font-semibold text-base-content/50 uppercase tracking-wide">Fournisseur</span></label>
+              <ConstructeurSelect
+                class="w-full"
+                :model-value="pieceConstructeurIds"
+                :initial-options="pieceConstructeursDisplay"
+                placeholder="Sélectionner un ou plusieurs fournisseurs..."
+                @update:model-value="handleConstructeurChange"
+              />
             </div>
           </div>
-          <span v-else class="font-medium">
-            Non défini
-          </span>
-        </div>
-        <ConstructeurSelect
-          v-else
-          class="w-full"
-          :model-value="pieceConstructeurIds"
-          :initial-options="pieceConstructeursDisplay"
-          placeholder="Sélectionner un ou plusieurs fournisseurs..."
-          @update:model-value="handleConstructeurChange"
-        />
-      </div>
-      <div>
-        <span class="font-medium">Prix:</span>
-        <input
-          v-if="isEditMode"
-          :id="`piece-prix-${piece.id}`"
-          v-model="pieceData.prix"
-          type="number"
-          step="0.01"
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
-        />
-        <span v-else class="ml-2">{{
-          pieceData.prix ? `${pieceData.prix}€` : "Non défini"
-        }}</span>
-      </div>
-      <div>
-        <span class="font-medium">Produit catalogue:</span>
-        <div v-if="isEditMode" class="mt-2 space-y-2">
-          <ProductSelect
-            :model-value="pieceData.productId"
-            placeholder="Associer un produit…"
-            helper-text="Optionnel : reliez cette pièce à un produit catalogue."
-            @update:modelValue="handleProductChange"
-          />
-          <div
-            v-if="selectedProduct"
-            class="rounded-md border border-base-200 bg-base-100 p-3 text-xs space-y-1"
-          >
-            <p class="text-sm font-semibold text-base-content">
-              {{ selectedProduct.name }}
-            </p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="flex flex-wrap gap-1"
-            >
-              <span class="font-semibold">{{ info.label }} :</span>
-              <span>{{ info.value }}</span>
-            </p>
-            <NuxtLink
-              v-if="selectedProduct.id"
-              :to="`/product/${selectedProduct.id}`"
-              class="link link-primary text-xs"
-            >
-              Ouvrir la fiche produit
-            </NuxtLink>
+          <!-- Read-only mode -->
+          <div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-4">
+            <div v-if="displayQuantity > 1">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Quantité</p>
+              <p class="text-sm text-base-content font-medium">{{ displayQuantity }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Référence</p>
+              <p class="text-sm" :class="pieceData.reference ? 'text-base-content font-mono' : 'text-base-content/30'">{{ pieceData.reference || '—' }}</p>
+            </div>
+            <div v-if="pieceData.referenceAuto">
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Réf. auto</p>
+              <p class="text-sm text-base-content font-mono">{{ pieceData.referenceAuto }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Prix</p>
+              <p class="text-sm" :class="pieceData.prix ? 'text-base-content font-semibold' : 'text-base-content/30'">{{ pieceData.prix ? `${pieceData.prix} €` : '—' }}</p>
+            </div>
+            <div>
+              <p class="text-[0.6rem] font-semibold uppercase tracking-wide text-base-content/50 mb-1">Fournisseur</p>
+              <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
+                <p
+                  v-for="constructeur in pieceConstructeursDisplay"
+                  :key="constructeur.id"
+                  class="text-sm text-base-content"
+                >
+                  {{ constructeur.name }}
+                  <span v-if="supplierReferenceMap.get(constructeur.id)" class="text-xs text-base-content/50">
+                    — Réf. {{ supplierReferenceMap.get(constructeur.id) }}
+                  </span>
+                  <span v-if="formatConstructeurContact(constructeur)" class="text-[0.65rem] text-base-content/40 block">
+                    {{ formatConstructeurContact(constructeur) }}
+                  </span>
+                </p>
+              </div>
+              <p v-else class="text-sm text-base-content/30">—</p>
+            </div>
           </div>
-          <p v-else class="text-xs text-base-content/60">
-            Aucun produit associé.
-          </p>
         </div>
-        <div class="ml-2">
-          <div v-if="displayProduct" class="space-y-1">
-            <p class="font-medium text-base-content">
-              {{ displayProductName || 'Produit catalogue' }}
-            </p>
-            <p
-              v-for="info in productInfoRows"
-              :key="info.label"
-              class="text-xs text-base-content/70"
+      </div>
+
+      <!-- ── Section: Produit catalogue ── -->
+      <div v-if="isEditMode || displayProduct" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-info/10 border-b border-info/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-info">Produit catalogue</p>
+        </div>
+        <div class="p-4">
+          <!-- Edit mode -->
+          <div v-if="isEditMode" class="space-y-3">
+            <ProductSelect
+              :model-value="pieceData.productId"
+              placeholder="Associer un produit…"
+              helper-text="Optionnel : reliez cette pièce à un produit catalogue."
+              @update:modelValue="handleProductChange"
+            />
+            <div
+              v-if="selectedProduct"
+              class="rounded-lg border border-base-200/60 bg-base-200/20 p-3 space-y-1.5"
             >
-              <span class="font-semibold">{{ info.label }} :</span>
-              <span class="ml-1">{{ info.value }}</span>
-            </p>
+              <p class="text-sm font-bold text-base-content">{{ selectedProduct.name }}</p>
+              <div class="flex flex-wrap gap-x-4 gap-y-1">
+                <p v-for="info in productInfoRows" :key="info.label" class="text-xs text-base-content/55">
+                  <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                </p>
+              </div>
+              <NuxtLink v-if="selectedProduct.id" :to="`/product/${selectedProduct.id}`" class="link link-primary text-xs">
+                Ouvrir la fiche produit
+              </NuxtLink>
+            </div>
+          </div>
+          <!-- Read-only mode -->
+          <div v-else-if="displayProduct">
+            <div class="flex items-start justify-between gap-3">
+              <div class="space-y-1.5">
+                <p class="text-sm font-bold text-base-content">{{ displayProductName }}</p>
+                <div class="flex flex-wrap gap-x-4 gap-y-1">
+                  <p v-for="info in productInfoRows" :key="info.label" class="text-xs text-base-content/55">
+                    <span class="font-semibold">{{ info.label }}</span> : {{ info.value }}
+                  </p>
+                </div>
+              </div>
+              <NuxtLink
+                v-if="piece.product?.id || piece.productId"
+                :to="`/product/${piece.product?.id || piece.productId}`"
+                class="btn btn-ghost btn-xs shrink-0 gap-1"
+              >
+                <IconLucideExternalLink class="w-3 h-3" aria-hidden="true" />
+                Voir
+              </NuxtLink>
+            </div>
             <ProductDocumentsInline
+              v-if="productDocuments.length"
+              class="mt-3 pt-3 border-t border-base-200/50"
               :documents="productDocuments"
               @preview="openPreview"
             />
           </div>
-          <span v-else class="font-medium">
-            Non défini
-          </span>
         </div>
       </div>
-    </div>
+
+      <!-- ── Section: Champs personnalisés item ── -->
+      <div v-if="displayedCustomFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Champs personnalisés item</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="displayedCustomFields"
+            :is-edit-mode="isEditMode"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="false"
+            @field-input="handleCustomFieldInput"
+            @field-blur="handleCustomFieldBlur"
+          />
+        </div>
       </div>
 
-    <!-- Champs personnalisés de la pièce -->
-    <CustomFieldDisplay
-      :fields="displayedCustomFields"
-      :is-edit-mode="isEditMode"
-      title="Champs personnalisés item"
-      :editable="false"
-      @field-input="handleCustomFieldInput"
-      @field-blur="handleCustomFieldBlur"
-    />
-
-    <template v-if="mergedContextFields.length">
-      <div class="divider my-4 text-xs text-base-content/50">
-        Champs personnalisés machine
-      </div>
-      <CustomFieldDisplay
-        :fields="mergedContextFields"
-        :is-edit-mode="isEditMode"
-        :columns="2"
-        :show-header="false"
-        :with-top-border="false"
-        :editable="true"
-        :emit-blur="false"
-        @field-input="queueContextCustomFieldUpdate"
-      />
-    </template>
-
-    <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
-      <div class="flex items-center justify-between">
-        <h5 class="text-sm font-medium text-base-content/80">Documents</h5>
-        <span
-          v-if="isEditMode && selectedFiles.length"
-          class="badge badge-outline"
-        >
-          {{ selectedFiles.length }} fichier{{
-            selectedFiles.length > 1 ? "s" : ""
-          }}
-          sélectionné{{ selectedFiles.length > 1 ? "s" : "" }}
-        </span>
+      <!-- ── Section: Champs personnalisés machine ── -->
+      <div v-if="mergedContextFields.length" class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-secondary/10 border-b border-secondary/20">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-secondary">Champs personnalisés machine</p>
+        </div>
+        <div class="p-4">
+          <CustomFieldDisplay
+            :fields="mergedContextFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            :show-header="false"
+            :with-top-border="false"
+            :editable="true"
+            :emit-blur="false"
+            @field-input="queueContextCustomFieldUpdate"
+          />
+        </div>
       </div>
 
-      <p v-if="loadingDocuments" class="text-xs text-base-content/50">
-        Chargement des documents...
-      </p>
+      <!-- ── Section: Documents ── -->
+      <div class="rounded-xl bg-base-100 border border-base-200/60 overflow-hidden">
+        <div class="px-4 py-2 bg-base-200/30 border-b border-base-200/50 flex items-center justify-between">
+          <p class="text-[0.6rem] font-bold uppercase tracking-[0.15em] text-base-content/50">Documents</p>
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
+          </span>
+        </div>
+        <div class="p-4 space-y-3">
+          <p v-if="loadingDocuments" class="text-xs text-base-content/50">Chargement des documents...</p>
 
-      <DocumentUpload
-        v-if="isEditMode"
-        v-model="selectedFiles"
-        title="Déposer des fichiers pour cette pièce"
-        subtitle="Formats acceptés : PDF, images, documents..."
-        @files-added="handleFilesAdded"
-      />
+          <DocumentUpload
+            v-if="isEditMode"
+            v-model="selectedFiles"
+            title="Déposer des fichiers pour cette pièce"
+            subtitle="Formats acceptés : PDF, images, documents..."
+            @files-added="handleFilesAdded"
+          />
 
-      <DocumentListInline
-        :documents="pieceDocuments"
-        :can-delete="isEditMode"
-        :can-edit="isEditMode"
-        :delete-disabled="uploadingDocuments"
-        empty-text="Aucun document lié à cette pièce."
-        @preview="openPreview"
-        @edit="openEditModal"
-        @delete="removeDocument"
-      />
-    </div>
+          <DocumentListInline
+            :documents="pieceDocuments"
+            :can-delete="isEditMode"
+            :can-edit="isEditMode"
+            :delete-disabled="uploadingDocuments"
+            empty-text="Aucun document lié à cette pièce."
+            @preview="openPreview"
+            @edit="openEditModal"
+            @delete="removeDocument"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -321,6 +351,8 @@ import ProductSelect from '~/components/ProductSelect.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+import IconLucideExternalLink from '~icons/lucide/external-link'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useProducts } from '~/composables/useProducts'
 import {
@@ -468,6 +500,24 @@ const mergedContextFields = computed(() => {
   return mergeDefinitionsWithValues(definitions, values)
 })
 
+// Context fields shown as tags on the header (consultation mode)
+const visibleContextFieldTags = computed(() =>
+  mergedContextFields.value.filter(f => f.value !== null && f.value !== undefined && String(f.value).trim() !== ''),
+)
+
+const CONTEXT_FIELD_COLORS = [
+  'bg-secondary/25 text-secondary border border-secondary/35',
+  'bg-accent/25 text-accent border border-accent/35',
+  'bg-info/25 text-info border border-info/35',
+  'bg-success/25 text-success border border-success/35',
+  'bg-warning/25 text-warning border border-warning/35',
+]
+
+const contextFieldBadgeClass = (field) => {
+  const idx = visibleContextFieldTags.value.indexOf(field)
+  return CONTEXT_FIELD_COLORS[idx % CONTEXT_FIELD_COLORS.length]
+}
+
 const queueContextCustomFieldUpdate = (field, value) => {
   const linkId = props.piece?.linkId
   if (!linkId || !field) return
diff --git a/frontend/app/pages/activity-log.vue b/frontend/app/pages/activity-log.vue
index d1b27d8..2e20399 100644
--- a/frontend/app/pages/activity-log.vue
+++ b/frontend/app/pages/activity-log.vue
@@ -44,6 +44,7 @@
                 <option value="piece">Pièce</option>
                 <option value="product">Produit</option>
                 <option value="composant">Composant</option>
+                <option value="machine">Machine</option>
               </select>
             </div>
 
@@ -89,13 +90,16 @@
 
           <template #cell-entity="{ row }">
             <NuxtLink
-              v-if="row.action !== 'delete'"
+              v-if="row.action !== 'delete' && entityEditLink(row) !== '#'"
               :to="entityEditLink(row)"
               class="link link-hover link-primary"
             >
               {{ row.entityName || 'Sans nom' }}
             </NuxtLink>
-            <span v-else class="text-base-content/50 line-through">
+            <span v-else-if="row.action === 'delete'" class="text-base-content/50 line-through">
+              {{ row.entityName || 'Sans nom' }}
+            </span>
+            <span v-else>
               {{ row.entityName || 'Sans nom' }}
             </span>
             <span
@@ -195,19 +199,23 @@ const ENTITY_TYPE_LABELS: Record<string, string> = {
   piece: 'Pièce',
   product: 'Produit',
   composant: 'Composant',
+  machine: 'Machine',
+  document: 'Document',
+  model_type: 'Modèle',
 }
 
 const entityTypeLabel = (type: string) => ENTITY_TYPE_LABELS[type] ?? type
 
-const ENTITY_EDIT_ROUTES: Record<string, string> = {
-  piece: '/pieces',
+const ENTITY_ROUTES: Record<string, string> = {
+  piece: '/piece',
   product: '/product',
   composant: '/component',
+  machine: '/machine',
 }
 
 const entityEditLink = (entry: ActivityLogEntry) => {
-  const base = ENTITY_EDIT_ROUTES[entry.entityType] ?? ''
-  return base ? `${base}/${entry.entityId}/edit` : '#'
+  const base = ENTITY_ROUTES[entry.entityType] ?? ''
+  return base ? `${base}/${entry.entityId}` : '#'
 }
 
 const actionBadgeClass = (action: string) => {
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index b70a55b..8106a59 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -41,7 +41,7 @@
                 >
               </div>
             </div>
-            <div class="form-control md:w-64">
+            <div class="form-control md:w-48">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
               </label>
@@ -58,6 +58,24 @@
                 </option>
               </select>
             </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Date de création</span>
+              </label>
+              <div class="flex items-center gap-2">
+                <input
+                  v-model="dateFrom"
+                  type="date"
+                  class="input input-bordered input-sm"
+                >
+                <span class="text-xs text-base-content/50">à</span>
+                <input
+                  v-model="dateTo"
+                  type="date"
+                  class="input input-bordered input-sm"
+                >
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -277,6 +295,8 @@ const showAddSiteModal = ref(false)
 const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
 const collapsedSites = ref([])
 const preselectedSiteId = ref('')
 
@@ -327,6 +347,25 @@ const filteredSites = computed(() => {
     filtered = filtered.filter(site => site.id === selectedSiteFilter.value)
   }
 
+  // Filtrer les machines par date de création
+  if (dateFrom.value || dateTo.value) {
+    const from = dateFrom.value ? new Date(dateFrom.value) : null
+    const to = dateTo.value ? new Date(dateTo.value) : null
+    if (from) from.setHours(0, 0, 0, 0)
+    if (to) to.setHours(23, 59, 59, 999)
+
+    filtered = filtered.map((site) => {
+      const filteredMachines = (site.machines || []).filter((machine) => {
+        if (!machine.createdAt) return false
+        const created = new Date(machine.createdAt)
+        if (from && created < from) return false
+        if (to && created > to) return false
+        return true
+      })
+      return { ...site, machines: filteredMachines }
+    }).filter(site => site.machines.length > 0)
+  }
+
   // Filtrer par terme de recherche
   if (searchTerm.value) {
     filtered = filtered.filter((site) => {
diff --git a/frontend/app/pages/machines/index.vue b/frontend/app/pages/machines/index.vue
index a9326f4..ba65f7a 100644
--- a/frontend/app/pages/machines/index.vue
+++ b/frontend/app/pages/machines/index.vue
@@ -5,108 +5,93 @@
         <h2 class="text-2xl font-bold">
           Parc Machines
         </h2>
-        <NuxtLink to="/machines/new" class="btn btn-primary">
+        <NuxtLink v-if="canEdit" to="/machines/new" class="btn btn-primary">
           <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
           Ajouter une machine
         </NuxtLink>
       </div>
 
-      <div class="card bg-base-100 shadow-sm mb-6">
-        <div class="card-body">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Sites</span>
-              </label>
-              <div class="flex flex-wrap gap-3">
-                <label
-                  v-for="site in sites"
-                  :key="site.id"
-                  class="flex items-center gap-2 cursor-pointer"
+      <div class="card bg-base-100 shadow-sm">
+        <div class="card-body space-y-4">
+          <DataTable
+            :columns="columns"
+            :rows="filteredMachines"
+            :loading="loading"
+            :sort="currentSort"
+            :show-counter="true"
+            empty-message="Aucune machine trouvée."
+            no-results-message="Aucune machine ne correspond à vos filtres."
+            @sort="handleSort"
+          >
+            <template #toolbar>
+              <label class="w-full sm:w-72">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
+                <input
+                  v-model="searchQuery"
+                  type="search"
+                  class="input input-bordered input-sm w-full mt-1"
+                  placeholder="Nom ou référence..."
                 >
-                  <input
-                    type="checkbox"
-                    class="checkbox checkbox-sm"
-                    :checked="selectedSites.has(site.id)"
-                    @change="selectedSites.has(site.id) ? selectedSites.delete(site.id) : selectedSites.add(site.id)"
-                  >
-                  <span class="text-sm">{{ site.name }}</span>
-                </label>
-              </div>
-            </div>
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Recherche</span>
               </label>
-              <input
-                v-model="searchQuery"
-                type="text"
-                placeholder="Rechercher par nom ou référence..."
-                class="input input-bordered"
+
+              <div class="flex flex-col">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Site</span>
+                <select v-model="selectedSiteId" class="select select-bordered select-sm mt-1">
+                  <option value="">Tous les sites</option>
+                  <option v-for="site in sites" :key="site.id" :value="site.id">
+                    {{ site.name }}
+                  </option>
+                </select>
+              </div>
+
+              <div class="flex flex-col">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Date de création</span>
+                <div class="flex items-center gap-2 mt-1">
+                  <input
+                    v-model="dateFrom"
+                    type="date"
+                    class="input input-bordered input-sm"
+                  >
+                  <span class="text-xs text-base-content/50">à</span>
+                  <input
+                    v-model="dateTo"
+                    type="date"
+                    class="input input-bordered input-sm"
+                  >
+                </div>
+              </div>
+            </template>
+
+            <template #cell-site="{ row }">
+              <span
+                v-if="row.site"
+                class="badge badge-sm font-bold"
+                :style="row.site.color ? { backgroundColor: row.site.color + '30', color: row.site.color, borderColor: row.site.color + '50' } : {}"
+                :class="!row.site.color ? 'badge-ghost' : ''"
               >
-            </div>
-          </div>
-        </div>
-      </div>
+                {{ row.site.name }}
+              </span>
+              <span v-else class="text-base-content/30">—</span>
+            </template>
 
-      <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg" />
-      </div>
+            <template #cell-createdAt="{ row }">
+              <span class="whitespace-nowrap">{{ formatDate(row.createdAt) }}</span>
+            </template>
 
-      <EmptyState
-        v-else-if="filteredMachines.length === 0"
-        :icon="IconLucideFactory"
-        title="Aucune machine trouvée"
-        description="Commencez par ajouter votre première machine."
-        action-label="Ajouter une machine"
-        action-to="/machines/new"
-      />
-
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div
-          v-for="machine in filteredMachines"
-          :key="machine.id"
-          class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
-          :style="{
-            borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
-            background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
-          }"
-          @click="viewMachineDetails(machine)"
-        >
-          <div class="card-body flex flex-col">
-            <div class="flex items-center justify-between mb-2">
-              <h3 class="card-title text-lg">
-                {{ machine.name }}
-              </h3>
-            </div>
-
-            <div class="space-y-2 text-sm">
-              <div class="flex items-center gap-2">
-                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
-                <span
-                  class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
-                  :style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
-                >{{ machine.site?.name || 'Site inconnu' }}</span>
+            <template #cell-actions="{ row }">
+              <div class="flex items-center justify-end gap-2">
+                <button v-if="canEdit" class="btn btn-ghost btn-xs" @click="editMachine(row)">
+                  Modifier
+                </button>
+                <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDeleteMachine(row)">
+                  Supprimer
+                </button>
+                <NuxtLink :to="`/machine/${row.id}`" class="btn btn-primary btn-xs">
+                  Détails
+                </NuxtLink>
               </div>
-
-              <div v-if="machine.reference" class="flex items-center gap-2">
-                <IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.reference }}</span>
-              </div>
-            </div>
-
-            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-              <button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
-                Modifier
-              </button>
-              <button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
-                Supprimer
-              </button>
-              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
-                Détails
-              </NuxtLink>
-            </div>
-          </div>
+            </template>
+          </DataTable>
         </div>
       </div>
     </div>
@@ -114,16 +99,16 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useUrlState } from '~/composables/useUrlState'
+import { usePersistedValue } from '~/composables/usePersistedValue'
+import { formatFrenchDate } from '~/utils/date'
 import IconLucidePlus from '~icons/lucide/plus'
-import IconLucideFactory from '~icons/lucide/factory'
-import IconLucideMapPin from '~icons/lucide/map-pin'
-import IconLucideTag from '~icons/lucide/tag'
 
 const { canEdit } = usePermissions()
 const { machines, loading, loadMachines, deleteMachine } = useMachines()
@@ -132,34 +117,46 @@ const toast = useToast()
 
 const urlState = useUrlState({
   q: { default: '', debounce: 300 },
-  sites: { default: '' },
+  site: { default: '' },
+  from: { default: '' },
+  to: { default: '' },
 })
 
 const searchQuery = urlState.q
-const selectedSites = reactive(new Set())
+const selectedSiteId = urlState.site
+const dateFrom = urlState.from
+const dateTo = urlState.to
 
-// Sync URL → selectedSites on load and back/forward
-watch(urlState.sites, (val) => {
-  selectedSites.clear()
-  if (val) {
-    for (const id of String(val).split(',')) {
-      if (id) selectedSites.add(id)
-    }
-  }
-}, { immediate: true })
+const sortKey = usePersistedValue('machines-sort', 'name')
+const sortDir = ref('asc')
 
-// Sync selectedSites → URL
-watch(() => [...selectedSites], (ids) => {
-  urlState.sites.value = ids.join(',')
-})
+const currentSort = computed(() => ({
+  field: sortKey.value,
+  direction: sortDir.value,
+}))
+
+const handleSort = (sort) => {
+  sortKey.value = sort.field
+  sortDir.value = sort.direction
+}
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence', sortable: true },
+  { key: 'site', label: 'Site', sortable: true, sortKey: 'siteName' },
+  { key: 'createdAt', label: 'Date de création', sortable: true },
+  { key: 'actions', label: 'Actions', align: 'right' },
+]
+
+const formatDate = formatFrenchDate
 
-// Enrichir les machines avec les objets site complets
 const enrichedMachines = computed(() => {
   return machines.value.map((machine) => {
     const site = sites.value.find(s => s.id === machine.siteId)
     return {
       ...machine,
       site: site || null,
+      siteName: site?.name || '',
     }
   })
 })
@@ -167,29 +164,44 @@ const enrichedMachines = computed(() => {
 const filteredMachines = computed(() => {
   let filtered = enrichedMachines.value
 
-  if (selectedSites.size > 0) {
-    filtered = filtered.filter(machine => selectedSites.has(machine.siteId))
+  if (selectedSiteId.value) {
+    filtered = filtered.filter(m => m.siteId === selectedSiteId.value)
   }
 
   if (searchQuery.value.trim()) {
     const term = searchQuery.value.trim().toLowerCase()
-    filtered = filtered.filter(machine =>
-      machine.name?.toLowerCase().includes(term)
-      || machine.reference?.toLowerCase().includes(term),
+    filtered = filtered.filter(m =>
+      m.name?.toLowerCase().includes(term)
+      || m.reference?.toLowerCase().includes(term),
     )
   }
 
-  filtered = [...filtered].sort((a, b) =>
-    (a.name || '').localeCompare(b.name || '', 'fr')
-  )
+  if (dateFrom.value) {
+    const from = new Date(dateFrom.value)
+    from.setHours(0, 0, 0, 0)
+    filtered = filtered.filter(m => m.createdAt && new Date(m.createdAt) >= from)
+  }
+
+  if (dateTo.value) {
+    const to = new Date(dateTo.value)
+    to.setHours(23, 59, 59, 999)
+    filtered = filtered.filter(m => m.createdAt && new Date(m.createdAt) <= to)
+  }
+
+  const key = sortKey.value
+  const dir = sortDir.value === 'desc' ? -1 : 1
+  filtered = [...filtered].sort((a, b) => {
+    if (key === 'createdAt') {
+      return dir * (new Date(a[key] || 0).getTime() - new Date(b[key] || 0).getTime())
+    }
+    const valA = (key === 'siteName' ? a.siteName : a[key]) || ''
+    const valB = (key === 'siteName' ? b.siteName : b[key]) || ''
+    return dir * String(valA).localeCompare(String(valB), 'fr')
+  })
 
   return filtered
 })
 
-const viewMachineDetails = (machine) => {
-  navigateTo(`/machine/${machine.id}`)
-}
-
 const editMachine = (machine) => {
   navigateTo(`/machine/${machine.id}?edit=true`)
 }