diff --git a/web/components/management/area.js b/web/components/management/area.js
index 60eeb31d0038f449632c602313348f4e9e21ded4..16c5fc0dde866df297131698e0962313e0f9d22a 100644
--- a/web/components/management/area.js
+++ b/web/components/management/area.js
@@ -105,6 +105,12 @@ class Area {
               <input class="input" type="number" id="area-modal-seat-number" />
             </div>
           </div>
+          <div class="field">
+            <label>Identifiant de carte</label>
+            <div class="control">
+              <input class="input" type="number" id="area-modal-mapID" />
+            </div>
+          </div>
         </section>
         <footer class="modal-card-foot">
           <button id="area-modal-save" class="button is-success">
@@ -227,6 +233,7 @@ class Area {
     document.getElementById("area-modal-id").value = null;
     document.getElementById("area-modal-name").value = election.Name;
     document.getElementById("area-modal-seat-number").value = null;
+    document.getElementById("area-modal-mapID").value = null;
     Common.toggleModal("area-modal", "area-modal-card");
   }
 
@@ -235,6 +242,7 @@ class Area {
     document.getElementById("area-modal-id").value = area.ID;
     document.getElementById("area-modal-name").value = area.Name;
     document.getElementById("area-modal-seat-number").value = area.SeatNumber;
+    document.getElementById("area-modal-mapID").value = area.MapID;
     Common.toggleModal("area-modal", "area-modal-card");
   }
 
@@ -247,7 +255,8 @@ class Area {
       parseInt(document.getElementById("area-modal-id").value),
       this.election.ID,
       document.getElementById("area-modal-name").value,
-      parseInt(document.getElementById("area-modal-seat-number").value)
+      parseInt(document.getElementById("area-modal-seat-number").value),
+      document.getElementById("area-modal-mapID").value
     );
     await this.displayAreas();
     Common.toggleModal("area-modal", "area-modal-card");
@@ -270,8 +279,6 @@ class Area {
     await this.displayAreas();
     this.parent.sectionHandler.emptySections();
     this.parent.deskHandler.emptyDesks();
-    document.getElementById("desk-new").setAttribute("disabled", "true");
-    document.getElementById("section-new").setAttribute("disabled", "true");
   }
 
   async cloneAreas(electionCloned, electionToClone) {
@@ -283,7 +290,8 @@ class Area {
         null,
         electionCloned.ID,
         areaToClone.Name,
-        areaToClone.SeatNumber
+        areaToClone.SeatNumber,
+        areaToClone.MapID
       );
 
       await areaHandler.parent.sectionHandler.cloneSections(
diff --git a/web/components/management/section.js b/web/components/management/section.js
index a262d7d318045e3303f10e2a5e258eb5f43ca972..18e003d1274194639162cc1484cd108719915d04 100644
--- a/web/components/management/section.js
+++ b/web/components/management/section.js
@@ -106,6 +106,12 @@ class Section {
               <input class="input" type="text" id="section-modal-name" />
             </div>
           </div>
+          <div class="field">
+            <label>Identifiant de carte</label>
+            <div class="control">
+              <input class="input" type="number" id="section-modal-mapID" />
+            </div>
+          </div>
         </section>
         <footer class="modal-card-foot">
           <button id="section-modal-save" class="button is-success">
@@ -167,11 +173,9 @@ class Section {
         });
     });
 
-    document
-      .getElementById(`section-new`)
-      .addEventListener("click", () => {
-        this.newSection(this.area);
-      });
+    document.getElementById(`section-new`).addEventListener("click", () => {
+      this.newSection(this.area);
+    });
   }
 
   emptySections() {
@@ -231,6 +235,7 @@ class Section {
     this.area = area;
     document.getElementById("section-modal-id").value = null;
     document.getElementById("section-modal-name").value = area.Name;
+    document.getElementById("section-modal-mapID").value = null;
     Common.toggleModal("section-modal", "section-modal-card");
   }
 
@@ -238,6 +243,7 @@ class Section {
     this.method = "PUT";
     document.getElementById("section-modal-id").value = section.ID;
     document.getElementById("section-modal-name").value = section.Name;
+    document.getElementById("section-modal-mapID").value = section.MapID;
     Common.toggleModal("section-modal", "section-modal-card");
   }
 
@@ -250,7 +256,8 @@ class Section {
       this.method,
       parseInt(document.getElementById("section-modal-id").value),
       this.area.ID,
-      document.getElementById("section-modal-name").value
+      document.getElementById("section-modal-name").value,
+      document.getElementById("section-modal-mapID").value
     );
     await this.displaySections();
     Common.toggleModal("section-modal", "section-modal-card");
@@ -272,7 +279,6 @@ class Section {
     await this.SectionModel.deleteSections(section.ID);
     this.displaySections();
     this.parent.deskHandler.emptyDesks();
-    document.getElementById("desk-new").setAttribute("disabled", "true");
   }
 
   async cloneSections(areaCloned, areaToClone) {
@@ -286,7 +292,8 @@ class Section {
           "POST",
           null,
           areaCloned.ID,
-          sectionToClone.Name
+          sectionToClone.Name,
+          sectionToClone.MapID
         );
         await sectionHandler.parent.deskHandler.cloneDesks(
           sectionCloned,
diff --git a/web/services/model/area-model.js b/web/services/model/area-model.js
index f89bba66312004b79d32b7b90326b68d099f1d32..c509c5765b3766e623319d8fedc526d02151b06e 100644
--- a/web/services/model/area-model.js
+++ b/web/services/model/area-model.js
@@ -44,23 +44,21 @@ class AreaModel {
     return this.areas;
   }
 
-  async saveArea(method, ID, ElectionID, Name, SeatNumber) {
+  async saveArea(method, ID, ElectionID, Name, SeatNumber, MapID) {
     try {
-      const response = await fetch(
-        "/api/Area/" + ID,
-        {
-          method: method,
-          headers: new Headers({
-            "XSRF-Token": this.current_user.xsrftoken,
-          }),
-          body: JSON.stringify({
-            ID: ID,
-            ElectionID: ElectionID,
-            Name: Name,
-            SeatNumber: SeatNumber,
-          }),
-        }
-      );
+      const response = await fetch("/api/Area/" + ID, {
+        method: method,
+        headers: new Headers({
+          "XSRF-Token": this.current_user.xsrftoken,
+        }),
+        body: JSON.stringify({
+          ID: ID,
+          ElectionID: ElectionID,
+          Name: Name,
+          SeatNumber: SeatNumber,
+          MapID: MapID,
+        }),
+      });
       if (response.status !== 200) {
         throw new Error(
           `Area could not be updated or created (status ${response.status})`
diff --git a/web/services/model/section-model.js b/web/services/model/section-model.js
index 96c4a2815b3b949894fe3fb160d8b087691f84ed..4c177f324c6c99f164e610122bf500e571aa13d9 100644
--- a/web/services/model/section-model.js
+++ b/web/services/model/section-model.js
@@ -44,7 +44,7 @@ class SectionModel {
     return this.sections;
   }
 
-  async saveSection(method, ID, AreaID, Name) {
+  async saveSection(method, ID, AreaID, Name, MapID) {
     try {
       const response = await fetch("/api/Section/" + ID, {
         method: method,
@@ -55,6 +55,7 @@ class SectionModel {
           ID: ID,
           AreaID: AreaID,
           Name: Name,
+          MapID: MapID,
         }),
       });
       if (response.status !== 200) {