diff --git a/app/assets/app.css b/app/assets/app.css
index 8fef365..042b65d 100644
--- a/app/assets/app.css
+++ b/app/assets/app.css
@@ -56,6 +56,57 @@
   --noise: 0;
 }
 
+@plugin "daisyui/theme" {
+  name: "mytheme-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+
+  /* Surfaces — dark blue-gray */
+  --color-base-100: oklch(22% 0.015 260);
+  --color-base-200: oklch(18% 0.012 260);
+  --color-base-300: oklch(28% 0.018 260);
+  --color-base-content: oklch(92% 0.005 260);
+
+  /* Primary — Malio blue, brighter for dark */
+  --color-primary: oklch(55% 0.18 262);
+  --color-primary-content: oklch(98% 0.005 262);
+
+  /* Secondary — refined lavender */
+  --color-secondary: oklch(72% 0.06 275);
+  --color-secondary-content: oklch(22% 0.03 275);
+
+  /* Accent — warm amber-orange */
+  --color-accent: oklch(72% 0.17 55);
+  --color-accent-content: oklch(20% 0.04 55);
+
+  /* Neutral — lighter slate for dark mode */
+  --color-neutral: oklch(75% 0.02 260);
+  --color-neutral-content: oklch(18% 0.01 260);
+
+  /* Semantic */
+  --color-info: oklch(62% 0.14 255);
+  --color-info-content: oklch(98% 0.005 255);
+  --color-success: oklch(65% 0.19 150);
+  --color-success-content: oklch(98% 0.005 150);
+  --color-warning: oklch(78% 0.15 70);
+  --color-warning-content: oklch(22% 0.05 70);
+  --color-error: oklch(62% 0.22 25);
+  --color-error-content: oklch(98% 0.005 25);
+
+  /* Geometry — same as light */
+  --radius-selector: 0.75rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}
+
 /* ─── Typography ─── */
 :root {
   --font-heading: 'Outfit', system-ui, sans-serif;
@@ -139,6 +190,18 @@ h1, h2, h3, h4, h5, h6,
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
 
+.site-card {
+  background-color: oklch(100% 0 0);
+}
+
+[data-theme="mytheme-dark"] .site-card {
+  background-color: oklch(24% 0.015 260);
+}
+
+[data-theme="mytheme-dark"] .card {
+  border-color: oklch(30% 0.02 260 / 0.6);
+}
+
 .card:hover {
   box-shadow:
     0 4px 6px -1px oklch(22% 0.025 260 / 0.06),
@@ -153,6 +216,11 @@ h1, h2, h3, h4, h5, h6,
   border-bottom: 1px solid oklch(91% 0.015 260 / 0.5);
 }
 
+[data-theme="mytheme-dark"] .navbar-glass {
+  background: oklch(22% 0.015 260 / 0.85);
+  border-bottom-color: oklch(30% 0.02 260 / 0.5);
+}
+
 /* ─── Buttons ─── */
 .btn {
   font-family: var(--font-heading);
diff --git a/app/components/ComponentHierarchy.vue b/app/components/ComponentHierarchy.vue
index f5df12c..b3ab1bd 100644
--- a/app/components/ComponentHierarchy.vue
+++ b/app/components/ComponentHierarchy.vue
@@ -5,11 +5,13 @@
       <ComponentItem
         :component="component"
         :is-edit-mode="isEditMode"
+        :show-delete="showDelete"
         :collapse-all="collapseAll"
         :toggle-token="toggleToken"
         @update="$emit('update', $event)"
         @edit-piece="$emit('edit-piece', $event)"
         @custom-field-update="$emit('custom-field-update', $event)"
+        @delete="$emit('delete')"
       />
     </div>
   </div>
@@ -27,6 +29,10 @@ defineProps({
     type: Boolean,
     default: false
   },
+  showDelete: {
+    type: Boolean,
+    default: false
+  },
   collapseAll: {
     type: Boolean,
     default: true
@@ -37,5 +43,5 @@ defineProps({
   }
 })
 
-defineEmits(['update', 'edit-piece', 'custom-field-update'])
+defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 </script>
diff --git a/app/components/ComponentItem.vue b/app/components/ComponentItem.vue
index 622de16..01da2fe 100644
--- a/app/components/ComponentItem.vue
+++ b/app/components/ComponentItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4">
+  <div>
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
@@ -8,211 +8,175 @@
     />
 
     <!-- Component Header -->
-    <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
-      <div class="flex items-start gap-3 w-full">
-        <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 du composant' : 'Replier les détails du composant'"
-          @click="toggleCollapse"
-        >
-          <IconLucideChevronRight class="w-5 h-5 transition-transform" aria-hidden="true" />
-          <span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} le composant</span>
-        </button>
-        <div class="flex-1">
-          <h3 class="text-lg font-semibold">
+    <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @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">
+        <div class="flex items-center gap-2 flex-wrap">
+          <h3 class="text-sm font-semibold text-base-content truncate">
             {{ component.name }}
           </h3>
-          <div class="flex flex-wrap gap-2 mt-2">
-            <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
-            <template v-if="componentConstructeursDisplay.length">
-              <span
-                v-for="constructeur in componentConstructeursDisplay"
-                :key="constructeur.id"
-                class="badge badge-outline badge-sm"
-              >
-                {{ constructeur.name }}
-              </span>
-            </template>
-            <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
-            <span
-              v-if="displayProductName"
-              class="badge badge-info badge-sm"
-            >
-              Produit&nbsp;: {{ displayProductName }}
-            </span>
-          </div>
+          <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>
+        </div>
+        <div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
+          <span
+            v-for="constructeur in componentConstructeursDisplay"
+            :key="constructeur.id"
+            class="text-xs text-base-content/50"
+          >
+            {{ constructeur.name }}
+          </span>
+          <span v-if="displayProductName" class="badge badge-info badge-xs">
+            {{ displayProductName }}
+          </span>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer ce composant"
+        @click.stop="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </div>
 
-    <div v-show="!isCollapsed" class="space-y-4">
-      <!-- Component Info Display - Editable or Read-only -->
-      <div class="p-4 bg-base-100 border border-base-200 rounded-lg">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Nom</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.name"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
+    <!-- Expanded content -->
+    <div v-show="!isCollapsed" 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">
+        </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>
+        <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>
+        <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>
+      </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>
+        <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"
             >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.name }}
-            </div>
+              {{ constructeur.name }}
+              <span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
+                {{ formatConstructeurContact(constructeur) }}
+              </span>
+            </p>
           </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Référence</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.reference"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
+          <p v-else class="text-base-content">—</p>
+        </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"
             >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.reference || 'Non définie' }}
-            </div>
+              {{ info.label }} : {{ info.value }}
+            </p>
           </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Prix</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.prix"
-              type="number"
-              step="0.01"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            >
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              {{ component.prix ? `${component.prix}€` : 'Non défini' }}
-            </div>
-          </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Fournisseur</span></label>
-            <ConstructeurSelect
-              v-if="isEditMode"
-              class="w-full"
-              :model-value="componentConstructeurIds"
-              :initial-options="componentConstructeursDisplay"
-              @update:model-value="handleConstructeurChange"
-            />
-            <div v-else class="input input-bordered input-sm bg-base-200">
-              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
-                <div
-                  v-for="constructeur in componentConstructeursDisplay"
-                  :key="constructeur.id"
-                  class="flex flex-col"
+          <NuxtLink
+            v-if="component.product?.id"
+            :to="`/product/${component.product.id}/edit`"
+            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}`"
                 >
-                  <span class="font-medium">{{ constructeur.name }}</span>
-                  <span
-                    v-if="formatConstructeurContact(constructeur)"
-                    class="text-xs text-base-content/50"
-                  >
-                    {{ formatConstructeurContact(constructeur) }}
-                  </span>
-                </div>
+                <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 v-else class="font-medium">Non défini</span>
+              <span class="truncate text-base-content">{{ document.name }}</span>
             </div>
-          </div>
-          <div class="form-control md:col-span-2">
-            <label class="label">
-              <span class="label-text font-medium">Produit catalogue</span>
-            </label>
-            <div class="input input-bordered input-sm bg-base-200 min-h-[2.75rem] flex flex-col justify-center space-y-1">
-              <template v-if="displayProduct">
-                <span class="font-semibold text-base-content">
-                  {{ displayProductName || 'Produit catalogue' }}
-                </span>
-                <span
-                  v-for="info in productInfoRows"
-                  :key="info.label"
-                  class="text-xs text-base-content/70"
-                >
-                  {{ info.label }} : {{ info.value }}
-                </span>
-                <NuxtLink
-                  v-if="component.product?.id"
-                  :to="`/product/${component.product.id}/edit`"
-                  class="link link-primary text-xs"
-                >
-                  Ouvrir la fiche produit
-                </NuxtLink>
-              </template>
-              <span v-else class="font-medium">Non défini</span>
-            </div>
-            <div
-              v-if="productDocuments.length"
-              class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
-            >
-              <h4 class="font-medium text-base-content">
-                Documents du produit
-              </h4>
-              <div
-                v-for="document in productDocuments"
-                :key="document.id || document.path || document.name"
-                class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
+            <div class="flex items-center gap-1 shrink-0">
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs"
+                :disabled="!canPreviewDocument(document)"
+                @click="openPreview(document)"
               >
-                <div class="flex items-center gap-3">
-                  <div
-                    class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-12 w-10"
-                  >
-                    <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-6 w-6"
-                      :class="documentIcon(document).colorClass"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div>
-                    <div class="font-medium text-base-content">
-                      {{ document.name }}
-                    </div>
-                    <div class="text-xs text-base-content/70">
-                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2 text-xs">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs"
-                    :disabled="!canPreviewDocument(document)"
-                    :title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
-                    @click="openPreview(document)"
-                  >
-                    Consulter
-                  </button>
-                  <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
-                    Télécharger
-                  </button>
-                </div>
-              </div>
+                Consulter
+              </button>
+              <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                Télécharger
+              </button>
             </div>
           </div>
         </div>
-
       </div>
 
-      <!-- Custom Fields Display - Editable or Read-only -->
+      <!-- Custom Fields -->
       <CustomFieldDisplay
         :fields="displayedCustomFields"
         :is-edit-mode="isEditMode"
@@ -220,18 +184,17 @@
         @field-blur="updateComponentCustomField"
       />
 
-      <div class="mt-4 pt-4 border-t border-base-200 space-y-3">
+      <!-- Documents -->
+      <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <h4 class="font-semibold text-sm text-base-content/80">
-            Documents
-          </h4>
-          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline">
-            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
+          <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
+          <span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
+            {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
           </span>
         </div>
 
         <p v-if="loadingDocuments" class="text-xs text-base-content/50">
-          Chargement des documents...
+          Chargement...
         </p>
 
         <DocumentUpload
@@ -254,10 +217,10 @@
 
       <!-- Component Pieces -->
       <div v-if="component.pieces && component.pieces.length > 0" class="space-y-2">
-        <h4 class="font-semibold text-base-content/80">
+        <p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
           Pièces du composant
-        </h4>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        </p>
+        <div class="space-y-2">
           <PieceItem
             v-for="piece in component.pieces"
             :key="piece.id"
@@ -271,11 +234,11 @@
       </div>
 
       <!-- Sub Components -->
-      <div v-if="childComponents.length > 0" class="space-y-3">
-        <h4 class="font-semibold text-base-content/80">
+      <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
-        </h4>
-        <div class="space-y-3 pl-4 border-l-2 border-base-200">
+        </p>
+        <div class="space-y-2 pl-4 border-l-2 border-base-200">
           <ComponentItem
             v-for="subComponent in childComponents"
             :key="subComponent.id"
@@ -321,11 +284,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   component: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit-piece', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
 
 // --- Shared composables ---
 const {
diff --git a/app/components/PieceItem.vue b/app/components/PieceItem.vue
index bf72b04..36ac2a3 100644
--- a/app/components/PieceItem.vue
+++ b/app/components/PieceItem.vue
@@ -9,7 +9,7 @@
 
     <!-- Piece Header (collapsible, same pattern as ComponentItem) -->
     <div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
-      <div class="flex items-start gap-3 w-full">
+      <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"
@@ -21,7 +21,7 @@
           <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">
+        <div class="flex-1 min-w-0">
           <h3 class="text-lg font-semibold">
             {{ pieceData.name }}
           </h3>
@@ -49,6 +49,15 @@
           </div>
         </div>
       </div>
+      <button
+        v-if="showDelete"
+        type="button"
+        class="btn btn-ghost btn-xs text-error shrink-0"
+        title="Supprimer cette pièce"
+        @click="$emit('delete')"
+      >
+        Supprimer
+      </button>
     </div>
 
     <div v-show="!isCollapsed" class="space-y-4">
@@ -250,11 +259,12 @@ import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
 const props = defineProps({
   piece: { type: Object, required: true },
   isEditMode: { type: Boolean, default: false },
+  showDelete: { type: Boolean, default: false },
   collapseAll: { type: Boolean, default: true },
   toggleToken: { type: Number, default: 0 },
 })
 
-const emit = defineEmits(['update', 'edit', 'custom-field-update'])
+const emit = defineEmits(['update', 'edit', 'custom-field-update', 'delete'])
 
 // --- Local reactive data for editing ---
 const pieceData = reactive({
diff --git a/app/components/layout/AppNavbar.vue b/app/components/layout/AppNavbar.vue
index 0e78086..23b94c2 100644
--- a/app/components/layout/AppNavbar.vue
+++ b/app/components/layout/AppNavbar.vue
@@ -10,6 +10,16 @@
           tabindex="0"
           class="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-lg bg-base-100 rounded-xl w-60 border border-base-300/50"
         >
+          <li class="pt-1 pb-2 lg:hidden">
+            <button
+              class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
+              @click="toggleDarkMode"
+            >
+              <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+              <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+              {{ isDark ? 'Mode clair' : 'Mode sombre' }}
+            </button>
+          </li>
           <li class="pt-1 pb-2 lg:hidden">
             <button
               class="w-full flex items-center gap-2 rounded-lg px-3 py-2 transition-colors text-base-content/70 hover:bg-primary/8 hover:text-primary"
@@ -163,6 +173,14 @@
     <!-- Navbar end -->
     <div class="navbar-end">
       <div class="flex items-center gap-1.5">
+        <button
+          class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
+          :title="isDark ? 'Mode clair' : 'Mode sombre'"
+          @click="toggleDarkMode"
+        >
+          <IconLucideSun v-if="isDark" class="w-4 h-4" aria-hidden="true" />
+          <IconLucideMoon v-else class="w-4 h-4" aria-hidden="true" />
+        </button>
         <button
           class="btn btn-ghost btn-sm btn-circle hidden lg:inline-flex text-base-content/50 hover:text-base-content"
           title="Paramètres d'affichage"
@@ -176,7 +194,7 @@
             <div
               tabindex="0"
               role="button"
-              class="btn btn-ghost btn-circle btn-sm avatar placeholder indicator"
+              class="indicator cursor-pointer"
             >
               <span
                 v-if="unresolvedCount > 0"
@@ -185,9 +203,9 @@
                 {{ unresolvedCount }}
               </span>
               <div
-                class="bg-primary text-primary-content rounded-full w-8 h-8 grid place-items-center"
+                class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
               >
-                <span class="text-xs font-semibold leading-none tracking-tight">
+                <span class="text-xs font-semibold">
                   {{ activeProfileInitials }}
                 </span>
               </div>
@@ -257,6 +275,8 @@ import IconLucideCpu from '~icons/lucide/cpu'
 import IconLucidePuzzle from '~icons/lucide/puzzle'
 import IconLucidePackage from '~icons/lucide/package'
 import IconLucideLink from '~icons/lucide/link'
+import IconLucideSun from '~icons/lucide/sun'
+import IconLucideMoon from '~icons/lucide/moon'
 import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
 
 defineEmits<{
@@ -334,6 +354,7 @@ const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = use
 const { activeProfile } = useProfileSession()
 const { isAdmin, canEdit } = usePermissions()
 const { fetchUnresolvedCount } = useComments()
+const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
 
 const unresolvedCount = ref(0)
 let pollInterval: ReturnType<typeof setInterval> | null = null
@@ -344,6 +365,7 @@ const refreshUnresolvedCount = async () => {
 }
 
 onMounted(() => {
+  initDarkMode()
   refreshUnresolvedCount()
   pollInterval = setInterval(refreshUnresolvedCount, 60_000)
 })
diff --git a/app/components/machine/MachineComponentsCard.vue b/app/components/machine/MachineComponentsCard.vue
index 4e085c7..9f29faa 100644
--- a/app/components/machine/MachineComponentsCard.vue
+++ b/app/components/machine/MachineComponentsCard.vue
@@ -25,22 +25,15 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="component in components" :key="component.id" class="relative">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer ce composant"
-            @click="$emit('remove-component', component.linkId || component.id)"
-          >
-            Supprimer
-          </button>
+        <div v-for="component in components" :key="component.id">
           <ComponentHierarchy
             :components="[component]"
             :is-edit-mode="false"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
             @edit-piece="$emit('edit-piece', $event)"
+            @delete="$emit('remove-component', component.linkId || component.id)"
           />
         </div>
       </div>
diff --git a/app/components/machine/MachineCustomFieldDefEditor.vue b/app/components/machine/MachineCustomFieldDefEditor.vue
index 98eccad..2b2aa96 100644
--- a/app/components/machine/MachineCustomFieldDefEditor.vue
+++ b/app/components/machine/MachineCustomFieldDefEditor.vue
@@ -84,7 +84,7 @@
 
           <button
             type="button"
-            class="btn btn-error btn-xs btn-square"
+            class="btn btn-ghost btn-xs btn-square text-error"
             @click="$emit('remove-field', index)"
           >
             <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
diff --git a/app/components/machine/MachineCustomFieldsCard.vue b/app/components/machine/MachineCustomFieldsCard.vue
new file mode 100644
index 0000000..b86168a
--- /dev/null
+++ b/app/components/machine/MachineCustomFieldsCard.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body space-y-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="card-title">Champs personnalisés</h2>
+          <p class="text-xs text-gray-500">
+            Champs personnalisés propres à cette machine.
+          </p>
+        </div>
+        <span v-if="visibleCustomFields.length" class="badge badge-outline">
+          {{ visibleCustomFields.length }} champ{{ visibleCustomFields.length > 1 ? 's' : '' }}
+        </span>
+      </div>
+
+      <!-- View mode: display values -->
+      <template v-if="!isEditMode">
+        <div v-if="visibleCustomFields.length" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            v-for="field in visibleCustomFields"
+            :key="field.customFieldValueId || field.id || field.name"
+            class="form-control"
+          >
+            <label class="label">
+              <span class="label-text text-sm">{{ field.name }}</span>
+            </label>
+            <div class="input input-bordered input-sm bg-base-200">
+              {{ formatCustomFieldValue(field) }}
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-xs text-gray-500">
+          Aucun champ personnalisé défini pour cette machine.
+        </p>
+      </template>
+
+      <!-- Edit mode: definition management + value editing -->
+      <template v-else>
+        <p v-if="!customFields.length" class="text-xs text-gray-500">
+          Aucun champ personnalisé défini.
+        </p>
+
+        <div v-else class="space-y-3">
+          <div
+            v-for="(field, index) in customFields"
+            :key="field.id || field.name || index"
+            class="border border-base-200 rounded-md p-3 space-y-2"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="flex-1 space-y-2">
+                <!-- Definition fields -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+                  <input
+                    :value="field.name"
+                    type="text"
+                    class="input input-bordered input-sm"
+                    placeholder="Nom du champ"
+                    @blur="handleDefinitionUpdate(field, 'name', ($event.target as HTMLInputElement).value)"
+                  />
+                  <select
+                    :value="field.type || 'text'"
+                    class="select select-bordered select-sm"
+                    @change="handleDefinitionUpdate(field, 'type', ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="text">Texte</option>
+                    <option value="number">Nombre</option>
+                    <option value="select">Liste</option>
+                    <option value="boolean">Oui/Non</option>
+                    <option value="date">Date</option>
+                  </select>
+                  <div class="flex items-center gap-2 text-sm">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm"
+                      :checked="!!field.required"
+                      @change="handleDefinitionUpdate(field, 'required', ($event.target as HTMLInputElement).checked)"
+                    />
+                    Obligatoire
+                  </div>
+                </div>
+
+                <!-- Options for select type -->
+                <textarea
+                  v-if="(field.type || 'text') === 'select'"
+                  :value="field.optionsText || (Array.isArray(field.options) ? field.options.join('\n') : '')"
+                  class="textarea textarea-bordered textarea-sm h-20 w-full"
+                  placeholder="Option 1&#10;Option 2"
+                  @blur="handleOptionsUpdate(field, ($event.target as HTMLTextAreaElement).value)"
+                ></textarea>
+
+                <!-- Value editing -->
+                <div class="pt-1 border-t border-base-200">
+                  <label class="label py-0">
+                    <span class="label-text text-xs text-base-content/60">Valeur</span>
+                  </label>
+                  <input
+                    v-if="!field.type || field.type === 'text'"
+                    :value="field.value ?? ''"
+                    type="text"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <input
+                    v-else-if="field.type === 'number'"
+                    :value="field.value ?? ''"
+                    type="number"
+                    class="input input-bordered input-sm w-full"
+                    placeholder="Valeur..."
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                  <select
+                    v-else-if="field.type === 'select'"
+                    :value="field.value ?? ''"
+                    class="select select-bordered select-sm w-full"
+                    @change="onSelectChange(field, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="">Sélectionner...</option>
+                    <option
+                      v-for="option in field.options"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                  <label
+                    v-else-if="field.type === 'boolean'"
+                    class="flex items-center gap-3 cursor-pointer py-1"
+                  >
+                    <input
+                      type="checkbox"
+                      class="toggle toggle-primary toggle-sm"
+                      :checked="String(field.value).toLowerCase() === 'true'"
+                      @change="onBooleanChange(field, ($event.target as HTMLInputElement).checked)"
+                    >
+                    <span
+                      class="text-sm"
+                      :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'"
+                    >
+                      {{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}
+                    </span>
+                  </label>
+                  <input
+                    v-else-if="field.type === 'date'"
+                    :value="field.value ?? ''"
+                    type="date"
+                    class="input input-bordered input-sm w-full"
+                    @input="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).value)"
+                    @blur="$emit('update-custom-field', field)"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm btn-square flex-shrink-0 text-error"
+                title="Supprimer ce champ"
+                @click="$emit('delete-field', field.id || field.customFieldId)"
+              >
+                <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm md:btn-md btn-primary"
+          @click="$emit('add-field')"
+        >
+          Ajouter un champ personnalisé
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconLucideTrash from '~icons/lucide/trash'
+import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+
+defineProps<{
+  customFields: any[]
+  visibleCustomFields: any[]
+  isEditMode: boolean
+}>()
+
+const emit = defineEmits<{
+  'set-custom-field-value': [field: any, value: unknown]
+  'update-custom-field': [field: any]
+  'add-field': []
+  'delete-field': [fieldId: string]
+  'update-field-definition': [fieldId: string, data: Record<string, unknown>]
+}>()
+
+const handleDefinitionUpdate = (field: any, key: string, value: unknown) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  emit('update-field-definition', fieldId, { ...field, [key]: value })
+}
+
+const handleOptionsUpdate = (field: any, raw: string) => {
+  const fieldId = field.id || field.customFieldId
+  if (!fieldId) return
+  const options = raw.split('\n').map((o: string) => o.trim()).filter((o: string) => o.length > 0)
+  emit('update-field-definition', fieldId, { ...field, options })
+}
+
+const onSelectChange = (field: any, value: string) => {
+  emit('set-custom-field-value', field, value)
+  emit('update-custom-field', field)
+}
+
+const onBooleanChange = (field: any, checked: boolean) => {
+  emit('set-custom-field-value', field, checked ? 'true' : 'false')
+  emit('update-custom-field', field)
+}
+</script>
diff --git a/app/components/machine/MachineDocumentsCard.vue b/app/components/machine/MachineDocumentsCard.vue
index 6f8199e..4986cb2 100644
--- a/app/components/machine/MachineDocumentsCard.vue
+++ b/app/components/machine/MachineDocumentsCard.vue
@@ -74,7 +74,7 @@
             <button
               v-if="isEditMode"
               type="button"
-              class="btn btn-error btn-xs"
+              class="btn btn-ghost btn-xs text-error"
               :disabled="uploading"
               @click="$emit('remove', doc.id)"
             >
diff --git a/app/components/machine/MachinePiecesCard.vue b/app/components/machine/MachinePiecesCard.vue
index 186b0ab..2dbe97c 100644
--- a/app/components/machine/MachinePiecesCard.vue
+++ b/app/components/machine/MachinePiecesCard.vue
@@ -25,22 +25,15 @@
       </div>
 
       <div v-else class="space-y-2">
-        <div v-for="piece in pieces" :key="piece.id" class="relative">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2 z-10"
-            title="Supprimer cette pièce"
-            @click="$emit('remove-piece', piece.linkId || piece.id)"
-          >
-            Supprimer
-          </button>
+        <div v-for="piece in pieces" :key="piece.id">
           <PieceItem
             :piece="piece"
             :is-edit-mode="false"
+            :show-delete="isEditMode"
             :collapse-all="collapsed"
             :toggle-token="collapseToggleToken"
             @edit="$emit('edit-piece', $event)"
+            @delete="$emit('remove-piece', piece.linkId || piece.id)"
           />
         </div>
       </div>
diff --git a/app/components/machine/MachineProductsCard.vue b/app/components/machine/MachineProductsCard.vue
index 0b7f1c7..68c8575 100644
--- a/app/components/machine/MachineProductsCard.vue
+++ b/app/components/machine/MachineProductsCard.vue
@@ -24,24 +24,26 @@
         <div
           v-for="product in products"
           :key="product.id || product.name"
-          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2 relative"
+          class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-2"
         >
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-error btn-xs absolute top-2 right-2"
-            title="Supprimer ce produit"
-            @click="$emit('remove-product', (product.linkId || product.id) as string)"
-          >
-            Supprimer
-          </button>
           <div class="flex items-center justify-between flex-wrap gap-2">
             <p class="font-semibold text-base-content">
               {{ product.name }}
             </p>
-            <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
-              {{ product.groupLabel }}
-            </span>
+            <div class="flex items-center gap-2">
+              <span v-if="product.groupLabel" class="badge badge-ghost badge-sm">
+                {{ product.groupLabel }}
+              </span>
+              <button
+                v-if="isEditMode"
+                type="button"
+                class="btn btn-ghost btn-xs text-error"
+                title="Supprimer ce produit"
+                @click="$emit('remove-product', (product.linkId || product.id) as string)"
+              >
+                Supprimer
+              </button>
+            </div>
           </div>
           <p v-if="product.reference" class="text-xs text-base-content/70">
             <span class="font-medium">Référence :</span>
diff --git a/app/components/sites/SiteCard.vue b/app/components/sites/SiteCard.vue
index e98d0e5..534b3fe 100644
--- a/app/components/sites/SiteCard.vue
+++ b/app/components/sites/SiteCard.vue
@@ -1,11 +1,21 @@
 <template>
-  <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow">
+  <div
+    class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
+    :style="{
+      borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+      background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+    }"
+  >
     <div class="card-body">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="card-title text-lg">
+        <h3 class="card-title text-lg text-base-content">
           {{ site.name }}
         </h3>
-        <div class="badge badge-primary badge-sm">
+        <div
+          class="badge font-bold"
+          :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+          :class="!site.color ? 'badge-primary' : ''"
+        >
           {{ machineCount }} machines
         </div>
       </div>
diff --git a/app/components/sites/SiteCreateModal.vue b/app/components/sites/SiteCreateModal.vue
index 8e7173b..09d1e7c 100644
--- a/app/components/sites/SiteCreateModal.vue
+++ b/app/components/sites/SiteCreateModal.vue
@@ -17,6 +17,46 @@
           />
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="siteRef.color" class="flex items-center gap-3">
+            <input
+              :value="siteRef.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
+            >
+            <input
+              v-model="siteRef.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="siteRef.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="siteRef.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="siteRef" :disabled="disabled" />
 
         <div class="modal-action">
@@ -39,6 +79,7 @@ import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string
diff --git a/app/components/sites/SiteEditModal.vue b/app/components/sites/SiteEditModal.vue
index bbffc8c..ee4a059 100644
--- a/app/components/sites/SiteEditModal.vue
+++ b/app/components/sites/SiteEditModal.vue
@@ -20,6 +20,46 @@
           >
         </div>
 
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">Couleur</span>
+          </label>
+          <div v-if="form.color" class="flex items-center gap-3">
+            <input
+              :value="form.color"
+              type="color"
+              class="w-10 h-10 rounded cursor-pointer border border-base-300"
+              :disabled="disabled"
+              @input="form.color = $event.target.value"
+            >
+            <input
+              v-model="form.color"
+              type="text"
+              placeholder="#000000"
+              class="input input-bordered input-sm flex-1"
+              :disabled="disabled"
+              maxlength="7"
+            >
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              :disabled="disabled"
+              @click="form.color = ''"
+            >
+              Effacer
+            </button>
+          </div>
+          <button
+            v-else
+            type="button"
+            class="btn btn-outline btn-sm w-fit"
+            :disabled="disabled"
+            @click="form.color = '#3b82f6'"
+          >
+            Choisir une couleur
+          </button>
+        </div>
+
         <SiteContactFormFields :form="props.form" :disabled="disabled" />
 
         <div class="border-t border-base-200 pt-4 space-y-4">
diff --git a/app/composables/useDarkMode.ts b/app/composables/useDarkMode.ts
new file mode 100644
index 0000000..a79d683
--- /dev/null
+++ b/app/composables/useDarkMode.ts
@@ -0,0 +1,26 @@
+const isDark = ref(false)
+
+export function useDarkMode() {
+  const toggle = () => {
+    isDark.value = !isDark.value
+    applyTheme()
+  }
+
+  const applyTheme = () => {
+    const theme = isDark.value ? 'mytheme-dark' : 'mytheme'
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }
+
+  const init = () => {
+    const saved = localStorage.getItem('theme')
+    if (saved === 'mytheme-dark') {
+      isDark.value = true
+    } else if (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      isDark.value = true
+    }
+    applyTheme()
+  }
+
+  return { isDark, toggle, init }
+}
diff --git a/app/composables/useSiteManagement.ts b/app/composables/useSiteManagement.ts
index 80f0f80..2c4d705 100644
--- a/app/composables/useSiteManagement.ts
+++ b/app/composables/useSiteManagement.ts
@@ -10,6 +10,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
 
 type SiteForm = {
   name: string
+  color: string
   contactName: string
   contactPhone: string
   contactAddress: string
@@ -31,6 +32,7 @@ type SiteDocument = {
 type SiteWithDocuments = {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string
@@ -54,6 +56,7 @@ export function useSiteManagement() {
 
   const newSite = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -63,6 +66,7 @@ export function useSiteManagement() {
 
   const editSiteForm = reactive<SiteForm>({
     name: '',
+    color: '',
     contactName: '',
     contactPhone: '',
     contactAddress: '',
@@ -81,6 +85,7 @@ export function useSiteManagement() {
 
   const resetNewSite = () => {
     newSite.name = ''
+    newSite.color = ''
     newSite.contactName = ''
     newSite.contactPhone = ''
     newSite.contactAddress = ''
@@ -101,6 +106,7 @@ export function useSiteManagement() {
   const handleCreateSite = async () => {
     const result = await createSite({
       name: newSite.name,
+      color: newSite.color,
       contactName: newSite.contactName,
       contactPhone: newSite.contactPhone,
       contactAddress: newSite.contactAddress,
@@ -116,6 +122,7 @@ export function useSiteManagement() {
   const editSite = (site: SiteWithDocuments) => {
     siteBeingEdited.value = site
     editSiteForm.name = site.name || ''
+    editSiteForm.color = site.color || ''
     editSiteForm.contactName = site.contactName || ''
     editSiteForm.contactPhone = site.contactPhone || ''
     editSiteForm.contactAddress = site.contactAddress || ''
@@ -148,6 +155,7 @@ export function useSiteManagement() {
 
     const baseUpdate = {
       name: editSiteForm.name,
+      color: editSiteForm.color,
       contactName: editSiteForm.contactName,
       contactPhone: editSiteForm.contactPhone,
       contactAddress: editSiteForm.contactAddress,
diff --git a/app/composables/useSites.ts b/app/composables/useSites.ts
index fa9a28c..cbe0dbc 100644
--- a/app/composables/useSites.ts
+++ b/app/composables/useSites.ts
@@ -6,6 +6,7 @@ import { extractCollection } from '~/shared/utils/apiHelpers'
 export interface Site {
   id: string
   name?: string
+  color?: string
   contactName?: string
   contactPhone?: string
   contactAddress?: string
diff --git a/app/pages/component-catalog.vue b/app/pages/component-catalog.vue
index 577c4ae..4920fd0 100644
--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -95,7 +95,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/component/${row.component.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -105,7 +105,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingComposants"
                 @click="handleDeleteComponent(row.component)"
               >
diff --git a/app/pages/constructeurs.vue b/app/pages/constructeurs.vue
index 282874b..eeef20f 100644
--- a/app/pages/constructeurs.vue
+++ b/app/pages/constructeurs.vue
@@ -49,11 +49,11 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <button class="btn btn-ghost btn-xs" @click="openEditModal(row)">
                 {{ canEdit ? 'Modifier' : 'Consulter' }}
               </button>
-              <button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(row)">
+              <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDelete(row)">
                 Supprimer
               </button>
             </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 0701a13..7527fac 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -102,19 +102,26 @@
         <div
           v-for="site in filteredSites"
           :key="site.id"
-          class="card bg-base-100 shadow-sm overflow-hidden"
+          class="card site-card shadow-md overflow-hidden"
+          :style="{
+            borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
+            background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
+          }"
         >
           <div class="card-body">
             <!-- Site Header -->
             <div class="flex items-start justify-between gap-4">
               <div class="flex items-start gap-4">
                 <div
-                  class="w-11 h-11 rounded-xl bg-primary/10 grid place-items-center shrink-0"
+                  class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
+                  :style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
                 >
-                  <IconLucideMapPin class="w-5 h-5 text-primary" aria-hidden="true" />
+                  <IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
                 </div>
                 <div class="min-w-0">
-                  <h3 class="text-lg font-bold text-base-content tracking-tight">
+                  <h3
+                    class="text-lg font-bold tracking-tight text-base-content"
+                  >
                     {{ site.name }}
                   </h3>
                   <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
@@ -134,7 +141,11 @@
                 </div>
               </div>
               <div class="flex items-center gap-2 shrink-0">
-                <span class="badge badge-primary badge-sm font-semibold">
+                <span
+                  class="badge font-bold"
+                  :style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
+                  :class="!site.color ? 'badge-primary' : ''"
+                >
                   {{ site.machines?.length || 0 }}
                 </span>
                 <button
@@ -163,7 +174,7 @@
                 <div
                   v-for="machine in site.machines"
                   :key="machine.id"
-                  class="group flex flex-col rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
+                  class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
                   @click="viewMachineDetails(machine)"
                 >
                   <div class="flex items-center justify-between mb-2">
@@ -180,21 +191,21 @@
                   <div class="mt-auto pt-3 flex items-center justify-end gap-2">
                     <button
                       v-if="canEdit"
-                      class="btn btn-ghost btn-xs"
+                      class="btn btn-ghost btn-sm"
                       @click.stop="editMachine(machine)"
                     >
                       Modifier
                     </button>
                     <button
                       v-if="canEdit"
-                      class="btn btn-ghost btn-xs text-error"
+                      class="btn btn-ghost btn-sm text-error"
                       @click.stop="confirmDeleteMachine(machine)"
                     >
                       Supprimer
                     </button>
                     <NuxtLink
                       :to="`/machine/${machine.id}`"
-                      class="btn btn-primary btn-xs"
+                      class="btn btn-primary btn-sm"
                       @click.stop
                     >
                       Détails
diff --git a/app/pages/machine/[id].vue b/app/pages/machine/[id].vue
index 521e756..ae7db98 100644
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -39,7 +39,11 @@
         rounded
       >
         <div class="flex justify-center gap-4">
-          <div v-if="d.machine.value.site?.name" class="badge badge-outline">
+          <div
+            v-if="d.machine.value.site?.name"
+            class="badge badge-outline font-semibold"
+            :style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
+          >
             {{ d.machine.value.site?.name }}
           </div>
           <div v-if="d.machine.value.reference" class="badge badge-outline">
diff --git a/app/pages/machines/index.vue b/app/pages/machines/index.vue
index 1afe900..9d03c57 100644
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -65,7 +65,11 @@
         <div
           v-for="machine in filteredMachines"
           :key="machine.id"
-          class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
+          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">
@@ -77,8 +81,11 @@
 
             <div class="space-y-2 text-sm">
               <div class="flex items-center gap-2">
-                <IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
+                <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>
               </div>
 
               <div v-if="machine.reference" class="flex items-center gap-2">
@@ -88,13 +95,13 @@
             </div>
 
             <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-              <button v-if="canEdit" class="btn btn-ghost btn-xs" @click.stop="editMachine(machine)">
+              <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-xs text-error" @click.stop="confirmDeleteMachine(machine)">
+              <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-xs">
+              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
                 Détails
               </NuxtLink>
             </div>
diff --git a/app/pages/pieces-catalog.vue b/app/pages/pieces-catalog.vue
index a902990..e9ca1bf 100644
--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -118,7 +118,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/pieces/${row.piece.id}/edit`"
                 class="btn btn-ghost btn-xs"
@@ -128,7 +128,7 @@
               <button
                 v-if="canEdit"
                 type="button"
-                class="btn btn-error btn-xs"
+                class="btn btn-ghost btn-xs text-error"
                 :disabled="loadingPieces"
                 @click="handleDeletePiece(row.piece)"
               >
diff --git a/app/pages/product-catalog.vue b/app/pages/product-catalog.vue
index d39650f..ebd98f1 100644
--- a/app/pages/product-catalog.vue
+++ b/app/pages/product-catalog.vue
@@ -115,7 +115,7 @@
           </template>
 
           <template #cell-actions="{ row }">
-            <div class="flex justify-end gap-2">
+            <div class="flex items-center justify-end gap-2">
               <NuxtLink
                 :to="`/product/${row.product.id}/edit`"
                 class="btn btn-ghost btn-xs"