diff --git a/README.md b/README.md
new file mode 100644
index 0000000..dd846cf
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Deployed Web App - https://cine-scope-ten.vercel.app/
diff --git a/backend/addComment.php b/backend/addComment.php
index 9d41e0c..94f6d22 100644
--- a/backend/addComment.php
+++ b/backend/addComment.php
@@ -14,6 +14,7 @@
 
 $data = json_decode(file_get_contents("php://input"), true);
 
+// get user id, movie id, and comment content
 $user_id = $data["user_id"] ?? null;
 $movie_id = $data["movie_id"] ?? null;
 $content = $data["content"] ?? '';
diff --git a/backend/bookmark.php b/backend/bookmark.php
index 5c687a2..7b1585b 100644
--- a/backend/bookmark.php
+++ b/backend/bookmark.php
@@ -6,23 +6,23 @@
 
 require_once "db.php";
 
-// 1. Read raw input
+// read input
 $rawInput = file_get_contents("php://input");
 
-// DEBUG LOG — write raw input to file for inspection
+// debug log
 file_put_contents("debug_log.txt", $rawInput . PHP_EOL, FILE_APPEND);
 
-// 2. Decode JSON
+// decode JSON
 $data = json_decode($rawInput, true);
 
-// 3. Check if valid JSON
+// Check if JSON valid
 if (!is_array($data)) {
     http_response_code(400);
     echo json_encode(['error' => 'Invalid JSON input']);
     exit;
 }
 
-// 4. Extract parameters
+// extract user and movie
 $user_id = $data['user_id'] ?? null;
 $movie_id = $data['movie_id'] ?? null;
 
@@ -33,14 +33,14 @@
     exit;
 }
 
-// 6. Check if already bookmarked
+// Check if already bookmarked
 $stmt = $conn->prepare("SELECT id FROM lists WHERE user_id = ? AND movie_id = ?");
 $stmt->bind_param("ii", $user_id, $movie_id);
 $stmt->execute();
 $result = $stmt->get_result();
 
 if ($result && $result->num_rows > 0) {
-    // 7. Already bookmarked → remove
+    // already bookmarked, remove
     $delete = $conn->prepare("DELETE FROM lists WHERE user_id = ? AND movie_id = ?");
     $delete->bind_param("ii", $user_id, $movie_id);
     $success = $delete->execute();
@@ -51,7 +51,7 @@
     ]);
     $delete->close();
 } else {
-    // 8. Not bookmarked → insert
+    // not bookmarkedm, insert
     $insert = $conn->prepare("INSERT INTO lists (user_id, movie_id) VALUES (?, ?)");
     $insert->bind_param("ii", $user_id, $movie_id);
     $success = $insert->execute();
diff --git a/backend/changePassword.php b/backend/changePassword.php
index 9120ba2..8994d71 100644
--- a/backend/changePassword.php
+++ b/backend/changePassword.php
@@ -14,6 +14,7 @@
 
 $data = json_decode(file_get_contents("php://input"), true);
 
+// extract data
 $user_id = $data['user_id'] ?? '';
 $current_password = $data['current_password'] ?? '';
 $new_password = $data['new_password'] ?? '';
@@ -23,20 +24,20 @@
   exit;
 }
 
-// Get existing hashed password
+// get existing hashed password
 $stmt = $conn->prepare("SELECT password FROM users WHERE id = ?");
 $stmt->bind_param("i", $user_id);
 $stmt->execute();
 $result = $stmt->get_result();
 
 if ($row = $result->fetch_assoc()) {
-  // Validate current password
+  // validate current password
   if (!password_verify($current_password, $row['password'])) {
     echo json_encode(["error" => "Incorrect current password"]);
     exit;
   }
 
-  // Hash and update new password
+  // hash and update new password
   $new_hashed = password_hash($new_password, PASSWORD_DEFAULT);
   $updateStmt = $conn->prepare("UPDATE users SET password = ? WHERE id = ?");
   $updateStmt->bind_param("si", $new_hashed, $user_id);
diff --git a/backend/checkBookmark.php b/backend/checkBookmark.php
index 9d13d59..32e4e18 100644
--- a/backend/checkBookmark.php
+++ b/backend/checkBookmark.php
@@ -2,13 +2,13 @@
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json");
 
-// Include database connection
 require_once "db.php";
 
-// Get user_id and movie_id from GET request
+// GET user_id and movie_id 
 $user_id = $_GET['user_id'] ?? 0;
 $movie_id = $_GET['movie_id'] ?? 0;
 
+// by default, bookmarked = false
 $response = ['bookmarked' => false];
 
 if ($user_id && $movie_id) {
@@ -17,6 +17,7 @@
     $stmt->execute();
     $result = $stmt->get_result();
 
+    // if bookmarked, set bookmark as true
     if ($result && $result->num_rows > 0) {
         $response['bookmarked'] = true;
     }
diff --git a/backend/getAverageRating.php b/backend/getAverageRating.php
index e752939..0ba1f4d 100644
--- a/backend/getAverageRating.php
+++ b/backend/getAverageRating.php
@@ -13,11 +13,13 @@
     exit;
 }
 
+// sql search for the movie
 $stmt = $conn->prepare("SELECT AVG(score) AS average, COUNT(*) AS count FROM ratings WHERE movie_id = ?");
 $stmt->bind_param("i", $movie_id);
 $stmt->execute();
 $result = $stmt->get_result();
 
+// count = number of reviews in that movie
 if ($row = $result->fetch_assoc()) {
     echo json_encode([
         "average" => round((float)$row['average'], 1),
diff --git a/backend/getBookmarks.php b/backend/getBookmarks.php
index 2d206a9..15abf54 100644
--- a/backend/getBookmarks.php
+++ b/backend/getBookmarks.php
@@ -1,4 +1,6 @@
 <?php
+// get list of bookmarked movies by user
+
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json");
 
@@ -11,6 +13,7 @@
 
 $user_id = intval($_GET["user_id"]);
 
+// prepare sql statement, user_id = ?
 $sql = "SELECT m.id, m.title, m.genre, m.release_date
         FROM lists l
         JOIN movies m ON l.movie_id = m.id
@@ -23,6 +26,7 @@
 $result = $stmt->get_result();
 $bookmarks = [];
 
+// retrieve bookmarked movies
 while ($row = $result->fetch_assoc()) {
   $bookmarks[] = $row;
 }
diff --git a/backend/getComments.php b/backend/getComments.php
index b08a734..621c1f1 100644
--- a/backend/getComments.php
+++ b/backend/getComments.php
@@ -13,6 +13,7 @@
   exit;
 }
 
+// select content(comments), and name of user
 $sql = "SELECT c.content, u.name 
         FROM comments c 
         JOIN users u ON c.user_id = u.id 
diff --git a/backend/getMovie.php b/backend/getMovie.php
index 5815c5e..bcdb97f 100644
--- a/backend/getMovie.php
+++ b/backend/getMovie.php
@@ -1,4 +1,6 @@
 <?php
+// going to movie page
+
 error_reporting(E_ALL);
 ini_set('display_errors', 1);
 
@@ -14,6 +16,7 @@
   exit;
 }
 
+// select all attributes of movie based on its id
 $stmt = $conn->prepare("SELECT * FROM movies WHERE id = ?");
 $stmt->bind_param("i", $id);
 $stmt->execute();
diff --git a/backend/getMovies.php b/backend/getMovies.php
index 91d8427..637c679 100644
--- a/backend/getMovies.php
+++ b/backend/getMovies.php
@@ -1,4 +1,6 @@
 <?php
+// get movies to be shown in the home page
+
 error_reporting(E_ALL);
 ini_set('display_errors', 1);
 
@@ -12,6 +14,7 @@
     exit;
 }
 
+// limit to 20 movies ordered by the latest
 $sql = "SELECT id, title, genre, release_date FROM movies ORDER BY release_date DESC LIMIT 20";
 $result = $conn->query($sql);
 
diff --git a/backend/getPreference.php b/backend/getPreference.php
index cb5eef3..ca967f8 100644
--- a/backend/getPreference.php
+++ b/backend/getPreference.php
@@ -8,6 +8,7 @@
 
 $user_id = $_GET['user_id'] ?? 0;
 
+// get user genre preference
 $stmt = $conn->prepare("SELECT genre_preference FROM users WHERE id = ?");
 $stmt->bind_param("i", $user_id);
 $stmt->execute();
diff --git a/backend/getRating.php b/backend/getRating.php
index 4c7ac9d..d0f04ed 100644
--- a/backend/getRating.php
+++ b/backend/getRating.php
@@ -6,6 +6,7 @@
 
 require_once "db.php";
 
+// movie and user id as a foreign key of ratings
 $user_id = $_GET['user_id'] ?? 0;
 $movie_id = $_GET['movie_id'] ?? 0;
 
@@ -14,6 +15,7 @@
     exit;
 }
 
+// get score of a certain movie by the user
 $stmt = $conn->prepare("SELECT score FROM ratings WHERE user_id = ? AND movie_id = ?");
 $stmt->bind_param("ii", $user_id, $movie_id);
 $stmt->execute();
diff --git a/backend/getRecommended.php b/backend/getRecommended.php
index 119afdf..bf34b55 100644
--- a/backend/getRecommended.php
+++ b/backend/getRecommended.php
@@ -1,4 +1,6 @@
 <?php
+// 'for you' movie recommendations in home page for logged in users
+
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json");
 
@@ -11,12 +13,14 @@
   exit;
 }
 
+// explode genre array using ','
 $genre = explode(',', $genres);
 
 // WHERE clause with genres
 $conditions = array_map(fn($g) => "m.genre LIKE ?", $genre);
 $whereClause = implode(" OR ", $conditions);
 
+// select movies that have the same genre as the ones in user preference and ordered by average rating
 $sql = "
   SELECT m.*, ROUND(AVG(r.score), 2) AS average_rating
   FROM movies m
@@ -29,6 +33,7 @@
 
 $stmt = $conn->prepare($sql);
 
+// bind all genres
 $types = str_repeat("s", count($genre));
 $params = array_map(fn($g) => "%$g%", $genre);
 $stmt->bind_param($types, ...$params);
diff --git a/backend/getSearch.php b/backend/getSearch.php
index 9d67f39..3d20f83 100644
--- a/backend/getSearch.php
+++ b/backend/getSearch.php
@@ -1,31 +1,38 @@
 <?php
+// search and filtering movie
+
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json");
 
 require_once('db.php');
 
+// GET search parameters
 $title = $_GET['title'] ?? '';
 $genre = $_GET['genre'] ?? '';
 $language = $_GET['language'] ?? '';
 
+// 1=1 as placeholder since its true
 $sql = "SELECT id, title, genre, movies.language 
                 FROM movies
                 WHERE 1=1";
 $params = [];
 $types = "";
 
+// if user search by title
 if (!empty($title)) {
   $sql .= " AND title LIKE ?";
   $params[] = "%$title%";
   $types .= "s";
 }
 
+// if user search by genre
 if (!empty($genre)) {
   $sql .= " AND genre LIKE ?";
   $params[] = "%$genre%";
   $types .= "s";
 }
 
+// if user search by language
 if (!empty($language)) {
   $sql .= " AND language LIKE ?";
   $params[] = "%$language%";
diff --git a/backend/getUser.php b/backend/getUser.php
index 265450b..0864c8b 100644
--- a/backend/getUser.php
+++ b/backend/getUser.php
@@ -1,4 +1,6 @@
 <?php
+// retrieve user credentials for account management page
+
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json");
 
@@ -11,6 +13,7 @@
   exit;
 }
 
+// retrieve username and email
 $stmt = $conn->prepare("SELECT id, name, email FROM users WHERE id = ?");
 $stmt->bind_param("i", $user_id);
 $stmt->execute();
diff --git a/backend/login.php b/backend/login.php
index cc016fc..d3b7ab5 100644
--- a/backend/login.php
+++ b/backend/login.php
@@ -1,4 +1,6 @@
 <?php
+// login script
+
 header("Access-Control-Allow-Origin: *");
 header("Access-Control-Allow-Headers: Content-Type");
 header("Content-Type: application/json");
@@ -14,6 +16,7 @@
 $email = $data["email"] ?? '';
 $password = $data["password"] ?? '';
 
+// if fields are not filled
 if (!$email || !$password) {
   echo json_encode(["error" => "Missing email or password"]);
   exit;
@@ -24,6 +27,7 @@
 $stmt->execute();
 $result = $stmt->get_result();
 
+// if email not found
 if ($result->num_rows === 0) {
   echo json_encode(["error" => "User not found"]);
   exit;
@@ -31,6 +35,7 @@
 
 $user = $result->fetch_assoc();
 
+// check password with stored password using password_verify
 if (!password_verify($password, $user["password"])) {
   echo json_encode(["error" => "Incorrect password"]);
   exit;
diff --git a/backend/removeFromList.php b/backend/removeFromList.php
index 22c0643..eebd23d 100644
--- a/backend/removeFromList.php
+++ b/backend/removeFromList.php
@@ -1,10 +1,12 @@
 <?php
+// remove bookmarked movie from list
+
 header("Access-Control-Allow-Origin: *");
 header("Access-Control-Allow-Headers: Content-Type");
 header("Access-Control-Allow-Methods: POST");
 header("Content-Type: application/json");
 
-$conn = new mysqli("localhost", "root", "", "cinescope");
+require_once "db.php";
 
 $data = json_decode(file_get_contents("php://input"));
 
diff --git a/backend/updatePreference.php b/backend/updatePreference.php
index 90905fd..2bc4598 100644
--- a/backend/updatePreference.php
+++ b/backend/updatePreference.php
@@ -11,9 +11,11 @@
 $user_id = $data['user_id'] ?? 0;
 $genre = $data['genre_preference'] ?? '';
 
+// prepare statement for incoming genre_preference changes to the user
 $stmt = $conn->prepare("UPDATE users SET genre_preference = ? WHERE id = ?");
 $stmt->bind_param("si", $genre, $user_id);
 
+// update genre_preference
 $success = $stmt->execute();
 echo json_encode(["success" => $success]);
 
diff --git a/frontend/app/account/page.tsx b/frontend/app/account/page.tsx
index ab623a1..17978cd 100644
--- a/frontend/app/account/page.tsx
+++ b/frontend/app/account/page.tsx
@@ -5,7 +5,7 @@ import MovieCard from '@/components/MovieCard'
 import BookmarkCard from '@/components/BookmarkCard'
 
 
-// Types
+// provide type for the movie object
 type Movie = {
   id: number
   title: string
@@ -38,17 +38,20 @@ export default function AccountPage() {
     if (id) {
       setUserId(parseInt(id))
 
+      // fetch user data from the backend scripts
       fetch(`${BASE_URL}/getUser.php?id=${id}`)
         .then(res => res.json())
         .then(data => {
           setEmail(data.email || '')
           setUsername(data.name || '')
         })
-
+      
+      // fetch bookmarks from the backend scripts
       fetch(`${BASE_URL}/getBookmarks.php?user_id=${id}`)
         .then(res => res.json())
         .then(data => setBookmarks(data))
 
+      // fetch genre preferences from the backend scripts
       fetch(`${BASE_URL}/getPreference.php?user_id=${id}`)
         .then(res => res.json())
         .then(data => {
@@ -65,11 +68,12 @@ export default function AccountPage() {
     )
   }
 
-  // user genre preference
+  // save genre preferences to the backend scripts
   const handleGenreSave = async () => {
     if (!userId) return
     const genre_preference = selectedGenres.join(',')
 
+
     const res = await fetch(`${BASE_URL}/updatePreference.php`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -115,6 +119,7 @@ export default function AccountPage() {
             { label: "Genre Preference", key: "preferences" },
             { label: "Security", key: "security" },
           ].map(tab => (
+            // chekcs if the tab is selected and applies styles accordingly
             <button
               key={tab.key}
               onClick={() => setActiveTab(tab.key)}
@@ -146,6 +151,7 @@ export default function AccountPage() {
             </div>
           )}
 
+          {/* switches between tabs depending on which is selected */}
           {activeTab === 'bookmarks' && (
             <div>
               <h2 className="text-2xl font-bold mb-4">Your Bookmarked Movies</h2>
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 8f85e6a..6537e11 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -13,13 +13,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body className="relative overflow-x-hidden text-gray-900 font-sans min-h-screen flex flex-col">
         <div className="fixed top-0 left-0 w-screen h-screen z-[-1] bg-gradient-to-b from-[#181225] to-[#2c1c2e]" />
-
-        {/* Sticky Header */}
         <div className="sticky top-0 z-50">
           <Header />
         </div>
-
-        {/* Main Content */}
         <main className="flex-1 z-10 px-4">
           <div className="max-w-6xl mx-auto">
             {children}
diff --git a/frontend/app/movie/[id]/page.tsx b/frontend/app/movie/[id]/page.tsx
index 4cfceea..3284263 100644
--- a/frontend/app/movie/[id]/page.tsx
+++ b/frontend/app/movie/[id]/page.tsx
@@ -20,6 +20,7 @@ type Movie = {
   poster_path?: string
 }
 
+// API to get images and connect to the backend
 const BASE_URL = process.env.NEXT_PUBLIC_API_BASE;
 const TMDB_API_KEY = process.env.NEXT_PUBLIC_TMDB_KEY
 
@@ -29,18 +30,19 @@ export default function MoviePage() {
   const [hasImageError, setHasImageError] = useState(false)
   const [posterPath, setPosterPath] = useState<string>('')
   const userId = typeof window !== "undefined" ? localStorage.getItem("user_id") : null
-  // average rating
   const [avgRating, setAvgRating] = useState<number | null>(null)
   const [ratingCount, setRatingCount] = useState<number>(0)
 
   useEffect(() => {
     if (!id) return
 
+    // fetch movie data from the backend scripts asynchronously
     fetch(`${BASE_URL}/getMovie.php?id=${id}`)
       .then(res => res.json())
       .then(async (data: Movie) => {
         setMovie(data)
 
+        // using try catch to handle errors and fetch data from the TMDb API
         try {
           const tmdbRes = await fetch(
             `https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(data.title)}&api_key=${TMDB_API_KEY}`
@@ -54,6 +56,7 @@ export default function MoviePage() {
         }
       })
 
+    // fetching average rating from the backend scripts 
     fetch(`${BASE_URL}/getAverageRating.php?movie_id=${id}`)
       .then(res => res.json())
       .then(data => {
@@ -70,7 +73,7 @@ export default function MoviePage() {
     <div className="max-w-6xl mx-auto py-10 px-4">
       <div className="bg-transparent border-b border-l border-r text-white rounded-xl shadow pb-6 mb-10">
 
-        {/* Poster Image */}
+        {/* displays poster image */}
         {posterPath && (
           <img
             src={hasImageError || !posterPath ? "/fallback_width.png" : posterPath}
@@ -79,13 +82,9 @@ export default function MoviePage() {
             className="w-full h-auto rounded-xl object-cover mb-6"
           />
         )}
-
-        {/* Flex Container */}
         <div className="flex flex-col md:flex-row gap-10 px-8 py-6">
-
-          {/* Left Section */}
           <div className="flex-1 max-w-2xl">
-            {/* Title with underline */}
+  
             <div className="pb-4 border-b border-gray-600 mb-4">
               <div className="flex justify-between items-start gap-4 flex-wrap">
                 <h1 className="text-3xl font-bold">{movie.title}</h1>
@@ -96,7 +95,6 @@ export default function MoviePage() {
             </div>
             <p className="text-gray-300 mb-4">{movie.overview}</p>
 
-            {/* Right Section (for small screens - stacked) */}
             <div className="md:hidden mb-6">
               <div className="space-y-4 text-sm">
                 <div>
@@ -120,7 +118,6 @@ export default function MoviePage() {
 
           <div className="hidden md:flex flex-col justify-between text-sm text-right ml-auto w-[300px]">
             <div className="space-y-4">
-              
             <div className="flex flex-col items-end">
               <p className="text-gray-400">Ratings:</p>
 
@@ -130,7 +127,6 @@ export default function MoviePage() {
                   : "No ratings yet"}
               </div>
 
-              {/* Always show stars, read-only if not logged in */}
               <div className="mt-1">
                 <RatingStars
                   movieId={parseInt(id)}
@@ -138,8 +134,7 @@ export default function MoviePage() {
                   readonly={!userId}
                 />
               </div>
-
-              {/* Optional login prompt */}
+              {/* checks whether user is logged in or not and if not displays warning message to log in to rate movie */}
               {!userId && (
                 <p className="text-xs text-gray-400 italic mt-1">
                   Log in to rate this movie.
@@ -158,25 +153,32 @@ export default function MoviePage() {
                 </p>
               </div>
             </div>
-
+            
             <div className="mt-auto">
               <BookmarkButton movieId={parseInt(id)} userId={userId ? parseInt(userId) : null} />
             </div>
           </div>
-          
-          {/* Small screen alternative for ratings, language, date, bookmark */}
+
           <div className="md:hidden mt-8 border-t border-gray-600 pt-4 space-y-4 text-sm">
-            {userId && (
-              <div>
-                <p className="text-gray-400 font-semibold">Ratings:</p>
-                <RatingStars movieId={parseInt(id)} userId={parseInt(userId)} />
-                {avgRating !== null && (
-                  <p className="text-sm text-white mt-1">
-                    {avgRating} / 5 ({ratingCount} review{ratingCount !== 1 ? 's' : ''})
-                  </p>
-                )}
-              </div>
-            )}
+            <div>
+              <p className="text-gray-400 font-semibold">Ratings:</p>
+              <RatingStars
+                movieId={parseInt(id)}
+                userId={userId ? parseInt(userId) : null}
+                readonly={!userId}
+              />
+              {avgRating !== null && (
+                <p className="text-sm text-white mt-1">
+                  {avgRating} / 5 ({ratingCount} review{ratingCount !== 1 ? 's' : ''})
+                </p>
+              )}
+              {/* checks whether user is logged in or not and if not displays warning message to log in to rate movie for different size screens*/}
+              {!userId && (
+                <p className="text-xs text-gray-400 italic mt-1">
+                  Log in to rate this movie.
+                </p>
+              )}
+            </div>
 
             <div>
               <p className="text-gray-400">Language:</p>
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 0999f21..9ed6fc4 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -19,6 +19,7 @@ export default function Home() {
   const [recommended, setRecommended] = useState<Movie[]>([])
   const [userId, setUserId] = useState<number | null>(null)
 
+  // Fetch movies to display on the home page
   useEffect(() => {
     fetch(`${BASE_URL}/getMovies.php`)
       .then(res => res.json())
@@ -29,6 +30,7 @@ export default function Home() {
     if (id) {
       setUserId(parseInt(id))
   
+      // Fetch user preferences and recommended movies
       fetch(`${BASE_URL}/getPreference.php?user_id=${id}`)
         .then(res => res.json())
         .then(data => {
@@ -65,6 +67,7 @@ export default function Home() {
     </>
   )}
 
+  {/* displays movies and sorts by release date */}
   <h2 className="text-3xl font-bold mb-6">Latest Movies</h2>
   <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 py-8">
     {movies
diff --git a/frontend/app/search/page.tsx b/frontend/app/search/page.tsx
index e82c855..a5c2cb8 100644
--- a/frontend/app/search/page.tsx
+++ b/frontend/app/search/page.tsx
@@ -38,8 +38,8 @@ export default function SearchPage() {
   const [selectedLanguage, setSelectedLanguage] = useState('')
 
   useEffect(() => {
+    // Fetch movies from the backend scripts
     const url = new URL(`${BASE_URL}/getSearch.php`)
-    // append parameters to URL for GET function
     if (searchTerm) url.searchParams.append('title', searchTerm)
     if (selectedGenre) url.searchParams.append('genre', selectedGenre)
     if (selectedLanguage) url.searchParams.append('language', selectedLanguage)
@@ -56,7 +56,9 @@ export default function SearchPage() {
         const enriched = await Promise.all(
           limitedData.map(async (movie: any) => {
             let poster_path = ''
+            // Check if the movie has a poster_path
             try {
+              // Fetch poster path from TMDb API
               const tmdbRes = await fetch(
                 `https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(movie.title)}&api_key=${TMDB_API_KEY}`
               )
@@ -91,7 +93,6 @@ export default function SearchPage() {
       <h2 className="text-3xl font-bold mb-6 ">Search & Filter Movies</h2>
 
       <div className="py-10 flex flex-col items-center justify-center mb-8">
-        {/* Search Input Group */}
         <div className="relative w-full max-w-xl">
           <input
             type="text"
@@ -101,7 +102,7 @@ export default function SearchPage() {
             className="w-full pl-6 pr-14 py-3 rounded-full bg-transparent text-white placeholder-gray-400 border border-white focus:outline-none"
           />
           <button
-            onClick={() => { }} // You can trigger the search manually here if needed
+            onClick={() => { }} 
             className="absolute right-1 top-1/2 transform -translate-y-1/2 text-white p-2 rounded-full transition duration-300 outline-gray-600 hover:bg-gradient-to-r hover:from-fuchsia-600 hover:to-violet-900"
           >
             <AiOutlineSearch size={24} />
@@ -146,7 +147,7 @@ export default function SearchPage() {
               ))}
             </select>
 
-            {/* Custom dropdown arrow on the right */}
+            {/* dropdown tab */}
             <div className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -162,10 +163,9 @@ export default function SearchPage() {
         </div>
       </div>
 
-      {/* Movie Cards */}
+      {/* movie cards */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
         {movies.map(movie => (
-          // <Link key={movie.id} href={`/movie/${movie.id}`}>
             <MovieCard
               key={movie.id}
               id={movie.id}
diff --git a/frontend/app/watchlist/page.tsx b/frontend/app/watchlist/page.tsx
index f8ad1cc..d50cece 100644
--- a/frontend/app/watchlist/page.tsx
+++ b/frontend/app/watchlist/page.tsx
@@ -19,6 +19,7 @@ export default function WatchlistPage() {
     const id = localStorage.getItem('user_id')
     setUserId(id)
 
+    // Fetch bookmarked movies from the backend scripts
     if (id) {
       fetch(`${BASE_URL}/getBookmarks.php?user_id=${id}`)
         .then(res => res.json())
diff --git a/frontend/components/AuthForm.tsx b/frontend/components/AuthForm.tsx
index 59375f5..0b7028b 100644
--- a/frontend/components/AuthForm.tsx
+++ b/frontend/components/AuthForm.tsx
@@ -21,16 +21,19 @@ const AuthForm = ({ mode }: Props) => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
   
+    // Choose the correct endpoint based on mode
     const endpoint =
       mode === "signup"
         ? `${BASE_URL}/signup.php`
         : `${BASE_URL}/login.php`;
   
+    // Payload changes depending on signup or login
     const payload =
       mode === "signup"
         ? { name, email, password }
         : { email, password };
   
+    // send POST request to the backend scripts
     try {
       const res = await fetch(endpoint, {
         method: "POST",
diff --git a/frontend/components/Bookmark.tsx b/frontend/components/Bookmark.tsx
index 1e6eb66..12aefad 100644
--- a/frontend/components/Bookmark.tsx
+++ b/frontend/components/Bookmark.tsx
@@ -7,6 +7,7 @@ const BASE_URL = process.env.NEXT_PUBLIC_API_BASE;
 export default function Bookmark({ movieId, userId }: { movieId: number; userId: number }) {
   const [bookmarked, setBookmarked] = useState(false)
 
+  // adds the movie to the user's watchlist
   const handleBookmark = async () => {
     await fetch(`${BASE_URL}/addToList.php`, {
       method: 'POST',
diff --git a/frontend/components/BookmarkButton.tsx b/frontend/components/BookmarkButton.tsx
index 3b9e995..5ec4908 100644
--- a/frontend/components/BookmarkButton.tsx
+++ b/frontend/components/BookmarkButton.tsx
@@ -23,11 +23,12 @@ export default function BookmarkButton({ movieId, userId }: Props) {
 
   const handleBookmark = async () => {
 
+    // prevents bookmarking if the user is not logged in
     if (!userId) {
       setMessage("You must be logged in to bookmark movies.")
       return
     }
-
+    // Prevent duplicate bookmarking
     if (bookmarked) return
 
     try {
diff --git a/frontend/components/BookmarkCard.tsx b/frontend/components/BookmarkCard.tsx
index 7e4ac4b..cbaa955 100644
--- a/frontend/components/BookmarkCard.tsx
+++ b/frontend/components/BookmarkCard.tsx
@@ -17,6 +17,7 @@ const BASE_URL = process.env.NEXT_PUBLIC_API_BASE;
 export default function BookmarkCard({ id, title, release_date, onRemove }: Props) {
   const [posterPath, setPosterPath] = useState<string | null>(null)
 
+  // Fetch poster path from TMDb API
   useEffect(() => {
     const fetchPoster = async () => {
       const apiKey = process.env.NEXT_PUBLIC_TMDB_KEY
@@ -53,33 +54,30 @@ export default function BookmarkCard({ id, title, release_date, onRemove }: Prop
 
   return (
     <div className="relative group rounded-2xl overflow-hidden shadow hover:shadow-lg transition duration-300 hover:scale-105">
-  {/* Make whole clickable part inside Link */}
-  <Link href={`/movie/${id}`}>
-    <div>
-      <Image
-        src={posterPath ? `https://image.tmdb.org/t/p/w500${posterPath}` : "/fallback.png"}
-        alt={title}
-        width={500}
-        height={750}
-        className="w-full h-auto object-cover"
-      />
+      <Link href={`/movie/${id}`}>
+        <div>
+          <Image
+            src={posterPath ? `https://image.tmdb.org/t/p/w500${posterPath}` : "/fallback.png"}
+            alt={title}
+            width={500}
+            height={750}
+            className="w-full h-auto object-cover"
+          />
 
-      {/* Overlay Info */}
-      <div className="absolute inset-0 flex flex-col justify-end opacity-0 group-hover:opacity-100 text-white p-4 transition bg-black/40">
-        <h3 className="text-lg font-bold">{title}</h3>
-        <p className="text-sm text-gray-300">{new Date(release_date).getFullYear()}</p>
-      </div>
+          {/* Overlay Info */}
+          <div className="absolute inset-0 flex flex-col justify-end opacity-0 group-hover:opacity-100 text-white p-4 transition bg-black/40">
+            <h3 className="text-lg font-bold">{title}</h3>
+            <p className="text-sm text-gray-300">{new Date(release_date).getFullYear()}</p>
+          </div>
+        </div>
+      </Link>
+      <button
+        onClick={handleRemove}
+        className="absolute top-2 right-2 bg-black/70 p-2 rounded-full text-white opacity-0 group-hover:opacity-100 cursor-pointer hover:bg-red-700 transition duration-300"
+        title="Remove from bookmarks"
+      >
+        <AiFillDelete size={20} />
+      </button>
     </div>
-  </Link>
-
-  {/* Delete Button OUTSIDE of Link */}
-  <button
-    onClick={handleRemove}
-    className="absolute top-2 right-2 bg-black/70 p-2 rounded-full text-white opacity-0 group-hover:opacity-100 cursor-pointer hover:bg-red-700 transition duration-300"
-    title="Remove from bookmarks"
-  >
-    <AiFillDelete size={20} />
-  </button>
-</div>
   )
 }
diff --git a/frontend/components/BookmarksTab.tsx b/frontend/components/BookmarksTab.tsx
index 1d17d7a..83d7116 100644
--- a/frontend/components/BookmarksTab.tsx
+++ b/frontend/components/BookmarksTab.tsx
@@ -18,12 +18,14 @@ export default function BookmarksTab() {
   useEffect(() => {
     if (!userId) return
 
+    // Fetch bookmarks from the backend scripts
     fetch(`${BASE_URL}/getBookmarks.php?user_id=${userId}`)
       .then(res => res.json())
       .then(data => setBookmarks(data))
       .catch(err => console.error("Failed to load bookmarks", err))
   }, [userId])
 
+  // Function to handle removing a bookmark
   const handleRemove = async (movieId: number) => {
     try {
       await fetch(`${BASE_URL}/removeFromList.php`, {
diff --git a/frontend/components/Comments.tsx b/frontend/components/Comments.tsx
index 155ed6c..1928864 100644
--- a/frontend/components/Comments.tsx
+++ b/frontend/components/Comments.tsx
@@ -17,11 +17,13 @@ export default function Comments({ movieId }: Props) {
     const id = localStorage.getItem('user_id')
     setUserId(id)
 
+    // Fetch comments for the specific movie
     fetch(`${BASE_URL}/getComments.php?movie_id=${movieId}`)
       .then(res => res.json())
       .then(data => setComments(data))
   }, [movieId])
 
+  // Function to handle posting a new comment
   const handlePost = async () => {
     if (!newComment.trim() || !userId) return
 
@@ -37,6 +39,7 @@ export default function Comments({ movieId }: Props) {
 
     const data = await res.json()
 
+    // Check if the comment was successfully posted
     if (data.success) {
       setComments(prev => [{ name: "You", content: newComment }, ...prev])
       setNewComment("")
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index 37156bb..b6e0c92 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -2,18 +2,21 @@
 
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { AiFillHome, AiOutlineSearch, AiOutlineUser } from 'react-icons/ai'
-import { MdLogout} from 'react-icons/md'
-import { GoHome} from 'react-icons/go'
+import { AiFillHome, AiOutlineSearch, AiOutlineUser, AiOutlineMenu, AiOutlineClose } from 'react-icons/ai'
+import { MdLogout } from 'react-icons/md'
+import { GoHome } from 'react-icons/go'
 
 export default function Header() {
   const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
 
+  // stores user login in localStorage
   useEffect(() => {
     const userId = localStorage.getItem('user_id')
     setIsLoggedIn(!!userId)
   }, [])
 
+  // handles user logout
   const handleLogout = () => {
     localStorage.removeItem('user_id')
     setIsLoggedIn(false)
@@ -21,42 +24,81 @@ export default function Header() {
   }
 
   return (
-    <header className="bg-zinc-900 p-4 mb-6 py-8 shadow-2xl shadow-indigo-950">
+    <header className="bg-gradient-to-r from-black/40 to-black/20 backdrop-blur-md p-4 mb-6 py-8 shadow-2xl shadow-indigo-950 border-b border-white/10">
       <div className="max-w-[100rem] mx-auto flex justify-between items-center px-4">
+
         <Link href="/" className="flex items-center gap-1 text-white">
-          <h1 className="text-2xl font-bold text-white hover:text-transparent bg-clip-text hover:bg-gradient-to-r hover:from-fuchsia-600 hover:to-violet-900 transition duration-300">CINESCOPE</h1>
+          <h1 className="text-2xl font-bold text-white hover:text-transparent bg-clip-text hover:bg-gradient-to-r hover:from-green-600 hover:to-cyan-600 transition duration-300">
+            CINESCOPE
+          </h1>
         </Link>
-        
 
-        <nav className="flex items-center gap-6">
+        <div className="md:hidden">
+          <button
+            onClick={() => setMenuOpen(!menuOpen)}
+            className="text-white"
+          >
+            {menuOpen ? <AiOutlineClose size={26} /> : <AiOutlineMenu size={26} />}
+          </button>
+        </div>
+
+        <nav className="hidden md:flex items-center gap-6">
           <Link href="/" className="flex items-center gap-1 text-white">
-            <GoHome size={25} /> 
+            <GoHome size={25} />
           </Link>
 
           <Link href="/search" className="flex items-center gap-1 text-white hover:underline">
-            <AiOutlineSearch size={24}/> 
+            <AiOutlineSearch size={24} />
           </Link>
 
           {!isLoggedIn ? (
             <Link href="/signup" className="flex items-center gap-1 text-white hover:underline">
-              <AiOutlineUser size={24}/> 
+              <AiOutlineUser size={24} />
             </Link>
           ) : (
             <>
               <Link href="/account" className="text-white hover:underline">
-                <AiOutlineUser size={24}/> 
+                <AiOutlineUser size={24} />
               </Link>
-
               <button
                 onClick={handleLogout}
                 className="flex items-center gap-1 text-red-500 hover:underline"
               >
-                <MdLogout size={26}/> 
+                <MdLogout size={26} />
               </button>
             </>
           )}
         </nav>
       </div>
+
+      {/* mobile menu open */}
+      {menuOpen && (
+        <div className="md:hidden mt-4 px-4 space-y-4">
+          <Link href="/" onClick={() => setMenuOpen(false)} className="block text-white">
+            <GoHome className="inline-block mr-2" /> Home
+          </Link>
+          <Link href="/search" onClick={() => setMenuOpen(false)} className="block text-white">
+            <AiOutlineSearch className="inline-block mr-2" /> Search
+          </Link>
+          {!isLoggedIn ? (
+            <Link href="/signup" onClick={() => setMenuOpen(false)} className="block text-white">
+              <AiOutlineUser className="inline-block mr-2" /> Sign Up
+            </Link>
+          ) : (
+            <>
+              <Link href="/account" onClick={() => setMenuOpen(false)} className="block text-white">
+                <AiOutlineUser className="inline-block mr-2" /> Account
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="block text-red-500"
+              >
+                <MdLogout className="inline-block mr-2" /> Logout
+              </button>
+            </>
+          )}
+        </div>
+      )}
     </header>
   )
 }
diff --git a/frontend/components/MovieCard.tsx b/frontend/components/MovieCard.tsx
index a35679f..d706013 100644
--- a/frontend/components/MovieCard.tsx
+++ b/frontend/components/MovieCard.tsx
@@ -14,6 +14,7 @@ type Props = {
 export default function MovieCard({ id, title, release_date }: Props) {
   const [posterPath, setPosterPath] = useState<string | null>(null)
 
+  // Fetch poster path from TMDb API
   useEffect(() => {
     const fetchPoster = async () => {
       const apiKey = process.env.NEXT_PUBLIC_TMDB_KEY
diff --git a/frontend/components/RatingStars.tsx b/frontend/components/RatingStars.tsx
index c643e31..9d92c8e 100644
--- a/frontend/components/RatingStars.tsx
+++ b/frontend/components/RatingStars.tsx
@@ -16,14 +16,16 @@ export default function RatingStars({ movieId, userId, readonly = false }: Props
   const [hovered, setHovered] = useState<number | null>(null)
 
   useEffect(() => {
-    if (readonly || !userId) return
-
+    if (!userId) return
+  
+    // fetching the rating from the backend scripts
     fetch(`${BASE_URL}/getRating.php?user_id=${userId}&movie_id=${movieId}`)
       .then(res => res.json())
       .then(data => setRating(data.score || 0))
       .catch(err => console.error("Error fetching rating:", err))
-  }, [movieId, userId, readonly])
+  }, [movieId, userId])
 
+  // Function to handle rating
   const handleRating = async (score: number) => {
     if (readonly || !userId) return