Index: ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
+++ ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision 110db011c4f236184c3f8f19759727486757c30a)
@@ -2,4 +2,5 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useUtility } from '@/repository/utility.ts'
+import { useCustomer } from '@/repository/Customer.ts'
 import { config } from '@/constants/Api_config.js'
 import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
@@ -8,4 +9,5 @@
   props: {
     event: { type: Object, required: true },
+    isFavourited: { type: Boolean, default: false },
   },
 
@@ -55,4 +57,8 @@
       this.$emit('select', this.event.id)
     },
+    addToFavourites(e) {
+      e.stopPropagation()
+      this.$emit('toggle-favourite', this.event.id)
+    },
   },
 }
@@ -65,5 +71,4 @@
     @click="handleClick"
   >
-    <!-- Event Image -->
     <div class="col-auto pe-0">
       <img
@@ -75,5 +80,4 @@
     </div>
 
-    <!-- Event Info -->
     <div class="col info ps-3">
       <h5 class="mb-1 fw-bold">{{ event.title || event.name }}</h5>
@@ -92,7 +96,13 @@
     </div>
 
-    <!-- Action Button -->
     <div class="col-auto d-flex align-items-center">
-      <div class="action-buttons d-flex align-items-center">
+      <div class="action-buttons d-flex align-items-center gap-2">
+        <button
+          class="btn btn-favourite"
+          :class="{ active: isFavourited }"
+          @click.stop="addToFavourites"
+        >
+          {{ isFavourited ? 'Remove from Favourites' : 'Add to Favourites' }}
+        </button>
         <button class="btn btn-outline-dark">
           <i class="fas fa-info-circle me-1"></i> View Details
@@ -115,3 +125,38 @@
   background-color: #f9f9f9;
 }
+
+.btn-favourite {
+  background-color: #fff;
+  border: 2px solid #5ea5bc;
+  color: #5ea5bc;
+  padding: 0.375rem 0.75rem;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn-favourite:hover {
+  background-color: #5ea5bc;
+  border-color: #5ea5bc;
+  color: #fff;
+}
+
+.btn-favourite.active {
+  background-color: #e74c3c;
+  border-color: #e74c3c;
+  color: #fff;
+}
+
+.btn-favourite.active:hover {
+  background-color: #c0392b;
+  border-color: #c0392b;
+}
+
+.btn-favourite:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.action-buttons {
+  gap: 0.5rem;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
+++ ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision 110db011c4f236184c3f8f19759727486757c30a)
@@ -7,8 +7,13 @@
   props: {
     events: Array,
+    favouriteEvents: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       selectedEventId: null,
+      showFavouritesOnly: false,
     }
   },
@@ -16,8 +21,6 @@
   computed: {
     flattenedEvents() {
-      // Flatten the events array if it's nested (from transformArray)
       if (!this.events || this.events.length === 0) return []
 
-      // Check if events are nested arrays
       if (Array.isArray(this.events[0])) {
         return this.events.flat()
@@ -25,4 +28,18 @@
 
       return this.events
+    },
+    displayedEvents() {
+      if (!this.showFavouritesOnly) {
+        return this.flattenedEvents
+      }
+
+      const favouriteIds = this.favouriteEvents.map((fav) => fav.id)
+      return this.flattenedEvents.filter((event) => favouriteIds.includes(event.id))
+    },
+  },
+
+  methods: {
+    toggleFavourite(id) {
+      this.$emit('toggle-favourite', id)
     },
   },
@@ -32,11 +49,32 @@
 <template>
   <div id="container" class="container">
-    <h5>Events</h5>
-    <div v-if="flattenedEvents.length === 0" class="text-center text-muted py-5">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h5 class="mb-0">Events</h5>
+      <div class="form-check form-switch">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="favouritesToggle"
+          v-model="showFavouritesOnly"
+        />
+        <label class="form-check-label ps-2" for="favouritesToggle">
+          <i class="fas fa-heart me-1"></i>Favourites Only
+        </label>
+      </div>
+    </div>
+
+    <div v-if="displayedEvents.length === 0" class="text-center text-muted py-5">
       <i class="fas fa-calendar-times fa-3x mb-3"></i>
-      <p>No events available at the moment.</p>
+      <p v-if="showFavouritesOnly">You don't have any favourite events yet.</p>
+      <p v-else>No events available at the moment.</p>
     </div>
-    <div v-for="event in flattenedEvents" :key="event.id">
-      <EventInEventListing :event="event" @select="selectedEventId = event.id" />
+
+    <div v-for="event in displayedEvents" :key="event.id">
+      <EventInEventListing
+        :event="event"
+        :isFavourited="favouriteEvents.map((fav) => fav.id).includes(event.id)"
+        @select="selectedEventId = event.id"
+        @toggle-favourite="toggleFavourite"
+      />
     </div>
   </div>
@@ -47,3 +85,21 @@
   margin: 30px auto;
 }
+
+.form-check-input {
+  cursor: pointer;
+  width: 2.5rem;
+  height: 1.25rem;
+}
+
+.form-check-input:checked {
+  background-color: #5ea5bc;
+  border-color: #5ea5bc;
+}
+
+.form-check-label {
+  cursor: pointer;
+  font-weight: 500;
+  color: #495057;
+  user-select: none;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 110db011c4f236184c3f8f19759727486757c30a)
@@ -7,4 +7,5 @@
 import { useEvents } from '@/repository/Events.ts'
 import { useLocales } from '@/repository/Locale.ts'
+import { useCustomer } from '@/repository/Customer.ts'
 
 export default {
@@ -19,8 +20,9 @@
     return {
       allEvents: [],
-      allEventsRaw: [], // Store the raw events data
+      allEventsRaw: [],
       showBackToTop: true,
       locals: [],
-      activeView: 'locals', // 'locals' or 'events'
+      activeView: 'locals',
+      favouriteEvents: [],
     }
   },
@@ -66,5 +68,4 @@
           .catch((err) => console.log('The locals are not being caught.', err))
       } else {
-        // Handle event filtering
         this.filterEvents(searchQuery, sortBy, directions)
       }
@@ -73,5 +74,4 @@
       let filteredEvents = [...this.allEventsRaw]
 
-      // Search filter
       if (searchQuery) {
         const query = searchQuery.toLowerCase()
@@ -85,5 +85,4 @@
       }
 
-      // Sort
       if (sortBy) {
         filteredEvents.sort((a, b) => {
@@ -119,11 +118,57 @@
       this.activeView = view
     },
+    loadFavouriteEvents() {
+      return useCustomer
+        .getFavouriteEvent()
+        .then((data) => {
+
+          this.favouriteEvents = data.events || data || []
+        })
+        .catch((error) => {
+          console.log('Failed to fetch favourite events', error)
+          this.favouriteEvents = []
+        })
+    },
+    toggleFavouriteEvent(id) {
+      const isFav = this.favouriteEvents.map((item) => item.id).includes(id)
+      const action = isFav
+        ? useCustomer.removeFavouriteEvent(id)
+        : useCustomer.addFavouriteEvent(id)
+
+      Promise.resolve(action)
+        .then(() => {
+          if (isFav) {
+            this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id)
+          } else {
+            // Find the event in allEventsRaw and add it to favourites
+            const event = this.allEventsRaw.find((e) => e.id === id)
+            if (event) {
+              this.favouriteEvents.push(event)
+            } else {
+              // If not found in allEventsRaw, refresh the entire list
+              this.loadFavouriteEvents()
+            }
+          }
+        })
+        .catch((err) => {
+          console.log('Error toggling favourite:', err)
+          // If there's a 409 conflict, refresh the list to sync
+          if (err.message && err.message.includes('409')) {
+            this.loadFavouriteEvents()
+          }
+        })
+    },
   },
 
   beforeMount() {
+    // Load favourite events first and wait for it
+    this.loadFavouriteEvents().then(() => {
+      console.log('Favourites loaded, count:', this.favouriteEvents.length)
+    })
+
     useEvents
       .listAll()
       .then((data) => {
-        this.allEventsRaw = data.events // Store raw data
+        this.allEventsRaw = data.events
         this.allEvents = transformArray(data.events, 3)
         console.log('Currently Reading here', this.allEvents)
@@ -150,8 +195,6 @@
       <div class="container-fluid px-0">
         <div class="row justify-content-center">
-          <!-- Sticky Search and Filter Bar -->
           <SearchFilterPanel :activeView="activeView" @search-query-sent="sendSearchQuery" />
 
-          <!-- Events Section - Compact Secondary Feature -->
           <div class="col-12 events-section-wrapper">
             <div class="container">
@@ -160,5 +203,4 @@
           </div>
 
-          <!-- Navigation Toggle -->
           <div class="col-md-8">
             <div class="navigation-toggle">
@@ -178,5 +220,4 @@
           </div>
 
-          <!-- Scrollable Listings -->
           <div class="col-md-8 listing-column">
             <Locale_listing_container
@@ -185,5 +226,10 @@
               :mode="'all'"
             />
-            <Event_listing_container v-else :events="allEvents" />
+            <Event_listing_container
+              v-else
+              :events="allEvents"
+              :favouriteEvents="favouriteEvents"
+              @toggle-favourite="toggleFavouriteEvent"
+            />
           </div>
         </div>
@@ -191,5 +237,4 @@
     </div>
 
-    <!-- Back to Top Button -->
     <transition name="fade">
       <button
Index: ReserveNGo-frontend/src/repository/Customer.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Customer.ts	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
+++ ReserveNGo-frontend/src/repository/Customer.ts	(revision 110db011c4f236184c3f8f19759727486757c30a)
@@ -22,4 +22,15 @@
   }
 
+  getFavouriteEvent(): Promise<any> {
+    return this.httpClient.get(`favourite-events`)
+  }
+  addFavouriteEvent(eventId: number | string): Promise<any> {
+    return this.httpClient.post(`favourite-events/add/${eventId}`)
+  }
+
+  removeFavouriteEvent(eventId: number | string): Promise<any> {
+    return this.httpClient.post(`favourite-events/remove/${eventId}`)
+  }
+
   // RATINGS
   getRatingForLocal(localId: number | string): Promise<any> {
Index: ReserveNGo-frontend/src/repository/Events.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Events.ts	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
+++ ReserveNGo-frontend/src/repository/Events.ts	(revision 110db011c4f236184c3f8f19759727486757c30a)
@@ -14,4 +14,5 @@
     return this.httpClient.get()
   }
+
 }