diff --git a/src/routes.js b/src/routes.js
index 9eedfb5..3d6902f 100755
--- a/src/routes.js
+++ b/src/routes.js
@@ -761,83 +761,6 @@ router.post("/attendevent/:eventID", async (req, res) => {
         });
 });
 
-router.post("/unattendevent/:eventID", (req, res) => {
-    const removalPassword = req.body.removalPassword;
-    // Don't allow blank removal passwords!
-    if (!removalPassword) {
-        return res.sendStatus(500);
-    }
-
-    Event.updateOne(
-        { id: req.params.eventID },
-        { $pull: { attendees: { removalPassword } } },
-    )
-        .then((response) => {
-            addToLog(
-                "unattendEvent",
-                "success",
-                "Attendee removed self from event " + req.params.eventID,
-            );
-            if (sendEmails) {
-                if (req.body.attendeeEmail) {
-                    req.app.get("hbsInstance").renderView(
-                        "./views/emails/unattendEvent/unattendEventHtml.handlebars",
-                        {
-                            eventID: req.params.eventID,
-                            siteName,
-                            siteLogo,
-                            domain,
-                            cache: true,
-                            layout: "email.handlebars",
-                        },
-                        function (err, html) {
-                            const msg = {
-                                to: req.body.attendeeEmail,
-                                from: {
-                                    name: siteName,
-                                    email: contactEmail,
-                                },
-                                subject: `${siteName}: You have been removed from an event`,
-                                html,
-                            };
-                            switch (mailService) {
-                                case "sendgrid":
-                                    sgMail.send(msg).catch((e) => {
-                                        console.error(e.toString());
-                                        res.status(500).end();
-                                    });
-                                    break;
-                                case "nodemailer":
-                                    nodemailerTransporter
-                                        .sendMail(msg)
-                                        .catch((e) => {
-                                            console.error(e.toString());
-                                            res.status(500).end();
-                                        });
-                                    break;
-                            }
-                        },
-                    );
-                }
-            }
-            res.writeHead(302, {
-                Location: "/" + req.params.eventID,
-            });
-            res.end();
-        })
-        .catch((err) => {
-            res.send("Database error, please try again :(");
-            addToLog(
-                "removeEventAttendee",
-                "error",
-                "Attempt to remove attendee from event " +
-                req.params.eventID +
-                " failed with error: " +
-                err,
-            );
-        });
-});
-
 // this is a one-click unattend that requires a secret URL that only the person who RSVPed over
 // activitypub knows
 router.get("/oneclickunattendevent/:eventID/:attendeeID", (req, res) => {
diff --git a/src/routes/event.ts b/src/routes/event.ts
index ad77052..3595e0a 100644
--- a/src/routes/event.ts
+++ b/src/routes/event.ts
@@ -642,4 +642,74 @@ router.post(
     },
 );
 
+router.delete(
+    "/event/attendee/:eventID",
+    async (req: Request, res: Response) => {
+        const removalPassword = req.query.p;
+        if (!removalPassword) {
+            return res
+                .status(400)
+                .json({ error: "Please provide a removal password." });
+        }
+        try {
+            const response = await Event.findOne({
+                id: req.params.eventID,
+                "attendees.removalPassword": removalPassword,
+            });
+            if (!response) {
+                return res.status(404).json({
+                    error: "No attendee found with that removal password.",
+                });
+            }
+            const attendee = response?.attendees?.find(
+                (a) => a.removalPassword === removalPassword,
+            );
+            if (!attendee) {
+                return res.status(404).json({
+                    error: "No attendee found with that removal password.",
+                });
+            }
+            const attendeeEmail = attendee.email;
+            const removalResponse = await Event.updateOne(
+                { id: req.params.eventID },
+                { $pull: { attendees: { removalPassword } } },
+            );
+            if (removalResponse.nModified === 0) {
+                return res.status(404).json({
+                    error: "No attendee found with that removal password.",
+                });
+            }
+            addToLog(
+                "unattendEvent",
+                "success",
+                `Attendee removed self from event ${req.params.eventID}`,
+            );
+            if (attendeeEmail && req.app.locals.sendEmails) {
+                await sendEmailFromTemplate(
+                    attendeeEmail,
+                    "You have been removed from an event",
+                    "unattendEvent",
+                    {
+                        eventID: req.params.eventID,
+                        siteName: res.locals.config?.general.site_name,
+                        siteLogo: res.locals.config?.general.email_logo_url,
+                        domain: res.locals.config?.general.domain,
+                    },
+                    req,
+                );
+            }
+            res.sendStatus(200);
+        } catch (e) {
+            addToLog(
+                "removeEventAttendee",
+                "error",
+                `Attempt to remove attendee from event ${req.params.eventID} failed with error: ${e}`,
+            );
+            return res.status(500).json({
+                error: "There has been an unexpected error. Please try again.",
+            });
+        }
+    },
+);
+
 export default router;
diff --git a/src/routes/frontend.ts b/src/routes/frontend.ts
index 51c207a..58128a0 100644
--- a/src/routes/frontend.ts
+++ b/src/routes/frontend.ts
@@ -527,8 +527,7 @@ router.get(
                     eventGroup: eventGroup._id,
                 }).sort("start");
                 const string = exportICal(events, eventGroup.name);
-                res.set("Content-Type", "text/calendar");
-                res.send(string);
+                res.set("Content-Type", "text/calendar").send(string);
             }
         } catch (err) {
             addToLog(
@@ -550,7 +549,7 @@ router.get("/export/event/:eventID", async (req: Request, res: Response) => {
 
         if (event) {
             const string = exportICal([event], event.name);
-            res.send(string);
+            res.set("Content-Type", "text/calendar").send(string);
         }
     } catch (err) {
         addToLog(
@@ -576,7 +575,7 @@ router.get(
                     eventGroup: eventGroup._id,
                 }).sort("start");
                 const string = exportICal(events, eventGroup.name);
-                res.send(string);
+                res.set("Content-Type", "text/calendar").send(string);
             }
         } catch (err) {
             addToLog(
diff --git a/views/event.handlebars b/views/event.handlebars
index 5da0330..6485ec5 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -221,7 +221,7 @@
   </div>
 </div>
 
-<div class="modal fade" id="unattendModal" tabindex="-1" role="dialog" aria-labelledby="unattendModalLabel" aria-hidden="true">
+<div class="modal fade" id="unattendModal" tabindex="-1" role="dialog" aria-labelledby="unattendModalLabel" aria-hidden="true" x-data="{ message: {}, password: '' }">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -230,13 +230,13 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <form id="unattendEventForm" action="/unattendevent/{{eventData.id}}" method="post">
+      <form id="unattendEventForm" x-on:submit.prevent="fetch(`/event/attendee/{{eventData.id}}?${new URLSearchParams({ p: password }).toString()}`, { method: 'DELETE' }).then(response => response.ok ? window.location.reload() : response.json()).then(data => message = data)">
       <div class="modal-body">
         <div class="form-group">
           <label for="removalPassword" class="form-label">Your deletion password</label>
           <p class="form-text small">Lost your password? Get in touch with the event organiser.</p>
-          <input type="text" class="form-control" id="removalPassword"
-          name="removalPassword">
+          <div x-bind:class="{ 'alert-danger': message?.error, 'alert-success': message?.success }" class="alert" x-text="message?.error || message?.success" x-show="message?.error || message?.success"></div>
+          <input type="password" class="form-control" id="removalPassword" name="removalPassword" x-model="password" required>
         </div>
       </div>
       <div class="modal-footer">