diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
index 9792137bbe..32bfcbba07 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
@@ -6,7 +6,6 @@ import { clamp } from 'lodash-es';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
 import {
   imageRemoved,
-  selectImagesEntities,
   selectImagesIds,
 } from 'features/gallery/store/imagesSlice';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
@@ -33,7 +32,6 @@ export const addRequestedImageDeletionListener = () => {
 
       if (selectedImage && selectedImage === image_name) {
         const ids = selectImagesIds(state);
-        const entities = selectImagesEntities(state);
 
         const deletedImageIndex = ids.findIndex(
           (result) => result.toString() === image_name
@@ -49,10 +47,8 @@ export const addRequestedImageDeletionListener = () => {
 
         const newSelectedImageId = filteredIds[newSelectedImageIndex];
 
-        const newSelectedImage = entities[newSelectedImageId];
-
         if (newSelectedImageId) {
-          dispatch(imageSelected(newSelectedImageId));
+          dispatch(imageSelected(newSelectedImageId as string));
         } else {
           dispatch(imageSelected());
         }
@@ -84,7 +80,9 @@ export const addRequestedImageDeletionListener = () => {
 
       // Wait for successful deletion, then trigger boards to re-fetch
       const wasImageDeleted = await condition(
-        (action) => action.meta.requestId === requestId,
+        (action): action is ReturnType<typeof imageDeleted.fulfilled> =>
+          imageDeleted.fulfilled.match(action) &&
+          action.meta.requestId === requestId,
         30000
       );
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
index 7ae864f55b..71e080ff17 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/HoverableBoard.tsx
@@ -27,9 +27,12 @@ import { defaultSelectorOptions } from '../../../../app/store/util/defaultMemoiz
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from '../../../../app/store/store';
 import {
+  useAddImageToBoardMutation,
   useDeleteBoardMutation,
+  useGetImageDTOQuery,
   useUpdateBoardMutation,
 } from 'services/apiSlice';
+import { skipToken } from '@reduxjs/toolkit/dist/query';
 
 const coverImageSelector = (imageName: string | undefined) =>
   createSelector(
@@ -53,8 +56,9 @@ interface HoverableBoardProps {
 
 const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
   const dispatch = useAppDispatch();
-  const { coverImage } = useAppSelector(
-    coverImageSelector(board?.cover_image_name)
+
+  const { data: coverImage } = useGetImageDTOQuery(
+    board.cover_image_name ?? skipToken
   );
 
   const { board_name, board_id } = board;
@@ -69,6 +73,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
   const [deleteBoard, { isLoading: isDeleteBoardLoading }] =
     useDeleteBoardMutation();
 
+  const [addImageToBoard, { isLoading: isAddImageToBoardLoading }] =
+    useAddImageToBoardMutation();
+
   const handleUpdateBoardName = (newBoardName: string) => {
     updateBoard({ board_id, changes: { board_name: newBoardName } });
   };
@@ -82,16 +89,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
       if (droppedImage.board_id === board_id) {
         return;
       }
-      dispatch(
-        imageAddedToBoard({
-          requestBody: {
-            board_id,
-            image_name: droppedImage.image_name,
-          },
-        })
-      );
+      addImageToBoard({ board_id, image_name: droppedImage.image_name });
     },
-    [board_id, dispatch]
+    [addImageToBoard, board_id]
   );
 
   return (
@@ -141,7 +141,9 @@ const HoverableBoard = memo(({ board, isSelected }: HoverableBoardProps) => {
               }}
             >
               <IAIDndImage
-                image={coverImage}
+                image={
+                  board.cover_image_name && coverImage ? coverImage : undefined
+                }
                 onDrop={handleDrop}
                 fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
                 isUploadDisabled={true}