diff --git a/admin/src/components/ServerData.tsx b/admin/src/components/ServerData.tsx
index 26167e72..923cb5d4 100644
--- a/admin/src/components/ServerData.tsx
+++ b/admin/src/components/ServerData.tsx
@@ -145,6 +145,9 @@ export function ServerDataProvider(props: { children: ReactNode }) {
       deleteUser(id: string) {
         return sock.updateUserData({ user: { id }, deleted: true });
       },
+      banUser(userId: string, isBanned: boolean) {
+        return sock.banUser({ userId, isBanned });
+      },
       updateGroup(group: GroupDto) {
         return sock.updateGroupData({ group, deleted: false });
       },
diff --git a/admin/src/components/Users.tsx b/admin/src/components/Users.tsx
index 13590d64..991cedfb 100644
--- a/admin/src/components/Users.tsx
+++ b/admin/src/components/Users.tsx
@@ -49,6 +49,41 @@ const SAVE_SVG = (
   </svg>
 );
 
+const DELETE_SVG = (
+  <svg
+    height="20"
+    viewBox="0 0 20 20"
+    width="20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 5l10 10M5 15L15 5"
+      fill="none"
+      stroke="#f44336"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
+const BLOCK_SVG = (
+  <svg
+    height="20"
+    viewBox="0 0 20 20"
+    width="20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10"
+      cy="10"
+      r="9"
+      stroke="#ff9800"
+      strokeWidth="2"
+      fill="none"
+    />
+    <line x1="5" y1="5" x2="15" y2="15" stroke="#ff9800" strokeWidth="2" />
+  </svg>
+);
+
 const styles = {
   select: { margin: "0 20px" },
   buttonsCellContainer: {
@@ -58,6 +93,7 @@ const styles = {
     display: "flex",
     justifyContent: "flex-end",
     alignItems: "center",
+    gap: "3px",
   },
   editButton: {
     background: "#f3f3f3",
@@ -106,6 +142,7 @@ function toForm(user: any) {
     id: user.id,
     groupId: user.groupId,
     email: user.email,
+    isBanned: user.isBanned,
   };
 }
 
@@ -163,6 +200,50 @@ function getColumns(setRowsData: any, serverData: any) {
           >
             {EDIT_SVG}
           </button>
+          <button
+            title="Block/Unblock"
+            style={styles.cancelButton}
+            onClick={async (e) => {
+              e.stopPropagation();
+
+              // Toggle isBanned status
+              const newStatus = !data.isBanned;
+              await serverData.banUser(data.id, newStatus);
+              data.isBanned = newStatus;
+
+              setRowsData((prevRows: any[]) =>
+                prevRows.map((row) =>
+                  row.id === data.id ? { ...row, isBanned: newStatus } : row
+                )
+              );
+              alert(
+                `User ${data.username} has been ${
+                  newStatus ? "blocked" : "unblocked"
+                }.`
+              );
+            }}
+          >
+            {BLOCK_SVG}
+          </button>
+          <button
+            title="Delete"
+            style={styles.cancelButton}
+            onClick={(e) => {
+              e.stopPropagation();
+
+              if (
+                window.confirm("Are you sure you want to delete this user?")
+              ) {
+                setRowsData((prevRows: any[]) =>
+                  prevRows.filter((row) => row.id !== data.id)
+                );
+                serverData.users.delete(data.id);
+                serverData.deleteUser(data.id);
+              }
+            }}
+          >
+            {DELETE_SVG}
+          </button>
         </div>
       ),
       editorCellRenderer: ({
diff --git a/server/src/user/user.service.ts b/server/src/user/user.service.ts
index ace3bf41..e110c21b 100644
--- a/server/src/user/user.service.ts
+++ b/server/src/user/user.service.ts
@@ -141,6 +141,10 @@ export class UserService {
     return await this.prisma.user.findMany();
   }
 
+  /**
+   * Delete a user based on their user id.
+   * @param user the user who will be deleted.
+   */
   async deleteUser(ability: AppAbility, user: User) {
     if (
       (await this.prisma.user.count({
@@ -157,6 +161,7 @@ export class UserService {
     await this.prisma.$transaction(async tx => {
       await this.groupsService.fixOrDeleteGroup({ id: user.groupId }, tx);
     });
+    console.log(`User ${user.id} deleted!`);
   }
 
   /**
@@ -219,6 +224,13 @@ export class UserService {
     });
   }
 
+  /**
+   * Check if a user exists based on their authentication type and id.
+   * @param authType the authentication type of the user.
+   * @param id the id of the user.
+   * @returns A promise containing the user if they exist.
+   *         Otherwise, it returns null.
+   */
   async checkIfUserExists(
     authType: AuthType,
     id: string,