Index: ReserveNGo-frontend/src/PiniaStores/restaurantStore.js
===================================================================
--- ReserveNGo-frontend/src/PiniaStores/restaurantStore.js	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
+++ ReserveNGo-frontend/src/PiniaStores/restaurantStore.js	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
@@ -14,5 +14,5 @@
       workingHours: '',
       availableServices: [],
-      averageRating: 0,
+      ratingAvg: 0,
       events: [],
       restaurantPhotos: [],
@@ -31,5 +31,5 @@
       this.workingHours = workingHours
       this.logo = logo
-      this.averageRating = averageRating
+      this.ratingAvg = averageRating
     },
     setRestaurantDetails (id, name, description, address, workingHours, availableServices, averageRating, events, restaurantPhotos, menuPhoto, menuLink, contact, logo) {
@@ -40,5 +40,5 @@
       this.workingHours = workingHours
       this.availableServices = availableServices
-      this.averageRating = averageRating
+      this.ratingAvg = averageRating
       this.events = events
       this.restaurantPhotos = restaurantPhotos
Index: ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
@@ -0,0 +1,99 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+  props:{
+    localId:String,
+  },
+  emits: ['rating-updated'],
+  data() {
+    return {
+      user: userStore(),
+      givenRating: 0,
+      rating: 0,
+      hoverRating: 0,
+    }
+  },
+  methods:{
+    rateLocal(rating){
+      this.givenRating = rating;
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/rate`, {
+        method: 'PUT',
+        headers: {
+          Authorization: this.user.getToken,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          rating: this.givenRating,
+        })
+      })
+        .then(() => {
+          this.customerRating();
+          this.$emit('rating-updated');
+        })
+        .catch((error) => console.log(error))
+    },
+    customerRating(){
+
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/rating`, {
+        method: 'GET',
+        headers:{
+          Authorization: this.user.getToken,
+        }
+      })
+        .then((res) => res.json())
+        .then((data) => {this.rating = data.rating})
+        .catch((error) => {console.log(error)})
+    },
+    removeRating(){
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/remove-rating`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: this.user.getToken,
+        }
+      })
+        .then(() => {
+          this.rating = 0;
+          this.givenRating = 0;
+          this.$emit('rating-updated');
+        })
+        .catch((err)=>console.log(err))
+    }
+  },
+  mounted() {
+    console.log("getting rating after mount")
+    this.customerRating();
+    console.log("rating is:" + this.rating);
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <div v-if="rating === 0" class="d-flex align-items-center">
+      <h5 class="me-3">Rate your experience:</h5>
+      <div @mouseleave="hoverRating = 0">
+        <span v-for="index in 5" :key="index" @mouseover="hoverRating = index" @click="rateLocal(index)" class="fs-4" style="cursor: pointer;">
+          <i :class="['far', 'fa-star', { 'fas text-warning': hoverRating >= index }]"></i>
+        </span>
+      </div>
+    </div>
+    <div v-else class="d-flex align-items-center">
+      <h5 class="me-3">Your Rating:</h5>
+      <div class="fs-4 text-warning">
+        <span v-for="index in 5" :key="index">
+          <i :class="['fa-star', { 'fas': index <= rating, 'far': index > rating }]"></i>
+        </span>
+      </div>
+      <button @click="removeRating" class="btn btn-danger btn-sm ms-3">
+        <i class="fas fa-times"></i> Remove Rating
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fs-4 {
+  font-size: 1.5rem;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
@@ -11,4 +11,5 @@
 import ImageModalLocale from '@/components/Project/Utility/ImageModalLocale.vue'
 import {config} from '@/constants/Api_config.js'
+import RatingsForLocal from '@/components/Project/Customer/RatingsForLocal.vue'
 
 export default {
@@ -19,4 +20,5 @@
     PhotosGridSystem,
     ImageModalLocale,
+    RatingsForLocal,
   },
   data() {
@@ -29,5 +31,5 @@
         workingHours: '',
         services: [],
-        averageRating: '',
+        ratingAvg: '',
         events: [],
         localPhotos: [],
@@ -66,5 +68,5 @@
   computed: {
     roundedRating() {
-      const rating = parseFloat(this.locale.averageRating)
+      const rating = parseFloat(this.locale.ratingAvg)
       if (isNaN(rating)) return 0
       return Math.round(rating * 2) / 2
@@ -282,5 +284,5 @@
                 ></i>
               </div>
-              <small class="text-muted">({{ locale.averageRating }})</small>
+              <small class="text-muted">({{ locale.ratingAvg }})</small>
             </div>
 
@@ -380,4 +382,9 @@
             </div>
 
+            <!--Rating component-->
+            <div class="mb-3 row" v-if="userStore.data.role === 'ROLE_CUSTOMER'">
+              <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData"/>
+            </div>
+
             <!-- Events Carousel (Read-only) -->
             <h6 class="fw-bold">Events</h6>
@@ -411,5 +418,5 @@
               </template>
 
-              <router-link to="/" class="btn btn-outline-secondary"
+              <router-link to="/" class="btn btn-outline-secondary" v-if="userStore.data.role !== 'ROLE_LOCAL_MANAGER'"
                 ><i class="fas fa-arrow-left me-1"></i> Back</router-link
               >
@@ -435,3 +442,3 @@
 }
 </style>
-```
+
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
@@ -37,5 +37,5 @@
     <p class="mb-3">
       <i class="fas fa-star me-2 text-warning"></i>
-      <strong>Rating:</strong> {{ restaurantStore.averageRating }}
+      <strong>Rating:</strong> {{ restaurantStore.ratingAvg }}
     </p>