Index: src/main/resources/templates/show-blacklisted-users.html
===================================================================
--- src/main/resources/templates/show-blacklisted-users.html	(revision c35bdfec11225c788f8cadc62d1f20d677dac55b)
+++ src/main/resources/templates/show-blacklisted-users.html	(revision 7a612b9f7945eb326de428ad61940dcf24d94b4e)
@@ -15,5 +15,6 @@
         <h1 class="text-center">
             Latest</h1>
-        <div class="row fs-4" th:if="${!#lists.isEmpty(current)}">
+        <div class="row fs-4"
+             th:if="${!#lists.isEmpty(current)}">
             <div class="col"></div>
             <div class="col-auto "
@@ -52,4 +53,8 @@
                     Start
                     time</p>
+                <p style="cursor: pointer;"
+                   class="show-reason text-decoration-underline"
+                   th:if="${!blacklisted.getReason().isBlank()}">
+                    Reason</p>
             </div>
         </div>
@@ -63,28 +68,41 @@
                 <span style="margin-right: 2em">End time</span>
             </div>
-            <div class="list-group-item d-flex gap-2 justify-content-between align-items-center ps-4 pe-4"
+            <div class="list-group-item d-flex gap-2 justify-content-between align-items-center ps-4 pe-4 flex-wrap"
                  th:each="prev : ${previous}">
-                <div class="d-flex flex-row align-items-center gap-3">
-                    <img class="rounded-circle border border-1 border-info"
-                         style="width: 5em; height: 5em"
-                         th:src="${prev.getRefersTo().getAvatarUrl()}">
-                    <h5 class="mb-1 d-flex">
-                        <a th:href="@{/{username}/profile (username=${prev.getRefersTo().getUsername()})}"
-                           th:text="${prev.getRefersTo().getUsername()}"
-                           class="text-decoration-none"
-                        ></a>
-                    </h5>
+                <div class="w-100 d-flex flex-row justify-content-between">
+                    <div class="d-flex flex-row align-items-center gap-3 ">
+                        <img class="rounded-circle border border-1 border-info"
+                             style="width: 5em; height: 5em"
+                             th:src="${prev.getRefersTo().getAvatarUrl()}">
+                        <h5 class="mb-1 d-flex">
+                            <a th:href="@{/{username}/profile (username=${prev.getRefersTo().getUsername()})}"
+                               th:text="${prev.getRefersTo().getUsername()}"
+                               class="text-decoration-none"
+                            ></a>
+                        </h5>
+                    </div>
+                    <div class="d-flex gap-3 align-items-center">
+                        <p style="cursor: pointer"
+                           class="show-reason text-decoration-underline mb-0"
+                           th:if="${!prev.getReason().isBlank()}">
+                            Reason</p>
+                        <p class="mb-0"
+                           style="width: 7em"
+                           th:text="${#temporals.format(prev.getStartTime(), 'dd MMM yyyy')}">
+                            Start
+                            time</p>
+                        <p class="mb-0"
+                           style="width: 7em"
+                           th:text="${#temporals.format(prev.getEndTime(), 'dd MMM yyyy')}">
+                            End
+                            time</p>
+                    </div>
                 </div>
-                <div class="d-flex gap-3 align-items-center">
-                    <p class="mb-0"
-                       style="width: 7em"
-                       th:text="${#temporals.format(prev.getStartTime(), 'dd MMM yyyy')}">
-                        Start
-                        time</p>
-                    <p class="mb-0"
-                       style="width: 7em"
-                       th:text="${#temporals.format(prev.getEndTime(), 'dd MMM yyyy')}">
-                        End
-                        time</p>
+                <div th:if="${!prev.getReason().isBlank()}"
+                     style="display: none"
+                     class="reason w-100 mt-3">
+                    <h3>
+                        Reason:</h3>
+                    <p th:text="${prev.getReason()}"></p>
                 </div>
             </div>
@@ -93,3 +111,26 @@
 </main>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    document.addEventListener("click", ev => {
+        const target = ev.target
+        if (target == null) return
+        else if (target.classList.contains("show-reason")) {
+            target.classList.remove("show-reason")
+
+            const feedbackContainer = target.parentElement.parentElement.parentElement.querySelector('.reason')
+            feedbackContainer.style.display = 'block'
+
+            target.innerText = 'Less'
+            target.classList.add("show-less")
+        } else if (target.classList.contains("show-less")) {
+            target.classList.remove("show-less")
+
+            const feedbackContainer = target.parentElement.parentElement.parentElement.querySelector('.reason')
+            feedbackContainer.style.display = 'none'
+
+            target.innerText = 'Reason'
+            target.classList.add("show-reason")
+        }
+    })
+</script>
 </body>