diff --git a/src/components/player/modals/EpisodeStreamsModal.tsx b/src/components/player/modals/EpisodeStreamsModal.tsx
index 969687a..66bba44 100644
--- a/src/components/player/modals/EpisodeStreamsModal.tsx
+++ b/src/components/player/modals/EpisodeStreamsModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions, StyleSheet, Platform } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
-import Animated, { 
-  FadeIn, 
+import Animated, {
+  FadeIn,
   FadeOut,
   SlideInRight,
   SlideOutRight,
@@ -25,43 +25,31 @@ const MENU_WIDTH = Math.min(width * 0.85, 400);
 
 const QualityBadge = ({ quality }: { quality: string | null }) => {
   if (!quality) return null;
-  
+
   const qualityNum = parseInt(quality);
   let color = '#8B5CF6';
   let label = `${quality}p`;
-  
+
   if (qualityNum >= 2160) {
     color = '#F59E0B';
     label = '4K';
   } else if (qualityNum >= 1080) {
-    color = '#EF4444';
-    label = 'FHD';
+    color = '#3B82F6';
+    label = '1080p';
   } else if (qualityNum >= 720) {
     color = '#10B981';
-    label = 'HD';
+    label = '720p';
   }
-  
+
   return (
-    <View 
-      style={{
-        backgroundColor: `${color}20`,
-        borderColor: `${color}60`,
-        borderWidth: 1,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 8,
-        flexDirection: 'row',
-        alignItems: 'center',
-      }}
-    >
-      <Text style={{
-        color: color,
-        fontSize: 12,
-        fontWeight: '700',
-        letterSpacing: 0.5,
-      }}>
-        {label}
-      </Text>
+    <View style={{
+      backgroundColor: color,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 4,
+      marginLeft: 8,
+    }}>
+      <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
     </View>
   );
 };
@@ -89,35 +77,31 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
 
   const fetchStreams = async () => {
     if (!episode || !metadata?.id) return;
-    
+
     setIsLoading(true);
     setHasErrors([]);
     setAvailableStreams({});
-    
+
     try {
       const episodeId = episode.stremioId || `${metadata.id}:${episode.season_number}:${episode.episode_number}`;
       let completedProviders = 0;
       const expectedProviders = new Set<string>();
       const respondedProviders = new Set<string>();
-      
+
       const installedAddons = stremioService.getInstalledAddons();
-      const streamAddons = installedAddons.filter((addon: any) => 
+      const streamAddons = installedAddons.filter((addon: any) =>
         addon.resources && addon.resources.includes('stream')
       );
-      
+
       streamAddons.forEach((addon: any) => expectedProviders.add(addon.id));
-      
-      logger.log(`[EpisodeStreamsModal] Fetching streams for ${episodeId}, expecting ${expectedProviders.size} providers`);
-      
+
       await stremioService.getStreams('series', episodeId, (streams: any, addonId: any, addonName: any, error: any) => {
         completedProviders++;
         respondedProviders.add(addonId);
-        
+
         if (error) {
-          logger.warn(`[EpisodeStreamsModal] Error from ${addonName || addonId}:`, error);
           setHasErrors(prev => [...prev, `${addonName || addonId}: ${error.message || 'Unknown error'}`]);
         } else if (streams && streams.length > 0) {
-          // Update state incrementally for each provider
           setAvailableStreams(prev => ({
             ...prev,
             [addonId]: {
@@ -125,29 +109,20 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
               addonName: addonName || addonId
             }
           }));
-          logger.log(`[EpisodeStreamsModal] Added ${streams.length} streams from ${addonName || addonId}`);
-        } else {
-          logger.log(`[EpisodeStreamsModal] No streams from ${addonName || addonId}`);
         }
-        
+
         if (completedProviders >= expectedProviders.size) {
-          logger.log(`[EpisodeStreamsModal] All providers completed. Total providers responded: ${respondedProviders.size}`);
           setIsLoading(false);
         }
       });
-      
-      // Fallback timeout
+
       setTimeout(() => {
         if (respondedProviders.size === 0) {
-          logger.warn(`[EpisodeStreamsModal] Timeout: No providers responded`);
-          setHasErrors(prev => [...prev, 'Timeout: No providers responded']);
           setIsLoading(false);
         }
       }, 8000);
-      
+
     } catch (error) {
-      logger.error('[EpisodeStreamsModal] Error fetching streams:', error);
-      setHasErrors(prev => [...prev, `Failed to fetch streams: ${error}`]);
       setIsLoading(false);
     }
   };
@@ -158,36 +133,24 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
     return match ? match[1] : null;
   };
 
-  const handleClose = () => {
-    onClose();
-  };
-
   if (!visible) return null;
 
   const sortedProviders = Object.entries(availableStreams);
 
   return (
-    <>
+    <View style={StyleSheet.absoluteFill} zIndex={10000}>
       {/* Backdrop */}
-      <Animated.View 
-        entering={FadeIn.duration(200)}
-        exiting={FadeOut.duration(150)}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          zIndex: 9998,
-        }}
+      <TouchableOpacity
+        style={StyleSheet.absoluteFill}
+        activeOpacity={1}
+        onPress={onClose}
       >
-        <TouchableOpacity 
-          style={{ flex: 1 }}
-          onPress={handleClose}
-          activeOpacity={1}
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(150)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
         />
-      </Animated.View>
+      </TouchableOpacity>
 
       {/* Side Menu */}
       <Animated.View
@@ -199,242 +162,112 @@ export const EpisodeStreamsModal: React.FC<EpisodeStreamsModalProps> = ({
           right: 0,
           bottom: 0,
           width: MENU_WIDTH,
-          backgroundColor: '#1A1A1A',
-          zIndex: 9999,
-          elevation: 20,
-          shadowColor: '#000',
-          shadowOffset: { width: -5, height: 0 },
-          shadowOpacity: 0.3,
-          shadowRadius: 10,
-          borderTopLeftRadius: 20,
-          borderBottomLeftRadius: 20,
+          backgroundColor: '#0f0f0f',
+          borderLeftWidth: 1,
+          borderColor: 'rgba(255,255,255,0.1)',
         }}
       >
         {/* Header */}
         <View style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
+          paddingTop: Platform.OS === 'ios' ? 60 : 40,
           paddingHorizontal: 20,
-          paddingTop: 60,
           paddingBottom: 20,
-          borderBottomWidth: 1,
-          borderBottomColor: 'rgba(255, 255, 255, 0.08)',
         }}>
-          <View style={{ flex: 1 }}>
-            <Text style={{
-              color: '#FFFFFF',
-              fontSize: 18,
-              fontWeight: '700',
-            }}>
-              {episode?.name || 'Select Stream'}
-            </Text>
-            {episode && (
-              <Text style={{
-                color: 'rgba(255, 255, 255, 0.6)',
-                fontSize: 12,
-                marginTop: 4,
-              }}>
-                S{episode.season_number}E{episode.episode_number}
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <View style={{ flex: 1, marginRight: 10 }}>
+              <Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }} numberOfLines={1}>
+                {episode?.name || 'Sources'}
               </Text>
-            )}
+              {episode && (
+                <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 4 }}>
+                  S{episode.season_number} • E{episode.episode_number}
+                </Text>
+              )}
+            </View>
           </View>
-          <TouchableOpacity 
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: 18,
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-            onPress={handleClose}
-            activeOpacity={0.7}
-          >
-            <MaterialIcons name="close" size={20} color="#FFFFFF" />
-          </TouchableOpacity>
         </View>
 
-        <ScrollView 
-          style={{ flex: 1 }}
-          contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
+        <ScrollView
           showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
         >
-          {isLoading && (
-            <View style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.05)',
-              borderRadius: 16,
-              padding: 20,
-              alignItems: 'center',
-            }}>
-              <ActivityIndicator size="large" color="#3B82F6" />
-              <Text style={{
-                color: 'rgba(255, 255, 255, 0.6)',
-                fontSize: 14,
-                marginTop: 12,
-                textAlign: 'center',
-              }}>
-                Finding available streams...
-              </Text>
+          {isLoading && sortedProviders.length === 0 && (
+            <View style={{ padding: 40, alignItems: 'center' }}>
+              <ActivityIndicator color="white" />
+              <Text style={{ color: 'white', marginTop: 15, opacity: 0.6 }}>Finding sources...</Text>
             </View>
           )}
 
-          {!isLoading && sortedProviders.length > 0 && (
-            sortedProviders.map(([providerId, providerData]) => (
-              <View key={providerId} style={{ marginBottom: 30 }}>
-                <Text style={{
-                  color: 'rgba(255, 255, 255, 0.7)',
-                  fontSize: 14,
-                  fontWeight: '600',
-                  marginBottom: 15,
-                  textTransform: 'uppercase',
-                  letterSpacing: 0.5,
-                }}>
-                  {providerData.addonName} ({providerData.streams.length})
-                </Text>
-                
-                <View style={{ gap: 8 }}>
-                  {providerData.streams.map((stream, index) => {
-                    const quality = getQualityFromTitle(stream.title) || stream.quality;
-                    
-                    return (
-                      <TouchableOpacity
-                        key={`${providerId}-${index}`}
-                        style={{
-                          backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                          borderRadius: 16,
-                          padding: 16,
-                          borderWidth: 1,
-                          borderColor: 'rgba(255, 255, 255, 0.1)',
-                        }}
-                        onPress={() => onSelectStream(stream)}
-                        activeOpacity={0.7}
-                      >
-                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                          <View style={{ flex: 1 }}>
-                            <View style={{
-                              flexDirection: 'row',
-                              alignItems: 'center',
-                              marginBottom: 8,
-                              gap: 8,
-                            }}>
-                              <Text style={{
-                                color: '#FFFFFF',
-                                fontSize: 15,
-                                fontWeight: '500',
-                                flex: 1,
-                              }}>
-                                {stream.title || stream.name || `Stream ${index + 1}`}
-                              </Text>
-                              {quality && <QualityBadge quality={quality} />}
-                            </View>
-                            
-                            {(stream.size || stream.lang) && (
-                              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
-                                {stream.size && (
-                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                                    <MaterialIcons name="storage" size={14} color="rgba(107, 114, 128, 0.8)" />
-                                    <Text style={{
-                                      color: 'rgba(107, 114, 128, 0.8)',
-                                      fontSize: 12,
-                                      fontWeight: '600',
-                                      marginLeft: 4,
-                                    }}>
-                                      {(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
-                                    </Text>
-                                  </View>
-                                )}
-                                {stream.lang && (
-                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                                    <MaterialIcons name="language" size={14} color="rgba(59, 130, 246, 0.8)" />
-                                    <Text style={{
-                                      color: 'rgba(59, 130, 246, 0.8)',
-                                      fontSize: 12,
-                                      fontWeight: '600',
-                                      marginLeft: 4,
-                                    }}>
-                                      {stream.lang.toUpperCase()}
-                                    </Text>
-                                  </View>
-                                )}
-                              </View>
-                            )}
-                          </View>
-                          
-                          <View style={{
-                            marginLeft: 12,
-                            alignItems: 'center',
-                          }}>
-                            <MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
-                          </View>
-                        </View>
-                      </TouchableOpacity>
-                    );
-                  })}
-                </View>
-              </View>
-            ))
-          )}
-
-          {!isLoading && sortedProviders.length === 0 && hasErrors.length === 0 && (
-            <View style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.05)',
-              borderRadius: 16,
-              padding: 20,
-              alignItems: 'center',
-            }}>
-              <MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
-              <Text style={{
-                color: 'rgba(255, 255, 255, 0.6)',
-                fontSize: 16,
-                marginTop: 16,
-                textAlign: 'center',
-              }}>
-                No sources available
-              </Text>
+          {sortedProviders.map(([providerId, providerData]) => (
+            <View key={providerId} style={{ marginBottom: 20 }}>
               <Text style={{
                 color: 'rgba(255, 255, 255, 0.4)',
-                fontSize: 14,
-                marginTop: 8,
-                textAlign: 'center',
+                fontSize: 12,
+                fontWeight: '700',
+                marginBottom: 10,
+                marginLeft: 5,
+                textTransform: 'uppercase',
+                letterSpacing: 1,
               }}>
-                Try searching for different content
+                {providerData.addonName}
               </Text>
+
+              <View style={{ gap: 8 }}>
+                {providerData.streams.map((stream, index) => {
+                  const quality = getQualityFromTitle(stream.title) || stream.quality;
+
+                  return (
+                    <TouchableOpacity
+                      key={`${providerId}-${index}`}
+                      style={{
+                        padding: 8,
+                        borderRadius: 12,
+                        backgroundColor: 'rgba(255,255,255,0.05)',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.05)'
+                      }}
+                      onPress={() => {
+                        onSelectStream(stream);
+                        onClose();
+                      }}
+                      activeOpacity={0.7}
+                    >
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <View style={{ flex: 1 }}>
+                          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
+                            <Text style={{ color: 'white', fontWeight: '700', fontSize: 14, flex: 1 }} numberOfLines={1}>
+                              {stream.name || 'Unknown Source'}
+                            </Text>
+                            <QualityBadge quality={quality} />
+                          </View>
+                          {stream.title && (
+                            <Text style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11 }} numberOfLines={2}>
+                              {stream.title}
+                            </Text>
+                          )}
+                        </View>
+                      </View>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          ))}
+
+          {!isLoading && sortedProviders.length === 0 && (
+            <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
+              <MaterialIcons name="cloud-off" size={48} color="white" />
+              <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>No sources found</Text>
             </View>
           )}
 
-          {!isLoading && hasErrors.length > 0 && (
-            <View style={{
-              backgroundColor: 'rgba(239, 68, 68, 0.1)',
-              borderRadius: 16,
-              padding: 16,
-              marginBottom: 20,
-            }}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
-                <MaterialIcons name="error" size={20} color="#EF4444" />
-                <Text style={{
-                  color: '#EF4444',
-                  fontSize: 14,
-                  fontWeight: '600',
-                  marginLeft: 8,
-                }}>
-                  Errors occurred
-                </Text>
-              </View>
-              {hasErrors.map((error, index) => (
-                <Text key={index} style={{
-                  color: '#EF4444',
-                  fontSize: 12,
-                  marginTop: 4,
-                }}>
-                  {error}
-                </Text>
-              ))}
-            </View>
+          {hasErrors.length > 0 && (
+             <View style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', borderRadius: 12, padding: 12, marginTop: 10 }}>
+                <Text style={{ color: '#EF4444', fontSize: 11 }}>Sources might be limited due to provider errors.</Text>
+             </View>
           )}
         </ScrollView>
       </Animated.View>
-    </>
+    </View>
   );
 };
-