diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index c67ab129..ff17bf05 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -51,7 +51,7 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
     const [scrobbleCollapsibleOpen, setScrobbleCollapsibleOpen] = useState(false);
 
     return (
-        <Timeline.Root size="lg" variant="subtle" maxW="lg">
+        <Timeline.Root size="lg" variant="subtle">
             <Timeline.Item>
                 <Timeline.Connector>
                     <Timeline.Separator />
diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index 26cde6aa..6346a4aa 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -61,14 +61,14 @@ export const PlayData = (props?: PlayInfoProps) => {
 
     if (!comparable) {
         return (<Box position="relative">
-            <Float placement="top-end" offset="3" hideBelow="sm" zIndex={100}>{code}</Float>
+            <Float placement="top-end" offsetX="3" hideBelow="sm" zIndex={100}>{code}</Float>
             {codeMode ? <ChakraCodeBlock code={play} /> : <PlayDataDataList play={play} dates={dates} />}
         </Box>);
     }
 
     return (
         <Box position="relative">
-            <Float placement="top-end" offset="3" hideBelow="sm" zIndex={100}>{code}</Float>
+            <Float placement="top-end" offsetX="3" offsetY="2" hideBelow="sm" zIndex={100}>{code}</Float>
             <Tabs.Root  defaultValue={compareDefault}>
                 <Tabs.List>
                     <Tabs.Trigger value="Initial">Initial</Tabs.Trigger>
@@ -119,8 +119,8 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
     } = play;
 
     return (
-        <Flex gap="2" wrap="wrap">
-            <Box marginEnd="auto">
+        <Flex gap="4" wrap="wrap">
+            <Box>
                 <DataList.Root>
                     <DataList.Item>
                         <DataList.ItemLabel flexShrink="1">Title</DataList.ItemLabel>
diff --git a/src/client/components/ScrobbleMatchResult.tsx b/src/client/components/ScrobbleMatchResult.tsx
index 020af338..fb403255 100644
--- a/src/client/components/ScrobbleMatchResult.tsx
+++ b/src/client/components/ScrobbleMatchResult.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, Fragment } from "react"
-import { Timeline, Icon, Span, Stack, Heading, Tabs, DataList } from '@chakra-ui/react';
+import { Timeline, Icon, Span, Stack, Heading, Tabs, DataList, List } from '@chakra-ui/react';
 import { JsonPlayObject, LifecycleStep, PlayMatchResult } from "../../core/Atomic";
 import { PlayData } from "./PlayData";
 import { ErrorAlert } from "./ErrorAlert";
@@ -47,7 +47,22 @@ export const ScrobbleMatchResult = (props: ScrobbleMatchResultProps) => {
                     </DataList.Item>
                     <DataList.Item>
                         <DataList.ItemLabel flexShrink="1">Breakdown</DataList.ItemLabel>
-                        <DataList.ItemValue><ChakraPlainBlock code={match.breakdowns} /></DataList.ItemValue>
+                        <DataList.ItemValue>
+                            <List.Root>
+                                {match.breakdowns.map((x) => {
+                                    if (x.includes('Time Detail')) {
+                                        const sub = x.substring(15).split('|');
+                                        return (
+                                            <List.Root ps="5">
+                                                {sub.map((y) => <List.Item>{y}</List.Item>)}
+                                            </List.Root>
+
+                                        )
+                                    }
+                                    return <List.Item>{x}</List.Item>
+                                })}
+                            </List.Root>
+                        </DataList.ItemValue>
                     </DataList.Item>
                 </DataList.Root>
             </Tabs.Content>
diff --git a/src/client/components/TransformSteps.tsx b/src/client/components/TransformSteps.tsx
index 714d95c3..a663083b 100644
--- a/src/client/components/TransformSteps.tsx
+++ b/src/client/components/TransformSteps.tsx
@@ -25,7 +25,7 @@ export const TransformSteps = (props: LifeycleStepsTimelineProps) => {
     let currentPlay: JsonPlayObject | false = JSON.parse(JSON.stringify(original));
 
     return (
-        <Timeline.Root size="lg" variant="subtle" maxW="lg" css={{ "--timeline-separator-display": 'block' }}>
+        <Timeline.Root size="lg" variant="subtle" css={{ "--timeline-separator-display": 'block' }}>
             {steps.map((x, index) => {
                 let err: Error;
                 const left = JSON.parse(JSON.stringify(currentPlay));