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 d8f73cbaaa..d68ae0dea0 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx
@@ -1,5 +1,4 @@
 import { Spacer, useDisclosure } from '@invoke-ai/ui-library';
-import IAIDroppable from 'common/components/IAIDroppable';
 import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer';
 import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton';
 import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
@@ -9,7 +8,6 @@ import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerA
 import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
 import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
-import type { AddLayerFromImageDropData } from 'features/dnd/types';
 import { memo, useMemo } from 'react';
 
 import { LayerOpacity } from './LayerOpacity';
@@ -21,10 +19,6 @@ type Props = {
 export const Layer = memo(({ id }: Props) => {
   const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'layer' }), [id]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
-  const droppableData = useMemo<AddLayerFromImageDropData>(
-    () => ({ id, actionType: 'ADD_LAYER_IMAGE', context: { id } }),
-    [id]
-  );
 
   return (
     <EntityIdentifierContext.Provider value={entityIdentifier}>
@@ -38,7 +32,6 @@ export const Layer = memo(({ id }: Props) => {
           <CanvasEntityDeleteButton />
         </CanvasEntityHeader>
         {isOpen && <LayerSettings />}
-        <IAIDroppable data={droppableData} />
       </CanvasEntityContainer>
     </EntityIdentifierContext.Provider>
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
index e8aca8057e..5fe0203861 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
@@ -1,12 +1,25 @@
 import type { FlexProps } from '@invoke-ai/ui-library';
-import { Flex } from '@invoke-ai/ui-library';
-import { memo } from 'react';
+import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library';
+import { CanvasEntityActionMenuItems } from 'features/controlLayers/components/common/CanvasEntityActionMenuItems';
+import { memo, useCallback } from 'react';
 
 export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
+  const renderMenu = useCallback(() => {
+    return (
+      <MenuList>
+        <CanvasEntityActionMenuItems />
+      </MenuList>
+    );
+  }, []);
+
   return (
-    <Flex gap={3} alignItems="center" p={3} cursor="pointer" {...rest}>
-      {children}
-    </Flex>
+    <ContextMenu renderMenu={renderMenu}>
+      {(ref) => (
+        <Flex ref={ref} gap={2} alignItems="center" p={2} role="button" {...rest}>
+          {children}
+        </Flex>
+      )}
+    </ContextMenu>
   );
 });