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/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})`