diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index 1846be57..5e64f56a 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -52,7 +52,7 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
         } = {}
     } = play;
 
-    let scrobbleSummary: JSX.Element,
+    let scrobbleSummary: React.JSX.Element,
         scrobbleIconProps: Record<string, any> = {
             color: 'green.focusRing'
         };
diff --git a/src/client/components/CodeBlock.tsx b/src/client/components/CodeBlock.tsx
index 59b770f9..433207ce 100644
--- a/src/client/components/CodeBlock.tsx
+++ b/src/client/components/CodeBlock.tsx
@@ -126,7 +126,7 @@ export const ChakraPlainBlock = (props: ChakraPlainBlockProps) => {
     return safeStringify(code);
   }, [code]);
 
-  let header: JSX.Element | null;
+  let header: React.JSX.Element | null;
   if(props.title === undefined && maxLines === undefined) {
     header = null;
   } else {
diff --git a/src/client/components/MSCollapsible.tsx b/src/client/components/MSCollapsible.tsx
index bbcb7c74..4a10870a 100644
--- a/src/client/components/MSCollapsible.tsx
+++ b/src/client/components/MSCollapsible.tsx
@@ -6,7 +6,7 @@ import { LuChevronRight } from "react-icons/lu"
 //padding="0" borderWidth="0px"
 
 interface MSCollapsibleInternalProps {
-    indicator?: string | JSX.Element
+    indicator?: string | React.JSX.Element
     boxProps?: object
     triggerProps?: object
     indicatorProps?: object
diff --git a/src/client/components/PlayData.tsx b/src/client/components/PlayData.tsx
index 2c443271..d764aa91 100644
--- a/src/client/components/PlayData.tsx
+++ b/src/client/components/PlayData.tsx
@@ -49,7 +49,7 @@ export const PlayData = (props?: PlayInfoProps) => {
 
     const [codeMode, setCodeMode] = useState(false);
 
-    let code: JSX.Element | null = null;
+    let code: React.JSX.Element | null = null;
 
     const comparable = showCompare && final !== undefined;
 
@@ -95,7 +95,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
     } = props;
 
 
-    let albumArtistElm: JSX.Element;
+    let albumArtistElm: React.JSX.Element;
 
     if (play.data.albumArtists !== undefined && play.data.albumArtists.length > 0) {
         albumArtistElm = (
@@ -133,7 +133,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
         } = {}
     } = play;
 
-    let titleElm: JSX.Element;
+    let titleElm: React.JSX.Element;
     if(webUrl !== undefined || originUrl !== undefined) {
         titleElm = <Link variant="underline" target="_blank" href={webUrl ?? originUrl}>{track}</Link>
     } else {
@@ -154,7 +154,7 @@ export const PlayDataDataList = (props: { play: JsonPlayObject, dates: DisplayDa
                             <HStack>{play.data.artists.map((x, index) => {
                                 return (
                                     <Tag.Root key={index}>
-                                        <Tag.Label>{x}</Tag.Label>
+                                        <Tag.Label>{x.name}</Tag.Label>
                                     </Tag.Root>
                                 );
                             })}</HStack>}
@@ -210,7 +210,7 @@ export const PlayDatesStack = (props: { play: JsonPlayObject, dates: DisplayDate
         dates
     } = props;
 
-    let datesItem: JSX.Element | null;
+    let datesItem: React.JSX.Element | null;
     if (dates === false) {
         datesItem = null;
     } else {
@@ -246,11 +246,11 @@ export const PlayDatesFooter = (props: { play: JsonPlayObject, dates: DisplayDat
         dates
     } = props;
 
-    let dateElm: JSX.Element;
+    let dateElm: React.JSX.Element;
 
     if (dates !== false) {
-        let playDate: JSX.Element,
-            seenDate: JSX.Element;
+        let playDate: React.JSX.Element,
+            seenDate: React.JSX.Element;
         if (play.data.playDate !== undefined && ['all', 'played'].includes(dates)) {
             playDate = <Text textStyle="xs" color="fg.muted">{`Played ${shortTodayAwareFormat(dayjs(play.data.playDate))}`}</Text>
         }
diff --git a/src/client/components/ScrobbleActionResult.tsx b/src/client/components/ScrobbleActionResult.tsx
index 4e342ea1..b1b0a59c 100644
--- a/src/client/components/ScrobbleActionResult.tsx
+++ b/src/client/components/ScrobbleActionResult.tsx
@@ -33,9 +33,9 @@ export const ScrobbleActionResult = (props: ScrobbleActionResultProps) => {
         collapsibleOpen
     } = props;
 
-    let responseSuffix: JSX.Element,
-        warningsElm: JSX.Element,
-        errorElm: JSX.Element | null;
+    let responseSuffix: React.JSX.Element,
+        warningsElm: React.JSX.Element,
+        errorElm: React.JSX.Element | null;
 
     if (warnings.length > 0) {
         warningsElm = <Span color="orange.solid">warnings</Span>
diff --git a/src/client/components/TransformSteps.tsx b/src/client/components/TransformSteps.tsx
index 86996140..fe244fe3 100644
--- a/src/client/components/TransformSteps.tsx
+++ b/src/client/components/TransformSteps.tsx
@@ -18,12 +18,12 @@ export interface LifeycleStepsTimelineProps extends MSCollapsibleExternalProps {
     original: JsonPlayObject
 }
 
-const diffElements = (original: JsonPlayObject, steps: LifecycleStep[]): [JSX.Element[], JsonPlayObject?] => {
+const diffElements = (original: JsonPlayObject, steps: LifecycleStep[]): [React.JSX.Element[], JsonPlayObject?] => {
 
     let currentPlay: JsonPlayObject = structuredClone(original); // JSON.parse(JSON.stringify(original));
     let patchFailed = false;
 
-    const diffElements: JSX.Element[] | null = [];
+    const diffElements: React.JSX.Element[] | null = [];
     let index = 0;
 
     for (const step of steps) {
@@ -100,9 +100,9 @@ export const TransformSteps = (props: LifeycleStepsTimelineProps) => {
                     name
                 } = x;
 
-                let timelineIcon: JSX.Element,
+                let timelineIcon: React.JSX.Element,
                 iconProps: Record<string, any>,
-                summary: JSX.Element,
+                summary: React.JSX.Element,
                 alertStatus: "error" | "info" | "warning" | "success" | "neutral";
                 if(error === undefined) {
                     timelineIcon = <BsStoplights/>;