diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index bfad0c8..4fc96d7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -32,6 +32,11 @@ import Contact from "./pages/Contact";
 import Terms from "./pages/Terms";
 import Privacy from "./pages/Privacy";
 
+// New dedicated pages
+import Recommended from "./pages/Recommended";
+import TopTrending from "./pages/TopTrending";
+import TopRated from "./pages/TopRated";
+
 // Placeholder pages
 function Placeholder({ title }) {
   return <div style={{ padding: 40, textAlign: 'center', color: '#888' }}><h1>{title} (Coming Soon)</h1></div>;
@@ -63,9 +68,9 @@ export default function App() {
           <Route path="/terms" element={<Terms />} />
           <Route path="/privacy" element={<Privacy />} />
           <Route path="/discover" element={<Placeholder title="Discover" />} />
-          <Route path="/trending" element={<Placeholder title="Trending" />} />
-          <Route path="/top-rated" element={<Placeholder title="Top Rated" />} />
-          <Route path="/recommendations" element={<Placeholder title="Recommendations" />} />
+          <Route path="/trending" element={<TopTrending />} />
+          <Route path="/top-rated" element={<TopRated />} />
+          <Route path="/recommendations" element={<ProtectedRoute><Recommended /></ProtectedRoute>} />
           <Route path="/profile" element={<ProtectedRoute><UserProfile /></ProtectedRoute>} />
           <Route path="/forgot-password" element={ <PublicRoute> <ForgotPassword /></PublicRoute>}/>
 
diff --git a/frontend/src/components/ReviewComments.jsx b/frontend/src/components/ReviewComments.jsx
index 7206fe2..fe8cd1d 100644
--- a/frontend/src/components/ReviewComments.jsx
+++ b/frontend/src/components/ReviewComments.jsx
@@ -93,7 +93,7 @@ export default function ReviewComments({ reviewId, comments = [], onUpdate, isAu
                   {comment.user?.name?.[0]?.toUpperCase() || "?"}
                 </div>
                 <div className="flex-1">
-                  <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 relative group">
+                  <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 relative group">
                     <div className="flex items-center justify-between mb-1">
                       <span className="font-medium text-gray-900 dark:text-white">
                         {comment.user?.name || "Anonymous"}
@@ -151,7 +151,7 @@ export default function ReviewComments({ reviewId, comments = [], onUpdate, isAu
                       <textarea
                         value={editContent}
                         onChange={(e) => setEditContent(e.target.value)}
-                        className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="w-full p-2 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                         rows={2}
                         autoFocus
                       />
@@ -179,7 +179,7 @@ export default function ReviewComments({ reviewId, comments = [], onUpdate, isAu
               value={newComment}
               onChange={(e) => setNewComment(e.target.value)}
               placeholder="Add a comment..."
-              className="flex-1 min-w-0 rounded-lg bg-gray-50 dark:bg-gray-800/50 border border-gray-200/5 dark:border-white/10 px-4 py-2 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+              className="flex-1 min-w-0 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200/5 dark:border-gray-700 px-4 py-2 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
             />
             <button
               type="submit"
diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx
index 1598ae7..4ed4e22 100644
--- a/frontend/src/pages/Landing.jsx
+++ b/frontend/src/pages/Landing.jsx
@@ -295,7 +295,7 @@ export default function Landing() {
         {isLoggedIn() && recommended.length > 0 && (
           <RowCarousel
             title="Recommended for you"
-            to="/search?recommended=1"
+            to="/recommendations"
             items={recommended}
             loading={loading.recommended}
             onCardClick={(m) => navigate(`/movies/${m.id}`)}
@@ -304,7 +304,7 @@ export default function Landing() {
 
         <RowCarousel
           title="Trending Now"
-          to="/search?sort_by=popularity"
+          to="/trending"
           items={trending}
           loading={loading.trending}
           onCardClick={(m) => navigate(`/movies/${m.id}`)}
@@ -312,7 +312,7 @@ export default function Landing() {
 
         <RowCarousel
           title="Top Rated"
-          to="/search?sort_by=rating"
+          to="/top-rated"
           items={topRated}
           loading={loading.topRated}
           onCardClick={(m) => navigate(`/movies/${m.id}`)}
diff --git a/frontend/src/pages/Recommended.jsx b/frontend/src/pages/Recommended.jsx
new file mode 100644
index 0000000..fb50ffe
--- /dev/null
+++ b/frontend/src/pages/Recommended.jsx
@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import api from "../api/api";
+import { isLoggedIn } from "../utils/auth";
+
+const img = {
+  poster: (path) => path ? `https://image.tmdb.org/t/p/w500${path}` : '/images/no-image-300x450.png',
+};
+
+const ratingOf = (m) => {
+  const r = m?.rating ?? m?.vote_average;
+  const n = parseFloat(r);
+  return !isNaN(n) ? n.toFixed(1) : "N/A";
+};
+
+const yearOf = (m) => (m?.release_date ? m.release_date.slice(0, 4) : "—");
+
+function MovieCard({ movie, onClick }) {
+  return (
+    <motion.button
+      onClick={() => onClick?.(movie)}
+      className="group text-left rounded-xl border border-gray-200/50 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 hover:bg-white/80 dark:hover:bg-gray-800/60 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-lg transition-all duration-200 overflow-hidden"
+      whileHover={{ y: -2 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="aspect-[2/3] overflow-hidden rounded-t-xl">
+        <img
+          src={img.poster(movie.poster_path)}
+          alt={movie.title}
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="font-semibold text-gray-900 dark:text-white line-clamp-2 mb-1">{movie.title}</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{yearOf(movie)}</p>
+        <div className="flex items-center justify-between">
+          <div className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+            ⭐ {ratingOf(movie)}
+          </div>
+        </div>
+      </div>
+    </motion.button>
+  );
+}
+
+function SkeletonCard() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 overflow-hidden animate-pulse">
+      <div className="aspect-[2/3] bg-gray-200 dark:bg-gray-700"></div>
+      <div className="p-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+      </div>
+    </div>
+  );
+}
+
+export default function Recommended() {
+  const navigate = useNavigate();
+  const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      navigate('/login');
+      return;
+    }
+
+    const fetchRecommended = async () => {
+      try {
+        setLoading(true);
+        const response = await api.get('/recommended');
+        setMovies(response.data || []);
+      } catch (err) {
+        console.error('Error fetching recommendations:', err);
+        setError('Failed to load recommendations');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecommended();
+  }, [navigate]);
+
+  if (!isLoggedIn()) {
+    return null; // Will redirect above
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Recommended for You</h1>
+            <p className="text-red-500">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Recommended for You</h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            Personalized movie recommendations based on your viewing history and preferences
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {Array.from({ length: 18 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        ) : movies.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="mb-4 text-gray-400 text-6xl">🎬</div>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No Recommendations Yet</h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Start rating and watching movies to get personalized recommendations!
+            </p>
+            <button
+              onClick={() => navigate('/search')}
+              className="px-6 py-3 bg-yellow-500 text-black font-semibold rounded-lg hover:bg-yellow-600 transition-colors"
+            >
+              Explore Movies
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {movies.map((movie) => (
+              <MovieCard
+                key={movie.id}
+                movie={movie}
+                onClick={(m) => navigate(`/movies/${m.id}`)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ReviewDetails.jsx b/frontend/src/pages/ReviewDetails.jsx
index 1651298..94f7255 100644
--- a/frontend/src/pages/ReviewDetails.jsx
+++ b/frontend/src/pages/ReviewDetails.jsx
@@ -115,19 +115,19 @@ const ReviewDetails = () => {
 
   const renderStars = rating =>
     Array.from({ length: 5 }, (_, i) =>
-      i < rating ? <FaStar key={i} className="text-yellow-400" /> : <FaRegStar key={i} className="text-gray-400" />
+      i < rating ? <FaStar key={i} className="text-yellow-400" /> : <FaRegStar key={i} className="text-gray-400 dark:text-gray-500" />
     );
 
   const formatDate = dateString =>
     new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
 
+
   if (loading) return (
     <div className="min-h-screen bg-gray-50 dark:bg-black flex justify-center items-center pt-24">
       <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-red-600"></div>
     </div>
   );
 
-
   if (error) return <div className="min-h-screen bg-gray-50 dark:bg-black flex flex-col items-center justify-center text-red-400 pt-24">{error}</div>;
   if (!review) return <div className="min-h-screen bg-gray-50 dark:bg-black flex items-center justify-center text-gray-900 dark:text-white pt-24">No review found</div>;
 
@@ -137,9 +137,9 @@ const ReviewDetails = () => {
   const moviePoster = review.film?.poster_path ? `https://image.tmdb.org/t/p/w500${review.film.poster_path}` : null;
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 pt-24">
+    <div className="min-h-screen bg-gray-50 dark:bg-black pt-24">
       {/* Hero */}
-      <div className="relative h-96 bg-gray-200 dark:bg-gray-800">
+      <div className="relative h-96 bg-gray-200 dark:bg-gray-900">
         {movieBackdrop && (
           <div
             className="absolute inset-0 bg-cover bg-center"
@@ -147,7 +147,7 @@ const ReviewDetails = () => {
           ></div>
         )}
         <div className="absolute bottom-0 left-0 right-0 p-8 max-w-6xl mx-auto flex flex-col lg:flex-row gap-6">
-          {moviePoster && <img src={moviePoster} alt={review.film.title} className="w-48 h-72 object-cover rounded-xl shadow-2xl border-4 border-white" />}
+          {moviePoster && <img src={moviePoster} alt={review.film.title} className="w-48 h-72 object-cover rounded-xl shadow-2xl border-4 border-white dark:border-gray-800" />}
           <div className="flex-1 text-white">
             <h1 className="text-4xl font-bold">{review.film?.title || 'Movie Review'}</h1>
             <div className="flex items-center gap-6 mt-2 text-gray-300">
@@ -164,7 +164,7 @@ const ReviewDetails = () => {
 
       {/* Review Box */}
       <div className="max-w-6xl mx-auto p-8">
-        <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-xl">
+        <div className="bg-white dark:bg-gray-900/50 rounded-2xl p-6 shadow-2xl border border-gray-200/20 dark:border-gray-800/50 backdrop-blur-sm">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
             <div className="flex items-center gap-4">
               <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-xl font-bold">
@@ -179,10 +179,10 @@ const ReviewDetails = () => {
             {/* Action Buttons for Author Only */}
             {isAuthor && (
               <div className="flex items-center gap-2 flex-wrap">
-                <button onClick={handleEdit} className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
+                <button onClick={handleEdit} className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors shadow-lg">
                   <FaEdit /> Edit
                 </button>
-                <button onClick={handleDelete} className="flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg">
+                <button onClick={handleDelete} className="flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors shadow-lg">
                   <FaTrash /> Delete
                 </button>
               </div>
@@ -192,7 +192,7 @@ const ReviewDetails = () => {
             {isLoggedIn() && (
               <button
                 onClick={handleLike}
-                className={`flex items-center gap-2 px-4 py-2 rounded-lg ${isLiked ? 'bg-red-500 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}`}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${isLiked ? 'bg-red-500 hover:bg-red-600 text-white' : 'bg-gray-200/50 dark:bg-gray-700/50 hover:bg-gray-300/50 dark:hover:bg-gray-600/50 text-gray-700 dark:text-gray-300 border border-gray-300/20 dark:border-gray-600/30'}`}
               >
                 {isLiked ? <FaHeart /> : <FaRegHeart />} {likesCount}
               </button>
@@ -207,20 +207,20 @@ const ReviewDetails = () => {
                   value={editContent}
                   onChange={e => setEditContent(e.target.value)}
                   rows={6}
-                  className="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white resize-none"
+                  className="w-full p-4 border border-gray-300/30 dark:border-gray-600/40 rounded-lg bg-white/80 dark:bg-gray-800/60 text-gray-900 dark:text-white resize-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 backdrop-blur-sm"
                 />
                 <div className="flex gap-3">
-                  <button onClick={handleSaveEdit} className="px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">Save</button>
-                  <button onClick={handleCancelEdit} className="px-6 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg">Cancel</button>
+                  <button onClick={handleSaveEdit} className="px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors shadow-lg">Save</button>
+                  <button onClick={handleCancelEdit} className="px-6 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors shadow-lg">Cancel</button>
                 </div>
               </div>
             ) : (
-              <p className="text-gray-700 dark:text-gray-300 text-lg whitespace-pre-wrap">{review.content || 'No review content available.'}</p>
+              <p className="text-gray-700 dark:text-gray-300 text-lg leading-relaxed whitespace-pre-wrap">{review.content || 'No review content available.'}</p>
             )}
           </div>
 
           {/* Comments */}
-          <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <div className="mt-8 pt-6 border-t border-gray-200/30 dark:border-gray-700/50">
             <h4 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Comments</h4>
             {commentsLoading ? (
               <p className="text-gray-600 dark:text-gray-400 text-center py-4">Loading comments...</p>
diff --git a/frontend/src/pages/TopRated.jsx b/frontend/src/pages/TopRated.jsx
new file mode 100644
index 0000000..6658edf
--- /dev/null
+++ b/frontend/src/pages/TopRated.jsx
@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { getTopRatedFilms } from "../api/films";
+
+const img = {
+  poster: (path) => path ? `https://image.tmdb.org/t/p/w500${path}` : '/images/no-image-300x450.png',
+};
+
+const ratingOf = (m) => {
+  const r = m?.rating ?? m?.vote_average;
+  const n = parseFloat(r);
+  return !isNaN(n) ? n.toFixed(1) : "N/A";
+};
+
+const yearOf = (m) => (m?.release_date ? m.release_date.slice(0, 4) : "—");
+
+function MovieCard({ movie, onClick, index }) {
+  const rating = ratingOf(movie);
+  const numericRating = parseFloat(rating);
+  
+  // Rating color based on score
+  const getRatingColor = (rating) => {
+    if (rating >= 8.0) return "text-green-600 dark:text-green-400";
+    if (rating >= 7.0) return "text-yellow-600 dark:text-yellow-400";
+    return "text-orange-600 dark:text-orange-400";
+  };
+
+  return (
+    <motion.button
+      onClick={() => onClick?.(movie)}
+      className="group text-left rounded-xl border border-gray-200/50 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 hover:bg-white/80 dark:hover:bg-gray-800/60 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-lg transition-all duration-200 overflow-hidden relative"
+      whileHover={{ y: -2 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <div className="aspect-[2/3] overflow-hidden rounded-t-xl relative">
+        <img
+          src={img.poster(movie.poster_path)}
+          alt={movie.title}
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+        />
+        {/* Ranking badge */}
+        <div className="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded-full">
+          #{index + 1}
+        </div>
+        {/* Rating badge */}
+        <div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-medium px-2 py-1 rounded-full backdrop-blur">
+          ⭐ {rating}
+        </div>
+        {/* Quality indicator for high ratings */}
+        {numericRating >= 8.0 && (
+          <div className="absolute bottom-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">
+            🏆 CLASSIC
+          </div>
+        )}
+      </div>
+      <div className="p-4">
+        <h3 className="font-semibold text-gray-900 dark:text-white line-clamp-2 mb-1">{movie.title}</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{yearOf(movie)}</p>
+        <div className="flex items-center justify-between">
+          <div className={`text-sm font-bold ${getRatingColor(numericRating)}`}>
+            ⭐ {rating}
+          </div>
+          {movie.vote_count && (
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {movie.vote_count.toLocaleString()} votes
+            </div>
+          )}
+        </div>
+        {/* Genre display if available */}
+        {movie.genre_names && movie.genre_names.length > 0 && (
+          <div className="mt-2">
+            <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
+              {movie.genre_names[0]}
+            </span>
+          </div>
+        )}
+      </div>
+    </motion.button>
+  );
+}
+
+function SkeletonCard() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 overflow-hidden animate-pulse">
+      <div className="aspect-[2/3] bg-gray-200 dark:bg-gray-700"></div>
+      <div className="p-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+      </div>
+    </div>
+  );
+}
+
+export default function TopRated() {
+  const navigate = useNavigate();
+  const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchTopRatedMovies = async () => {
+      try {
+        setLoading(true);
+        const response = await getTopRatedFilms();
+        setMovies(response.data || []);
+      } catch (err) {
+        console.error('Error fetching top rated movies:', err);
+        setError('Failed to load top rated movies');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTopRatedMovies();
+  }, []);
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Top Rated Movies</h1>
+            <p className="text-red-500">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-3">
+            🏆 Top Rated Movies
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            The highest-rated movies of all time, curated by our community and critics
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {Array.from({ length: 18 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        ) : movies.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="mb-4 text-gray-400 text-6xl">🏆</div>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No Top Rated Movies Found</h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Something went wrong loading the top rated movies. Please try again later.
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="px-6 py-3 bg-yellow-500 text-black font-semibold rounded-lg hover:bg-yellow-600 transition-colors"
+            >
+              Refresh Page
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {movies.map((movie, index) => (
+              <MovieCard
+                key={movie.id}
+                movie={movie}
+                index={index}
+                onClick={(m) => navigate(`/movies/${m.id}`)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/TopTrending.jsx b/frontend/src/pages/TopTrending.jsx
new file mode 100644
index 0000000..5e2bec4
--- /dev/null
+++ b/frontend/src/pages/TopTrending.jsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { getTrendingFilms } from "../api/films";
+
+const img = {
+  poster: (path) => path ? `https://image.tmdb.org/t/p/w500${path}` : '/images/no-image-300x450.png',
+};
+
+const ratingOf = (m) => {
+  const r = m?.rating ?? m?.vote_average;
+  const n = parseFloat(r);
+  return !isNaN(n) ? n.toFixed(1) : "N/A";
+};
+
+const yearOf = (m) => (m?.release_date ? m.release_date.slice(0, 4) : "—");
+
+function MovieCard({ movie, onClick, index }) {
+  return (
+    <motion.button
+      onClick={() => onClick?.(movie)}
+      className="group text-left rounded-xl border border-gray-200/50 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 hover:bg-white/80 dark:hover:bg-gray-800/60 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-lg transition-all duration-200 overflow-hidden relative"
+      whileHover={{ y: -2 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <div className="aspect-[2/3] overflow-hidden rounded-t-xl relative">
+        <img
+          src={img.poster(movie.poster_path)}
+          alt={movie.title}
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+        />
+        {/* Trending badge */}
+        <div className="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
+          #{index + 1}
+        </div>
+        <div className="absolute top-2 right-2 bg-black/70 text-white text-xs font-medium px-2 py-1 rounded-full backdrop-blur">
+          🔥 Trending
+        </div>
+      </div>
+      <div className="p-4">
+        <h3 className="font-semibold text-gray-900 dark:text-white line-clamp-2 mb-1">{movie.title}</h3>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{yearOf(movie)}</p>
+        <div className="flex items-center justify-between">
+          <div className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+            ⭐ {ratingOf(movie)}
+          </div>
+          {movie.popularity && (
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {Math.round(movie.popularity)} views
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.button>
+  );
+}
+
+function SkeletonCard() {
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-white/10 bg-white/60 dark:bg-gray-800/40 overflow-hidden animate-pulse">
+      <div className="aspect-[2/3] bg-gray-200 dark:bg-gray-700"></div>
+      <div className="p-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-2"></div>
+        <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+      </div>
+    </div>
+  );
+}
+
+export default function TopTrending() {
+  const navigate = useNavigate();
+  const [movies, setMovies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchTrendingMovies = async () => {
+      try {
+        setLoading(true);
+        const response = await getTrendingFilms();
+        setMovies(response.data || []);
+      } catch (err) {
+        console.error('Error fetching trending movies:', err);
+        setError('Failed to load trending movies');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTrendingMovies();
+  }, []);
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Top Trending</h1>
+            <p className="text-red-500">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-black dark:text-gray-200 pt-24">
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-3">
+            🔥 Top Trending Movies
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400">
+            The hottest movies everyone is talking about right now
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {Array.from({ length: 18 }).map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        ) : movies.length === 0 ? (
+          <div className="text-center py-16">
+            <div className="mb-4 text-gray-400 text-6xl">🔥</div>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No Trending Movies Found</h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Something went wrong loading the trending movies. Please try again later.
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="px-6 py-3 bg-yellow-500 text-black font-semibold rounded-lg hover:bg-yellow-600 transition-colors"
+            >
+              Refresh Page
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+            {movies.map((movie, index) => (
+              <MovieCard
+                key={movie.id}
+                movie={movie}
+                index={index}
+                onClick={(m) => navigate(`/movies/${m.id}`)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file