diff --git a/web/src/api/index.jsx b/web/src/api/index.jsx
index 84914b782..0f69f94a7 100644
--- a/web/src/api/index.jsx
+++ b/web/src/api/index.jsx
@@ -39,18 +39,6 @@ function reducer(state, { type, payload, meta }) {
 
       return produce(state, (draftState) => {
         Object.keys(draftState.queries).map((url, index) => {
-          // If data has no array length then just return state.
-          if (!('data' in draftState.queries[url]) || !draftState.queries[url].data.length) return state;
-
-          //Find the index to remove
-          const removeIndex = draftState.queries[url].data.map((event) => event.id).indexOf(eventId);
-          if (removeIndex === -1) return state;
-
-          // We need to keep track of deleted items, This will be used to re-calculate "ReachEnd" for auto load new events. Events.jsx
-          const totDeleted = state.queries[url].deleted || 0;
-
-          // Splice the deleted index.
-          draftState.queries[url].data.splice(removeIndex, 1);
           draftState.queries[url].deletedId = eventId;
         });
       });
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 9ea5db886..c1fdce836 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -36,6 +36,7 @@ const reducer = (state = initialState, action) => {
       return produce(state, (draftState) => {
         draftState.searchStrings[searchString] = true;
         draftState.events.push(...payload);
+        draftState.deleted = 0;
       });
     }
 
@@ -71,6 +72,10 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
   const [viewEvent, setViewEvent] = useState(null);
   const [searchString, setSearchString] = useState(`${defaultSearchString(limit)}&${initialSearchParams.toString()}`);
   const { data, status, deletedId } = useEvents(searchString);
+  console.log('deleted', deleted);
+  console.log('deletedId', deletedId);
+  console.log('limit', limit);
+  console.log('data.length', data && data.length);
 
   let scrollToRef = {};
   useEffect(() => {
@@ -79,13 +84,16 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     }
 
     if (data && Array.isArray(data) && data.length + deleted < limit) {
+      console.log('reached end');
       dispatch({ type: 'REACHED_END', meta: { searchString } });
     }
+  }, [data, limit, searchString, searchStrings, deleted]);
 
+  useEffect(() => {
     if (deletedId) {
       dispatch({ type: 'DELETE_EVENT', deletedId });
     }
-  }, [data, limit, searchString, searchStrings, deleted, deletedId]);
+  }, [deletedId]);
 
   const [entry, setIntersectNode] = useIntersectionObserver();
 
@@ -214,9 +222,7 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
                     {viewEvent === id ? (
                       <Tr className="border-b-1">
                         <Td colspan="8">
-                          <div>
-                            <Event eventId={viewEvent} close={() => setViewEvent(null)} />
-                          </div>
+                          <Event eventId={viewEvent} close={() => setViewEvent(null)} />
                         </Td>
                       </Tr>
                     ) : null}