diff --git a/client/src/state.ts b/client/src/state.ts
index 1995cc5..15c74a8 100644
--- a/client/src/state.ts
+++ b/client/src/state.ts
@@ -38,8 +38,11 @@ export const state = reactive({
             })
             this.tracks = tracks
         })
+        source.addEventListener('TrackAdded', ({ data }) => {
+            const track: Track = JSON.parse(data)
+            this.tracks = [track, ...this.tracks]
+        })
         source.addEventListener('TickDropped', event => {
-            console.log(event)
             const tick: Tick = JSON.parse(event.data)
             const tracks = this.tracks.map(track => {
                 if (track.id === tick.track_id) {
@@ -49,6 +52,14 @@ export const state = reactive({
             })
             this.tracks = tracks
         })
+        source.addEventListener('TrackDropped', ({ data }) => {
+            const track: Track = JSON.parse(data)
+            this.tracks = this.tracks.filter($track => $track.id !== track.id)
+        })
+        source.addEventListener('TrackChanged', ({ data }) => {
+            const track: Track = JSON.parse(data)
+            this.tracks = this.tracks.map($track => $track.id === track.id ? track : $track)
+        })
         source.addEventListener('Lagged', event => {
             console.log(event)
             // Refresh the page, refetching the list of tracks and ticks