Index: ReserveNGo-frontend/src/components/Project/Reservation/My_reservations.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Reservation/My_reservations.vue	(revision 2f425fb5024734c5766475b8a149177eff352618)
+++ ReserveNGo-frontend/src/components/Project/Reservation/My_reservations.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
@@ -16,4 +16,6 @@
       showEditModal: false,
       targetReservation: null,
+      selectionMode: false,
+      selectedIds: [],
     }
   },
@@ -70,4 +72,37 @@
       this.targetReservation = null
     },
+    startSelection() {
+      this.selectionMode = true
+      this.selectedIds = []
+    },
+    cancelSelection() {
+      this.selectionMode = false
+      this.selectedIds = []
+    },
+    toggleSelect(res) {
+      const id = res?.id ?? null
+      if (id == null) return
+      const idx = this.selectedIds.indexOf(id)
+      if (idx >= 0) this.selectedIds.splice(idx, 1)
+      else this.selectedIds.push(id)
+    },
+    async confirmDeleteSelected() {
+      if (!this.selectedIds.length) return
+      if (!confirm(`Delete ${this.selectedIds.length} reservation(s)?`)) return
+      try {
+        const { showToast } = useToasts()
+        await useReservations.deleteReservations({ reservationIds: this.selectedIds })
+        // Remove deleted from list
+        const set = new Set(this.selectedIds)
+        this.reservations = this.reservations.filter(r => !set.has(r.id))
+        showToast('Selected reservations deleted successfully.', 'success')
+        this.cancelSelection()
+      } catch (err) {
+        console.error(err)
+        const { showToast } = useToasts()
+        const message = err?.response?.message || 'Failed to delete selected reservations.'
+        showToast(message, 'error')
+      }
+    },
   },
 }
@@ -98,7 +133,30 @@
           :reservation="r"
           :can-cancel="(r.status || '').toUpperCase() !== 'CANCELLED'"
+          :selection-mode="selectionMode"
+          :selected="selectedIds.includes(r.id)"
           @cancel="onCancelReservation"
           @edit="onEditReservation"
+          @toggle-select="toggleSelect"
         />
+        <!-- Top controls: place at top right above the first card -->
+        <div class="position-sticky" style="top: 70px;">
+          <div class="d-flex justify-content-end mt-2">
+            <template v-if="!selectionMode">
+              <button class="btn btn-outline-danger btn-sm" @click="startSelection" :disabled="reservations.length===0">
+                <i class="fas fa-trash-alt me-1"></i> Delete Reservations
+              </button>
+            </template>
+            <template v-else>
+              <div class="btn-group">
+                <button class="btn btn-danger btn-sm" :disabled="selectedIds.length===0" @click="confirmDeleteSelected">
+                  <i class="fas fa-check me-1"></i> Confirm delete ({{ selectedIds.length }})
+                </button>
+                <button class="btn btn-secondary btn-sm" @click="cancelSelection">
+                  Cancel
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
       </div>
     </div>
Index: ReserveNGo-frontend/src/components/Project/Reservation/reservation_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Reservation/reservation_.vue	(revision 2f425fb5024734c5766475b8a149177eff352618)
+++ ReserveNGo-frontend/src/components/Project/Reservation/reservation_.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
@@ -17,6 +17,14 @@
       default: true,
     },
+    selectionMode: {
+      type: Boolean,
+      default: false,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['cancel', 'edit'],
+  emits: ['cancel', 'edit', 'toggle-select'],
   computed: {
     logoUrl() {
@@ -71,19 +79,32 @@
         </div>
       </div>
-      <div class="ms-auto d-flex gap-2">
-        <button
-          v-if="canEdit && isActive"
-          class="btn btn-outline-primary btn-sm"
-          @click="$emit('edit', reservation)"
-        >
-          <i class="fas fa-edit me-1"></i> Edit
-        </button>
-        <button
-          v-if="canCancel && isActive"
-          class="btn btn-outline-danger btn-sm"
-          @click="$emit('cancel', reservation)"
-        >
-          <i class="fas fa-ban me-1"></i> Cancel
-        </button>
+      <div class="ms-auto d-flex align-items-center gap-2">
+        <template v-if="selectionMode && isActive">
+          <div class="form-check m-0">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              :checked="selected"
+              @change="$emit('toggle-select', reservation)"
+              :aria-label="`Select reservation ${reservation.id}`"
+            />
+          </div>
+        </template>
+        <template v-else>
+          <button
+            v-if="canEdit && isActive"
+            class="btn btn-outline-primary btn-sm"
+            @click="$emit('edit', reservation)"
+          >
+            <i class="fas fa-edit me-1"></i> Edit
+          </button>
+          <button
+            v-if="canCancel && isActive"
+            class="btn btn-outline-danger btn-sm"
+            @click="$emit('cancel', reservation)"
+          >
+            <i class="fas fa-ban me-1"></i> Cancel
+          </button>
+        </template>
       </div>
     </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 2f425fb5024734c5766475b8a149177eff352618)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
@@ -23,5 +23,5 @@
     displayedLocals() {
       return this.mode === 'favourites'
-        ? this.locals.filter((local) => this.favourite_locals.includes(local.id))
+        ? this.favourite_locals
         : this.locals
     },
@@ -30,10 +30,11 @@
   methods: {
     toggleFavourite(id) {
-      const isFav = this.favourite_locals.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)
         .then(() => {
           if (isFav) {
-            this.favourite_locals = this.favourite_locals.filter((fav) => fav !== id)
+            console.log("DOES IT GET HERE", "ID", id, "favourite_locals", this.favourite_locals.filter((fav) => fav.id !== id))
+            this.favourite_locals = this.favourite_locals.filter((fav) => fav.id !== id)
           } else {
             this.favourite_locals.push(id)
@@ -49,5 +50,5 @@
       useCustomer
         .getFavouriteLocals()
-        .then((data) => (this.favourite_locals = data.map((local) => local.id)))
+        .then((data) => (this.favourite_locals = data))
         .catch((err) => console.log(err))
     }
Index: ReserveNGo-frontend/src/repository/Reservations.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Reservations.ts	(revision 2f425fb5024734c5766475b8a149177eff352618)
+++ ReserveNGo-frontend/src/repository/Reservations.ts	(revision 08f1ac442ec30f6895f56b646fddb31882662643)
@@ -33,4 +33,8 @@
   timeOfReservation: string // ISO string
   tableId: number | string
+}
+
+export type DeleteReservationDTO = {
+  reservationIds: Array<number | string>
 }
 
@@ -74,4 +78,9 @@
     return this.httpClient.get(`${reservationId}/edit-info`)
   }
+
+  // DELETE /api/customer/reservations/delete
+  deleteReservations(dto: DeleteReservationDTO): Promise<void> {
+    return this.httpClient.delete('delete', dto)
+  }
 }