diff --git a/ui/src/audioplayer/queue.js b/ui/src/audioplayer/queue.js
index c8fc0ab74..809f1b7eb 100644
--- a/ui/src/audioplayer/queue.js
+++ b/ui/src/audioplayer/queue.js
@@ -48,7 +48,9 @@ const shuffle = (data) => {
     ;[ids[i], ids[j]] = [ids[j], ids[i]]
   }
   const shuffled = {}
-  ids.forEach((id) => (shuffled[id] = data[id]))
+  // The "_" is to force the object key to be a string, so it keeps the order when adding to object
+  // or else the keys will always be in the same (numerically) order
+  ids.forEach((id) => (shuffled['_' + id] = data[id]))
   return shuffled
 }
 
diff --git a/ui/src/playlist/PlaylistActions.js b/ui/src/playlist/PlaylistActions.js
index 9cabb2e97..ca54b5b4e 100644
--- a/ui/src/playlist/PlaylistActions.js
+++ b/ui/src/playlist/PlaylistActions.js
@@ -5,9 +5,10 @@ import {
   useTranslate,
 } from 'react-admin'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import ShuffleIcon from '@material-ui/icons/Shuffle'
 import React from 'react'
 import { useDispatch } from 'react-redux'
-import { playTracks } from '../audioplayer'
+import { playTracks, shuffleTracks } from '../audioplayer'
 
 const PlaylistActions = ({
   className,
@@ -30,6 +31,14 @@ const PlaylistActions = ({
       >
         <PlayArrowIcon />
       </Button>
+      <Button
+        onClick={() => {
+          dispatch(shuffleTracks(data, ids))
+        }}
+        label={translate('resources.album.actions.shuffle')}
+      >
+        <ShuffleIcon />
+      </Button>
     </TopToolbar>
   )
 }