diff --git a/client/homePage.ts b/client/homePage.ts
index 6daeda9d5a2d54fab01bed85f970ae682352d44f..7fbf0b6e5d755afe26b7e511dc35a1df56b61c14 100644
--- a/client/homePage.ts
+++ b/client/homePage.ts
@@ -11,6 +11,7 @@ import {
   loadProjectPageA,
   loadProjectPageG,
   loadProjectPageS,
+  loadInitiatePage
 } from "./SidebarAndHeader/pageHandler.js";
 import {
   getUsers,
@@ -110,22 +111,53 @@ class IdeaCard {
             this.id
           }" class= "expandedIdeaContent" style ="display : none;">
               <div class="expandedDescriptionText">
-                  <p class="ideaCardFont" id="expandedHeader">Om ideen</p>
-                  <p id="expandedDescription">${this.description}</p>
+                  <p class="ideaCardFontComments" id="expandedHeader">Om ideen</p>
+                  <p class="ideaCardFont" id="expandedDescription">${
+                    this.description
+                  }</p>
               </div>
               <div class="expandedCommentAndButton id = "expandedCommentAndButton${
                 this.id
               }">
                   <div class="expandedComment">
-                      <p class="ideaCardFont">Kommentarer</p>
-                      <p class="ideaCardFont">Komment 1</p>
-                      <p class="ideaCardFont">K0mment 2</p>
+                      <button class="ideaCardFontComments" id="commentsProjectCard">Kommentarer</button>
                   </div>
+
                   <div class="expandedButton">
                       <button class="initiateProjectButton" id="initiateProjectFromCard${
                         this.suggestionID
                       }">Initiera Förbättringsförslag</button>
                   </div>
+
+                  <!-- commentsModal.html -->
+                    <div id="commentsModal" class="modal">
+                      <div class="modal-content">
+                        <span class="close" id="closeModal">&times;</span>
+                        <div id="existingComments">
+                          <!-- Display existing comments here -->
+                          <div class="comment-container">
+                            <div class="comment">
+                              <div class="comment-author">John Doe</div>
+                              <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+                            </div>
+                        
+                            <div class="comment">
+                              <div class="comment-author">Jane Smith</div>
+                              <div class="comment-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
+
+                            <div class="comment">
+                              <div class="comment-author">Erik Svensson</div>
+                              <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+                            </div>
+                          </div>
+                        </div>
+                        <form id="addCommentForm">
+                          <input type="text" id="commentInput" name="commentInput">
+                          <button type="button" id="addCommentBtn">Publicera</button>
+                        </form>
+                      </div>
+                    </div>
               </div>
           </div>
       </div>`;
@@ -214,6 +246,11 @@ function addListner(cardArray: { [key: number]: IdeaCard }, element: Element) {
         }
       }
     }
+
+    if (target && target.className === "initiateProjectButton") {
+      const cardId = target.id.replace("initiateProjectFromCard", "");
+      loadInitiatePage(cardId);
+    }
   });
 }
 async function createNewIdeaCard(
diff --git a/client/profilePage.ts b/client/profilePage.ts
index 6706058fa6daa9457bc93482a9c1761be300b138..be9c4d5f4a5f7e69384618f85aea07fa4fd4d974 100644
--- a/client/profilePage.ts
+++ b/client/profilePage.ts
@@ -8,6 +8,7 @@ import {
   loadProjectPageA,
   loadProjectPageG,
   loadProjectPageS,
+  loadInitiatePage
 } from "./SidebarAndHeader/pageHandler.js";
 import { projectCard, addEventListener } from "./currentProjects/currentProjects.js";
 
@@ -106,20 +107,57 @@ class IdeaCard {
                   </div>
               </div>
           </div>
-          <div id="expandedContent${this.id}" class= "expandedIdeaContent" style ="display : none;">
+          <div id="expandedContent${
+            this.id
+          }" class= "expandedIdeaContent" style ="display : none;">
               <div class="expandedDescriptionText">
-                  <p class="ideaCardFont" id="expandedHeader">Om ideen</p>
-                  <p id="expandedDescription">${this.description}</p>
+                  <p class="ideaCardFontComments" id="expandedHeader">Om ideen</p>
+                  <p class="ideaCardFont" id="expandedDescription">${
+                    this.description
+                  }</p>
               </div>
-              <div class="expandedCommentAndButton id = "expandedCommentAndButton${this.id}">
+              <div class="expandedCommentAndButton id = "expandedCommentAndButton${
+                this.id
+              }">
                   <div class="expandedComment">
-                      <p class="ideaCardFont">Kommentarer</p>
-                      <p class="ideaCardFont">Komment 1</p>
-                      <p class="ideaCardFont">K0mment 2</p>
+                      <button class="ideaCardFontComments" id="commentsProjectCard">Kommentarer</button>
                   </div>
+
                   <div class="expandedButton">
-                  <button class="initiateProjectButton" id="initiateProjectFromCard${this.suggestionID}">Initiera Projekt</button>
+                      <button class="initiateProjectButton" id="initiateProjectFromCard${
+                        this.suggestionID
+                      }">Initiera Förbättringsförslag</button>
                   </div>
+
+                  <!-- commentsModal.html -->
+                    <div id="commentsModal" class="modal">
+                      <div class="modal-content">
+                        <span class="close" id="closeModal">&times;</span>
+                        <div id="existingComments">
+                          <!-- Display existing comments here -->
+                          <div class="comment-container">
+                            <div class="comment">
+                              <div class="comment-author">John Doe</div>
+                              <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+                            </div>
+                        
+                            <div class="comment">
+                              <div class="comment-author">Jane Smith</div>
+                              <div class="comment-text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
+
+                            <div class="comment">
+                              <div class="comment-author">Erik Svensson</div>
+                              <div class="comment-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+                            </div>
+                          </div>
+                        </div>
+                        <form id="addCommentForm">
+                          <input type="text" id="commentInput" name="commentInput">
+                          <button type="button" id="addCommentBtn">Publicera</button>
+                        </form>
+                      </div>
+                    </div>
               </div>
           </div>
       </div>`;
@@ -296,6 +334,11 @@ async function createNewIdeaCard(
                       
                     }
                   }
+
+                  if (target && target.className === "initiateProjectButton") {
+                    const cardId = target.id.replace("initiateProjectFromCard", "");
+                    loadInitiatePage(cardId);
+                  }
                 });
               }