Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision a77580843ab09ab748ba1f7eca10ca48c82d4aca)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision a23d112105072dfce8b11d0992c822930ec3a3b9)
@@ -22,7 +22,5 @@
   computed: {
     displayedLocals() {
-      return this.mode === 'favourites'
-        ? this.favourite_locals
-        : this.locals
+      return this.mode === 'favourites' ? this.favourite_locals : this.locals
     },
   },
@@ -30,5 +28,5 @@
   methods: {
     toggleFavourite(id) {
-      const isFav = this.favourite_locals.map(item => item.id).includes(id)
+      const isFav = this.favourite_locals.map((item) => item.id).includes(id)
       const action = isFav ? useCustomer.removeFavourite(id) : useCustomer.addFavourite(id)
       Promise.resolve(action)
@@ -59,4 +57,16 @@
   <div id="container" class="container">
     <h5>Locals</h5>
+    <div v-if="this.mode === 'favourites'">
+      <div v-if="favourite_locals.length === 0" class="text-center text-muted py-5">
+        <i class="fas fa-calendar-times fa-3x mb-3"></i>
+        <p>You don't have any favourite locals yet.</p>
+      </div>
+    </div>
+    <div v-else>
+      <div v-if="locals.length === 0" class="text-center text-muted py-5">
+        <i class="fas fa-calendar-times fa-3x mb-3"></i>
+        <p>No locals available at the moment.</p>
+      </div>
+    </div>
     <div v-for="local in displayedLocals" :key="local.id">
       <LocalInLocalListing