diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index d92f337b..40736846 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -394,6 +394,22 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
         {id: 'new', dt: dayjs(seenAt)},
     ];
 
+        // group transforms by hook
+    const transformGroups: Record<string, LifecycleStep[]> = steps.length === 0  ? {} : steps.reduce((acc, curr) => {
+        if(acc[curr.hook] === undefined) {
+            acc[curr.hook] = [];
+        }
+        return {...acc, [curr.hook]: [...acc[curr.hook], curr]};
+    }, {});
+
+    let lastTransformedPlay = original;
+    for(const [_,v] of Object.entries(transformGroups)) {
+        const d: TransformStepsTimelineData = {id: 'transform-steps', dt: dayjs(v[0].createdAt), steps: v, original: lastTransformedPlay};
+        const [__, finalPlay] = diffElements(lastTransformedPlay, v);
+        lastTransformedPlay = finalPlay;
+        timelineItems.push(d);
+    }
+
     const ingressQueue = queueStates.find(x => x.queueName === CLIENT_INGRESS_QUEUE);
     if(ingressQueue !== undefined) {
         timelineItems.push({id: 'queue-ingress-created', dt: dayjs(ingressQueue.createdAt)});
@@ -408,28 +424,17 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
     if(match !== undefined) {
         timelineItems.push({id: 'scrobble-match', dt: dayjs(match.createdAt)});
     }
-    if(payload !== undefined) {
-        timelineItems.push({id: 'scrobble-response', dt: dayjs(scrobbleResultCreatedAt ?? match.createdAt)})
-    }
 
-    // group transforms by hook
-    const transformGroups: Record<string, LifecycleStep[]> = steps.length === 0  ? {} : steps.reduce((acc, curr) => {
-        if(acc[curr.hook] === undefined) {
-            acc[curr.hook] = [];
-        }
-        return {...acc, [curr.hook]: [...acc[curr.hook], curr]};
-    }, {});
+    // since scrobbleResultCreatedAt has just been implemented older play data will not have it
+    // and if match was never run, due to error earlier in lifecycle, we need to fallback to oldest event + 1s
+    timelineItems.sort((a, b) => sortByNewestDate(b.dt, a.dt));
 
-    let lastTransformedPlay = original;
-    for(const [_,v] of Object.entries(transformGroups)) {
-        const d: TransformStepsTimelineData = {id: 'transform-steps', dt: dayjs(v[0].createdAt), steps: v, original: lastTransformedPlay};
-        const [__, finalPlay] = diffElements(lastTransformedPlay, v);
-        lastTransformedPlay = finalPlay;
-        timelineItems.push(d);
+    if(payload !== undefined) {
+        timelineItems.push({id: 'scrobble-response', dt: dayjs(scrobbleResultCreatedAt ?? match?.createdAt ?? timelineItems[timelineItems.length - 1].dt.add(5, 's'))});
+        // then, make sure added payload is in the right order
+        timelineItems.sort((a, b) => sortByNewestDate(b.dt, a.dt));
     }
 
-    timelineItems.sort((a, b) => sortByNewestDate(b.dt, a.dt));
-
     const timelineElements: React.JSX.Element[] = timelineItems.map((x) => {
         const timelineKey = `${x.id}-${x.dt.unix()}`;
         switch(x.id) {