diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index 533831dcf85b501279a773c60a7f9ec0e389b1d8..5c9bab1fff66144fa77d7a78b56ed4f25bc84f30 100644
--- a/web/components/management/candidate-lists.js
+++ b/web/components/management/candidate-lists.js
@@ -1,5 +1,6 @@
 // Imports
 import * as Auth from "/services/auth/auth.js";
+import * as AreaModel from "/services/model/area-model.js";
 
 // DOM elements
 
@@ -16,14 +17,16 @@ class CandidateList {
   constructor(parent) {
     this.method = null;
     this.parent = parent;
+    this.AreaModel = AreaModel.getAreaModel();
   }
 
   async mount(where) {
+    this.AreaModel.current_user = await Auth.GetUser();
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
         <p class="card-header-title">
-          Liste des candidats
+          Liste des candidats par circonscription
         </p>
         <button id="candidate-list-new" class="button is-success" disabled>
           <span class="icon is-small">
@@ -31,12 +34,68 @@ class CandidateList {
           </span>
         </button>
       </header>
-      <div class="card-content">
-        <div id="candidate-lists-list" class="content">
-          Liste des listes de candidats
+        <div class="columns card-content">
+          <div class="column">
+            <div id="areas-round"></div>
+          </div>
+          <div class="column">
+            <div id="desk-round-details"></div>
+          </div>
+          <div class="column">
+            <div id="active-capturer" class="card"></div>
+          </div>
+          <div class="column">
+            <div id="available-capturer" class="card"></div>
+          </div>
         </div>
-      </div>
     `;
     current_user = await Auth.GetUser();
   }
+
+  areaTemplate(area) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="areas-area-${area.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div class="level-left">
+              ${area.Name} (Nombre de siège : ${area.SeatNumber})
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  async displayAreas() {
+    let candidateListHandler = this;
+    let areas = await this.updateAreas();
+    const markup = areas.map((area) => this.areaTemplate(area)).join("");
+    document.getElementById("areas-round").innerHTML = markup;
+
+    areas.map((area) => {
+      document
+        .getElementById(`areas-area-${area.ID}`)
+        .addEventListener("click", async function () {
+          await candidateListHandler.activateArea(area);
+          candidateListHandler.area = area;
+          await candidateListHandler.displayCandidateLists();
+        });
+    });
+  }
+
+  async updateAreas() {
+    let candidateListHandler = this;
+    let areas = await this.AreaModel.getAreas();
+    return areas.filter(function (area) {
+      return area.ElectionID == candidateListHandler.round.ElectionID;
+    });
+  }
+
+  async activateArea(){
+
+  }
+
+  async displayCandidateLists(){
+
+  }
 }
diff --git a/web/components/management/round-desks.js b/web/components/management/round-desks.js
index 17d2ae6d873e9b739898869223538efa6c7b4543..cf36d2b021f9c2afe3bd59510c8323e957400f05 100644
--- a/web/components/management/round-desks.js
+++ b/web/components/management/round-desks.js
@@ -55,7 +55,6 @@ class RoundDesk {
   handleDom() {
     let roundHandler = this;
     document.getElementById(`round-new`).addEventListener("click", function () {
-      roundHandler.newRound();
     });
 
     document
diff --git a/web/components/management/rounds-card.js b/web/components/management/rounds-card.js
index e3a1c4cb3f0eef7f6db4e1266eb2300a602ef748..06d2b9aad2ab8751610d3e456a1b35fe5f15b13f 100644
--- a/web/components/management/rounds-card.js
+++ b/web/components/management/rounds-card.js
@@ -177,6 +177,8 @@ class Round {
             .getElementById("candidate-list-new")
             .setAttribute("disabled", "true");
           // TODO open candidate list
+          roundHandler.parent.candidateListHandler.round = round;
+          roundHandler.parent.candidateListHandler.displayAreas();
         });
     });
   }
@@ -252,9 +254,10 @@ class Round {
     if (this.method == "POST")
       document.getElementById("round-modal-id").value = null;
 
-    let round = this.RoundModel.saveRound(
+    let round = await this.RoundModel.saveRound(
       this.method,
       parseInt(document.getElementById("round-modal-id").value),
+      parseInt(document.getElementById("round-modal-election-id").value),
       document.getElementById("round-modal-date").value,
       parseInt(document.getElementById("round-modal-round").value)
     );
@@ -267,7 +270,7 @@ class Round {
   }
 
   async deleteRound(round) {
-    await this.RoundModel.deleteRound(round.ID)
+    await this.RoundModel.deleteRound(round.ID);
     await this.displayRounds();
     // TODO empty desks
     // TODO empty candidateLists
diff --git a/web/services/model/round-model.js b/web/services/model/round-model.js
index c82872cd76c484e3dcccbba108026952b009bc78..295b1bca6dff30efc50e4ec0ff61b27c2112c450 100644
--- a/web/services/model/round-model.js
+++ b/web/services/model/round-model.js
@@ -51,7 +51,7 @@ class RoundModel {
             {
               method: method,
               headers: new Headers({
-                "XSRF-Token": current_user.xsrftoken,
+                "XSRF-Token": this.current_user.xsrftoken,
               }),
               body: JSON.stringify({
                 ID: ID,
@@ -75,7 +75,7 @@ class RoundModel {
     }
   }
 
-  async deleteRounds(ID) {
+  async deleteRound(ID) {
     try {
       const response = await fetch("/api/Round/" + ID, {
         method: "delete",
@@ -92,6 +92,7 @@ class RoundModel {
       Messages.Show("is-warning", e.message);
       console.error(e);
     }
+    this.refreshRounds();
   }
 
   async refreshRounds() {
diff --git a/web/style.css b/web/style.css
index b75e09429e22f0ada035d7f7e1f5746a6f310e59..4637e916fd8157c49a34cb3904ed49e3f262b344 100644
--- a/web/style.css
+++ b/web/style.css
@@ -110,15 +110,15 @@ select {
   flex-basis: 70%;
 }
 
-#round-desks {
+#round-desks, #candidate-lists {
   height: 35vh;
 }
 
-#round-desks .column {
+#round-desks .column, #candidate-lists .column {
   overflow-y: auto;
 }
 
-#round-desks .columns {
+#round-desks .columns, #candidate-lists .columns {
   max-height: 90%;
 }