diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad1a49e58b508e9e0fcbcf4071788b468b500311
--- /dev/null
+++ b/web/components/management/candidate-lists.js
@@ -0,0 +1,42 @@
+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const candidateListComponent = new CandidateList(parent);
+  await candidateListComponent.mount(where);
+  return candidateListComponent;
+}
+
+class CandidateList {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Liste des candidats
+        </p>
+        <button id="round-new" class="button is-success" disabled>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="candidate-lists-list" class="content">
+          Liste des listes de candidats
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}
diff --git a/web/components/management/round-desks.js b/web/components/management/round-desks.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea924e85a718cef4af6b6b98df802158b7c1f225
--- /dev/null
+++ b/web/components/management/round-desks.js
@@ -0,0 +1,37 @@
+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const roundDesksComponent = new RoundDesk(parent);
+  await roundDesksComponent.mount(where);
+  return roundDesksComponent;
+}
+
+class RoundDesk {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Bureaux de votes
+        </p>
+      </header>
+      <div class="card-content">
+        <div id="round-desks-list" class="content">
+          Liste des bureaux de votes
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}
diff --git a/web/components/management/round.js b/web/components/management/round.js
index 74f89479bea3577d2db82d36237217f080ef90b3..4c89228a97de5eee40611dc964071dc83f1d7637 100644
--- a/web/components/management/round.js
+++ b/web/components/management/round.js
@@ -1,5 +1,8 @@
 // Imports
 import * as Auth from "/services/auth/auth.js";
+import * as RoundsCard from "/components/management/rounds-card.js";
+import * as RoundDesks from "/components/management/round-desks.js";
+import * as CandidateList from "/components/management/candidate-lists.js";
 
 // DOM elements
 
@@ -17,8 +20,25 @@ class Round {
   async mount(where) {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
-      Ceci est un tour d'élection.
+      <div class="columns">
+        <div class="column is-one-quarter">
+          <div id="rounds-list" class="card">
+            Liste des tours
+          </div>
+        </div>
+        <div class="column">
+          <div id="round-desks" class="card card-list">
+            Liste des bureaux d'un tour
+          </div>
+          <div id="candidate-lists" class="card card-list">
+            Liste des listes de candidats d'un tour
+          </div>
+        </div>
+      </div>
     `;
     current_user = await Auth.GetUser();
+    this.roundsHandler = RoundsCard.mount("rounds-list", this)
+    this.roundsHandler = RoundDesks.mount("round-desks", this)
+    this.roundsHandler = CandidateList.mount("candidate-lists", this)
   }
 }
diff --git a/web/components/management/rounds-card.js b/web/components/management/rounds-card.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6c94b05c609836a117d523971db2d18d54786ac
--- /dev/null
+++ b/web/components/management/rounds-card.js
@@ -0,0 +1,40 @@
+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const roundsComponent = new Round(parent);
+  await roundsComponent.mount(where);
+  return roundsComponent;
+}
+
+class Round {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Tours
+        </p>
+        <button id="round-new" class="button is-success">
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="rounds-list" class="content">Liste des tours</div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}
diff --git a/web/style.css b/web/style.css
index 2d78c889105e00db119eab187ff61bbca757b9d1..1c4154cd551cf442dc6356d64203047cd30ff9e9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -107,4 +107,8 @@ img {
 
 .card-content .level-left {
   flex-basis: 70%;
+}
+
+#round-desks{
+  height: 35vh;
 }
\ No newline at end of file