Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -2,4 +2,5 @@
 import Local_in_local_listing from '@/components/Project/Restaurant/local_in_local_listing.vue'
 import { defineComponent } from 'vue'
+import { userStore } from '@/PiniaStores/UserStore.js'
 
 export default defineComponent({
@@ -9,11 +10,49 @@
     return {
       locals: [],
+      favourite_locals: [],
+      userStore: userStore(),
     }
   },
+  methods: {
+    toggleFavourite(id) {
+      if (this.favourite_locals.includes(id)) {
+        fetch(`http://localhost:8080/api/customer/favourite-locals/remove/${id}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: this.userStore.getToken,
+          },
+        })
+          .then(() => {this.favourite_locals= this.favourite_locals.filter(fav => fav !== id)})
+          .catch((err) => console.log(err))
+        console.log(this.favourite_locals)
+      } else {
+        fetch(`http://localhost:8080/api/customer/favourite-locals/add/${id}`, {
+          method: 'POST',
+          headers: {
+            Authorization: this.userStore.getToken,
+          },
+        }).catch((error) => console.log(error))
+          .then(this.favourite_locals.push(id))
+        console.log(this.favourite_locals)
+      }
+    },
+  },
   mounted() {
-     fetch('http://localhost:8080/api/locals')
-      .then(res => res.json())
-      .then(data => this.locals = data)
-       .catch(err => console.log(err));
+    fetch('http://localhost:8080/api/locals')
+      .then((res) => res.json())
+      .then((data) => (this.locals = data))
+      .catch((err) => console.log(err))
+    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
+      method: 'GET',
+      headers: {
+        Authorization: this.userStore.getToken,
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => (this.favourite_locals = data.map(local => local.id)))
+      .catch((err) => console.log(err))
+
+    console.log(this.favourite_locals)
   },
 })
@@ -22,7 +61,12 @@
 <template>
   <div id="container" class="">
-    <div v-for="locale in locals" :key="locale">
+    <div>
       <Local_in_local_listing
-      :local="locale"/>
+        v-for="local in locals"
+        :key="local"
+        :local="local"
+        :isFavorited="favourite_locals.includes(local.id)"
+        @toggle-favourite="toggleFavourite"
+      />
     </div>
   </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -13,4 +13,5 @@
       required: true,
     },
+    isFavorited: Boolean
   },
 
@@ -18,6 +19,4 @@
     handleClick() {
       let restaurantStore_ = restaurantStore()
-
-      console.log(restaurantStore_)
       restaurantStore_.setRestaurant(
         this.local.id,
@@ -29,13 +28,8 @@
         this.local.averageRating,
       )
-      console.log(restaurantStore().id)
     },
     async addToFavorites() {
-      fetch(`http://localhost:8080/api/customer/favourite-locals/add/${this.local.id}`, {
-        method: 'POST',
-        headers: {
-          Authorization: this.userStore_.getToken,
-        },
-      }).catch((error) => console.log(error))
+      console.log('button clicked')
+      this.$emit('toggle-favourite', this.local.id)
     },
   },
@@ -51,5 +45,5 @@
     </div>
     <div class="col">
-      <button class="btn btn-dark" @click="addToFavorites()">Add to favourites</button>
+      <button :class="['fa-heart',isFavorited ? 'fa-solid':'fa-regular',{liked:isFavorited}]" id="like-button" @click="addToFavorites()"></button>
     </div>
   </div>
@@ -62,3 +56,14 @@
   /*border-radius: 10px;*/
 }
+
+.liked {
+  color: red !important;
+}
+
+.fa-heart {
+  cursor: pointer;
+  font-size: 24px;
+  transition: color 0.3s ease;
+  color: gray;
+}
 </style>
