diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts b/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
index d72d20e8465..7aaa9280860 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
@@ -2,6 +2,7 @@ import { deepClone } from 'common/util/deepClone';
 import { merge } from 'lodash-es';
 import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
 
 OverlayScrollbars.plugin(ClickScrollPlugin);
 
@@ -27,3 +28,8 @@ export const getOverlayScrollbarsParams = (
   merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
   return params;
 };
+
+export const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
diff --git a/invokeai/frontend/web/src/features/dnd/DndImageFromImageName.tsx b/invokeai/frontend/web/src/features/dnd/DndImageFromImageName.tsx
deleted file mode 100644
index 314c11a8b33..00000000000
--- a/invokeai/frontend/web/src/features/dnd/DndImageFromImageName.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
-import { DndImage } from 'features/dnd/DndImage';
-import { memo } from 'react';
-import { PiExclamationMarkBold } from 'react-icons/pi';
-import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-
-/* eslint-disable-next-line @typescript-eslint/no-namespace */
-namespace DndImageFromImageName {
-  export interface Props extends Omit<DndImage.Props, 'imageDTO'> {
-    imageName: string;
-  }
-}
-
-export const DndImageFromImageName = memo(({ imageName, ...rest }: DndImageFromImageName.Props) => {
-  const query = useGetImageDTOQuery(imageName);
-  if (query.isLoading) {
-    return <IAINoContentFallbackWithSpinner />;
-  }
-  if (!query.data) {
-    return <IAINoContentFallback icon={<PiExclamationMarkBold />} />;
-  }
-
-  return <DndImage imageDTO={query.data} {...rest} />;
-});
-
-DndImageFromImageName.displayName = 'DndImageFromImageName';
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
index a36f389adc9..f4ef599c54b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
@@ -1,8 +1,10 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
+import { Box, Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import { useAppStore } from 'app/store/nanostores/store';
 import { IAINoContentFallback, IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
+import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
 import { UploadMultipleImageButton } from 'common/hooks/useImageUploadButton';
+import { TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
 import type { AddImagesToNodeImageFieldCollection } from 'features/dnd/dnd';
 import { addImagesToNodeImageFieldCollectionDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
@@ -12,6 +14,7 @@ import { removeImageFromNodeImageFieldCollectionAction } from 'features/imageAct
 import { useFieldIsInvalid } from 'features/nodes/hooks/useFieldIsInvalid';
 import { fieldImageCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type { ImageFieldCollectionInputInstance, ImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiExclamationMarkBold } from 'react-icons/pi';
@@ -20,6 +23,8 @@ import type { ImageDTO } from 'services/api/types';
 
 import type { FieldComponentProps } from './types';
 
+const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+
 const sx = {
   borderWidth: 1,
   '&[data-error=true]': {
@@ -68,15 +73,7 @@ export const ImageFieldCollectionInputComponent = memo(
     );
 
     return (
-      <Flex
-        position="relative"
-        className="nodrag"
-        w="full"
-        h="full"
-        minH={16}
-        alignItems="stretch"
-        justifyContent="center"
-      >
+      <Flex position="relative" w="full" h="full" minH={16} maxH={64} alignItems="stretch" justifyContent="center">
         {(!field.value || field.value.length === 0) && (
           <UploadMultipleImageButton
             w="full"
@@ -88,23 +85,17 @@ export const ImageFieldCollectionInputComponent = memo(
           />
         )}
         {field.value && field.value.length > 0 && (
-          <Grid
-            className="nopan"
-            borderRadius="base"
-            w="full"
-            h="full"
-            templateColumns="repeat(3, 1fr)"
-            gap={1}
-            sx={sx}
-            data-error={isInvalid}
-            p={1}
-          >
-            {field.value.map(({ image_name }) => (
-              <GridItem key={image_name} position="relative">
-                <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />
-              </GridItem>
-            ))}
-          </Grid>
+          <Box w="full" h="auto" p={1} sx={sx} data-error={isInvalid} borderRadius="base">
+            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}>
+              <Grid className="nopan nowheel" w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}>
+                {field.value.map(({ image_name }) => (
+                  <GridItem key={image_name} position="relative" className="nodrag">
+                    <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />
+                  </GridItem>
+                ))}
+              </Grid>
+            </OverlayScrollbarsComponent>
+          </Box>
         )}
         <DndDropTarget
           dndTarget={addImagesToNodeImageFieldCollectionDndTarget}
@@ -135,7 +126,16 @@ const ImageGridItemContent = memo(
 
     return (
       <>
-        <DndImage imageDTO={query.data} asThumbnail />
+        <DndImage
+          imageDTO={query.data}
+          asThumbnail
+          objectFit="contain"
+          w="full"
+          h="full"
+          aspectRatio="1/1"
+          backgroundSize={8}
+          backgroundImage={TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL}
+        />
         <DndImageIcon
           onClick={onClickRemove}
           icon={<PiArrowCounterClockwiseBold />}