diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index 5c9bab1fff66144fa77d7a78b56ed4f25bc84f30..7d3401465f5535c8c48bc2806b6ed9cf75ddb4e2 100644
--- a/web/components/management/candidate-lists.js
+++ b/web/components/management/candidate-lists.js
@@ -1,6 +1,8 @@
 // Imports
 import * as Auth from "/services/auth/auth.js";
 import * as AreaModel from "/services/model/area-model.js";
+import * as PartyModel from "/services/model/party-model.js";
+import * as CandidateListModel from "/services/model/candidateList-model.js";
 
 // DOM elements
 
@@ -18,10 +20,14 @@ class CandidateList {
     this.method = null;
     this.parent = parent;
     this.AreaModel = AreaModel.getAreaModel();
+    this.PartyModel = PartyModel.getPartyModel();
+    this.CandidateListModel = CandidateListModel.getCandidateListModel();
   }
 
   async mount(where) {
     this.AreaModel.current_user = await Auth.GetUser();
+    this.PartyModel.current_user = await Auth.GetUser();
+    this.CandidateListModel.current_user = await Auth.GetUser();
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
@@ -39,7 +45,7 @@ class CandidateList {
             <div id="areas-round"></div>
           </div>
           <div class="column">
-            <div id="desk-round-details"></div>
+            <div id="candidate-lists-list"></div>
           </div>
           <div class="column">
             <div id="active-capturer" class="card"></div>
@@ -66,6 +72,20 @@ class CandidateList {
     </div>`;
   }
 
+  candidateListTemplate(candidateList) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="candidateLists-candidateList-${candidateList.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div id="candidateLists-candidateList-desc-${candidateList.ID}" class="level-left">
+              ${candidateList.Name} 
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
   async displayAreas() {
     let candidateListHandler = this;
     let areas = await this.updateAreas();
@@ -77,7 +97,6 @@ class CandidateList {
         .getElementById(`areas-area-${area.ID}`)
         .addEventListener("click", async function () {
           await candidateListHandler.activateArea(area);
-          candidateListHandler.area = area;
           await candidateListHandler.displayCandidateLists();
         });
     });
@@ -91,11 +110,37 @@ class CandidateList {
     });
   }
 
-  async activateArea(){
+  async activateArea(area) {
+    this.area = area;
 
   }
 
-  async displayCandidateLists(){
+  async displayCandidateLists() {
+    let candidateListHandler = this;
+    let candidateLists = await this.updateCandidateLists();
+    const markup = candidateLists.map((candidateList) => this.candidateListTemplate(candidateList)).join("");
+    document.getElementById("candidate-lists-list").innerHTML = markup;
+
+    candidateLists.map(async (candidateList) => {
+      console.log(candidateList.PartyID)
+      let party = await this.PartyModel.getParty(candidateList.PartyID)
+      console.log(party)
+      document.getElementById(`candidateLists-candidateList-desc-${candidateList.ID}`).innerHTML += "(" + party.Name + ")"
+      // document
+      //   .getElementById(`areas-area-${candidateList.ID}`)
+      //   .addEventListener("click", async function () {
+      //     await candidateListHandler.activateArea(candidateList);
+      //     candidateListHandler.area = candidateList;
+      //     await candidateListHandler.displayCandidateLists();
+      //   });
+    });
+  }
 
+  async updateCandidateLists() {
+    let candidateListHandler = this;
+    let candidateLists = await this.CandidateListModel.getCandidateLists();
+    return candidateLists.filter(function (candidateList) {
+      return candidateList.AreaID == candidateListHandler.area.ID;
+    });
   }
 }
diff --git a/web/services/model/party-model.js b/web/services/model/party-model.js
index 521621355ca2d54613fe6b6a282da91cdeeda0a7..b90aefd63f87e55737ee1bead28d872e85c5477f 100644
--- a/web/services/model/party-model.js
+++ b/web/services/model/party-model.js
@@ -93,6 +93,6 @@ class PartyModel {
 
   async refreshParties() {
     this.parties = null;
-    this.getParties();
+    await this.getParties();
   }
 }