diff --git a/frontend/src/components/NowPlaying.tsx b/frontend/src/components/NowPlaying.tsx
index a635664..40a92b1 100644
--- a/frontend/src/components/NowPlaying.tsx
+++ b/frontend/src/components/NowPlaying.tsx
@@ -63,12 +63,12 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
       <div className="text-lg font-bold truncate">Screen Sharing</div>
     </div>
   ) : (
-    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100', "flex flex-row items-center justify-between w-full")}>
-        <div>
+    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100', "flex flex-row items-center justify-between gap-2 w-full")}>
+        <div className="truncate">
             <div className="text-lg font-bold truncate">{props.songName}</div>
             <div className="text-sm truncate">{props.fileName}</div>
         </div>
-        <div className="text-sm opacity-50">
+        <div className="text-sm opacity-50 shrink-0">
             {props.timePosition && props.duration ? 
               (props.seekable ? `${formatTime(props.timePosition)} / ${formatTime(props.duration)}`
                               : `${formatTime(props.timePosition)}` )