diff --git a/frontend/routes/account/invites.tsx b/frontend/routes/account/invites.tsx
index a64d71d2..4c2860cd 100644
--- a/frontend/routes/account/invites.tsx
+++ b/frontend/routes/account/invites.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { State } from "../../util.ts";
-import { path } from "../../utils/api.ts";
+import { APIResponse, path } from "../../utils/api.ts";
 import { FullUser, ScopeInvite } from "../../utils/api_types.ts";
 import { Table, TableData, TableRow } from "../../components/Table.tsx";
 import { AccountLayout } from "../account/(_components)/AccountLayout.tsx";
@@ -69,9 +69,9 @@ function InviteRow({ invite }: { invite: ScopeInvite }) {
       <TableData>
         <a
           class="text-cyan-700 hover:text-blue-400 hover:underline"
-          href={`/user/${invite.targetUser.id}`}
+          href={`/user/${invite.requestingUser.id}`}
         >
-          {invite.targetUser.name}
+          {invite.requestingUser.name}
         </a>
       </TableData>
       <TableData>
@@ -81,6 +81,7 @@ function InviteRow({ invite }: { invite: ScopeInvite }) {
             action={`/@${invite.scope}`}
             method="POST"
           >
+            <input type="hidden" name="scope" value={invite.scope} />
             <button
               type="submit"
               class="button-danger py-1 px-4"
@@ -122,4 +123,24 @@ export const handler: Handlers<Data, State> = {
       invites: invitesRes.data,
     });
   },
+  async POST(req, ctx) {
+    const form = await req.formData();
+    const action = form.get("action");
+    const scope = String(form.get("scope"));
+    let res: APIResponse<null>;
+    let location = `/account/invites`;
+    if (action === "join") {
+      res = await ctx.state.api.post<null>(path`/user/invites/${scope}`, null);
+      location = `/@${scope}`;
+    } else if (action === "reject") {
+      res = await ctx.state.api.delete<null>(path`/user/invites/${scope}`);
+    } else {
+      throw new Error("invalid action");
+    }
+    if (!res.ok) throw res; // graceful handle errors
+    return new Response(null, {
+      status: 303,
+      headers: { location },
+    });
+  },
 };