diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
index 4a837aefe5f8..dcbc2875114d 100644
--- a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
+++ b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -32,7 +32,6 @@ interface MapListSourceCartoucheProps {
   target: ElementPath
   selected: boolean
   openOn: 'single-click' | 'double-click'
-  countChildren?: boolean
 }
 
 export const MapListSourceCartoucheNavigator = React.memo((props: MapListSourceCartoucheProps) => {
@@ -45,7 +44,7 @@ export const MapListSourceCartoucheNavigator = React.memo((props: MapListSourceC
         minWidth: 0,
       }}
     >
-      <MapListSourceCartoucheInner {...props} />
+      <MapListSourceCartoucheInner {...props} source='navigator' />
     </div>
   )
 })
@@ -54,143 +53,144 @@ MapListSourceCartoucheNavigator.displayName = 'MapListSourceCartoucheNavigator'
 export const MapListSourceCartoucheInspector = React.memo((props: MapListSourceCartoucheProps) => {
   return (
     <CartoucheInspectorWrapper>
-      <MapListSourceCartoucheInner {...props} />
+      <MapListSourceCartoucheInner {...props} source='inspector' />
     </CartoucheInspectorWrapper>
   )
 })
 MapListSourceCartoucheInspector.displayName = 'MapListSourceCartoucheInspector'
 
-const MapListSourceCartoucheInner = React.memo((props: MapListSourceCartoucheProps) => {
-  const { target, openOn } = props
-
-  const originalMapExpression = useEditorState(
-    Substores.metadata,
-    (store) => mapExpressionValueToMapSelector(store, [target]),
-    'ConditionalSection condition expression',
-  )
-
-  const metadataForElement = useEditorState(
-    Substores.metadata,
-    (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
-    'ConditionalSection metadata',
-  )
-
-  const dispatch = useDispatch()
-
-  const onPickMappedElement = React.useCallback(
-    (expression: JSExpressionOtherJavaScript) => {
-      dispatch([
-        replaceElementInScope(target, {
-          type: 'update-map-expression',
-          valueToMap: expression,
-        }),
-      ])
-    },
-    [dispatch, target],
-  )
-
-  const [preferredAllState] = useAtom(DataPickerPreferredAllAtom)
-
-  const variableNamesInScope = useVariablesInScopeForSelectedElement(
-    target,
-    null,
-    preferredAllState,
-  )
-
-  const pathToMappedExpression = React.useMemo(
-    () =>
-      originalMapExpression === 'multiselect' || originalMapExpression === 'not-a-mapexpression'
-        ? null
-        : jsxElementChildToValuePath(originalMapExpression.valueToMap),
-    [originalMapExpression],
-  )
-
-  const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } = useDataPickerButton(
-    variableNamesInScope,
-    onPickMappedElement,
-    pathToMappedExpression,
-    target,
-  )
-
-  const onClick = React.useCallback(() => {
-    if (openOn === 'single-click') {
-      openPopup()
-    }
-  }, [openOn, openPopup])
-
-  const onDoubleClick = React.useCallback(() => {
-    if (openOn === 'double-click') {
-      openPopup()
-    }
-  }, [openOn, openPopup])
-
-  const isDataComingFromHookResult = useEditorState(
-    Substores.projectContentsAndMetadata,
-    (store) => {
-      if (
-        originalMapExpression === 'multiselect' ||
-        originalMapExpression === 'not-a-mapexpression'
-      ) {
-        return false
-      } else {
-        const traceDataResult = traceDataFromElement(
-          originalMapExpression.valueToMap,
-          target,
-          store.editor.jsxMetadata,
-          store.editor.projectContents,
-          dataPathSuccess([]),
-        )
-        return traceDataResult.type === 'hook-result'
+const MapListSourceCartoucheInner = React.memo(
+  (props: MapListSourceCartoucheProps & { source: 'inspector' | 'navigator' }) => {
+    const { target, openOn } = props
+
+    const originalMapExpression = useEditorState(
+      Substores.metadata,
+      (store) => mapExpressionValueToMapSelector(store, [target]),
+      'ConditionalSection condition expression',
+    )
+
+    const metadataForElement = useEditorState(
+      Substores.metadata,
+      (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
+      'ConditionalSection metadata',
+    )
+
+    const dispatch = useDispatch()
+
+    const onPickMappedElement = React.useCallback(
+      (expression: JSExpressionOtherJavaScript) => {
+        dispatch([
+          replaceElementInScope(target, {
+            type: 'update-map-expression',
+            valueToMap: expression,
+          }),
+        ])
+      },
+      [dispatch, target],
+    )
+
+    const [preferredAllState] = useAtom(DataPickerPreferredAllAtom)
+
+    const variableNamesInScope = useVariablesInScopeForSelectedElement(
+      target,
+      null,
+      preferredAllState,
+    )
+
+    const pathToMappedExpression = React.useMemo(
+      () =>
+        originalMapExpression === 'multiselect' || originalMapExpression === 'not-a-mapexpression'
+          ? null
+          : jsxElementChildToValuePath(originalMapExpression.valueToMap),
+      [originalMapExpression],
+    )
+
+    const { popupIsOpen, DataPickerComponent, setReferenceElement, openPopup } =
+      useDataPickerButton(variableNamesInScope, onPickMappedElement, pathToMappedExpression, target)
+
+    const onClick = React.useCallback(() => {
+      if (openOn === 'single-click') {
+        openPopup()
       }
-    },
-    'ListSection isDataComingFromHookResult',
-  )
+    }, [openOn, openPopup])
 
-  const cartoucheDataType: CartoucheDataType = useEditorState(
-    Substores.projectContentsAndMetadataAndVariablesInScope,
-    (store) => {
-      if (
-        originalMapExpression === 'multiselect' ||
-        originalMapExpression === 'not-a-mapexpression'
-      ) {
-        return 'unknown'
+    const onDoubleClick = React.useCallback(() => {
+      if (openOn === 'double-click') {
+        openPopup()
       }
-      return getCartoucheDataTypeForExpression(
-        target,
-        originalMapExpression.valueToMap,
-        store.editor.variablesInScope,
-      )
-    },
-    'MapListSourceCartouche cartoucheDataType',
-  )
-
-  if (originalMapExpression === 'multiselect' || originalMapExpression === 'not-a-mapexpression') {
-    return null
-  }
-
-  const contentsToDisplay = getTextContentOfElement(
-    originalMapExpression.valueToMap,
-    metadataForElement,
-  )
-
-  return (
-    <React.Fragment>
-      {popupIsOpen ? DataPickerComponent : null}
-      <DataCartoucheInner
-        ref={setReferenceElement}
-        contentsToDisplay={contentsToDisplay}
-        onClick={onClick}
-        onDoubleClick={onDoubleClick}
-        onDelete={NO_OP}
-        selected={props.selected}
-        safeToDelete={false}
-        testId='list-source-cartouche'
-        contentIsComingFromServer={isDataComingFromHookResult}
-        datatype={cartoucheDataType}
-        badge={
-          props.countChildren ? <MapCounter selected={props.selected} elementPath={target} /> : null
+    }, [openOn, openPopup])
+
+    const isDataComingFromHookResult = useEditorState(
+      Substores.projectContentsAndMetadata,
+      (store) => {
+        if (
+          originalMapExpression === 'multiselect' ||
+          originalMapExpression === 'not-a-mapexpression'
+        ) {
+          return false
+        } else {
+          const traceDataResult = traceDataFromElement(
+            originalMapExpression.valueToMap,
+            target,
+            store.editor.jsxMetadata,
+            store.editor.projectContents,
+            dataPathSuccess([]),
+          )
+          return traceDataResult.type === 'hook-result'
         }
-      />
-    </React.Fragment>
-  )
-})
+      },
+      'ListSection isDataComingFromHookResult',
+    )
+
+    const cartoucheDataType: CartoucheDataType = useEditorState(
+      Substores.projectContentsAndMetadataAndVariablesInScope,
+      (store) => {
+        if (
+          originalMapExpression === 'multiselect' ||
+          originalMapExpression === 'not-a-mapexpression'
+        ) {
+          return 'unknown'
+        }
+        return getCartoucheDataTypeForExpression(
+          target,
+          originalMapExpression.valueToMap,
+          store.editor.variablesInScope,
+        )
+      },
+      'MapListSourceCartouche cartoucheDataType',
+    )
+
+    if (
+      originalMapExpression === 'multiselect' ||
+      originalMapExpression === 'not-a-mapexpression'
+    ) {
+      return null
+    }
+
+    const contentsToDisplay = getTextContentOfElement(
+      originalMapExpression.valueToMap,
+      metadataForElement,
+    )
+
+    return (
+      <React.Fragment>
+        {popupIsOpen ? DataPickerComponent : null}
+        <DataCartoucheInner
+          ref={setReferenceElement}
+          contentsToDisplay={contentsToDisplay}
+          onClick={onClick}
+          onDoubleClick={onDoubleClick}
+          onDelete={NO_OP}
+          selected={props.selected}
+          safeToDelete={false}
+          testId='list-source-cartouche'
+          contentIsComingFromServer={isDataComingFromHookResult}
+          datatype={cartoucheDataType}
+          badge={
+            <MapCounter selected={props.selected} elementPath={target} source={props.source} />
+          }
+        />
+      </React.Fragment>
+    )
+  },
+)
diff --git a/editor/src/components/navigator/navigator-item/map-counter.tsx b/editor/src/components/navigator/navigator-item/map-counter.tsx
index 510b846c261b..66e50c9c7dd3 100644
--- a/editor/src/components/navigator/navigator-item/map-counter.tsx
+++ b/editor/src/components/navigator/navigator-item/map-counter.tsx
@@ -17,8 +17,11 @@ import { colorTheme } from '../../../uuiui'
 
 export const MapCounterTestIdPrefix = 'map-counter-'
 
-export function getMapCounterTestId(path: ElementPath): string {
-  return `${MapCounterTestIdPrefix}${EP.toString(path)}`
+export function getMapCounterTestId(
+  path: ElementPath,
+  source: 'navigator' | 'inspector' | 'data-picker',
+): string {
+  return `${MapCounterTestIdPrefix}${EP.toString(path)}-${source}`
 }
 
 type OverrideStatus = 'no-override' | 'overridden' | 'override-failed'
@@ -27,6 +30,7 @@ type SelectedStatus = true | false
 interface MapCounterProps {
   elementPath: ElementPath
   selected: boolean
+  source: 'navigator' | 'inspector' | 'data-picker'
 }
 
 export const MapCounter = React.memo((props: MapCounterProps) => {
@@ -101,7 +105,7 @@ export const MapCounter = React.memo((props: MapCounterProps) => {
 
   return (
     <MapCounterUi
-      data-testid={getMapCounterTestId(props.elementPath)}
+      data-testid={getMapCounterTestId(props.elementPath, props.source)}
       counterValue={shownCounterValue}
       overrideStatus={overrideStatus}
       selectedStatus={selectedStatus}
@@ -132,7 +136,7 @@ function getMapCounterStyleProps(
       return {
         ...stylePropsBase,
         backgroundColor: selectedStatus ? colorTheme.whiteOpacity30.value : colorTheme.bg1.value,
-        color: selectedStatus ? colorTheme.white.value : colorTheme.brandNeonPink.value,
+        color: selectedStatus ? colorTheme.white.value : undefined,
       }
     case 'overridden':
       return {
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
index f898de0e0978..bc951931c96a 100644
--- a/editor/src/components/navigator/navigator-item/navigator-item.tsx
+++ b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -1090,7 +1090,6 @@ export const NavigatorRowLabel = React.memo((props: NavigatorRowLabelProps) => {
         target={props.navigatorEntry.elementPath}
         selected={props.selected}
         openOn='double-click'
-        countChildren={true}
       />
       <ComponentPreview
         key={`preview-${props.label}`}
diff --git a/editor/src/components/navigator/navigator-map.spec.browser2.tsx b/editor/src/components/navigator/navigator-map.spec.browser2.tsx
index 70eefec281c9..1ed3836faa0a 100644
--- a/editor/src/components/navigator/navigator-map.spec.browser2.tsx
+++ b/editor/src/components/navigator/navigator-map.spec.browser2.tsx
@@ -1,3 +1,4 @@
+/* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectRegularCounterWithCount"] }] */
 import {
   TestSceneUID,
   formatTestProjectCode,
@@ -103,7 +104,7 @@ describe('maps in the navigator', () => {
         )
 
         const mapPath = EP.fromString('utopia-storyboard-uid/scene-aaa/containing-div/map')
-        const counterTestId = getMapCounterTestId(mapPath)
+        const counterTestId = getMapCounterTestId(mapPath, 'navigator')
         const counter = await renderResult.renderedDOM.findByTestId(counterTestId)
 
         expectRegularCounterWithCount(counter, arr.length)
@@ -227,7 +228,7 @@ describe('maps in the navigator', () => {
           mapParent,
         )[0]
 
-        const counterTestId = getMapCounterTestId(mapElement.elementPath)
+        const counterTestId = getMapCounterTestId(mapElement.elementPath, 'navigator')
         const counter = await renderResult.renderedDOM.findByTestId(counterTestId)
 
         expectOverriddenCounterWithCount(counter, overrideCount, overrideSuccess)
@@ -246,7 +247,7 @@ describe('maps in the navigator', () => {
       )
 
       const mapPath = EP.fromString('utopia-storyboard-uid/scene-aaa/containing-div/map')
-      const counterTestId = getMapCounterTestId(mapPath)
+      const counterTestId = getMapCounterTestId(mapPath, 'navigator')
       let counter = await renderResult.renderedDOM.findByTestId(counterTestId)
       const counterBounds = counter.getBoundingClientRect()
       const counterCentre = {
@@ -279,7 +280,7 @@ describe('maps in the navigator', () => {
       )
 
       const mapPath = EP.fromString('utopia-storyboard-uid/scene-aaa/containing-div/map')
-      const counterTestId = getMapCounterTestId(mapPath)
+      const counterTestId = getMapCounterTestId(mapPath, 'navigator')
       let counter = await renderResult.renderedDOM.findByTestId(counterTestId)
       const counterBounds = counter.getBoundingClientRect()
       const counterCentre = {
@@ -312,7 +313,7 @@ describe('maps in the navigator', () => {
       )
 
       const mapPath = EP.fromString('utopia-storyboard-uid/scene-aaa/containing-div/map')
-      const counterTestId = getMapCounterTestId(mapPath)
+      const counterTestId = getMapCounterTestId(mapPath, 'navigator')
       let counter = await renderResult.renderedDOM.findByTestId(counterTestId)
       const counterBounds = counter.getBoundingClientRect()
       const counterCentre = {
@@ -341,7 +342,7 @@ describe('maps in the navigator', () => {
       )
 
       const mapPath = EP.fromString('utopia-storyboard-uid/scene-aaa/containing-div/map')
-      const counterTestId = getMapCounterTestId(mapPath)
+      const counterTestId = getMapCounterTestId(mapPath, 'navigator')
       let counter = await renderResult.renderedDOM.findByTestId(counterTestId)
       const counterBounds = counter.getBoundingClientRect()
       const counterCentre = {