diff --git a/src/screens/BackdropGalleryScreen.tsx b/src/screens/BackdropGalleryScreen.tsx
index 99f9343..b8a829e 100644
--- a/src/screens/BackdropGalleryScreen.tsx
+++ b/src/screens/BackdropGalleryScreen.tsx
@@ -16,6 +16,7 @@ import FastImage from '@d11/react-native-fast-image';
 import { MaterialIcons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { TMDBService } from '../services/tmdbService';
+import { useTheme } from '../contexts/ThemeContext';
 
 const { width } = Dimensions.get('window');
 const BACKDROP_WIDTH = width * 0.9;
@@ -40,6 +41,7 @@ const BackdropGalleryScreen: React.FC = () => {
   const route = useRoute();
   const navigation = useNavigation();
   const { tmdbId, type, title } = route.params as RouteParams;
+  const { currentTheme } = useTheme();
 
   const [backdrops, setBackdrops] = useState<BackdropItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -108,7 +110,9 @@ const BackdropGalleryScreen: React.FC = () => {
     try {
       await AsyncStorage.setItem(SELECTED_BACKDROP_KEY, JSON.stringify(backdrop));
       setSelectedBackdrop(backdrop);
-      Alert.alert('Success', 'Custom backdrop set successfully!');
+      Alert.alert('Success', 'Custom backdrop set successfully!', [
+        { text: 'OK', onPress: () => navigation.goBack() }
+      ]);
     } catch (error) {
       console.error('Failed to save selected backdrop:', error);
       Alert.alert('Error', 'Failed to save backdrop');
@@ -119,7 +123,9 @@ const BackdropGalleryScreen: React.FC = () => {
     try {
       await AsyncStorage.removeItem(SELECTED_BACKDROP_KEY);
       setSelectedBackdrop(null);
-      Alert.alert('Success', 'Custom backdrop reset to default!');
+      Alert.alert('Success', 'Custom backdrop reset to default!', [
+        { text: 'OK', onPress: () => navigation.goBack() }
+      ]);
     } catch (error) {
       console.error('Failed to reset selected backdrop:', error);
       Alert.alert('Error', 'Failed to reset backdrop');
@@ -152,14 +158,14 @@ const BackdropGalleryScreen: React.FC = () => {
         />
         {isSelected && (
           <View style={styles.selectedIndicator}>
-            <MaterialIcons name="check-circle" size={24} color="#fff" />
+            <MaterialIcons name="check-circle" size={24} color={currentTheme.colors.highEmphasis} />
           </View>
         )}
         <View style={styles.backdropInfo}>
-          <Text style={styles.backdropResolution}>
+          <Text style={[styles.backdropResolution, { color: currentTheme.colors.highEmphasis }]}>
             {item.width} × {item.height}
           </Text>
-          <Text style={styles.backdropAspect}>
+          <Text style={[styles.backdropAspect, { color: currentTheme.colors.highEmphasis }]}>
             {item.aspect_ratio.toFixed(2)}:1
           </Text>
         </View>
@@ -173,13 +179,13 @@ const BackdropGalleryScreen: React.FC = () => {
         style={styles.backButton}
         onPress={() => navigation.goBack()}
       >
-        <MaterialIcons name="arrow-back" size={24} color="#fff" />
+        <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.highEmphasis} />
       </TouchableOpacity>
       <View style={styles.titleContainer}>
-        <Text style={styles.title} numberOfLines={1}>
+        <Text style={[styles.title, { color: currentTheme.colors.highEmphasis }]} numberOfLines={1}>
           {title}
         </Text>
-        <Text style={styles.subtitle}>
+        <Text style={[styles.subtitle, { color: currentTheme.colors.textMuted }]}>
           {backdrops.length} Backdrop{backdrops.length !== 1 ? 's' : ''}
         </Text>
       </View>
@@ -197,7 +203,7 @@ const BackdropGalleryScreen: React.FC = () => {
             );
           }}
         >
-          <MaterialIcons name="refresh" size={24} color="#fff" />
+          <MaterialIcons name="refresh" size={24} color={currentTheme.colors.highEmphasis} />
         </TouchableOpacity>
       )}
     </View>
@@ -209,8 +215,8 @@ const BackdropGalleryScreen: React.FC = () => {
         <StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
         {renderHeader()}
         <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color="#fff" />
-          <Text style={styles.loadingText}>Loading backdrops...</Text>
+          <ActivityIndicator size="large" color={currentTheme.colors.primary} />
+          <Text style={[styles.loadingText, { color: currentTheme.colors.textMuted }]}>Loading backdrops...</Text>
         </View>
       </SafeAreaView>
     );
@@ -222,8 +228,8 @@ const BackdropGalleryScreen: React.FC = () => {
         <StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
         {renderHeader()}
         <View style={styles.errorContainer}>
-          <MaterialIcons name="image-not-supported" size={64} color="rgba(255,255,255,0.5)" />
-          <Text style={styles.errorText}>
+          <MaterialIcons name="image-not-supported" size={64} color={currentTheme.colors.textMuted} />
+          <Text style={[styles.errorText, { color: currentTheme.colors.textMuted }]}>
             {error || 'No backdrops available'}
           </Text>
         </View>
@@ -238,7 +244,7 @@ const BackdropGalleryScreen: React.FC = () => {
 
       {/* Explanatory note */}
       <View style={styles.noteContainer}>
-        <Text style={styles.noteText}>
+        <Text style={[styles.noteText, { color: currentTheme.colors.textMuted }]}>
           Long press any backdrop to set it as your default for metadata screens and player loading overlay.
         </Text>
       </View>
@@ -277,12 +283,10 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: '700',
-    color: '#fff',
     marginBottom: 2,
   },
   subtitle: {
     fontSize: 14,
-    color: 'rgba(255,255,255,0.7)',
   },
   listContainer: {
     padding: 16,
@@ -307,12 +311,10 @@ const styles = StyleSheet.create({
   },
   backdropResolution: {
     fontSize: 12,
-    color: '#fff',
     opacity: 0.8,
   },
   backdropAspect: {
     fontSize: 12,
-    color: '#fff',
     opacity: 0.8,
   },
   selectedIndicator: {
@@ -337,7 +339,6 @@ const styles = StyleSheet.create({
   },
   noteText: {
     fontSize: 12,
-    color: 'rgba(255,255,255,0.7)',
     textAlign: 'center',
     lineHeight: 16,
   },
@@ -349,7 +350,6 @@ const styles = StyleSheet.create({
   loadingText: {
     marginTop: 12,
     fontSize: 16,
-    color: 'rgba(255,255,255,0.7)',
   },
   errorContainer: {
     flex: 1,
@@ -360,7 +360,6 @@ const styles = StyleSheet.create({
   errorText: {
     marginTop: 16,
     fontSize: 16,
-    color: 'rgba(255,255,255,0.7)',
     textAlign: 'center',
   },
 });
diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx
index fe0dd0f..5966743 100644
--- a/src/screens/MetadataScreen.tsx
+++ b/src/screens/MetadataScreen.tsx
@@ -109,15 +109,17 @@ const MetadataScreen: React.FC = () => {
     console.log('MetadataScreen: commentBottomSheetVisible changed to:', commentBottomSheetVisible);
   }, [commentBottomSheetVisible]);
 
-  // Load custom backdrop on mount
-  useEffect(() => {
-    const loadCustomBackdrop = async () => {
-      const backdropUrl = await getSelectedBackdropUrl('original');
-      setCustomBackdropUrl(backdropUrl);
-    };
+  // Load custom backdrop when screen comes into focus (for instant updates when returning from gallery)
+  useFocusEffect(
+    React.useCallback(() => {
+      const loadCustomBackdrop = async () => {
+        const backdropUrl = await getSelectedBackdropUrl('original');
+        setCustomBackdropUrl(backdropUrl);
+      };
 
-    loadCustomBackdrop();
-  }, []);
+      loadCustomBackdrop();
+    }, [])
+  );
 
   React.useEffect(() => {
     console.log('MetadataScreen: selectedComment changed to:', selectedComment?.id);
@@ -1009,20 +1011,19 @@ const MetadataScreen: React.FC = () => {
                 </View>
               )}
 
-              {/* Backdrop Gallery section - shown after details for movies/TV when TMDB ID is available */}
-              {shouldLoadSecondaryData && metadata?.tmdbId && (
+              {/* Backdrop Gallery section - shown after movie details for movies when TMDB ID is available */}
+              {shouldLoadSecondaryData && Object.keys(groupedEpisodes).length === 0 && metadata?.tmdbId && (
                 <View style={styles.backdropGalleryContainer}>
                   <TouchableOpacity
                     style={styles.backdropGalleryButton}
                     onPress={() => navigation.navigate('BackdropGallery' as any, {
                       tmdbId: metadata.tmdbId,
-                      type: Object.keys(groupedEpisodes).length > 0 ? 'tv' : 'movie',
+                      type: 'movie',
                       title: metadata.name || 'Gallery'
                     })}
                   >
-                    <MaterialIcons name="photo-library" size={24} color="#fff" />
-                    <Text style={styles.backdropGalleryText}>Backdrop Gallery</Text>
-                    <MaterialIcons name="chevron-right" size={24} color="#fff" />
+                    <Text style={[styles.backdropGalleryText, { color: currentTheme.colors.highEmphasis }]}>Backdrop Gallery</Text>
+                    <MaterialIcons name="chevron-right" size={24} color={currentTheme.colors.highEmphasis} />
                   </TouchableOpacity>
                 </View>
               )}
@@ -1135,6 +1136,23 @@ const MetadataScreen: React.FC = () => {
                   )}
                 </View>
               )}
+
+              {/* Backdrop Gallery section - shown after show details for TV shows when TMDB ID is available */}
+              {shouldLoadSecondaryData && Object.keys(groupedEpisodes).length > 0 && metadata?.tmdbId && (
+                <View style={styles.backdropGalleryContainer}>
+                  <TouchableOpacity
+                    style={styles.backdropGalleryButton}
+                    onPress={() => navigation.navigate('BackdropGallery' as any, {
+                      tmdbId: metadata.tmdbId,
+                      type: 'tv',
+                      title: metadata.name || 'Gallery'
+                    })}
+                  >
+                    <Text style={[styles.backdropGalleryText, { color: currentTheme.colors.highEmphasis }]}>Backdrop Gallery</Text>
+                    <MaterialIcons name="chevron-right" size={24} color={currentTheme.colors.highEmphasis} />
+                  </TouchableOpacity>
+                </View>
+              )}
             </Animated.View>
           </Animated.ScrollView>
         </>
@@ -1361,7 +1379,6 @@ const styles = StyleSheet.create({
   backdropGalleryButton: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
     paddingVertical: 16,
     paddingHorizontal: 20,
     backgroundColor: 'rgba(255,255,255,0.08)',
@@ -1373,8 +1390,6 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     fontWeight: '600',
-    color: '#fff',
-    marginLeft: 12,
     opacity: 0.9,
   },
 });