diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 87049862e..ce46fa5fc 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -27,7 +27,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <PageTitle title={title} />
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
index e7fe0a307..8b6a9d0b1 100644
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AlbumListQuery } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
@@ -48,10 +47,8 @@ const AlbumListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <AlbumListHeader />
-                    <AlbumListContent />
-                </LibraryContainer>
+                <AlbumListHeader />
+                <AlbumListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );
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 0823f47b8..26cc68d70 100644
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@@ -24,7 +24,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
diff --git a/src/renderer/features/artists/components/artist-list-header.tsx b/src/renderer/features/artists/components/artist-list-header.tsx
index 52ee7d5ed..0a9672f8e 100644
--- a/src/renderer/features/artists/components/artist-list-header.tsx
+++ b/src/renderer/features/artists/components/artist-list-header.tsx
@@ -24,7 +24,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
diff --git a/src/renderer/features/artists/routes/album-artist-list-route.tsx b/src/renderer/features/artists/routes/album-artist-list-route.tsx
index ffad2da0b..7403a812d 100644
--- a/src/renderer/features/artists/routes/album-artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-list-route.tsx
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
 import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const AlbumArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <AlbumArtistListHeader />
-                    <AlbumArtistListContent />
-                </LibraryContainer>
+                <AlbumArtistListHeader />
+                <AlbumArtistListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/artists/routes/artist-list-route.tsx b/src/renderer/features/artists/routes/artist-list-route.tsx
index 23f1b41bd..36902b65c 100644
--- a/src/renderer/features/artists/routes/artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/artist-list-route.tsx
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
 import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <ArtistListHeader />
-                    <ArtistListContent />
-                </LibraryContainer>
+                <ArtistListHeader />
+                <ArtistListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/genres/components/genre-list-header.tsx b/src/renderer/features/genres/components/genre-list-header.tsx
index 33c007945..8eac0b907 100644
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-list-header.tsx
@@ -24,7 +24,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
diff --git a/src/renderer/features/genres/routes/genre-list-route.tsx b/src/renderer/features/genres/routes/genre-list-route.tsx
index 439bd5e49..810513728 100644
--- a/src/renderer/features/genres/routes/genre-list-route.tsx
+++ b/src/renderer/features/genres/routes/genre-list-route.tsx
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
 import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -25,10 +24,8 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <GenreListHeader />
-                    <GenreListContent />
-                </LibraryContainer>
+                <GenreListHeader />
+                <GenreListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/playlists/components/playlist-list-header.tsx b/src/renderer/features/playlists/components/playlist-list-header.tsx
index 09376b922..a198b7f7c 100644
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@@ -24,7 +24,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
     return (
         <Stack gap={0}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
diff --git a/src/renderer/features/playlists/routes/playlist-list-route.tsx b/src/renderer/features/playlists/routes/playlist-list-route.tsx
index 043bc6f6e..1bbc7cab2 100644
--- a/src/renderer/features/playlists/routes/playlist-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-list-route.tsx
@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
 import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ItemListKey } from '/@/shared/types/types';
 
@@ -27,10 +26,8 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <PlaylistListHeader />
-                    <PlaylistListContent />
-                </LibraryContainer>
+                <PlaylistListHeader />
+                <PlaylistListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/search/components/search-header.tsx b/src/renderer/features/search/components/search-header.tsx
index 0eaaf69de..7e27748fa 100644
--- a/src/renderer/features/search/components/search-header.tsx
+++ b/src/renderer/features/search/components/search-header.tsx
@@ -13,7 +13,6 @@ import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { SearchInput } from '/@/renderer/features/shared/components/search-input';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Button, ButtonGroup } from '/@/shared/components/button/button';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -30,7 +29,6 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     const { t } = useTranslation();
     const { itemType } = useParams() as { itemType: LibraryItem };
     const [searchParams, setSearchParams] = useSearchParams();
-    const { ref, ...cq } = useContainerQuery();
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
         setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
@@ -52,10 +50,10 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
     };
 
     return (
-        <Stack gap={0} ref={ref}>
+        <Stack gap={0}>
             <PageHeader>
                 <Flex justify="space-between" w="100%">
-                    <LibraryHeaderBar>
+                    <LibraryHeaderBar ignoreMaxWidth>
                         <LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
                     </LibraryHeaderBar>
                     <Group>
diff --git a/src/renderer/features/search/routes/search-route.tsx b/src/renderer/features/search/routes/search-route.tsx
index 6b19ee3a0..fbf8a39c5 100644
--- a/src/renderer/features/search/routes/search-route.tsx
+++ b/src/renderer/features/search/routes/search-route.tsx
@@ -4,7 +4,6 @@ import { useLocation, useParams } from 'react-router';
 import { SearchContent } from '/@/renderer/features/search/components/search-content';
 import { SearchHeader } from '/@/renderer/features/search/components/search-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 
 const SearchRoute = () => {
@@ -15,10 +14,8 @@ const SearchRoute = () => {
 
     return (
         <AnimatedPage key={`search-${navigationId}`}>
-            <LibraryContainer>
-                <SearchHeader navigationId={navigationId} />
-                <SearchContent key={`page-${itemType}`} />
-            </LibraryContainer>
+            <SearchHeader navigationId={navigationId} />
+            <SearchContent key={`page-${itemType}`} />
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/settings/components/settings-header.tsx b/src/renderer/features/settings/components/settings-header.tsx
index 3592ee6c1..99bc716ae 100644
--- a/src/renderer/features/settings/components/settings-header.tsx
+++ b/src/renderer/features/settings/components/settings-header.tsx
@@ -43,7 +43,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
     return (
         <Flex ref={ref}>
             <PageHeader>
-                <LibraryHeaderBar>
+                <LibraryHeaderBar ignoreMaxWidth>
                     <Flex align="center" justify="space-between" w="100%">
                         <Group wrap="nowrap">
                             <Icon icon="settings" size="5xl" />
diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx
index df880dda6..844e50e45 100644
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@@ -1,5 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
-import { memo, ReactNode, useCallback } from 'react';
+import { CSSProperties, memo, ReactNode, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './library-header-bar.module.css';
@@ -16,10 +16,18 @@ import { Play } from '/@/shared/types/types';
 
 interface LibraryHeaderBarProps {
     children: ReactNode;
+    ignoreMaxWidth?: boolean;
 }
 
-const LibraryHeaderBarComponent = ({ children }: LibraryHeaderBarProps) => {
-    return <div className={styles.headerContainer}>{children}</div>;
+const LibraryHeaderBarComponent = ({ children, ignoreMaxWidth }: LibraryHeaderBarProps) => {
+    return (
+        <div
+            className={styles.headerContainer}
+            style={ignoreMaxWidth ? ({ maxWidth: 'none' } as CSSProperties) : undefined}
+        >
+            {children}
+        </div>
+    );
 };
 
 interface HeaderPlayButtonProps {
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index 4570007d1..18c3295ea 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -30,7 +30,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
         <Stack gap={0}>
             <PageHeader>
                 <Flex justify="space-between" w="100%">
-                    <LibraryHeaderBar>
+                    <LibraryHeaderBar ignoreMaxWidth>
                         <PlayButton />
                         <PageTitle title={title} />
                         <LibraryHeaderBar.Badge
diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx
index bf89fc982..a4090d613 100644
--- a/src/renderer/features/songs/routes/song-list-route.tsx
+++ b/src/renderer/features/songs/routes/song-list-route.tsx
@@ -3,7 +3,6 @@ import { useParams } from 'react-router';
 
 import { ListContext } from '/@/renderer/context/list-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
-import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
@@ -48,10 +47,8 @@ const SongListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <LibraryContainer>
-                    <SongListHeader />
-                    <SongListContent />
-                </LibraryContainer>
+                <SongListHeader />
+                <SongListContent />
             </ListContext.Provider>
         </AnimatedPage>
     );