diff --git a/src/hooks/useMetadata.ts b/src/hooks/useMetadata.ts
index d464c311..49b4e42a 100644
--- a/src/hooks/useMetadata.ts
+++ b/src/hooks/useMetadata.ts
@@ -150,8 +150,12 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
               
               if (isEpisode) {
                 setEpisodeStreams(updateState);
+                // Turn off loading when we get streams
+                setLoadingEpisodeStreams(false);
               } else {
                 setGroupedStreams(updateState);
+                // Turn off loading when we get streams
+                setLoadingStreams(false);
               }
             } else {
                logger.log(`🤷 [${logPrefix}:${sourceName}] No streams found for addon ${addonName} (${addonId})`);
@@ -634,15 +638,15 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
         return prev;
       });
 
+      // Add a delay before marking loading as complete to give Stremio addons more time
+      setTimeout(() => {
+        setLoadingStreams(false);
+      }, 10000); // 10 second delay to allow streams to load
+
     } catch (error) {
       console.error('❌ [loadStreams] Failed to load streams:', error);
       setError('Failed to load streams');
-    } finally {
-      // Loading is now complete when external sources finish, Stremio updates happen independently.
-      // We need a better way to track overall completion if we want a final 'FINISHED' log.
-      const endTime = Date.now() - startTime;
-      console.log(`🏁 [loadStreams] External sources FINISHED in ${endTime}ms`);
-      setLoadingStreams(false); // Mark loading=false, but Stremio might still be working
+      setLoadingStreams(false);
     }
   };
 
@@ -716,14 +720,15 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
         return prev;
       });
 
+      // Add a delay before marking loading as complete to give Stremio addons more time
+      setTimeout(() => {
+        setLoadingEpisodeStreams(false);
+      }, 10000); // 10 second delay to allow streams to load
+
     } catch (error) {
       console.error('❌ [loadEpisodeStreams] Failed to load episode streams:', error);
       setError('Failed to load episode streams');
-    } finally {
-      // Loading is now complete when external sources finish
-      const endTime = Date.now() - startTime;
-      console.log(`🏁 [loadEpisodeStreams] External sources FINISHED in ${endTime}ms`);
-      setLoadingEpisodeStreams(false); // Mark loading=false, but Stremio might still be working
+      setLoadingEpisodeStreams(false);
     }
   };
 
diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx
index c31daea6..7dd820cb 100644
--- a/src/screens/StreamsScreen.tsx
+++ b/src/screens/StreamsScreen.tsx
@@ -691,12 +691,12 @@ export const StreamsScreen = () => {
           >
             <LinearGradient
               colors={[
+                'rgba(0,0,0,0.2)',
                 'rgba(0,0,0,0.4)',
                 'rgba(0,0,0,0.6)',
-                'rgba(0,0,0,0.8)',
                 colors.darkBackground
               ]}
-              locations={[0, 0.3, 0.7, 1]}
+              locations={[0, 0.4, 0.7, 1]}
               style={styles.movieTitleGradient}
             >
               <View style={styles.movieTitleContent}>
@@ -738,12 +738,12 @@ export const StreamsScreen = () => {
                 <LinearGradient
                   colors={[
                     'rgba(0,0,0,0)',
-                    'rgba(0,0,0,0.4)',
-                    'rgba(0,0,0,0.6)',
-                    'rgba(0,0,0,0.8)',
+                    'rgba(0,0,0,0.3)',
+                    'rgba(0,0,0,0.5)',
+                    'rgba(0,0,0,0.7)',
                     colors.darkBackground
                   ]}
-                  locations={[0, 0.3, 0.5, 0.7, 1]}
+                  locations={[0, 0.4, 0.6, 0.8, 1]}
                   style={styles.streamsHeroGradient}
                 >
                   <View style={styles.streamsHeroContent}>
@@ -810,7 +810,7 @@ export const StreamsScreen = () => {
           )}
         </Animated.View>
 
-        {isLoading && Object.keys(streams).length === 0 ? (
+        {isLoading || (Object.keys(streams).length === 0 && (loadingStreams || loadingEpisodeStreams)) ? (
           <Animated.View 
             entering={FadeIn.duration(300)}
             style={styles.loadingContainer}
@@ -878,7 +878,7 @@ const createStyles = (colors: any) => StyleSheet.create({
     alignItems: 'center',
     gap: 8,
     padding: 14,
-    paddingTop: Platform.OS === 'android' ? 35 : 45,
+    paddingTop: Platform.OS === 'android' ? 20 : 15,
   },
   backButtonText: {
     color: colors.highEmphasis,
@@ -892,7 +892,7 @@ const createStyles = (colors: any) => StyleSheet.create({
     zIndex: 1,
   },
   streamsMainContentMovie: {
-    paddingTop: Platform.OS === 'android' ? 90 : 100,
+    paddingTop: Platform.OS === 'android' ? 10 : 15,
   },
   filterContainer: {
     paddingHorizontal: 16,
@@ -1074,7 +1074,7 @@ const createStyles = (colors: any) => StyleSheet.create({
   },
   streamsHeroContainer: {
     width: '100%',
-    height: 300,
+    height: 220,
     marginBottom: 0,
     position: 'relative',
     backgroundColor: colors.black,
@@ -1203,7 +1203,7 @@ const createStyles = (colors: any) => StyleSheet.create({
   },
   movieTitleContainer: {
     width: '100%',
-    height: 180,
+    height: 200,
     backgroundColor: colors.black,
     pointerEvents: 'box-none',
   },