diff --git a/app/javascript/components/media_deck.tsx b/app/javascript/components/media_deck.tsx
index 6ef82d7d0..5ca517921 100644
--- a/app/javascript/components/media_deck.tsx
+++ b/app/javascript/components/media_deck.tsx
@@ -3,49 +3,31 @@ import ScreenShare from "components/media_deck/screen_share";
 import AddScreenShare from "components/media_deck/add_screen_share";
 import CameraShare from "components/media_deck/camera_share";
 import AddWebcamSource from "components/media_deck/add_webcam_source";
+import { observer } from "mobx-preact";
+import ScreenSourceStore from "components/media_deck/secreen_source";
+import WebcamSourceStore from "components/media_deck/webcam_source";
 
-type State = {
-  isScreenVisible: boolean;
-  webcamShared: boolean;
-  screenShared: boolean;
-};
-
-export default class MediaDeck extends Component<unknown, State> {
-  constructor() {
-    super();
-    this.setState({
-      isScreenVisible: true,
-      webcamShared: false,
-      screenShared: false,
-    })
-  }
-
+const MediaDeck = observer(class MediaDeck extends Component<unknown, unknown> {
   render(): VNode {
     return (
       <div class="MediaDeck">
         <div class="MediaDeck__sources">
           <ScreenShare
-            screenShared={this.state.screenShared}
-            isVisible={this.state.isScreenVisible}
-            toggleVisibility={() => this.setState({isScreenVisible: !this.state.isScreenVisible})}
+            screenSourceStore={ScreenSourceStore}
           />
-          <CameraShare webcamShared={this.state.webcamShared} />
-         </div>
+          <CameraShare webcamSourceStore={WebcamSourceStore} />
+        </div>
         <div class="MediaDeck__controls">
           <AddScreenShare
-            isScreenVisible={this.state.isScreenVisible}
-            screenSourceAttached={this.state.screenShared}
-            addScreenCaptureSource={() =>  this.setState({ screenShared: true })}
-            stopSharing={() => this.setState(({ screenShared: false }))}
-            toggleVisibility={() => this.setState({ isScreenVisible: !this.state.isScreenVisible})}
+            screenSourceStore={ScreenSourceStore}
           />
           <AddWebcamSource
-            webcamSourceAttached={this.state.webcamShared}
-            addWebcamCaptureSource={() => this.setState({ webcamShared: true })}
-            stopSharing={() => this.setState({webcamShared: false})}
+            webcamSourceStore={WebcamSourceStore}
           />
         </div>
       </div>
     );
   }
-}
+});
+
+export default MediaDeck;
diff --git a/app/javascript/components/media_deck/add_screen_share.tsx b/app/javascript/components/media_deck/add_screen_share.tsx
index 99a47ef78..e29e7fad3 100644
--- a/app/javascript/components/media_deck/add_screen_share.tsx
+++ b/app/javascript/components/media_deck/add_screen_share.tsx
@@ -1,41 +1,43 @@
 import { Component, h, VNode } from "preact";
+import { ScreenSourceStore } from "components/media_deck/secreen_source";
 
 type Props = {
-  isScreenVisible: boolean;
   screenSourceAttached: boolean;
-  addScreenCaptureSource(): void;
   stopSharing(): void;
-  toggleVisibility(): void;
+  screenSourceStore: ScreenSourceStore;
 };
+import { observer } from "mobx-preact";
 
-export default class AddScreenShare extends Component<Props, unknown> {
+const AddScreenShare = observer(class AddScreenShare extends Component<Props, unknown> {
   render(): VNode {
     return (
       <div>
         {this.renderVisibilityControls()}
         {
-          !this.props.screenSourceAttached ?
-            <button onClick={() => this.props.addScreenCaptureSource()}>
+          !this.props.screenSourceStore.screenCaptureSource ?
+            <button onClick={() => this.props.screenSourceStore.connectScreenShareSource()}>
               Share Your Screen
-            </button> : <button onClick={() => this.props.stopSharing()}>Stop Sharing</button>
+            </button> : <button onClick={() => this.props.screenSourceStore.disconnectScreenShareSource()}>Stop Sharing</button>
         }
       </div>
     );
   }
 
   renderVisibilityControls(): VNode {
-    if (!this.props.screenSourceAttached) {
+    if (!this.props.screenSourceStore.screenCaptureSource) {
       return <span />;
     }
 
     return (
       <button
         onClick={() => {
-          this.props.toggleVisibility();
+          this.props.screenSourceStore.toggleVisibility();
         }}
       >
-        {this.props.isScreenVisible ? "Hide Screen" : "Make Visible"}
+        {this.props.screenSourceStore.isScreenVisible ? "Hide Screen" : "Make Visible"}
       </button>
     );
   }
-}
\ No newline at end of file
+});
+
+export default AddScreenShare;
\ No newline at end of file
diff --git a/app/javascript/components/media_deck/add_webcam_source.tsx b/app/javascript/components/media_deck/add_webcam_source.tsx
index 3495f4648..1b98d31aa 100644
--- a/app/javascript/components/media_deck/add_webcam_source.tsx
+++ b/app/javascript/components/media_deck/add_webcam_source.tsx
@@ -1,22 +1,28 @@
 import { Component, h, VNode } from "preact";
+import { WebcamSourceStore } from "components/media_deck/webcam_source";
+import { observer } from "mobx-preact";
 
 type Props = {
   webcamSourceAttached: boolean;
   addWebcamCaptureSource(): void;
   stopSharing(): void;
+  webcamSourceStore: WebcamSourceStore
 }
-export default class AddWebcamSource extends Component<Props, any> {
+
+const AddWebcamSource = observer(class AddWebcamSource extends Component<Props, unknown> {
   render(): VNode {
     return (
       <div>
         {
-          !this.props.webcamSourceAttached ?
-            <button onClick={() => this.props.addWebcamCaptureSource()}>
+          !this.props.webcamSourceStore.webcamCaptureSource ?
+            <button onClick={() => this.props.webcamSourceStore.toggleWebcamDialogue()}>
               Attach Another Camera
             </button> :
-            <button onClick={() => this.props.stopSharing()}>Stop Camera Stream</button>
+            <button onClick={() => this.props.webcamSourceStore.stopWebcamStream()}>Stop Camera Stream</button>
         }
       </div>
     );
   }
-}
+});
+
+export default AddWebcamSource;
diff --git a/app/javascript/components/media_deck/camera_share.tsx b/app/javascript/components/media_deck/camera_share.tsx
index cef57e136..1b500fe88 100644
--- a/app/javascript/components/media_deck/camera_share.tsx
+++ b/app/javascript/components/media_deck/camera_share.tsx
@@ -1,38 +1,20 @@
 import { Component, h, VNode } from "preact";
-import EventBus from "event_bus";
-import { RemoveCaptureSourceEvent } from "helpers/broadcast/capture_source_manager";
 import { WebcamCaptureSource } from "helpers/broadcast/capture_sources/webcam";
+import { WebcamSourceStore } from "components/media_deck/webcam_source";
+import { observer } from "mobx-preact";
 
-type Props = { webcamShared: boolean };
-type State = { deviceId: string; streamStarted: boolean; webcamCaptureSource: WebcamCaptureSource; }
+type Props = { webcamShared: boolean; webcamSourceStore: WebcamSourceStore; };
 
-export default class CameraShare extends Component<Props, State> {
-  private videoTag: HTMLVideoElement;
-  private webcamDevices: MediaDeviceInfo[];
-
-  constructor(props: Props) {
-    super(props);
-
-    this.setState({
-      deviceId: null,
-      streamStarted: false,
-      webcamCaptureSource: null,
-    });
-  }
+const CameraShare = observer(class CameraShare extends Component<Props, unknown> {
 
   render(): VNode {
     return (
       <div class="MediaDeck__camera-stream">
         <div class="MediaDeck__screen-share__video">
-          <video
-            data-connected={!!this.props.webcamShared}
-            ref={(videoTag) => {
-              this.videoTag = videoTag;
-            }}
-          />
+          {this.props.webcamSourceStore.renderVideo()}
         </div>
         {
-          this.props.webcamShared && !this.state.streamStarted ?
+          this.props.webcamSourceStore.webcamDialogueVisible && !this.props.webcamSourceStore.webcamCaptureSource ?
             <div class="MediaDeck__webcam-share">
               {this.renderWebcamDevices()}
             </div> : null
@@ -41,26 +23,9 @@ export default class CameraShare extends Component<Props, State> {
     );
   }
 
-  async componentDidMount(): Promise<void> {
-    const devices = await navigator.mediaDevices.enumerateDevices();
-    this.webcamDevices = devices.filter((d: MediaDeviceInfo) => d.kind === "videoinput");
-  }
-
-  async componentDidUpdate(prevProps: Props): Promise<void> {
-    if (prevProps.webcamShared === this.props.webcamShared)
-      return;
-
-    if (!this.props.webcamShared) {
-      EventBus.dispatch(RemoveCaptureSourceEvent, this.state.webcamCaptureSource);
-      this.state.webcamCaptureSource.stop();
-      this.videoTag.srcObject = null;
-      this.setState({ webcamCaptureSource: null });
-    }
-  }
-
   private renderWebcamDevices(): VNode[] {
     const devicesMarkup = [];
-    this.webcamDevices.forEach((device: MediaDeviceInfo) => {
+    this.props.webcamSourceStore.webcamDevices.forEach((device: MediaDeviceInfo) => {
       devicesMarkup.push(this.deviceMarkup(device));
     });
     return devicesMarkup;
@@ -71,24 +36,12 @@ export default class CameraShare extends Component<Props, State> {
       <div
         class="MediaDeck__webcam-share--item"
         data-media-id={device.deviceId}
-        onClick={() => this.startWebcamStream(device.deviceId)}
+        onClick={() => this.props.webcamSourceStore.startWebcamStream(device.deviceId)}
       >
         {device.label}
       </div>
     );
   }
+});
 
-  private async startWebcamStream(deviceId: string): Promise<void> {
-    const webcamCaptureSource = await WebcamCaptureSource.connect(
-      this.state.deviceId,
-      this.videoTag
-    );
-
-    this.setState({
-      deviceId: deviceId,
-      streamStarted: true,
-      webcamCaptureSource,
-    });
-
-  }
-}
\ No newline at end of file
+export default CameraShare;
diff --git a/app/javascript/components/media_deck/screen_share.tsx b/app/javascript/components/media_deck/screen_share.tsx
index ba8476ab7..d4c15964a 100644
--- a/app/javascript/components/media_deck/screen_share.tsx
+++ b/app/javascript/components/media_deck/screen_share.tsx
@@ -1,26 +1,18 @@
 import { Component, h, VNode } from "preact";
-import { ScreenCaptureSource } from "helpers/broadcast/capture_sources/screen";
 import {
   NewCaptureSourceEvent,
   RemoveCaptureSourceEvent,
 } from "helpers/broadcast/capture_source_manager";
 import hiddenIcon from "images/visible-false.svg";
 import EventBus from "event_bus";
+import { observer } from "mobx-preact";
+import { ScreenSourceStore } from "components/media_deck/secreen_source";
 
-type State = { screenCaptureSource: ScreenCaptureSource; };
-type Props = { screenShared: boolean; isVisible: boolean; toggleVisibility(): void; };
+type Props = { screenSourceStore: ScreenSourceStore };
 
-export default class ScreenShare extends Component<Props, State> {
+const ScreenShare = observer(class ScreenShare extends Component<Props, unknown> {
   private videoTag: HTMLVideoElement;
 
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      screenCaptureSource: null,
-    };
-  }
-
   render(): VNode {
     return (
       <div
@@ -29,75 +21,51 @@ export default class ScreenShare extends Component<Props, State> {
           this.toggleVisibility();
         }}
       >
-        {this.props.isVisible ? null : (
+        {this.props.screenSourceStore.isScreenVisible ? null : (
           <div class="MediaDeck__screen-share__hidden-cover">
             <img src={hiddenIcon} alt="hidden icon" />
           </div>
         )}
         <div class="MediaDeck__screen-share__video">
-          <video
-            data-connected={this.props.screenShared}
-            ref={(videoTag) => {
-              this.videoTag = videoTag;
-            }}
-          />
+          {this.props.screenSourceStore.renderVideo()}
         </div>
       </div>
     );
   }
 
-  async componentDidUpdate(prevProps: Props): Promise<void> {
-    if (prevProps.screenShared === this.props.screenShared)
-      return;
-
-    if (this.props.screenShared) {
-      const screenCaptureSource = await ScreenCaptureSource.connect(
-        this.videoTag
-      );
-
-      this.setState({
-        screenCaptureSource,
-      });
-      this.props.toggleVisibility()
-    } else {
-      EventBus.dispatch(RemoveCaptureSourceEvent, this.state.screenCaptureSource);
-      this.state.screenCaptureSource.stop();
-      this.videoTag.srcObject = null;
-      this.setState({ screenCaptureSource: null });
-    }
-  }
-
   renderVisibilityControls(): VNode {
-    if (!this.state.screenCaptureSource) {
+    if (!this.props.screenSourceStore.screenCaptureSource) {
       return <span />;
     }
 
     return (
       <button
         onClick={() => {
-          this.toggleVisibility();
+          this.props.screenSourceStore.toggleVisibility();
         }}
       >
-        {this.props.isVisible ? "Hide Screen" : "Make Visible"}
+        {this.props.screenSourceStore.isScreenVisible ? "Hide Screen" : "Make Visible"}
       </button>
     );
   }
 
   private toggleVisibility() {
-    if (this.state.screenCaptureSource) {
-      if (this.props.isVisible) {
+    if (this.props.screenSourceStore.screenCaptureSource) {
+      if (this.props.screenSourceStore.isScreenVisible) {
         EventBus.dispatch(
           RemoveCaptureSourceEvent,
-          this.state.screenCaptureSource
+          this.props.screenSourceStore.screenCaptureSource
         );
-        this.props.toggleVisibility();
+        this.props.screenSourceStore.toggleVisibility();
       } else {
         EventBus.dispatch(
           NewCaptureSourceEvent,
-          this.state.screenCaptureSource
+          this.props.screenSourceStore.screenCaptureSource
         );
       }
-      this.props.toggleVisibility();
+      this.props.screenSourceStore.toggleVisibility();
     }
   }
-}
+});
+
+export default ScreenShare;
diff --git a/app/javascript/components/media_deck/secreen_source.tsx b/app/javascript/components/media_deck/secreen_source.tsx
new file mode 100644
index 000000000..75dcd8945
--- /dev/null
+++ b/app/javascript/components/media_deck/secreen_source.tsx
@@ -0,0 +1,50 @@
+import { h, VNode } from "preact";
+import { makeAutoObservable } from "mobx";
+import EventBus from "event_bus";
+import { ScreenCaptureSource } from "helpers/broadcast/capture_sources/screen";
+import {
+  RemoveCaptureSourceEvent,
+} from "helpers/broadcast/capture_source_manager";
+
+export class ScreenSourceStore {
+  isScreenVisible = true;
+  screenCaptureSource = null;
+  videoTag = null;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  renderVideo(): VNode {
+    return (
+      <div class="MediaDeck__screen-share__video">
+        <video
+          data-connected={this.screenCaptureSource !== null}
+          ref={(videoTag) => {
+            this.videoTag = videoTag;
+          }}
+        />
+      </div>
+    );
+  }
+
+  *connectScreenShareSource() {
+    this.screenCaptureSource = yield ScreenCaptureSource.connect(
+      this.videoTag
+    );
+    this.isScreenVisible = true;
+  }
+
+  disconnectScreenShareSource(): void {
+    EventBus.dispatch(RemoveCaptureSourceEvent, this.screenCaptureSource);
+    this.screenCaptureSource.stop();
+    this.videoTag.srcObject = null;
+    this.screenCaptureSource = null;
+  }
+
+  toggleVisibility(): void {
+    this.isScreenVisible = !this.isScreenVisible;
+  }
+}
+
+export default new ScreenSourceStore();
\ No newline at end of file
diff --git a/app/javascript/components/media_deck/webcam_source.tsx b/app/javascript/components/media_deck/webcam_source.tsx
new file mode 100644
index 000000000..cb99c54f8
--- /dev/null
+++ b/app/javascript/components/media_deck/webcam_source.tsx
@@ -0,0 +1,57 @@
+import { h, VNode } from "preact";
+import { autorun, makeAutoObservable } from "mobx";
+import { WebcamCaptureSource } from "helpers/broadcast/capture_sources/webcam";
+import EventBus from "event_bus";
+import { RemoveCaptureSourceEvent } from "helpers/broadcast/capture_source_manager";
+
+export class WebcamSourceStore {
+  webcamDialogueVisible = false;
+  webcamCaptureSource = null;
+  webcamDevices = [];
+  videoTag = null;
+  deviceId = "";
+
+  constructor() {
+    makeAutoObservable(this);
+    autorun(() => this.enumerateWebcamDevices())
+  }
+
+  renderVideo(): VNode {
+    return (
+      <video
+        data-connected={!!this.webcamCaptureSource}
+        ref={(videoTag) => {
+          this.videoTag = videoTag;
+        }}
+      />
+    )
+  }
+
+  toggleWebcamDialogue(): void {
+    this.webcamDialogueVisible = !this.webcamDialogueVisible;
+  }
+
+  *enumerateWebcamDevices() {
+    const devices = yield navigator.mediaDevices.enumerateDevices();
+    this.webcamDevices = devices.filter((d: MediaDeviceInfo) => d.kind === "videoinput");
+  }
+
+  *startWebcamStream(deviceId: string) {
+    this.deviceId = deviceId;
+    this.toggleWebcamDialogue();
+
+    this.webcamCaptureSource = yield WebcamCaptureSource.connect(
+      this.deviceId,
+      this.videoTag
+    );
+  }
+
+  stopWebcamStream(): void {
+    EventBus.dispatch(RemoveCaptureSourceEvent, this.webcamCaptureSource);
+    this.webcamCaptureSource.stop();
+    this.videoTag.srcObject = null;
+    this.webcamCaptureSource = null;
+  }
+}
+
+export default new WebcamSourceStore();
diff --git a/app/javascript/controllers/audience/movable_pip_controller.ts b/app/javascript/controllers/audience/movable_pip_controller.ts
index 529ff7b3e..711654a84 100644
--- a/app/javascript/controllers/audience/movable_pip_controller.ts
+++ b/app/javascript/controllers/audience/movable_pip_controller.ts
@@ -13,7 +13,7 @@ polyfill({
 export default class MovablePipController extends Controller {
   static targets = ["pipComponent"];
 
-  private pipComponentTarget!: HTMLCanvasElement;
+  private declare pipComponentTarget: HTMLCanvasElement;
 
   connect(): void {
     this.pipComponentTarget.classList.add("bottom-right");
diff --git a/app/javascript/controllers/audience/player_controls_controller.ts b/app/javascript/controllers/audience/player_controls_controller.ts
index aa58be64d..9553d0d81 100644
--- a/app/javascript/controllers/audience/player_controls_controller.ts
+++ b/app/javascript/controllers/audience/player_controls_controller.ts
@@ -27,21 +27,21 @@ export default class extends BaseController {
     "videoContainer",
   ];
 
-  readonly videoTarget!: HTMLVideoElement;
-  readonly videoPreviewImageTarget!: HTMLImageElement;
-  readonly videoPreviewContainerTarget!: HTMLDivElement;
-  readonly timeDurationTarget!: HTMLElement;
-  readonly timeDisplayTarget!: HTMLElement;
-  readonly timePreviewTarget!: HTMLDivElement;
-  readonly audienceViewTarget!: HTMLElement;
-  readonly muteBannerTarget!: HTMLElement;
-  readonly progressBarTarget!: HTMLElement;
-  readonly progressBarContainerTarget!: HTMLElement;
-  readonly progressBarButtonTarget!: HTMLButtonElement;
-  readonly togglePlayTargets!: HTMLElement[];
-  readonly toggleAudioTargets!: HTMLElement[];
-  readonly badgeContainerTarget!: HTMLElement;
-  readonly videoContainerTarget!: HTMLElement;
+  declare readonly videoTarget: HTMLVideoElement;
+  declare readonly videoPreviewImageTarget: HTMLImageElement;
+  declare readonly videoPreviewContainerTarget: HTMLDivElement;
+  declare readonly timeDurationTarget: HTMLElement;
+  declare readonly timeDisplayTarget: HTMLElement;
+  declare readonly timePreviewTarget: HTMLDivElement;
+  declare readonly audienceViewTarget: HTMLElement;
+  declare readonly muteBannerTarget: HTMLElement;
+  declare readonly progressBarTarget: HTMLElement;
+  declare readonly progressBarContainerTarget: HTMLElement;
+  declare readonly progressBarButtonTarget: HTMLButtonElement;
+  declare readonly togglePlayTargets: HTMLElement[];
+  declare readonly toggleAudioTargets: HTMLElement[];
+  declare readonly badgeContainerTarget: HTMLElement;
+  declare readonly videoContainerTarget: HTMLElement;
 
   private pointerIsDown: boolean;
   private badgeTimeoutId: number;
@@ -232,8 +232,8 @@ export default class extends BaseController {
   handleLoadedMetadata(): void {
     this.timeDurationTarget.dataset.duration = this.duration.toString();
     this.timeDurationTarget.innerHTML = displayTime(this.duration);
-
-    if (this.element.dataset.audienceViewStreamType === "vod") {
+    console.log("parentElement", this.parentElement);
+    if (this.parentElement.dataset.audienceViewStreamType === "vod") {
       this.preloadPreviews();
     }
 
@@ -366,7 +366,7 @@ export default class extends BaseController {
         globalThis.timecodeMs = timecodeMs;
         VideoEventProcessor.syncTime(timecodeMs);
         this.timeDisplayTarget.innerHTML = displayTime(timecodeMs / 1000);
-        this.element.dataset.timecode = `${timecodeMs}`;
+        this.parentElement.dataset.timecode = `${timecodeMs}`;
       }
     }
     this.tickTimeoutId = window.setTimeout(this.tick.bind(this), 200);
@@ -413,15 +413,17 @@ export default class extends BaseController {
   }
 
   set videoState(state: string) {
-    this.element.dataset.audienceViewState = state;
+    console.log("parentElement", this.parentElement);
+    this.parentElement.dataset.audienceViewState = state;
   }
 
   get videoState(): string {
-    return this.element.dataset.audienceViewState;
+    console.log("parentElement", this.parentElement);
+    return this.parentElement.dataset.audienceViewState;
   }
 
   get endOffset(): number {
-    return parseInt(this.element.dataset.endOffset);
+    return parseInt(this.parentElement.dataset.endOffset);
   }
 
   get duration(): number {
diff --git a/app/javascript/controllers/audience/vod_video_controller.ts b/app/javascript/controllers/audience/vod_video_controller.ts
index c40f91585..2086270a4 100644
--- a/app/javascript/controllers/audience/vod_video_controller.ts
+++ b/app/javascript/controllers/audience/vod_video_controller.ts
@@ -5,13 +5,11 @@ import { VideoSeekEvent } from "helpers/video_helpers";
 
 export default class extends BaseController {
   static targets = ["chat", "video", "likeNotification"];
-  readonly chatTarget!: HTMLElement;
-  readonly likeNotificationTarget!: HTMLElement;
-  readonly videoTarget!: HTMLVideoElement;
+  declare readonly chatTarget: HTMLElement;
+  declare readonly likeNotificationTarget: HTMLElement;
+  declare readonly videoTarget: HTMLVideoElement;
   private eventManager: VodEventManager;
 
-  element!: HTMLElement;
-
   connect(): void {
     document.addEventListener(VideoSeekEvent, this.seekTo.bind(this));
     this.eventManager = new VodEventManager(0);
@@ -26,7 +24,8 @@ export default class extends BaseController {
       if (requestedStartTime && requestedStartTime < this.duration) {
         startTime = requestedStartTime;
       } else {
-        startTime = parseInt(this.element.dataset.startOffset);
+        console.log("parentElement", this.parentElement);
+        startTime = parseInt(this.parentElement.dataset.startOffset);
       }
 
       this.videoTarget.currentTime = startTime;
@@ -53,7 +52,8 @@ export default class extends BaseController {
   }
 
   get endOffset(): number {
-    return parseInt(this.element.dataset.endOffset);
+    console.log("parentElement", this.parentElement);
+    return parseInt(this.parentElement.dataset.endOffset);
   }
 
   get duration(): number {
diff --git a/app/javascript/controllers/audience_view_controller.ts b/app/javascript/controllers/audience_view_controller.ts
index 625804123..43e67dd50 100644
--- a/app/javascript/controllers/audience_view_controller.ts
+++ b/app/javascript/controllers/audience_view_controller.ts
@@ -18,12 +18,12 @@ export default class extends BaseController {
     "timeDisplay",
   ];
 
-  readonly videoTarget!: HTMLVideoElement;
-  readonly likeNotificationTarget!: HTMLElement;
-  readonly primaryCanvasTarget!: HTMLCanvasElement;
-  readonly fixedSecondaryCanvasTarget!: HTMLCanvasElement;
-  readonly pipSecondaryCanvasTarget!: HTMLCanvasElement;
-  readonly timeDisplayTarget!: HTMLElement;
+  declare readonly videoTarget: HTMLVideoElement;
+  declare readonly likeNotificationTarget: HTMLElement;
+  declare readonly primaryCanvasTarget: HTMLCanvasElement;
+  declare readonly fixedSecondaryCanvasTarget: HTMLCanvasElement;
+  declare readonly pipSecondaryCanvasTarget: HTMLCanvasElement;
+  declare readonly timeDisplayTarget: HTMLElement;
 
   private broadcastLayout: VideoLayout;
   private videoDemixer: VideoDemixer;
@@ -37,8 +37,8 @@ export default class extends BaseController {
     if (isProduction()) {
       startMuxData();
     }
-
-    const config = this.element.dataset;
+    console.log("parentElement", this.parentElement);
+    const config = this.parentElement.dataset;
     if (config.hlsUrl) {
       this.remoteMediaProvider = new HlsMediaProvider(config.hlsUrl);
     } else if (config.phenixAuthToken) {
diff --git a/app/javascript/controllers/authentication_controller.ts b/app/javascript/controllers/authentication_controller.ts
index c3c06346b..b0af70c91 100644
--- a/app/javascript/controllers/authentication_controller.ts
+++ b/app/javascript/controllers/authentication_controller.ts
@@ -14,12 +14,12 @@ export default class extends BaseController {
     "linkShare",
   ];
 
-  readonly linkShareTargets!: HTMLElement[];
-  readonly modalTarget!: HTMLElement;
-  readonly submitButtonTarget!: HTMLButtonElement;
-  readonly formTarget!: HTMLFormElement;
-  readonly secretCodeInputTarget!: HTMLInputElement;
-  readonly nameInputTarget!: HTMLInputElement;
+  declare readonly linkShareTargets: HTMLElement[];
+  declare readonly modalTarget: HTMLElement;
+  declare readonly submitButtonTarget: HTMLButtonElement;
+  declare readonly formTarget: HTMLFormElement;
+  declare readonly secretCodeInputTarget: HTMLInputElement;
+  declare readonly nameInputTarget: HTMLInputElement;
   private iti: IntlTelInput.Plugin;
 
   connect(): void {
diff --git a/app/javascript/controllers/base_controller.ts b/app/javascript/controllers/base_controller.ts
index e75a05ad5..e897fdf2c 100644
--- a/app/javascript/controllers/base_controller.ts
+++ b/app/javascript/controllers/base_controller.ts
@@ -1,8 +1,9 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  element!: HTMLElement;
-
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
   private authChangeListener = () => this.authChanged();
 
   subscribeToAuthChange(): void {
diff --git a/app/javascript/controllers/broadcast/capture_sources_controller.tsx b/app/javascript/controllers/broadcast/capture_sources_controller.tsx
index dcbc3be00..038589cb2 100644
--- a/app/javascript/controllers/broadcast/capture_sources_controller.tsx
+++ b/app/javascript/controllers/broadcast/capture_sources_controller.tsx
@@ -16,10 +16,10 @@ export const ChangeMediaDeviceEvent = "ChangeMediaDeviceEvent";
 export default class extends BaseController {
   static targets = ["mediaDeck"];
 
-  private mediaDeckTarget!: HTMLDivElement;
+  declare private mediaDeckTarget: HTMLDivElement;
 
-  private cameraCaptureSource: WebcamCaptureSource;
-  private audioCaptureSource: AudioCaptureSource;
+  declare private cameraCaptureSource: WebcamCaptureSource;
+  declare private audioCaptureSource: AudioCaptureSource;
 
   connect(): void {
     this.connectDefaultDevices().then(() => {
diff --git a/app/javascript/controllers/broadcast/commands_menu_controller.ts b/app/javascript/controllers/broadcast/commands_menu_controller.ts
index ee10c2e7f..75d66f5ba 100644
--- a/app/javascript/controllers/broadcast/commands_menu_controller.ts
+++ b/app/javascript/controllers/broadcast/commands_menu_controller.ts
@@ -5,11 +5,13 @@ export const CloseMenuEvent = "CloseMenu";
 export const ResetMenuEvent = "ResetMenu";
 
 export default class extends Controller {
-  element!: HTMLElement;
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
 
   static targets = ["menuItems"];
 
-  private menuItemsTarget!: HTMLElement;
+  private declare menuItemsTarget: HTMLElement;
 
   connect(): void {
     document.addEventListener(ShowMenuEvent, this.showMenuHandler.bind(this));
@@ -29,10 +31,12 @@ export default class extends Controller {
     if (data.type === this.type) {
       this.closeMenu();
     } else {
-      if (this.type) this.element.classList.remove(this.type);
-
-      this.element.classList.add(data.type);
-      this.element.style.display = "flex";
+      console.log("parentElement", this.parentElement);
+      if (this.type) this.parentElement.classList.remove(this.type);
+      console.log("parentElement", this.parentElement);
+      this.parentElement.classList.add(data.type);
+      console.log("parentElement", this.parentElement);
+      // this.parentElement.style.display = "flex";
       this.type = data.type;
     }
   }
@@ -41,12 +45,14 @@ export default class extends Controller {
     this.resetMenu();
 
     this.type = "";
-    this.element.style.display = "none";
+    console.log("parentElement", this.parentElement);
+    // this.parentElement.style.display = "none";
   }
 
   private resetMenu(): void {
     this.menuItemsTarget.innerHTML = "";
-    if (this.type) this.element.classList.remove(this.type);
+    console.log("parentElement", this.parentElement);
+    if (this.type) this.parentElement.classList.remove(this.type);
   }
 
   get type(): string {
diff --git a/app/javascript/controllers/broadcast/controls_controller.ts b/app/javascript/controllers/broadcast/controls_controller.ts
index 96112e520..cc6a56db1 100644
--- a/app/javascript/controllers/broadcast/controls_controller.ts
+++ b/app/javascript/controllers/broadcast/controls_controller.ts
@@ -7,9 +7,9 @@ import { Visibility, setVideoVisibility } from "../../helpers/video_helpers";
 export default class extends Controller {
   static targets = ["loading", "titleInput", "visibility"];
 
-  readonly loadingTarget!: HTMLElement;
-  readonly titleInputTarget!: HTMLInputElement;
-  readonly visibilityTarget!: HTMLSelectElement;
+  declare readonly loadingTarget: HTMLElement;
+  declare readonly titleInputTarget: HTMLInputElement;
+  declare readonly visibilityTarget: HTMLSelectElement;
 
   @debounce(100)
   async saveTitle(): Promise<void> {
diff --git a/app/javascript/controllers/broadcast/debug_controller.ts b/app/javascript/controllers/broadcast/debug_controller.ts
index 36deb627d..6744658fd 100644
--- a/app/javascript/controllers/broadcast/debug_controller.ts
+++ b/app/javascript/controllers/broadcast/debug_controller.ts
@@ -3,7 +3,7 @@ import { DebugKeyEvent } from "types/keyboard_mapping";
 
 export default class extends Controller {
   static targets = ["debugArea"];
-  private debugAreaTarget!: HTMLElement;
+  private declare debugAreaTarget: HTMLElement;
   hidden = true;
   private debugKeyListener: () => void;
   private environmentListener: (event: CustomEvent) => void;
diff --git a/app/javascript/controllers/broadcast/settings_controller.ts b/app/javascript/controllers/broadcast/settings_controller.ts
index 5ad72106b..9e3a2012b 100644
--- a/app/javascript/controllers/broadcast/settings_controller.ts
+++ b/app/javascript/controllers/broadcast/settings_controller.ts
@@ -8,9 +8,9 @@ export const ShowSettingsMenuEvent = "ShowSettingsMenu";
 export default class SettingsController extends DropdownController {
   static targets = ["form", "visibility", "settingsTab"];
 
-  private readonly formTarget!: HTMLFormElement;
-  private readonly visibilityTarget!: HTMLSelectElement;
-  private readonly settingsTabTarget!: HTMLElement;
+  private declare readonly formTarget: HTMLFormElement;
+  private declare readonly visibilityTarget: HTMLSelectElement;
+  private declare readonly settingsTabTarget: HTMLElement;
 
   connect(): void {
     super.connect();
diff --git a/app/javascript/controllers/broadcast/startup_controller.ts b/app/javascript/controllers/broadcast/startup_controller.ts
index 7a48da103..da1dc54d8 100644
--- a/app/javascript/controllers/broadcast/startup_controller.ts
+++ b/app/javascript/controllers/broadcast/startup_controller.ts
@@ -13,12 +13,12 @@ export default class extends BaseController {
     "step",
   ];
 
-  private microphoneAccessTarget!: HTMLElement;
-  private videoAccessTarget!: HTMLElement;
-  private loggedInStepTarget!: HTMLElement;
-  private userInstructionsModalTarget!: HTMLElement;
-  private stepTargets!: HTMLElement[];
-  private browserWarningTarget!: HTMLElement;
+  private declare microphoneAccessTarget: HTMLElement;
+  private declare videoAccessTarget: HTMLElement;
+  private declare loggedInStepTarget: HTMLElement;
+  private declare userInstructionsModalTarget: HTMLElement;
+  private declare stepTargets: HTMLElement[];
+  private declare browserWarningTarget: HTMLElement;
 
   private nextStep = "done" as Steps;
 
@@ -106,7 +106,8 @@ export default class extends BaseController {
     this.toggleNextStep(this.nextStep);
 
     // We start in a hidden state, and only by this point do we know if we should display at all...
-    this.element.style.display = "block";
+    console.log("parentElement", this.parentElement);
+    this.parentElement.style.display = "block";
   }
 
   private reloadView(): void {
diff --git a/app/javascript/controllers/broadcast_controller.ts b/app/javascript/controllers/broadcast_controller.ts
index fade35607..02cfa3e99 100644
--- a/app/javascript/controllers/broadcast_controller.ts
+++ b/app/javascript/controllers/broadcast_controller.ts
@@ -33,9 +33,9 @@ export default class extends Controller {
     "browserUnderlay",
     "foregroundWarning",
   ];
-  private webcamVideoElementTarget!: HTMLVideoElement;
-  private browserUnderlayTarget!: HTMLDivElement;
-  private foregroundWarningTarget!: HTMLElement;
+  private declare webcamVideoElementTarget: HTMLVideoElement;
+  private declare browserUnderlayTarget: HTMLDivElement;
+  private declare foregroundWarningTarget: HTMLElement;
 
   private videoMixer: VideoMixer;
   private streamRecorder: StreamRecorder;
@@ -46,9 +46,12 @@ export default class extends Controller {
   private keyboardListener: (event) => void;
   private snapshotIntervalId: number;
 
-  element!: HTMLElement;
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
 
   connect(): void {
+    console.log("hello world");
     this.keyboardListener = attachKeyboardListener();
     this.warningRemoveTimeout();
 
@@ -69,11 +72,11 @@ export default class extends Controller {
       this.videoMixer,
       this.audioMixer
     );
-
+    console.log("parentElement", this.parentElement);
     this.streamRecorder = new StreamRecorder(
       this.videoMixer,
       this.audioMixer,
-      this.element.dataset.phenixAuthToken
+      this.parentElement.dataset.phenixAuthToken
     );
     this.metronome = new Metronome();
 
@@ -95,10 +98,11 @@ export default class extends Controller {
   }
 
   startStreaming(): void {
+    console.log("parentElement", this.parentElement);
     this.streamRecorder
       .start(
-        this.element.dataset.phenixChannelAlias,
-        this.element.dataset.phenixPublishToken
+        this.parentElement.dataset.phenixChannelAlias,
+        this.parentElement.dataset.phenixPublishToken
       )
       .then(async () => {
         this.state = "starting";
diff --git a/app/javascript/controllers/chat/link_share_controller.ts b/app/javascript/controllers/chat/link_share_controller.ts
index 021eacce6..da106d794 100644
--- a/app/javascript/controllers/chat/link_share_controller.ts
+++ b/app/javascript/controllers/chat/link_share_controller.ts
@@ -16,7 +16,10 @@ export default class LinkShareController extends Controller {
 
   static targets = ["source", "success", "failure"];
 
-  element: HTMLElement;
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
+
   hideTimeoutId: number;
   displayNoneTimeoutId: number;
   state: "enabled" | "disabled";
@@ -25,7 +28,8 @@ export default class LinkShareController extends Controller {
     // dont show in the broadcaster
     if (document.querySelector("#broadcast")) {
       this.state = "disabled";
-      this.element.style.display = "none";
+      console.log("parentElement", this.parentElement);
+      // this.parentElement.style.display = "none";
     } else {
       this.state = "enabled";
     }
diff --git a/app/javascript/controllers/chat/messages_controller.ts b/app/javascript/controllers/chat/messages_controller.ts
index 9694a4626..e150c7c04 100644
--- a/app/javascript/controllers/chat/messages_controller.ts
+++ b/app/javascript/controllers/chat/messages_controller.ts
@@ -81,14 +81,14 @@ export default class MessagesController extends BaseController {
 
   private displayVideoReactionNotice(name: string) {
     this.lastMessageFromUserId = null;
-    appendToChat(this.element, renderReactionMarkup(name, heartSvg));
+    appendToChat(this.parentElement, renderReactionMarkup(name, heartSvg));
   }
 
   private displayUserJoinedNotice(user: User) {
     this.lastMessageFromUserId = null;
 
     appendToChat(
-      this.element,
+      this.parentElement,
       `
       <div class="user-joined">
         <div>${user.name} has joined</div>
diff --git a/app/javascript/controllers/chat/scroll_controller.ts b/app/javascript/controllers/chat/scroll_controller.ts
index 18382c134..df89162d0 100644
--- a/app/javascript/controllers/chat/scroll_controller.ts
+++ b/app/javascript/controllers/chat/scroll_controller.ts
@@ -18,10 +18,11 @@ export default class extends Controller {
         : "none";
 
     simplebarWrapper.addEventListener("scroll", (event) => {
+      const element = event.target as HTMLElement;
       const displayScrollOffset =
-        event.target.scrollHeight - simplebarWrapper.clientHeight;
+        element.scrollHeight - simplebarWrapper.clientHeight;
       this.scrollButtonTarget.style.display =
-        displayScrollOffset - event.target.scrollTop > 100 ? "flex" : "none";
+        displayScrollOffset - element.scrollTop > 100 ? "flex" : "none";
     });
   }
 
diff --git a/app/javascript/controllers/chat/send_message_controller.ts b/app/javascript/controllers/chat/send_message_controller.ts
index c3bf073ab..afd784db7 100644
--- a/app/javascript/controllers/chat/send_message_controller.ts
+++ b/app/javascript/controllers/chat/send_message_controller.ts
@@ -11,12 +11,11 @@ export default class extends Controller {
     "messageReaction",
     "linkShare",
   ];
-  element: HTMLElement;
-  private linkShareTarget!: HTMLElement;
-  private messageInputTarget!: HTMLInputElement;
-  private messageSendTarget!: HTMLDivElement;
-  private messageReactionTarget!: HTMLDivElement;
-  private lastMessageFromUserId: string;
+  private declare linkShareTarget: HTMLElement;
+  private declare messageInputTarget: HTMLInputElement;
+  private declare messageSendTarget: HTMLDivElement;
+  private declare messageReactionTarget: HTMLDivElement;
+  private declare lastMessageFromUserId: string;
   private userId: string;
 
   connect(): void {
diff --git a/app/javascript/controllers/crop_image_controller.ts b/app/javascript/controllers/crop_image_controller.ts
index cab251f26..d3fd4880d 100644
--- a/app/javascript/controllers/crop_image_controller.ts
+++ b/app/javascript/controllers/crop_image_controller.ts
@@ -14,7 +14,6 @@ export default class extends Controller {
     "imageMessage",
   ];
 
-  element!: HTMLElement;
   readonly croppieWrapperTarget!: HTMLElement;
   readonly croppieFieldTarget!: HTMLElement;
   readonly imageFieldTarget!: HTMLInputElement;
diff --git a/app/javascript/controllers/notifications_controller.ts b/app/javascript/controllers/notifications_controller.ts
index dcde26eca..eef4b203b 100644
--- a/app/javascript/controllers/notifications_controller.ts
+++ b/app/javascript/controllers/notifications_controller.ts
@@ -3,7 +3,11 @@ import { ShowNotificationEvent } from "util/notifications";
 
 export default class extends Controller {
   static targets = ["message"];
-  element!: HTMLElement;
+
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
+
   readonly messageTarget!: HTMLElement;
 
   private notificationHandler: (event) => void;
@@ -11,11 +15,12 @@ export default class extends Controller {
   connect(): void {
     this.notificationHandler = (event) => {
       this.messageTarget.innerText = event.detail.message;
-      this.element.style.display = "block";
+      console.log("parentElement", this.parentElement);
+      // this.parentElement.style.display = "block";
 
       setTimeout(() => {
         this.messageTarget.innerText = "";
-        this.element.style.display = "none";
+        // this.parentElement.style.display = "none";
       }, 1500);
     };
 
diff --git a/app/javascript/controllers/profile_image_controller.ts b/app/javascript/controllers/profile_image_controller.ts
index cdbe36b16..2cbfa795a 100644
--- a/app/javascript/controllers/profile_image_controller.ts
+++ b/app/javascript/controllers/profile_image_controller.ts
@@ -3,13 +3,16 @@ import { UploadImageEvent } from "./crop_image_controller";
 import EventBus from "event_bus";
 
 export default class extends Controller {
-  element!: HTMLElement;
+  get parentElement(): HTMLElement {
+    return super.element as HTMLElement;
+  }
 
   private profileImageUpdateHandler: (event) => void;
 
   connect(): void {
     this.profileImageUpdateHandler = (payload) => {
-      this.element.outerHTML = payload.html;
+      console.log("parentElement", this.parentElement);
+      this.parentElement.outerHTML = payload.html;
     };
 
     EventBus.subscribe(UploadImageEvent, this.profileImageUpdateHandler);
diff --git a/app/javascript/controllers/video_scheduling_controller.ts b/app/javascript/controllers/video_scheduling_controller.ts
index d987840a0..764b102d5 100644
--- a/app/javascript/controllers/video_scheduling_controller.ts
+++ b/app/javascript/controllers/video_scheduling_controller.ts
@@ -11,13 +11,13 @@ export default class extends Controller {
     "submit",
   ];
 
-  scheduledAtTarget!: HTMLInputElement;
-  checkboxTarget!: HTMLInputElement;
+  declare scheduledAtTarget: HTMLInputElement;
+  declare checkboxTarget: HTMLInputElement;
 
-  submitTarget: HTMLInputElement;
+  declare submitTarget: HTMLInputElement;
 
-  daySelectTarget!: HTMLSelectElement;
-  timeSelectTarget!: HTMLSelectElement;
+  declare daySelectTarget: HTMLSelectElement;
+  declare timeSelectTarget: HTMLSelectElement;
 
   connect(): void {
     this.createDayOptions();
diff --git a/app/javascript/controllers/video_snapshots_controller.ts b/app/javascript/controllers/video_snapshots_controller.ts
index 8176d967a..5d24960eb 100644
--- a/app/javascript/controllers/video_snapshots_controller.ts
+++ b/app/javascript/controllers/video_snapshots_controller.ts
@@ -2,7 +2,9 @@ import { Controller } from "stimulus";
 import { putForm } from "util/fetch";
 
 export default class extends Controller {
-  element!: HTMLFormElement;
+  get parentElement(): HTMLFormElement {
+    return super.element as HTMLFormElement;
+  }
 
   async submitForm(event: MouseEvent | KeyboardEvent): Promise<void> {
     if ("key" in event && event.key != "enter") {
@@ -12,7 +14,7 @@ export default class extends Controller {
     event.preventDefault();
 
     const dataObj = {};
-    const formData = new FormData(this.element);
+    const formData = new FormData(this.parentElement);
     formData.forEach((v, k) => (dataObj[k] = v));
 
     // This differentiates primary from secondary
@@ -20,7 +22,8 @@ export default class extends Controller {
     dataObj["commit"] = commitValue;
 
     try {
-      const response = await putForm(this.element.action, dataObj);
+      console.log("parentElement", this.parentElement);
+      const response = await putForm(this.parentElement.action, dataObj);
 
       if (response.ok) {
         const html = await response.text();
diff --git a/app/javascript/style/components/_video_card.scss b/app/javascript/style/components/_video_card.scss
index dddac1d53..956068a5b 100644
--- a/app/javascript/style/components/_video_card.scss
+++ b/app/javascript/style/components/_video_card.scss
@@ -124,7 +124,7 @@ $min-width: 150px;
     &__placeholder {
       width: $max-width;
       padding-bottom: 63.25%; // use padding-bottom since height: x% will always be 0.
-      background: hsla(0, 0, 0, 0.1);
+      background: hsla(0, 0 * 1%, 0 * 1%, 0.1);
       border-radius: 10px;
     }
   }
diff --git a/babel.config.js b/babel.config.js
index 5b1375347..2848fac9d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,9 +1,9 @@
 module.exports = function (api) {
-  var validEnv = ["development", "test", "production"];
-  var currentEnv = api.env();
-  var isDevelopmentEnv = api.env("development");
-  var isProductionEnv = api.env("production");
-  var isTestEnv = api.env("test");
+  let validEnv = ["development", "test", "production"];
+  let currentEnv = api.env();
+  let isDevelopmentEnv = api.env("development");
+  let isProductionEnv = api.env("production");
+  let isTestEnv = api.env("test");
 
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
@@ -39,6 +39,14 @@ module.exports = function (api) {
     plugins: [
       "babel-plugin-macros",
       "@babel/plugin-syntax-dynamic-import",
+      [
+        "@babel/plugin-transform-typescript",
+        {
+          allExtensions: true,
+          isTSX: true,
+          allowDeclareFields: true,
+        },
+      ],
       isTestEnv && "babel-plugin-dynamic-import-node",
       ["transform-react-jsx", { pragma: "h" }],
       "@babel/plugin-transform-destructuring",
diff --git a/package.json b/package.json
index fb2937d93..a8893d459 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "intl-tel-input": "^17.0.3",
     "jest-fetch-mock": "^3.0.3",
     "mobile-drag-drop": "^2.3.0-rc.2",
+    "mobx": "^6.3.2",
+    "mobx-preact": "^3.0.0",
     "mux-embed": "^3.4.1",
     "node-fetch": "2.6.1",
     "phenix-edge-auth": "hcatlin/EdgeAuth.git#master",
@@ -40,6 +42,7 @@
   "version": "0.1.0",
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
+    "@babel/plugin-transform-typescript": "^7.14.6",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "babel-jest": "^26.5.2",
diff --git a/tsconfig.json b/tsconfig.json
index 0e070cc5a..7bb84a409 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "emitDecoratorMetadata": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": true,
     "lib": ["dom", "ESNext"],
     "module": "es6",
     "moduleResolution": "node",