diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index 18fefaa0be280b3fae2a49da937d0b0e662bc7e1..1f77a2d017f95e3b62da0273307cd312cbdcfb1d 100644
--- a/web/components/management/candidate-lists.js
+++ b/web/components/management/candidate-lists.js
@@ -120,6 +120,26 @@ class CandidateList {
     </div>`;
   }
 
+  candidateListToCloneTemplate(candidateList) {
+    return /* HTML */ `<div class="card card-list">
+      <div
+        id="candidateLists-candidateListToClone-${candidateList.ID}"
+        class="card-content clickable"
+      >
+        <div class="content">
+          <nav class="level">
+            <div
+              id="candidateLists-candidateList-desc-${candidateList.ID}"
+              class="level-left"
+            >
+              ${candidateList.Name}
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
   mountModal(where) {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
@@ -186,7 +206,7 @@ class CandidateList {
             id="candidateList-clone-modal-close"
           ></button>
         </header>
-        <section class="modal-card-body"></section>
+        <section id="candidateLists-toclone" class="modal-card-body"></section>
       </div>
     `;
   }
@@ -370,7 +390,10 @@ class CandidateList {
     document
       .getElementById(`candidateList-clone-modal-close`)
       .addEventListener("click", function () {
-        Common.toggleModal("candidateList-clone-modal", "candidateList-clone-modal-card");
+        Common.toggleModal(
+          "candidateList-clone-modal",
+          "candidateList-clone-modal-card"
+        );
       });
     document
       .getElementById(`candidateList-modal-save`)
@@ -513,7 +536,7 @@ class CandidateList {
     document
       .getElementById(`candidate-list-clone`)
       .addEventListener("click", function () {
-        candidateListHandler.cloneCandidateList();
+        candidateListHandler.cloneCandidateListModal();
       });
   }
 
@@ -545,7 +568,7 @@ class CandidateList {
     Common.toggleModal("candidateList-modal", "candidateList-modal-card");
   }
 
-  async cloneCandidateList() {
+  async cloneCandidateListModal() {
     let election = await this.ElectionModel.getElection(this.area.ID);
     let rounds = await this.RoundModel.getRounds();
     rounds = rounds.filter((round) => round.ElectionID == election.ID);
@@ -559,11 +582,29 @@ class CandidateList {
         candidateList.AreaID == this.area.ID &&
         roundsID.includes(candidateList.RoundID)
     );
-    console.log(candidateLists);
     Common.toggleModal(
       "candidateList-clone-modal",
       "candidateList-clone-modal-card"
     );
+
+    const markup = candidateLists
+      .map((candidateList) => this.candidateListToCloneTemplate(candidateList))
+      .join("");
+    document.getElementById("candidateLists-toclone").innerHTML = markup;
+
+    candidateLists.map((candidateList) => {
+      document
+        .getElementById(
+          `candidateLists-candidateListToClone-${candidateList.ID}`
+        )
+        .addEventListener("click", async () => {
+          this.cloneCandidateList(candidateList);
+          Common.toggleModal(
+            "candidateList-clone-modal",
+            "candidateList-clone-modal-card"
+          );
+        });
+    });
   }
 
   async editCandidateList(candidateList) {
@@ -646,6 +687,37 @@ class CandidateList {
     await this.displayCandidates();
   }
 
+  async cloneCandidateList(candidateList) {
+    console.log(candidateList);
+
+    let candidateListCloned = await this.CandidateListModel.saveCandidateList(
+      "POST",
+      null,
+      candidateList.Name,
+      candidateList.PartyID,
+      this.round.ID,
+      this.area.ID
+    );
+
+    for (let i in candidateList.Candidates) {
+      await this.CandidateModel.saveCandidate(
+        "POST",
+        null,
+        candidateListCloned.ID,
+        candidateList.Candidates[i].FullName,
+        candidateList.Candidates[i].Rank,
+        candidateList.Candidates[i].CommunityCounseller,
+        candidateList.Candidates[i].Birthdate,
+        candidateList.Candidates[i].PotentialIncompatibility,
+        candidateList.Candidates[i].Refused,
+        candidateList.Candidates[i].Removed
+      );
+    }
+    await this.displayCandidateLists();
+    this.activateCandidateList(candidateListCloned);
+    return candidateListCloned;
+  }
+
   emptyCandidateList() {
     this.area = null;
     document.getElementById("candidate-lists-list").innerHTML = "";