diff --git a/packages/phoenix-event-display/src/event-display.ts b/packages/phoenix-event-display/src/event-display.ts
index 18b1799a8..ff3a3bb08 100644
--- a/packages/phoenix-event-display/src/event-display.ts
+++ b/packages/phoenix-event-display/src/event-display.ts
@@ -37,6 +37,8 @@ export class EventDisplay {
   private ui: UIManager;
   /** Loading manager for loadable resources */
   private loadingManager: LoadingManager;
+  /** State manager for managing event display state. */
+  private stateManager: StateManager;
 
   /**
    * Create the Phoenix event display and intitialize all the elements.
@@ -64,7 +66,7 @@ export class EventDisplay {
     // Initialize the UI with configuration
     this.ui.init(configuration);
     // Set up for the state manager
-    new StateManager().setEventDisplay(this);
+    this.getStateManager().setEventDisplay(this);
 
     // Animate loop
     const uiLoop = () => {
@@ -181,6 +183,17 @@ export class EventDisplay {
     return this.loadingManager;
   }
 
+  /**
+   * Get the state manager that manages event display's state.
+   * @returns The state manager.
+   */
+  public getStateManager() {
+    if (!this.stateManager) {
+      this.stateManager = new StateManager();
+    }
+    return this.stateManager;
+  }
+
   // **********************
   // * LOADING GEOMETRIES *
   // **********************
diff --git a/packages/phoenix-event-display/src/managers/state-manager.ts b/packages/phoenix-event-display/src/managers/state-manager.ts
index af9dadcb3..1fe5b7f66 100644
--- a/packages/phoenix-event-display/src/managers/state-manager.ts
+++ b/packages/phoenix-event-display/src/managers/state-manager.ts
@@ -2,6 +2,7 @@ import { EventDisplay } from '../event-display';
 import { Camera } from 'three';
 import { PhoenixMenuNode } from '../ui/phoenix-menu/phoenix-menu-node';
 import { loadFile, saveFile } from '../helpers/file';
+import { ActiveVariable } from '../helpers/active-variable';
 
 /**
  * A singleton manager for managing the scene's state.
@@ -12,9 +13,9 @@ export class StateManager {
   /** Root node of the phoenix menu. */
   phoenixMenuRoot: PhoenixMenuNode;
   /** Whether the clipping is enabled or not. */
-  clippingEnabled: boolean;
+  clippingEnabled = new ActiveVariable(false);
   /** Angle of the clipping. */
-  clippingAngle: number;
+  clippingAngle = new ActiveVariable(0);
   /** The active camera. */
   activeCamera: Camera;
   /** The event display. */
@@ -103,6 +104,7 @@ export class StateManager {
         jsonData['eventDisplay']?.['cameraPosition']
       );
       if (jsonData['eventDisplay']?.['clippingAngle']) {
+        this.setClippingEnabled(true);
         this.eventDisplay.getUIManager().setClipping(true);
         this.eventDisplay
           .getUIManager()
@@ -116,7 +118,7 @@ export class StateManager {
    * @param clipping Whether the clipping is enabled or not.
    */
   setClippingEnabled(clipping: boolean) {
-    this.clippingEnabled = clipping;
+    this.clippingEnabled.update(clipping);
   }
 
   /**
@@ -124,7 +126,7 @@ export class StateManager {
    * @param angle Angle fo clipping.
    */
   setClippingAngle(angle: number) {
-    this.clippingAngle = angle;
+    this.clippingAngle.update(angle);
   }
 
   /**
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.spec.ts b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.spec.ts
index 2d056b5a6..57b63fe1f 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.spec.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.spec.ts
@@ -50,7 +50,7 @@ describe('CollectionsInfoOverlayComponent', () => {
     spyOn(eventDisplayService, 'getActiveObjectId').and.callThrough();
 
     component.ngOnInit();
-    component.activeObject.uuid = ROW_ID;
+    component.activeObject.value = ROW_ID;
 
     expect(eventDisplayService.getActiveObjectId).toHaveBeenCalled();
   });
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html
index bdc414553..6b5c251f0 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.html
@@ -1,6 +1,7 @@
 <mat-menu #menu>
   <mat-checkbox
     class="mat-menu-item"
+    [checked]="clippingEnabled"
     (click)="$event.stopPropagation()"
     (change)="toggleClipping($event)"
     >Clipping
@@ -10,6 +11,7 @@
     max="180"
     step="1"
     thumbLabel
+    [value]="clippingAngle"
     (click)="$event.stopPropagation()"
     (input)="changeClippingAngle($event)"
   >
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.ts
index af72f5f96..cfd3a497d 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/object-clipping/object-clipping.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
 import { MatSliderChange } from '@angular/material/slider';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { EventDisplayService } from '../../../services/event-display.service';
@@ -10,8 +10,17 @@ import { EventDisplayService } from '../../../services/event-display.service';
 })
 export class ObjectClippingComponent {
   clippingEnabled: boolean;
+  clippingAngle: number;
 
-  constructor(private eventDisplay: EventDisplayService) {}
+  constructor(private eventDisplay: EventDisplayService) {
+    const stateManager = this.eventDisplay.getStateManager();
+    stateManager.clippingEnabled.onUpdate(
+      (clippingValue) => (this.clippingEnabled = clippingValue)
+    );
+    stateManager.clippingAngle.onUpdate(
+      (value) => (this.clippingAngle = value)
+    );
+  }
 
   changeClippingAngle(change: MatSliderChange) {
     const angle = change.value;