diff --git a/react-components/src/components/RevealToolbar/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton.tsx
index 8245db5bac9..7e73d6c2e3b 100644
--- a/react-components/src/components/RevealToolbar/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton.tsx
@@ -2,29 +2,163 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useState } from 'react';
+import { type ReactElement, useState, useEffect, useMemo, useRef } from 'react';
 import { Button, Dropdown } from '@cognite/cogs.js';
-import { LayersContainer } from './LayersContainer/LayersContainer';
+import { type Reveal3DResourcesLayerStates } from './LayersContainer/types';
+import LayersContainer from './LayersContainer/LayersContainer';
+import {
+  type CognitePointCloudModel,
+  type CogniteCadModel,
+  type CogniteModel,
+  type Image360Collection
+} from '@cognite/reveal';
+import { useReveal } from '../RevealContainer/RevealContext';
+import { use3DModelName } from '../../hooks/use3DModelName';
+import isEqual from 'lodash/isEqual';
 
 export const LayersButton = (): ReactElement => {
-  const [layersEnabled, setLayersEnabled] = useState(false);
+  const viewer = useReveal();
+  const [layersEnabled, setLayersEnabled] = useState<boolean>(false);
+
+  const [cadModelIds, setCadModelIds] = useState<number[]>([]);
+  const [pointCloudModelIds, setPointCloudModelIds] = useState<number[]>([]);
+  const prevModelsRef = useRef<CogniteModel[]>([]);
+
+  const [reveal3DResourcesLayerData, setReveal3DResourcesLayerData] =
+    useState<Reveal3DResourcesLayerStates>({
+      cadLayerData: [],
+      pointCloudLayerData: [],
+      image360LayerData: []
+    });
+
+  const cadModelName = use3DModelName(cadModelIds);
+  const pointCloudModelName = use3DModelName(pointCloudModelIds);
+
   const showLayers = (): void => {
     setLayersEnabled(!layersEnabled);
   };
 
+  useEffect(() => {
+    const currentModels = viewer.models;
+    // Compare the previous and current models to avoid infinite loop
+    if (prevModelsRef.current !== currentModels) {
+      prevModelsRef.current = currentModels;
+      const cadIds = currentModels
+        .filter((model) => model.type === 'cad')
+        .map((model) => model.modelId);
+      const pointCloudIds = currentModels
+        .filter((model) => model.type === 'pointcloud')
+        .map((model) => model.modelId);
+
+      // Only update the state when the modelIds change
+      if (!isEqual(cadModelIds, cadIds)) {
+        setCadModelIds(cadIds);
+      }
+
+      if (!isEqual(pointCloudModelIds, pointCloudIds)) {
+        setPointCloudModelIds(pointCloudIds);
+      }
+    }
+  }, [viewer.models, cadModelIds, pointCloudModelIds]);
+
+  const updated3DResourcesLayerData: Reveal3DResourcesLayerStates = useMemo(() => {
+    if (cadModelName.data === null && pointCloudModelName.data === null) {
+      return {
+        cadLayerData: [],
+        pointCloudLayerData: [],
+        image360LayerData: []
+      };
+    }
+    const updatedCadLayerData = viewer.models
+      .filter((model): model is CogniteCadModel => model.type === 'cad')
+      .map((model, index) => fillCadLayerData(model, index));
+    const updatedPointCloudLayerData = viewer.models
+      .filter((model): model is CognitePointCloudModel => model.type === 'pointcloud')
+      .map((model, index) => fillPointCloudLayerData(model, index));
+    const updatedImage360LayerData = viewer
+      .get360ImageCollections()
+      .map((image36Collection) => fillImage360LayerData(image36Collection));
+
+    updatedImage360LayerData.forEach((image360LayerData) => {
+      subcribe360ImageEnterExitMode(image360LayerData);
+    });
+
+    function fillCadLayerData(
+      cadModel: CogniteCadModel,
+      index: number
+    ): { model: CogniteCadModel; isToggled: boolean; name: string } {
+      return {
+        model: cadModel,
+        isToggled: cadModel.visible ?? true,
+        name: cadModelName?.data?.[index] ?? 'No model name'
+      };
+    }
+
+    function fillPointCloudLayerData(
+      pointCloudModel: CognitePointCloudModel,
+      index: number
+    ): { model: CognitePointCloudModel; isToggled: boolean; name: string } {
+      return {
+        model: pointCloudModel,
+        isToggled: pointCloudModel.getDefaultPointCloudAppearance().visible ?? true,
+        name: pointCloudModelName?.data?.[index] ?? 'No model name'
+      };
+    }
+
+    function fillImage360LayerData(image360Collection: Image360Collection): {
+      image360: Image360Collection;
+      isToggled: boolean;
+      isActive: boolean;
+    } {
+      return {
+        image360: image360Collection,
+        isToggled: true,
+        isActive: false
+      };
+    }
+
+    function subcribe360ImageEnterExitMode(image360LayerData: {
+      image360: Image360Collection;
+      isToggled: boolean;
+      isActive: boolean;
+    }): void {
+      image360LayerData.image360.on('image360Entered', () => {
+        image360LayerData.isActive = true;
+      });
+      image360LayerData.image360.on('image360Exited', () => {
+        image360LayerData.isActive = false;
+      });
+    }
+
+    return {
+      cadLayerData: updatedCadLayerData,
+      pointCloudLayerData: updatedPointCloudLayerData,
+      image360LayerData: updatedImage360LayerData
+    };
+  }, [
+    viewer.models.length,
+    viewer.get360ImageCollections().length,
+    cadModelName.data,
+    pointCloudModelName.data
+  ]);
+
+  useEffect(() => {
+    setReveal3DResourcesLayerData(updated3DResourcesLayerData);
+  }, [updated3DResourcesLayerData]);
+
   return (
     <Dropdown
       appendTo={document.body}
-      content={<LayersContainer />}
-      visible={layersEnabled}
+      content={
+        <LayersContainer
+          props={{
+            reveal3DResourcesLayerData,
+            setReveal3DResourcesLayerData
+          }}
+        />
+      }
       placement="auto">
-      <Button
-        type="ghost"
-        toggled={layersEnabled}
-        icon="Layers"
-        aria-label="3D Resource layers"
-        onClick={showLayers}
-      />
+      <Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
     </Dropdown>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
index aabd4eda4d6..e04cb37f321 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx
@@ -2,38 +2,29 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { type ReactElement, useState } from 'react';
+import { type ReactElement } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { type CogniteCadModel } from '@cognite/reveal';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
-import { use3DModelName } from '../../../hooks/use3DModelName';
 import uniqueId from 'lodash/uniqueId';
+import { type Reveal3DResourcesLayersProps } from './types';
 
-export const CadModelLayersContainer = (): ReactElement => {
+export const CadModelLayersContainer = ({
+  layerProps
+}: {
+  layerProps: Reveal3DResourcesLayersProps;
+}): ReactElement => {
   const viewer = useReveal();
-  const cadModels = viewer.models.filter((model) => model.type === 'cad');
-  const cadModelIds = cadModels.map((model) => model.modelId);
 
-  const modelName = use3DModelName(cadModelIds);
+  const { cadLayerData } = layerProps.reveal3DResourcesLayerData;
 
-  const [selectedCadModels, setSelectedCadModels] = useState<
-    Array<{ model: CogniteCadModel; isToggled: boolean; name: string }>
-  >(
-    cadModels.map((model, index) => ({
-      model: model as CogniteCadModel,
-      isToggled: (model as CogniteCadModel).visible,
-      name: modelName?.data?.[index] ?? 'No model name'
-    }))
-  );
-
-  const [allCadModelVisible, setAllCadModelVisible] = useState(true);
-  const [indeterminate, setIndeterminate] = useState<boolean>(false);
-
-  const count = selectedCadModels.length.toString();
+  const count = cadLayerData.length.toString();
+  const someModelVisible = !cadLayerData.every((data) => !data.isToggled);
+  const indeterminate = cadLayerData.some((data) => !data.isToggled);
 
   const handleCadModelVisibility = (model: CogniteCadModel): void => {
-    selectedCadModels.map((data) => {
+    const updatedSelectedCadModels = cadLayerData.map((data) => {
       if (data.model === model) {
         return {
           ...data,
@@ -45,26 +36,31 @@ export const CadModelLayersContainer = (): ReactElement => {
     });
     model.visible = !model.visible;
     viewer.requestRedraw();
-    setSelectedCadModels([...selectedCadModels]);
-    setIndeterminate(selectedCadModels.some((data) => !data.isToggled));
-    setAllCadModelVisible(!selectedCadModels.every((data) => !data.isToggled));
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      cadLayerData: updatedSelectedCadModels
+    }));
   };
 
   const handleAllCadModelsVisibility = (visible: boolean): void => {
-    selectedCadModels.forEach((data) => {
-      data.isToggled = visible;
+    const updatedSelectedCadModels = cadLayerData.map((data) => ({
+      ...data,
+      isToggled: visible
+    }));
+    updatedSelectedCadModels.forEach((data) => {
       data.model.visible = visible;
     });
     viewer.requestRedraw();
-    setAllCadModelVisible(visible);
-    setIndeterminate(false);
-    setSelectedCadModels([...selectedCadModels]);
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      cadLayerData: updatedSelectedCadModels
+    }));
   };
 
-  const cadModelContent = (): React.JSX.Element => {
+  const cadModelContent = (): ReactElement => {
     return (
       <StyledSubMenu>
-        {selectedCadModels.map((data) => (
+        {cadLayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
             hasCheckbox
@@ -83,19 +79,23 @@ export const CadModelLayersContainer = (): ReactElement => {
   };
 
   return (
-    <Menu.Submenu content={cadModelContent()} title="CAD models">
-      <Flex direction="row" justifyContent="space-between" gap={4}>
-        <Checkbox
-          checked={allCadModelVisible}
-          indeterminate={indeterminate}
-          onChange={(e, c) => {
-            e.stopPropagation();
-            handleAllCadModelsVisibility(c as boolean);
-          }}
-        />
-        <StyledLabel> CAD models </StyledLabel>
-        <StyledChipCount label={count} hideTooltip type="neutral" />
-      </Flex>
-    </Menu.Submenu>
+    <>
+      {cadLayerData.length > 0 && (
+        <Menu.Submenu content={cadModelContent()} title="CAD models">
+          <Flex direction="row" justifyContent="space-between" gap={4}>
+            <Checkbox
+              checked={someModelVisible}
+              indeterminate={indeterminate}
+              onChange={(e) => {
+                e.stopPropagation();
+                handleAllCadModelsVisibility(e.target.checked);
+              }}
+            />
+            <StyledLabel> CAD models </StyledLabel>
+            <StyledChipCount label={count} hideTooltip type="neutral" />
+          </Flex>
+        </Menu.Submenu>
+      )}
+    </>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
index 07372d5f904..b8525573428 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx
@@ -2,60 +2,63 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { type ReactElement, useState } from 'react';
+import { type ReactElement } from 'react';
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type Image360Collection } from '@cognite/reveal';
 import uniqueId from 'lodash/uniqueId';
+import { type Reveal3DResourcesLayersProps } from './types';
 
-export const Image360CollectionLayerContainer = (): ReactElement => {
+export const Image360CollectionLayerContainer = ({
+  layerProps
+}: {
+  layerProps: Reveal3DResourcesLayersProps;
+}): ReactElement => {
   const viewer = useReveal();
-  const image360Collection = viewer.get360ImageCollections();
+  const { image360LayerData } = layerProps.reveal3DResourcesLayerData;
 
-  const [selectedImage360Collection, setSelectedImage360Collection] = useState<
-    Array<{ image360: Image360Collection; isToggled: boolean }>
-  >(
-    image360Collection.map((image360Collection) => ({
-      image360: image360Collection,
-      isToggled: true
-    }))
-  );
-
-  const [all360ImagesVisible, setAll360ImagesVisible] = useState(true);
-  const [indeterminate, setIndeterminate] = useState<boolean>(false);
-
-  const count = image360Collection.length.toString();
+  const count = image360LayerData.length.toString();
+  const someImagesVisible = !image360LayerData.every((data) => !data.isToggled);
+  const indeterminate = image360LayerData.some((data) => !data.isToggled);
 
   const handle360ImagesVisibility = (image360: Image360Collection): void => {
-    selectedImage360Collection.map((data) => {
+    const updatedImage360Collection = image360LayerData.map((data) => {
       if (data.image360 === image360) {
         data.isToggled = !data.isToggled;
+        // Exit 360 image if it is active
+        if (data.isActive) {
+          viewer.exit360Image();
+        }
+
         image360.setIconsVisibility(data.isToggled);
       }
       return data;
     });
     viewer.requestRedraw();
-    setSelectedImage360Collection([...selectedImage360Collection]);
-    setIndeterminate(selectedImage360Collection.some((data) => !data.isToggled));
-    setAll360ImagesVisible(!selectedImage360Collection.every((data) => !data.isToggled));
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      image360LayerData: updatedImage360Collection
+    }));
   };
 
   const handleAll360ImagesVisibility = (visible: boolean): void => {
-    [...selectedImage360Collection].forEach((data) => {
+    [...image360LayerData].forEach((data) => {
       data.isToggled = visible;
       data.image360.setIconsVisibility(data.isToggled);
     });
+    image360LayerData.some((data) => data.isActive) && viewer.exit360Image();
     viewer.requestRedraw();
-    setAll360ImagesVisible(visible);
-    setIndeterminate(false);
-    setSelectedImage360Collection([...selectedImage360Collection]);
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      image360LayerData
+    }));
   };
 
-  const image360Content = (): React.JSX.Element => {
+  const image360Content = (): ReactElement => {
     return (
       <StyledSubMenu>
-        {selectedImage360Collection.map((data) => (
+        {image360LayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
             hasCheckbox
@@ -74,19 +77,23 @@ export const Image360CollectionLayerContainer = (): ReactElement => {
   };
 
   return (
-    <Menu.Submenu content={image360Content()} title="360 images">
-      <Flex direction="row" justifyContent="space-between">
-        <Checkbox
-          checked={all360ImagesVisible}
-          indeterminate={indeterminate}
-          onChange={(e, c) => {
-            e.stopPropagation();
-            handleAll360ImagesVisibility(c as boolean);
-          }}
-        />
-        <StyledLabel> 360 images </StyledLabel>
-        <StyledChipCount label={count} hideTooltip type="neutral" />
-      </Flex>
-    </Menu.Submenu>
+    <>
+      {image360LayerData.length > 0 && (
+        <Menu.Submenu content={image360Content()} title="360 images">
+          <Flex direction="row" justifyContent="space-between">
+            <Checkbox
+              checked={someImagesVisible}
+              indeterminate={indeterminate}
+              onChange={(e) => {
+                e.stopPropagation();
+                handleAll360ImagesVisibility(e.target.checked);
+              }}
+            />
+            <StyledLabel> 360 images </StyledLabel>
+            <StyledChipCount label={count} hideTooltip type="neutral" />
+          </Flex>
+        </Menu.Submenu>
+      )}
+    </>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
index adc64c3b94f..63b440e76dc 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/LayersContainer.tsx
@@ -2,33 +2,39 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement } from 'react';
-
 import { Menu } from '@cognite/cogs.js';
 import styled from 'styled-components';
-
 import { CadModelLayersContainer } from './CadModelLayersContainer';
-import { PointCloudLayersContainer } from './PointCloudLayersContainer';
 import { Image360CollectionLayerContainer } from './Image360LayersContainer';
+import { PointCloudLayersContainer } from './PointCloudLayersContainer';
+import { type ReactElement } from 'react';
+import { type Reveal3DResourcesLayersProps } from './types';
+import { useReveal } from '../../RevealContainer/RevealContext';
 
-export const LayersContainer = (): ReactElement => {
+const LayersContainer = ({ props }: { props: Reveal3DResourcesLayersProps }): ReactElement => {
+  const viewer = useReveal();
   return (
-    <Container>
-      <StyledMenu>
-        <CadModelLayersContainer />
-        <PointCloudLayersContainer />
-        <Image360CollectionLayerContainer />
-      </StyledMenu>
-    </Container>
+    <>
+      {(viewer.models.length > 0 || viewer.get360ImageCollections().length > 0) && (
+        <Container>
+          <StyledMenu>
+            <CadModelLayersContainer layerProps={props} />
+            <PointCloudLayersContainer layerProps={props} />
+            <Image360CollectionLayerContainer layerProps={props} />
+          </StyledMenu>
+        </Container>
+      )}
+    </>
   );
 };
 
 const Container = styled.div`
   position: relative;
-  top: 40px;
 `;
 
 const StyledMenu = styled(Menu)`
   padding: 6px;
   width: 214px;
 `;
+
+export default LayersContainer;
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
index c8c573861c5..3202028f61b 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
+++ b/react-components/src/components/RevealToolbar/LayersContainer/PointCloudLayersContainer.tsx
@@ -2,39 +2,28 @@
  * Copyright 2023 Cognite AS
  */
 
-import React, { type ReactElement, useState } from 'react';
+import { type ReactElement } from 'react';
 
 import { useReveal } from '../../RevealContainer/RevealContext';
 import { Checkbox, Flex, Menu } from '@cognite/cogs.js';
 import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { type CognitePointCloudModel } from '@cognite/reveal';
-import { use3DModelName } from '../../../hooks/use3DModelName';
 import uniqueId from 'lodash/uniqueId';
+import { type Reveal3DResourcesLayersProps } from './types';
 
-export const PointCloudLayersContainer = (): ReactElement => {
+export const PointCloudLayersContainer = ({
+  layerProps
+}: {
+  layerProps: Reveal3DResourcesLayersProps;
+}): ReactElement => {
   const viewer = useReveal();
-  const pointCloudModels = viewer.models.filter((model) => model.type === 'pointcloud');
-  const pointCloudModelIds = pointCloudModels.map((model) => model.modelId);
-
-  const modelName = use3DModelName(pointCloudModelIds);
-
-  const [selectedPointCloudModels, setSelectedPointCloudModels] = useState<
-    Array<{ model: CognitePointCloudModel; isToggled: boolean; name: string }>
-  >(
-    pointCloudModels.map((model, index) => ({
-      model: model as CognitePointCloudModel,
-      isToggled: (model as CognitePointCloudModel).getDefaultPointCloudAppearance().visible ?? true,
-      name: modelName?.data?.[index] ?? 'No model name'
-    }))
-  );
-
-  const [allPointCloudModelVisible, setAllPointCloudModelVisible] = useState(true);
-  const [indeterminate, setIndeterminate] = useState<boolean>(false);
-
-  const count = pointCloudModels.length.toString();
+  const { pointCloudLayerData } = layerProps.reveal3DResourcesLayerData;
+  const count = pointCloudLayerData.length.toString();
+  const someModelVisible = !pointCloudLayerData.every((data) => !data.isToggled);
+  const indeterminate = pointCloudLayerData.some((data) => !data.isToggled);
 
   const handlePointCloudVisibility = (model: CognitePointCloudModel): void => {
-    selectedPointCloudModels.map((data) => {
+    const updatedPointCloudModels = pointCloudLayerData.map((data) => {
       if (data.model === model) {
         data.isToggled = !data.isToggled;
         model.setDefaultPointCloudAppearance({ visible: data.isToggled });
@@ -42,25 +31,29 @@ export const PointCloudLayersContainer = (): ReactElement => {
       return data;
     });
     viewer.requestRedraw();
-    setSelectedPointCloudModels([...selectedPointCloudModels]);
-    setIndeterminate(selectedPointCloudModels.some((data) => !data.isToggled));
-    setAllPointCloudModelVisible(!selectedPointCloudModels.every((data) => !data.isToggled));
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      pointCloudLayerData: updatedPointCloudModels
+    }));
   };
 
   const handleAllPointCloudModelsVisibility = (visible: boolean): void => {
-    selectedPointCloudModels.forEach((data) => {
+    pointCloudLayerData.forEach((data) => {
       data.isToggled = visible;
       data.model.setDefaultPointCloudAppearance({ visible });
     });
     viewer.requestRedraw();
-    setAllPointCloudModelVisible(visible);
-    setSelectedPointCloudModels([...selectedPointCloudModels]);
+
+    layerProps.setReveal3DResourcesLayerData((prevResourcesStates) => ({
+      ...prevResourcesStates,
+      pointCloudLayerData
+    }));
   };
 
-  const pointCloudModelContent = (): React.JSX.Element => {
+  const pointCloudModelContent = (): ReactElement => {
     return (
       <StyledSubMenu>
-        {selectedPointCloudModels.map((data) => (
+        {pointCloudLayerData.map((data) => (
           <Menu.Item
             key={uniqueId()}
             hasCheckbox
@@ -79,19 +72,23 @@ export const PointCloudLayersContainer = (): ReactElement => {
   };
 
   return (
-    <Menu.Submenu content={pointCloudModelContent()} title="Point clouds">
-      <Flex direction="row" justifyContent="space-between">
-        <Checkbox
-          checked={allPointCloudModelVisible}
-          indeterminate={indeterminate}
-          onChange={(e, c) => {
-            e.stopPropagation();
-            handleAllPointCloudModelsVisibility(c as boolean);
-          }}
-        />
-        <StyledLabel> Point clouds </StyledLabel>
-        <StyledChipCount label={count} hideTooltip type="neutral" />
-      </Flex>
-    </Menu.Submenu>
+    <>
+      {pointCloudLayerData.length > 0 && (
+        <Menu.Submenu openOnHover={false} content={pointCloudModelContent()} title="Point clouds">
+          <Flex direction="row" justifyContent="space-between">
+            <Checkbox
+              checked={someModelVisible}
+              indeterminate={indeterminate}
+              onChange={(e) => {
+                e.stopPropagation();
+                handleAllPointCloudModelsVisibility(e.target.checked);
+              }}
+            />
+            <StyledLabel> Point clouds </StyledLabel>
+            <StyledChipCount label={count} hideTooltip type="neutral" />
+          </Flex>
+        </Menu.Submenu>
+      )}
+    </>
   );
 };
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
index 2b1de15235b..ba45f575ada 100644
--- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
+++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts
@@ -14,8 +14,26 @@ export const StyledMenu = styled(Menu)`
 `;
 
 export const StyledSubMenu = styled(Menu)`
-  box-shadow: none;
   padding: 8px;
+  overflow-y: auto;
+  max-height: 300px;
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 1px var(--cogs-surface--interactive--pressed);
+    border-radius: 8px;
+    background-color: var(--cogs-surface--misc-code--medium);
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: var(--cogs-surface--status-undefined--muted--pressed);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    border-radius: 8px;
+    background-color: var(--cogs-surface--misc-backdrop);
+  }
 `;
 
 export const StyledChipCount = styled(Chip)`
diff --git a/react-components/src/components/RevealToolbar/LayersContainer/types.ts b/react-components/src/components/RevealToolbar/LayersContainer/types.ts
new file mode 100644
index 00000000000..e4a177ab07a
--- /dev/null
+++ b/react-components/src/components/RevealToolbar/LayersContainer/types.ts
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+import {
+  type CogniteCadModel,
+  type CognitePointCloudModel,
+  type Image360Collection
+} from '@cognite/reveal';
+import { type Dispatch, type SetStateAction } from 'react';
+
+export type Reveal3DResourcesLayerStates = {
+  cadLayerData: Array<{
+    model: CogniteCadModel;
+    isToggled: boolean;
+    name?: string | undefined;
+  }>;
+  pointCloudLayerData: Array<{
+    model: CognitePointCloudModel;
+    isToggled: boolean;
+    name?: string | undefined;
+  }>;
+  image360LayerData: Array<{
+    image360: Image360Collection;
+    isToggled: boolean;
+    isActive: boolean;
+  }>;
+};
+
+export type SetReveal3DResourcesLayerStates = Dispatch<
+  SetStateAction<Reveal3DResourcesLayerStates>
+>;
+
+export type Reveal3DResourcesLayersProps = {
+  reveal3DResourcesLayerData: Reveal3DResourcesLayerStates;
+  setReveal3DResourcesLayerData: SetReveal3DResourcesLayerStates;
+};