Index: ReserveNGo-frontend/index.html
===================================================================
--- ReserveNGo-frontend/index.html	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/index.html	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -6,5 +6,5 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RnG</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="bootstrap-5.3.5-dist/bootstrap-5.3.5-dist/css/bootstrap.css">
     <script src="bootstrap-5.3.5-dist/bootstrap-5.3.5-dist/js/bootstrap.js"></script>
Index: ReserveNGo-frontend/package-lock.json
===================================================================
--- ReserveNGo-frontend/package-lock.json	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/package-lock.json	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -9,4 +9,5 @@
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "pinia": "^2.3.1",
         "vue": "^3.5.13",
@@ -1262,4 +1263,13 @@
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
       }
     },
Index: ReserveNGo-frontend/package.json
===================================================================
--- ReserveNGo-frontend/package.json	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/package.json	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -13,4 +13,5 @@
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
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>
Index: ReserveNGo-frontend/src/main.js
===================================================================
--- ReserveNGo-frontend/src/main.js	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
+++ ReserveNGo-frontend/src/main.js	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
@@ -6,4 +6,5 @@
 import App from './App.vue'
 import router from './router'
+import '@fortawesome/fontawesome-free/css/all.css'
 
 const app = createApp(App)