diff --git a/movie-group-8/src/views/FilmDetails.vue b/movie-group-8/src/views/FilmDetails.vue
index 8194f5cef562fe74c64aab5212b4c26b4036843d..d2b8e333a8be1b3bb1f4ea4dc9aad358a2f6be11 100644
--- a/movie-group-8/src/views/FilmDetails.vue
+++ b/movie-group-8/src/views/FilmDetails.vue
@@ -43,6 +43,19 @@
         >
           Review this Film
         </RouterLink>
+        <div class="mt-6 reviews-section">
+          <h2 class="text-xl mb-2 text-white">User Reviews</h2>
+          <div v-if="reviewsLoading" class="text-gray-400">Loading reviews…</div>
+          <div v-else-if="!reviews.length" class="text-gray-400">No reviews yet.</div>
+          <ul v-else class="space-y-4">
+            <li v-for="(r, i) in reviews" :key="i" class="bg-neutral-800 p-4 rounded">
+              <div class="flex items-center mb-1">
+                <span class="font-semibold text-white mr-2">{{ r.rating }}★</span>
+              </div>
+              <p class="text-gray-200">{{ r.text }}</p>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -52,12 +65,16 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { addToWatchlist } from '@/composables/useWatchlist.js'
+import { getAllReviews }  from '@/composables/useReviews.js'
+
 
 const route = useRoute()
 const movie = ref(null)
 const trailerUrl = ref('')
 const loading = ref(true)
 const error = ref('')
+const reviews = ref([])      
+const reviewsLoading = ref(true)
 
 function formatDate(dateString) {
   if (!dateString) return 'Unknown'
@@ -100,7 +117,16 @@ onMounted(async () => {
   const id = route.params.id
   await fetchMovieDetails(id)
   await fetchMovieVideos(id)
-  loading.value = false
+  try {
+    const res = await getAllReviews(id)
+    console.log('Raw reviews from Firestore:', res)
+    reviews.value = res
+  } catch (revErr) {
+    console.error('Failed to load reviews', revErr)
+  } finally {
+    reviewsLoading.value = false
+    loading.value        = false
+  }
 })
 </script>