diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 7d621f2c2..eab7206d1 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -10,18 +10,19 @@ import {
 import { produce, Draft } from "immer";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { FrigateConfig } from "@/types/frigateConfig";
+import { FrigateEvent } from "@/types/ws";
 
 type ReducerState = {
   [topic: string]: {
     lastUpdate: number;
-    payload: string;
+    payload: any;
     retain: boolean;
   };
 };
 
 type ReducerAction = {
   topic: string;
-  payload: string;
+  payload: any;
   retain: boolean;
 };
 
@@ -132,7 +133,7 @@ export function useWs(watchTopic: string, publishTopic: string) {
   const value = state[watchTopic] || { payload: null };
 
   const send = useCallback(
-    (payload: string, retain = false) => {
+    (payload: any, retain = false) => {
       if (readyState === ReadyState.OPEN) {
         sendJsonMessage({
           topic: publishTopic || watchTopic,
@@ -147,7 +148,10 @@ export function useWs(watchTopic: string, publishTopic: string) {
   return { value, send };
 }
 
-export function useDetectState(camera: string) {
+export function useDetectState(camera: string): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -155,7 +159,10 @@ export function useDetectState(camera: string) {
   return { payload, send };
 }
 
-export function useRecordingsState(camera: string) {
+export function useRecordingsState(camera: string): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -163,7 +170,10 @@ export function useRecordingsState(camera: string) {
   return { payload, send };
 }
 
-export function useSnapshotsState(camera: string) {
+export function useSnapshotsState(camera: string): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -171,7 +181,10 @@ export function useSnapshotsState(camera: string) {
   return { payload, send };
 }
 
-export function useAudioState(camera: string) {
+export function useAudioState(camera: string): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -179,7 +192,10 @@ export function useAudioState(camera: string) {
   return { payload, send };
 }
 
-export function usePtzCommand(camera: string) {
+export function usePtzCommand(camera: string): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -187,7 +203,10 @@ export function usePtzCommand(camera: string) {
   return { payload, send };
 }
 
-export function useRestart() {
+export function useRestart(): {
+  payload: string;
+  send: (payload: string, retain?: boolean) => void;
+} {
   const {
     value: { payload },
     send,
@@ -195,21 +214,21 @@ export function useRestart() {
   return { payload, send };
 }
 
-export function useFrigateEvents() {
+export function useFrigateEvents(): { payload: FrigateEvent } {
   const {
     value: { payload },
   } = useWs(`events`, "");
   return { payload };
 }
 
-export function useMotionActivity(camera: string) {
+export function useMotionActivity(camera: string): { payload: string } {
   const {
     value: { payload },
   } = useWs(`${camera}/motion`, "");
   return { payload };
 }
 
-export function useAudioActivity(camera: string) {
+export function useAudioActivity(camera: string): { payload: string } {
   const {
     value: { payload },
   } = useWs(`${camera}/audio/rms`, "");
diff --git a/web/src/components/camera/DynamicCameraImage.tsx b/web/src/components/camera/DynamicCameraImage.tsx
index 9cb441f7d..57927c141 100644
--- a/web/src/components/camera/DynamicCameraImage.tsx
+++ b/web/src/components/camera/DynamicCameraImage.tsx
@@ -32,14 +32,12 @@ export default function DynamicCameraImage({
       return;
     }
 
-    const frigateEvent = event as unknown as FrigateEvent;
-
-    if (frigateEvent.after.camera != camera.name) {
+    if (event.after.camera != camera.name) {
       return;
     }
 
-    if (frigateEvent.type == "end") {
-      const eventIndex = activeObjects.indexOf(frigateEvent.after.id);
+    if (event.type == "end") {
+      const eventIndex = activeObjects.indexOf(event.after.id);
 
       if (eventIndex != -1) {
         const newActiveObjects = [...activeObjects];
@@ -47,11 +45,11 @@ export default function DynamicCameraImage({
         setActiveObjects(newActiveObjects);
       }
     } else {
-      if (!frigateEvent.after.stationary) {
-        const eventIndex = activeObjects.indexOf(frigateEvent.after.id);
+      if (!event.after.stationary) {
+        const eventIndex = activeObjects.indexOf(event.after.id);
 
         if (eventIndex == -1) {
-          const newActiveObjects = [...activeObjects, frigateEvent.after.id];
+          const newActiveObjects = [...activeObjects, event.after.id];
           setActiveObjects(newActiveObjects);
           setKey(Date.now());
         }
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index c8c9a4942..12abc3264 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -10,8 +10,6 @@ import useSWR from "swr";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import Heading from "@/components/ui/heading";
 import { Card } from "@/components/ui/card";
-import CameraImage from "@/components/camera/CameraImage";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { AiOutlinePicture } from "react-icons/ai";
 import { FaWalking } from "react-icons/fa";