diff --git a/client/KnowledgeBank/completedProjects.ts b/client/KnowledgeBank/completedProjects.ts
index ca57fb5dd1cc7c439159160b5e6b3f5096bc182c..602b4250474def082b41b025bdd9bfb338762bc9 100644
--- a/client/KnowledgeBank/completedProjects.ts
+++ b/client/KnowledgeBank/completedProjects.ts
@@ -21,7 +21,148 @@ import {
 
 import { formatDate } from "../projectPage/projectPage.js";
 
-import { projectCard } from "../currentProjects/currentProjects.js"
+//import { projectCard } from "../currentProjects/currentProjects.js"
+
+export class projectCard {
+  public name: string; // Projectowner
+  public department: string;
+  public title: string;
+  public description: string;
+  public id: number;
+  public projectId: string;
+  public stage: any;
+  public dateStarted: any;
+  public endDate: any;
+  public completed: boolean;
+
+  constructor(
+    id: number,
+    name: string,
+    department: string,
+    title: string,
+    description: string,
+    projectId: string,
+    currentStage: string,
+    dateStarted: any,
+    endDate: any,
+    completed: boolean
+  ) {
+    this.name = name;
+    this.department = department;
+    this.title = title;
+    this.description = description;
+    this.id = id;
+    this.projectId = projectId;
+    this.stage = currentStage;
+    this.dateStarted = dateStarted;
+    this.endDate = endDate;
+    this.completed = completed;
+  }
+
+  showMoreInfo(blockId: string, thisTextId: string): void {
+    const blockElement = document.getElementById(blockId);
+    if (blockElement) {
+      blockElement.style.display = "flex";
+    }
+
+    const textElement = document.getElementById(thisTextId);
+    if (textElement) {
+      textElement.innerText = "^ Stäng detaljer";
+    }
+  }
+
+  closeMoreInfo(blockId: string, thisTextId: string): void {
+    const blockElement = document.getElementById(blockId) as HTMLSelectElement;
+    if (blockElement) {
+      blockElement.style.display = "none";
+    }
+    const textElement = document.getElementById(thisTextId);
+    if (textElement) {
+      textElement.innerText = "> Mer information";
+    }
+  }
+
+  loadInitiatePage() {
+    alert("The initiate project page should now be loaded");
+  }
+
+  generateHTML(): string {
+    // Set default styles for stageSymbol (P, D, S, A, Avslutat)
+    let stageSymbol = "";
+    let stageFontSize = "50px";
+    let stageMarginLeft = "35px";
+    let stageMarginTop = "10px";
+
+    // Set projectDates to dateStarted
+    let projectDates = formatDate(this.dateStarted);
+
+    if (this.completed) {
+      stageSymbol = "Avslutat";
+      stageFontSize = "25px";
+      stageMarginLeft = "5px";
+      stageMarginTop = "30px";
+
+      // Append endDate to projectDates
+      projectDates += " till " + formatDate(this.endDate);
+    } else if (this.stage == "Plan") {
+      stageSymbol = "P";
+    } else if (this.stage == "Do") {
+      stageSymbol = "D";
+    } else if (this.stage == "Study") {
+      stageSymbol = "S";
+    } else if (this.stage == "Act") {
+      stageSymbol = "A";
+    }
+
+    return `
+    <div class="totalExpandedOngoingWorkCard">
+      <div style="cursor: default;" class="flex-container ongoingCard shadow" id="${
+        this.projectId
+      }">
+        <div class="ongoingCardImageContainer toSinglePage">
+          <div id="borderPinkFaded">
+            <div class = "flex-box ongoingCardImage toSinglePage">
+              <div id="currentStageLetter${this.projectId}" style=
+              "font-size: ${stageFontSize}; 
+              margin-left: ${stageMarginLeft}; 
+              margin-top: ${stageMarginTop};
+              font-weight: 
+              bolder;
+              color: #845380;
+              position: inherit; 
+              ">${stageSymbol}</div>
+            </div>
+          </div>
+        </div>
+        <div class="div ongoingCardInfo toSinglePage">
+        <p class="toSinglePage" id="ongoingCardIdeaTitle">${this.title}</p>
+        <p class="toSinglePage" id="ongoingCardDepartment">${
+          this.department
+        }</p>
+          <p class="toSinglePage" id="ongoingCardManager">${this.name}</p>
+          <p class="toSinglePage" id="ongoingCardDatesCurrentProjects${this.projectId}" style="font-size: 13px; font-style: italic; margin-top: 5px;">${projectDates} </p>
+        </div>
+        <button id="completed-page-button-${this.projectId}" data-project-id="${
+      this.id
+    }" class="projectButton fs-6 text-white d-flex pb-2 pt-2" role="button" style="height: 10%; min-width: 15vw; white-space: nowrap; align-items: center; font-family:'Roboto', sans-serif;">Gå till Förbättringsarbetet</button>
+        <div class="container ongoingSeeCardDetails toSinglePage">
+          <div class="ongoingSeeCardDetailsInner">
+            <div id="completed-page-ongoingSeeDetailsButton${
+              this.projectId
+            }" class = "moreInfoClass">> Mer information</div>
+          </div>
+        </div>
+      </div> 
+      <div class = "expandedOngoingWorkCard" id="expandedOngoingWorkCard${
+        this.projectId
+      }" style="display: none;">
+        <div class ="expandedTextOngoingWorkCard">
+          ${this.description}
+        </div>
+      </div>
+    </div> `;
+  }
+}
 
 let projectCards: projectCard[] = [];
 let filteredImprovementWorks: any[] = [];
@@ -309,11 +450,11 @@ function sortProjects(
   // Loop through the saved array of cards and generate HTML for each card
   for (const card of cardsToIterate) {
     let cardHTML = card.generateHTML();
-    addEventListener(listenersLoaded, card.projectId, card);
     let div = document.createElement("div");
     div.className = "projectCardCardDiv"; // Set the class name(s) here
     div.innerHTML = cardHTML;
     if (!selectElement) return;
+    addEventListener(listenersLoaded, card.projectId, card);
     selectElement.appendChild(div); // Stop if the container isn't found
   }
 }
diff --git a/client/projectPage/projectPageA.html b/client/projectPage/projectPageA.html
index 2dca59f3cc2821b5c3da8013d5883b8450480451..f6b79d2b802438f5d45efe70d8a8db7931be5f21 100644
--- a/client/projectPage/projectPageA.html
+++ b/client/projectPage/projectPageA.html
@@ -25,7 +25,7 @@
               <p style="margin-right: 5px;">Medlemmar:</p>
               <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p>
               </div>
-            <button id="projectButton2">+ Lägg till medlem</button>
+            <button id="addMemberButton">+ Lägg till medlem</button>
             <button id="projectButton">Redigera</button>
         </div>
 
diff --git a/client/projectPage/projectPageG.html b/client/projectPage/projectPageG.html
index 87438c60d9e05e9e67256beea1e005d9cf9e2a88..58f6c3dce40a66400eef8f05ea0c6ec00e173f66 100644
--- a/client/projectPage/projectPageG.html
+++ b/client/projectPage/projectPageG.html
@@ -26,7 +26,7 @@
               <p style="margin-right: 5px;">Medlemmar:</p>
               <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p>
               </div>
-            <button id="projectButton2">+ Lägg till medlem</button>
+            <button id="addMemberButton">+ Lägg till medlem</button>
             <button id="projectButton">Redigera</button>
         </div>
 
diff --git a/client/projectPage/projectPageS.html b/client/projectPage/projectPageS.html
index 52b3a144184ed50378c28fb22a967480032e89a0..f0a9e6e5207ad9bf422b75115a9a0c977bae1d04 100644
--- a/client/projectPage/projectPageS.html
+++ b/client/projectPage/projectPageS.html
@@ -24,7 +24,7 @@
               <p style="margin-right: 5px;">Medlemmar:</p>
               <p id="pMembers"><p class="loadingIndicator" style="display: none">Laddar medlemmar...</p></p>
               </div>
-            <button id="projectButton2">+ Lägg till medlem</button>
+            <button id="addMemberButton">+ Lägg till medlem</button>
             <button id="projectButton">Redigera</button>
         </div>