diff --git a/public/js/app_movies.js b/public/js/app_movies.js
index 8dfa399..c93c623 100644
--- a/public/js/app_movies.js
+++ b/public/js/app_movies.js
@@ -117,6 +117,7 @@ window.onload = async function () {
       const isChecked = watchedMoviesInYear.some(watchedMovie => watchedMovie.imdb_id === movie.imdb_id);
       const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
       const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';
+      const playerUrl = movie && movie._id ? `/player.html?id=${encodeURIComponent(movie._id)}` : (movie.vod_link || '#');
 
       const movieDiv = document.createElement('div');
       movieDiv.classList.add('col-md-4', 'mb-4', 'movie-card');
@@ -124,10 +125,12 @@ window.onload = async function () {
       movieDiv.innerHTML = `
         <div class="card">
           ${isChecked ? '<div class="watched-banner">VISIONNÉ</div>' : ''}
-          <a href="${movie.vod_link}"><img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;"></a>
+          <a href="${playerUrl}" target="_blank" rel="noopener noreferrer">
+            <img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;">
+          </a>
           <div class="card-body">
             <h5 class="card-title d-flex justify-content-between align-items-center">
-              ${movie.title}
+              <a href="${playerUrl}" target="_blank" rel="noopener noreferrer" class="text-decoration-none text-dark">${movie.title}</a>
               <span>⭐ ${movie.rating} <a href="https://www.imdb.com/title/${movie.imdb_id}/"><img src="/img/imdb.png"></a></span>
             </h5>
             <p class="fw-bold fst-italic card-text" style="font-size: 0.75rem;">${movie.category}</p>
diff --git a/routes/movies.js b/routes/movies.js
index 6099dce..f14dd50 100644
--- a/routes/movies.js
+++ b/routes/movies.js
@@ -3,6 +3,7 @@ const Movie = require("../models/Movie");
 const User = require("../models/User");
 const axios = require("axios");
 const jwt = require("jsonwebtoken");
+const mongoose = require("mongoose");
 
 const router = express.Router();
 
@@ -321,4 +322,20 @@ router.put("/:id", async (req, res) => {
   }
 });
 
+// Get one movie by Mongo _id (used by the custom player page)
+router.get("/:id", async (req, res) => {
+  try {
+    const { id } = req.params;
+    if (!mongoose.Types.ObjectId.isValid(id)) {
+      return res.status(400).json({ message: "Invalid movie id" });
+    }
+
+    const movie = await Movie.findById(id);
+    if (!movie) return res.status(404).json({ message: "Movie not found" });
+    return res.status(200).json(movie);
+  } catch (err) {
+    return res.status(500).json({ error: err.message });
+  }
+});
+
 module.exports = router;