diff --git a/src/components/music.tsx b/src/components/music.tsx
index c52198b..c283e7e 100644
--- a/src/components/music.tsx
+++ b/src/components/music.tsx
@@ -34,8 +34,12 @@ export function MusicEntry({ spotifylink }: { spotifylink: string }) {
                     "margin-right": "0.5em"
                 }} src={musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.thumbnailUrl} alt="LMAO IMAGINE BEING BLIND" />
                 <div class="innersinglemusic">
-                    <div class="musicartist" > {musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName}</div>
-                    <div class="musictitle"> {musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title} </div>
+                    <div class="musicartist" > {
+                        musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName?.length > 43 ? musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName.substring(0, 30) + "..." : musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName
+                    }</div>
+                    <div class="musictitle"> {
+                        musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title?.length > 43 ? musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title.substring(0, 30) + "..." : musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title
+                    } </div>
                 </div>
             </div>
         )}</>