diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
index e49d76ebbe..9c1b315b80 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
@@ -1,10 +1,12 @@
 import { useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIDroppable from 'common/components/IAIDroppable';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { LayerHeader } from 'features/controlLayers/components/Layer/LayerHeader';
 import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
 import { entitySelected } from 'features/controlLayers/store/canvasV2Slice';
-import { memo, useCallback } from 'react';
+import type { LayerImageDropData } from 'features/dnd/types';
+import { memo, useCallback, useMemo } from 'react';
 
 type Props = {
   id: string;
@@ -17,11 +19,16 @@ export const Layer = memo(({ id }: Props) => {
   const onSelect = useCallback(() => {
     dispatch(entitySelected({ id, type: 'layer' }));
   }, [dispatch, id]);
+  const droppableData = useMemo<LayerImageDropData>(
+    () => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
+    [id]
+  );
 
   return (
     <CanvasEntityContainer isSelected={isSelected} onSelect={onSelect}>
       <LayerHeader id={id} onToggleVisibility={onToggle} />
       {isOpen && <LayerSettings id={id} />}
+      <IAIDroppable data={droppableData} />
     </CanvasEntityContainer>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerSettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerSettings.tsx
index 0ef45dc223..8af3e81814 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerSettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerSettings.tsx
@@ -1,24 +1,12 @@
-import IAIDroppable from 'common/components/IAIDroppable';
 import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
-import type { LayerImageDropData } from 'features/dnd/types';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 type Props = {
   id: string;
 };
 
 export const LayerSettings = memo(({ id }: Props) => {
-  const droppableData = useMemo<LayerImageDropData>(
-    () => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
-    [id]
-  );
-
-  return (
-    <CanvasEntitySettings>
-      PLACEHOLDER
-      <IAIDroppable data={droppableData} />
-    </CanvasEntitySettings>
-  );
+  return <CanvasEntitySettings>PLACEHOLDER</CanvasEntitySettings>;
 });
 
 LayerSettings.displayName = 'LayerSettings';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
index 9a244b697c..b1bc6a5aa1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
@@ -25,6 +25,7 @@ export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorde
 
   return (
     <Flex
+      position="relative" // necessary for drop overlay
       flexDir="column"
       w="full"
       bg="base.850"