Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
@@ -10,39 +10,45 @@
     return {
       user: userStore(),
-      managerLocalId:"",
+      managerLocalId: '',
     }
   },
   methods: {
-    fetchLocalForManager(){
-      fetch("http://localhost:8080/api/local-manager/my-local",{
+    fetchLocalForManager() {
+      fetch('http://localhost:8080/api/local-manager/my-local', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: this.user.getToken
+          Authorization: this.user.getToken,
         },
-      }).then((res) => res.json())
+      })
+        .then((res) => res.json())
         .then((data) => (this.managerLocalId = data.id))
-        .catch((err) => console.log(err));
-
+        .catch((err) => console.log(err))
+    },
+  },
+  mounted() {
+    if (this.user && this.user.data.role === 'ROLE_LOCAL_MANAGER') {
+      this.fetchLocalForManager()
     }
   },
-  mounted() {
-    if(this.user && this.user.data.role==="ROLE_LOCAL_MANAGER"){
-      this.fetchLocalForManager();
-
-    }
-  }
 }
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5 ">
+  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
     <div class="container-fluid">
-      <router-link v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'" to="/" class="navbar-brand d-flex align-items-center">
+      <router-link
+        v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'"
+        to="/"
+        class="navbar-brand d-flex align-items-center"
+      >
         <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
         <span class="fw-bold text-black">Reserve And Go</span>
       </router-link>
 
-      <div  v-if="user.data.role === 'ROLE_LOCAL_MANAGER'" class="navbar-brand d-flex align-items-center">
+      <div
+        v-if="user.data.role === 'ROLE_LOCAL_MANAGER'"
+        class="navbar-brand d-flex align-items-center"
+      >
         <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
         <span class="fw-bold text-black">Reserve And Go</span>
@@ -51,11 +57,14 @@
       <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
         <ul class="navbar-nav align-items-center">
-
           <li class="nav-item" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link to="/favourite_locals" class="nav-link text-black">Favourite locals</router-link>
+            <router-link :to="{name: 'favourite_locals', params:{ mode: 'favourites'} }" class="nav-link text-black"
+              >Favourite locals</router-link
+            >
           </li>
 
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link to="/my_reservations" class="nav-link text-black">My reservations</router-link>
+            <router-link to="/my_reservations" class="nav-link text-black"
+              >My reservations</router-link
+            >
           </li>
 
@@ -64,5 +73,7 @@
           </li>
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
-            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black">My Restaurant</router-link>
+            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black"
+              >My Restaurant</router-link
+            >
           </li>
 
@@ -71,6 +82,8 @@
           </li>
 
-          <li class="nav-item" v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'">
-
+          <li
+            class="nav-item"
+            v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'"
+          >
             <router-link to="/profilePage" class="nav-link text-white">
               <i class="fa-solid fa-user"></i>
@@ -90,5 +103,4 @@
             <logout_ />
           </li>
-
         </ul>
       </div>
@@ -102,8 +114,7 @@
 }
 
-.custom-background-nav{
-  background-color: #5EA5BC;
+.custom-background-nav {
+  background-color: #5ea5bc;
 }
-
 
 .navbar-nav .nav-link:hover {
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
@@ -6,5 +6,7 @@
 export default defineComponent({
   components: { LocalInLocalListing },
-
+  props:{
+    mode: String,
+  },
   data() {
     return {
@@ -17,5 +19,11 @@
   },
 
-
+  computed: {
+    displayedLocals() {
+      return this.mode === 'favourites'
+        ? this.locals.filter(local => this.favourite_locals.includes(local.id))
+        : this.locals
+    }
+  },
 
   methods: {
@@ -60,6 +68,6 @@
 
 <template>
-  <div id="container">
-    <div v-for="local in locals" :key="local.id">
+  <div id="container" class="container">
+    <div v-for="local in displayedLocals" :key="local.id">
       <LocalInLocalListing
         :local="local"
@@ -67,4 +75,5 @@
         :isSelected="selectedLocalId === local.id"
         :isHovered="hoveredLocalId === local.id"
+        :mode="mode"
         @select="selectedLocalId = local.id"
         @hover-enter="hoveredLocalId = local.id"
Index: serveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ 	(revision )
@@ -1,59 +1,0 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js'
-
-export default {
-  data() {
-    return {
-      locals: [],
-      userStore_: userStore(),
-    }
-  },
-  beforeMount() {
-    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
-      method: 'GET',
-      headers: {
-        Authorization: this.userStore_.getToken,
-      },
-    })
-      .then((res) => res.json())
-      .then((data) => (this.locals = data))
-      .catch((err) => console.log(err))
-  },
-  methods: {
-    removeRestaurant(id) {
-      fetch(`http://localhost:8080/api/customer/favourite-locals/remove/${id}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: this.userStore_.getToken,
-        },
-      }).then(()=>{
-        this.locals = this.locals.filter(local => local.id !== id)
-      })
-        .catch((err) => console.log(err))
-    }
-  },
-}
-</script>
-
-<template>
-  <div class="container" v-for="local in locals" :key="local">
-    <div class="row border mt-4 p-2">
-      <div class="col-8">
-      <h3>{{ local.name }}</h3>
-      <h5>{{ local.address }}</h5>
-      </div>
-
-      <div class="col-4 d-flex justify-content-end align-self-center">
-        <router-link :to="`/more_details/${local.id}`">
-          <button class="btn btn-outline-dark me-2">
-            <i class="fas fa-info-circle me-1"></i> More details
-          </button>
-        </router-link>
-        <button class="btn btn-dark" @click="removeRestaurant(local.id)">Remove favourite</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
@@ -42,6 +42,6 @@
 
       <!-- Scrollable Local Listings -->
-      <div class="col-12 col-md-8 listing-column">
-        <Locale_listing_container />
+      <div class=" col-md-8 listing-column">
+        <Locale_listing_container :mode="'all'" />
       </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 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
@@ -12,4 +12,5 @@
     isSelected: Boolean,
     isHovered: Boolean,
+    mode: String,
   },
 
@@ -96,5 +97,5 @@
         <div class="button-group d-flex align-items-center" v-if="isHovered || isSelected">
           <button
-            v-if="userStore_.data.role === 'ROLE_CUSTOMER'"
+            v-if="userStore_.data.role === 'ROLE_CUSTOMER' && mode==='all'"
             :class="['fa-heart', isFavorited ? 'fa-solid liked' : 'fa-regular']"
             id="like-button"
@@ -109,7 +110,9 @@
             </router-link>
 
-            <button v-if="userStore_.data.role === 'ROLE_CUSTOMER'" class="btn btn-dark">
+            <button v-if="userStore_.data.role === 'ROLE_CUSTOMER' && mode==='all'" class="btn btn-dark">
               <i class="fas fa-calendar-check me-1"></i> Make reservation
             </button>
+
+            <button class="btn btn-dark" v-if="mode==='favourites'" @click="addToFavorites">Remove favourite</button>
           </div>
         </div>
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/router/index.js	(revision d90601f3d2e204d572e6f170033a5bd483473ee4)
@@ -5,5 +5,4 @@
 import login_ from '@/components/Project/Auth/login_.vue'
 import register_ from '@/components/Project/Auth/register_.vue'
-import favourite_locals from '@/components/Project/Restaurant/favourite_locals.vue'
 import my_reservations from '@/components/Project/Reservation/My_reservations.vue'
 import Locale_ from '@/components/Project/Restaurant/Locale_.vue'
@@ -12,4 +11,5 @@
 import LocaleNotAssigned from '@/components/Project/Manager/locale-not-assigned.vue'
 import ManagerDashboard from '@/components/Project/Manager/ManagerDashboard.vue'
+import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
 
 const router = createRouter({
@@ -17,7 +17,8 @@
   routes: [
     {
-      path: '/favourite_locals',
+      path: '/favourite_locals/:mode',
       name: 'favourite_locals',
-      component: favourite_locals,
+      component: Locale_listing_container,
+      props: true,
     },
     {