diff --git a/web/components/vote/desk-round.js b/web/components/vote/desk-round.js
index 3c1bd1e232af4f121cc9bc135dd62deef6777c44..f0338d5bdce410f7e5289e018fbe74440b4d8e81 100644
--- a/web/components/vote/desk-round.js
+++ b/web/components/vote/desk-round.js
@@ -3,6 +3,9 @@ import * as Auth from "/services/auth/auth.js";
 import * as ElectionModel from "/services/model/election-model.js";
 import * as RoundModel from "/services/model/round-model.js";
 import * as AreaModel from "/services/model/area-model.js";
+import * as SectionModel from "/services/model/section-model.js";
+import * as DeskModel from "/services/model/desk-model.js";
+import * as DeskRoundModel from "/services/model/deskRound-model.js";
 
 export async function mount(where, parent) {
   const deskRoundComponent = new DeskRoundSelector(parent);
@@ -17,12 +20,18 @@ class DeskRoundSelector {
     this.ElectionModel = ElectionModel.getElectionModel();
     this.RoundModel = RoundModel.getRoundModel();
     this.AreaModel = AreaModel.getAreaModel();
+    this.SectionModel = SectionModel.getSectionModel();
+    this.DeskModel = DeskModel.getDeskModel();
+    this.DeskRoundModel = DeskRoundModel.getDeskRoundModel();
   }
 
   async mount(where) {
     this.ElectionModel.current_user = await Auth.GetUser();
     this.RoundModel.current_user = await Auth.GetUser();
     this.AreaModel.current_user = await Auth.GetUser();
+    this.SectionModel.current_user = await Auth.GetUser();
+    this.DeskModel.current_user = await Auth.GetUser();
+    this.DeskRoundModel.current_user = await Auth.GetUser();
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
@@ -61,7 +70,7 @@ class DeskRoundSelector {
             </div>
           </div>
           <div class="column">
-            <div id="select-desks" class="card"></div>
+            <div id="select-desks"></div>
           </div>
         </div>
       </div>
@@ -70,6 +79,21 @@ class DeskRoundSelector {
     await this.loadElection();
   }
 
+  deskRoundTemplate(deskRound) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="deskrounds-deskround-${deskRound.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div
+              id="deskrounds-deskround-desc-${deskRound.ID}"
+              class="level-left"
+            ></div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
   handleDom() {
     let deskRoundHandler = this;
     document.addEventListener(
@@ -140,7 +164,7 @@ class DeskRoundSelector {
     let deskRoundHandler = this;
     let selectArea = document.getElementById("area-select");
     let areas = await this.AreaModel.getAreas();
-    areas.filter((area) => {
+    areas = areas.filter((area) => {
       return area.ElectionID == deskRoundHandler.ElectionID;
     });
 
@@ -155,5 +179,43 @@ class DeskRoundSelector {
     });
   }
 
-  async loadDesks() {}
+  async loadDesks(AreaID) {
+    this.AreaID = AreaID;
+    let deskRoundHandler = this;
+    let deskRounds = await this.DeskRoundModel.getDeskRounds();
+    deskRounds = deskRounds.filter((deskRound) => {
+      return deskRound.RoundID == deskRoundHandler.RoundID;
+    });
+    let deskRoundsFiltered = [];
+    for (let deskRound of deskRounds) {
+      let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
+      let section = await deskRoundHandler.SectionModel.getSection(
+        desk.SectionID
+      );
+      if (section.AreaID == deskRoundHandler.AreaID)
+        deskRoundsFiltered.push(deskRound);
+    }
+    deskRounds = deskRoundsFiltered;
+    const markup = deskRounds
+      .map((deskRound) => this.deskRoundTemplate(deskRound))
+      .join("");
+    document.getElementById("select-desks").innerHTML = markup;
+
+    deskRounds.map(async (deskRound) => {
+      let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
+      document.getElementById(
+        `deskrounds-deskround-desc-${deskRound.ID}`
+      ).innerHTML = desk.Name;
+      document
+        .getElementById(`deskrounds-deskround-${deskRound.ID}`)
+        .addEventListener("click", async function () {
+          deskRoundHandler.openVotes(deskRound);
+        });
+    });
+  }
+
+  async openVotes(deskRound) {
+      this.parent.VoteHandler.displayVotes(this.RoundID, this.AreaID, deskRound.ID);
+      console.log("Ouverture des votes");
+  }
 }
diff --git a/web/components/vote/votes.js b/web/components/vote/votes.js
index 5fbbdfc43872cbe1f4ef157c6135fe94caa27672..fb806024523ab5032bab28c5adecce76b99cf1d5 100644
--- a/web/components/vote/votes.js
+++ b/web/components/vote/votes.js
@@ -11,4 +11,6 @@ class Vote {
     this.method = null;
     this.parent = parent;
   }
+
+  async displayVotes(RoundID, AreaID, DeskRoundID) {}
 }