diff --git a/web/src/api/index.jsx b/web/src/api/index.jsx
index caf7089f8..8e73891c4 100644
--- a/web/src/api/index.jsx
+++ b/web/src/api/index.jsx
@@ -125,11 +125,9 @@ export function useRetain() {
 
     if (shouldRetain) {
       const response = await fetch(`${state.host}/api/events/${eventId}/retain`, { method: 'POST' });
-      await dispatch({ type: 'POST', payload: { eventId } });
       return await (response.status < 300 ? response.json() : { success: true });
     } else {
       const response = await fetch(`${state.host}/api/events/${eventId}/retain`, { method: 'DELETE' });
-      await dispatch({ type: 'DELETE', 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 cf1aab0e7..f879c5aac 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -18,7 +18,7 @@ import { FetchStatus, useApiHost, useEvent, useDelete, useRetain } from '../api'
 
 const ActionButtonGroup = ({ className, isRetained, handleClickRetain, handleClickDelete, close }) => (
   <div className={`space-y-2 space-x-2 sm:space-y-0 xs:space-x-4 ${className}`}>
-    <Button className="xs:w-auto" color="yellow" onClick={handleClickRetain}>
+    <Button className="xs:w-auto" color={isRetained ? "red" : "yellow"} onClick={handleClickRetain}>
     {isRetained ? (
               <Fragment>
                 <StarRecording className="w-6" />
@@ -94,7 +94,6 @@ export default function Event({ eventId, close, scrollRef }) {
       success = await setRetainEvent(eventId, !isRetained);
 
       if (success) {
-        console.log("set was a success");
         setIsRetained(!isRetained);
       } else {
       }