Index: src/main/java/com/db/finki/www/build_board/controller/thread_controller/TopicController.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/controller/thread_controller/TopicController.java	(revision dd8e6007b37fac83fb2fb1b8ecfd64de310cef7f)
+++ src/main/java/com/db/finki/www/build_board/controller/thread_controller/TopicController.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -3,4 +3,5 @@
 import com.db.finki.www.build_board.entity.user_type.BBUser;
 import com.db.finki.www.build_board.entity.thread.Topic;
+import com.db.finki.www.build_board.service.ReportService;
 import com.db.finki.www.build_board.service.thread.impl.DiscussionService;
 import com.db.finki.www.build_board.service.thread.itf.TagService;
@@ -22,9 +23,21 @@
     private final DiscussionService discussionService;
     private final String DUPLICATE_TITTLE = "There already exists a topic with title";
+    private final ReportService reportService;
 
-    public TopicController(TopicService topicService, TagService tagService, DiscussionService discussionService) {
+    public TopicController(TopicService topicService, TagService tagService, DiscussionService discussionService, ReportService reportService) {
         this.topicService = topicService;
         this.tagService = tagService;
         this.discussionService = discussionService;
+        this.reportService = reportService;
+    }
+
+    private String bootstartTopic(long topicId, Model model){
+        Topic t = topicService.getById((long)topicId);
+
+        model.addAttribute("topic", t);
+        model.addAttribute("tags", tagService.getAllNotUsed(t));
+        model.addAttribute("replies", discussionService.getByTopic(t.getId()));
+
+        return "show-topic";
     }
 
@@ -42,9 +55,6 @@
             model.addAttribute("errMsg", "There already exists a thread with the same title in that parent");
         }
-        Topic t = topicService.getById((long)topicId);
-        model.addAttribute("topic", t);
-        model.addAttribute("tags", tagService.getAllNotUsed(t));
-        model.addAttribute("replies", discussionService.getByTopic(t.getId()));
-        return "show-topic";
+
+        return bootstartTopic(topicId, model);
     }
 
@@ -87,4 +97,13 @@
     }
 
+    @PostMapping("{id}/report")
+    public String reportUser(@PathVariable(name = "id") long topicId, @RequestParam String reason
+            , @SessionAttribute BBUser user,
+            @RequestParam(name = "report-username") String reportingUser, Model model){
+        reportService.createReport(topicId,reason,user, reportingUser);
+
+        return bootstartTopic(topicId, model);
+    }
+
     public String handleDuplicatedTitle(org.springframework.orm.jpa.JpaSystemException e,
             RedirectAttributes attr, String redirectPath) {
Index: src/main/java/com/db/finki/www/build_board/entity/request/Report.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/entity/request/Report.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
+++ src/main/java/com/db/finki/www/build_board/entity/request/Report.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -0,0 +1,39 @@
+package com.db.finki.www.build_board.entity.request;
+
+import com.db.finki.www.build_board.entity.entity_enum.Status;
+import com.db.finki.www.build_board.entity.thread.Project;
+import com.db.finki.www.build_board.entity.thread.Topic;
+import com.db.finki.www.build_board.entity.user_type.BBUser;
+import jakarta.persistence.Entity;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+import jakarta.persistence.Table;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+import java.time.LocalDateTime;
+
+@Entity
+@Getter
+@Setter
+@NoArgsConstructor
+@Table(name = "report")
+public class Report extends Submission {
+    @ManyToOne
+    @JoinColumn(name = "for_user_id")
+    BBUser user;
+
+    @ManyToOne
+    @JoinColumn(name = "thread_id")
+    Topic topic;
+
+    public Report(Topic topic, BBUser creator, String description, BBUser misconductedUser) {
+        setDescription(description);
+        setCreator(creator);
+        setTopic(topic);
+        setStatus(Status.PENDING);
+        setCreatedAt(LocalDateTime.now());
+        setUser(misconductedUser);
+    }
+}
Index: src/main/java/com/db/finki/www/build_board/repository/ReportRepository.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/repository/ReportRepository.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
+++ src/main/java/com/db/finki/www/build_board/repository/ReportRepository.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -0,0 +1,7 @@
+package com.db.finki.www.build_board.repository;
+
+import com.db.finki.www.build_board.entity.request.Report;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ReportRepository extends JpaRepository<Report, Long> {
+}
Index: src/main/java/com/db/finki/www/build_board/service/ReportService.java
===================================================================
--- src/main/java/com/db/finki/www/build_board/service/ReportService.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
+++ src/main/java/com/db/finki/www/build_board/service/ReportService.java	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -0,0 +1,31 @@
+package com.db.finki.www.build_board.service;
+
+import com.db.finki.www.build_board.entity.request.Report;
+import com.db.finki.www.build_board.entity.thread.Topic;
+import com.db.finki.www.build_board.entity.user_type.BBUser;
+import com.db.finki.www.build_board.repository.ReportRepository;
+import com.db.finki.www.build_board.service.thread.itf.TopicService;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.stereotype.Service;
+
+@Service
+public class ReportService {
+    private final ReportRepository reportRepository;
+    private final TopicService topicService;
+    private final UserDetailsService userDetailsService;
+
+    public ReportService(ReportRepository reportRepository, TopicService topicService, UserDetailsService userDetailsService) {this.reportRepository = reportRepository;
+        this.topicService = topicService;
+        this.userDetailsService = userDetailsService;
+    }
+
+    public void createReport(long topicId,String reason, BBUser creator, String reportingUsername)
+    {
+        Topic topic = topicService.getById(topicId);
+        BBUser reportedUser = (BBUser) userDetailsService.loadUserByUsername(reportingUsername);
+
+        reportRepository.save(
+                new Report(topic,creator, reason, reportedUser)
+                             );
+    }
+}
Index: src/main/resources/templates/fragments/discussion.html
===================================================================
--- src/main/resources/templates/fragments/discussion.html	(revision dd8e6007b37fac83fb2fb1b8ecfd64de310cef7f)
+++ src/main/resources/templates/fragments/discussion.html	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -1,11 +1,15 @@
-<th:object th:fragment="discussion(reply_cont)" th:each="reply : ${reply_cont}">
+<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) + '%'"
+            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"
+                <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;">
@@ -16,5 +20,4 @@
                      <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()}"
@@ -23,5 +26,6 @@
                 <div>
                     <button class="btn  btn-warning btn-sm edit-reply-btn"
-                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Edit
+                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                        Edit
                     </button>
                 </div>
@@ -29,13 +33,29 @@
                 <div>
                     <form th:action="@{/topics/{topic-id}/discussions/{discussionId}/delete(topic-id=${topic.getId()
-                    },discussionId=${reply.getId()})}" method="post">
-                        <input type="hidden" name="threadId" th:value="${reply.getDiscussion().getId()}" class="w-0">
+                    },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
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                            Delete
                         </button>
-                        <input th:if="${session.user!=null}" type="hidden" name="username"
+                        <input th:if="${session.user!=null}"
+                               type="hidden"
+                               name="username"
                                th:value="${session.user.username}"/>
                     </form>
                 </div>
+            </div>
+            <div th:if="${session.user != null}">
+                <button type="button"
+                        class="btn btn-danger btn-sm edit-delete-btn ms-2 report-btn"
+                        th:data-username="${reply.getDiscussion().getUser().getUsername()}"
+                        data-bs-toggle="modal"
+                        data-bs-target="#reportModal">
+                    Report
+                </button>
             </div>
         </div>
@@ -43,18 +63,39 @@
         <!-- 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 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()}">
+            <div class="d-none edit-reply"
+                 th:attr="data-reply-id=${reply.getDiscussion().getId()}">
                 <form th:action="@{/topics/{topic-id}/discussions/{replyId}/edit(topic-id=${topic.getId()},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>
+                    <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"
+                    <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>
@@ -65,18 +106,29 @@
             <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-id" type="hidden" th:value="${topic.getId()}">
+                    <form th:action="@{/threads/{thread-id}/like(thread-id=${reply.getId()})}"
+                          method="post">
+                        <input name="topic-id"
+                               type="hidden"
+                               th:value="${topic.getId()}">
                         <button th:if="${session.user!=null}"
-                                type="submit" class="btn btn-outline-success btn-sm me-2 like-button"
+                                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>)
+                            👍
+                            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-id" th:value="${topic.getId()}">
+                    <form th:action="@{/threads/{thread-id}/dislike(thread-id=${reply.getId()})}"
+                          method="post">
+                        <input type="hidden"
+                               name="topic-id"
+                               th:value="${topic.getId()}">
                         <button th:if="${session.user!=null}"
                                 class="btn btn-outline-danger btn-sm dislike-button"
                                 th:attr="data-reply-id=${reply.getDiscussion().getId()}">
-                            👎 Dislike
+                            👎
+                            Dislike
                         </button>
                     </form>
@@ -85,5 +137,6 @@
                     <button th:if="${session.user!=null}"
                             class="btn btn-info btn-sm reply-button"
-                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">Reply
+                            th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                        Reply
                     </button>
                 </div>
@@ -93,17 +146,31 @@
 
         <!-- 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-id}/discussions/add(topic-id=${topic.getId()})}" method="post">
+        <div th:attr="data-reply-id=${reply.getDiscussion().getId()}"
+             class="card-body d-none reply-body">
+            <form th:action="@{/topics/{topic-id}/discussions/add(topic-id=${topic.getId()})}"
+                  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>
+                    <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>
+                    <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
+                                th:attr="data-reply-id=${reply.getDiscussion().getId()}">
+                            Cancel
                         </button>
                     </div>
Index: src/main/resources/templates/show-topic.html
===================================================================
--- src/main/resources/templates/show-topic.html	(revision dd8e6007b37fac83fb2fb1b8ecfd64de310cef7f)
+++ src/main/resources/templates/show-topic.html	(revision 9515211f9f15b0c4e37a5046b6c904ad2eb0804e)
@@ -3,7 +3,9 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
     <title th:text="${topic.getTitle()}"></title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+          rel="stylesheet">
 
     <style>
@@ -31,15 +33,19 @@
             box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
         }
-        .badge{
+
+        .badge {
             background: #00e7ff80
         }
     </style>
 </head>
-<body>
+<body th:attr="data-topic-id=${topic.getId()}">
 <div th:replace="/home_pages/home :: navigation"></div>
 <div class="mt-3 w-100 d-flex justify-content-center align-items-center">
-    <div th:if="${errMsg!=null}" class="error-bubble">
-        <h5 class="text-center">Error</h5>
-        <p th:text="${errMsg}" class="mb-0"></p>
+    <div th:if="${errMsg!=null}"
+         class="error-bubble">
+        <h5 class="text-center">
+            Error</h5>
+        <p th:text="${errMsg}"
+           class="mb-0"></p>
     </div>
 </div>
@@ -48,9 +54,24 @@
     <div class="card shadow-sm mb-4">
         <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
-            <h3 th:text="${topic.getTitle()}">Topic Title</h3>
+            <h3 th:text="${topic.getTitle()}">
+                Topic
+                Title</h3>
             <!-- Add Tag Button -->
-            <button th:if="${session.user!=null && session.user.equals(topic.getUser())}"
-                    class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#addTagModal">Add Tag
-            </button>
+            <div>
+                <button th:if="${session.user!=null && session.user.equals(topic.getUser())}"
+                        class="btn btn-info btn-sm"
+                        data-bs-toggle="modal"
+                        data-bs-target="#addTagModal">
+                    Add
+                    Tag
+                </button>
+                <button
+                        class="btn btn-info btn-sm"
+                        data-bs-toggle="modal"
+                        data-bs-target="#show-guidelines">
+                    Show
+                    guidelines
+                </button>
+            </div>
         </div>
 
@@ -58,15 +79,25 @@
             <!-- Top Section: Description + Tags -->
             <div class="d-flex justify-content-between">
-                <p th:text="${topic.getContent()}">Description of the topic goes here.</p>
+                <p th:text="${topic.getContent()}">
+                    Description
+                    of
+                    the
+                    topic
+                    goes
+                    here.</p>
                 <!-- Tags Section -->
                 <div>
                     <ul class="list-inline text-end">
-                        <li th:each="tag : ${topic.getTags()}" class="list-inline-item">
+                        <li th:each="tag : ${topic.getTags()}"
+                            class="list-inline-item">
                         <span class="badge text-dark d-inline-flex align-items-center">
                             <span th:text="${tag.getName()}">Tag Name</span>
                             <form th:if="${session.user!=null && session.user.equals(topic.getUser())}"
                                   th:action="@{/topics/{topicId}/tags/{tag-name}/delete (topicId=${topic.getId()}, tag-name=${tag.getName()})}"
-                                  method="post" class="d-inline">
-                                <button type="submit" class="btn btn-sm btn-link text-danger p-0 ms-1" style="line-height: 1;">
+                                  method="post"
+                                  class="d-inline">
+                                <button type="submit"
+                                        class="btn btn-sm btn-link text-danger p-0 ms-1"
+                                        style="line-height: 1;">
                                     &times;
                                 </button>
@@ -84,5 +115,6 @@
                     <button th:if="${session.user != null}"
                             class="btn btn-info btn-sm reply-button"
-                            th:attr="data-reply-id=${topic.getId()}">Reply
+                            th:attr="data-reply-id=${topic.getId()}">
+                        Reply
                     </button>
                 </div>
@@ -90,16 +122,27 @@
                 <!-- Like & Dislike Buttons -->
                 <div class="d-flex flex-row">
-                    <form th:action="@{/threads/{thread-id}/like(thread-id=${topic.getId()})}" method="post">
-                        <input type="hidden" name="topic-id" th:value="${topic.getId()}">
+                    <form th:action="@{/threads/{thread-id}/like(thread-id=${topic.getId()})}"
+                          method="post">
+                        <input type="hidden"
+                               name="topic-id"
+                               th:value="${topic.getId()}">
                         <button th:if="${session.user!=null}"
-                                type="submit" class="btn btn-outline-success btn-sm me-2 like-button">
-                            👍 Like (<span th:text="${topic.getNumLikes()}">0</span>)
+                                type="submit"
+                                class="btn btn-outline-success btn-sm me-2 like-button">
+                            👍
+                            Like
+                            (<span
+                                th:text="${topic.getNumLikes()}">0</span>)
                         </button>
                     </form>
-                    <form th:action="@{/threads/{thread-id}/dislike(thread-id=${topic.getId()})}" method="post">
-                        <input type="hidden" name="topic-id" th:value="${topic.getId()}">
+                    <form th:action="@{/threads/{thread-id}/dislike(thread-id=${topic.getId()})}"
+                          method="post">
+                        <input type="hidden"
+                               name="topic-id"
+                               th:value="${topic.getId()}">
                         <button th:if="${session.user!=null}"
                                 class="btn btn-outline-danger btn-sm dislike-button">
-                            👎 Dislike
+                            👎
+                            Dislike
                         </button>
                     </form>
@@ -110,18 +153,31 @@
 
     <!-- Edit and Delete Buttons for Topic -->
-        <div th:if="${session.user != null && session.user.getId() == topic.getUser().getId()}"
-             class="card-footer d-flex justify-content-between">
-            <div>
-                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editTopicModal">Edit
+    <div th:if="${session.user != null && session.user.getId() == topic.getUser().getId()}"
+         class="card-footer d-flex justify-content-between">
+        <div>
+            <button class="btn btn-warning btn-sm"
+                    data-bs-toggle="modal"
+                    data-bs-target="#editTopicModal">
+                Edit
+                Topic
+            </button>
+            <form th:action="@{/topics/{id}/delete (id=${topic.getId()})}"
+                  method="post"
+                  style="display:inline;">
+                <input type="hidden"
+                       name="id"
+                       th:value="${topic.getId()}"/>
+                <button type="submit"
+                        class="btn btn-danger btn-sm">
+                    Delete
                     Topic
                 </button>
-                <form th:action="@{/topics/{id}/delete (id=${topic.getId()})}" method="post" style="display:inline;">
-                    <input type="hidden" name="id" th:value="${topic.getId()}"/>
-                    <button type="submit" class="btn btn-danger btn-sm">Delete Topic</button>
-                    <input th:if="${session.user!=null}" type="hidden" name="username"
-                           th:value="${session.user.username}"/>
-                </form>
-            </div>
-        </div>
+                <input th:if="${session.user!=null}"
+                       type="hidden"
+                       name="username"
+                       th:value="${session.user.username}"/>
+            </form>
+        </div>
+    </div>
     </div>
     <!--    DO TUKA E TOPIC-->
@@ -130,32 +186,100 @@
     <div th:replace="~{/fragments/discussion :: discussion(reply_cont=${replies})}"></div>
 
-
+<!--    Report modal -->
+    <div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModal" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <form id="reporting-form" method="post" th:action="@{/topics/{id}/report(id=${topic.getId()})}">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Report User</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <input type="hidden" name="report-username" id="reportUsername">
+                        <label for="reason" class="form-label">Reason</label>
+                        <textarea id="reason"
+                                  name="reason"
+                                  class="form-control"
+                                  rows="3"
+                                  placeholder="Enter reason for reporting..."
+                                  required></textarea>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button"
+                                class="btn btn-secondary"
+                                data-bs-dismiss="modal">Cancel</button>
+                        <button type="submit"
+                                class="btn btn-danger">Submit Report</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
 </main>
 
 <!-- Add Tag Modal -->
-<div class="modal fade" id="addTagModal" tabindex="-1" aria-labelledby="addTagModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="addTagModal"
+     tabindex="-1"
+     aria-labelledby="show-guidelines"
+     aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5
-                        class="modal-title" id="addTagModalLabel">Add a Tag</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        class="modal-title"
+                        id="addTagModalLabel">
+                    Add
+                    a
+                    Tag</h5>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <form th:action="@{/topics/{id}/tags/add (id=${topic.getId()})}" method="post" id="addTagForm">
+                <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>
-                        <select id="existingTags" class="form-select mb-3" name="tagName">
-                            <option value="" selected disabled>Select an existing tag</option>
-                            <option th:each="tag : ${tags}" th:value="${tag.getName()}" th:text="${tag.getName()}">
-                                Example Tag
+                        <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>
-                            <option value="custom">Enter a custom tag...</option>
+                            <option th:each="tag : ${tags}"
+                                    th:value="${tag.getName()}"
+                                    th:text="${tag.getName()}">
+                                Example
+                                Tag
+                            </option>
+                            <option value="custom">
+                                Enter
+                                a
+                                custom
+                                tag...
+                            </option>
                         </select>
-                        <input type="text" id="customTag" class="form-control d-none"
+                        <input type="text"
+                               id="customTag"
+                               class="form-control d-none"
                                placeholder="Enter custom tag name"/>
                     </div>
-                    <button type="submit" class="btn btn-primary w-100">Add Tag</button>
-                    <input th:if="${session.user!=null}" type="hidden" name="username"
+                    <button type="submit"
+                            class="btn btn-primary w-100">
+                        Add
+                        Tag
+                    </button>
+                    <input th:if="${session.user!=null}"
+                           type="hidden"
+                           name="username"
                            th:value="${session.user.username}"/>
                 </form>
@@ -166,25 +290,53 @@
 
 <!-- Edit Topic Modal -->
-<div class="modal fade" id="editTopicModal" tabindex="-1" aria-labelledby="editTopicModalLabel" aria-hidden="true">
+<div class="modal fade"
+     id="editTopicModal"
+     tabindex="-1"
+     aria-labelledby="editTopicModalLabel"
+     aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="editTopicModalLabel">Edit Topic</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                <h5 class="modal-title"
+                    id="editTopicModalLabel">
+                    Edit
+                    Topic</h5>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <form th:action="@{/topics/{id}/edit (id=${topic.getId()})}" method="post">
+                <form th:action="@{/topics/{id}/edit (id=${topic.getId()})}"
+                      method="post">
                     <div class="mb-3">
-                        <label for="topicTitle" class="form-label">Title</label>
-                        <input type="text" id="topicTitle" name="title" class="form-control"
-                               th:value="${topic.getTitle()}" required>
+                        <label for="topicTitle"
+                               class="form-label">Title</label>
+                        <input type="text"
+                               id="topicTitle"
+                               name="title"
+                               class="form-control"
+                               th:value="${topic.getTitle()}"
+                               required>
                     </div>
                     <div class="mb-3">
-                        <label for="topicContent" class="form-label">Content</label>
-                        <textarea id="topicContent" name="content" class="form-control" rows="5"
-                                  th:text="${topic.getContent()}" required></textarea>
-                    </div>
-                    <button type="submit" class="btn btn-primary w-100">Save Changes</button>
-                    <input th:if="${session.user!=null}" type="hidden" name="username"
+                        <label for="topicContent"
+                               class="form-label">Content</label>
+                        <textarea
+                                id="topicContent"
+                                name="content"
+                                class="form-control"
+                                rows="5"
+                                th:text="${topic.getContent()}"
+                                required></textarea>
+                    </div>
+                    <button type="submit"
+                            class="btn btn-primary w-100">
+                        Save
+                        Changes
+                    </button>
+                    <input th:if="${session.user!=null}"
+                           type="hidden"
+                           name="username"
                            th:value="${session.user.username}"/>
                 </form>
@@ -194,5 +346,41 @@
 </div>
 
-<!-- Edit Reply Modal -->
+<!-- Show guidelines modal -->
+<div class="modal fade"
+     id="show-guidelines"
+     tabindex="-1"
+     aria-labelledby="addTagModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h5 class="modal-title"
+                    id="show-guidelines-label">
+                    Guidelines</h5>
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body">
+                <p th:text="|The guidelines for ${topic.getTitle()}|"></p>
+                <ul th:each="guideline:${topic.getGuidelines()}">
+                    <li th:text="${guideline.getDescription()}"></li>
+                </ul>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button"
+                        class="btn btn-secondary btn-sm"
+                        data-bs-dismiss="modal">
+                    Close
+                </button>
+            </div>
+
+        </div>
+    </div>
+</div>
 
 
@@ -260,6 +448,5 @@
             editClasses(editBox, 'd-none', 'd-block')
             contentBox.classList.add("d-none")
-        }else if(target.classList.contains("close-edit-btn"))
-        {
+        } else if (target.classList.contains("close-edit-btn")) {
             const id = target.dataset.replyId;
             const editBox = document.querySelector(`.edit-reply[data-reply-id="${id}"]`)
@@ -267,4 +454,8 @@
             editClasses(editBox, 'd-block', 'd-none')
             contentBox.classList.remove("d-none")
+        }else if(target.classList.contains("report-btn")){
+           const userForReporting = target.dataset.username
+           const userForReportingInput = document.querySelector('#reportUsername')
+            userForReportingInput.value=userForReporting
         }
     })