diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js
index 8b4c2e75a..d0ad6a80c 100644
--- a/ui/src/album/AlbumDetails.js
+++ b/ui/src/album/AlbumDetails.js
@@ -38,7 +38,11 @@ const AlbumDetails = ({ classes, record }) => {
         className={classes.albumCover}
         onClick={handleOpenLightbox}
       >
-        <PlayButton record={record} className={classes.playButton} size={"large"} />
+        <PlayButton
+          record={record}
+          className={classes.playButton}
+          size={'large'}
+        />
       </CardMedia>
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
diff --git a/ui/src/album/AlbumGridView.js b/ui/src/album/AlbumGridView.js
index 618ef27fc..3d25bf5e9 100644
--- a/ui/src/album/AlbumGridView.js
+++ b/ui/src/album/AlbumGridView.js
@@ -18,8 +18,8 @@ const useStyles = makeStyles((theme) => ({
     margin: '20px',
   },
   tileBar: {
-    transition:'all 150ms ease-out',
-    opacity:0,
+    transition: 'all 150ms ease-out',
+    opacity: 0,
     textAlign: 'left',
     marginBottom: '3px',
     background:
@@ -42,31 +42,31 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.primary.light,
   },
   albumArtist: {
-    fontSize:'12px',
-    color:'#c5c5c5',
-    overflow:'hidden',
-    whiteSpace:'nowrap',
-    textOverflow: 'ellipsis'
+    fontSize: '12px',
+    color: '#c5c5c5',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
   },
   albumName: {
-    fontSize:'14px',
-    color:'#eee',
-    overflow:'hidden',
-    whiteSpace:'nowrap',
-    textOverflow: 'ellipsis'
+    fontSize: '14px',
+    color: '#eee',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
   },
   link: {
-    position:'relative',
+    position: 'relative',
     display: 'block',
-    textDecoration:'none',
-    "&:hover $tileBar": {
-      opacity:1,
-    }
+    textDecoration: 'none',
+    '&:hover $tileBar': {
+      opacity: 1,
+    },
   },
   albumLlink: {
-    position:'relative',
+    position: 'relative',
     display: 'block',
-    textDecoration:'none',
+    textDecoration: 'none',
   },
 }))
 
@@ -111,17 +111,27 @@ const AlbumGridTile = ({ showArtist, record, basePath }) => {
 
   return (
     <div>
-      <Link className={classes.link} to={linkToRecord(basePath, record.id, 'show')}>
+      <Link
+        className={classes.link}
+        to={linkToRecord(basePath, record.id, 'show')}
+      >
         <Cover album={record} />
-          <GridListTileBar
-            className={isDesktop ? classes.tileBar : classes.tileBarMobile}
-            subtitle={
-              <PlayButton record={record} className={classes.playButton} size="small" />
-            }
-            actionIcon={<AlbumContextMenu record={record} color={'white'} />}
-          />
+        <GridListTileBar
+          className={isDesktop ? classes.tileBar : classes.tileBarMobile}
+          subtitle={
+            <PlayButton
+              record={record}
+              className={classes.playButton}
+              size="small"
+            />
+          }
+          actionIcon={<AlbumContextMenu record={record} color={'white'} />}
+        />
       </Link>
-      <Link className={classes.albumLlink} to={linkToRecord(basePath, record.id, 'show')}>
+      <Link
+        className={classes.albumLlink}
+        to={linkToRecord(basePath, record.id, 'show')}
+      >
         <div className={classes.albumName}>{record.name}</div>
         <div className={classes.albumArtist}>{record.albumArtist}</div>
       </Link>
diff --git a/ui/src/album/styles.js b/ui/src/album/styles.js
index 1b7b7edaf..70dcaf1ca 100644
--- a/ui/src/album/styles.js
+++ b/ui/src/album/styles.js
@@ -12,15 +12,15 @@ export const useStyles = makeStyles((theme) => ({
     },
   },
   playButton: {
-    opacity:0,
-    transition:'all 150ms ease-out'
+    opacity: 0,
+    transition: 'all 150ms ease-out',
   },
   albumCover: {
     display: 'inline-flex',
-    justifyContent:'center',
-    alignItems:'center',
+    justifyContent: 'center',
+    alignItems: 'center',
     cursor: 'pointer',
-    
+
     [theme.breakpoints.down('xs')]: {
       height: '8em',
       width: '8em',
@@ -34,8 +34,8 @@ export const useStyles = makeStyles((theme) => ({
       width: '15em',
     },
     '&:hover $playButton': {
-      opacity:1,  
-    }
+      opacity: 1,
+    },
   },
   albumDetails: {
     display: 'inline-block',
diff --git a/ui/src/common/PlayButton.js b/ui/src/common/PlayButton.js
index 78d42bf5a..67fef8cab 100644
--- a/ui/src/common/PlayButton.js
+++ b/ui/src/common/PlayButton.js
@@ -17,7 +17,7 @@ const PlayButton = ({ record, size = 'small', ...rest }) => {
   }
   const dataProvider = useDataProvider()
   const dispatch = useDispatch()
-  const playAlbum = record => {
+  const playAlbum = (record) => {
     dataProvider
       .getList('albumSong', {
         pagination: { page: 1, perPage: -1 },