diff --git a/src/renderer/components/page-header/page-header.tsx b/src/renderer/components/page-header/page-header.tsx
index 4a0e36e89..196cc4ddc 100644
--- a/src/renderer/components/page-header/page-header.tsx
+++ b/src/renderer/components/page-header/page-header.tsx
@@ -37,7 +37,7 @@ const variants: Variants = {
 
 export const PageHeader = ({
     animated,
-    backgroundColor = 'var(--theme-colors-background)',
+    backgroundColor,
     children,
     height,
     isHidden,
@@ -134,8 +134,8 @@ export const PageHeader = ({
                         />
                         <div
                             className={clsx(styles.backgroundImageOverlay, {
-                                [styles.dark]: mode === 'dark',
-                                [styles.light]: mode === 'light',
+                                [styles.dark]: backgroundColor && mode === 'dark',
+                                [styles.light]: backgroundColor && mode === 'light',
                             })}
                         />
                     </>
diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index ceabcb2b3..845898f9d 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -23,7 +23,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
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 3bd7c9f33..0823f47b8 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@@ -23,7 +23,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
diff --git a/src/renderer/features/artists/components/artist-list-header.tsx b/src/renderer/features/artists/components/artist-list-header.tsx
index bc9b954b9..52ee7d5ed 100644
--- a/src/renderer/features/artists/components/artist-list-header.tsx
+++ b/src/renderer/features/artists/components/artist-list-header.tsx
@@ -23,7 +23,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</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 0aee428b3..33c007945 100644
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-list-header.tsx
@@ -23,7 +23,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
diff --git a/src/renderer/features/playlists/components/playlist-list-header.tsx b/src/renderer/features/playlists/components/playlist-list-header.tsx
index cbadbc627..09376b922 100644
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@@ -23,7 +23,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
 
     return (
         <Stack gap={0}>
-            <PageHeader backgroundColor="var(--theme-colors-background)">
+            <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>