diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
index 3349f8bb2..f3d2dce72 100644
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -5,6 +5,7 @@ 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';
 
 const AlbumListRoute = () => {
     const { albumArtistId, genreId } = useParams();
@@ -24,8 +25,10 @@ const AlbumListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <AlbumListHeader />
-                <AlbumListContent />
+                <LibraryContainer>
+                    <AlbumListHeader />
+                    <AlbumListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
index 634c313dd..844a86530 100644
--- a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
@@ -1,8 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, useParams } from 'react-router';
-import { Link } from 'react-router';
+import { generatePath, Link, useParams } from 'react-router';
 
 import styles from './dummy-album-detail-route.module.css';
 
@@ -10,6 +9,7 @@ import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
@@ -115,112 +115,115 @@ const DummyAlbumDetailRoute = () => {
 
     return (
         <AnimatedPage key={`dummy-album-detail-${albumId}`}>
-            <Stack ref={ref}>
-                <LibraryHeader
-                    background={background}
-                    imageUrl={detailQuery?.data?.imageUrl}
-                    item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
-                    loading={!background || colorId !== albumId}
-                    title={detailQuery?.data?.name || ''}
-                >
-                    <Stack gap="sm">
-                        <Group gap="sm">
-                            {metadataItems.map((item, index) => (
-                                <Fragment key={`item-${item.id}-${index}`}>
-                                    {index > 0 && <Text isNoSelect>•</Text>}
-                                    <Text isMuted={item.secondary}>{item.value}</Text>
-                                </Fragment>
-                            ))}
-                        </Group>
-                        <Group
-                            gap="md"
-                            mah="4rem"
-                            style={{
-                                overflow: 'hidden',
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: 2,
-                            }}
-                        >
-                            {detailQuery?.data?.albumArtists.map((artist) => (
-                                <Text
-                                    component={Link}
-                                    fw={600}
-                                    isLink
-                                    key={`artist-${artist.id}`}
-                                    size="md"
-                                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                        albumArtistId: artist.id,
-                                    })}
+            <LibraryContainer>
+                <Stack ref={ref}>
+                    <LibraryHeader
+                        imageUrl={detailQuery?.data?.imageUrl}
+                        item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
+                        loading={!background || colorId !== albumId}
+                        title={detailQuery?.data?.name || ''}
+                    >
+                        <Stack gap="sm">
+                            <Group gap="sm">
+                                {metadataItems.map((item, index) => (
+                                    <Fragment key={`item-${item.id}-${index}`}>
+                                        {index > 0 && <Text isNoSelect>•</Text>}
+                                        <Text isMuted={item.secondary}>{item.value}</Text>
+                                    </Fragment>
+                                ))}
+                            </Group>
+                            <Group
+                                gap="md"
+                                mah="4rem"
+                                style={{
+                                    overflow: 'hidden',
+                                    WebkitBoxOrient: 'vertical',
+                                    WebkitLineClamp: 2,
+                                }}
+                            >
+                                {detailQuery?.data?.albumArtists.map((artist) => (
+                                    <Text
+                                        component={Link}
+                                        fw={600}
+                                        isLink
+                                        key={`artist-${artist.id}`}
+                                        size="md"
+                                        to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                            albumArtistId: artist.id,
+                                        })}
+                                        variant="subtle"
+                                    >
+                                        {artist.name}
+                                    </Text>
+                                ))}
+                            </Group>
+                        </Stack>
+                    </LibraryHeader>
+                </Stack>
+                <div className={styles.detailContainer}>
+                    <section>
+                        <Group gap="sm" justify="space-between">
+                            <Group>
+                                <PlayButton onClick={() => handlePlay()} />
+                                <ActionIcon
+                                    icon="favorite"
+                                    iconProps={{
+                                        fill: detailQuery?.data?.userFavorite
+                                            ? 'primary'
+                                            : undefined,
+                                    }}
+                                    loading={
+                                        createFavoriteMutation.isPending ||
+                                        deleteFavoriteMutation.isPending
+                                    }
+                                    onClick={handleFavorite}
                                     variant="subtle"
-                                >
-                                    {artist.name}
-                                </Text>
-                            ))}
-                        </Group>
-                    </Stack>
-                </LibraryHeader>
-            </Stack>
-            <div className={styles.detailContainer}>
-                <section>
-                    <Group gap="sm" justify="space-between">
-                        <Group>
-                            <PlayButton onClick={() => handlePlay()} />
-                            <ActionIcon
-                                icon="favorite"
-                                iconProps={{
-                                    fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
-                                }}
-                                loading={
-                                    createFavoriteMutation.isPending ||
-                                    deleteFavoriteMutation.isPending
-                                }
-                                onClick={handleFavorite}
-                                variant="subtle"
-                            />
-                            <ActionIcon
-                                icon="ellipsisHorizontal"
-                                onClick={(e) => {
-                                    if (!detailQuery?.data) return;
-                                }}
-                                variant="subtle"
-                            />
-                        </Group>
-                    </Group>
-                </section>
-                {showGenres && (
-                    <section>
-                        <Group gap="sm">
-                            {detailQuery?.data?.genres?.map((genre) => (
-                                <Button
-                                    component={Link}
-                                    key={`genre-${genre.id}`}
-                                    radius={0}
-                                    size="compact-md"
-                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
-                                        genreId: genre.id,
-                                    })}
-                                    variant="outline"
-                                >
-                                    {genre.name}
-                                </Button>
-                            ))}
+                                />
+                                <ActionIcon
+                                    icon="ellipsisHorizontal"
+                                    onClick={(e) => {
+                                        if (!detailQuery?.data) return;
+                                    }}
+                                    variant="subtle"
+                                />
+                            </Group>
                         </Group>
                     </section>
-                )}
-                {comment && (
+                    {showGenres && (
+                        <section>
+                            <Group gap="sm">
+                                {detailQuery?.data?.genres?.map((genre) => (
+                                    <Button
+                                        component={Link}
+                                        key={`genre-${genre.id}`}
+                                        radius={0}
+                                        size="compact-md"
+                                        to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                            genreId: genre.id,
+                                        })}
+                                        variant="outline"
+                                    >
+                                        {genre.name}
+                                    </Button>
+                                ))}
+                            </Group>
+                        </section>
+                    )}
+                    {comment && (
+                        <section>
+                            <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
+                        </section>
+                    )}
                     <section>
-                        <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
+                        <Center>
+                            <Group mr={5}>
+                                <Icon fill="error" icon="error" size={30} />
+                            </Group>
+                            <h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
+                        </Center>
                     </section>
-                )}
-                <section>
-                    <Center>
-                        <Group mr={5}>
-                            <Icon fill="error" icon="error" size={30} />
-                        </Group>
-                        <h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
-                    </Center>
-                </section>
-            </div>
+                </div>
+            </LibraryContainer>
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
index 20b2d7b2f..47e649135 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
@@ -7,6 +7,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { useCurrentServer } from '/@/renderer/store/auth.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
@@ -47,15 +48,17 @@ const AlbumArtistDetailTopSongsListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <AlbumArtistDetailTopSongsListHeader
-                    data={topSongsQuery?.data?.items || []}
-                    itemCount={itemCount}
-                    title={detailQuery?.data?.name || 'Unknown'}
-                />
-                {/* <AlbumArtistDetailTopSongsListContent
-                    data={topSongsQuery?.data?.items || []}
-                    tableRef={tableRef}
-                /> */}
+                <LibraryContainer>
+                    <AlbumArtistDetailTopSongsListHeader
+                        data={topSongsQuery?.data?.items || []}
+                        itemCount={itemCount}
+                        title={detailQuery?.data?.name || 'Unknown'}
+                    />
+                    {/* <AlbumArtistDetailTopSongsListContent
+                        data={topSongsQuery?.data?.items || []}
+                        tableRef={tableRef}
+                    /> */}
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );
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 92726a9f0..0a3f5bba2 100644
--- a/src/renderer/features/artists/routes/album-artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-list-route.tsx
@@ -4,6 +4,7 @@ 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 { ItemListKey } from '/@/shared/types/types';
 
 const AlbumArtistListRoute = () => {
@@ -23,8 +24,10 @@ const AlbumArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <AlbumArtistListHeader />
-                <AlbumArtistListContent />
+                <LibraryContainer>
+                    <AlbumArtistListHeader />
+                    <AlbumArtistListContent />
+                </LibraryContainer>
             </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 5f8373cda..dbace88ab 100644
--- a/src/renderer/features/artists/routes/artist-list-route.tsx
+++ b/src/renderer/features/artists/routes/artist-list-route.tsx
@@ -4,6 +4,7 @@ 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 { ItemListKey } from '/@/shared/types/types';
 
 const ArtistListRoute = () => {
@@ -23,8 +24,10 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <ArtistListHeader />
-                <ArtistListContent />
+                <LibraryContainer>
+                    <ArtistListHeader />
+                    <ArtistListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/genres/routes/genre-list-route.tsx b/src/renderer/features/genres/routes/genre-list-route.tsx
index 8e9455385..f918bc890 100644
--- a/src/renderer/features/genres/routes/genre-list-route.tsx
+++ b/src/renderer/features/genres/routes/genre-list-route.tsx
@@ -4,6 +4,7 @@ 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 { ItemListKey } from '/@/shared/types/types';
 
 const GenreListRoute = () => {
@@ -23,8 +24,10 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <GenreListHeader />
-                <GenreListContent />
+                <LibraryContainer>
+                    <GenreListHeader />
+                    <GenreListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/now-playing/routes/now-playing-route.tsx b/src/renderer/features/now-playing/routes/now-playing-route.tsx
index 028739de7..74489bdd8 100644
--- a/src/renderer/features/now-playing/routes/now-playing-route.tsx
+++ b/src/renderer/features/now-playing/routes/now-playing-route.tsx
@@ -5,6 +5,7 @@ import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/no
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const NowPlayingRoute = () => {
@@ -13,14 +14,16 @@ const NowPlayingRoute = () => {
 
     return (
         <AnimatedPage>
-            <NowPlayingHeader />
-            <PlayQueueListControls
-                handleSearch={setSearch}
-                searchTerm={search}
-                tableRef={queueRef}
-                type={ItemListKey.QUEUE_SONG}
-            />
-            <PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
+            <LibraryContainer>
+                <NowPlayingHeader />
+                <PlayQueueListControls
+                    handleSearch={setSearch}
+                    searchTerm={search}
+                    tableRef={queueRef}
+                    type={ItemListKey.QUEUE_SONG}
+                />
+                <PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
+            </LibraryContainer>
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
index 3e7ff990a..59a71a873 100644
--- a/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
@@ -13,6 +13,7 @@ import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/sa
 import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -186,44 +187,48 @@ const PlaylistDetailSongListRoute = () => {
 
     return (
         <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
-            <PlaylistDetailSongListHeader
-                handlePlay={handlePlay}
-                handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
-                itemCount={itemCount}
-                tableRef={tableRef}
-            />
+            <LibraryContainer>
+                <PlaylistDetailSongListHeader
+                    handlePlay={handlePlay}
+                    handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
+                    itemCount={itemCount}
+                    tableRef={tableRef}
+                />
 
-            {(isSmartPlaylist || showQueryBuilder) && (
-                <motion.div>
-                    <Box h="100%" mah="35vh" p="md" w="100%">
-                        <Group pb="md">
-                            <ActionIcon
-                                icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
-                                iconProps={{
-                                    size: 'md',
-                                }}
-                                onClick={handleToggleExpand}
-                                size="xs"
-                            />
-                            <Text>{t('form.queryEditor.title', { postProcess: 'titleCase' })}</Text>
-                        </Group>
-                        {isQueryBuilderExpanded && (
-                            <PlaylistQueryBuilder
-                                isSaving={createPlaylistMutation?.isPending}
-                                key={JSON.stringify(detailQuery?.data?.rules)}
-                                limit={detailQuery?.data?.rules?.limit}
-                                onSave={handleSave}
-                                onSaveAs={handleSaveAs}
-                                playlistId={playlistId}
-                                query={detailQuery?.data?.rules}
-                                sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
-                                sortOrder={detailQuery?.data?.rules?.order || 'asc'}
-                            />
-                        )}
-                    </Box>
-                </motion.div>
-            )}
-            {/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
+                {(isSmartPlaylist || showQueryBuilder) && (
+                    <motion.div>
+                        <Box h="100%" mah="35vh" p="md" w="100%">
+                            <Group pb="md">
+                                <ActionIcon
+                                    icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
+                                    iconProps={{
+                                        size: 'md',
+                                    }}
+                                    onClick={handleToggleExpand}
+                                    size="xs"
+                                />
+                                <Text>
+                                    {t('form.queryEditor.title', { postProcess: 'titleCase' })}
+                                </Text>
+                            </Group>
+                            {isQueryBuilderExpanded && (
+                                <PlaylistQueryBuilder
+                                    isSaving={createPlaylistMutation?.isPending}
+                                    key={JSON.stringify(detailQuery?.data?.rules)}
+                                    limit={detailQuery?.data?.rules?.limit}
+                                    onSave={handleSave}
+                                    onSaveAs={handleSaveAs}
+                                    playlistId={playlistId}
+                                    query={detailQuery?.data?.rules}
+                                    sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
+                                    sortOrder={detailQuery?.data?.rules?.order || 'asc'}
+                                />
+                            )}
+                        </Box>
+                    </motion.div>
+                )}
+                {/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
+            </LibraryContainer>
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/playlists/routes/playlist-list-route.tsx b/src/renderer/features/playlists/routes/playlist-list-route.tsx
index 9c6bdeb71..4b8692b71 100644
--- a/src/renderer/features/playlists/routes/playlist-list-route.tsx
+++ b/src/renderer/features/playlists/routes/playlist-list-route.tsx
@@ -5,6 +5,7 @@ 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 { ItemListKey } from '/@/shared/types/types';
 
 const PlaylistListRoute = () => {
@@ -25,8 +26,10 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <PlaylistListHeader />
-                <PlaylistListContent />
+                <LibraryContainer>
+                    <PlaylistListHeader />
+                    <PlaylistListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/search/routes/search-route.tsx b/src/renderer/features/search/routes/search-route.tsx
index da7244a6a..882425943 100644
--- a/src/renderer/features/search/routes/search-route.tsx
+++ b/src/renderer/features/search/routes/search-route.tsx
@@ -4,6 +4,7 @@ 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';
 
 const SearchRoute = () => {
     const { state: locationState } = useLocation();
@@ -13,8 +14,10 @@ const SearchRoute = () => {
 
     return (
         <AnimatedPage key={`search-${navigationId}`}>
-            <SearchHeader navigationId={navigationId} />
-            <SearchContent key={`page-${itemType}`} />
+            <LibraryContainer>
+                <SearchHeader navigationId={navigationId} />
+                <SearchContent key={`page-${itemType}`} />
+            </LibraryContainer>
         </AnimatedPage>
     );
 };
diff --git a/src/renderer/features/settings/routes/settings-route.tsx b/src/renderer/features/settings/routes/settings-route.tsx
index bb140a388..b3a24b708 100644
--- a/src/renderer/features/settings/routes/settings-route.tsx
+++ b/src/renderer/features/settings/routes/settings-route.tsx
@@ -4,6 +4,7 @@ import { SettingsContent } from '/@/renderer/features/settings/components/settin
 import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
 import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { Flex } from '/@/shared/components/flex/flex';
 
 const SettingsRoute = () => {
@@ -12,10 +13,12 @@ const SettingsRoute = () => {
     return (
         <AnimatedPage>
             <SettingSearchContext.Provider value={search}>
-                <Flex direction="column" h="100%" w="100%">
-                    <SettingsHeader setSearch={setSearch} />
-                    <SettingsContent />
-                </Flex>
+                <LibraryContainer>
+                    <Flex direction="column" h="100%" w="100%">
+                        <SettingsHeader setSearch={setSearch} />
+                        <SettingsContent />
+                    </Flex>
+                </LibraryContainer>
             </SettingSearchContext.Provider>
         </AnimatedPage>
     );
diff --git a/src/renderer/features/shared/components/library-container.module.css b/src/renderer/features/shared/components/library-container.module.css
index cc338fe90..71fcfcb0c 100644
--- a/src/renderer/features/shared/components/library-container.module.css
+++ b/src/renderer/features/shared/components/library-container.module.css
@@ -1,11 +1,10 @@
 .container {
     position: relative;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     max-width: var(--theme-content-max-width);
+    height: 100%;
+    min-height: 0;
     margin: 0 auto;
 }
-
-.content {
-    position: relative;
-    z-index: 0;
-}
diff --git a/src/renderer/features/shared/components/library-container.tsx b/src/renderer/features/shared/components/library-container.tsx
index d0d6b81c5..dea707499 100644
--- a/src/renderer/features/shared/components/library-container.tsx
+++ b/src/renderer/features/shared/components/library-container.tsx
@@ -7,9 +7,5 @@ interface LibraryContainerProps {
 }
 
 export const LibraryContainer = ({ children }: LibraryContainerProps) => {
-    return (
-        <div className={styles.container}>
-            <div className={styles.content}>{children}</div>
-        </div>
-    );
+    return <div className={styles.container}>{children}</div>;
 };
diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx
index 1761d445c..1b2bcdfcf 100644
--- a/src/renderer/features/songs/routes/song-list-route.tsx
+++ b/src/renderer/features/songs/routes/song-list-route.tsx
@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router';
 import { ListContext } from '/@/renderer/context/list-context';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
 import { useCurrentServer } from '/@/renderer/store';
@@ -73,8 +74,10 @@ const TrackListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <SongListHeader title={title} />
-                <SongListContent />
+                <LibraryContainer>
+                    <SongListHeader title={title} />
+                    <SongListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );