diff --git a/src/library/components/messageHandler.ts b/src/library/components/messageHandler.ts
index 4323a6d..6f26144 100644
--- a/src/library/components/messageHandler.ts
+++ b/src/library/components/messageHandler.ts
@@ -34,6 +34,50 @@ export class MonitorDisconnectedMessageHandler extends MessageHandler<"Monitor D
 	}
 }
 
+export class TransportControlPauseMessageHandler extends MessageHandler<"Transport Control Pause"> {
+	constructor(args: { client: BridgeClient }) {
+		super({ bridgeEventName: "Transport Control Pause", client: args.client })
+	}
+
+	handle(message: BridgeEventMap["Transport Control Pause"]): void {
+		this.client.log("%c Transport Control Pause ", "color: aqua; font-weight: bold; border: solid;", message)
+	}
+}
+
+export class TransportControlPlayMessageHandler extends MessageHandler<"Transport Control Play"> {
+	constructor(args: { client: BridgeClient }) {
+		super({ bridgeEventName: "Transport Control Play", client: args.client })
+	}
+
+	handle(message: BridgeEventMap["Transport Control Play"]): void {
+		this.client.log("%c Transport Control Play ", "color: aqua; font-weight: bold; border: solid;", message)
+	}
+}
+
+export class TransportControlNextMessageHandler extends MessageHandler<"Transport Control Next"> {
+	constructor(args: { client: BridgeClient }) {
+		super({ bridgeEventName: "Transport Control Next", client: args.client })
+	}
+
+	handle(message: BridgeEventMap["Transport Control Next"]): void {
+		this.client.log("%c Transport Control Next ", "color: aqua; font-weight: bold; border: solid;", message)
+	}
+}
+
+export class TransportControlPreviousMessageHandler extends MessageHandler<"Transport Control Previous"> {
+	constructor(args: { client: BridgeClient }) {
+		super({ bridgeEventName: "Transport Control Previous", client: args.client })
+	}
+
+	handle(message: BridgeEventMap["Transport Control Previous"]): void {
+		this.client.log(
+			"%c Transport Control Previous ",
+			"color: aqua; font-weight: bold; border: solid;",
+			message
+		)
+	}
+}
+
 export class ProgressStartMessageHandler extends MessageHandler<"Progress Start"> {
 	constructor(args: { client: BridgeClient }) {
 		super({ bridgeEventName: "Progress Start", client: args.client })
@@ -60,7 +104,12 @@ export class ProgressUpdateMessageHandler extends MessageHandler<"Progress Updat
 	}
 
 	handle(message: BridgeEventMap["Progress Update"]): void {
-		this.client.log(message)
+		this.client.log(
+			"%c Progress Update ",
+			"color: aqua; font-weight: bold; border: solid;",
+			message.payload.value.progress_type,
+			message.payload.value.progress.value
+		)
 	}
 }
 
diff --git a/src/library/schemas/schema.events.ts b/src/library/schemas/schema.events.ts
index 85e2ef8..104493f 100644
--- a/src/library/schemas/schema.events.ts
+++ b/src/library/schemas/schema.events.ts
@@ -14,6 +14,9 @@ export const BridgeEvent = z.union([
 	z.literal("Sync/Play Playlist Complete"),
 	z.literal("Sync/Play Playlist Cancelled"),
 	z.literal("Transport Control Pause"),
+	z.literal("Transport Control Play"),
+	z.literal("Transport Control Next"),
+	z.literal("Transport Control Previous"),
 	// z.literal("All Events"),
 ])
 
@@ -162,7 +165,7 @@ const deletePlaylist = z.object({
 	}),
 })
 
-const transportControlPause = z.object({
+const transportControlEvent = z.object({
 	event: z.object({
 		name: schema.name,
 		type: schema.wstring,
@@ -223,7 +226,7 @@ export const progressUpdateResponse = PayloadResponse(progressUpdate)
 export const insertPlaylistResponse = PayloadResponse(insertPlaylist)
 export const instancePlaylistResponse = PayloadResponse(playlistInstance)
 export const deletePlaylistResponse = PayloadResponse(deletePlaylist)
-export const transportControlPauseResponse = PayloadResponse(transportControlPause)
+export const transportControlResponse = PayloadResponse(transportControlEvent)
 export const newItemPlayingResponse = PayloadResponse(NewItemPlaying)
 
 // export const all_events = z.union([monitorConnectResponse, progressUpdateResponse])
@@ -240,7 +243,10 @@ export type BridgeEventMap = {
 	"Sync/Play Playlist": z.infer<typeof progressUpdateResponse>
 	"Sync/Play Playlist Complete": z.infer<typeof progressUpdateResponse>
 	"Sync/Play Playlist Cancelled": z.infer<typeof progressUpdateResponse>
-	"Transport Control Pause": z.infer<typeof transportControlPauseResponse>
+	"Transport Control Pause": z.infer<typeof transportControlResponse>
+	"Transport Control Play": z.infer<typeof transportControlResponse>
+	"Transport Control Next": z.infer<typeof transportControlResponse>
+	"Transport Control Previous": z.infer<typeof transportControlResponse>
 	"New Item Playing": z.infer<typeof newItemPlayingResponse>
 	// "All Events": all_events,
 	/**CUSTOM CLIENT EVENTS BELOW THESE ARE NOT PART OF BRIDGE */
diff --git a/src/react-app/App.tsx b/src/react-app/App.tsx
index fb6971a..1e7157d 100644
--- a/src/react-app/App.tsx
+++ b/src/react-app/App.tsx
@@ -8,6 +8,10 @@ import {
 	PlaylistInstanceMessageHandler,
 	hologramTypes,
 	Playlist,
+	TransportControlPauseMessageHandler,
+	TransportControlPlayMessageHandler,
+	TransportControlNextMessageHandler,
+	TransportControlPreviousMessageHandler,
 } from "@library/index"
 import HologramForm from "./components/HologramForm"
 import { PlaylistUI } from "./components/Playlist"
@@ -441,6 +445,10 @@ function App() {
 					new PlaylistInsertMessageHandler({ client: Bridge })
 					new PlaylistInstanceMessageHandler({ client: Bridge })
 					new PlaylistDeleteMessageHandler({ client: Bridge })
+					new TransportControlPauseMessageHandler({ client: Bridge })
+					new TransportControlPlayMessageHandler({ client: Bridge })
+					new TransportControlNextMessageHandler({ client: Bridge })
+					new TransportControlPreviousMessageHandler({ client: Bridge })
 					setEventStatus("Listening to Events")
 				}}
 				disabled={!connected}>