diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/album/[albumId].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/album/[albumId].tsx
index 6ae88c0c..0b71857b 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/album/[albumId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/album/[albumId].tsx
@@ -56,7 +56,12 @@ export default function AlbumDetailScreen() {
   });
 
   useEffect(() => {
-    navigation.setOptions({ title: album?.Name ?? "" });
+    navigation.setOptions({
+      title: album?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+    });
   }, [album?.Name, navigation]);
 
   const imageUrl = useMemo(
@@ -111,7 +116,10 @@ export default function AlbumDetailScreen() {
         paddingBottom: insets.bottom + 100,
       }}
       ListHeaderComponent={
-        <View className='items-center px-4 pt-4 pb-6'>
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 60 }}
+        >
           {/* Album artwork */}
           <View
             style={{
diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx
index 394d483e..7722d3b0 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx
@@ -77,7 +77,12 @@ export default function ArtistDetailScreen() {
   });
 
   useEffect(() => {
-    navigation.setOptions({ title: artist?.Name ?? "" });
+    navigation.setOptions({
+      title: artist?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+    });
   }, [artist?.Name, navigation]);
 
   const imageUrl = useMemo(
@@ -138,7 +143,10 @@ export default function ArtistDetailScreen() {
         paddingBottom: insets.bottom + 100,
       }}
       ListHeaderComponent={
-        <View className='items-center px-4 pt-4 pb-6'>
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 50 }}
+        >
           {/* Artist image */}
           <View
             style={{
diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
index 1a987954..a896bda9 100644
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
@@ -54,7 +54,12 @@ export default function PlaylistDetailScreen() {
   });
 
   useEffect(() => {
-    navigation.setOptions({ title: playlist?.Name ?? "" });
+    navigation.setOptions({
+      title: playlist?.Name ?? "",
+      headerTransparent: true,
+      headerStyle: { backgroundColor: "transparent" },
+      headerShadowVisible: false,
+    });
   }, [playlist?.Name, navigation]);
 
   const imageUrl = useMemo(
@@ -111,7 +116,10 @@ export default function PlaylistDetailScreen() {
         paddingBottom: insets.bottom + 100,
       }}
       ListHeaderComponent={
-        <View className='items-center px-4 pt-4 pb-6'>
+        <View
+          className='items-center px-4 pb-6 bg-black'
+          style={{ paddingTop: insets.top + 50 }}
+        >
           {/* Playlist artwork */}
           <View
             style={{
diff --git a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx
index 8606d406..94506c2c 100644
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx
@@ -29,7 +29,13 @@ const Layout = () => {
 
   return (
     <>
-      <Stack.Screen options={{ title: t("music.title") }} />
+      <Stack.Screen
+        options={{
+          title: t("music.title"),
+          headerStyle: { backgroundColor: "black" },
+          headerShadowVisible: false,
+        }}
+      />
       <Tab
         initialRouteName='suggestions'
         keyboardDismissMode='none'
diff --git a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx
index 5ccefa9d..26688782 100644
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx
@@ -95,42 +95,44 @@ export default function AlbumsScreen() {
   }
 
   return (
-    <FlashList
-      data={albums}
-      numColumns={numColumns}
-      contentContainerStyle={{
-        paddingBottom: insets.bottom + 100,
-        paddingTop: 16,
-        paddingHorizontal: padding,
-      }}
-      refreshControl={
-        <RefreshControl
-          refreshing={false}
-          onRefresh={refetch}
-          tintColor='#9334E9'
-        />
-      }
-      onEndReached={handleEndReached}
-      onEndReachedThreshold={0.5}
-      renderItem={({ item, index }) => (
-        <View
-          style={{
-            width: itemWidth,
-            marginRight: index % numColumns === 0 ? gap : 0,
-            marginBottom: gap,
-          }}
-        >
-          <MusicAlbumCard album={item} width={itemWidth} />
-        </View>
-      )}
-      keyExtractor={(item) => item.Id!}
-      ListFooterComponent={
-        isFetchingNextPage ? (
-          <View className='py-4'>
-            <Loader />
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={albums}
+        numColumns={numColumns}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 16,
+          paddingHorizontal: padding,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns === 0 ? gap : 0,
+              marginBottom: gap,
+            }}
+          >
+            <MusicAlbumCard album={item} width={itemWidth} />
           </View>
-        ) : null
-      }
-    />
+        )}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+    </View>
   );
 }
diff --git a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
index f612b537..38bddc57 100644
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
@@ -129,42 +129,44 @@ export default function ArtistsScreen() {
   }
 
   return (
-    <FlashList
-      data={artists}
-      numColumns={numColumns}
-      contentContainerStyle={{
-        paddingBottom: insets.bottom + 100,
-        paddingTop: 16,
-        paddingHorizontal: padding,
-      }}
-      refreshControl={
-        <RefreshControl
-          refreshing={false}
-          onRefresh={refetch}
-          tintColor='#9334E9'
-        />
-      }
-      onEndReached={handleEndReached}
-      onEndReachedThreshold={0.5}
-      renderItem={({ item, index }) => (
-        <View
-          style={{
-            width: itemWidth,
-            marginRight: index % numColumns !== numColumns - 1 ? gap : 0,
-            marginBottom: gap,
-          }}
-        >
-          <MusicArtistCard artist={item} size={itemWidth} />
-        </View>
-      )}
-      keyExtractor={(item) => item.Id!}
-      ListFooterComponent={
-        isFetchingNextPage ? (
-          <View className='py-4'>
-            <Loader />
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={artists}
+        numColumns={numColumns}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 16,
+          paddingHorizontal: padding,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns !== numColumns - 1 ? gap : 0,
+              marginBottom: gap,
+            }}
+          >
+            <MusicArtistCard artist={item} size={itemWidth} />
           </View>
-        ) : null
-      }
-    />
+        )}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+    </View>
   );
 }
diff --git a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
index 6093295b..bc1cfd11 100644
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
@@ -129,42 +129,44 @@ export default function PlaylistsScreen() {
   }
 
   return (
-    <FlashList
-      data={playlists}
-      numColumns={numColumns}
-      contentContainerStyle={{
-        paddingBottom: insets.bottom + 100,
-        paddingTop: 16,
-        paddingHorizontal: padding,
-      }}
-      refreshControl={
-        <RefreshControl
-          refreshing={false}
-          onRefresh={refetch}
-          tintColor='#9334E9'
-        />
-      }
-      onEndReached={handleEndReached}
-      onEndReachedThreshold={0.5}
-      renderItem={({ item, index }) => (
-        <View
-          style={{
-            width: itemWidth,
-            marginRight: index % numColumns === 0 ? gap : 0,
-            marginBottom: gap,
-          }}
-        >
-          <MusicPlaylistCard playlist={item} width={itemWidth} />
-        </View>
-      )}
-      keyExtractor={(item) => item.Id!}
-      ListFooterComponent={
-        isFetchingNextPage ? (
-          <View className='py-4'>
-            <Loader />
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={playlists}
+        numColumns={numColumns}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 16,
+          paddingHorizontal: padding,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refetch}
+            tintColor='#9334E9'
+          />
+        }
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={0.5}
+        renderItem={({ item, index }) => (
+          <View
+            style={{
+              width: itemWidth,
+              marginRight: index % numColumns === 0 ? gap : 0,
+              marginBottom: gap,
+            }}
+          >
+            <MusicPlaylistCard playlist={item} width={itemWidth} />
           </View>
-        ) : null
-      }
-    />
+        )}
+        keyExtractor={(item) => item.Id!}
+        ListFooterComponent={
+          isFetchingNextPage ? (
+            <View className='py-4'>
+              <Loader />
+            </View>
+          ) : null
+        }
+      />
+    </View>
   );
 }
diff --git a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
index b32ea4c9..98c468c4 100644
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
@@ -243,44 +243,46 @@ export default function SuggestionsScreen() {
   }
 
   return (
-    <FlashList
-      data={sections}
-      contentContainerStyle={{
-        paddingBottom: insets.bottom + 100,
-        paddingTop: 16,
-      }}
-      refreshControl={
-        <RefreshControl
-          refreshing={false}
-          onRefresh={handleRefresh}
-          tintColor='#9334E9'
-        />
-      }
-      renderItem={({ item: section }) => (
-        <View className='mb-6'>
-          <Text className='text-lg font-bold px-4 mb-3'>{section.title}</Text>
-          {section.type === "albums" ? (
-            <HorizontalScroll
-              data={section.data}
-              height={200}
-              keyExtractor={(item) => item.Id!}
-              renderItem={(item) => <MusicAlbumCard album={item} />}
-            />
-          ) : (
-            <View className='px-4'>
-              {section.data.slice(0, 5).map((track, index, _tracks) => (
-                <MusicTrackItem
-                  key={track.Id}
-                  track={track}
-                  index={index + 1}
-                  queue={section.data}
-                />
-              ))}
-            </View>
-          )}
-        </View>
-      )}
-      keyExtractor={(item) => item.title}
-    />
+    <View className='flex-1 bg-black'>
+      <FlashList
+        data={sections}
+        contentContainerStyle={{
+          paddingBottom: insets.bottom + 100,
+          paddingTop: 16,
+        }}
+        refreshControl={
+          <RefreshControl
+            refreshing={false}
+            onRefresh={handleRefresh}
+            tintColor='#9334E9'
+          />
+        }
+        renderItem={({ item: section }) => (
+          <View className='mb-6'>
+            <Text className='text-lg font-bold px-4 mb-3'>{section.title}</Text>
+            {section.type === "albums" ? (
+              <HorizontalScroll
+                data={section.data}
+                height={200}
+                keyExtractor={(item) => item.Id!}
+                renderItem={(item) => <MusicAlbumCard album={item} />}
+              />
+            ) : (
+              <View className='px-4'>
+                {section.data.slice(0, 5).map((track, index, _tracks) => (
+                  <MusicTrackItem
+                    key={track.Id}
+                    track={track}
+                    index={index + 1}
+                    queue={section.data}
+                  />
+                ))}
+              </View>
+            )}
+          </View>
+        )}
+        keyExtractor={(item) => item.title}
+      />
+    </View>
   );
 }
diff --git a/translations/en.json b/translations/en.json
index 01a99481..5b0fc7f9 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -599,6 +599,9 @@
       "artists": "Artists",
       "playlists": "Playlists"
     },
+    "filters": {
+      "all": "All"
+    },
     "recently_added": "Recently Added",
     "recently_played": "Recently Played",
     "frequently_played": "Frequently Played",