diff --git a/admin_frontend/src/web_app.rs b/admin_frontend/src/web_app.rs
index 06c37cd5..12b790fa 100644
--- a/admin_frontend/src/web_app.rs
+++ b/admin_frontend/src/web_app.rs
@@ -59,7 +59,11 @@ pub async fn admin_users_handler(
         vec![]
       },
       |r| r.users,
-    );
+    )
+    .into_iter()
+    .filter(|user| user.deleted_at.is_none())
+    .collect::<Vec<_>>();
+
   let s = templates::Users { users: &users }.render()?;
   Ok(Html(s))
 }
diff --git a/admin_frontend/templates/users.html b/admin_frontend/templates/users.html
index 29f57aec..cabf230f 100644
--- a/admin_frontend/templates/users.html
+++ b/admin_frontend/templates/users.html
@@ -12,14 +12,17 @@
       <tr>
         <th>Email</th>
         <th>Created At</th>
-        <th>Action</th>
+        <th>Actions</th>
       </tr>
 
       {% for user in users %}
       <tr>
         <td>{{ user.email|escape }}</td>
         <td>{{ user.created_at|escape }}</td>
-        <td><a href="/web/admin/users/{{ user.id }}" class="btn">Go</a></td>
+        <td>
+          <a href="/web/admin/users/{{ user.id }}" class="btn">More Info</a>
+          <button class="deleteBtn" data-user-id="{{ user.id }}">Delete</button>
+        </td>
       </tr>
       {% endfor %}
     </table>
@@ -54,6 +57,52 @@
               });
           }
         });
+
+      document.addEventListener("DOMContentLoaded", (event) => {
+        // Get all delete buttons
+        const deleteButtons = document.querySelectorAll(".deleteBtn");
+
+        deleteButtons.forEach((btn) => {
+          btn.addEventListener("click", function (e) {
+            e.preventDefault(); // Prevent default behaviour
+
+            // Confirm the deletion
+            if (!confirm("Are you sure you want to delete this user?")) {
+              return;
+            }
+
+            // Get user ID from the data attribute
+            const userId = e.target.getAttribute("data-user-id");
+
+            // Call delete API
+            fetch(`/web-api/user/${userId}`, {
+              method: "DELETE",
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error(
+                    `Network response was not ok: ${response.statusText}`,
+                  );
+                }
+                return response.json();
+              })
+              .then((data) => {
+                if (data.code === 0) {
+                  // Mark the row as deleted
+                  e.target.closest("tr").style.textDecoration = "line-through";
+                  // Optionally disable the delete button
+                  e.target.disabled = true;
+                } else {
+                  throw new Error(`Error deleting user: ${data.message}`);
+                }
+              })
+              .catch((error) => {
+                console.error(`Error: ${error}`);
+                alert(`Failed to delete user: ${error}`);
+              });
+          });
+        });
+      });
     </script>
   </body>
 </html>