diff --git a/frontend/src/Components/LikesTab.js b/frontend/src/Components/LikesTab.js
index 0728e45a..f3c1ee98 100644
--- a/frontend/src/Components/LikesTab.js
+++ b/frontend/src/Components/LikesTab.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, StyleSheet, ScrollView, RefreshControl } from "react-native";
 import { useTheme } from "../styles/ThemeContext";
 import { getUserLikedPosts, getLikesOfPost, getLikesOfReview } from "../Services/LikesApiService";
 import { getCountCommentsOfPost, getCountCommentsOfReview, removePost, removeReview } from "../Services/PostsApiServices";
@@ -8,7 +8,7 @@ import Post from "./Post";
 import Review from "./Review";
 
 
-export default function LikesTab({ userInfo, userProfile, handleCommentPress, refreshing }) {
+export default function LikesTab({ userInfo, userProfile, handleCommentPress, refreshing, onRefresh }) {
     const [likedPosts, setLikedPosts] = useState([]);
     const [loading, setLoading] = useState(false);
     const { theme } = useTheme();
@@ -88,10 +88,11 @@ export default function LikesTab({ userInfo, userProfile, handleCommentPress, re
 
     useEffect(() => {
         fetchLikedPosts();
-    }, []);
+    }, [refreshing]);  
     
     const handleRefresh = () => {
         if (refreshing) {
+            console.log("refreshing");
             fetchLikedPosts();
         }
     };
diff --git a/frontend/src/Components/PostsTab.js b/frontend/src/Components/PostsTab.js
index 5bda0efa..33f7f27a 100644
--- a/frontend/src/Components/PostsTab.js
+++ b/frontend/src/Components/PostsTab.js
@@ -102,7 +102,9 @@ export default function PostsTab({ userInfo, userProfile, handleCommentPress, re
 
     useEffect(() => {
         fetchPostsAndReviews();
-    }, []);
+    }, [refreshing]);  
+
+
 
     if (refreshing) {
         console.log("refreshing");
diff --git a/frontend/src/Components/Review.js b/frontend/src/Components/Review.js
index c4310f1e..f6ff86d2 100644
--- a/frontend/src/Components/Review.js
+++ b/frontend/src/Components/Review.js
@@ -220,7 +220,7 @@ export default function Review({
           <Text style={styles.reviewButtonText}>Review</Text>
         </TouchableOpacity>
         <Pressable onPress={toggleModal} style={{ marginLeft: 10 }}>
-          <Icon name="more-vert" size={20} />
+          <Icon name="more-vert" size={20} color={theme.iconColor} />
         </Pressable>
       </View>
 
@@ -232,7 +232,7 @@ export default function Review({
           <Text style={styles.star}>
             <Icon name="star" size={22} color={"gold"} />
           </Text>
-          <Text>{rating}</Text>
+          <Text style={{ color: theme.textColor }}>{rating}</Text>
         </View>
       </View>
 
@@ -244,7 +244,7 @@ export default function Review({
           <Icon
             name={hasLiked ? 'favorite' : 'favorite-border'}
             size={20}
-            color={hasLiked ? 'red' : 'black'}
+            color={hasLiked ? 'red' : theme.iconColor}
             style={{ marginRight: 5 }}
           />
           <Text style={styles.statsNumber}>{likeCount}</Text>
@@ -254,7 +254,7 @@ export default function Review({
             onPress={() => {
               handleCommentPress(reviewId, true);
             }}>
-            <CommIcon name="comment-outline" size={20} style={styles.icon} />
+            <CommIcon name="comment-outline" size={20} style={styles.icon} color={theme.iconColor} />
           </Pressable>
           <Text style={styles.statsNumber}>{comments}</Text>
         </View>
diff --git a/frontend/src/Components/Watchlist.js b/frontend/src/Components/Watchlist.js
index 75f71ac5..2a671cb1 100644
--- a/frontend/src/Components/Watchlist.js
+++ b/frontend/src/Components/Watchlist.js
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, Image, Alert } from "react-native";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, Image, Alert, RefreshControl } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import { getUserWatchlists } from "../Services/UsersApiService";
 import { deleteWatchlist } from "../Services/ListApiService"; // Import the deleteWatchlist function
 import { useTheme } from "../styles/ThemeContext";
 
-const WatchlistTab = ({ userInfo }) => {
+const WatchlistTab = ({ userInfo , refreshing, onRefresh}) => {
 
     const [modalVisible, setModalVisible] = useState(false);
     const [selectedWatchlist, setSelectedWatchlist] = useState(null);
@@ -14,7 +14,7 @@ const WatchlistTab = ({ userInfo }) => {
     const navigation = useNavigation();
     const {theme} = useTheme();
         // Fetch user watchlists
-    useEffect(() => {
+    
         const fetchUserWatchlists = async () => {
             try {
                 const userId = userInfo.userId;
@@ -32,8 +32,18 @@ const WatchlistTab = ({ userInfo }) => {
             }
         };
 
+
+        useEffect(() => {
+            fetchUserWatchlists();
+        }, [refreshing]);  
+
+
+
+    if (refreshing) {
+        console.log("refreshing");
         fetchUserWatchlists();
-    }, []);
+    }
+
 
     const openOptionsMenu = (watchlist) => {
         setSelectedWatchlist(watchlist);
diff --git a/frontend/src/Screens/ExplorePage.js b/frontend/src/Screens/ExplorePage.js
index 9433a6d3..b95bac77 100644
--- a/frontend/src/Screens/ExplorePage.js
+++ b/frontend/src/Screens/ExplorePage.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { StyleSheet, Text, View, ScrollView, FlatList, TextInput } from 'react-native';
+import { StyleSheet, Text, View, ScrollView, FlatList, TextInput , RefreshControl} from 'react-native';
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { Ionicons } from '@expo/vector-icons';
 import { TouchableOpacity } from "react-native";
@@ -22,6 +22,7 @@ import Post from "../Components/Post";  // To render posts
 import Review from "../Components/Review";  // To render reviews
 import moment from "moment";
 import { useTheme } from '../styles/ThemeContext';
+import { colors, themeStyles } from "../styles/theme";
 import SearchBar from '../Components/SearchBar';
 
 
@@ -41,10 +42,10 @@ export default function ExplorePage({ route }) {
     const [recentRooms, setRecentRooms] = useState([]);
     const [searchResults, setSearchResults] = useState([]);
     const [sortedContent, setSortedContent] = useState([]);
+    const [refreshing, setRefreshing] = useState(false);
 
     const keywords = ["art", "city", "neon", "space", "movie", "night", "stars", "sky", "sunset", "sunrise"];
 
-    useEffect(() => {
         const fetchContent = async () => {
             try {
                 const friendsContent = await getFriendsOfFriendsContent(userInfo);
@@ -86,9 +87,10 @@ export default function ExplorePage({ route }) {
                 console.error('Error fetching content:', error);
             }
         };
-    
-        fetchContent();
-    }, [userInfo]);
+
+        useEffect(() => {
+            fetchContent();
+        }, [userInfo]);
 
     useFocusEffect(
         useCallback(() => {
@@ -133,14 +135,19 @@ export default function ExplorePage({ route }) {
             console.error("Failed to fetch friends content:", error);
         }
     }, [userInfo]);
+    
+    useEffect(() => {
+        if (userInfo) {
+            fetchFriendsContent();
+        }
+    }, [userInfo, fetchFriendsContent]);
+
+    const onRefresh = useCallback(async () => {
+        setRefreshing(true);
+        await Promise.all([fetchContent(), fetchFriendsContent()]);
+        setRefreshing(false);
+    }, []);
 
-    useFocusEffect(
-        useCallback(() => {
-            if (userInfo) {
-                fetchFriendsContent();
-            }
-        }, [userInfo, fetchFriendsContent])
-    );
 
     const handleOpenHub = () => {
         navigation.navigate("HubScreen", { userInfo });
@@ -305,7 +312,10 @@ export default function ExplorePage({ route }) {
     });    
     return (
         <View style={{ flex: 1, backgroundColor: useTheme.backgroundColor }}>
-            <ScrollView>
+            <ScrollView style={{ backgroundColor: theme.backgroundColor }}
+             refreshControl={
+                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
+            }>
             <SearchBar onChangeText={handleSearch} />
 
             {searchResults.length > 0 ? (
diff --git a/frontend/src/Screens/Home.js b/frontend/src/Screens/Home.js
index 0e7e827b..8258b496 100644
--- a/frontend/src/Screens/Home.js
+++ b/frontend/src/Screens/Home.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { StyleSheet, Text, View, StatusBar, Animated, Platform, Image, Dimensions, FlatList, Pressable, LogBox, SafeAreaView,ScrollView , TouchableOpacity,} from "react-native";
+import { StyleSheet, Text, View, StatusBar, Animated, Platform, Image, Dimensions, FlatList, Pressable, LogBox, SafeAreaView,ScrollView , TouchableOpacity, ActivityIndicator} from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useTheme } from "../styles/ThemeContext";
 import { colors, themeStyles } from "../styles/theme";
+import FastImage from 'react-native-fast-image';
 import Svg from "react-native-svg";
 import MovieCard from "../Components/MovieCard"
 import TrendingMovie from "../Components/TrendingMovies"
@@ -15,9 +16,13 @@ import {getFollowedUsersWatchlists} from "../Services/ListApiService"
 import BottomHeader from "../Components/BottomHeader";
 import Genres from "../Components/Genres";
 import Rating from "../Components/Rating";
+import Post from "../Components/Post";
+import Review from "../Components/Review";
 import HomeHeader from "../Components/HomeHeader";
+import CommentsModal from "../Components/CommentsModal";
 import moment from "moment";
-import { getPopularMovies, getMoviesByGenre, getMovieDetails, getNewMovies, getTopPicksForToday, fetchClassicMovies } from '../Services/TMDBApiService';
+import NonFollowerPost from "../Components/NonFollowerPost";
+import { getPopularMovies, getMoviesByGenre, getMovieDetails, getNewMovies, getTopPicksForToday, fetchClassicMovies, fetchCurrentlyPlayingMovies } from '../Services/TMDBApiService';
 import { getUserProfile, getFollowingCount, getFollowersCount } from "../Services/UsersApiService";
 import { getUserWatchlists } from "../Services/UsersApiService";
 
@@ -128,6 +133,7 @@ const Home = ({ route }) => {
     const [isPost, setIsPost] = useState(false);
     const [comments, setComments] = useState([]);
     const [loadingComments, setLoadingComments] = useState(false);
+    const [loading, setLoading] = useState(true);
     const [selectedPostId, setSelectedPostId] = useState(null); // Add this line
     // const [friendsContent, setFriendsContent] = useState([]);
     const [sortedContent, setSortedContent] = useState([]);
@@ -142,55 +148,36 @@ const Home = ({ route }) => {
     const [watchlists, setWatchlists] = useState([]);
 
 
+    
     useEffect(() => {
-        const fetchMoviesByGenres = async () => {
-          try {
-            const genreMoviesPromises = Object.entries(genres).map(async ([genreName, genreId]) => {
-              const movies = await getNewMovies(genreId); // Using the imported function here
-              return { genre: genreName, movies };
-            });
-
-            const fetchedMovies = await Promise.all(genreMoviesPromises);
-
-            const moviesByGenreData = fetchedMovies.reduce((acc, curr) => {
-              acc[curr.genre] = curr.movies;
-              return acc;
-            }, {});
-
-            setMoviesByGenre(moviesByGenreData);
-          } catch (error) {
-            console.error('Error fetching movies by genres:', error);
-          }
-        };
-
-        fetchMoviesByGenres(); 
-      }, []);
-
-      useEffect(() => {
         const fetchOTHERMovies = async () => {
           try {
-            const fetchedMovies = await getPopularMovies();
+            // Create an array of promises for parallel fetching
+            const moviePromises = [
+              getPopularMovies(),
+              getMoviesByGenre(53), // Thriller
+              getMoviesByGenre(35), // Comedy
+              getMoviesByGenre(28), // Romance
+            ];
+      
+            // Await all promises to resolve in parallel
+            const [fetchedMovies, fetchedThrillerMovies, fetchedComedyMovies, fetchedRomanceMovies] = await Promise.all(moviePromises);
+      
+            // Update the respective states after fetching
             setMovies1(fetchedMovies);
-
-            const fetchedThrillerMovies = await getMoviesByGenre(53);
             setThrillerMovies(fetchedThrillerMovies);
-
-            const fetchedComedyMovies = await getMoviesByGenre(35); 
             setComedyMovies(fetchedComedyMovies);
-
-            const fetchedRomanceMovies = await getMoviesByGenre(28); 
             setRomanceMovies(fetchedRomanceMovies);
-
+            
           } catch (error) {
             console.error('Error fetching movies:', error);
-          } finally {
-
           }
         };
-
-        fetchOTHERMovies(); 
+      
+        fetchOTHERMovies();
       }, []);
 
+
       const shuffleArray = (array) => {
         for (let i = array.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1));
@@ -204,29 +191,25 @@ const Home = ({ route }) => {
             try {
                 let moviesData = await getMovies();
                 moviesData = shuffleArray(moviesData); // Shuffle the movies array
-                setMovies([{ key: "empty-left" }, ...moviesData, { key: "empty-right" }]);
+                setMovies([{ key: "empty-left" }, ...moviesData.slice(0, 9), { key: "empty-right" }]);
             } catch (error) {
                 console.error("Failed to fetch movies:", error);
             }
         };
-
+        
         fetchMovies();
     }, []);
 
+
+
     useEffect(() => {
+
         const fetchUserWatchlists = async () => {
             try {
                 const userId = userInfo.userId;
-                let userWatchlists = await getUserWatchlists(userId);
-
-                //let userWatchlists = await getFollowedUsersWatchlists(userId);
-
-
-                // Remove duplicates based on watchlist IDs
-                // userWatchlists = userWatchlists.filter((watchlist, index, self) => 
-                //     index === self.findIndex((w) => w.id === watchlist.id)
-                // );
-
+                let userWatchlists = await getFollowedUsersWatchlists(userId);
+    
+        
                 setWatchlists(userWatchlists);
             } catch (error) {
                 console.error('Error fetching user watchlists:', error);
@@ -237,10 +220,48 @@ const Home = ({ route }) => {
         fetchUserWatchlists();
     }, []);
 
+    useEffect(() => {
+        const fetchMoviesByGenres = async () => {
+           try {
+              const genreMoviesPromises = Object.entries(genres).map(([genreName, genreId]) =>
+                 getNewMovies(genreId)
+              );
+      
+              const fetchedMovies = await Promise.all(genreMoviesPromises);
+      
+              const moviesByGenreData = Object.keys(genres).reduce((acc, genreName, index) => {
+                 acc[genreName] = fetchedMovies[index];
+                 return acc;
+              }, {});
+      
+              setMoviesByGenre(moviesByGenreData);
+           } catch (error) {
+              console.error('Error fetching movies by genres:', error);
+           }
+        };
+      
+        fetchMoviesByGenres(); 
+     }, []);
+
+
+
+    useEffect(() => {
+        const fetchMovies = async () => {
+            try {
+                const moviesData = await getMovies();
+                setMovies([{ key: "empty-left" }, ...moviesData, { key: "empty-right" }]);
+            } catch (error) {
+                console.error("Failed to fetch movies:", error);
+            }
+        };
+        
+        fetchMovies();
+    }, []);
+
 
     // useEffect(() => {
     //     let interval;
-
+    
     //     if (isAutoScrolling) {
     //         interval = setInterval(() => {
     //             if (activeIndex === 9) {
@@ -262,7 +283,7 @@ const Home = ({ route }) => {
     //             }
     //         }, 2000); // Adjust the interval as needed
     //     }
-
+    
     //     return () => clearInterval(interval);
     // }, [isAutoScrolling, activeIndex, movies1]);
     // const getItemLayout = (data, index) => ({
@@ -305,7 +326,7 @@ const Home = ({ route }) => {
         return <Loading />;
     }
 
-
+    
 
     const homeStyles = StyleSheet.create({
         container: {
@@ -333,6 +354,13 @@ const Home = ({ route }) => {
             overview={item.overview}
             rating={item.vote_average.toFixed(1)}
             date={new Date(item.release_date).getFullYear()}
+            imageComponent={
+                <FastImage
+                    style={{ width: 100, height: 150 }}
+                    source={{ uri: `https://image.tmdb.org/t/p/w500${item.poster_path}` }}
+                    resizeMode={FastImage.resizeMode.cover}
+                />
+            }
         />
     );
 
@@ -381,7 +409,7 @@ const Home = ({ route }) => {
 
                             return (
                                 <View style={{ width: ITEM_SIZE, paddingBottom: 0 }}>
-                                    <Pressable onPress={() => navigation.navigate("MovieDescriptionPage", { userInfo: userInfo, ...movieDetails })}>
+                                    <Pressable onPress={() => navigation.navigate("MovieDescriptionPage", { ...movieDetails, userInfo })}>
                                         <Animated.View
                                             style={{
                                                 marginHorizontal: SPACING,
@@ -400,7 +428,7 @@ const Home = ({ route }) => {
                                             <Text style={{ fontSize: 12, color: theme.textColor }} numberOfLines={3}>
                                                 {item.description}
                                             </Text>
-                                            <Pressable onPress={() => navigation.navigate("MovieDescriptionPage", { userInfo: userInfo, ...movieDetails })}>
+                                            <Pressable onPress={() => navigation.navigate("MovieDescriptionPage", { ...movieDetails })}>
                                                 <Text style={{ fontSize: 12, fontWeight: "500", color: theme.primaryColor, marginTop: 10 }}>Read more</Text>
                                             </Pressable>
                                         </Animated.View>
@@ -428,7 +456,7 @@ const Home = ({ route }) => {
 
 
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            {comedyMovies.slice(5, 24).map((movie, index) => (
+            {comedyMovies.slice(5, 16).map((movie, index) => (
 
                             <TrendingMovie
                                 key={index}
@@ -458,31 +486,30 @@ const Home = ({ route }) => {
             </View>
 
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            {watchlists.map((watchlist) => (
-                    <TouchableOpacity key={watchlist.id} style={styles.watchlistItem} onPress={() => goToWatchlistDetails(watchlist)}>
-                        <Image source={{  uri: watchlist.img ? watchlist.img : 'https://picsum.photos/seed/picsum/20/300' }} style={styles.watchlistImage} />
+            {watchlists.map((watchlist, index) => (
+                    <TouchableOpacity key={`${watchlist.id}-${index}`} style={styles.watchlistItem} onPress={() => goToWatchlistDetails(watchlist)}>
+                        {loading && (
+                <ActivityIndicator
+                    size="small"
+                    color={colors.primary}
+                    style={{ position: 'absolute', top: '50%', left: '50%', zIndex: 1 }} // Adjust position if necessary
+                />
+                        )}
+                        <Image source={{ uri: watchlist.img }} style={styles.watchlistImage} onLoadEnd={() => setLoading(false)}/>
                         <View style={styles.watchlistInfo}>
                             <Text style={{
-                fontSize: 12, // Ensure only one fontSize is set
-                color: theme.textColor,
-                paddingLeft: 16, // Padding should work
-
-//             {watchlists.map((watchlist, index) => (
-//                     <TouchableOpacity key={`${watchlist.id}-${index}`} style={styles.watchlistItem} onPress={() => goToWatchlistDetails(watchlist)}>
-//                         <Image source={{ uri: 'https://picsum.photos/seed/picsum/20/300' }} style={styles.watchlistImage} />
-//                         <View style={styles.watchlistInfo}>
-//                             <Text style={{
-//                 fontSize: 12,
-//                 color: theme.textColor, 
-
+                fontSize: 12,
+                color: theme.textColor, 
                 fontFamily: 'Roboto',
                 fontWeight: 'bold',
                 paddingTop: 10,
                 paddingBottom: 10,
                 textAlign: "center",
-            }}>{watchlist.name}</Text>
+            }} numberOfLines={1} // Limits the text to 1 line
+            ellipsizeMode="tail" 
+            >{watchlist.name}</Text>
                         </View>
-
+                       
                     </TouchableOpacity>
                 ))}
             </ScrollView>
@@ -501,7 +528,7 @@ const Home = ({ route }) => {
 
 
             <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            {romanceMovies.slice(0, 20).map((movie, index) => (
+            {romanceMovies.slice(0, 10).map((movie, index) => (
 
                             <TrendingMovie
                                 key={index}
@@ -558,7 +585,7 @@ const Home = ({ route }) => {
           </View>
 
           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            {moviesByGenre[genreName]?.slice(0, 20).map((movie, index) => (
+            {moviesByGenre[genreName]?.slice(0, 10).map((movie, index) => (
               <TrendingMovie
                 key={index}
                 movieId={movie.id}
@@ -613,7 +640,7 @@ const styles = StyleSheet.create({
         paddingTop: 10,
 
     },line: {
-        borderBottomColor: '#D3D3D3',  
+        borderBottomColor: 'transparent', 
         borderBottomWidth: 1,        
         marginVertical: 10,    
         paddingTop: 10,       
diff --git a/frontend/src/Screens/ProfilePage.js b/frontend/src/Screens/ProfilePage.js
index 2da563bd..3af9bb64 100644
--- a/frontend/src/Screens/ProfilePage.js
+++ b/frontend/src/Screens/ProfilePage.js
@@ -63,6 +63,7 @@ export default function ProfilePage({ route }) {
 
     const handleRefresh = () => {
         setRefreshing(true);
+        renderTabContent();
         fetchData().finally(() => setRefreshing(false));
     };
 
@@ -176,11 +177,11 @@ export default function ProfilePage({ route }) {
     const renderTabContent = () => {
         switch (activeTab) {
             case 'posts':
-                return <PostsTab userInfo={userInfo} userProfile={userProfile} handleCommentPress={handleCommentPress} />;
+                return <PostsTab userInfo={userInfo} userProfile={userProfile} handleCommentPress={handleCommentPress} refreshing={refreshing} handleRefresh={handleRefresh} />;
             case 'likes':
-                return <LikesTab userInfo={userInfo} userProfile={userProfile} handleCommentPress={handleCommentPress} />;
+                return <LikesTab userInfo={userInfo} userProfile={userProfile} handleCommentPress={handleCommentPress}  refreshing={refreshing} handleRefresh={handleRefresh} />;
             case 'watchlist':
-                return <WatchlistTab userInfo={userInfo} userProfile={userProfile} />;
+                return <WatchlistTab userInfo={userInfo} userProfile={userProfile}  refreshing={refreshing} handleRefresh={handleRefresh} />;
             default:
                 return null;
         }
@@ -196,7 +197,7 @@ export default function ProfilePage({ route }) {
 
     return (
         <View style={styles.container}>
-            <ScrollView contentContainerStyle={styles.scrollContent} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />} scrollbarThumbColor="rgba(0, 0, 0, 0)" showsVerticalScrollIndicator={false} >
+            <ScrollView contentContainerStyle={styles.scrollContent} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.primary} />} scrollbarThumbColor="rgba(0, 0, 0, 0)" showsVerticalScrollIndicator={false} >
                 <View style={styles.accountInfo}>
                     <Image
                         source={{ uri: userProfile.avatar }}
diff --git a/frontend/src/Screens/SearchPage.js b/frontend/src/Screens/SearchPage.js
index 0f128609..5172793f 100644
--- a/frontend/src/Screens/SearchPage.js
+++ b/frontend/src/Screens/SearchPage.js
@@ -3,6 +3,7 @@ import { StyleSheet, Text, View, TextInput, TouchableOpacity, ScrollView, Image,
 import { useNavigation } from "@react-navigation/native";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import IonIcon from "react-native-vector-icons/Ionicons";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { getPopularMovies, getMoviesByGenre, getMovieDetails, getNewMovies, getTopPicksForToday, fetchClassicMovies } from "../Services/TMDBApiService";
 import { searchMoviesFuzzy, getMovieByQuote } from "../Services/esSearchApiServices";
 import { useTheme } from "../styles/ThemeContext";
@@ -66,23 +67,39 @@ const SearchPage = ({ route }) => {
     useEffect(() => {
         const fetchPosters = async () => {
             const posters = {};
-            const usedPosters = new Set(); // set of posters that have been used
+            const usedPosters = new Set();
+            const cachedPosters = await AsyncStorage.getItem('cachedPosters');
+            const parsedCachedPosters = cachedPosters ? JSON.parse(cachedPosters) : {};
+    
             for (const [genreId, genreName] of sortedGenres) {
+                if (parsedCachedPosters[genreName]) {
+                    posters[genreName] = parsedCachedPosters[genreName];
+                    continue;
+                }
+    
                 const movies = await getMoviesByGenre(genreId);
                 if (movies.length > 0) {
                     let posterPath = `https://image.tmdb.org/t/p/w500${movies[0].poster_path}`;
                     let index = 0;
-                    // Ensure the poster is unique
                     while (usedPosters.has(posterPath) && index < movies.length) {
                         index++;
-                        posterPath = `https://image.tmdb.org/t/p/w500${movies[index].poster_path}`;
+                        if (index < movies.length) {
+                            posterPath = `https://image.tmdb.org/t/p/w500${movies[index].poster_path}`;
+                        } else {
+                            break;
+                        }
                     }
                     usedPosters.add(posterPath);
                     posters[genreName] = posterPath;
+
+                    parsedCachedPosters[genreName] = posterPath;
                 }
             }
+            
+            await AsyncStorage.setItem('cachedPosters', JSON.stringify(parsedCachedPosters));
             setGenrePosters(posters);
         };
+    
         fetchPosters();
     }, []);
 
@@ -237,6 +254,7 @@ const SearchPage = ({ route }) => {
             backgroundColor: "#00000080",
             flex: 1,
             textAlignVertical: "center",
+            justifyContent: "center",
         },
 
         grid: {