Index: ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -79,5 +79,5 @@
       try {
         await useAdmin.deleteRestaurant(localId)
-        this.showToast('Restaurant successfully deleted!')
+        this.showToast('Local successfully deleted!')
         this.fetchRestaurants()
       } catch (error) {
@@ -135,5 +135,5 @@
       try {
         await useAdmin.addRestaurant(this.name)
-        this.showToast('Restaurant added successfully!', 'success')
+        this.showToast('Local added successfully!', 'success')
         this.fetchRestaurants()
         this.showAddRestaurantModal = false
@@ -188,5 +188,5 @@
     <h3 class="mb-3">Restaurants Overview</h3>
 
-    <!-- Add Restaurant Modal -->
+    <!-- Add Local Modal -->
     <div
       v-if="showAddRestaurantModal"
Index: ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/Bars/HeaderNavigationBar.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -27,4 +27,13 @@
     }
   },
+
+  computed: {
+    isFavouritesActive() {
+      return this.$route.path === '/' && this.$route.query.mode === 'favourites'
+    },
+    isReservationsActive() {
+      return this.$route.path === '/my_reservations'
+    },
+  },
 }
 </script>
@@ -39,5 +48,7 @@
       >
         <img src="/src/assets/rng_logo.png" alt="Logo" class="me-2" style="height: 60px" />
-        <span class="navbar-brand fw-bold fs-3 brand-accent">Reserve<span class="brand-n fs-3">N</span>Go</span>
+        <span class="navbar-brand fw-bold fs-3 brand-accent"
+          >Reserve<span class="brand-n fs-3">N</span>Go</span
+        >
       </router-link>
 
@@ -54,33 +65,54 @@
       <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'">
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
             <router-link
-              :to="{ name: 'favourite_locals', params: { mode: 'favourites' } }"
-              class="nav-link text-black"
-              >Favourite locals</router-link
+              :to="{ path: '/', query: { mode: 'favourites' } }"
+              class="nav-link"
+              :class="{
+                'text-white': !isFavouritesActive,
+                'favourites-active': isFavouritesActive,
+                'fw-bold': true,
+              }"
             >
+              Favourites
+            </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"
+              :class="{
+                'text-white': !isReservationsActive,
+                'favourites-active': isReservationsActive,
+                'fw-bold': true,
+              }"
             >
+              Reservations
+            </router-link>
           </li>
 
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_ADMIN'">
-            <router-link to="/admin-dashboard" class="nav-link text-black">Dashboard</router-link>
-          </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="/admin-dashboard" class="nav-link text-white fw-bold"
+              >Dashboard</router-link
             >
           </li>
 
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
-            <router-link to="/manager-dashboard" class="nav-link text-black">Dashboard</router-link>
+            <router-link
+              :to="`/more_details/${this.managerLocalId}`"
+              class="nav-link text-white fw-bold"
+              >My Local</router-link
+            >
+          </li>
+
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
+            <router-link to="/manager-dashboard" class="nav-link text-white fw-bold"
+              >Dashboard</router-link
+            >
           </li>
 
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_WORKER'">
-            <router-link to="/worker-reservations-dashboard" class="nav-link text-black"
+            <router-link to="/worker-reservations-dashboard" class="nav-link text-white fw-bold"
               >Dashboard</router-link
             >
@@ -136,3 +168,7 @@
   color: #f55845;
 }
+
+.favourites-active {
+  color: #f55845 !important;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -1,6 +1,4 @@
 <script>
 import { userStore } from '@/PiniaStores/UserStore.js'
-import { useUtility } from '@/repository/utility.ts'
-import { config } from '@/constants/Api_config.js'
 import noImg from '@/assets/no-img.png'
 
@@ -9,4 +7,6 @@
     event: { type: Object, required: true },
     isFavoured: { type: Boolean, default: false },
+    mode: { type: String, default: 'all' },
+    isSelected: { type: Boolean, default: false },
   },
 
@@ -14,38 +14,6 @@
     return {
       userStore_: userStore(),
-      eventImage: null,
+      isHovered: false,
     }
-  },
-
-  beforeMount() {
-    if (this.event.image) {
-      useUtility
-        .fetchImageBase64(this.event.image)
-        .then((base64) => (this.eventImage = base64))
-        .catch((error) => console.log(error))
-    }
-  },
-
-  computed: {
-    event_image() {
-      const url = new URL(this.event.image, config.API_BASE_URL)
-      return url.toString()
-    },
-
-    formattedDate() {
-      if (!this.event.eventStart.date) return 'Date TBA'
-      const date = new Date(this.event.eventStart.date)
-      return date.toLocaleDateString('en-US', {
-        weekday: 'short',
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      })
-    },
-
-    formattedTime() {
-      if (!this.event.eventStart.time) return ''
-      return this.event.eventStart.time
-    },
   },
 
@@ -61,4 +29,16 @@
       event.target.src = noImg
     },
+    handleMouseEnter() {
+      this.isHovered = true
+    },
+    handleMouseLeave() {
+      this.isHovered = false
+    },
+  },
+
+  computed: {
+    eventImageSrc() {
+      return this.event.image ? this.event.image : noImg
+    },
   },
 }
@@ -69,9 +49,13 @@
     id="container"
     class="row align-items-center my-3 p-3 rounded shadow-sm"
+    :class="{ selected: isSelected }"
     @click="handleClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
+    <!-- Image -->
     <div class="col-auto pe-0">
       <img
-        :src="event_image"
+        :src="eventImageSrc"
         alt="Event"
         class="rounded"
@@ -81,4 +65,5 @@
     </div>
 
+    <!-- Info -->
     <div class="col info ps-3">
       <h5 class="mb-1 fw-bold">{{ event.title || event.name }}</h5>
@@ -92,22 +77,23 @@
         <i class="fas fa-map-marker-alt me-1"></i>{{ event.location }}
       </p>
-      <p class="mb-0 text-muted" v-if="event.description">
-        {{ event.description.substring(0, 100) }}{{ event.description.length > 100 ? '...' : '' }}
-      </p>
     </div>
 
+    <!-- Buttons (ON HOVER) -->
     <div class="col-auto d-flex align-items-center">
-      <div class="action-buttons d-flex align-items-center gap-2">
-        <button
-          class="btn btn-favourite"
-          :class="{ active: isFavoured }"
-          @click.stop="addToFavourites"
-        >
-          {{ isFavoured ? 'Remove from Favourites' : 'Add to Favourites' }}
-        </button>
-        <button class="btn btn-outline-dark">
-          <i class="fas fa-info-circle me-1"></i> View Details
-        </button>
-      </div>
+      <transition name="fade">
+        <div class="action-buttons d-flex align-items-center gap-2" v-if="isHovered || isSelected">
+          <button
+            class="btn btn-favourite"
+            :class="{ active: isFavoured }"
+            @click.stop="addToFavourites"
+          >
+            {{ isFavoured ? 'Remove from Favourites' : 'Add to Favourites' }}
+          </button>
+
+          <button class="btn btn-outline-dark">
+            <i class="fas fa-info-circle me-1"></i> View Details
+          </button>
+        </div>
+      </transition>
     </div>
   </div>
@@ -116,8 +102,13 @@
 <style scoped>
 #container {
-  border-left: 3px solid #5ea5bc;
+  border-left: 3px solid transparent;
   background: #fff;
   transition: all 0.2s ease;
   cursor: pointer;
+  position: relative;
+}
+
+#container:not(.selected) {
+  border-left-color: #5ea5bc;
 }
 
@@ -125,4 +116,14 @@
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
   background-color: #f9f9f9;
+}
+
+#container.selected::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 3px solid #5ea5bc;
+  border-radius: 8px;
+  pointer-events: none;
+  animation: drawBorder 0.3s linear forwards;
 }
 
@@ -161,3 +162,30 @@
   gap: 0.5rem;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes drawBorder {
+  0% {
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  }
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
+  }
+  75% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -5,6 +5,17 @@
 export default defineComponent({
   components: { EventInEventListing },
+
+  data() {
+    return {
+      selectedEventId: null,
+    }
+  },
+
   props: {
-    events: Array,
+    mode: String,
+    events: {
+      type: Array,
+      default: () => [],
+    },
     favouriteEvents: {
       type: Array,
@@ -12,28 +23,8 @@
     },
   },
-  data() {
-    return {
-      selectedEventId: null,
-      showFavouritesOnly: false,
-    }
-  },
 
   computed: {
-    flattenedEvents() {
-      if (!this.events || this.events.length === 0) return []
-
-      if (Array.isArray(this.events[0])) {
-        return this.events.flat()
-      }
-
-      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))
+      return this.mode === 'favourites' ? this.favouriteEvents : this.events
     },
   },
@@ -49,29 +40,28 @@
 <template>
   <div id="container" class="container">
-    <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>
+    <h5>Events</h5>
+
+    <!-- EMPTY STATES -->
+    <div v-if="mode === 'favourites'">
+      <div v-if="favouriteEvents.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 events yet.</p>
       </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 v-if="showFavouritesOnly">You don't have any favourite events yet.</p>
-      <p v-else>No events available at the moment.</p>
+    <div v-else>
+      <div v-if="events.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>
+      </div>
     </div>
 
+    <!-- LIST -->
     <div v-for="event in displayedEvents" :key="event.id">
       <EventInEventListing
         :event="event"
         :isFavoured="favouriteEvents.map((fav) => fav.id).includes(event.id)"
+        :isSelected="selectedEventId === event.id"
+        :mode="mode"
         @select="selectedEventId = event.id"
         @toggle-favourite="toggleFavourite"
@@ -85,21 +75,3 @@
   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/Local/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/Locale_.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/Local/Locale_.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,754 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useRouter } from 'vue-router'
+import { transformArray } from '@/mixins/utilFunctions.js'
+import events_carousel from '@/components/Project/Event/events_carousel_in_locale.vue'
+import WorkingHoursTable from '@/components/Project/Local/working-hours-table.vue'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+import PhotosGridSystem from '@/components/Project/Utility/PhotosGridSystem.vue'
+import ImageModalLocale from '@/components/Project/Utility/ImageModalLocale.vue'
+import RatingsForLocal from '@/components/Project/Customer/RatingsForLocal.vue'
+import { config } from '@/constants/Api_config.js'
+import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
+import AddEventModal from '@/components/Project/Event/EditEventModal.vue'
+import { useToasts } from '@/composables/useToast.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import { useLocales } from '@/repository/Locale'
+import { useCustomer } from '@/repository/Customer.ts'
+import makeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
+import noImg from '@/assets/no-img.png'
+
+export default {
+  components: {
+    makeReservationModal,
+    LoadingIcon,
+    events_carousel,
+    WorkingHoursTable,
+    PhotosGridSystem,
+    ImageModalLocale,
+    RatingsForLocal,
+    ManagerFileInput,
+    AddEventModal,
+  },
+  data() {
+    return {
+      locale: {
+        id: '',
+        name: '',
+        description: '',
+        address: '',
+        workingHours: '',
+        services: [],
+        ratingAvg: '',
+        events: [],
+        localPhotos: [],
+        menuPhoto: '',
+        menuLink: '',
+        contact: {
+          phone: '',
+          email: '',
+          socialLinks: {},
+        },
+        logo: '',
+      },
+
+      eventsForCarousel: [],
+      local_id: this.$route.params['id'],
+      userStore: userStore(),
+      router: useRouter(),
+      isEditing: false,
+      cachedLocale: null,
+
+      galleryImages: [
+        'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500',
+        'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500',
+        'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=500',
+        'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=500',
+        'https://images.unsplash.com/photo-1484723051597-626a5d19c0ae?w=500',
+        'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=500',
+      ],
+
+      //MODAL
+      isModalVisible: false,
+      selectedImageIndex: 0,
+      //MODAL END
+
+      //UPLOADing files state
+      isLogoUploading: false,
+      isPhotoUploading: false,
+      //END UPLOADING files state
+
+      //loading details
+      isSaveChangesLoading: false,
+      //END loading details
+
+      isAddEventModalVisible: false,
+
+      //Edit Event
+      isEventModalVisible: false,
+      targetEditEvent: null,
+      //End Edit event
+
+      //Toast
+      showToast: useToasts().showToast,
+      //Toast end
+
+      // Working hours edit helpers
+      daysOfWeek: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'],
+      // Holds text inputs per day during edit mode, e.g. "09:00:00-17:00:00" or "Closed"
+      workingHoursInputs: {},
+
+      modalOpen: false,
+    }
+  },
+  computed: {
+    roundedRating() {
+      const rating = parseFloat(this.locale.ratingAvg)
+      if (isNaN(rating)) return 0
+      return Math.round(rating * 2) / 2
+    },
+    servicesAsString: {
+      get() {
+        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : ''
+      },
+      set(newValue) {
+        this.locale.services = newValue
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+      },
+    },
+    fullPicturesUrls() {
+      return this.locale.localPhotos.map((path) => `${config.API_BASE_URL}${path}`)
+    },
+    logoPicture() {
+      if (!this.locale.logo) {
+        return 'https://cdn.vuetifyjs.com/images/profiles/default-avatar.png'
+      }
+      try {
+        const url = new URL(this.locale.logo, config.API_BASE_URL)
+        return url.toString()
+      } catch {
+        return config.API_BASE_URL + this.locale.logo
+      }
+    },
+  },
+
+  mounted() {
+    this.fetchLocaleData()
+  },
+  methods: {
+    onImageError(event) {
+      event.target.src = noImg
+    },
+    handleRemoveImage(image, index) {
+      this.locale.localPhotos.splice(index, 1)
+      let url = new URL(image)
+      console.log('PHOTO-URL', url.pathname)
+      const localPhotosUrls = [url.pathname]
+      useLocalManager
+        .deletePhoto({ localPhotosUrls })
+        .then(() => {
+          this.showToast('Successfully deleted a local image')
+        })
+        .catch((error) => {
+          this.showToast(error.response, 'error')
+          this.locale.localPhotos.push(image)
+        })
+    },
+
+    openImageModal(index, secondRow = false) {
+      if (secondRow) {
+        index += 2
+      }
+      this.selectedImageIndex = index
+      this.isModalVisible = true
+    },
+    closeImageModal() {
+      this.isModalVisible = false
+    },
+
+    fetchLocaleData() {
+      useLocales
+        .getSpecificLocale(this.local_id)
+        .then((data) => {
+          this.locale = data
+          console.log('LOCAL::: WORKING HOURS DATA', this.locale.workingHours)
+          if (!this.locale.contact) {
+            this.locale.contact = { phone: '', email: '' }
+          }
+          if (!this.locale.services) {
+            this.locale.services = []
+          }
+          this.eventsForCarousel = transformArray(this.locale.events, 2)
+        })
+        .catch((err) => console.log('Error fetching local data:', err))
+    },
+    addToFavourites() {
+      useCustomer.addFavourite(this.locale.id).catch((error) => console.log(error))
+    },
+    uploadLogo(fileInput) {
+      this.isLogoUploading = true
+      const picture = fileInput
+      if (!picture) {
+        console.warn('No logo file selected')
+        return
+      }
+      const formData = new FormData()
+      formData.append('logo', picture)
+      useLocalManager
+        .uploadLogo(formData)
+        .then(() => {
+          this.$refs.uploadLogoInputRef.reset()
+          this.showToast('Successfully uploaded the logo')
+        })
+        .catch((error) => {
+          if (error.status === 409) {
+            this.showToast(error.response, 'error')
+          } else {
+            this.showToast('You do not have permission to make this request', 'error')
+          }
+        })
+        .finally(() => {
+          this.isLogoUploading = false
+        })
+    },
+    uploadPhoto(fileInput) {
+      this.isPhotoUploading = true
+      const picture = fileInput
+      if (!picture) {
+        console.warn('No photo file selected')
+        return
+      }
+      const formData = new FormData()
+      formData.append('photo', picture)
+      useLocalManager
+        .uploadImage(formData)
+        .then(() => {
+          this.fetchLocaleData()
+          this.$refs.uploadPhotoInputRef.reset()
+          this.showToast('Successfully uploaded the photo')
+        })
+        .catch((error) => {
+          if (error.status === 409) {
+            this.showToast(error.response, 'error')
+          } else {
+            this.showToast('You do not have permission to make this request', 'error')
+          }
+        })
+        .finally(() => {
+          this.isPhotoUploading = false
+        })
+    },
+    startEditing() {
+      // Create a deep copy of the current state to allow for cancellation
+      this.cachedLocale = JSON.parse(JSON.stringify(this.locale))
+      this.isEditing = true
+      // Initialize working hours inputs for edit mode
+      this.initWorkingHoursInputs()
+    },
+    cancelEditing() {
+      // Restore the original data from the cached copy
+      this.locale = this.cachedLocale
+      this.isEditing = false
+      this.cachedLocale = null
+    },
+    saveLocalChanges() {
+      this.isSaveChangesLoading = true
+      const payload = { ...this.locale }
+      if (this.isEditing) {
+        const { list, error } = this.validateAndBuildWorkingHours()
+        if (error) {
+          this.showToast(error, 'error')
+          this.isSaveChangesLoading = false
+          return
+        }
+        payload.workingHours = list
+      }
+      delete payload.eventsForCarousel
+
+      useLocalManager
+        .saveDetailChanges(payload)
+        .then(() => {
+          this.cachedLocale = null
+          this.showToast('Successfully updated')
+          this.fetchLocaleData()
+        })
+        .catch((error) => {
+          this.locale = this.cachedLocale
+          this.showToast(error.response, 'error')
+        })
+        .finally(() => {
+          this.isSaveChangesLoading = false
+          this.isEditing = false
+        })
+    },
+    initWorkingHoursInputs() {
+      const inputs = {}
+      const source = Array.isArray(this.locale.workingHours) ? this.locale.workingHours : []
+      const map = {}
+      source.forEach((wh) => {
+        if (wh && wh.dayOfWeek) {
+          const day = String(wh.dayOfWeek).toUpperCase()
+          map[day] = wh
+        }
+      })
+      this.daysOfWeek.forEach((day) => {
+        const wh = map[day]
+        if (wh && wh.openTime && wh.closeTime) {
+          inputs[day] = `${wh.openTime}-${wh.closeTime}`
+        } else {
+          inputs[day] = ''
+        }
+      })
+      this.workingHoursInputs = inputs
+    },
+    parseWorkingHourInput(text) {
+      if (text == null) return { type: 'empty' }
+      const trimmed = String(text).trim()
+      if (trimmed.length === 0) return { type: 'empty' }
+      if (/^closed$/i.test(trimmed)) return { type: 'closed' }
+      const parts = trimmed.split('-')
+      if (parts.length !== 2)
+        return { type: 'invalid', reason: 'Expected format HH:MM:SS-HH:MM:SS' }
+      const [from, to] = parts
+      const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/
+      const mFrom = from.match(timeRegex)
+      const mTo = to.match(timeRegex)
+      if (!mFrom || !mTo) return { type: 'invalid', reason: 'Time must be HH:MM:SS' }
+      const h1 = parseInt(mFrom[1], 10),
+        m1 = parseInt(mFrom[2], 10),
+        s1 = parseInt(mFrom[3], 10)
+      const h2 = parseInt(mTo[1], 10),
+        m2 = parseInt(mTo[2], 10),
+        s2 = parseInt(mTo[3], 10)
+      const inRange = (h, m, s) => h >= 0 && h <= 23 && m >= 0 && m <= 59 && s >= 0 && s <= 59
+      if (!inRange(h1, m1, s1) || !inRange(h2, m2, s2))
+        return { type: 'invalid', reason: 'Time values out of range' }
+      const sec1 = h1 * 3600 + m1 * 60 + s1
+      const sec2 = h2 * 3600 + m2 * 60 + s2
+      if (sec1 >= sec2) return { type: 'invalid', reason: 'Open time must be before close time' }
+      return { type: 'range', openTime: `${from}`, closeTime: `${to}` }
+    },
+    validateAndBuildWorkingHours() {
+      const list = []
+      for (const day of this.daysOfWeek) {
+        const value = this.workingHoursInputs[day]
+        const res = this.parseWorkingHourInput(value)
+        if (res.type === 'invalid') {
+          return { list: null, error: `${day}: ${res.reason}` }
+        }
+        if (res.type === 'range') {
+          list.push({
+            dayOfWeek: day,
+            openTime: res.openTime,
+            closeTime: res.closeTime,
+          })
+        }
+      }
+      return { list, error: null }
+    },
+    onWorkingHourBlur(day) {
+      const value = this.workingHoursInputs[day]
+      const res = this.parseWorkingHourInput(value)
+      if (res.type === 'invalid') {
+        this.showToast(`${day}: ${res.reason}`, 'error')
+      }
+    },
+    deleteEvent(eventId) {
+      this.locale.events = this.locale.events.filter((event) => event.id !== eventId)
+      this.fetchLocaleData()
+    },
+    addEvent() {
+      this.fetchLocaleData()
+      this.isModalVisible = false
+    },
+    startEditingEvent(eventId) {
+      this.targetEditEvent = this.locale.events.find((event) => event.id === eventId)
+      console.log('TARGET EDIT EVENT', this.targetEditEvent)
+      this.isEventModalVisible = true
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="locale-details-wrapper py-4 px-3">
+    <div class="container">
+      <div class="row g-4">
+        <!-- Left: Logo -->
+        <div class="col-12 col-md-4">
+          <div class="card position-relative shadow-sm">
+            <img
+              id="logoLocalePicture"
+              :src="logoPicture"
+              class="card-img-top object-fit-cover rounded"
+              style="aspect-ratio: 1 / 1; object-fit: cover"
+              alt="Restaurant Logo"
+              @error="onImageError"
+            />
+            <ManagerFileInput
+              v-if="userStore.isLocaleManager"
+              ref="uploadLogoInputRef"
+              @file-sent="uploadLogo"
+              input-id="localeLogoInput"
+              left-button-text="Choose Logo"
+              right-button-text="Save"
+              :is-loading="isLogoUploading"
+            ></ManagerFileInput>
+          </div>
+
+          <PhotosGridSystem
+            :openImageModal="openImageModal"
+            :images="
+              locale.localPhotos.length === 0
+                ? galleryImages.slice(0, 5)
+                : fullPicturesUrls.slice(0, 5)
+            "
+          ></PhotosGridSystem>
+          <ManagerFileInput
+            v-if="userStore.isLocaleManager"
+            ref="uploadPhotoInputRef"
+            style="margin-top: 1rem"
+            @file-sent="uploadPhoto"
+            input-id="localePhotoInput"
+            left-button-text="Choose Photo"
+            right-button-text="Save"
+            :is-loading="isPhotoUploading"
+          ></ManagerFileInput>
+
+          <ImageModalLocale
+            :show="isModalVisible"
+            :images="locale.localPhotos.length === 0 ? galleryImages : fullPicturesUrls"
+            :start-index="selectedImageIndex"
+            @close="closeImageModal"
+            @delete-photo="handleRemoveImage"
+          />
+        </div>
+
+        <!-- Right: Details -->
+        <div class="col-12 col-md-8">
+          <!-- Header Section -->
+          <div class="card p-4 shadow-sm mb-4">
+            <div class="d-flex justify-content-between align-items-start mb-3">
+              <div class="flex-grow-1">
+                <!-- Name -->
+                <h2 v-if="!isEditing" class="mb-2 fw-bold">{{ locale.name }}</h2>
+                <div v-else class="mb-3">
+                  <label for="nameInput" class="form-label fw-bold">Name</label>
+                  <input type="text" id="nameInput" class="form-control" v-model="locale.name" />
+                </div>
+
+                <!-- Address -->
+                <div v-if="!isEditing" class="text-muted mb-2">
+                  <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
+                </div>
+                <div v-else class="mb-3">
+                  <label for="addressInput" class="form-label fw-bold">Address</label>
+                  <input
+                    type="text"
+                    id="addressInput"
+                    class="form-control"
+                    v-model="locale.address"
+                  />
+                </div>
+
+                <!-- Star Rating (Not Editable) -->
+                <div class="d-flex align-items-center">
+                  <div class="text-warning me-2">
+                    <i
+                      v-for="n in 5"
+                      :key="n"
+                      :class="[
+                        roundedRating >= n
+                          ? 'fas fa-star'
+                          : roundedRating >= n - 0.5
+                            ? 'fas fa-star-half-alt'
+                            : 'far fa-star',
+                      ]"
+                    ></i>
+                  </div>
+                  <small class="text-muted">({{ locale.ratingAvg }})</small>
+                </div>
+              </div>
+            </div>
+
+            <!-- Description -->
+            <div class="mb-0">
+              <h6 class="fw-bold mb-2">About</h6>
+              <p v-if="!isEditing" class="text-muted mb-0">{{ locale.description }}</p>
+              <textarea
+                v-else
+                id="descriptionInput"
+                class="form-control"
+                rows="4"
+                v-model="locale.description"
+              ></textarea>
+            </div>
+          </div>
+
+          <!-- Information Grid -->
+          <div class="row g-4 mb-4">
+            <!-- Working Hours -->
+            <div class="col-12 col-lg-6">
+              <div class="card p-3 shadow-sm h-100">
+                <h6 class="fw-bold mb-3">
+                  <i class="fas fa-clock me-2 text-primary"></i>Working Hours
+                </h6>
+                <!-- View mode -->
+                <div v-if="!isEditing">
+                  <WorkingHoursTable :workingHours="locale.workingHours"></WorkingHoursTable>
+                </div>
+                <!-- Edit mode -->
+                <div v-else>
+                  <p class="text-muted small mb-2">
+                    Enter time as HH:MM:SS-HH:MM:SS (e.g., 09:00:00-17:30:00). Type "Closed" or
+                    leave blank for closed days.
+                  </p>
+                  <div class="row g-2">
+                    <div class="col-12" v-for="day in daysOfWeek" :key="day">
+                      <label class="form-label small mb-1">{{
+                        day.charAt(0) + day.slice(1).toLowerCase()
+                      }}</label>
+                      <input
+                        type="text"
+                        class="form-control form-control-sm"
+                        v-model="workingHoursInputs[day]"
+                        placeholder="HH:MM:SS-HH:MM:SS or Closed"
+                        @blur="onWorkingHourBlur(day)"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Contact & Menu -->
+            <div class="col-12 col-lg-6">
+              <div class="card p-3 shadow-sm h-100">
+                <h6 class="fw-bold mb-3">
+                  <i class="fas fa-phone me-2 text-primary"></i>Contact & Menu
+                </h6>
+                <div v-if="!isEditing">
+                  <div v-if="locale.contact.phone" class="mb-2">
+                    <i class="fas fa-phone-alt me-2 text-muted"></i>
+                    <span class="text-dark">{{ locale.contact.phone }}</span>
+                  </div>
+                  <div v-if="locale.contact.email" class="mb-3">
+                    <i class="fas fa-envelope me-2 text-muted"></i>
+                    <span class="text-dark">{{ locale.contact.email }}</span>
+                  </div>
+                  <div class="pt-2 border-top">
+                    <strong class="d-block mb-1">Menu</strong>
+                    <a
+                      v-if="locale.menuLink"
+                      :href="locale.menuLink"
+                      target="_blank"
+                      class="text-decoration-none"
+                    >
+                      <i class="fas fa-external-link-alt me-1"></i>View Menu
+                    </a>
+                    <span v-else class="text-muted small">Not available</span>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="mb-2">
+                    <label for="phoneInput" class="form-label small">Phone</label>
+                    <input
+                      type="text"
+                      id="phoneInput"
+                      class="form-control form-control-sm"
+                      v-model="locale.contact.phone"
+                    />
+                  </div>
+                  <div class="mb-2">
+                    <label for="emailInput" class="form-label small">Email</label>
+                    <input
+                      type="email"
+                      id="emailInput"
+                      class="form-control form-control-sm"
+                      v-model="locale.contact.email"
+                    />
+                  </div>
+                  <div>
+                    <label for="menuLinkInput" class="form-label small">Menu Link</label>
+                    <input
+                      type="url"
+                      id="menuLinkInput"
+                      class="form-control form-control-sm"
+                      v-model="locale.menuLink"
+                      placeholder="https://example.com/menu"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Services Section -->
+          <div class="card p-3 shadow-sm mb-4">
+            <h6 class="fw-bold mb-3">
+              <i class="fas fa-concierge-bell me-2 text-primary"></i>Services & Amenities
+            </h6>
+            <div v-if="!isEditing">
+              <div v-if="locale.services && locale.services.length > 0" class="services-grid">
+                <span v-for="service in locale.services" :key="service" class="service-badge">{{
+                  service
+                }}</span>
+              </div>
+              <p v-else class="text-muted small mb-0">No services listed</p>
+            </div>
+            <div v-else>
+              <label for="servicesInput" class="form-label small">Services (comma-separated)</label>
+              <input
+                type="text"
+                id="servicesInput"
+                class="form-control form-control-sm"
+                v-model="servicesAsString"
+                placeholder="WIFI, PARKING, PET_FRIENDLY"
+              />
+            </div>
+          </div>
+
+          <!--Rating component-->
+          <div class="card p-3 shadow-sm mb-4" v-if="userStore.data.role === 'ROLE_CUSTOMER'">
+            <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData" />
+          </div>
+
+          <!-- Events Section -->
+          <div class="card p-4 shadow-sm mb-4">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h6 class="fw-bold mb-0">
+                <i class="fas fa-calendar-alt me-2 text-primary"></i>Upcoming Events
+              </h6>
+              <button
+                v-if="userStore.isLocaleManager"
+                class="btn btn-primary btn-sm"
+                @click="isEventModalVisible = true"
+              >
+                <i class="fas fa-plus me-1"></i> Add Event
+              </button>
+            </div>
+            <div v-if="locale.events && locale.events.length > 0">
+              <events_carousel
+                @edit-started="startEditingEvent"
+                :all-events="eventsForCarousel"
+                @event-deleted="deleteEvent"
+              />
+            </div>
+            <div v-else class="text-center py-4">
+              <i class="fas fa-calendar-times fa-2x text-muted mb-2"></i>
+              <p class="text-muted mb-0">No events scheduled</p>
+            </div>
+          </div>
+
+          <!-- Main Action Buttons -->
+          <div class="card p-3 shadow-sm">
+            <div class="d-flex flex-wrap gap-2">
+              <template v-if="userStore.data.role === 'ROLE_CUSTOMER'">
+                <button @click="modalOpen = true" class="btn btn-dark">
+                  <i class="fas fa-calendar-check me-1"></i> Reserve
+                </button>
+
+                <make-reservation-modal
+                  :localId="locale.id"
+                  :show-modal="modalOpen"
+                  @open-modal="modalOpen = true"
+                  @close-modal="modalOpen = false"
+                ></make-reservation-modal>
+
+                <button class="btn btn-outline-danger" @click="addToFavourites">
+                  <i class="fas fa-heart me-1"></i> Add to Favourites
+                </button>
+              </template>
+
+              <template v-if="userStore.data.role === 'ROLE_LOCAL_MANAGER'">
+                <button v-if="!isEditing" class="btn btn-dark" @click="startEditing">
+                  <i class="fas fa-edit me-1"></i> Edit Details
+                </button>
+                <template v-else>
+                  <button class="btn btn-success" @click="saveLocalChanges">
+                    <i v-if="!isSaveChangesLoading" class="fas fa-save me-1"></i>
+                    <span v-else><LoadingIcon></LoadingIcon></span>
+                    Save
+                  </button>
+                  <button class="btn btn-secondary" @click="cancelEditing">
+                    <i class="fas fa-times me-1"></i> Cancel
+                  </button>
+                </template>
+              </template>
+
+              <router-link
+                to="/"
+                class="btn btn-outline-secondary"
+                v-if="userStore.data.role !== 'ROLE_LOCAL_MANAGER'"
+                ><i class="fas fa-arrow-left me-1"></i> Back</router-link
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <AddEventModal
+    :show="isEventModalVisible"
+    @close="
+      isEventModalVisible = false;
+      targetEditEvent = null;
+    "
+    @event-added="addEvent"
+    @event-updated="addEvent"
+    :event-to-edit="targetEditEvent"
+  />
+</template>
+
+<style scoped>
+.locale-details-wrapper {
+  background-color: #f3f5f8;
+}
+
+.object-fit-cover {
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+}
+
+.services-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.service-badge {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: #e7f3ff;
+  color: #0d6efd;
+  border: 1px solid #b3d9ff;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.service-badge:hover {
+  background-color: #cfe2ff;
+  border-color: #86b7fe;
+  transform: translateY(-1px);
+}
+
+.card {
+  border: none;
+  border-radius: 0.5rem;
+}
+
+.card h6 {
+  color: #212529;
+  font-size: 1rem;
+}
+
+.card h2 {
+  color: #212529;
+  font-size: 1.75rem;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Local/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/Locale_details.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/Local/Locale_details.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,73 @@
+<script>
+import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
+import noImg from '@/assets/no-img.png'
+
+export default {
+  data() {
+    return {
+      restaurant: {
+        name: '',
+        address: '',
+      },
+      restaurantStore: restaurantStore(),
+    }
+  },
+  methods: {
+    onImageError(event) {
+      event.target.src = noImg
+    },
+  },
+}
+</script>
+
+<template>
+  <div id="container" class="p-4 py-5 rounded shadow-sm mt-5">
+    <div class="d-flex align-items-center mb-3">
+      <img
+        :src="restaurantStore.logo"
+        alt="Logo"
+        class="me-3"
+        style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px"
+        @error="onImageError"
+      />
+      <h4 class="mb-0">{{ restaurantStore.name }}</h4>
+    </div>
+
+    <p class="mb-2">
+      <i class="fas fa-clock me-2 text-secondary"></i>
+      <strong>Working hours:</strong> {{ restaurantStore.workingHours }}
+    </p>
+
+    <p class="mb-2">
+      <i class="fas fa-map-marker-alt me-2 text-secondary"></i>
+      <strong>Address:</strong> {{ restaurantStore.address }}
+    </p>
+
+    <p class="mb-3">
+      <i class="fas fa-star me-2 text-warning"></i>
+      <strong>Rating:</strong> {{ restaurantStore.ratingAvg }}
+    </p>
+
+    <div>
+      <router-link :to="`/more_details/${restaurantStore.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">
+        <i class="fas fa-calendar-check me-1"></i> Make reservation
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  font-size: 1rem;
+  margin: 30px auto;
+  border-left: 3px solid #8377d1;
+  background-color: #fff;
+  height: 100%;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,82 @@
+<script>
+import LocalInLocalListing from '@/components/Project/Local/local_in_local_listing.vue'
+import { defineComponent } from 'vue'
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default defineComponent({
+  components: { LocalInLocalListing },
+  props: {
+    mode: String,
+    locals: {
+      type: Array,
+      default: () => [],
+    },
+    favouriteLocals: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      userStore: userStore(),
+      selectedLocalId: null,
+      hoveredLocalId: null,
+    }
+  },
+
+  computed: {
+    displayedLocals() {
+      return this.mode === 'favourites' ? this.favouriteLocals : this.locals
+    },
+  },
+
+  methods: {
+    toggleFavourite(id) {
+      // Emit to parent (Home) which is the single source of truth
+      this.$emit('toggle-favourite', id)
+    },
+  },
+
+  // NOTE: removed mounted fetch of favourites — Home controls that
+})
+</script>
+
+<template>
+  <div id="container" class="container">
+    <h5>Locals</h5>
+
+    <div v-if="mode === 'favourites'">
+      <div v-if="favouriteLocals.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
+        :local="local"
+        :isFavoured="favouriteLocals.map((f) => f.id).includes(local.id)"
+        :isSelected="selectedLocalId === local.id"
+        :isHovered="hoveredLocalId === local.id"
+        :mode="mode"
+        @select="selectedLocalId = local.id"
+        @hover-enter="hoveredLocalId = local.id"
+        @hover-leave="hoveredLocalId = null"
+        @toggle-favourite="toggleFavourite"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  margin: 30px auto;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Local/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/local_in_local_listing.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/Local/local_in_local_listing.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,240 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
+import { config } from '@/constants/Api_config.js'
+import MakeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
+import noImg from '@/assets/no-img.png'
+
+export default {
+  components: { MakeReservationModal },
+  props: {
+    local: { type: Object, required: true },
+    isFavoured: { type: Boolean, default: false },
+    isSelected: Boolean,
+    isHovered: Boolean,
+    mode: String,
+  },
+  data() {
+    return {
+      userStore_: userStore(),
+      modalOpen: false,
+    }
+  },
+  computed: {
+    locale_logo() {
+      const url = new URL(this.local.logo, config.API_BASE_URL)
+      return url.toString()
+    },
+    openStatus() {
+      if (this.local && typeof this.local.open === 'boolean') {
+        return this.local.open ? 'Open' : 'Closed'
+      }
+      return 'Status unavailable'
+    },
+  },
+  methods: {
+    onImageError(event) {
+      event.target.src = noImg
+    },
+    handleClick() {
+      const store = restaurantStore()
+      store.setRestaurant(
+        this.local.id,
+        this.local.name,
+        this.local.description,
+        this.local.address,
+        this.local.workingHours,
+        this.local.logo,
+        this.local.averageRating,
+      )
+      this.$emit('select', this.local.id)
+    },
+    addToFavorites(e) {
+      e.stopPropagation()
+      this.$emit('toggle-favourite', this.local.id)
+    },
+    handleMouseEnter() {
+      this.$emit('hover-enter')
+    },
+    handleMouseLeave() {
+      this.$emit('hover-leave')
+    },
+  },
+}
+</script>
+
+<template>
+  <div
+    id="container"
+    class="row align-items-center my-3 p-3 rounded shadow-sm"
+    :class="{ selected: isSelected }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <!-- Logo -->
+    <div class="col-auto pe-0">
+      <img
+        :src="locale_logo"
+        alt="Logo"
+        class="rounded"
+        style="width: 60px; height: 60px; object-fit: cover"
+        @error="onImageError"
+      />
+    </div>
+
+    <!-- Info -->
+    <div class="col info ps-3">
+      <h5 class="mb-1 fw-bold">{{ local.name }}</h5>
+      <p class="mb-1 text-muted"><i class="fas fa-map-marker-alt me-1"></i>{{ local.address }}</p>
+      <p class="mb-1 text-muted">
+        <i class="fas fa-clock me-2 text-secondary"></i>
+        <span
+          :class="{ 'text-danger': openStatus === 'Closed', 'text-success': openStatus === 'Open' }"
+        >
+          {{ openStatus }}
+        </span>
+      </p>
+      <p class="mb-0 text-muted">
+        <i class="fas fa-star text-warning me-1"></i>{{ local.averageRating }}
+      </p>
+    </div>
+
+    <!-- Buttons -->
+    <div class="col-auto d-flex align-items-center">
+      <transition name="fade">
+        <div class="button-group d-flex align-items-center" v-if="isHovered || isSelected">
+          <!-- Favourite button (same style/logic as events) -->
+          <button
+            class="btn btn-favourite"
+            :class="{ active: isFavoured }"
+            @click.stop="addToFavorites"
+          >
+            {{ isFavoured ? 'Remove from Favourites' : 'Add to Favourites' }}
+          </button>
+
+          <div class="action-buttons ms-2 d-flex align-items-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
+              @click="modalOpen = true"
+              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>
+
+            <make-reservation-modal
+              :localId="local.id"
+              :show-modal="modalOpen"
+              @open-modal="modalOpen = true"
+              @close-modal="modalOpen = false"
+            ></make-reservation-modal>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  border-left: 3px solid transparent;
+  background: #fff;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+#container:not(.selected) {
+  border-left-color: #5ea5bc;
+}
+
+#container:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  background-color: #f9f9f9;
+}
+
+#container.selected {
+  background-color: #fff;
+}
+
+#container.selected::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 3px solid #5ea5bc;
+  border-radius: 8px;
+  animation: drawBorder 0.3s linear forwards;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes drawBorder {
+  0% {
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  }
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
+  }
+  75% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
+
+.button-group {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  height: 60px;
+  align-items: center;
+}
+
+.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;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Local/working-hours-table.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/working-hours-table.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/Local/working-hours-table.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,88 @@
+<script lang="ts">
+export default {
+  props: ['workingHours'],
+
+  computed: {
+    daysOfWeek() {
+      return ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']
+    },
+
+    workingHoursMap() {
+      if (!this.workingHours) return {}
+      const map = {}
+      /* closeTime:"17:00:00"
+      dayOfWeek:"MONDAY"
+      openTime:"09:00:00"*/
+
+      this.workingHours.forEach((wh) => {
+        if (wh.dayOfWeek) {
+          const dayKey = wh.dayOfWeek.toUpperCase()
+          map[dayKey] = {
+            openTime: wh.openTime || '',
+            closeTime: wh.closeTime || '',
+          }
+        }
+      })
+      return map
+    },
+
+    daysWithHours() {
+      return this.daysOfWeek.map((day) => {
+        const hours = this.workingHoursMap[day]
+        return {
+          day: day,
+          hours:
+            hours && hours.openTime && hours.closeTime
+              ? `${hours.openTime} - ${hours.closeTime}`
+              : 'Closed',
+        }
+      })
+    },
+  },
+
+  methods: {
+    formatDayName(day) {
+      return day.charAt(0) + day.slice(1).toLowerCase()
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="table-responsive">
+    <table class="table table-sm table-borderless mb-0">
+      <thead>
+        <tr>
+          <th class="text-muted fw-normal small">Day</th>
+          <th class="text-muted fw-normal small">Hours</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in daysWithHours" :key="item.day">
+          <td class="fw-medium">{{ formatDayName(item.day) }}</td>
+          <td>
+            <span v-if="item.hours" class="text-dark">{{ item.hours }}</span>
+            <span v-else class="text-muted fst-italic small">Closed</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table th {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table td {
+  padding: 0.5rem;
+  vertical-align: middle;
+}
+
+.table tbody tr:not(:last-child) td {
+  border-bottom: 1px solid #f0f0f0;
+}
+</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,754 +1,0 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js'
-import { useRouter } from 'vue-router'
-import { transformArray } from '@/mixins/utilFunctions.js'
-import events_carousel from '@/components/Project/Event/events_carousel_in_locale.vue'
-import WorkingHoursTable from '@/components/Project/Restaurant/working-hours-table.vue'
-import { useLocalManager } from '@/repository/LocalManager.ts'
-import PhotosGridSystem from '@/components/Project/Utility/PhotosGridSystem.vue'
-import ImageModalLocale from '@/components/Project/Utility/ImageModalLocale.vue'
-import RatingsForLocal from '@/components/Project/Customer/RatingsForLocal.vue'
-import { config } from '@/constants/Api_config.js'
-import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
-import AddEventModal from '@/components/Project/Event/EditEventModal.vue'
-import { useToasts } from '@/composables/useToast.js'
-import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
-import { useLocales } from '@/repository/Locale'
-import { useCustomer } from '@/repository/Customer.ts'
-import makeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
-import noImg from '@/assets/no-img.png'
-
-export default {
-  components: {
-    makeReservationModal,
-    LoadingIcon,
-    events_carousel,
-    WorkingHoursTable,
-    PhotosGridSystem,
-    ImageModalLocale,
-    RatingsForLocal,
-    ManagerFileInput,
-    AddEventModal,
-  },
-  data() {
-    return {
-      locale: {
-        id: '',
-        name: '',
-        description: '',
-        address: '',
-        workingHours: '',
-        services: [],
-        ratingAvg: '',
-        events: [],
-        localPhotos: [],
-        menuPhoto: '',
-        menuLink: '',
-        contact: {
-          phone: '',
-          email: '',
-          socialLinks: {},
-        },
-        logo: '',
-      },
-
-      eventsForCarousel: [],
-      local_id: this.$route.params['id'],
-      userStore: userStore(),
-      router: useRouter(),
-      isEditing: false,
-      cachedLocale: null,
-
-      galleryImages: [
-        'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500',
-        'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500',
-        'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=500',
-        'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=500',
-        'https://images.unsplash.com/photo-1484723051597-626a5d19c0ae?w=500',
-        'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=500',
-      ],
-
-      //MODAL
-      isModalVisible: false,
-      selectedImageIndex: 0,
-      //MODAL END
-
-      //UPLOADing files state
-      isLogoUploading: false,
-      isPhotoUploading: false,
-      //END UPLOADING files state
-
-      //loading details
-      isSaveChangesLoading: false,
-      //END loading details
-
-      isAddEventModalVisible: false,
-
-      //Edit Event
-      isEventModalVisible: false,
-      targetEditEvent: null,
-      //End Edit event
-
-      //Toast
-      showToast: useToasts().showToast,
-      //Toast end
-
-      // Working hours edit helpers
-      daysOfWeek: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'],
-      // Holds text inputs per day during edit mode, e.g. "09:00:00-17:00:00" or "Closed"
-      workingHoursInputs: {},
-
-      modalOpen: false,
-    }
-  },
-  computed: {
-    roundedRating() {
-      const rating = parseFloat(this.locale.ratingAvg)
-      if (isNaN(rating)) return 0
-      return Math.round(rating * 2) / 2
-    },
-    servicesAsString: {
-      get() {
-        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : ''
-      },
-      set(newValue) {
-        this.locale.services = newValue
-          .split(',')
-          .map((s) => s.trim())
-          .filter(Boolean)
-      },
-    },
-    fullPicturesUrls() {
-      return this.locale.localPhotos.map((path) => `${config.API_BASE_URL}${path}`)
-    },
-    logoPicture() {
-      if (!this.locale.logo) {
-        return 'https://cdn.vuetifyjs.com/images/profiles/default-avatar.png'
-      }
-      try {
-        const url = new URL(this.locale.logo, config.API_BASE_URL)
-        return url.toString()
-      } catch {
-        return config.API_BASE_URL + this.locale.logo
-      }
-    },
-  },
-
-  mounted() {
-    this.fetchLocaleData()
-  },
-  methods: {
-    onImageError(event) {
-      event.target.src = noImg
-    },
-    handleRemoveImage(image, index) {
-      this.locale.localPhotos.splice(index, 1)
-      let url = new URL(image)
-      console.log('PHOTO-URL', url.pathname)
-      const localPhotosUrls = [url.pathname]
-      useLocalManager
-        .deletePhoto({ localPhotosUrls })
-        .then(() => {
-          this.showToast('Successfully deleted a local image')
-        })
-        .catch((error) => {
-          this.showToast(error.response, 'error')
-          this.locale.localPhotos.push(image)
-        })
-    },
-
-    openImageModal(index, secondRow = false) {
-      if (secondRow) {
-        index += 2
-      }
-      this.selectedImageIndex = index
-      this.isModalVisible = true
-    },
-    closeImageModal() {
-      this.isModalVisible = false
-    },
-
-    fetchLocaleData() {
-      useLocales
-        .getSpecificLocale(this.local_id)
-        .then((data) => {
-          this.locale = data
-          console.log('LOCAL::: WORKING HOURS DATA', this.locale.workingHours)
-          if (!this.locale.contact) {
-            this.locale.contact = { phone: '', email: '' }
-          }
-          if (!this.locale.services) {
-            this.locale.services = []
-          }
-          this.eventsForCarousel = transformArray(this.locale.events, 2)
-        })
-        .catch((err) => console.log('Error fetching local data:', err))
-    },
-    addToFavourites() {
-      useCustomer.addFavourite(this.locale.id).catch((error) => console.log(error))
-    },
-    uploadLogo(fileInput) {
-      this.isLogoUploading = true
-      const picture = fileInput
-      if (!picture) {
-        console.warn('No logo file selected')
-        return
-      }
-      const formData = new FormData()
-      formData.append('logo', picture)
-      useLocalManager
-        .uploadLogo(formData)
-        .then(() => {
-          this.$refs.uploadLogoInputRef.reset()
-          this.showToast('Successfully uploaded the logo')
-        })
-        .catch((error) => {
-          if (error.status === 409) {
-            this.showToast(error.response, 'error')
-          } else {
-            this.showToast('You do not have permission to make this request', 'error')
-          }
-        })
-        .finally(() => {
-          this.isLogoUploading = false
-        })
-    },
-    uploadPhoto(fileInput) {
-      this.isPhotoUploading = true
-      const picture = fileInput
-      if (!picture) {
-        console.warn('No photo file selected')
-        return
-      }
-      const formData = new FormData()
-      formData.append('photo', picture)
-      useLocalManager
-        .uploadImage(formData)
-        .then(() => {
-          this.fetchLocaleData()
-          this.$refs.uploadPhotoInputRef.reset()
-          this.showToast('Successfully uploaded the photo')
-        })
-        .catch((error) => {
-          if (error.status === 409) {
-            this.showToast(error.response, 'error')
-          } else {
-            this.showToast('You do not have permission to make this request', 'error')
-          }
-        })
-        .finally(() => {
-          this.isPhotoUploading = false
-        })
-    },
-    startEditing() {
-      // Create a deep copy of the current state to allow for cancellation
-      this.cachedLocale = JSON.parse(JSON.stringify(this.locale))
-      this.isEditing = true
-      // Initialize working hours inputs for edit mode
-      this.initWorkingHoursInputs()
-    },
-    cancelEditing() {
-      // Restore the original data from the cached copy
-      this.locale = this.cachedLocale
-      this.isEditing = false
-      this.cachedLocale = null
-    },
-    saveLocalChanges() {
-      this.isSaveChangesLoading = true
-      const payload = { ...this.locale }
-      if (this.isEditing) {
-        const { list, error } = this.validateAndBuildWorkingHours()
-        if (error) {
-          this.showToast(error, 'error')
-          this.isSaveChangesLoading = false
-          return
-        }
-        payload.workingHours = list
-      }
-      delete payload.eventsForCarousel
-
-      useLocalManager
-        .saveDetailChanges(payload)
-        .then(() => {
-          this.cachedLocale = null
-          this.showToast('Successfully updated')
-          this.fetchLocaleData()
-        })
-        .catch((error) => {
-          this.locale = this.cachedLocale
-          this.showToast(error.response, 'error')
-        })
-        .finally(() => {
-          this.isSaveChangesLoading = false
-          this.isEditing = false
-        })
-    },
-    initWorkingHoursInputs() {
-      const inputs = {}
-      const source = Array.isArray(this.locale.workingHours) ? this.locale.workingHours : []
-      const map = {}
-      source.forEach((wh) => {
-        if (wh && wh.dayOfWeek) {
-          const day = String(wh.dayOfWeek).toUpperCase()
-          map[day] = wh
-        }
-      })
-      this.daysOfWeek.forEach((day) => {
-        const wh = map[day]
-        if (wh && wh.openTime && wh.closeTime) {
-          inputs[day] = `${wh.openTime}-${wh.closeTime}`
-        } else {
-          inputs[day] = ''
-        }
-      })
-      this.workingHoursInputs = inputs
-    },
-    parseWorkingHourInput(text) {
-      if (text == null) return { type: 'empty' }
-      const trimmed = String(text).trim()
-      if (trimmed.length === 0) return { type: 'empty' }
-      if (/^closed$/i.test(trimmed)) return { type: 'closed' }
-      const parts = trimmed.split('-')
-      if (parts.length !== 2)
-        return { type: 'invalid', reason: 'Expected format HH:MM:SS-HH:MM:SS' }
-      const [from, to] = parts
-      const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/
-      const mFrom = from.match(timeRegex)
-      const mTo = to.match(timeRegex)
-      if (!mFrom || !mTo) return { type: 'invalid', reason: 'Time must be HH:MM:SS' }
-      const h1 = parseInt(mFrom[1], 10),
-        m1 = parseInt(mFrom[2], 10),
-        s1 = parseInt(mFrom[3], 10)
-      const h2 = parseInt(mTo[1], 10),
-        m2 = parseInt(mTo[2], 10),
-        s2 = parseInt(mTo[3], 10)
-      const inRange = (h, m, s) => h >= 0 && h <= 23 && m >= 0 && m <= 59 && s >= 0 && s <= 59
-      if (!inRange(h1, m1, s1) || !inRange(h2, m2, s2))
-        return { type: 'invalid', reason: 'Time values out of range' }
-      const sec1 = h1 * 3600 + m1 * 60 + s1
-      const sec2 = h2 * 3600 + m2 * 60 + s2
-      if (sec1 >= sec2) return { type: 'invalid', reason: 'Open time must be before close time' }
-      return { type: 'range', openTime: `${from}`, closeTime: `${to}` }
-    },
-    validateAndBuildWorkingHours() {
-      const list = []
-      for (const day of this.daysOfWeek) {
-        const value = this.workingHoursInputs[day]
-        const res = this.parseWorkingHourInput(value)
-        if (res.type === 'invalid') {
-          return { list: null, error: `${day}: ${res.reason}` }
-        }
-        if (res.type === 'range') {
-          list.push({
-            dayOfWeek: day,
-            openTime: res.openTime,
-            closeTime: res.closeTime,
-          })
-        }
-      }
-      return { list, error: null }
-    },
-    onWorkingHourBlur(day) {
-      const value = this.workingHoursInputs[day]
-      const res = this.parseWorkingHourInput(value)
-      if (res.type === 'invalid') {
-        this.showToast(`${day}: ${res.reason}`, 'error')
-      }
-    },
-    deleteEvent(eventId) {
-      this.locale.events = this.locale.events.filter((event) => event.id !== eventId)
-      this.fetchLocaleData()
-    },
-    addEvent() {
-      this.fetchLocaleData()
-      this.isModalVisible = false
-    },
-    startEditingEvent(eventId) {
-      this.targetEditEvent = this.locale.events.find((event) => event.id === eventId)
-      console.log('TARGET EDIT EVENT', this.targetEditEvent)
-      this.isEventModalVisible = true
-    },
-  },
-}
-</script>
-
-<template>
-  <div class="locale-details-wrapper py-4 px-3">
-    <div class="container">
-      <div class="row g-4">
-        <!-- Left: Logo -->
-        <div class="col-12 col-md-4">
-          <div class="card position-relative shadow-sm">
-            <img
-              id="logoLocalePicture"
-              :src="logoPicture"
-              class="card-img-top object-fit-cover rounded"
-              style="aspect-ratio: 1 / 1; object-fit: cover"
-              alt="Restaurant Logo"
-              @error="onImageError"
-            />
-            <ManagerFileInput
-              v-if="userStore.isLocaleManager"
-              ref="uploadLogoInputRef"
-              @file-sent="uploadLogo"
-              input-id="localeLogoInput"
-              left-button-text="Choose Logo"
-              right-button-text="Save"
-              :is-loading="isLogoUploading"
-            ></ManagerFileInput>
-          </div>
-
-          <PhotosGridSystem
-            :openImageModal="openImageModal"
-            :images="
-              locale.localPhotos.length === 0
-                ? galleryImages.slice(0, 5)
-                : fullPicturesUrls.slice(0, 5)
-            "
-          ></PhotosGridSystem>
-          <ManagerFileInput
-            v-if="userStore.isLocaleManager"
-            ref="uploadPhotoInputRef"
-            style="margin-top: 1rem"
-            @file-sent="uploadPhoto"
-            input-id="localePhotoInput"
-            left-button-text="Choose Photo"
-            right-button-text="Save"
-            :is-loading="isPhotoUploading"
-          ></ManagerFileInput>
-
-          <ImageModalLocale
-            :show="isModalVisible"
-            :images="locale.localPhotos.length === 0 ? galleryImages : fullPicturesUrls"
-            :start-index="selectedImageIndex"
-            @close="closeImageModal"
-            @delete-photo="handleRemoveImage"
-          />
-        </div>
-
-        <!-- Right: Details -->
-        <div class="col-12 col-md-8">
-          <!-- Header Section -->
-          <div class="card p-4 shadow-sm mb-4">
-            <div class="d-flex justify-content-between align-items-start mb-3">
-              <div class="flex-grow-1">
-                <!-- Name -->
-                <h2 v-if="!isEditing" class="mb-2 fw-bold">{{ locale.name }}</h2>
-                <div v-else class="mb-3">
-                  <label for="nameInput" class="form-label fw-bold">Name</label>
-                  <input type="text" id="nameInput" class="form-control" v-model="locale.name" />
-                </div>
-
-                <!-- Address -->
-                <div v-if="!isEditing" class="text-muted mb-2">
-                  <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
-                </div>
-                <div v-else class="mb-3">
-                  <label for="addressInput" class="form-label fw-bold">Address</label>
-                  <input
-                    type="text"
-                    id="addressInput"
-                    class="form-control"
-                    v-model="locale.address"
-                  />
-                </div>
-
-                <!-- Star Rating (Not Editable) -->
-                <div class="d-flex align-items-center">
-                  <div class="text-warning me-2">
-                    <i
-                      v-for="n in 5"
-                      :key="n"
-                      :class="[
-                        roundedRating >= n
-                          ? 'fas fa-star'
-                          : roundedRating >= n - 0.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star',
-                      ]"
-                    ></i>
-                  </div>
-                  <small class="text-muted">({{ locale.ratingAvg }})</small>
-                </div>
-              </div>
-            </div>
-
-            <!-- Description -->
-            <div class="mb-0">
-              <h6 class="fw-bold mb-2">About</h6>
-              <p v-if="!isEditing" class="text-muted mb-0">{{ locale.description }}</p>
-              <textarea
-                v-else
-                id="descriptionInput"
-                class="form-control"
-                rows="4"
-                v-model="locale.description"
-              ></textarea>
-            </div>
-          </div>
-
-          <!-- Information Grid -->
-          <div class="row g-4 mb-4">
-            <!-- Working Hours -->
-            <div class="col-12 col-lg-6">
-              <div class="card p-3 shadow-sm h-100">
-                <h6 class="fw-bold mb-3">
-                  <i class="fas fa-clock me-2 text-primary"></i>Working Hours
-                </h6>
-                <!-- View mode -->
-                <div v-if="!isEditing">
-                  <WorkingHoursTable :workingHours="locale.workingHours"></WorkingHoursTable>
-                </div>
-                <!-- Edit mode -->
-                <div v-else>
-                  <p class="text-muted small mb-2">
-                    Enter time as HH:MM:SS-HH:MM:SS (e.g., 09:00:00-17:30:00). Type "Closed" or
-                    leave blank for closed days.
-                  </p>
-                  <div class="row g-2">
-                    <div class="col-12" v-for="day in daysOfWeek" :key="day">
-                      <label class="form-label small mb-1">{{
-                        day.charAt(0) + day.slice(1).toLowerCase()
-                      }}</label>
-                      <input
-                        type="text"
-                        class="form-control form-control-sm"
-                        v-model="workingHoursInputs[day]"
-                        placeholder="HH:MM:SS-HH:MM:SS or Closed"
-                        @blur="onWorkingHourBlur(day)"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Contact & Menu -->
-            <div class="col-12 col-lg-6">
-              <div class="card p-3 shadow-sm h-100">
-                <h6 class="fw-bold mb-3">
-                  <i class="fas fa-phone me-2 text-primary"></i>Contact & Menu
-                </h6>
-                <div v-if="!isEditing">
-                  <div v-if="locale.contact.phone" class="mb-2">
-                    <i class="fas fa-phone-alt me-2 text-muted"></i>
-                    <span class="text-dark">{{ locale.contact.phone }}</span>
-                  </div>
-                  <div v-if="locale.contact.email" class="mb-3">
-                    <i class="fas fa-envelope me-2 text-muted"></i>
-                    <span class="text-dark">{{ locale.contact.email }}</span>
-                  </div>
-                  <div class="pt-2 border-top">
-                    <strong class="d-block mb-1">Menu</strong>
-                    <a
-                      v-if="locale.menuLink"
-                      :href="locale.menuLink"
-                      target="_blank"
-                      class="text-decoration-none"
-                    >
-                      <i class="fas fa-external-link-alt me-1"></i>View Menu
-                    </a>
-                    <span v-else class="text-muted small">Not available</span>
-                  </div>
-                </div>
-                <div v-else>
-                  <div class="mb-2">
-                    <label for="phoneInput" class="form-label small">Phone</label>
-                    <input
-                      type="text"
-                      id="phoneInput"
-                      class="form-control form-control-sm"
-                      v-model="locale.contact.phone"
-                    />
-                  </div>
-                  <div class="mb-2">
-                    <label for="emailInput" class="form-label small">Email</label>
-                    <input
-                      type="email"
-                      id="emailInput"
-                      class="form-control form-control-sm"
-                      v-model="locale.contact.email"
-                    />
-                  </div>
-                  <div>
-                    <label for="menuLinkInput" class="form-label small">Menu Link</label>
-                    <input
-                      type="url"
-                      id="menuLinkInput"
-                      class="form-control form-control-sm"
-                      v-model="locale.menuLink"
-                      placeholder="https://example.com/menu"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Services Section -->
-          <div class="card p-3 shadow-sm mb-4">
-            <h6 class="fw-bold mb-3">
-              <i class="fas fa-concierge-bell me-2 text-primary"></i>Services & Amenities
-            </h6>
-            <div v-if="!isEditing">
-              <div v-if="locale.services && locale.services.length > 0" class="services-grid">
-                <span v-for="service in locale.services" :key="service" class="service-badge">{{
-                  service
-                }}</span>
-              </div>
-              <p v-else class="text-muted small mb-0">No services listed</p>
-            </div>
-            <div v-else>
-              <label for="servicesInput" class="form-label small">Services (comma-separated)</label>
-              <input
-                type="text"
-                id="servicesInput"
-                class="form-control form-control-sm"
-                v-model="servicesAsString"
-                placeholder="WIFI, PARKING, PET_FRIENDLY"
-              />
-            </div>
-          </div>
-
-          <!--Rating component-->
-          <div class="card p-3 shadow-sm mb-4" v-if="userStore.data.role === 'ROLE_CUSTOMER'">
-            <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData" />
-          </div>
-
-          <!-- Events Section -->
-          <div class="card p-4 shadow-sm mb-4">
-            <div class="d-flex justify-content-between align-items-center mb-3">
-              <h6 class="fw-bold mb-0">
-                <i class="fas fa-calendar-alt me-2 text-primary"></i>Upcoming Events
-              </h6>
-              <button
-                v-if="userStore.isLocaleManager"
-                class="btn btn-primary btn-sm"
-                @click="isEventModalVisible = true"
-              >
-                <i class="fas fa-plus me-1"></i> Add Event
-              </button>
-            </div>
-            <div v-if="locale.events && locale.events.length > 0">
-              <events_carousel
-                @edit-started="startEditingEvent"
-                :all-events="eventsForCarousel"
-                @event-deleted="deleteEvent"
-              />
-            </div>
-            <div v-else class="text-center py-4">
-              <i class="fas fa-calendar-times fa-2x text-muted mb-2"></i>
-              <p class="text-muted mb-0">No events scheduled</p>
-            </div>
-          </div>
-
-          <!-- Main Action Buttons -->
-          <div class="card p-3 shadow-sm">
-            <div class="d-flex flex-wrap gap-2">
-              <template v-if="userStore.data.role === 'ROLE_CUSTOMER'">
-                <button @click="modalOpen = true" class="btn btn-dark">
-                  <i class="fas fa-calendar-check me-1"></i> Reserve
-                </button>
-
-                <make-reservation-modal
-                  :localId="locale.id"
-                  :show-modal="modalOpen"
-                  @open-modal="modalOpen = true"
-                  @close-modal="modalOpen = false"
-                ></make-reservation-modal>
-
-                <button class="btn btn-outline-danger" @click="addToFavourites">
-                  <i class="fas fa-heart me-1"></i> Add to Favourites
-                </button>
-              </template>
-
-              <template v-if="userStore.data.role === 'ROLE_LOCAL_MANAGER'">
-                <button v-if="!isEditing" class="btn btn-dark" @click="startEditing">
-                  <i class="fas fa-edit me-1"></i> Edit Details
-                </button>
-                <template v-else>
-                  <button class="btn btn-success" @click="saveLocalChanges">
-                    <i v-if="!isSaveChangesLoading" class="fas fa-save me-1"></i>
-                    <span v-else><LoadingIcon></LoadingIcon></span>
-                    Save
-                  </button>
-                  <button class="btn btn-secondary" @click="cancelEditing">
-                    <i class="fas fa-times me-1"></i> Cancel
-                  </button>
-                </template>
-              </template>
-
-              <router-link
-                to="/"
-                class="btn btn-outline-secondary"
-                v-if="userStore.data.role !== 'ROLE_LOCAL_MANAGER'"
-                ><i class="fas fa-arrow-left me-1"></i> Back</router-link
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <AddEventModal
-    :show="isEventModalVisible"
-    @close="
-      isEventModalVisible = false;
-      targetEditEvent = null;
-    "
-    @event-added="addEvent"
-    @event-updated="addEvent"
-    :event-to-edit="targetEditEvent"
-  />
-</template>
-
-<style scoped>
-.locale-details-wrapper {
-  background-color: #f3f5f8;
-}
-
-.object-fit-cover {
-  object-fit: cover;
-  width: 100%;
-  height: auto;
-}
-
-.services-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.service-badge {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  background-color: #e7f3ff;
-  color: #0d6efd;
-  border: 1px solid #b3d9ff;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-.service-badge:hover {
-  background-color: #cfe2ff;
-  border-color: #86b7fe;
-  transform: translateY(-1px);
-}
-
-.card {
-  border: none;
-  border-radius: 0.5rem;
-}
-
-.card h6 {
-  color: #212529;
-  font-size: 1rem;
-}
-
-.card h2 {
-  color: #212529;
-  font-size: 1.75rem;
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,73 +1,0 @@
-<script>
-import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
-import noImg from '@/assets/no-img.png'
-
-export default {
-  data() {
-    return {
-      restaurant: {
-        name: '',
-        address: '',
-      },
-      restaurantStore: restaurantStore(),
-    }
-  },
-  methods: {
-    onImageError(event) {
-      event.target.src = noImg
-    },
-  },
-}
-</script>
-
-<template>
-  <div id="container" class="p-4 py-5 rounded shadow-sm mt-5">
-    <div class="d-flex align-items-center mb-3">
-      <img
-        :src="restaurantStore.logo"
-        alt="Logo"
-        class="me-3"
-        style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px"
-        @error="onImageError"
-      />
-      <h4 class="mb-0">{{ restaurantStore.name }}</h4>
-    </div>
-
-    <p class="mb-2">
-      <i class="fas fa-clock me-2 text-secondary"></i>
-      <strong>Working hours:</strong> {{ restaurantStore.workingHours }}
-    </p>
-
-    <p class="mb-2">
-      <i class="fas fa-map-marker-alt me-2 text-secondary"></i>
-      <strong>Address:</strong> {{ restaurantStore.address }}
-    </p>
-
-    <p class="mb-3">
-      <i class="fas fa-star me-2 text-warning"></i>
-      <strong>Rating:</strong> {{ restaurantStore.ratingAvg }}
-    </p>
-
-    <div>
-      <router-link :to="`/more_details/${restaurantStore.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">
-        <i class="fas fa-calendar-check me-1"></i> Make reservation
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-#container {
-  font-size: 1rem;
-  margin: 30px auto;
-  border-left: 3px solid #8377d1;
-  background-color: #fff;
-  height: 100%;
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,91 +1,0 @@
-<script>
-import LocalInLocalListing from '@/components/Project/Restaurant/local_in_local_listing.vue'
-import { defineComponent } from 'vue'
-import { userStore } from '@/PiniaStores/UserStore.js'
-import { useCustomer } from '@/repository/Customer.ts'
-
-export default defineComponent({
-  components: { LocalInLocalListing },
-  props: {
-    mode: String,
-    locals: Array,
-  },
-  data() {
-    return {
-      favourite_locals: [],
-      userStore: userStore(),
-      selectedLocalId: null,
-      hoveredLocalId: null,
-    }
-  },
-
-  computed: {
-    displayedLocals() {
-      return this.mode === 'favourites' ? this.favourite_locals : this.locals
-    },
-  },
-
-  methods: {
-    toggleFavourite(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 !== id)
-          } else {
-            this.favourite_locals.push(id)
-          }
-        })
-        .catch((err) => console.log(err))
-    },
-  },
-
-  mounted() {
-    // Only fetch favourite locals if the user is logged in and is a customer
-    if (this.userStore && this.userStore.data && this.userStore.data.role === 'ROLE_CUSTOMER') {
-      useCustomer
-        .getFavouriteLocals()
-        .then((data) => (this.favourite_locals = data))
-        .catch((err) => console.log(err))
-    }
-  },
-})
-</script>
-
-<template>
-  <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
-        :local="local"
-        :isFavoured="favourite_locals.includes(local.id)"
-        :isSelected="selectedLocalId === local.id"
-        :isHovered="hoveredLocalId === local.id"
-        :mode="mode"
-        @select="selectedLocalId = local.id"
-        @hover-enter="hoveredLocalId = local.id"
-        @hover-leave="hoveredLocalId = null"
-        @toggle-favourite="toggleFavourite"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-#container {
-  margin: 30px auto;
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,230 +1,0 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js'
-import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
-import { config } from '@/constants/Api_config.js'
-import MakeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
-import noImg from '@/assets/no-img.png'
-
-export default {
-  components: { MakeReservationModal },
-  props: {
-    local: { type: Object, required: true },
-    isFavoured: Boolean,
-    isSelected: Boolean,
-    isHovered: Boolean,
-    mode: String,
-  },
-  data() {
-    return {
-      userStore_: userStore(),
-      modalOpen: false,
-    }
-  },
-  computed: {
-    locale_logo() {
-      const url = new URL(this.local.logo, config.API_BASE_URL)
-      return url.toString()
-    },
-    openStatus() {
-      if (this.local && typeof this.local.open === 'boolean') {
-        return this.local.open ? 'Open' : 'Closed'
-      }
-      return 'Status unavailable'
-    },
-  },
-  methods: {
-    onImageError(event) {
-      event.target.src = noImg
-    },
-    handleClick() {
-      const store = restaurantStore()
-      store.setRestaurant(
-        this.local.id,
-        this.local.name,
-        this.local.description,
-        this.local.address,
-        this.local.workingHours,
-        this.local.logo,
-        this.local.averageRating,
-      )
-      this.$emit('select', this.local.id)
-    },
-    addToFavorites() {
-      this.$emit('toggle-favourite', this.local.id)
-    },
-    handleMouseEnter() {
-      this.$emit('hover-enter')
-    },
-    handleMouseLeave() {
-      this.$emit('hover-leave')
-    },
-  },
-}
-</script>
-
-<template>
-  <div
-    id="container"
-    class="row align-items-center my-3 p-3 rounded shadow-sm"
-    :class="{ selected: isSelected }"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @click="handleClick"
-  >
-    <!-- Logo -->
-    <div class="col-auto pe-0">
-      <img
-        :src="locale_logo"
-        alt="Logo"
-        class="rounded"
-        style="width: 60px; height: 60px; object-fit: cover"
-        @error="onImageError"
-      />
-    </div>
-
-    <!-- Info -->
-    <div class="col info ps-3">
-      <h5 class="mb-1 fw-bold">{{ local.name }}</h5>
-      <p class="mb-1 text-muted"><i class="fas fa-map-marker-alt me-1"></i>{{ local.address }}</p>
-      <p class="mb-1 text-muted">
-        <i class="fas fa-clock me-2 text-secondary"></i>
-        <span
-          :class="{ 'text-danger': openStatus === 'Closed', 'text-success': openStatus === 'Open' }"
-        >
-          {{ openStatus }}
-        </span>
-      </p>
-      <p class="mb-0 text-muted">
-        <i class="fas fa-star text-warning me-1"></i>{{ local.averageRating }}
-      </p>
-    </div>
-
-    <!-- Buttons -->
-    <div class="col-auto d-flex align-items-center">
-      <transition name="fade">
-        <div class="button-group d-flex align-items-center" v-if="isHovered || isSelected">
-          <button
-            v-if="userStore_.data.role === 'ROLE_CUSTOMER' && mode === 'all'"
-            :class="['fa-heart', isFavoured ? 'fa-solid liked' : 'fa-regular']"
-            id="like-button"
-            @click.stop="addToFavorites"
-          ></button>
-
-          <div class="action-buttons ms-2 d-flex align-items-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
-              @click="modalOpen = true"
-              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>
-
-            <make-reservation-modal
-              :localId="local.id"
-              :show-modal="modalOpen"
-              @open-modal="modalOpen = true"
-              @close-modal="modalOpen = false"
-            ></make-reservation-modal>
-
-            <button class="btn btn-dark" v-if="mode === 'favourites'" @click="addToFavorites">
-              Remove favourite
-            </button>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-#container {
-  border-left: 3px solid transparent;
-  background: #fff;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  position: relative;
-}
-
-#container:not(.selected) {
-  border-left-color: #5ea5bc;
-}
-
-#container:hover {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
-  background-color: #f9f9f9;
-}
-
-#container.selected {
-  background-color: #fff;
-}
-
-#container.selected::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 3px solid #5ea5bc;
-  border-radius: 8px;
-  animation: drawBorder 0.3s linear forwards;
-  pointer-events: none;
-  z-index: 1;
-}
-
-@keyframes drawBorder {
-  0% {
-    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  }
-  50% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
-  }
-  75% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-}
-
-.button-group {
-  transition:
-    opacity 0.3s ease,
-    transform 0.3s ease;
-  height: 60px;
-  align-items: center;
-}
-
-#like-button {
-  font-size: 24px;
-  color: gray;
-  background: none;
-  border: none;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.liked {
-  color: red !important;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,274 +1,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-
-const props = defineProps({
-  activeView: {
-    type: String,
-    default: 'locals',
-  },
-})
-
-/* ===================== STATE ===================== */
-const searchInput = ref('')
-const sortQuery = ref('')
-
-/* Locals */
-const isOpen = ref(false)
-const localType = ref<string | null>(null)
-const services = ref<string[]>([])
-
-/* Events */
-const eventStatus = ref<string | null>(null)
-const eventType = ref<string | null>(null)
-
-/* ===================== OPTIONS ===================== */
-const localSortOptions = [
-  { value: 'name,asc', text: 'Name (A–Z)' },
-  { value: 'name,desc', text: 'Name (Z–A)' },
-  { value: 'rating,desc', text: 'Highest rating' },
-  { value: 'createdAt,desc', text: 'Newest' },
-]
-
-const eventSortOptions = [
-  { value: 'name,asc', text: 'Name (A–Z)' },
-  { value: 'name,desc', text: 'Name (Z–A)' },
-  { value: 'createdAt,desc', text: 'Newest' },
-]
-
-const localTypes = [
-  { value: 'RESTAURANT', label: 'Restaurant' },
-  { value: 'CAFE', label: 'Café' },
-  { value: 'BAR', label: 'Bar' },
-  { value: 'PUB', label: 'Pub' },
-  { value: 'BISTRO', label: 'Bistro' },
-  { value: 'FOOD_TRUCK', label: 'Food truck' },
-  { value: 'BUFFET', label: 'Buffet' },
-  { value: 'FAST_FOOD', label: 'Fast food' },
-  { value: 'LOUNGE', label: 'Lounge' },
-  { value: 'DELI', label: 'Deli' },
-]
-
-const serviceOptions = [
-  { value: 'WIFI', label: 'Wi-Fi' },
-  { value: 'PET_FRIENDLY', label: 'Pet friendly' },
-  { value: 'PARKING', label: 'Parking' },
-  { value: 'OUTDOOR', label: 'Outdoor seating' },
-  { value: 'INDOOR', label: 'Indoor seating' },
-  { value: 'PLAYGROUND', label: 'Playground' },
-  { value: 'VEGAN_FRIENDLY', label: 'Vegan friendly' },
-  { value: 'VEGETARIAN_FRIENDLY', label: 'Vegetarian friendly' },
-  { value: 'GLUTEN_FREE_FRIENDLY', label: 'Gluten-free friendly' },
-  { value: 'FAMILY_KIDS_FRIENDLY', label: 'Family & kids friendly' },
-  { value: 'SMOKING_FRIENDLY', label: 'Smoking friendly' },
-]
-
-const eventStatuses = [
-  { value: 'UPCOMING', label: 'Upcoming' },
-  { value: 'ACTIVE', label: 'Active' },
-  { value: 'FINISHED', label: 'Finished' },
-]
-
-const eventTypes = [
-  { value: 'LIVE_MUSIC', label: 'Live music' },
-  { value: 'DJ_NIGHT', label: 'DJ night' },
-  { value: 'FOOD_SPECIAL', label: 'Food special' },
-  { value: 'DRINK_SPECIAL', label: 'Drink special' },
-  { value: 'HAPPY_HOUR', label: 'Happy hour' },
-  { value: 'SPORTS_SCREENING', label: 'Sports screening' },
-  { value: 'KARAOKE', label: 'Karaoke' },
-  { value: 'THEME_PARTY', label: 'Theme party' },
-  { value: 'OPEN_MIC', label: 'Open mic' },
-  { value: 'BRUNCH', label: 'Brunch' },
-  { value: 'COOKING_WORKSHOP', label: 'Cooking workshop' },
-  { value: 'ART_EXHIBITION', label: 'Art exhibition' },
-  { value: 'COMEDY_SHOW', label: 'Comedy show' },
-  { value: 'GAME_NIGHT', label: 'Game night' },
-  { value: 'PRIVATE_EVENT', label: 'Private event' },
-  { value: 'SEASONAL_EVENT', label: 'Seasonal event' },
-]
-
-const sortOptions = computed(() =>
-  props.activeView === 'locals' ? localSortOptions : eventSortOptions,
-)
-
-/* ===================== EMIT ===================== */
-const emit = defineEmits<{ (e: 'searchQuerySent', payload: any): void }>()
-let debounceTimer: number | null = null
-
-watch([searchInput, sortQuery, isOpen, localType, services, eventStatus, eventType], () => {
-  if (debounceTimer) clearTimeout(debounceTimer)
-
-  debounceTimer = window.setTimeout(() => {
-    const [sortBy, direction = 'asc'] = sortQuery.value.split(',')
-
-    if (props.activeView === 'locals') {
-      emit('searchQuerySent', {
-        name: searchInput.value,
-        sortBy,
-        direction,
-        isOpen: isOpen.value || null,
-        localType: localType.value,
-        services: services.value,
-      })
-    } else {
-      emit('searchQuerySent', {
-        name: searchInput.value,
-        sortBy,
-        direction,
-        eventStatus: eventStatus.value,
-        eventType: eventType.value,
-      })
-    }
-  }, 350)
-})
-</script>
-
-<
-<template>
-  <div class="search-bar-wrapper">
-    <div class="container">
-      <div class="row justify-content-center">
-        <!-- ================= FILTER BOX ================= -->
-        <div class="col-12 col-md-10 search-bar shadow-sm px-3 py-3">
-          <div class="row g-2 align-items-center">
-            <!-- SEARCH -->
-            <div class="col-12 col-md-4">
-              <input
-                v-model="searchInput"
-                type="text"
-                class="form-control"
-                :placeholder="activeView === 'locals' ? 'Search locals…' : 'Search events…'"
-              />
-            </div>
-
-            <!-- SORT -->
-            <div class="col-6 col-md-2">
-              <select v-model="sortQuery" class="form-select">
-                <option disabled value="">Sort by</option>
-                <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
-                  {{ opt.text }}
-                </option>
-              </select>
-            </div>
-
-            <!-- LOCALS FILTERS -->
-            <template v-if="activeView === 'locals'">
-              <!-- LOCAL TYPE -->
-              <div class="col-6 col-md-3">
-                <select v-model="localType" class="form-select">
-                  <option :value="null">Type</option>
-                  <option v-for="t in localTypes" :key="t.value" :value="t.value">
-                    {{ t.label }}
-                  </option>
-                </select>
-              </div>
-
-              <!-- SERVICES (SAME ROW) -->
-              <div class="col-12 col-md-3">
-                <div class="dropdown w-100">
-                  <button
-                    class="form-select services-select"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                  >
-                    Services
-                    <span v-if="services.length" class="badge bg-primary ms-1">
-                      {{ services.length }}
-                    </span>
-                  </button>
-
-                  <ul class="dropdown-menu p-3 services-dropdown">
-                    <li v-for="s in serviceOptions" :key="s.value">
-                      <div class="form-check">
-                        <input
-                          class="form-check-input"
-                          type="checkbox"
-                          :value="s.value"
-                          v-model="services"
-                        />
-                        <label class="form-check-label">
-                          {{ s.label }}
-                        </label>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </template>
-
-            <!-- EVENTS FILTERS -->
-            <template v-else>
-              <div class="col-6 col-md-3">
-                <select v-model="eventStatus" class="form-select">
-                  <option :value="null">Status</option>
-                  <option v-for="s in eventStatuses" :key="s.value" :value="s.value">
-                    {{ s.label }}
-                  </option>
-                </select>
-              </div>
-
-              <div class="col-6 col-md-3">
-                <select v-model="eventType" class="form-select">
-                  <option :value="null">Type</option>
-                  <option v-for="t in eventTypes" :key="t.value" :value="t.value">
-                    {{ t.label }}
-                  </option>
-                </select>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <!-- ================= OPEN NOW (OUTSIDE BOX) ================= -->
-        <div
-          v-if="activeView === 'locals'"
-          class="col-12 col-md-10 mt-2 d-flex align-items-center gap-2"
-        >
-          <div class="form-check form-switch">
-            <input class="form-check-input open-switch" type="checkbox" v-model="isOpen" />
-          </div>
-          <span class="fw-medium text-success">Open now</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.search-bar-wrapper {
-  position: sticky;
-  top: 0;
-  z-index: 900;
-}
-
-.search-bar {
-  background-color: #f3f5f8;
-  border-radius: 10px;
-}
-
-/* Services dropdown styled like select */
-.services-select {
-  appearance: none;
-  background-color: #fff;
-  border: 1px solid #ced4da;
-  cursor: pointer;
-  text-align: left;
-}
-
-.services-select:focus {
-  border-color: #86b7fe;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-.services-dropdown {
-  min-width: 260px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* Green switch */
-.open-switch:checked {
-  background-color: #5ea5bc;
-  border-color: #5ea5bc;
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ 	(revision )
@@ -1,88 +1,0 @@
-<script lang="ts">
-export default {
-  props: ['workingHours'],
-
-  computed: {
-    daysOfWeek() {
-      return ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']
-    },
-
-    workingHoursMap() {
-      if (!this.workingHours) return {}
-      const map = {}
-      /* closeTime:"17:00:00"
-      dayOfWeek:"MONDAY"
-      openTime:"09:00:00"*/
-
-      this.workingHours.forEach((wh) => {
-        if (wh.dayOfWeek) {
-          const dayKey = wh.dayOfWeek.toUpperCase()
-          map[dayKey] = {
-            openTime: wh.openTime || '',
-            closeTime: wh.closeTime || '',
-          }
-        }
-      })
-      return map
-    },
-
-    daysWithHours() {
-      return this.daysOfWeek.map((day) => {
-        const hours = this.workingHoursMap[day]
-        return {
-          day: day,
-          hours:
-            hours && hours.openTime && hours.closeTime
-              ? `${hours.openTime} - ${hours.closeTime}`
-              : 'Closed',
-        }
-      })
-    },
-  },
-
-  methods: {
-    formatDayName(day) {
-      return day.charAt(0) + day.slice(1).toLowerCase()
-    },
-  },
-}
-</script>
-
-<template>
-  <div class="table-responsive">
-    <table class="table table-sm table-borderless mb-0">
-      <thead>
-        <tr>
-          <th class="text-muted fw-normal small">Day</th>
-          <th class="text-muted fw-normal small">Hours</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in daysWithHours" :key="item.day">
-          <td class="fw-medium">{{ formatDayName(item.day) }}</td>
-          <td>
-            <span v-if="item.hours" class="text-dark">{{ item.hours }}</span>
-            <span v-else class="text-muted fst-italic small">Closed</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-.table th {
-  padding: 0.5rem;
-  font-size: 0.875rem;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.table td {
-  padding: 0.5rem;
-  vertical-align: middle;
-}
-
-.table tbody tr:not(:last-child) td {
-  border-bottom: 1px solid #f0f0f0;
-}
-</style>
Index: ReserveNGo-frontend/src/components/Project/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/home_.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/home_.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -1,6 +1,6 @@
 <script>
-import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
+import Locale_listing_container from '@/components/Project/Local/Locale_listing_container.vue'
 import Event_listing_container from '@/components/Project/Event/event_listing_container.vue'
-import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
+import SearchFilterPanel from '@/components/Project/search_filter_panel.vue'
 import Events_carousel from '@/components/Project/Event/events_carousel.vue'
 
@@ -22,6 +22,9 @@
       events: [],
       carouselEvents: [],
+      favouriteLocals: [],
+      favouriteEvents: [],
 
       activeView: 'locals',
+      isFavouritesMode: false,
 
       localPage: 0,
@@ -64,4 +67,5 @@
           this.localTotalPages = data.totalPages
         })
+        .catch((err) => console.log('Failed fetching locals', err))
     },
 
@@ -83,4 +87,5 @@
           this.eventTotalPages = data.totalPages
         })
+        .catch((err) => console.log('Failed fetching events', err))
     },
 
@@ -135,7 +140,19 @@
 
     /* ===================== FAVOURITES ===================== */
+    async loadFavouriteLocals() {
+      try {
+        const data = await useCustomer.getFavouriteLocals()
+        // Expecting an array of local objects
+        this.favouriteLocals = data || []
+      } catch (err) {
+        console.log('Failed to fetch favourite locals', err)
+        this.favouriteLocals = []
+      }
+    },
+
     async loadFavouriteEvents() {
       try {
         const data = await useCustomer.getFavouriteEvent()
+        // API sometimes returns { events: [...] } or array directly
         this.favouriteEvents = data.events || data || []
       } catch (error) {
@@ -145,4 +162,5 @@
     },
 
+    // Called when event card emits toggle
     toggleFavouriteEvent(id) {
       const isFav = this.favouriteEvents.map((item) => item.id).includes(id)
@@ -156,19 +174,61 @@
             this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id)
           } else {
+            // find in current events page (if exists) and push an object
             const event = this.events.find((e) => e.id === id)
             if (event) {
               this.favouriteEvents.push(event)
+            } else {
+              // If the event wasn't in currently loaded events, it's safer to reload favourites
+              this.loadFavouriteEvents()
             }
           }
         })
-        .catch((err) => console.log('Error toggling favourite:', err))
+        .catch((err) => console.log('Error toggling favourite event:', err))
+    },
+
+    // Called when local card emits toggle
+    toggleFavouriteLocal(id) {
+      const isFav = this.favouriteLocals.map((item) => item.id).includes(id)
+      const action = isFav ? useCustomer.removeFavourite(id) : useCustomer.addFavourite(id)
+
+      Promise.resolve(action)
+        .then(() => {
+          if (isFav) {
+            this.favouriteLocals = this.favouriteLocals.filter((fav) => fav.id !== id)
+          } else {
+            const local = this.locals.find((l) => l.id === id)
+            if (local) {
+              this.favouriteLocals.push(local)
+            } else {
+              // If the local isn't on the current page, reload favourites
+              this.loadFavouriteLocals()
+            }
+          }
+        })
+        .catch((err) => console.log('Error toggling favourite local:', err))
     },
   },
 
   beforeMount() {
-    this.loadFavouriteEvents()
-    this.fetchLocals(0)
-    this.fetchEvents(0)
+    // only get carousel here — the rest is handled in the watcher, so we react to route changes
     this.fetchCarouselEvents()
+  },
+
+  watch: {
+    '$route.query.mode': {
+      immediate: true,
+      async handler(mode) {
+        this.isFavouritesMode = mode === 'favourites'
+
+        // ALWAYS load favourites (needed for correct toggle state)
+        await this.loadFavouriteEvents()
+        await this.loadFavouriteLocals()
+
+        if (!this.isFavouritesMode) {
+          this.fetchLocals(0)
+          this.fetchEvents(0)
+        }
+      },
+    },
   },
 }
@@ -209,8 +269,15 @@
         <!-- LISTING -->
         <div class="col-md-8 listing-column">
-          <Locale_listing_container v-if="activeView === 'locals'" :locals="locals" mode="all" />
+          <Locale_listing_container
+            v-if="activeView === 'locals'"
+            :locals="locals"
+            :mode="isFavouritesMode ? 'favourites' : 'all'"
+            :favouriteLocals="favouriteLocals"
+            @toggle-favourite="toggleFavouriteLocal"
+          />
 
           <Event_listing_container
             v-else
+            :mode="isFavouritesMode ? 'favourites' : 'all'"
             :events="events"
             :favouriteEvents="favouriteEvents"
@@ -220,5 +287,5 @@
           <!-- ===================== PAGINATION ===================== -->
           <div
-            v-if="activeView === 'locals' && localTotalPages > 1"
+            v-if="!isFavouritesMode && activeView === 'locals' && localTotalPages > 1"
             class="d-flex justify-content-center align-items-center mt-4 gap-2"
           >
@@ -243,5 +310,5 @@
 
           <div
-            v-if="activeView === 'events' && eventTotalPages > 1"
+            v-if="!isFavouritesMode && activeView === 'events' && eventTotalPages > 1"
             class="d-flex justify-content-center align-items-center mt-4 gap-2"
           >
Index: ReserveNGo-frontend/src/components/Project/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/search_filter_panel.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
+++ ReserveNGo-frontend/src/components/Project/search_filter_panel.vue	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+
+const props = defineProps({
+  activeView: {
+    type: String,
+    default: 'locals',
+  },
+})
+
+/* ===================== STATE ===================== */
+const searchInput = ref('')
+const sortQuery = ref('')
+
+/* Locals */
+const isOpen = ref(false)
+const localType = ref<string | null>(null)
+const services = ref<string[]>([])
+
+/* Events */
+const eventStatus = ref<string | null>(null)
+const eventType = ref<string | null>(null)
+
+/* ===================== OPTIONS ===================== */
+const localSortOptions = [
+  { value: 'name,asc', text: 'Name (A–Z)' },
+  { value: 'name,desc', text: 'Name (Z–A)' },
+  { value: 'rating,desc', text: 'Highest rating' },
+  { value: 'createdAt,desc', text: 'Newest' },
+]
+
+const eventSortOptions = [
+  { value: 'name,asc', text: 'Name (A–Z)' },
+  { value: 'name,desc', text: 'Name (Z–A)' },
+  { value: 'createdAt,desc', text: 'Newest' },
+]
+
+const localTypes = [
+  { value: 'RESTAURANT', label: 'Local' },
+  { value: 'CAFE', label: 'Café' },
+  { value: 'BAR', label: 'Bar' },
+  { value: 'PUB', label: 'Pub' },
+  { value: 'BISTRO', label: 'Bistro' },
+  { value: 'FOOD_TRUCK', label: 'Food truck' },
+  { value: 'BUFFET', label: 'Buffet' },
+  { value: 'FAST_FOOD', label: 'Fast food' },
+  { value: 'LOUNGE', label: 'Lounge' },
+  { value: 'DELI', label: 'Deli' },
+]
+
+const serviceOptions = [
+  { value: 'WIFI', label: 'Wi-Fi' },
+  { value: 'PET_FRIENDLY', label: 'Pet friendly' },
+  { value: 'PARKING', label: 'Parking' },
+  { value: 'OUTDOOR', label: 'Outdoor seating' },
+  { value: 'INDOOR', label: 'Indoor seating' },
+  { value: 'PLAYGROUND', label: 'Playground' },
+  { value: 'VEGAN_FRIENDLY', label: 'Vegan friendly' },
+  { value: 'VEGETARIAN_FRIENDLY', label: 'Vegetarian friendly' },
+  { value: 'GLUTEN_FREE_FRIENDLY', label: 'Gluten-free friendly' },
+  { value: 'FAMILY_KIDS_FRIENDLY', label: 'Family & kids friendly' },
+  { value: 'SMOKING_FRIENDLY', label: 'Smoking friendly' },
+]
+
+const eventStatuses = [
+  { value: 'UPCOMING', label: 'Upcoming' },
+  { value: 'ACTIVE', label: 'Active' },
+  { value: 'FINISHED', label: 'Finished' },
+]
+
+const eventTypes = [
+  { value: 'LIVE_MUSIC', label: 'Live music' },
+  { value: 'DJ_NIGHT', label: 'DJ night' },
+  { value: 'FOOD_SPECIAL', label: 'Food special' },
+  { value: 'DRINK_SPECIAL', label: 'Drink special' },
+  { value: 'HAPPY_HOUR', label: 'Happy hour' },
+  { value: 'SPORTS_SCREENING', label: 'Sports screening' },
+  { value: 'KARAOKE', label: 'Karaoke' },
+  { value: 'THEME_PARTY', label: 'Theme party' },
+  { value: 'OPEN_MIC', label: 'Open mic' },
+  { value: 'BRUNCH', label: 'Brunch' },
+  { value: 'COOKING_WORKSHOP', label: 'Cooking workshop' },
+  { value: 'ART_EXHIBITION', label: 'Art exhibition' },
+  { value: 'COMEDY_SHOW', label: 'Comedy show' },
+  { value: 'GAME_NIGHT', label: 'Game night' },
+  { value: 'PRIVATE_EVENT', label: 'Private event' },
+  { value: 'SEASONAL_EVENT', label: 'Seasonal event' },
+]
+
+const sortOptions = computed(() =>
+  props.activeView === 'locals' ? localSortOptions : eventSortOptions,
+)
+
+/* ===================== EMIT ===================== */
+const emit = defineEmits<{ (e: 'searchQuerySent', payload: any): void }>()
+let debounceTimer: number | null = null
+
+watch([searchInput, sortQuery, isOpen, localType, services, eventStatus, eventType], () => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+
+  debounceTimer = window.setTimeout(() => {
+    const [sortBy, direction = 'asc'] = sortQuery.value.split(',')
+
+    if (props.activeView === 'locals') {
+      emit('searchQuerySent', {
+        name: searchInput.value,
+        sortBy,
+        direction,
+        isOpen: isOpen.value || null,
+        localType: localType.value,
+        services: services.value,
+      })
+    } else {
+      emit('searchQuerySent', {
+        name: searchInput.value,
+        sortBy,
+        direction,
+        eventStatus: eventStatus.value,
+        eventType: eventType.value,
+      })
+    }
+  }, 350)
+})
+</script>
+
+<
+<template>
+  <div class="search-bar-wrapper">
+    <div class="container">
+      <div class="row justify-content-center">
+        <!-- ================= FILTER BOX ================= -->
+        <div class="col-12 col-md-10 search-bar shadow-sm px-3 py-3">
+          <div class="row g-2 align-items-center">
+            <!-- SEARCH -->
+            <div class="col-12 col-md-4">
+              <input
+                v-model="searchInput"
+                type="text"
+                class="form-control"
+                :placeholder="activeView === 'locals' ? 'Search locals…' : 'Search events…'"
+              />
+            </div>
+
+            <!-- SORT -->
+            <div class="col-6 col-md-2">
+              <select v-model="sortQuery" class="form-select">
+                <option disabled value="">Sort by</option>
+                <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.text }}
+                </option>
+              </select>
+            </div>
+
+            <!-- LOCALS FILTERS -->
+            <template v-if="activeView === 'locals'">
+              <!-- LOCAL TYPE -->
+              <div class="col-6 col-md-3">
+                <select v-model="localType" class="form-select">
+                  <option :value="null">Type</option>
+                  <option v-for="t in localTypes" :key="t.value" :value="t.value">
+                    {{ t.label }}
+                  </option>
+                </select>
+              </div>
+
+              <!-- SERVICES (SAME ROW) -->
+              <div class="col-12 col-md-3">
+                <div class="dropdown w-100">
+                  <button
+                    class="form-select services-select"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                  >
+                    Services
+                    <span v-if="services.length" class="badge bg-primary ms-1">
+                      {{ services.length }}
+                    </span>
+                  </button>
+
+                  <ul class="dropdown-menu p-3 services-dropdown">
+                    <li v-for="s in serviceOptions" :key="s.value">
+                      <div class="form-check">
+                        <input
+                          class="form-check-input"
+                          type="checkbox"
+                          :value="s.value"
+                          v-model="services"
+                        />
+                        <label class="form-check-label">
+                          {{ s.label }}
+                        </label>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </template>
+
+            <!-- EVENTS FILTERS -->
+            <template v-else>
+              <div class="col-6 col-md-3">
+                <select v-model="eventStatus" class="form-select">
+                  <option :value="null">Status</option>
+                  <option v-for="s in eventStatuses" :key="s.value" :value="s.value">
+                    {{ s.label }}
+                  </option>
+                </select>
+              </div>
+
+              <div class="col-6 col-md-3">
+                <select v-model="eventType" class="form-select">
+                  <option :value="null">Type</option>
+                  <option v-for="t in eventTypes" :key="t.value" :value="t.value">
+                    {{ t.label }}
+                  </option>
+                </select>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <!-- ================= OPEN NOW (OUTSIDE BOX) ================= -->
+        <div
+          v-if="activeView === 'locals'"
+          class="col-12 col-md-10 mt-2 d-flex align-items-center gap-2"
+        >
+          <div class="form-check form-switch">
+            <input class="form-check-input open-switch" type="checkbox" v-model="isOpen" />
+          </div>
+          <span class="fw-medium text-success">Open now</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-bar-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 900;
+}
+
+.search-bar {
+  background-color: #f3f5f8;
+  border-radius: 10px;
+}
+
+/* Services dropdown styled like select */
+.services-select {
+  appearance: none;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  cursor: pointer;
+  text-align: left;
+}
+
+.services-select:focus {
+  border-color: #86b7fe;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.services-dropdown {
+  min-width: 260px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* Green switch */
+.open-switch:checked {
+  background-color: #5ea5bc;
+  border-color: #5ea5bc;
+}
+</style>
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/router/index.js	(revision 340ce98818e9650ec90b4ad1bef97839782279a1)
@@ -5,10 +5,10 @@
 import register_ from '@/components/Project/Auth/register_.vue'
 import my_reservations from '@/components/Project/Reservation/My_reservations.vue'
-import Locale_ from '@/components/Project/Restaurant/Locale_.vue'
+import Locale_ from '@/components/Project/Local/Locale_.vue'
 import Profile_Page from '@/components/Project/Customer/Profile_Page.vue'
 import AdminDashboard from '@/components/Project/Admin/AdminDashboard.vue'
 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'
+import Locale_listing_container from '@/components/Project/Local/Locale_listing_container.vue'
 import DisabledAccountPage from '@/components/Project/Auth/DisabledAccountPage.vue'
 import WorkerReservationsDashboard from '@/components/Project/Worker/WorkerReservationsDashboard.vue'