diff --git a/apps/studio/src/pages/home/library/SongList.tsx b/apps/studio/src/pages/home/library/SongList.tsx
index 8aac329d..3417583a 100644
--- a/apps/studio/src/pages/home/library/SongList.tsx
+++ b/apps/studio/src/pages/home/library/SongList.tsx
@@ -279,10 +279,10 @@ export default function SongList({ totalCountOfSongs, query }: SongListProps) {
       return song.id === playerState.currentPlayingSongId;
     });
 
-    if (!isSongFound) {
+    if (!isSongFound && !isLoading) {
       stopSong();
     }
-  }, [playerState.currentPlayingSongId, songData, stopSong]);
+  }, [playerState.currentPlayingSongId, songData, stopSong, isLoading]);
 
   // sets the # of rows per page depending on viewport height
   useEffect(() => {
diff --git a/packages/elements/src/lib/TextInput.tsx b/packages/elements/src/lib/TextInput.tsx
index ccf754b5..33b39797 100644
--- a/packages/elements/src/lib/TextInput.tsx
+++ b/packages/elements/src/lib/TextInput.tsx
@@ -165,7 +165,10 @@ export const TextInput: ForwardRefRenderFunction<
           fontWeight={ 500 }
         >
           <>
-            <Typography sx={ { fontWeight: 500, textTransform: "uppercase" } }>
+            <Typography
+              component="span"
+              sx={ { fontWeight: 500, textTransform: "uppercase" } }
+            >
               { label }
             </Typography>
 
diff --git a/packages/elements/src/lib/form/CopyrightInputField.tsx b/packages/elements/src/lib/form/CopyrightInputField.tsx
index bcbbb90b..9e5f4e00 100644
--- a/packages/elements/src/lib/form/CopyrightInputField.tsx
+++ b/packages/elements/src/lib/form/CopyrightInputField.tsx
@@ -50,6 +50,7 @@ const CopyrightInputField: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     <Stack direction="column" ref={ ref } spacing={ 1 }>
       <Stack direction="row" justifyContent="space-between">
         <Typography
+          component="div"
           sx={ {
             color: theme.colors.grey100,
             fontWeight: 500,
@@ -58,7 +59,7 @@ const CopyrightInputField: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           } }
         >
           <Stack direction="row" spacing="4px">
-            <Box>{ label }</Box>
+            <Box component="label">{ label }</Box>
 
             { !!tooltipText && (
               <Tooltip title={ tooltipText }>
diff --git a/packages/elements/src/lib/form/FormProgressStepper.tsx b/packages/elements/src/lib/form/FormProgressStepper.tsx
index c26b5c70..4becbb94 100644
--- a/packages/elements/src/lib/form/FormProgressStepper.tsx
+++ b/packages/elements/src/lib/form/FormProgressStepper.tsx
@@ -3,8 +3,8 @@ import { Box, Typography, styled } from "@mui/material";
 import theme from "@newm-web/theme";
 
 interface StepBoxProps {
-  readonly boxColor: string;
-  readonly boxTitle: string;
+  readonly boxcolor: string;
+  readonly boxtitle: string;
 }
 
 interface FormStepperGridProps {
@@ -27,9 +27,9 @@ const statusColor = (activeStep: number, currentIndex: number) => {
 
 const StepBox = styled(Box)<StepBoxProps>`
   flex-grow: 1;
-  color: ${(props) => props.boxColor};
+  color: ${(props) => props.boxcolor};
   background-color: ${theme.colors.grey700};
-  border-bottom: 3px solid ${(props) => props.boxColor};
+  border-bottom: 3px solid ${(props) => props.boxcolor};
   min-height: 60px;
   min-width: 232px;
   display: flex;
@@ -78,8 +78,8 @@ const FormProgressStepper = ({
 
         return (
           <StepBox
-            boxColor={ stepColor }
-            boxTitle={ stepTitle }
+            boxcolor={ stepColor }
+            boxtitle={ stepTitle }
             justifyContent={ ["center", "center", "flex-start"] }
             key={ index }
           >