diff --git a/react-components/package.json b/react-components/package.json
index 3b15d39c271..29b0b98a2fe 100644
--- a/react-components/package.json
+++ b/react-components/package.json
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.14.7",
+    "@cognite/reveal": "4.15.0",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.14.7",
+    "@cognite/reveal": "^4.15.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",
diff --git a/react-components/src/architecture/base/commands/BaseCommand.ts b/react-components/src/architecture/base/commands/BaseCommand.ts
index f78a685e8f6..274c0d8d200 100644
--- a/react-components/src/architecture/base/commands/BaseCommand.ts
+++ b/react-components/src/architecture/base/commands/BaseCommand.ts
@@ -2,7 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type TranslateKey } from '../utilities/TranslateKey';
+import { type TranslateDelegate, type TranslateKey } from '../utilities/TranslateKey';
 import { clear, remove } from '../utilities/extensions/arrayExtensions';
 
 type UpdateDelegate = (command: BaseCommand) => void;
@@ -44,7 +44,7 @@ export abstract class BaseCommand {
   // =================================================
 
   public get name(): string {
-    return this.tooltip.fallback ?? this.tooltip.key;
+    return this.tooltip.fallback;
   }
 
   public get shortCutKey(): string | undefined {
@@ -55,8 +55,8 @@ export abstract class BaseCommand {
     return { fallback: '' };
   }
 
-  public get icon(): string {
-    return 'Unknown';
+  public get icon(): string | undefined {
+    return undefined; // Means no icon
   }
 
   public get buttonType(): string {
@@ -128,4 +128,12 @@ export abstract class BaseCommand {
       listener(this);
     }
   }
+
+  public getLabel(translate: TranslateDelegate): string {
+    const { key, fallback } = this.tooltip;
+    if (key === undefined) {
+      return fallback;
+    }
+    return translate(key, fallback);
+  }
 }
diff --git a/react-components/src/architecture/base/commands/BaseOptionCommand.ts b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
new file mode 100644
index 00000000000..7aaed2c49c7
--- /dev/null
+++ b/react-components/src/architecture/base/commands/BaseOptionCommand.ts
@@ -0,0 +1,48 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type RevealRenderTarget } from '../renderTarget/RevealRenderTarget';
+import { BaseCommand } from './BaseCommand';
+import { RenderTargetCommand } from './RenderTargetCommand';
+
+/**
+ * Base class for all command and tools. These are object that can do a
+ * user interaction with the system. It also have enough information to
+ * generate the UI for the command.
+ */
+
+export abstract class BaseOptionCommand extends BaseCommand {
+  private _options: BaseCommand[] | undefined = undefined;
+
+  // ==================================================
+  // VIRTUAL METHODS
+  // ==================================================
+
+  public createOptions(): BaseCommand[] {
+    return []; // Override this to add options
+  }
+
+  // ==================================================
+  // INSTANCE METHODS
+  // ==================================================
+
+  public getOrCreateOptions(renderTarget: RevealRenderTarget): BaseCommand[] {
+    if (this._options === undefined) {
+      this._options = this.createOptions();
+      for (const option of this._options) {
+        if (option instanceof RenderTargetCommand) {
+          option.attach(renderTarget);
+        }
+      }
+    }
+    return this._options;
+  }
+
+  public get selectedOption(): BaseCommand | undefined {
+    if (this._options === undefined) {
+      return undefined;
+    }
+    return this._options.find((option) => option.isChecked);
+  }
+}
diff --git a/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
new file mode 100644
index 00000000000..88915de486d
--- /dev/null
+++ b/react-components/src/architecture/base/concreteCommands/KeyboardSpeedCommand.ts
@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+
+import { type BaseCommand } from '../commands/BaseCommand';
+import { BaseOptionCommand } from '../commands/BaseOptionCommand';
+import { RenderTargetCommand } from '../commands/RenderTargetCommand';
+import { type TranslateKey } from '../utilities/TranslateKey';
+
+const KEYBOARD_SPEED_VALUES = [0.5, 1, 2, 5, 10, 20];
+
+export class KeyboardSpeedCommand extends BaseOptionCommand {
+  // ==================================================
+  // OVERRIDES
+  // ==================================================
+
+  public override get tooltip(): TranslateKey {
+    return { key: 'FLY_SPEED', fallback: 'Set fly speed on the camera' };
+  }
+
+  public override createOptions(): BaseCommand[] {
+    const options: BaseCommand[] = [];
+    for (const value of KEYBOARD_SPEED_VALUES) {
+      options.push(new OptionCommand(value));
+    }
+    return options;
+  }
+}
+
+// Note: This is not exported, as it is only used internally
+class OptionCommand extends RenderTargetCommand {
+  private readonly _value;
+
+  public constructor(value: number) {
+    super();
+    this._value = value;
+  }
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: `${this._value.toString()}x` };
+  }
+
+  public override get isChecked(): boolean {
+    return this._value === this.renderTarget.flexibleCameraManager.options.keyboardSpeed;
+  }
+
+  public override invokeCore(): boolean {
+    this.renderTarget.flexibleCameraManager.options.keyboardSpeed = this._value;
+    return true;
+  }
+}
diff --git a/react-components/src/architecture/base/domainObjects/DomainObject.ts b/react-components/src/architecture/base/domainObjects/DomainObject.ts
index 4b93b116463..520e83db5cf 100644
--- a/react-components/src/architecture/base/domainObjects/DomainObject.ts
+++ b/react-components/src/architecture/base/domainObjects/DomainObject.ts
@@ -323,8 +323,8 @@ export abstract class DomainObject {
   // VIRTUAL METHODS: Others
   // ==================================================
 
-  public get icon(): string {
-    return 'Unknown';
+  public get icon(): string | undefined {
+    return undefined;
   }
 
   /**
diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
index adee0bac141..ae62b078558 100644
--- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts
+++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -19,6 +19,7 @@ import { type BaseTool } from '../../base/commands/BaseTool';
 import { ToggleMetricUnitsCommand } from '../../base/concreteCommands/ToggleMetricUnitsCommand';
 import { MeasurementTool } from '../measurements/MeasurementTool';
 import { ClipTool } from '../clipping/ClipTool';
+import { KeyboardSpeedCommand } from '../../base/concreteCommands/KeyboardSpeedCommand';
 
 export class StoryBookConfig extends BaseRevealConfig {
   // ==================================================
@@ -37,6 +38,7 @@ export class StoryBookConfig extends BaseRevealConfig {
       new FitViewCommand(),
       new SetAxisVisibleCommand(),
       new ToggleMetricUnitsCommand(),
+      new KeyboardSpeedCommand(),
       undefined,
       new ExampleTool(),
       new MeasurementTool(),
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index 4d25779a93b..089da5315fc 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -2,134 +2,65 @@
  * Copyright 2023 Cognite AS
  */
 
-import { type ReactElement, useState, useEffect, useMemo } from 'react';
+import { type ReactElement, useState, useEffect, useMemo, useCallback } from 'react';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
-import { Button, Tooltip as CogsTooltip, Divider, type IconType } from '@cognite/cogs.js';
+import { Button, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
 import { useTranslation } from '../i18n/I18n';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
-import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
-import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
-
-export const CommandButtons = ({
-  commands,
-  isHorizontal = false
-}: {
-  commands: Array<BaseCommand | undefined>;
-  isHorizontal: boolean;
-}): ReactElement => {
-  return (
-    <>
-      {commands.map(
-        (command, index): ReactElement => (
-          <CommandButtonWrapper
-            command={command}
-            isHorizontal={isHorizontal}
-            key={getKey(command, index)}
-          />
-        )
-      )}
-    </>
-  );
-};
-
-export const CreateCommandButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
-  return <CommandButton command={command} isHorizontal={isHorizontal} />;
-};
+import { getButtonType, getDefaultCommand, getIcon, getTooltipPlacement } from './utilities';
 
 export const CommandButton = ({
-  command,
+  inputCommand,
   isHorizontal = false
 }: {
-  command: BaseCommand;
+  inputCommand: BaseCommand;
   isHorizontal: boolean;
 }): ReactElement => {
   const renderTarget = useRenderTarget();
   const { t } = useTranslation();
-  const newCommand = useMemo<BaseCommand>(() => getDefaultCommand(command, renderTarget), []);
+  const command = useMemo<BaseCommand>(() => getDefaultCommand(inputCommand, renderTarget), []);
 
   const [isChecked, setChecked] = useState<boolean>(false);
   const [isEnabled, setEnabled] = useState<boolean>(true);
   const [isVisible, setVisible] = useState<boolean>(true);
   const [uniqueId, setUniqueId] = useState<number>(0);
-  const [icon, setIcon] = useState<IconType>('Copy');
+  const [icon, setIcon] = useState<IconType | undefined>(undefined);
+
+  const update = useCallback((command: BaseCommand) => {
+    setChecked(command.isChecked);
+    setEnabled(command.isEnabled);
+    setVisible(command.isVisible);
+    setUniqueId(command.uniqueId);
+    setIcon(getIcon(command));
+  }, []);
 
   useEffect(() => {
-    function update(command: BaseCommand): void {
-      setChecked(command.isChecked);
-      setEnabled(command.isEnabled);
-      setVisible(command.isVisible);
-      setUniqueId(command.uniqueId);
-      setIcon(command.icon as IconType);
-    }
-    update(newCommand);
-    newCommand.addEventListener(update);
+    update(command);
+    command.addEventListener(update);
     return () => {
-      newCommand.removeEventListener(update);
+      command.removeEventListener(update);
     };
-  }, [newCommand.isEnabled, newCommand.isChecked, newCommand.isVisible]);
+  }, [command.isEnabled, command.isChecked, command.isVisible]);
 
   if (!isVisible) {
     return <></>;
   }
-  const placement = isHorizontal ? 'top' : 'right';
-  const { key, fallback } = newCommand.tooltip;
-  // This was the only way it went through compiler: (more button types will be added in the future)
-  const type = newCommand.buttonType;
-  if (type !== 'ghost' && type !== 'ghost-destructive' && type !== 'primary') {
-    return <></>;
-  }
-  const text = key === undefined ? fallback : t(key, fallback);
+  const placement = getTooltipPlacement(isHorizontal);
+  const tooltip = command.getLabel(t);
   return (
-    <CogsTooltip content={text} placement={placement} appendTo={document.body}>
+    <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
       <Button
-        type={type}
+        type={getButtonType(command)}
         icon={icon}
         key={uniqueId}
-        toggled={isChecked}
         disabled={!isEnabled}
-        aria-label={text}
+        toggled={isChecked}
+        aria-label={tooltip}
+        iconPlacement="right"
         onClick={() => {
-          newCommand.invoke();
+          command.invoke();
         }}
       />
     </CogsTooltip>
   );
 };
-
-function getDefaultCommand(newCommand: BaseCommand, renderTarget: RevealRenderTarget): BaseCommand {
-  // If it exists from before, return the existing command
-  // Otherwise, add the new command to the controller and attach the renderTarget.
-  if (!newCommand.hasData) {
-    const oldCommand = renderTarget.commandsController.getEqual(newCommand);
-    if (oldCommand !== undefined) {
-      return oldCommand;
-    }
-    renderTarget.commandsController.add(newCommand);
-  }
-  if (newCommand instanceof RenderTargetCommand) {
-    newCommand.attach(renderTarget);
-  }
-  return newCommand;
-}
-
-function getKey(command: BaseCommand | undefined, index: number): number {
-  if (command === undefined) {
-    return -index;
-  }
-
-  return command.uniqueId;
-}
-
-function CommandButtonWrapper({
-  command,
-  isHorizontal
-}: {
-  command: BaseCommand | undefined;
-  isHorizontal: boolean;
-}): ReactElement {
-  if (command === undefined) {
-    const direction = !isHorizontal ? 'horizontal' : 'vertical';
-    return <Divider weight="2px" length="24px" direction={direction} />;
-  }
-  return <CommandButton command={command} isHorizontal={isHorizontal} />;
-}
diff --git a/react-components/src/components/Architecture/CommandButtons.tsx b/react-components/src/components/Architecture/CommandButtons.tsx
new file mode 100644
index 00000000000..8c887272dc3
--- /dev/null
+++ b/react-components/src/components/Architecture/CommandButtons.tsx
@@ -0,0 +1,61 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement } from 'react';
+import { Divider } from '@cognite/cogs.js';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { OptionButton } from './OptionButton';
+import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
+import { CommandButton } from './CommandButton';
+
+export const CreateButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
+  if (command instanceof BaseOptionCommand) {
+    return <OptionButton inputCommand={command} isHorizontal={isHorizontal} />;
+  } else {
+    return <CommandButton inputCommand={command} isHorizontal={isHorizontal} />;
+  }
+};
+
+export const CommandButtons = ({
+  commands,
+  isHorizontal = false
+}: {
+  commands: Array<BaseCommand | undefined>;
+  isHorizontal: boolean;
+}): ReactElement => {
+  return (
+    <>
+      {commands.map(
+        (command, index): ReactElement => (
+          <CommandButtonWrapper
+            command={command}
+            isHorizontal={isHorizontal}
+            key={getKey(command, index)}
+          />
+        )
+      )}
+    </>
+  );
+};
+
+function getKey(command: BaseCommand | undefined, index: number): number {
+  if (command === undefined) {
+    return -index;
+  }
+  return command.uniqueId;
+}
+
+function CommandButtonWrapper({
+  command,
+  isHorizontal
+}: {
+  command: BaseCommand | undefined;
+  isHorizontal: boolean;
+}): ReactElement {
+  if (command === undefined) {
+    const direction = !isHorizontal ? 'horizontal' : 'vertical';
+    return <Divider weight="2px" length="24px" direction={direction} />;
+  }
+  return CreateButton(command);
+}
diff --git a/react-components/src/components/Architecture/DomainObjectPanel.tsx b/react-components/src/components/Architecture/DomainObjectPanel.tsx
index 10ff2097302..6b8a5176f96 100644
--- a/react-components/src/components/Architecture/DomainObjectPanel.tsx
+++ b/react-components/src/components/Architecture/DomainObjectPanel.tsx
@@ -18,6 +18,7 @@ import { CommandButtons } from './Toolbar';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
 import { type TranslateDelegate } from '../../architecture/base/utilities/TranslateKey';
 import { type UnitSystem } from '../../architecture/base/renderTarget/UnitSystem';
+import { type DomainObject } from '../../architecture/base/domainObjects/DomainObject';
 
 const TEXT_SIZE = 'x-small';
 const HEADER_SIZE = 'small';
@@ -59,10 +60,8 @@ export const DomainObjectPanel = (): ReactElement => {
     return <></>;
   }
   const unitSystem = root.unitSystem;
-
-  const icon = domainObject.icon as IconType;
+  const icon = getIcon(domainObject);
   const header = info.header;
-
   const text = header?.getText(t);
   return (
     <Container
@@ -77,9 +76,11 @@ export const DomainObjectPanel = (): ReactElement => {
       <table>
         <tbody>
           <tr>
-            <PaddedTh>
-              <Icon type={icon} />
-            </PaddedTh>
+            {icon !== undefined && (
+              <PaddedTh>
+                <Icon type={icon} />
+              </PaddedTh>
+            )}
             {text !== undefined && (
               <PaddedTh>
                 <Body size={HEADER_SIZE}>{text}</Body>
@@ -139,6 +140,13 @@ function toString(info: PanelInfo, translate: TranslateDelegate, unitSystem: Uni
   return result;
 }
 
+export function getIcon(domainObject: DomainObject): IconType | undefined {
+  if (domainObject.icon === undefined) {
+    return undefined;
+  }
+  return domainObject.icon as IconType;
+}
+
 const NumberTh = styled.th`
   text-align: right;
   padding-right: 8px;
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
new file mode 100644
index 00000000000..ca880eb71af
--- /dev/null
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -0,0 +1,115 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
+import { Button, Dropdown, Menu, Tooltip as CogsTooltip, type IconType } from '@cognite/cogs.js';
+import { useTranslation } from '../i18n/I18n';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { useRenderTarget } from '../RevealCanvas/ViewerContext';
+import { BaseOptionCommand } from '../../architecture/base/commands/BaseOptionCommand';
+import {
+  getButtonType,
+  getDefaultCommand,
+  getFlexDirection,
+  getIcon,
+  getTooltipPlacement
+} from './utilities';
+
+export const OptionButton = ({
+  inputCommand,
+  isHorizontal = false
+}: {
+  inputCommand: BaseOptionCommand;
+  isHorizontal: boolean;
+}): ReactElement => {
+  const renderTarget = useRenderTarget();
+  const { t } = useTranslation();
+  const command = useMemo<BaseCommand>(() => getDefaultCommand(inputCommand, renderTarget), []);
+
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [isEnabled, setEnabled] = useState<boolean>(true);
+  const [isVisible, setVisible] = useState<boolean>(true);
+  const [uniqueId, setUniqueId] = useState<number>(0);
+  const [icon, setIcon] = useState<IconType | undefined>(undefined);
+
+  const update = useCallback((command: BaseCommand) => {
+    setEnabled(command.isEnabled);
+    setVisible(command.isVisible);
+    setUniqueId(command.uniqueId);
+    setIcon(getIcon(command));
+  }, []);
+
+  useEffect(() => {
+    update(command);
+    command.addEventListener(update);
+    return () => {
+      command.removeEventListener(update);
+    };
+  }, [command]);
+
+  if (!(command instanceof BaseOptionCommand)) {
+    return <></>;
+  }
+  if (!isVisible) {
+    return <></>;
+  }
+  const placement = getTooltipPlacement(isHorizontal);
+  const flexDirection = getFlexDirection(isHorizontal);
+  const tooltip = command.getLabel(t);
+  const options = command.getOrCreateOptions(renderTarget);
+  const selectedLabel = command.selectedOption?.getLabel(t);
+
+  return (
+    <CogsTooltip content={tooltip} placement={placement} appendTo={document.body}>
+      <Dropdown
+        hideOnSelect={true}
+        appendTo={document.body}
+        onClickOutside={() => {
+          setOpen(false);
+        }}
+        content={
+          <Menu
+            style={{
+              minWidth: '0px',
+              overflow: 'auto',
+              flexDirection
+            }}>
+            {options.map((command, _index): ReactElement => {
+              return (
+                <Menu.Item
+                  icon={icon}
+                  key={command.uniqueId}
+                  toggled={command.isChecked}
+                  disabled={!isEnabled}
+                  aria-label={tooltip}
+                  iconPlacement="right"
+                  onClick={() => {
+                    command.invoke();
+                    setOpen(false);
+                  }}>
+                  {command.getLabel(t)}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        }
+        placement="auto-start">
+        <Button
+          style={{ padding: '8px 4px' }}
+          type={getButtonType(command)}
+          icon={isOpen ? 'ChevronUp' : 'ChevronDown'}
+          key={uniqueId}
+          disabled={!isEnabled}
+          toggled={isOpen}
+          aria-label={tooltip}
+          iconPlacement="right"
+          onClick={() => {
+            setOpen((prevState) => !prevState);
+          }}>
+          {selectedLabel}
+        </Button>
+      </Dropdown>
+    </CogsTooltip>
+  );
+};
diff --git a/react-components/src/components/Architecture/RevealButtons.tsx b/react-components/src/components/Architecture/RevealButtons.tsx
index 41cab519f34..290b4561333 100644
--- a/react-components/src/components/Architecture/RevealButtons.tsx
+++ b/react-components/src/components/Architecture/RevealButtons.tsx
@@ -4,24 +4,26 @@
 
 import { type ReactElement } from 'react';
 import { NavigationTool } from '../../architecture/base/concreteCommands/NavigationTool';
-import { CreateCommandButton } from './CommandButton';
 import { FitViewCommand } from '../../architecture/base/concreteCommands/FitViewCommand';
 import { FlexibleControlsType } from '@cognite/reveal';
 import { SetFlexibleControlsTypeCommand } from '../../architecture/base/concreteCommands/SetFlexibleControlsTypeCommand';
 import { SetAxisVisibleCommand } from '../../architecture/concrete/axis/SetAxisVisibleCommand';
 import { ClipTool } from '../../architecture/concrete/clipping/ClipTool';
 import { MeasurementTool } from '../../architecture/concrete/measurements/MeasurementTool';
+import { KeyboardSpeedCommand } from '../../architecture/base/concreteCommands/KeyboardSpeedCommand';
+import { CreateButton } from './CommandButtons';
 
 export class RevealButtons {
-  static FitView = (): ReactElement => CreateCommandButton(new FitViewCommand());
-  static NavigationTool = (): ReactElement => CreateCommandButton(new NavigationTool());
-  static SetAxisVisible = (): ReactElement => CreateCommandButton(new SetAxisVisibleCommand());
-  static Measurement = (): ReactElement => CreateCommandButton(new MeasurementTool());
-  static Clip = (): ReactElement => CreateCommandButton(new ClipTool());
+  static FitView = (): ReactElement => CreateButton(new FitViewCommand());
+  static NavigationTool = (): ReactElement => CreateButton(new NavigationTool());
+  static SetAxisVisible = (): ReactElement => CreateButton(new SetAxisVisibleCommand());
+  static Measurement = (): ReactElement => CreateButton(new MeasurementTool());
+  static Clip = (): ReactElement => CreateButton(new ClipTool());
+  static KeyboardSpeed = (): ReactElement => CreateButton(new KeyboardSpeedCommand());
 
   static SetFlexibleControlsTypeOrbit = (): ReactElement =>
-    CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
+    CreateButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.Orbit));
 
   static SetFlexibleControlsTypeFirstPerson = (): ReactElement =>
-    CreateCommandButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson));
+    CreateButton(new SetFlexibleControlsTypeCommand(FlexibleControlsType.FirstPerson));
 }
diff --git a/react-components/src/components/Architecture/Toolbar.tsx b/react-components/src/components/Architecture/Toolbar.tsx
index 5cac22ce676..e2e90fa6d8b 100644
--- a/react-components/src/components/Architecture/Toolbar.tsx
+++ b/react-components/src/components/Architecture/Toolbar.tsx
@@ -5,7 +5,7 @@ import { ToolBar } from '@cognite/cogs.js';
 import styled from 'styled-components';
 import { useMemo, useState, type ReactElement } from 'react';
 import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents';
-import { CommandButtons } from './CommandButton';
+import { CommandButtons } from './CommandButtons';
 import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 import { useRenderTarget } from '../RevealCanvas/ViewerContext';
 import { ActiveToolUpdater } from '../../architecture/base/reactUpdaters/ActiveToolUpdater';
diff --git a/react-components/src/components/Architecture/types.ts b/react-components/src/components/Architecture/types.ts
new file mode 100644
index 00000000000..378c56cea70
--- /dev/null
+++ b/react-components/src/components/Architecture/types.ts
@@ -0,0 +1,9 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+export type ButtonType = 'ghost' | 'ghost-destructive' | 'primary';
+
+export type PlacementType = 'top' | 'right';
+
+export type FlexDirection = 'row' | 'column';
diff --git a/react-components/src/components/Architecture/utilities.ts b/react-components/src/components/Architecture/utilities.ts
new file mode 100644
index 00000000000..4282288ef9a
--- /dev/null
+++ b/react-components/src/components/Architecture/utilities.ts
@@ -0,0 +1,52 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
+import { type RevealRenderTarget } from '../../architecture/base/renderTarget/RevealRenderTarget';
+import { RenderTargetCommand } from '../../architecture/base/commands/RenderTargetCommand';
+import { type IconType } from '@cognite/cogs.js';
+import { type PlacementType, type ButtonType, type FlexDirection } from './types';
+
+export function getIcon(command: BaseCommand): IconType | undefined {
+  if (command.icon === undefined) {
+    return undefined;
+  }
+  return command.icon as IconType;
+}
+
+export function getFlexDirection(isHorizontal: boolean): FlexDirection {
+  return isHorizontal ? 'row' : 'column';
+}
+
+export function getTooltipPlacement(isHorizontal: boolean): PlacementType {
+  return isHorizontal ? 'top' : 'right';
+}
+
+export function getButtonType(command: BaseCommand): ButtonType {
+  // This was the only way it went through compiler: (more button types will be added in the future)
+  const type = command.buttonType;
+  if (type === 'ghost' || type === 'ghost-destructive' || type === 'primary') {
+    return type;
+  }
+  return 'ghost';
+}
+
+export function getDefaultCommand(
+  newCommand: BaseCommand,
+  renderTarget: RevealRenderTarget
+): BaseCommand {
+  // If it exists from before, return the existing command
+  // Otherwise, add the new command to the controller and attach the renderTarget.
+  if (!newCommand.hasData) {
+    const oldCommand = renderTarget.commandsController.getEqual(newCommand);
+    if (oldCommand !== undefined) {
+      return oldCommand;
+    }
+    renderTarget.commandsController.add(newCommand);
+  }
+  if (newCommand instanceof RenderTargetCommand) {
+    newCommand.attach(renderTarget);
+  }
+  return newCommand;
+}
diff --git a/react-components/yarn.lock b/react-components/yarn.lock
index 28af44585e0..1331bd07c71 100644
--- a/react-components/yarn.lock
+++ b/react-components/yarn.lock
@@ -1747,7 +1747,7 @@ __metadata:
     "@cognite/cdf-i18n-utils": "npm:^0.7.5"
     "@cognite/cdf-utilities": "npm:^3.6.0"
     "@cognite/cogs.js": "npm:^9.84.3"
-    "@cognite/reveal": "npm:^4.14.7"
+    "@cognite/reveal": "npm:^4.15.0"
     "@cognite/sdk": "npm:^9.13.0"
     "@playwright/test": "npm:^1.43.1"
     "@storybook/addon-essentials": "npm:^8.0.9"
@@ -1802,16 +1802,16 @@ __metadata:
     vitest: "npm:^1.5.3"
   peerDependencies:
     "@cognite/cogs.js": ">=9.84.3"
-    "@cognite/reveal": 4.14.7
+    "@cognite/reveal": 4.15.0
     react: ">=18"
     react-dom: ">=18"
     styled-components: ">=5"
   languageName: unknown
   linkType: soft
 
-"@cognite/reveal@npm:^4.14.7":
-  version: 4.14.7
-  resolution: "@cognite/reveal@npm:4.14.7"
+"@cognite/reveal@npm:^4.15.0":
+  version: 4.15.0
+  resolution: "@cognite/reveal@npm:4.15.0"
   dependencies:
     "@rajesh896/broprint.js": "npm:^2.1.1"
     "@tweenjs/tween.js": "npm:^23.1.1"
@@ -1831,7 +1831,7 @@ __metadata:
   peerDependencies:
     "@cognite/sdk": ^7.16.0 || ^8.0.0
     three: 0.165.0
-  checksum: 10/095b8d02ec9a66dc3f28974f95fcac959b854b0504774b1c3b4bc837e66026aa5d58d01c0f9adb7cc8a09e389c05d9091226f9b2533dc97e513e3fb5143cbb34
+  checksum: 10/5d8111cf3cc5a2424a643fd0d743764a90b56ffb7602fccc3dc07aace1f9857eb514abe765a6fc2cd6ba8fdbe069dea22a1ba46a00526b6800bf8f947f64f3b0
   languageName: node
   linkType: hard