Index: src/main/java/com/db/finki/www/build_board/controller/thread_controller/DiscussionController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/thread_controller/DiscussionController.java	(revision 2a91cb08080125091e2339b8c4e8ef480b4bc5dc)
+++ src/main/java/com/db/finki/www/build_board/controller/thread_controller/DiscussionController.java	(revision 5b178288e1f4f4a0b425b4da9059f3a4bca36120)
@@ -36,5 +36,5 @@
     }
 
-    @PreAuthorize("@discussionService.discussionById(#replyId).user.username==#username")
+    @PreAuthorize("@discussionService.getDiscussionById(#replyId).user.username==#username")
     @PostMapping("/topics/{topic-name}/discussions/{replyId}/edit")
     public String editReply(@PathVariable(name = "topic-name") String topicName, @PathVariable @P("replyId") int replyId, @RequestParam String content, Model model, HttpSession session
@@ -44,5 +44,5 @@
     }
 
-    @PreAuthorize("@discussionService.discussionById(#discussionId).getUser().getId()==#user.getId()")
+    @PreAuthorize("@discussionService.getDiscussionById(#discussionId).getUser().getId()==#user.getId()")
     @PostMapping("/topics/{topic-name}/discussions/{discussionId}/delete")
     public String deleteDiscussion(@PathVariable(name = "topic-name") String topicName, @PathVariable @P("discussionId") int discussionId, @SessionAttribute @P("user") BBUser user, @RequestParam @Param("username") String username) {
Index: src/main/java/com/db/finki/www/build_board/entity/thread/discussion_thread/VDiscussion.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/thread/discussion_thread/VDiscussion.java	(revision 2a91cb08080125091e2339b8c4e8ef480b4bc5dc)
+++ src/main/java/com/db/finki/www/build_board/entity/thread/discussion_thread/VDiscussion.java	(revision 5b178288e1f4f4a0b425b4da9059f3a4bca36120)
@@ -10,4 +10,6 @@
 import org.hibernate.annotations.Immutable;
 
+import java.util.ArrayList;
+import java.util.List; 
 import java.time.LocalDateTime;
 
@@ -42,3 +44,6 @@
 
     private LocalDateTime createdAt;
+
+    @Transient
+    private List<VDiscussion> children = new ArrayList<>();
 }
Index: src/main/java/com/db/finki/www/build_board/service/thread/impl/DiscussionService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/thread/impl/DiscussionService.java	(revision 2a91cb08080125091e2339b8c4e8ef480b4bc5dc)
+++ src/main/java/com/db/finki/www/build_board/service/thread/impl/DiscussionService.java	(revision 5b178288e1f4f4a0b425b4da9059f3a4bca36120)
@@ -10,4 +10,6 @@
 import jakarta.transaction.Transactional;
 import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
 import java.util.List;
 
@@ -25,5 +27,17 @@
 
     public List<VDiscussion> getByTopic(int topicId){
-        return vDiscussRepo.findVDiscussionByParentTopicIdOrderByCreatedAtDesc(topicId);
+        List<VDiscussion> discussions = vDiscussRepo.findVDiscussionByParentTopicIdOrderByCreatedAtDesc(topicId);
+        List<VDiscussion> level0Discussions = new ArrayList<>(); 
+
+        for(VDiscussion dis : discussions){
+            if(dis.getDepth()==0){
+                level0Discussions.add(dis);
+            }else{
+                VDiscussion parent = vDiscussRepo.findById((long) dis.getDiscussion().getParent().getId()).get();
+                parent.getChildren().add(dis); 
+            }
+        }
+
+        return level0Discussions; 
     }
 
@@ -62,3 +76,4 @@
         discussionRepository.delete(d);
     }
+
 }
Index: src/main/resources/templates/fragments/discussion.html
===================================================================
--- src/main/resources/templates/fragments/discussion.html	(revision 2a91cb08080125091e2339b8c4e8ef480b4bc5dc)
+++ src/main/resources/templates/fragments/discussion.html	(revision 5b178288e1f4f4a0b425b4da9059f3a4bca36120)
@@ -1,39 +1,115 @@
-<div th:fragment="discussion(reply)" class="card-header bg-light d-flex justify-content-between align-items-center"
-    th:id="${reply.getId() + '/' + reply.getUser().getUsername()}">
-    <div class="d-flex align-items-center w-100">
-        <img th:src="${reply.getAvatarUrl()}" alt="Profile Picture" id="profileImage"
-            class="rounded-circle border border-1 border-info me-3"
-            style="width: 3rem; height: 3rem; object-fit: cover; vertical-align: middle;">
-        <span th:text="${reply.getUser().getUsername()}">Reply Author</span>
-        <span class="ms-auto text-muted d-flex align-items-center">
-            <i class="bi bi-arrow-return-right me-2"></i>
-            <strong th:text="'Replying to:  ' + ${reply.getDiscussion().getParent().getUser().getUsername()}"></strong>
-        </span>
+<th:object th:fragment="discussion(reply_cont)" th:each="reply : ${reply_cont}">
+    <div
+         class="card shadow-sm mt-4 d-flex"
+         th:style="'margin-left: ' + (${reply.depth + 1} * 5) + '%'"
+    >
+        <div class="card-header bg-light d-flex justify-content-between align-items-center"
+             th:id="${reply.getId() + '/' + reply.getUser().getUsername()}">
+            <div class="d-flex align-items-center w-100">
+                <img th:src="${reply.getAvatarUrl()}" alt="Profile Picture" id="profileImage"
+                     class="rounded-circle border border-1 border-info me-3"
+                     style="width: 3rem; height: 3rem; object-fit: cover; vertical-align: middle;">
+                <span th:text="${reply.getUser().getUsername()}">Reply Author</span>
+                <!--                <span th:text="${reply.}">Reply Time</span>-->
+                <span class="ms-auto text-muted d-flex align-items-center">
+                    <i class="bi bi-arrow-return-right me-2"></i>
+                     <strong th:text="'Replying to:  ' + ${reply.getDiscussion().getParent().getUser().getUsername()}"></strong>
+                </span>
 
-    </div>
-    <div th:if="${session.user != null && session.user.getId() == reply.getUser().getId()}"
-        class="ms-5 d-flex align-items-center justify-content-between">
+            </div>
+            <div th:if="${session.user != null && session.user.getId() == reply.getUser().getId()}"
+                 class="ms-5 d-flex align-items-center justify-content-between">
 
-        <div>
-            <button class="btn btn-warning btn-sm edit-reply-btn"
-                th:attr="data-reply-id=${reply.getDiscussion().getId()}">Edit
-            </button>
+                <div>
+                    <button class="btn  btn-warning btn-sm edit-reply-btn"
+                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Edit
+                    </button>
+                </div>
 
+                <div>
+                    <form th:action="@{/topics/{topic-name}/discussions/{discussionId}/delete(topic-name=${topic.getTitle()
+                    },discussionId=${reply.getId()})}" method="post">
+                        <input type="hidden" name="threadId" th:value="${reply.getDiscussion().getId()}" class="w-0">
+                        <button class="btn btn-danger btn-sm edit-delete-btn ms-2"
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">Delete
+                        </button>
+                        <input th:if="${session.user!=null}" type="hidden" name="username"
+                               th:value="${session.user.username}"/>
+                    </form>
+                </div>
+            </div>
         </div>
 
-        <div>
-            <form th:action="@{/topics/{topic-name}/discussions/{discussionId}/delete(topic-name=${topic.getTitle()
-           },discussionId=${reply.getId()})}" method="post">
-                <input type="hidden" name="threadId" th:value="${reply.getDiscussion().getId()}" class="w-0">
-                <button class="btn btn-danger btn-sm edit-delete-btn ms-2"
-                    th:attr="data-reply-id=${reply.getDiscussion().getId()}">Delete
-                </button>
-                <input th:if="${session.user!=null}" type="hidden" name="username"
-                    th:value="${session.user.username}" />
+        <!-- Reply content -->
+        <div class="card-body">
+            <div th:attr="data-reply-id=${reply.getDiscussion().getId()}" class="reply-content">
+                <p th:text="${reply.getDiscussion().getContent()}">Reply content goes here.</p>
+            </div>
+            <div class="d-none edit-reply" th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                <form th:action="@{/topics/{topic-name}/discussions/{replyId}/edit(topic-name=${topic.getTitle()},replyId=${reply.getId()})}"
+                      method="post">
+                    <input type="hidden" name="replyId" th:value="${reply.getDiscussion().getId()}">
+                    <textarea name="content" th:text="${reply.getDiscussion().getContent()}" class="form-control"
+                              rows="3" placeholder="Write your reply here"></textarea>
+
+                    <button type="submit" class="btn btn-sm btn-success mt-2">Save Changes</button>
+                    <button type="button" class="close-edit-btn btn btn-sm btn-danger mt-2"
+                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Cancel</button>
+                    <input th:if="${session.user!=null}" type="hidden" name="username"
+                           th:value="${session.user.username}"/>
+                </form>
+
+            </div>
+
+            <!-- Buttons Row -->
+            <div class="d-flex justify-content-between align-items-center mt-3 pt-3">
+                <div class="d-flex flex-row">
+                    <form th:action="@{/threads/{thread-id}/like(thread-id=${reply.getId()})}" method="post">
+                        <input name="topic-name" type="hidden" th:value="${topic.getTitle()}">
+                        <button th:if="${session.user!=null}"
+                                type="submit" class="btn btn-outline-success btn-sm me-2 like-button"
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                            👍 Like (<span th:text="${reply.getDiscussion().getNumLikes()}">0</span>)
+                        </button>
+                    </form>
+                    <form th:action="@{/threads/{thread-id}/dislike(thread-id=${reply.getId()})}" method="post">
+                        <input type="hidden" name="topic-name" th:value="${topic.getTitle()}">
+                        <button th:if="${session.user!=null}"
+                                class="btn btn-outline-danger btn-sm dislike-button"
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                            👎 Dislike
+                        </button>
+                    </form>
+                </div>
+                <div>
+                    <button th:if="${session.user!=null}"
+                            class="btn btn-info btn-sm reply-button"
+                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Reply
+                    </button>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Add Reply Card Hidden -->
+        <div th:attr="data-reply-id=${reply.getDiscussion().getId()}" class="card-body d-none reply-body">
+            <form th:action="@{/topics/{topic-name}/discussions/add(topic-name=${topic.getTitle()})}" method="post">
+                <div class="mb-3">
+                    <label class="form-label">Your Reply</label>
+                    <textarea name="content" class="form-control" rows="3" placeholder="Write your reply here"
+                              required></textarea>
+                </div>
+                <div class="d-flex justify-content-between">
+                    <input type="hidden" th:value="${reply.getId()}" name="parentId">
+                    <button type="submit" class="btn btn-success w-10 ms-2">Post Reply</button>
+                    <div class="d-flex justify-content-end reply-cancel">
+                        <button class="btn btn-danger btn-sm reply-cancel w-10 me-2"
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">Cancel
+                        </button>
+                    </div>
+                </div>
             </form>
         </div>
     </div>
-    <div th:each="child:${reply.getChildren()}">
-        <div th:reaplce="/fragments/discussion :: discussion(child)"></div>
-    </div>
-</div>
+    <div th:replace="~{/fragments/discussion :: discussion(reply_cont=${reply.getChildren()})}"></div>
+</th:object>
Index: src/main/resources/templates/show-topic.html
===================================================================
--- src/main/resources/templates/show-topic.html	(revision 2a91cb08080125091e2339b8c4e8ef480b4bc5dc)
+++ src/main/resources/templates/show-topic.html	(revision 5b178288e1f4f4a0b425b4da9059f3a4bca36120)
@@ -14,4 +14,5 @@
             line-height: 1.2;
         }
+
         .edit-delete-btn {
             font-size: 12px;
@@ -20,13 +21,14 @@
             line-height: 1.2;
         }
+
         .error-bubble {
-        display: inline-block;
-        background-color: #dc3545; /* Bootstrap danger color */
-        color: white;
-        padding: 10px 15px;
-        border-radius: 20px;
-        font-weight: bold;
-        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
-    }
+            display: inline-block;
+            background-color: #dc3545; /* Bootstrap danger color */
+            color: white;
+            padding: 10px 15px;
+            border-radius: 20px;
+            font-weight: bold;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+        }
     </style>
 </head>
@@ -77,7 +79,8 @@
                 </div>
                 <div th:attr="data-reply-id=${topic.getId()}" class="card-body d-none reply-body">
-                    <form th:action="@{/topics/{topic-name}/discussions/add(topic-name=${topic.getTitle()})}" method="post">
+                    <form th:action="@{/topics/{topic-name}/discussions/add(topic-name=${topic.getTitle()})}"
+                          method="post">
                         <div class="mb-3">
-                            <label  class="form-label">Your Reply</label>
+                            <label class="form-label">Your Reply</label>
                             <textarea name="content" class="form-control" rows="3" placeholder="Write your reply here"
                                       required></textarea>
@@ -139,114 +142,5 @@
 
     <!-- Replies Section -->
-    <div th:each="reply : ${replies}" class="card shadow-sm mt-4 d-flex"
-         th:style="'margin-left: ' + (${reply.depth + 1} * 5) + '%'">
-        <div class="card-header bg-light d-flex justify-content-between align-items-center" th:id="${reply.getId() + '/' + reply.getUser().getUsername()}">
-            <div class="d-flex align-items-center w-100">
-                <img th:src="${reply.getAvatarUrl()}" alt="Profile Picture" id="profileImage"
-                     class="rounded-circle border border-1 border-info me-3"
-                     style="width: 3rem; height: 3rem; object-fit: cover; vertical-align: middle;">
-                <span th:text="${reply.getUser().getUsername()}">Reply Author</span>
-<!--                <span th:text="${reply.}">Reply Time</span>-->
-                <span class="ms-auto text-muted d-flex align-items-center">
-                    <i class="bi bi-arrow-return-right me-2"></i>
-                     <strong th:text="'Replying to:  ' + ${reply.getDiscussion().getParent().getUser().getUsername()}"></strong>
-                </span>
-
-            </div>
-            <div th:if="${session.user != null && session.user.getId() == reply.getUser().getId()}"
-                 class="ms-5 d-flex align-items-center justify-content-between">
-
-                <div>
-                    <button class="btn btn-warning btn-sm edit-reply-btn"
-                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Edit
-                    </button>
-
-                </div>
-
-                <div>
-                    <form th:action="@{/topics/{topic-name}/discussions/{discussionId}/delete(topic-name=${topic.getTitle()
-                    },discussionId=${reply.getId()})}" method="post">
-                        <input type="hidden" name="threadId" th:value="${reply.getDiscussion().getId()}" class="w-0">
-                        <button class="btn btn-danger btn-sm edit-delete-btn ms-2"
-                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">Delete
-                        </button>
-                        <input th:if="${session.user!=null}" type="hidden" name="username"
-                               th:value="${session.user.username}"/>
-                    </form>
-                </div>
-            </div>
-        </div>
-
-        <!-- Reply content -->
-        <div class="card-body">
-            <div th:attr="data-reply-id=${reply.getDiscussion().getId()}" class="reply-content">
-                <p th:text="${reply.getDiscussion().getContent()}">Reply content goes here.</p>
-            </div>
-            <div class="d-none edit-reply" th:attr="data-reply-id=${reply.getDiscussion().getId()}">
-                <form th:action="@{/topics/{topic-name}/discussions/{replyId}/edit(topic-name=${topic.getTitle()},replyId=${reply.getId()})}" method="post">
-                    <input type="hidden" name="replyId" th:value="${reply.getDiscussion().getId()}">
-                    <textarea name="content" th:text="${reply.getDiscussion().getContent()}" class="form-control"
-                              rows="3" placeholder="Write your reply here"></textarea>
-
-                    <button type="submit" class="btn btn-sm btn-success mt-2">Save Changes</button>
-                    <button type="button" class="btn btn-sm btn-danger mt-2"
-                            th:onclick="'hideEditReplyBox(' + ${reply.getDiscussion().getId()} + ')'">Cancel
-                    </button>
-                    <input th:if="${session.user!=null}" type="hidden" name="username"
-                           th:value="${session.user.username}"/>
-                </form>
-
-            </div>
-
-            <!-- Buttons Row -->
-            <div class="d-flex justify-content-between align-items-center mt-3 pt-3">
-                <div class="d-flex flex-row">
-                    <form th:action="@{/threads/{thread-id}/like(thread-id=${reply.getId()})}" method="post">
-                        <input name="topic-name" type="hidden" th:value="${topic.getTitle()}">
-                        <button th:if="${session.user!=null}"
-                                type="submit" class="btn btn-outline-success btn-sm me-2 like-button"
-                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
-                            👍 Like (<span th:text="${reply.getDiscussion().getNumLikes()}">0</span>)
-                        </button>
-                    </form>
-                    <form th:action="@{/threads/{thread-id}/dislike(thread-id=${reply.getId()})}" method="post">
-                        <input type="hidden" name="topic-name" th:value="${topic.getTitle()}">
-                        <button th:if="${session.user!=null}"
-                                class="btn btn-outline-danger btn-sm dislike-button"
-                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
-                            👎 Dislike
-                        </button>
-                    </form>
-                </div>
-                <div>
-                    <button th:if="${session.user!=null}"
-                            class="btn btn-info btn-sm reply-button"
-                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Reply
-                    </button>
-                </div>
-            </div>
-        </div>
-
-
-        <!-- Add Reply Card Hidden -->
-        <div th:attr="data-reply-id=${reply.getDiscussion().getId()}" class="card-body d-none reply-body">
-            <form th:action="@{/topics/{topic-name}/discussions/add(topic-name=${topic.getTitle()})}" method="post">
-                <div class="mb-3">
-                    <label  class="form-label">Your Reply</label>
-                    <textarea name="content" class="form-control" rows="3" placeholder="Write your reply here"
-                              required></textarea>
-                </div>
-                <div class="d-flex justify-content-between">
-                    <input type="hidden" th:value="${reply.getId()}" name="parentId">
-                    <button type="submit" class="btn btn-success w-10 ms-2">Post Reply</button>
-                    <div class="d-flex justify-content-end reply-cancel">
-                        <button class="btn btn-danger btn-sm reply-cancel w-10 me-2"
-                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">Cancel
-                        </button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
+    <div th:replace="~{/fragments/discussion :: discussion(reply_cont=${replies})}"></div>
 
 
@@ -265,5 +159,5 @@
                 <form th:action="@{/topics/{id}/tags/add (id=${topic.getId()})}" method="post" id="addTagForm">
                     <div class="mb-3">
-                        <label  class="form-label">Tag Name</label>
+                        <label class="form-label">Tag Name</label>
                         <select id="existingTags" class="form-select mb-3" name="tagName">
                             <option value="" selected disabled>Select an existing tag</option>
@@ -380,4 +274,11 @@
             editClasses(editBox, 'd-none', 'd-block')
             contentBox.classList.add("d-none")
+        }else if(target.classList.contains("close-edit-btn"))
+        {
+            const id = target.dataset.replyId;
+            const editBox = document.querySelector(`.edit-reply[data-reply-id="${id}"]`)
+            const contentBox = document.querySelector(`.reply-content[data-reply-id="${id}"]`)
+            editClasses(editBox, 'd-block', 'd-none')
+            contentBox.classList.remove("d-none")
         }
     })