diff --git a/react-components/package.json b/react-components/package.json
index f1a19f59a87..0bba15913c4 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.60.1",
+  "version": "0.60.2",
   "exports": {
     ".": {
       "import": "./dist/index.js",
diff --git a/react-components/src/architecture/base/commands/DividerCommand.ts b/react-components/src/architecture/base/commands/DividerCommand.ts
new file mode 100644
index 00000000000..db05b5aaae0
--- /dev/null
+++ b/react-components/src/architecture/base/commands/DividerCommand.ts
@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { RenderTargetCommand } from './RenderTargetCommand';
+
+export class DividerCommand extends RenderTargetCommand {
+  public override get isVisible(): boolean {
+    return true;
+  }
+}
diff --git a/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts b/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts
index f22f251b5ac..968a1bb1039 100644
--- a/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts
+++ b/react-components/src/architecture/base/commands/mocks/MockCheckableCommand.ts
@@ -28,4 +28,8 @@ export class MockCheckableCommand extends RenderTargetCommand {
     this.value = !this.value;
     return true;
   }
+
+  public override get isToggle(): boolean {
+    return true;
+  }
 }
diff --git a/react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts b/react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts
new file mode 100644
index 00000000000..99dc3fb336e
--- /dev/null
+++ b/react-components/src/architecture/base/concreteCommands/PointCloudDividerCommand.ts
@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type BaseCommand } from '../commands/BaseCommand';
+import { DividerCommand } from '../commands/DividerCommand';
+
+export class PointCloudDividerCommand extends DividerCommand {
+  public override get isVisible(): boolean {
+    return this.renderTarget.getPointClouds().next().value !== undefined;
+  }
+
+  public override equals(other: BaseCommand): boolean {
+    return this === other;
+  }
+}
diff --git a/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts b/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts
index 00f1c4fe6ba..4a17a20d603 100644
--- a/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/SettingsCommand.ts
@@ -10,6 +10,7 @@ import { SetPointShapeCommand } from './SetPointShapeCommand';
 import { PointCloudFilterCommand } from './PointCloudFilterCommand';
 import { type TranslateKey } from '../utilities/TranslateKey';
 import { type IconName } from '../utilities/IconName';
+import { PointCloudDividerCommand } from './PointCloudDividerCommand';
 
 export class SettingsCommand extends BaseSettingsCommand {
   // ==================================================
@@ -20,6 +21,7 @@ export class SettingsCommand extends BaseSettingsCommand {
     super();
 
     this.add(new SetQualityCommand());
+    this.add(new PointCloudDividerCommand());
     this.add(new SetPointSizeCommand());
     this.add(new SetPointColorTypeCommand());
     this.add(new SetPointShapeCommand());
diff --git a/react-components/src/components/Architecture/DropdownButton.tsx b/react-components/src/components/Architecture/DropdownButton.tsx
index 8fa5cb49fd4..6413bd74cd5 100644
--- a/react-components/src/components/Architecture/DropdownButton.tsx
+++ b/react-components/src/components/Architecture/DropdownButton.tsx
@@ -3,33 +3,27 @@
  */
 
 import { Button, Tooltip as CogsTooltip, ChevronDownIcon, ChevronUpIcon } from '@cognite/cogs.js';
-import { Menu } from '@cognite/cogs-lab';
+import { Menu, Option, Select } from '@cognite/cogs-lab';
 import {
   useCallback,
   useEffect,
   useMemo,
   useState,
   type ReactElement,
-  type MouseEvent
+  type SetStateAction,
+  type Dispatch
 } from 'react';
 
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { type BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
-import {
-  getButtonType,
-  getDefaultCommand,
-  getFlexDirection,
-  getTooltipPlacement,
-  getIcon
-} from './utilities';
+import { getButtonType, getDefaultCommand, getTooltipPlacement, getIcon } from './utilities';
 import { LabelWithShortcut } from './LabelWithShortcut';
 import { type TranslateDelegate } from '../../architecture/base/utilities/TranslateKey';
 import { DEFAULT_PADDING, OPTION_MIN_WIDTH } from './constants';
-import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 
-import { offset } from '@floating-ui/dom';
+import styled from 'styled-components';
 
 export const DropdownButton = ({
   inputCommand,
@@ -41,7 +35,6 @@ export const DropdownButton = ({
   usedInSettings?: boolean;
 }): ReactElement => {
   const renderTarget = useRenderTarget();
-  const { t } = useTranslation();
   const command = useMemo<BaseOptionCommand>(
     () => getDefaultCommand<BaseOptionCommand>(inputCommand, renderTarget),
     []
@@ -66,52 +59,77 @@ export const DropdownButton = ({
     };
   }, [command]);
 
-  if (!isVisible || command.children === undefined) {
-    return <></>;
-  }
-  const placement = getTooltipPlacement(isHorizontal);
-  const label = usedInSettings ? undefined : command.getLabel(t);
-  const flexDirection = getFlexDirection(false); // Always vertical
-  const children = command.children;
+  return usedInSettings ? (
+    <MenuItemWithDropdown command={command} isVisible={isVisible} />
+  ) : (
+    <DropdownElement
+      command={command}
+      isVisible={isVisible}
+      isOpen={isOpen}
+      setOpen={setOpen}
+      isEnabled={isEnabled}
+      isHorizontal={isHorizontal}
+      uniqueId={uniqueId}
+    />
+  );
+};
+
+const DropdownElement = ({
+  command,
+  isVisible,
+  isOpen,
+  setOpen,
+  isEnabled,
+  isHorizontal,
+  uniqueId
+}: {
+  command: BaseOptionCommand;
+  isVisible: boolean;
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  isEnabled: boolean;
+  isHorizontal: boolean;
+  uniqueId: number;
+}): ReactElement => {
+  const { t } = useTranslation();
+  const label = command.getLabel(t);
   const selectedLabel = command.selectedChild?.getLabel(t);
 
+  const placement = getTooltipPlacement(isHorizontal);
+
   const OpenButtonIcon = isOpen ? ChevronUpIcon : ChevronDownIcon;
 
+  if (!isVisible || command.children === undefined) {
+    return <></>;
+  }
+
   return (
     <Menu
-      style={{
-        minWidth: '0px',
-        overflow: 'auto',
-        flexDirection
-      }}
-      floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
       onOpenChange={(open: boolean) => {
         setOpen(open);
       }}
       hideOnSelect={true}
       appendTo={'parent'}
-      placement={usedInSettings ? 'bottom-end' : 'auto-start'}
+      placement={'bottom-start'}
       renderTrigger={(props: any) => (
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
-          disabled={usedInSettings || label === undefined}
+          disabled={label === undefined}
           appendTo={document.body}
           placement={placement}>
           <Button
             style={{
-              padding: usedInSettings ? DEFAULT_PADDING : '8px 4px',
-              minWidth: usedInSettings ? OPTION_MIN_WIDTH : undefined
+              padding: '8px 4px'
             }}
-            type={usedInSettings ? 'tertiary' : getButtonType(command)}
+            type={getButtonType(command)}
             icon={<OpenButtonIcon />}
             key={uniqueId}
             disabled={!isEnabled}
             iconPlacement="left"
             aria-label={command.getLabel(t)}
-            label={selectedLabel}
             toggled={isOpen}
             {...props}
-            onClick={(event: MouseEvent<HTMLElement>) => {
+            onClick={(event) => {
               event.stopPropagation();
               event.preventDefault();
               props.onClick?.(event);
@@ -120,13 +138,45 @@ export const DropdownButton = ({
           </Button>
         </CogsTooltip>
       )}>
-      {children.map((child, _index): ReactElement => {
-        return createMenuItem(child, t);
-      })}
+      {command.children.map((child) => createMenuItem(child, t))}
     </Menu>
   );
 };
 
+const MenuItemWithDropdown = ({
+  command,
+  isVisible
+}: {
+  command: BaseOptionCommand;
+  isVisible: boolean;
+}): ReactElement => {
+  const { t } = useTranslation();
+  const label = command.getLabel(t);
+
+  if (!isVisible || command.children === undefined) {
+    return <></>;
+  }
+
+  return (
+    <StyledDropdownRow>
+      <label>{label}</label>
+      <Select
+        defaultValue={command.selectedChild}
+        fullWidth
+        aria-label={command.getLabel(t)}
+        onChange={(_event, value) => {
+          value?.invoke();
+        }}>
+        {command.children.map((child) => (
+          <Option value={child} key={child.uniqueId}>
+            {child.getLabel(t)}
+          </Option>
+        ))}
+      </Select>
+    </StyledDropdownRow>
+  );
+};
+
 function createMenuItem(command: BaseCommand, t: TranslateDelegate): ReactElement {
   return (
     <Menu.ItemToggled
@@ -142,3 +192,13 @@ function createMenuItem(command: BaseCommand, t: TranslateDelegate): ReactElemen
     />
   );
 }
+
+const StyledDropdownRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8;
+  minwidth: ${OPTION_MIN_WIDTH};
+  padding: ${DEFAULT_PADDING};
+`;
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
index 10a0f6ac1c8..3e1a7ec1313 100644
--- a/react-components/src/components/Architecture/FilterButton.tsx
+++ b/react-components/src/components/Architecture/FilterButton.tsx
@@ -8,30 +8,27 @@ import {
   useMemo,
   useState,
   type ReactElement,
-  type MouseEvent
+  type MouseEvent,
+  type Dispatch,
+  type SetStateAction
 } from 'react';
-import { Button, Tooltip as CogsTooltip, ChevronUpIcon, ChevronDownIcon } from '@cognite/cogs.js';
-import { Menu } from '@cognite/cogs-lab';
+import { Button, ChevronDownIcon, ChevronUpIcon, Tooltip as CogsTooltip } from '@cognite/cogs.js';
+import { Menu, SelectPanel } from '@cognite/cogs-lab';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
-import {
-  getButtonType,
-  getDefaultCommand,
-  getFlexDirection,
-  getTooltipPlacement,
-  getIcon
-} from './utilities';
+import { getButtonType, getDefaultCommand, getTooltipPlacement, getIcon } from './utilities';
 import { LabelWithShortcut } from './LabelWithShortcut';
-import styled from 'styled-components';
 import { BaseFilterCommand } from '../../architecture/base/commands/BaseFilterCommand';
 import { FilterItem } from './FilterItem';
-import { OPTION_MIN_WIDTH, DEFAULT_PADDING } from './constants';
+import { OPTION_MIN_WIDTH, DEFAULT_PADDING, SELECT_DROPDOWN_ICON_COLOR } from './constants';
 import { type IconName } from '../../architecture/base/utilities/IconName';
 import { IconComponent } from './IconComponentMapper';
 import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 
 import { offset } from '@floating-ui/dom';
+import styled from 'styled-components';
+import { type PlacementType } from './types';
 
 export const FilterButton = ({
   inputCommand,
@@ -43,7 +40,6 @@ export const FilterButton = ({
   usedInSettings?: boolean;
 }): ReactElement => {
   const renderTarget = useRenderTarget();
-  const { t } = useTranslation();
   const command = useMemo<BaseFilterCommand>(
     () => getDefaultCommand<BaseFilterCommand>(inputCommand, renderTarget),
     []
@@ -57,8 +53,12 @@ export const FilterButton = ({
   const [icon, setIcon] = useState<IconName | undefined>(undefined);
   const [isOpen, setOpen] = useState<boolean>(false);
   const [isAllChecked, setAllChecked] = useState<boolean>(false);
+  const [isSomeChecked, setSomeChecked] = useState<boolean>(false);
   const [selectedLabel, setSelectedLabel] = useState<string>('');
 
+  const { t } = useTranslation();
+  const label = command.getLabel(t);
+
   const update = useCallback(
     (command: BaseCommand) => {
       setEnabled(command.isEnabled);
@@ -67,6 +67,7 @@ export const FilterButton = ({
       setIcon(getIcon(command));
       if (command instanceof BaseFilterCommand) {
         setAllChecked(command.isAllChecked);
+        setSomeChecked(command.children?.some((child) => child.isChecked) === true);
         setSelectedLabel(command.getSelectedLabel(t));
       }
     },
@@ -81,92 +82,199 @@ export const FilterButton = ({
     };
   }, [command]);
 
-  if (!isVisible) {
+  const children = command.children;
+  if (!isVisible || children === undefined || children.length === 0) {
     return <></>;
   }
   const placement = getTooltipPlacement(isHorizontal);
-  const label = usedInSettings ? undefined : command.getLabel(t);
-  const flexDirection = getFlexDirection(isHorizontal);
 
-  const children = command.children;
-  if (children === undefined || !command.hasChildren) {
-    return <></>;
-  }
+  const PanelContent = (
+    <FilterSelectPanelContent
+      command={command}
+      isAllChecked={isAllChecked}
+      isSomeChecked={isSomeChecked}
+      label={label}
+    />
+  );
+
+  return usedInSettings ? (
+    <FilterDropdown
+      label={label}
+      selectedLabel={selectedLabel}
+      isOpen={isOpen}
+      PanelContent={PanelContent}
+    />
+  ) : (
+    <FilterMenu
+      command={command}
+      placement={placement}
+      iconName={icon}
+      label={label}
+      isOpen={isOpen}
+      setOpen={setOpen}
+      isEnabled={isEnabled}
+      uniqueId={uniqueId}
+      PanelContent={PanelContent}
+    />
+  );
+};
+
+const FilterMenu = ({
+  command,
+  isOpen,
+  setOpen,
+  label,
+  isEnabled,
+  placement,
+  iconName,
+  uniqueId,
+  PanelContent
+}: {
+  command: BaseFilterCommand;
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  label: string;
+  isEnabled: boolean;
+  placement: PlacementType;
+  iconName: string | undefined;
+  uniqueId: number;
+  PanelContent: ReactElement;
+}): ReactElement => {
+  const { t } = useTranslation();
+
   return (
     <Menu
-      style={{
-        minWidth: '100px',
-        overflow: 'auto',
-        flexDirection
-      }}
       floatingProps={{ middleware: [offset(TOOLBAR_HORIZONTAL_PANEL_OFFSET)] }}
-      visible={isOpen}
-      hideOnSelect={false}
-      onOpenChange={(open: boolean) => {
-        setOpen(open);
-      }}
+      onOpenChange={setOpen}
       appendTo={'parent'}
-      placement={usedInSettings ? 'auto-start' : 'bottom-end'}
+      placement={'right-start'}
       disableCloseOnClickInside
       renderTrigger={(props: any) => (
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
-          disabled={usedInSettings || label === undefined}
+          disabled={isOpen || label === undefined}
           appendTo={document.body}
           placement={placement}>
           <Button
-            type={usedInSettings ? 'tertiary' : getButtonType(command)}
-            icon={getButtonIcon(usedInSettings, isOpen)}
+            type={getButtonType(command)}
+            icon={<IconComponent iconName={iconName} />}
             key={uniqueId}
             disabled={!isEnabled}
             toggled={isOpen}
             iconPlacement="left"
             aria-label={command.getLabel(t)}
-            style={{
-              minWidth: usedInSettings ? OPTION_MIN_WIDTH : undefined,
-              padding: usedInSettings ? DEFAULT_PADDING : undefined
-            }}
             {...props}
             onClick={(event: MouseEvent<HTMLElement>) => {
               event.stopPropagation();
               event.preventDefault();
               props.onClick(event);
-            }}>
-            {usedInSettings ? selectedLabel : undefined}
-          </Button>
+            }}
+          />
         </CogsTooltip>
       )}>
-      <Menu.ItemAction
-        key={-1}
-        toggled={isAllChecked}
-        onClick={() => {
-          command.toggleAllChecked();
-        }}>
-        {BaseFilterCommand.getAllString(t)}
-      </Menu.ItemAction>
-      <StyledMenuItems>
-        {children.map((child, _index): ReactElement => {
-          return <FilterItem key={child.uniqueId} command={child} />;
-        })}
-      </StyledMenuItems>
+      {PanelContent}
     </Menu>
   );
+};
 
-  function getButtonIcon(usedInSettings: boolean, isOpen: boolean): ReactElement {
-    return usedInSettings ? (
-      isOpen ? (
-        <ChevronUpIcon />
-      ) : (
-        <ChevronDownIcon />
-      )
-    ) : (
-      <IconComponent iconName={icon} />
-    );
-  }
+const FilterDropdown = ({
+  label,
+  selectedLabel,
+  isOpen,
+  PanelContent
+}: {
+  label: string;
+  selectedLabel: string;
+  isOpen: boolean;
+  PanelContent: ReactElement;
+}): ReactElement => {
+  return (
+    <StyledDropdownRow>
+      <label>{label}</label>
+      <StyledSelectPanel appendTo="parent">
+        <SelectPanel.Trigger>
+          <Button
+            color="#000044"
+            type="tertiary"
+            style={{
+              justifyContent: 'space-between',
+              minWidth: OPTION_MIN_WIDTH,
+              paddingRight: '8px',
+              paddingLeft: '8px'
+            }}>
+            <StyledDropdownSelectionLabel>{selectedLabel}</StyledDropdownSelectionLabel>
+            {isOpen ? (
+              <ChevronUpIcon color={SELECT_DROPDOWN_ICON_COLOR} />
+            ) : (
+              <ChevronDownIcon color={SELECT_DROPDOWN_ICON_COLOR} />
+            )}
+          </Button>
+        </SelectPanel.Trigger>
+        <SelectPanel.Body>{PanelContent}</SelectPanel.Body>
+      </StyledSelectPanel>
+    </StyledDropdownRow>
+  );
+};
+
+const FilterSelectPanelContent = ({
+  command,
+  isAllChecked,
+  isSomeChecked,
+  label
+}: {
+  command: BaseFilterCommand;
+  label: string;
+  isAllChecked: boolean;
+  isSomeChecked: boolean;
+}): ReactElement => {
+  const { t } = useTranslation();
+
+  const children = command.children;
+
+  return (
+    <>
+      <SelectPanel.Header title={label} />
+      <SelectPanel.Body label={label}>
+        <SelectPanel.Section>
+          <SelectPanel.Item
+            key={-1}
+            variant="checkbox"
+            checked={isAllChecked}
+            indeterminate={!isAllChecked && isSomeChecked}
+            onClick={() => {
+              command.toggleAllChecked();
+            }}
+            label={BaseFilterCommand.getAllString(t)}>
+            {BaseFilterCommand.getAllString(t)}
+          </SelectPanel.Item>
+        </SelectPanel.Section>
+        <SelectPanel.Section>
+          {children?.map((child, _index): ReactElement => {
+            return <FilterItem key={child.uniqueId} command={child} />;
+          })}
+        </SelectPanel.Section>
+      </SelectPanel.Body>
+    </>
+  );
 };
 
-const StyledMenuItems = styled.div`
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
+const StyledDropdownRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: ${DEFAULT_PADDING};
+`;
+
+const StyledSelectPanel = styled(SelectPanel)`
+  display: flex;
+  display-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledDropdownSelectionLabel = styled.label`
+  font-weight: 400;
 `;
diff --git a/react-components/src/components/Architecture/FilterItem.tsx b/react-components/src/components/Architecture/FilterItem.tsx
index 4f633a16c3e..729aa3b6141 100644
--- a/react-components/src/components/Architecture/FilterItem.tsx
+++ b/react-components/src/components/Architecture/FilterItem.tsx
@@ -3,7 +3,7 @@
  */
 
 import { useCallback, useEffect, useState, type ReactElement } from 'react';
-import { Menu } from '@cognite/cogs-lab';
+import { SelectPanel } from '@cognite/cogs-lab';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import styled from 'styled-components';
@@ -37,10 +37,11 @@ export const FilterItem = ({ command }: { command: BaseFilterItemCommand }): Rea
     return <></>;
   }
   return (
-    <Menu.ItemToggled
+    <SelectPanel.Item
       key={uniqueId}
       disabled={!isEnabled}
-      toggled={isChecked}
+      checked={isChecked}
+      variant="checkbox"
       trailingContent={
         <CenteredContainer>
           {command.color !== undefined && <ColorBox backgroundColor={command.color} />}
@@ -49,15 +50,16 @@ export const FilterItem = ({ command }: { command: BaseFilterItemCommand }): Rea
       onClick={() => {
         command.invoke();
       }}
-      label={command.getLabel(t)}></Menu.ItemToggled>
+      label={command.getLabel(t)}
+    />
   );
 };
 
 const ColorBox = styled.div<{ backgroundColor: Color }>`
   width: 16px;
   height: 16px;
-  border: 1px solid black;
   display: inline-block;
+  border-radius: 4px;
   background-color: ${(props) => props.backgroundColor.getStyle()};
 `;
 
diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
index b3cced8a5df..45d9d143d52 100644
--- a/react-components/src/components/Architecture/SettingsButton.tsx
+++ b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -2,15 +2,8 @@
  * Copyright 2024 Cognite AS
  */
 
-import {
-  type MouseEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactElement
-} from 'react';
-import { Button, Tooltip as CogsTooltip, Slider } from '@cognite/cogs.js';
+import { useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
+import { Button, Tooltip as CogsTooltip, Slider, Switch } from '@cognite/cogs.js';
 import { Menu } from '@cognite/cogs-lab';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
@@ -38,6 +31,7 @@ import { IconComponent } from './IconComponentMapper';
 import { TOOLBAR_HORIZONTAL_PANEL_OFFSET } from '../constants';
 
 import { offset } from '@floating-ui/dom';
+import { DividerCommand } from '../../architecture/base/commands/DividerCommand';
 
 export const SettingsButton = ({
   inputCommand,
@@ -99,7 +93,7 @@ export const SettingsButton = ({
       renderTrigger={(props: any) => (
         <CogsTooltip
           content={<LabelWithShortcut label={label} command={command} />}
-          disabled={label === undefined}
+          disabled={isOpen || label === undefined}
           appendTo={document.body}
           placement={placement}>
           <Button
@@ -111,15 +105,10 @@ export const SettingsButton = ({
             aria-label={label}
             iconPlacement="left"
             {...props}
-            onClick={(event: MouseEvent<HTMLElement>) => {
-              props.onClick?.(event);
-              event.stopPropagation();
-              event.preventDefault();
-            }}
           />
         </CogsTooltip>
       )}>
-      {children.map((child, _index): ReactElement | undefined => {
+      {children.map((child): ReactElement | undefined => {
         return createMenuItem(child, t);
       })}
     </Menu>
@@ -131,34 +120,43 @@ function createMenuItem(command: BaseCommand, t: TranslateDelegate): ReactElemen
     return createSlider(command, t);
   }
   if (command instanceof BaseOptionCommand) {
-    return createDropdownButton(command, t);
+    return createDropdownButton(command);
   }
   if (command instanceof BaseFilterCommand) {
-    return createFilterButton(command, t);
+    return createFilterButton(command);
   }
   if (command.isToggle) {
     return createToggle(command, t);
   }
+  if (command instanceof DividerCommand) {
+    return createDivider(command);
+  }
   return createButton(command, t);
 }
 
+function createDivider(command: BaseCommand): ReactElement | undefined {
+  if (!command.isVisible) {
+    return <></>;
+  }
+  return <Menu.Divider key={command.uniqueId} />;
+}
+
 function createToggle(command: BaseCommand, t: TranslateDelegate): ReactElement {
   const [isChecked, setChecked] = useState(command.isChecked);
   if (!command.isVisible) {
     return <></>;
   }
+
+  const label = command.getLabel(t);
   return (
-    <Menu.ItemToggled
+    <Menu.ItemAction
       key={command.uniqueId}
-      hasSwitch={true}
-      disabled={!command.isEnabled}
-      toggled={isChecked}
-      style={{ padding: DEFAULT_PADDING }}
-      label={command.getLabel(t)}
+      label={label}
       onClick={() => {
         command.invoke();
         setChecked(command.isChecked);
       }}
+      trailingContent={<Switch checked={isChecked} disabled={!command.isEnabled} />}
     />
   );
 }
@@ -177,12 +175,13 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
       icon={<IconComponent iconName={getIcon(command)} />}
       iconPlacement="left"
       style={{ padding: DEFAULT_PADDING }}
+      shortcutKeys={command.getShortCutKeys()}
+      label={label}
       onClick={() => {
         command.invoke();
         setChecked(command.isChecked);
-      }}>
-      <LabelWithShortcut label={label} command={command} inverted={false} />
-    </Menu.ItemAction>
+      }}
+    />
   );
 }
 
@@ -193,7 +192,7 @@ function createSlider(command: BaseSliderCommand, t: TranslateDelegate): ReactEl
     return <></>;
   }
   return (
-    <SliderDiv>
+    <SliderDiv key={command.uniqueId}>
       <label>{command.getLabel(t)}</label>
       <StyledSlider
         disabled={!command.isEnabled}
@@ -204,59 +203,54 @@ function createSlider(command: BaseSliderCommand, t: TranslateDelegate): ReactEl
           command.value = value;
           setValue(value);
         }}
-        value={value}></StyledSlider>
+        value={value}
+      />
     </SliderDiv>
   );
 }
 
-function createDropdownButton(command: BaseOptionCommand, t: TranslateDelegate): ReactElement {
+function createDropdownButton(command: BaseOptionCommand): ReactElement {
   if (!command.isVisible) {
     return <></>;
   }
   return (
-    <OptionDiv>
-      <label>{command.getLabel(t)}</label>
-      <DropdownButton inputCommand={command} isHorizontal={false} usedInSettings={true} />
-    </OptionDiv>
+    <DropdownButton
+      key={command.uniqueId}
+      inputCommand={command}
+      isHorizontal={false}
+      usedInSettings={true}
+    />
   );
 }
 
-function createFilterButton(command: BaseFilterCommand, t: TranslateDelegate): ReactElement {
+function createFilterButton(command: BaseFilterCommand): ReactElement {
   command.initializeChildrenIfNeeded();
   if (!command.isVisible) {
     return <></>;
   }
   return (
-    <OptionDiv>
-      <label>{command.getLabel(t)}</label>
-      <FilterButton inputCommand={command} isHorizontal={false} usedInSettings={true} />
-    </OptionDiv>
+    <FilterButton
+      key={command.uniqueId}
+      inputCommand={command}
+      isHorizontal={false}
+      usedInSettings={true}
+    />
   );
 }
 
-const OptionDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 4px 4px;
-  font-size: 14px;
-`;
-
 const SliderDiv = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: start;
   justify-content: space-between;
   gap: 8px;
-  padding: 4px 4px;
+  padding: 4px 8px;
   font-size: 14px;
 `;
 
 const StyledSlider = styled(Slider)`
   offset-anchor: right top;
-  float: right;
-  display: inline;
-  width: 120px;
+  float: center;
+  display: flex;
+  justify-content: space-around;
 `;
diff --git a/react-components/src/components/Architecture/constants.tsx b/react-components/src/components/Architecture/constants.tsx
index 520da5d9a38..c454a8946ab 100644
--- a/react-components/src/components/Architecture/constants.tsx
+++ b/react-components/src/components/Architecture/constants.tsx
@@ -3,4 +3,5 @@
  */
 
 export const OPTION_MIN_WIDTH = '125px';
-export const DEFAULT_PADDING = '4px 4px';
+export const DEFAULT_PADDING = '4px 8px';
+export const SELECT_DROPDOWN_ICON_COLOR = 'rgba(0, 0, 0, 0.7)';
diff --git a/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx b/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx
index aba4bcbeaab..bcb58012208 100644
--- a/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton/LayersButton.tsx
@@ -107,7 +107,11 @@ const ModelLayerSelection = ({
         />
       </SelectPanel.Trigger>
       <SelectPanel.Body>
-        <ModelLayersList modelLayerHandlers={modelLayerHandlers} update={updateCallback} />
+        <ModelLayersList
+          modelLayerHandlers={modelLayerHandlers}
+          update={updateCallback}
+          disabled={isDisabled}
+        />
       </SelectPanel.Body>
     </SelectPanel>
   );
diff --git a/react-components/src/components/RevealToolbar/LayersButton/ModelLayersList.tsx b/react-components/src/components/RevealToolbar/LayersButton/ModelLayersList.tsx
index ef71caefc85..b2037d24fa4 100644
--- a/react-components/src/components/RevealToolbar/LayersButton/ModelLayersList.tsx
+++ b/react-components/src/components/RevealToolbar/LayersButton/ModelLayersList.tsx
@@ -9,12 +9,18 @@ import { type ReactElement } from 'react';
 export const ModelLayersList = ({
   modelLayerHandlers,
   update,
-  label
+  label,
+  disabled
 }: {
   modelLayerHandlers: ModelHandler[];
   update: () => void;
   label?: string;
+  disabled?: boolean;
 }): ReactElement => {
+  if (disabled === true) {
+    return <></>;
+  }
+
   return (
     <>
       {label !== undefined && (
diff --git a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
index 1104164d198..d9d0a4dc024 100644
--- a/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
+++ b/react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx
@@ -152,7 +152,7 @@ export const RuleBasedOutputsButton = ({
           />
         </CogsTooltip>
       )}>
-      <Menu.Section>{t('RULESET_SELECT_HEADER', 'Select color overlay')}</Menu.Section>
+      <Menu.Section label={t('RULESET_SELECT_HEADER', 'Select color overlay')} />
       <RuleBasedSelectionItem
         key="no-rule-selected"
         id="no-rule-selected"
diff --git a/react-components/src/components/RevealToolbar/SettingsButton.tsx b/react-components/src/components/RevealToolbar/SettingsButton.tsx
index bb83849feb9..7ff8f632ca1 100644
--- a/react-components/src/components/RevealToolbar/SettingsButton.tsx
+++ b/react-components/src/components/RevealToolbar/SettingsButton.tsx
@@ -38,7 +38,6 @@ export const SettingsButton = ({
           disabled={settingsActive}
           appendTo={document.body}>
           <Button
-            {...props}
             icon=<SettingsIcon />
             type="ghost"
             aria-label="Show settings"
@@ -46,6 +45,7 @@ export const SettingsButton = ({
             onClick={() => {
               setSettingsActive((prevState) => !prevState);
             }}
+            {...props}
           />
         </CogsTooltip>
       )}>
diff --git a/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx b/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
index 55f0817fa69..28f5889a857 100644
--- a/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
+++ b/react-components/src/components/RuleBasedOutputs/components/RuleBasedSelectionItem.tsx
@@ -35,9 +35,9 @@ export const RuleBasedSelectionItem = ({
       trailingContent={
         <StyledFlex justifyContent="space-between" alignItems="center" gap={8}>
           {!isEmptyRuleItem && isLoading && checked === true && <LoaderIcon />}
-          <Flex gap={4} alignItems="center">
+          <RightFlex gap={4} alignItems="center">
             <ColorPaletteIcon />
-          </Flex>
+          </RightFlex>
         </StyledFlex>
       }></Menu.ItemToggled>
   );
@@ -46,3 +46,7 @@ export const RuleBasedSelectionItem = ({
 const StyledFlex = styled(Flex)`
   min-height: 24px;
 `;
+
+const RightFlex = styled(Flex)`
+  padding-right: 4px;
+`;
diff --git a/react-components/src/components/constants.ts b/react-components/src/components/constants.ts
index 634a9179eaa..3e408be0e6d 100644
--- a/react-components/src/components/constants.ts
+++ b/react-components/src/components/constants.ts
@@ -1,4 +1,4 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 12;
+export const TOOLBAR_HORIZONTAL_PANEL_OFFSET = 6;
diff --git a/react-components/src/higher-order-components/withSuppressRevealEvents.tsx b/react-components/src/higher-order-components/withSuppressRevealEvents.tsx
index 71caf601c02..b9f1eeedd33 100644
--- a/react-components/src/higher-order-components/withSuppressRevealEvents.tsx
+++ b/react-components/src/higher-order-components/withSuppressRevealEvents.tsx
@@ -12,6 +12,7 @@ export function withSuppressRevealEvents<T extends object>(
 
     const stopPropagation = (event: Event): void => {
       event.stopPropagation();
+      event.preventDefault();
     };
 
     useEffect(() => {
diff --git a/react-components/tests/visual-tests/__screenshots__/Toolbar.stories.spec.ts/cad-model-container-storybook-1.png b/react-components/tests/visual-tests/__screenshots__/Toolbar.stories.spec.ts/cad-model-container-storybook-1.png
index a0cb8a3a86e..99313a2806c 100644
Binary files a/react-components/tests/visual-tests/__screenshots__/Toolbar.stories.spec.ts/cad-model-container-storybook-1.png and b/react-components/tests/visual-tests/__screenshots__/Toolbar.stories.spec.ts/cad-model-container-storybook-1.png differ