diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 1b6457c..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
diff --git a/app/components/TypeComponentForm.vue b/app/components/TypeComponentForm.vue
index ffa6701..65d8b2b 100644
--- a/app/components/TypeComponentForm.vue
+++ b/app/components/TypeComponentForm.vue
@@ -6,48 +6,10 @@
         class="btn btn-outline btn-sm"
         @click="toggleAllComponents"
       >
-        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path 
-            v-if="allExpanded" 
-            stroke-linecap="round" 
-            stroke-linejoin="round" 
-            stroke-width="2" 
-            d="M18 12H6"
-          ></path>
-          <path 
-            v-else 
-            stroke-linecap="round" 
-            stroke-linejoin="round" 
-            stroke-width="2" 
-            d="M12 6v12m6-6H6"
-          ></path>
-        </svg>
-        {{ allExpanded ? 'Tout plier' : 'Tout déplier' }}
-      </button>
-    </div>
-
-    <div 
-      v-for="(component, index) in components" 
-      :key="index" 
-      class="border border-gray-200 rounded-lg p-4 bg-gray-50"
-    >
-      <div class="flex items-center justify-between mb-3">
-        <div class="flex items-center gap-2">
-          <button 
-            type="button"
-            class="btn btn-ghost btn-xs p-1"
-            @click="toggleComponentDetails(index)"
-            title="Plier / déplier le composant"
-          >
-            <svg 
-              class="w-4 h-4 transition-transform duration-200" 
-              :class="{ 'rotate-90': isComponentExpanded(index) }"
-              fill="none" 
-              stroke="currentColor" 
-              viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
+        <IconLucideChevronRight
+          class="w-4 h-4 mr-2"
+          aria-hidden="true"
+        />
           </button>
           <h5 class="text-sm font-medium">Nouveau composant {{ index + 1 }}</h5>
           <span v-if="!isComponentExpanded(index)" class="text-xs text-gray-500 truncate max-w-[160px]">
@@ -59,97 +21,10 @@
           @click="removeComponent(index)" 
           class="btn btn-square btn-error btn-sm"
         >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-
-      <div v-if="isComponentExpanded(index)" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Nom du composant</span>
-          </label>
-          <input 
-            v-model="component.name" 
-            type="text" 
-            placeholder="Nom du composant" 
-            class="input input-bordered input-sm" 
-            required
+          <IconLucideChevronRight
+            class="w-4 h-4"
+            aria-hidden="true"
           />
-        </div>
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Référence</span>
-          </label>
-          <input 
-            v-model="component.reference" 
-            type="text" 
-            placeholder="Référence" 
-            class="input input-bordered input-sm" 
-          />
-        </div>
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Constructeur</span>
-          </label>
-          <input 
-            v-model="component.constructeur" 
-            type="text" 
-            placeholder="Constructeur" 
-            class="input input-bordered input-sm" 
-          />
-        </div>
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">Emplacement</span>
-          </label>
-          <input 
-            v-model="component.emplacement" 
-            type="text" 
-            placeholder="Emplacement" 
-            class="input input-bordered input-sm" 
-          />
-        </div>
-      </div>
-
-      <div v-if="isComponentExpanded(index)" class="mb-4">
-        <div class="flex items-center gap-2 mb-2">
-          <span class="text-xs font-medium text-gray-600">Champs personnalisés du composant :</span>
-          <button 
-            type="button" 
-            @click="addComponentCustomField(index)" 
-            class="btn btn-xs btn-outline"
-          >
-            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-            </svg>
-            Ajouter champ
-          </button>
-        </div>
-        <div class="space-y-2">
-          <div 
-            v-for="(field, fieldIndex) in component.customFields" 
-            :key="fieldIndex"
-            class="border border-gray-200 rounded p-2 bg-white"
-          >
-            <div class="flex items-center justify-between mb-2">
-              <div class="flex items-center gap-1">
-                <button 
-                  type="button"
-                  class="btn btn-ghost btn-xs p-1"
-                  @click="toggleComponentCustomFieldDetails(index, fieldIndex)"
-                  title="Plier / déplier le champ"
-                >
-                  <svg 
-                    class="w-3 h-3 transition-transform duration-200" 
-                    :class="{ 'rotate-90': isComponentCustomFieldExpanded(index, fieldIndex) }"
-                    fill="none" 
-                    stroke="currentColor" 
-                    viewBox="0 0 24 24"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                  </svg>
                 </button>
                 <span class="text-xs font-medium">Champ personnalisé {{ fieldIndex + 1 }}</span>
                 <span v-if="!isComponentCustomFieldExpanded(index, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[120px]">
@@ -161,164 +36,15 @@
                 @click="removeComponentCustomField(index, fieldIndex)" 
                 class="btn btn-square btn-error btn-xs"
               >
-                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-              </button>
-            </div>
-            
-            <div v-if="isComponentCustomFieldExpanded(index, fieldIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-2">
-              <div>
-                <input 
-                  v-model="field.name" 
-                  type="text" 
-                  placeholder="Nom du champ" 
-                  class="input input-bordered input-xs w-full" 
+                <IconLucideChevronRight
+                  class="w-3 h-3"
+                  aria-hidden="true"
                 />
-              </div>
-              <div>
-                <select v-model="field.type" class="select select-bordered select-xs w-full">
-                  <option value="">Type</option>
-                  <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>
-            </div>
-            
-            <div v-if="isComponentCustomFieldExpanded(index, fieldIndex)" class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
-              <div class="flex items-center gap-2">
-                <input 
-                  v-model="field.required" 
-                  type="checkbox" 
-                  class="checkbox checkbox-xs" 
+                </button>
+                <IconLucideChevronRight
+                  class="w-3 h-3 text-red-500"
+                  aria-hidden="true"
                 />
-                <span class="text-xs">Obligatoire</span>
-              </div>
-              <div>
-                <input 
-                  v-model="field.defaultValue" 
-                  type="text" 
-                  placeholder="Valeur par défaut" 
-                  class="input input-bordered input-xs w-full" 
-                />
-              </div>
-            </div>
-            
-            <div v-if="isComponentCustomFieldExpanded(index, fieldIndex) && field.type === 'select'" class="mt-2">
-              <textarea 
-                v-model="field.optionsText" 
-                placeholder="Option 1&#10;Option 2&#10;Option 3" 
-                class="textarea textarea-bordered textarea-xs w-full h-16"
-                @input="updateComponentFieldOptions(index, fieldIndex)"
-              ></textarea>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="isComponentExpanded(index)" class="mb-4">
-        <div class="flex items-center gap-2 mb-2">
-          <span class="text-xs font-medium text-gray-600">Pièces du composant :</span>
-          <button 
-            type="button" 
-            @click="addComponentPiece(index)" 
-            class="btn btn-xs btn-outline"
-          >
-            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-            </svg>
-            Ajouter pièce
-          </button>
-        </div>
-        <div class="space-y-2">
-          <div 
-            v-for="(piece, pieceIndex) in component.pieces" 
-            :key="pieceIndex"
-            class="border border-gray-200 rounded p-2 bg-white"
-          >
-            <div class="flex items-center justify-between mb-2">
-              <div class="flex items-center gap-2">
-                <button 
-                  type="button"
-                  class="btn btn-ghost btn-xs p-1"
-                  @click="toggleComponentPieceDetails(index, pieceIndex)"
-                  title="Plier / déplier la pièce"
-                >
-                  <svg 
-                    class="w-3 h-3 transition-transform duration-200" 
-                    :class="{ 'rotate-90': isComponentPieceExpanded(index, pieceIndex) }"
-                    fill="none" 
-                    stroke="currentColor" 
-                    viewBox="0 0 24 24"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                  </svg>
-                </button>
-                <svg class="w-3 h-3 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                </svg>
-                <span class="text-xs font-medium">Pièce {{ pieceIndex + 1 }}</span>
-                <template v-if="isComponentPieceExpanded(index, pieceIndex)">
-                  <input 
-                    v-model="component.pieces[pieceIndex].name" 
-                    type="text" 
-                    :placeholder="`Nom de la pièce ${pieceIndex + 1}`" 
-                    class="input input-bordered input-xs flex-1" 
-                  />
-                </template>
-                <span v-else class="text-[10px] text-gray-500 truncate max-w-[120px]">
-                  {{ piece.name || 'Sans nom' }}
-                </span>
-              </div>
-              <div class="flex gap-1">
-                <button 
-                  type="button" 
-                  @click="addComponentPieceCustomField(index, pieceIndex)" 
-                  class="btn btn-xs btn-ghost"
-                >
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                  </svg>
-                </button>
-                <button 
-                  type="button" 
-                  @click="removeComponentPiece(index, pieceIndex)" 
-                  class="btn btn-square btn-error btn-xs"
-                >
-                  <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            
-            <div v-if="isComponentPieceExpanded(index, pieceIndex) && piece.customFields && piece.customFields.length > 0" class="mt-2 ml-4">
-              <div class="space-y-1">
-                <div 
-                  v-for="(field, fieldIndex) in piece.customFields" 
-                  :key="fieldIndex"
-                  class="border border-gray-200 rounded p-1 bg-gray-50"
-                >
-                  <div class="flex items-center justify-between mb-1">
-                    <div class="flex items-center gap-1">
-                      <button 
-                        type="button"
-                        class="btn btn-ghost btn-xs p-1"
-                        @click="toggleComponentPieceCustomFieldDetails(index, pieceIndex, fieldIndex)"
-                        title="Plier / déplier le champ"
-                      >
-                        <svg 
-                          class="w-3 h-3 transition-transform duration-200" 
-                          :class="{ 'rotate-90': isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex) }"
-                          fill="none" 
-                          stroke="currentColor" 
-                          viewBox="0 0 24 24"
-                        >
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                        </svg>
                       </button>
                       <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
                       <span v-if="!isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
@@ -330,165 +56,15 @@
                       @click="removeComponentPieceCustomField(index, pieceIndex, fieldIndex)" 
                       class="btn btn-square btn-error btn-xs"
                     >
-                      <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                      </svg>
-                    </button>
-                  </div>
-
-                  <div v-if="isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex)" class="grid grid-cols-2 gap-1">
-                    <input 
-                      v-model="field.name" 
-                      type="text" 
-                      placeholder="Nom" 
-                      class="input input-bordered input-xs" 
-                    />
-                    <select v-model="field.type" class="select select-bordered select-xs">
-                      <option value="">Type</option>
-                      <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>
-
-                  <div v-if="isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex)" class="grid grid-cols-2 gap-1 mt-1">
-                    <div class="flex items-center gap-1">
-                      <input 
-                        v-model="field.required" 
-                        type="checkbox" 
-                        class="checkbox checkbox-xs" 
+                      <IconLucideChevronRight
+                        class="w-2 h-2"
+                        aria-hidden="true"
                       />
-                      <span class="text-xs">Obligatoire</span>
-                    </div>
-                    <input 
-                      v-model="field.defaultValue" 
-                      type="text" 
-                      placeholder="Défaut" 
-                      class="input input-bordered input-xs" 
-                    />
-                  </div>
-
-                  <div v-if="isComponentPieceCustomFieldExpanded(index, pieceIndex, fieldIndex) && field.type === 'select'" class="mt-1">
-                    <textarea 
-                      v-model="field.optionsText" 
-                      placeholder="Option 1&#10;Option 2&#10;Option 3" 
-                      class="textarea textarea-bordered textarea-xs w-full h-12"
-                      @input="updateComponentPieceFieldOptions(index, pieceIndex, fieldIndex)"
-                    ></textarea>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="isComponentExpanded(index)" class="ml-6 space-y-2">
-        <div class="flex items-center gap-2 mb-2">
-          <span class="text-xs font-medium text-gray-600">Sous-composants :</span>
-          <button 
-            type="button" 
-            @click="addSubComponent(index)" 
-            class="btn btn-xs btn-outline"
-          >
-            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-            </svg>
-            Ajouter
-          </button>
-        </div>
-
-        <div 
-          v-for="(subComponent, subIndex) in component.subComponents" 
-          :key="subIndex"
-          class="border border-gray-200 rounded p-3 bg-white"
-        >
-          <div class="flex items-center justify-between mb-2">
-            <div class="flex items-center gap-2">
-              <button 
-                type="button"
-                class="btn btn-ghost btn-xs p-1"
-                @click="toggleSubComponentDetails(index, subIndex)"
-                title="Plier / déplier le sous-composant"
-              >
-                <svg 
-                  class="w-3 h-3 transition-transform duration-200" 
-                  :class="{ 'rotate-90': isSubComponentExpanded(index, subIndex) }"
-                  fill="none" 
-                  stroke="currentColor" 
-                  viewBox="0 0 24 24"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
               </button>
-              <svg class="w-3 h-3 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <span class="text-xs font-medium">Sous-composant {{ subIndex + 1 }}</span>
-              <template v-if="isSubComponentExpanded(index, subIndex)">
-                <input 
-                  v-model="subComponent.name" 
-                  type="text" 
-                  :placeholder="`Sous-composant ${subIndex + 1}`" 
-                  class="input input-bordered input-xs flex-1" 
-                  required
-                />
-              </template>
-              <span v-else class="text-[10px] text-gray-500 truncate max-w-[140px]">
-                {{ subComponent.name || 'Sans nom' }}
-              </span>
-            </div>
-            <button 
-              type="button" 
-              @click="removeSubComponent(index, subIndex)" 
-              class="btn btn-square btn-error btn-xs"
-            >
-              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-              </svg>
-            </button>
-          </div>
-
-          <div v-if="isSubComponentExpanded(index, subIndex)" class="space-y-3">
-            <div class="mb-2">
-              <div class="flex items-center gap-2 mb-1">
-                <span class="text-xs text-gray-500">Champs personnalisés :</span>
-                <button 
-                  type="button" 
-                  @click="addSubComponentCustomField(index, subIndex)" 
-                  class="btn btn-xs btn-ghost"
-                >
-                  <svg class="w-2 h-2 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                  </svg>
-                  +
-                </button>
-              </div>
-              <div class="space-y-1">
-                <div 
-                  v-for="(field, fieldIndex) in subComponent.customFields" 
-                  :key="fieldIndex"
-                  class="border border-gray-100 rounded p-1 bg-gray-50"
-                >
-                  <div class="flex items-center justify-between mb-1">
-                    <div class="flex items-center gap-1">
-                      <button 
-                        type="button"
-                        class="btn btn-ghost btn-xs p-1"
-                        @click="toggleSubComponentCustomFieldDetails(index, subIndex, fieldIndex)"
-                        title="Plier / déplier le champ"
-                      >
-                        <svg 
-                          class="w-3 h-3 transition-transform duration-200" 
-                          :class="{ 'rotate-90': isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex) }"
-                          fill="none" 
-                          stroke="currentColor" 
-                          viewBox="0 0 24 24"
-                        >
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                        </svg>
+              <IconLucideChevronRight
+                class="w-3 h-3 text-green-500"
+                aria-hidden="true"
+              />
                       </button>
                       <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
                       <span v-if="!isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
@@ -500,149 +76,15 @@
                       @click="removeSubComponentCustomField(index, subIndex, fieldIndex)" 
                       class="btn btn-square btn-error btn-xs"
                     >
-                      <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                      </svg>
-                    </button>
-                  </div>
-
-                  <div v-if="isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex)" class="grid grid-cols-2 gap-1">
-                    <input 
-                      v-model="field.name" 
-                      type="text" 
-                      placeholder="Nom" 
-                      class="input input-bordered input-xs" 
-                    />
-                    <select v-model="field.type" class="select select-bordered select-xs">
-                      <option value="">Type</option>
-                      <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>
-
-                  <div v-if="isSubComponentCustomFieldExpanded(index, subIndex, fieldIndex)" class="grid grid-cols-2 gap-1 mt-1">
-                    <div class="flex items-center gap-1">
-                      <input 
-                        v-model="field.required" 
-                        type="checkbox" 
-                        class="checkbox checkbox-xs" 
+                      <IconLucideChevronRight
+                        class="w-2 h-2"
+                        aria-hidden="true"
                       />
-                      <span class="text-xs">Obligatoire</span>
-                    </div>
-                    <input 
-                      v-model="field.defaultValue" 
-                      type="text" 
-                      placeholder="Défaut" 
-                      class="input input-bordered input-xs" 
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="mb-2">
-              <div class="flex items-center gap-2 mb-1">
-                <span class="text-xs text-gray-500">Pièces :</span>
-                <button 
-                  type="button" 
-                  @click="addSubComponentPiece(index, subIndex)" 
-                  class="btn btn-xs btn-ghost"
-                >
-                  <svg class="w-2 h-2 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                  </svg>
-                  +
-                </button>
-              </div>
-              <div class="space-y-1">
-                <div 
-                  v-for="(piece, pieceIndex) in subComponent.pieces" 
-                  :key="pieceIndex"
-                  class="border border-gray-100 rounded p-1 bg-gray-50"
-                >
-                  <div class="flex items-center justify-between mb-1">
-                    <div class="flex items-center gap-1">
-                      <button 
-                        type="button"
-                        class="btn btn-ghost btn-xs p-1"
-                        @click="toggleSubComponentPieceDetails(index, subIndex, pieceIndex)"
-                        title="Plier / déplier la pièce"
-                      >
-                        <svg 
-                          class="w-2 h-2 transition-transform duration-200" 
-                          :class="{ 'rotate-90': isSubComponentPieceExpanded(index, subIndex, pieceIndex) }"
-                          fill="none" 
-                          stroke="currentColor" 
-                          viewBox="0 0 24 24"
-                        >
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                        </svg>
                       </button>
-                      <svg class="w-2 h-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
-                      </svg>
-                      <span class="text-xs">Pièce {{ pieceIndex + 1 }}</span>
-                      <template v-if="isSubComponentPieceExpanded(index, subIndex, pieceIndex)">
-                        <input 
-                          v-model="subComponent.pieces[pieceIndex].name" 
-                          type="text" 
-                          :placeholder="`Nom de la pièce ${pieceIndex + 1}`" 
-                          class="input input-bordered input-xs flex-1" 
-                        />
-                      </template>
-                      <span v-else class="text-[10px] text-gray-500 truncate max-w-[120px]">
-                        {{ piece.name || 'Sans nom' }}
-                      </span>
-                    </div>
-                    <div class="flex gap-1">
-                      <button 
-                        type="button" 
-                        @click="addSubComponentPieceCustomField(index, subIndex, pieceIndex)" 
-                        class="btn btn-xs btn-ghost"
-                      >
-                        <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                        </svg>
-                      </button>
-                      <button 
-                        type="button" 
-                        @click="removeSubComponentPiece(index, subIndex, pieceIndex)" 
-                        class="btn btn-square btn-error btn-xs"
-                      >
-                        <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-
-                  <div v-if="isSubComponentPieceExpanded(index, subIndex, pieceIndex) && piece.customFields && piece.customFields.length > 0" class="mt-1 ml-3">
-                    <div class="space-y-1">
-                      <div 
-                        v-for="(field, fieldIndex) in piece.customFields" 
-                        :key="fieldIndex"
-                        class="border border-gray-50 rounded p-1 bg-gray-25"
-                      >
-                        <div class="flex items-center justify-between mb-1">
-                          <div class="flex items-center gap-1">
-                            <button 
-                              type="button"
-                              class="btn btn-ghost btn-xs p-1"
-                              @click="toggleSubComponentPieceCustomFieldDetails(index, subIndex, pieceIndex, fieldIndex)"
-                              title="Plier / déplier le champ"
-                            >
-                              <svg 
-                                class="w-2 h-2 transition-transform duration-200" 
-                                :class="{ 'rotate-90': isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex) }"
-                                fill="none" 
-                                stroke="currentColor" 
-                                viewBox="0 0 24 24"
-                              >
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                              </svg>
+                      <IconLucideChevronRight
+                        class="w-2 h-2 text-red-500"
+                        aria-hidden="true"
+                      />
                             </button>
                             <span class="text-xs">Champ {{ fieldIndex + 1 }}</span>
                             <span v-if="!isSubComponentPieceCustomFieldExpanded(index, subIndex, pieceIndex, fieldIndex)" class="text-[10px] text-gray-500 truncate max-w-[100px]">
@@ -654,9 +96,10 @@
                             @click="removeSubComponentPieceCustomField(index, subIndex, pieceIndex, fieldIndex)" 
                             class="btn btn-square btn-error btn-xs"
                           >
-                            <svg class="w-2 h-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                            </svg>
+                            <IconLucideX
+                              class="w-2 h-2"
+                              aria-hidden="true"
+                            />
                           </button>
                         </div>
 
@@ -718,9 +161,10 @@
       @click="addComponent" 
       class="btn btn-outline btn-sm"
     >
-      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-      </svg>
+      <IconLucidePlus
+        class="w-4 h-4 mr-2"
+        aria-hidden="true"
+      />
       Ajouter un composant
     </button>
   </div>
@@ -728,6 +172,9 @@
 
 <script setup>
 import { ref, reactive, onMounted, watch } from 'vue'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import IconLucideX from '~icons/lucide/x'
+import IconLucidePlus from '~icons/lucide/plus'
 
 const props = defineProps({
   modelValue: {
diff --git a/app/components/TypeEditToolbar.vue b/app/components/TypeEditToolbar.vue
index ab15cff..9c182cb 100644
--- a/app/components/TypeEditToolbar.vue
+++ b/app/components/TypeEditToolbar.vue
@@ -1,28 +1,17 @@
 <template>
   <div class="flex justify-end">
     <button type="button" class="btn btn-outline btn-sm" @click="$emit('toggle')">
-      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path
-          v-if="allExpanded"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M18 12H6"
-        />
-        <path
-          v-else
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M12 6v12m6-6H6"
-        />
-      </svg>
+      <IconLucideMinus v-if="allExpanded" class="w-4 h-4 mr-2" aria-hidden="true" />
+      <IconLucidePlus v-else class="w-4 h-4 mr-2" aria-hidden="true" />
       {{ allExpanded ? 'Tout plier' : 'Tout déplier' }}
     </button>
   </div>
 </template>
 
 <script setup>
+import IconLucideMinus from '~icons/lucide/minus'
+import IconLucidePlus from '~icons/lucide/plus'
+
 defineProps({
   allExpanded: {
     type: Boolean,
diff --git a/app/pages/constructeurs.vue b/app/pages/constructeurs.vue
index dc96978..74f47fa 100644
--- a/app/pages/constructeurs.vue
+++ b/app/pages/constructeurs.vue
@@ -6,9 +6,7 @@
         <p class="text-sm text-gray-500">Gérez les constructeurs et leurs coordonnées.</p>
       </div>
       <button class="btn btn-primary" @click="openCreateModal">
-        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6" />
-        </svg>
+        <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
         Nouveau constructeur
       </button>
     </div>
@@ -108,6 +106,7 @@
 import { ref, computed } from 'vue'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import { useToast } from '~/composables/useToast'
+import IconLucidePlus from '~icons/lucide/plus'
 
 const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
 const { showError, showSuccess } = useToast()
diff --git a/app/pages/profiles/index.vue b/app/pages/profiles/index.vue
index 34362f7..3e76b0b 100644
--- a/app/pages/profiles/index.vue
+++ b/app/pages/profiles/index.vue
@@ -31,9 +31,7 @@
                 @click="selectProfile(profile.id)"
               >
                 <span>{{ profile.firstName }} {{ profile.lastName }}</span>
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                </svg>
+                <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
               </button>
             </div>
             <p v-else class="text-sm text-base-content/60">Aucun profil enregistré.</p>
@@ -59,6 +57,7 @@ import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useProfiles } from '#imports'
 import { useProfileSession } from '#imports'
+import IconLucideChevronRight from '~icons/lucide/chevron-right'
 
 const router = useRouter()
 const { profiles, loadingProfiles, fetchProfiles } = useProfiles()
diff --git a/app/pages/type/edit/[id].vue b/app/pages/type/edit/[id].vue
index fa1fe4d..b704110 100644
--- a/app/pages/type/edit/[id].vue
+++ b/app/pages/type/edit/[id].vue
@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
@@ -61,7 +61,7 @@ const loading = ref(true)
 const saving = ref(false)
 
 // Données éditées du type
-const editedType = reactive({
+const editedType = ref({
   name: '',
   description: '',
   category: '',
@@ -75,11 +75,13 @@ const saveChanges = async () => {
   try {
     saving.value = true
 
+    const currentEditedType = editedType.value
+
     // Préparer les données pour l'API
     const updatedType = {
-      ...editedType,
+      ...currentEditedType,
       // Traiter les champs personnalisés
-      customFields: editedType.customFields
+      customFields: (currentEditedType.customFields || [])
         .filter(field => field.name.trim() !== '')
         .map(field => ({
           name: field.name,
@@ -91,7 +93,7 @@ const saveChanges = async () => {
             : []
         })),
       // Traiter les pièces principales
-      machinePieces: editedType.machinePieces
+      machinePieces: (currentEditedType.machinePieces || [])
         .filter(piece => piece.name.trim() !== '')
         .map(piece => ({
           name: piece.name,
@@ -112,7 +114,7 @@ const saveChanges = async () => {
             }))
         })),
       // Traiter les composants
-      components: editedType.components
+      components: (currentEditedType.components || [])
         .filter(comp => comp.name.trim() !== '')
         .map(comp => ({
           name: comp.name,
@@ -185,7 +187,7 @@ onMounted(async () => {
       console.log('Type loaded successfully:', type.value)
       
       // Initialiser les données éditées
-      Object.assign(editedType, {
+      editedType.value = {
         name: type.value.name || '',
         description: type.value.description || '',
         category: type.value.category || '',
@@ -193,7 +195,7 @@ onMounted(async () => {
         customFields: type.value.customFields || [],
         machinePieces: type.value.machinePieces || [],
         components: type.value.components || []
-      })
+      }
     } else {
       console.error('Failed to load type:', result.error)
       showError('Type non trouvé')
diff --git a/package-lock.json b/package-lock.json
index c9b2d3b..eda10da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,10 @@
         "vue": "^3.5.17",
         "vue-router": "^4.5.1"
       },
-      "devDependencies": {}
+      "devDependencies": {
+        "@iconify-json/lucide": "^1.2.68",
+        "unplugin-icons": "^0.19.3"
+      }
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
@@ -42,6 +45,47 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.1.tgz",
+      "integrity": "sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.0",
+        "tinyexec": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/install-pkg/node_modules/package-manager-detector": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
+      "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quansync": "^0.2.7"
+      }
+    },
+    "node_modules/@antfu/install-pkg/node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
+      "integrity": "sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -993,6 +1037,64 @@
       "integrity": "sha512-5DGmA8FTdB2XbDeEwc/5ZXBl6UbBAyBOOLlPuBnZ/N1SwdH9Ii+cOX3tBROlDgcTXxjOYnLMVoKk9+FXAw0CJw==",
       "license": "MIT"
     },
+    "node_modules/@iconify-json/lucide": {
+      "version": "1.2.68",
+      "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.68.tgz",
+      "integrity": "sha512-lR5xNJdn2CT0iR7lM25G4SewBO4G2hbr3fTWOc3AE9BspflEcneh02E3l9TBaCU/JOHozTJevWLrxBGypD7Tng==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -7463,6 +7565,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globby": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
@@ -8478,6 +8593,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/kuler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
@@ -12719,6 +12841,99 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/unplugin-icons": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.19.3.tgz",
+      "integrity": "sha512-EUegRmsAI6+rrYr0vXjFlIP+lg4fSC4zb62zAZKx8FGXlWAGgEGBCa3JDe27aRAXhistObLPbBPhwa/0jYLFkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^0.4.1",
+        "@antfu/utils": "^0.7.10",
+        "@iconify/utils": "^2.1.29",
+        "debug": "^4.3.6",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^0.5.0",
+        "unplugin": "^1.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@svgr/core": ">=7.0.0",
+        "@svgx/core": "^1.0.1",
+        "@vue/compiler-sfc": "^3.0.2 || ^2.7.0",
+        "vue-template-compiler": "^2.6.12",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "peerDependenciesMeta": {
+        "@svgr/core": {
+          "optional": true
+        },
+        "@svgx/core": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        },
+        "vue-template-es2015-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unplugin-icons/node_modules/local-pkg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/unplugin-icons/node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",