diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index b147af6d0..6a40f41fd 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -45,5 +45,5 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
 const PlayButton = () => {
     const { query } = useAlbumListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} listQuery={query} />;
 };
diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx
index 234d1be1f..7ec6fa65a 100644
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@@ -6,12 +6,10 @@ import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/nati
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
-import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumDetailRoute = () => {
@@ -21,21 +19,16 @@ const AlbumDetailRoute = () => {
 
     const { albumId } = useParams() as { albumId: string };
     const server = useCurrentServer();
+
     const detailQuery = useQuery(
         albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
     );
+
     const { background: backgroundColor, colorId } = useFastAverageColor({
         id: albumId,
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
-    const { addToQueueByFetch } = usePlayer();
-    const playButtonBehavior = usePlayButtonBehavior();
-
-    const handlePlay = () => {
-        if (!server?.id) return;
-        addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, playButtonBehavior);
-    };
 
     const backgroundUrl = detailQuery.data?.imageUrl || '';
     const background = (albumBackground && `url(${backgroundUrl})`) || backgroundColor;
@@ -47,7 +40,10 @@ const AlbumDetailRoute = () => {
                     backgroundColor: backgroundColor || undefined,
                     children: (
                         <LibraryHeaderBar>
-                            <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+                            <LibraryHeaderBar.PlayButton
+                                ids={[albumId]}
+                                itemType={LibraryItem.ALBUM}
+                            />
                             <LibraryHeaderBar.Title>
                                 {detailQuery?.data?.name}
                             </LibraryHeaderBar.Title>
diff --git a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
index 3cc2b4c30..81690eb27 100644
--- a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
@@ -1,13 +1,10 @@
 import { useTranslation } from 'react-i18next';
 
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
-import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Badge } from '/@/shared/components/badge/badge';
 import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
-import { QueueSong } from '/@/shared/types/domain-types';
-import { Play } from '/@/shared/types/types';
+import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 
 interface AlbumArtistDetailTopSongsListHeaderProps {
     data: QueueSong[];
@@ -21,17 +18,11 @@ export const AlbumArtistDetailTopSongsListHeader = ({
     title,
 }: AlbumArtistDetailTopSongsListHeaderProps) => {
     const { t } = useTranslation();
-    const { addToQueueByData } = usePlayer();
-    const playButtonBehavior = usePlayButtonBehavior();
-
-    const handlePlay = async (playType: Play) => {
-        addToQueueByData(data, playType);
-    };
 
     return (
         <PageHeader p="1rem">
             <LibraryHeaderBar>
-                <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+                <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} songs={data} />
                 <LibraryHeaderBar.Title>
                     {t('page.albumArtistDetail.topSongsFrom', {
                         postProcess: 'titleCase',
diff --git a/src/renderer/features/artists/components/album-artist-list-header.tsx b/src/renderer/features/artists/components/album-artist-list-header.tsx
index c446a69b4..3bd7c9f33 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@@ -45,5 +45,5 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
 const PlayButton = () => {
     const { query } = useAlbumArtistListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} listQuery={query} />;
 };
diff --git a/src/renderer/features/artists/components/artist-list-header.tsx b/src/renderer/features/artists/components/artist-list-header.tsx
index 10f5bda21..bc9b954b9 100644
--- a/src/renderer/features/artists/components/artist-list-header.tsx
+++ b/src/renderer/features/artists/components/artist-list-header.tsx
@@ -45,5 +45,5 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
 const PlayButton = () => {
     const { query } = useArtistListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} listQuery={query} />;
 };
diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
index 378e76929..f6b18a700 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
@@ -6,12 +6,11 @@ import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/nati
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
 import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
-import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useCurrentServer } from '/@/renderer/store';
-import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumArtistDetailRoute = () => {
@@ -27,8 +26,6 @@ const AlbumArtistDetailRoute = () => {
 
     const routeId = (artistId || albumArtistId) as string;
 
-    const { addToQueueByFetch } = usePlayer();
-    const playButtonBehavior = usePlayButtonBehavior();
     const detailQuery = useQuery(
         artistsQueries.albumArtistDetail({
             query: { id: routeId },
@@ -45,11 +42,6 @@ const AlbumArtistDetailRoute = () => {
     const backgroundUrl = detailQuery.data?.imageUrl || '';
     const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor;
 
-    const handlePlay = () => {
-        if (!server?.id) return;
-        addToQueueByFetch(server.id, [routeId], LibraryItem.ALBUM_ARTIST, playButtonBehavior);
-    };
-
     return (
         <AnimatedPage key={`album-artist-detail-${routeId}`}>
             <NativeScrollArea
@@ -57,7 +49,10 @@ const AlbumArtistDetailRoute = () => {
                     backgroundColor: background,
                     children: (
                         <LibraryHeaderBar>
-                            <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+                            <LibraryHeaderBar.PlayButton
+                                ids={[routeId]}
+                                itemType={LibraryItem.ALBUM_ARTIST}
+                            />
                             <LibraryHeaderBar.Title>
                                 {detailQuery?.data?.name}
                             </LibraryHeaderBar.Title>
diff --git a/src/renderer/features/genres/components/genre-list-header.tsx b/src/renderer/features/genres/components/genre-list-header.tsx
index 6cd4b43d1..0aee428b3 100644
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-list-header.tsx
@@ -45,5 +45,5 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
 const PlayButton = () => {
     const { query } = useGenreListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} listQuery={query} />;
 };
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
index 834b8ddff..f140099ee 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@@ -10,11 +10,11 @@ import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playli
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useCurrentServer } from '/@/renderer/store';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDurationString } from '/@/renderer/utils';
 import { Badge } from '/@/shared/components/badge/badge';
 import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 interface PlaylistDetailHeaderProps {
@@ -37,8 +37,6 @@ export const PlaylistDetailSongListHeader = ({
         playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
     );
 
-    const playButtonBehavior = usePlayButtonBehavior();
-
     if (detailQuery.isLoading) return null;
     const isSmartPlaylist = detailQuery?.data?.rules;
     const playlistDuration = detailQuery?.data?.duration;
@@ -47,7 +45,10 @@ export const PlaylistDetailSongListHeader = ({
         <Stack gap={0}>
             <PageHeader>
                 <LibraryHeaderBar>
-                    <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+                    <LibraryHeaderBar.PlayButton
+                        ids={[playlistId]}
+                        itemType={LibraryItem.PLAYLIST}
+                    />
                     <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
                     {!!playlistDuration && <Badge>{formatDurationString(playlistDuration)}</Badge>}
                     <Badge>
diff --git a/src/renderer/features/playlists/components/playlist-list-header.tsx b/src/renderer/features/playlists/components/playlist-list-header.tsx
index 074cccaf5..cbadbc627 100644
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@@ -45,5 +45,5 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
 const PlayButton = () => {
     const { query } = usePlaylistListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} listQuery={query} />;
 };
diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx
index 588cd99a7..8e0e386f3 100644
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@@ -11,7 +11,7 @@ import { useCurrentServerId } from '/@/renderer/store';
 import { Badge, BadgeProps } from '/@/shared/components/badge/badge';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { TextTitle } from '/@/shared/components/text-title/text-title';
-import { LibraryItem } from '/@/shared/types/domain-types';
+import { LibraryItem, Song } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 interface LibraryHeaderBarProps {
@@ -24,26 +24,41 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
 
 interface HeaderPlayButtonProps {
     className?: string;
+    ids?: string[];
     itemType: LibraryItem;
-    query: Record<string, any>;
+    listQuery?: Record<string, any>;
+    songs?: Song[];
 }
 
 interface TitleProps {
     children: ReactNode;
 }
 
-const HeaderPlayButton = ({ className, itemType, query, ...props }: HeaderPlayButtonProps) => {
+const HeaderPlayButton = ({
+    className,
+    ids,
+    itemType,
+    listQuery,
+    songs,
+    ...props
+}: HeaderPlayButtonProps) => {
     const serverId = useCurrentServerId();
     const { t } = useTranslation();
     const player = usePlayer();
 
     const handlePlay = useCallback(
         (playType: Play) => {
-            if (!serverId) return;
-            player.addToQueueByListQuery(serverId, query, itemType, playType);
+            if (listQuery) {
+                player.addToQueueByListQuery(serverId, listQuery, itemType, playType);
+            } else if (ids) {
+                player.addToQueueByFetch(serverId, ids, itemType, playType);
+            } else if (songs) {
+                player.addToQueueByData(songs, playType);
+            }
+
             closeAllModals();
         },
-        [serverId, query, itemType, player],
+        [listQuery, ids, songs, player, serverId, itemType],
     );
 
     const openPlayTypeModal = useCallback(() => {
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index f0a4618f6..8c370d618 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -51,5 +51,5 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
 const PlayButton = () => {
     const { query } = useSongListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} query={query} />;
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} listQuery={query} />;
 };