diff --git a/web/src/api/index.jsx b/web/src/api/index.jsx
index 5024096b1..b5ac78b19 100644
--- a/web/src/api/index.jsx
+++ b/web/src/api/index.jsx
@@ -117,14 +117,14 @@ export function useDelete() {
   return deleteEvent;
 }
 
-export function useRetain() {
+export function useRetain(shouldRetain) {
   const { dispatch, state } = useContext(Api);
 
   async function retainEvent(eventId) {
     if (!eventId) return null;
 
-    const response = await fetch(`${state.host}/api/events/${eventId}`, { method: 'POST' });
-    await dispatch({ type: 'DELETE', payload: { eventId } });
+    const response = await fetch(`${state.host}/api/events/${eventId}?retain=${shouldRetain}`, { method: 'POST' });
+    await dispatch({ type: 'POST', payload: { eventId } });
     return await (response.status < 300 ? response.json() : { success: true });
   }
 
diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index b05bb7b01..f140de572 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -14,7 +14,7 @@ import Dialog from '../components/Dialog';
 import Heading from '../components/Heading';
 import VideoPlayer from '../components/VideoPlayer';
 import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
-import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
+import { FetchStatus, useApiHost, useEvent, useDelete, useRetain } from '../api';
 
 const ActionButtonGroup = ({ className, handleClickRetain, handleClickDelete, close }) => (
   <div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
@@ -58,6 +58,7 @@ export default function Event({ eventId, close, scrollRef }) {
   const [showDetails, setShowDetails] = useState(false);
   const [shouldScroll, setShouldScroll] = useState(true);
   const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
+  const setRetainEvent = useRetain();
   const setDeleteEvent = useDelete();
 
   useEffect(() => {