diff --git a/movie-group-8/src/components/MovieCard.vue b/movie-group-8/src/components/MovieCard.vue
index a68aef804c0099383b7f77c9b9089953f66c176e..15e6322b2e79283be5c16313a8484ba56dd24151 100644
--- a/movie-group-8/src/components/MovieCard.vue
+++ b/movie-group-8/src/components/MovieCard.vue
@@ -1,15 +1,30 @@
 <template>
   <div class="bg-white dark:bg-neutral-800 border dark:border-neutral-700 rounded-lg p-4 flex gap-4 items-start">
-    <img
-      v-if="movie.poster_path"
-      :src="'https://image.tmdb.org/t/p/w154' + movie.poster_path"
-      alt="Poster"
-      class="w-24 h-36 object-cover rounded"
-    />
+    <!-- Clickable poster -->
+    <router-link
+      :to="`/films/${movie.id}`"
+      class="shrink-0 hover:opacity-90 transition"
+    >
+      <img
+        v-if="movie.poster_path"
+        :src="'https://image.tmdb.org/t/p/w154' + movie.poster_path"
+        alt="Poster"
+        class="w-24 h-36 object-cover rounded"
+      />
+    </router-link>
+
     <div class="flex-1">
-      <p class="text-lg font-semibold text-gray-800 dark:text-white">{{ movie.title }}</p>
+      <!-- Clickable title -->
+      <router-link
+        :to="`/films/${movie.id}`"
+        class="text-lg font-semibold text-gray-800 dark:text-white hover:underline block"
+      >
+        {{ movie.title }}
+      </router-link>
+
       <p class="text-sm text-gray-600 dark:text-neutral-400">⭐ {{ movie.vote_average }}</p>
 
+      <!-- Interactive status dropdown -->
       <label class="text-xs text-gray-500 dark:text-gray-400 block mt-2">
         Status:
         <select