diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
new file mode 100644
index 0000000000..5df4b0a4c7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable i18next/no-literal-string */
+import { Flex } from '@invoke-ai/ui-library';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
+import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
+import { Layer } from 'features/controlLayers/components/Layer/Layer';
+import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
+import { mapId } from 'features/controlLayers/konva/util';
+import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
+  const rgIds = canvasV2.regions.entities.map(mapId).reverse();
+  const caIds = canvasV2.controlAdapters.entities.map(mapId).reverse();
+  const ipaIds = canvasV2.ipAdapters.entities.map(mapId).reverse();
+  const layerIds = canvasV2.layers.entities.map(mapId).reverse();
+  const entityCount = rgIds.length + caIds.length + ipaIds.length + layerIds.length;
+  return { rgIds, caIds, ipaIds, layerIds, entityCount };
+});
+
+export const CanvasEntityList = memo(() => {
+  const { t } = useTranslation();
+  const { rgIds, caIds, ipaIds, layerIds, entityCount } = useAppSelector(selectEntityIds);
+
+  if (entityCount > 0) {
+    return (
+      <ScrollableContent>
+        <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
+          {rgIds.map((id) => (
+            <RG key={id} id={id} />
+          ))}
+          {caIds.map((id) => (
+            <CA key={id} id={id} />
+          ))}
+          {ipaIds.map((id) => (
+            <IPA key={id} id={id} />
+          ))}
+          {layerIds.map((id) => (
+            <Layer key={id} id={id} />
+          ))}
+        </Flex>
+      </ScrollableContent>
+    );
+  }
+
+  return <IAINoContentFallback icon={null} label={t('controlLayers.noLayersAdded')} />;
+});
+
+CanvasEntityList.displayName = 'CanvasEntityList';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
index 9e771eb48e..4c8572a5f9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
@@ -1,60 +1,22 @@
 /* eslint-disable i18next/no-literal-string */
 import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
-import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
+import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList';
 import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
 import { IM } from 'features/controlLayers/components/InpaintMask/IM';
-import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
-import { Layer } from 'features/controlLayers/components/Layer/Layer';
-import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
-import { mapId } from 'features/controlLayers/konva/util';
-import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
-  const rgIds = canvasV2.regions.entities.map(mapId).reverse();
-  const caIds = canvasV2.controlAdapters.entities.map(mapId).reverse();
-  const ipaIds = canvasV2.ipAdapters.entities.map(mapId).reverse();
-  const layerIds = canvasV2.layers.entities.map(mapId).reverse();
-  const entityCount = rgIds.length + caIds.length + ipaIds.length + layerIds.length;
-  return { rgIds, caIds, ipaIds, layerIds, entityCount };
-});
 
 export const ControlLayersPanelContent = memo(() => {
-  const { t } = useTranslation();
-  const { rgIds, caIds, ipaIds, layerIds, entityCount } = useAppSelector(selectEntityIds);
-
+  const isCanvasSessionActive = useAppSelector((s) => s.canvasV2.session.isActive);
   return (
     <Flex flexDir="column" gap={2} w="full" h="full">
       <Flex justifyContent="space-around">
         <AddLayerButton />
         <DeleteAllLayersButton />
       </Flex>
-      <IM />
-      {entityCount > 0 && (
-        <ScrollableContent>
-          <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
-            {rgIds.map((id) => (
-              <RG key={id} id={id} />
-            ))}
-            {caIds.map((id) => (
-              <CA key={id} id={id} />
-            ))}
-            {ipaIds.map((id) => (
-              <IPA key={id} id={id} />
-            ))}
-            {layerIds.map((id) => (
-              <Layer key={id} id={id} />
-            ))}
-          </Flex>
-        </ScrollableContent>
-      )}
-      {entityCount === 0 && <IAINoContentFallback icon={null} label={t('controlLayers.noLayersAdded')} />}
+      {isCanvasSessionActive && <IM />}
+      <CanvasEntityList />
     </Flex>
   );
 });