diff --git a/front/components/Play/PlayViewControlBar.tsx b/front/components/Play/PlayViewControlBar.tsx
index 95e6a71..0d34493 100644
--- a/front/components/Play/PlayViewControlBar.tsx
+++ b/front/components/Play/PlayViewControlBar.tsx
@@ -89,9 +89,11 @@ const PlayViewControlBar = ({
 						<Text color={textColor[800]} fontSize={14} maxW={'100%'} isTruncated>
 							{song.name}
 						</Text>
-						<Text color={textColor[900]} fontSize={12} maxW={'100%'} isTruncated>
-							{song.artistId}
-						</Text>
+						{song.artist && (
+							<Text color={textColor[900]} fontSize={12} maxW={'100%'} isTruncated>
+								{song.artist?.name}
+							</Text>
+						)}
 					</View>
 				</View>
 			</View>
diff --git a/front/components/SearchResult.tsx b/front/components/SearchResult.tsx
index 0c7e679..9cfe8e0 100644
--- a/front/components/SearchResult.tsx
+++ b/front/components/SearchResult.tsx
@@ -29,7 +29,7 @@ const swaToSongCardProps = (song: Song) => ({
 	songId: song.id,
 	name: song.name,
 	artistName: song.artist!.name,
-	cover: song.cover
+	cover: song.cover,
 });
 
 const HomeSearchComponent = () => {
@@ -83,7 +83,7 @@ type SongsSearchComponentProps = {
 const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 	const navigation = useNavigation();
 	const { songData } = React.useContext(SearchContext);
-	const favoritesQuery = useQuery(API.getLikedSongs());
+	const favoritesQuery = useQuery(API.getLikedSongs(['artist']));
 
 	const handleFavoriteButton = async (state: boolean, songId: number): Promise<void> => {
 		if (state == false) await API.removeLikedSong(songId);
diff --git a/front/components/SongRow.tsx b/front/components/SongRow.tsx
index 3454ba0..03b46cd 100644
--- a/front/components/SongRow.tsx
+++ b/front/components/SongRow.tsx
@@ -54,7 +54,7 @@ const SongRow = ({ song, onPress, handleLike, isLiked }: SongRowProps) => {
 						}}
 						fontSize={'sm'}
 					>
-						{song.artistId ?? 'artist'}
+						{song.artist?.name ?? ''}
 					</Text>
 					{/* <DurationInfo length={song.details.length} /> */}
 					<DurationComponent length={song.details.length} />
diff --git a/front/views/ArtistDetailsView.tsx b/front/views/ArtistDetailsView.tsx
index d4b47df..72e83ff 100644
--- a/front/views/ArtistDetailsView.tsx
+++ b/front/views/ArtistDetailsView.tsx
@@ -49,7 +49,7 @@ const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) =>
 						{songsQuery.data.map((comp: Song, index: Key | null | undefined) => (
 							<SongRow
 								key={index}
-								song={comp}
+								song={{ ...comp, artist: artistQuery.data }}
 								isLiked={
 									!favoritesQuery.data?.find((query) => query?.songId == comp.id)
 								}
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 5350d02..07bc20a 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -74,7 +74,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
-	const song = useQuery(API.getSong(songId), { staleTime: Infinity });
+	const song = useQuery(API.getSong(songId, ['artist']), { staleTime: Infinity });
 	const toast = useToast();
 	const [lastScoreMessage, setLastScoreMessage] = useState<ScoreMessage>();
 	const webSocket = useRef<WebSocket>();