diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 536dce127..5a5e3f57e 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -37,10 +37,20 @@ const useStyle = makeStyles(
       },
     },
     qualityInfo: {
-      marginTop: '-2px',
+      marginTop: '-4px',
+      opacity: 0,
+      transition: 'all 500ms ease-out',
+    },
+    audioName: {
+      '&:hover + $qualityInfo': {
+        opacity: 1,
+      },
     },
     player: {
       display: (props) => (props.visible ? 'block' : 'none'),
+    },
+    artistAlbum: {
+      marginTop: '2px',
       '& .play-mode-title': {
         'pointer-events': 'none',
       },
@@ -65,7 +75,7 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
       <span className={`${className} songTitle`}>
-        {audioInfo.name}
+        <span className={classes.audioName}>{audioInfo.name}</span>
         {isDesktop && (
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
@@ -73,9 +83,11 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
       {!isMobile && (
         <>
           <br />
-          <span className={`${className} songInfo`}>
-            {`${audioInfo.singer} - ${audioInfo.album}`}
-          </span>
+          <div className={classes.artistAlbum}>
+            <span className={`${className} songInfo`}>
+              {`${audioInfo.singer} - ${audioInfo.album}`}
+            </span>
+          </div>
         </>
       )}
     </Link>
diff --git a/ui/src/playlist/PlaylistList.js b/ui/src/playlist/PlaylistList.js
index 56d0e5d98..1baf9015f 100644
--- a/ui/src/playlist/PlaylistList.js
+++ b/ui/src/playlist/PlaylistList.js
@@ -71,7 +71,6 @@ const PlaylistList = ({ permissions, ...props }) => (
       <Writable>
         <EditButton />
       </Writable>
-      />
     </Datagrid>
   </List>
 )