Index: ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/bootstrap/DataHolder.java
===================================================================
--- ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/bootstrap/DataHolder.java	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/bootstrap/DataHolder.java	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -145,5 +145,5 @@
                     "Finished Event for " + local.getName(),
                     "Description for finished event",
-                    EventType.BRUNCH,
+                    EventType.COOKING_WORKSHOP,
                     LocalDateTime.now().minusDays(7), // Past date
                     LocalDateTime.now().minusDays(6),
Index: ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/model/enumerations/EventType.java
===================================================================
--- ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/model/enumerations/EventType.java	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/model/enumerations/EventType.java	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -11,5 +11,4 @@
     THEME_PARTY,
     OPEN_MIC,
-    BRUNCH,
     COOKING_WORKSHOP,
     ART_EXHIBITION,
Index: ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -3,4 +3,5 @@
 import { useLocalManager } from '@/repository/LocalManager.ts'
 import { useToasts } from '@/composables/useToast.js'
+import { getEnumOptions } from '@/utils/enumLabels' // enum helper
 
 export default {
@@ -17,5 +18,5 @@
         name: '',
         description: '',
-        eventType: '',
+        eventType: '', // sensible default (enum key)
         eventStart: '',
         eventEnd: '',
@@ -25,4 +26,9 @@
       showToast: useToasts().showToast,
     }
+  },
+  computed: {
+    eventTypeOptions() {
+      return getEnumOptions('EventType')
+    },
   },
   methods: {
@@ -47,5 +53,5 @@
             name: '',
             description: '',
-            eventType: 'Music',
+            eventType: '',
             eventStart: '',
             eventEnd: '',
@@ -114,9 +120,7 @@
               <label for="eventType" class="form-label">Event Type</label>
               <select class="form-select" id="eventType" v-model="event.eventType">
-                <option>LIVE_MUSIC</option>
-                <option>DJ_NIGHT</option>
-                <option>FOOD_SPECIAL</option>
-                <option>DRINK_SPECIAL</option>
-                <option>HAPPY_HOUR</option>
+                <option v-for="opt in eventTypeOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
               </select>
             </div>
Index: ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -3,4 +3,5 @@
 import { useLocalManager } from '@/repository/LocalManager.ts'
 import { useToasts } from '@/composables/useToast.js'
+import { getEnumOptions } from '@/utils/enumLabels' // enum helper
 
 export default {
@@ -10,6 +11,5 @@
       required: true,
     },
-    // --- NEW: Optional prop for the event to edit ---
-    // If this is passed, we're in "Edit Mode".
+    // Optional prop for the event to edit
     eventToEdit: {
       type: Object,
@@ -17,9 +17,9 @@
     },
   },
-  emits: ['close', 'event-added', 'event-updated'], // Added 'event-updated' emit
+  emits: ['close', 'event-added', 'event-updated'],
 
   data() {
     return {
-      // We now use a local copy for the form to avoid mutating props.
+      // local copy for the form
       eventData: {},
       user: userStore(),
@@ -29,8 +29,6 @@
   },
 
-  // --- NEW: Computed properties for a dynamic UI ---
   computed: {
     isEditMode() {
-      // The modal is in "Edit Mode" if an event prop was passed.
       return !!this.eventToEdit
     },
@@ -44,11 +42,12 @@
       return this.isEditMode ? 'Update Event' : 'Save Event'
     },
-  },
-
-  // --- NEW: Watcher to initialize the form when the modal opens ---
+    eventTypeOptions() {
+      return getEnumOptions('EventType')
+    },
+  },
+
   watch: {
     show(newVal) {
       if (newVal) {
-        // When the modal is shown, populate the form.
         this.initializeForm()
       }
@@ -61,16 +60,16 @@
     },
 
-    // --- NEW: Helper to set up the form for either mode ---
     initializeForm() {
       if (this.isEditMode) {
-        // In Edit Mode, create a deep copy of the prop to avoid mutation.
-        // This also ensures the form data has the event's ID.
         this.eventData = JSON.parse(JSON.stringify(this.eventToEdit))
+        // ensure eventType has a sane default if missing
+        if (!this.eventData.eventType) {
+          this.eventData.eventType = ''
+        }
       } else {
-        // In Add Mode, set up a fresh, empty object.
         this.eventData = {
           name: '',
           description: '',
-          eventType: 'LIVE_MUSIC', // A sensible default
+          eventType: '',
           eventStart: '',
           eventEnd: '',
@@ -79,7 +78,5 @@
     },
 
-    // --- NEW: Master submit handler ---
     async handleSubmit() {
-      // This single method decides which action to take.
       if (this.isEditMode) {
         await this.updateEvent()
@@ -89,5 +86,4 @@
     },
 
-    // --- REFACTORED: Now uses async/await for cleaner syntax ---
     async addEvent() {
       if (this.isLoading) return
@@ -112,5 +108,4 @@
     },
 
-    // --- NEW: Method for updating an existing event ---
     async updateEvent() {
       if (this.isLoading) return
@@ -118,7 +113,6 @@
 
       try {
-        // Assumes your updateEvent method needs the event object (with its ID).
         await useLocalManager.updateEvent(this.eventData, this.eventData.id)
-        this.$emit('event-updated', this.eventData) // Emit the new data back
+        this.$emit('event-updated', this.eventData)
         this.close()
         this.showToast('Successfully updated the event', 'success')
@@ -134,5 +128,5 @@
 
 <template>
-  <!-- Modal Backdrop (No changes) -->
+  <!-- Modal Backdrop -->
   <div v-if="show" class="modal-backdrop fade show"></div>
 
@@ -149,14 +143,10 @@
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
-        <!-- MODIFIED: Form now calls the master handleSubmit method -->
         <form @submit.prevent="handleSubmit">
           <div class="modal-header">
-            <!-- MODIFIED: Title is now dynamic -->
             <h5 class="modal-title" id="eventFormModalLabel">{{ modalTitle }}</h5>
             <button type="button" class="btn-close" @click="close" aria-label="Close"></button>
           </div>
           <div class="modal-body">
-            <!-- All v-model instances are now bound to `eventData` instead of `event` -->
-
             <!-- Event Name -->
             <div class="mb-3">
@@ -186,9 +176,7 @@
               <label for="eventType" class="form-label">Event Type</label>
               <select class="form-select" id="eventType" v-model="eventData.eventType">
-                <option>LIVE_MUSIC</option>
-                <option>DJ_NIGHT</option>
-                <option>FOOD_SPECIAL</option>
-                <option>DRINK_SPECIAL</option>
-                <option>HAPPY_HOUR</option>
+                <option v-for="opt in eventTypeOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
               </select>
             </div>
@@ -218,7 +206,7 @@
             </div>
           </div>
+
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" @click="close">Close</button>
-            <!-- MODIFIED: Button text is now dynamic -->
             <button type="submit" class="btn btn-primary" :disabled="isLoading">
               <span
@@ -237,5 +225,3 @@
 </template>
 
-<style scoped>
-/* No style changes needed */
-</style>
+<style scoped></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 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -3,4 +3,5 @@
 import noImg from '@/assets/no-img.png'
 import { config } from '@/constants/Api_config.js'
+import { getEnumLabel } from '@/utils/enumLabels.ts'
 
 export default {
@@ -71,4 +72,7 @@
         minute: '2-digit',
       })
+    },
+    eventTypeLabel(event) {
+      return getEnumLabel(event?.eventType, 'EventType')
     },
   },
@@ -100,8 +104,7 @@
       <div class="d-flex align-items-center gap-2">
         <h5 class="mb-0 fw-bold">{{ event.name }}</h5>
-
         <!-- Event Type Badge -->
         <span class="event-type-badge">
-          {{ event.eventType }}
+          {{ eventTypeLabel(event) }}
         </span>
       </div>
@@ -205,9 +208,9 @@
 .event-type-badge {
   background-color: #eef5f8;
-  color: #5ea5bc;
-  border: 1px solid #5ea5bc;
+  color: #f55845;
+  border: 1px solid #f55845;
   border-radius: 999px;
   padding: 2px 10px;
-  font-size: 0.75rem;
+  font-size: 0.85rem;
   font-weight: 600;
   white-space: nowrap;
Index: ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/event_listing_container.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -73,5 +73,5 @@
 <style scoped>
 #container {
-  margin: 30px auto;
+  margin: 15px auto 30px auto
 }
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -124,9 +124,9 @@
                       @error="onImageError"
                     />
-                    <div class="event-type-badge">
-                      <span class="event-type-pill">
-                        {{ event.eventType }}
-                      </span>
-                    </div>
+<!--                    <div class="event-type-badge">-->
+<!--                      <span class="event-type-pill">-->
+<!--                        {{ event.eventType }}-->
+<!--                      </span>-->
+<!--                    </div>-->
                   </div>
 
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -4,5 +4,5 @@
 import { useToasts } from '@/composables/useToast.js'
 import { transformArray, ensureEventDateTime } from '@/mixins/utilFunctions'
-import { config } from '@/constants/Api_config'
+import { getEnumLabel } from '@/utils/enumLabels'
 
 export default {
@@ -10,5 +10,5 @@
     return {
       userStore_: userStore(),
-      itemsPerSlide: 3,
+      itemsPerSlide: 2,
       showEditModal: false,
       showToast: useToasts().showToast,
@@ -18,5 +18,4 @@
   emits: ['event-deleted', 'edit-started'],
 
-  // 2. COMPUTED: Create a property that automatically recalculates when its dependencies change.
   computed: {
     chunkedEvents() {
@@ -25,11 +24,6 @@
       }
 
-      // flatten once
       const flatEvents = this.allEvents.flat()
-
-      // Normalize all events before chunking (important)
       flatEvents.forEach((ev) => ensureEventDateTime(ev))
-
-      // Now chunk the already-normalized flatEvents
       return transformArray(flatEvents, this.itemsPerSlide, false)
     },
@@ -37,13 +31,9 @@
 
   methods: {
-    /**
-     * Checks the window width and updates the `itemsPerSlide` data property.
-     * This will trigger the `chunkedEvents` computed property to recalculate.
-     */
     updateItemsPerSlide() {
       const width = window.innerWidth
-      if (width < 1200) {
+      if (width < 768) {
         this.itemsPerSlide = 1
-      } else if (width < 1300) {
+      } else {
         this.itemsPerSlide = 2
       }
@@ -63,13 +53,9 @@
     formatDateTime(dateTime) {
       if (!dateTime) return ''
-
-      // normalize { date, time } → ISO
       if (dateTime.date && dateTime.time) {
         dateTime = `${dateTime.date}T${dateTime.time}`
       }
-
       const d = new Date(dateTime)
       if (isNaN(d.getTime())) return ''
-
       return d.toLocaleString(undefined, {
         day: '2-digit',
@@ -80,19 +66,15 @@
       })
     },
+    eventTypeLabel(event) {
+      return getEnumLabel(event?.eventType, 'EventType')
+    },
   },
 
   mounted() {
-    /*   setInterval(() => {
-         console.log(this.chunkedEvents)
-       }, 1000)*/
-    // Call the method once on the component mount to set the initial state.
     this.updateItemsPerSlide()
-    // Add an event listener for window resizing.
     window.addEventListener('resize', this.updateItemsPerSlide)
   },
 
   beforeUnmount() {
-    // IMPORTANT: Remove the event listener when the component is destroyed
-    // to prevent memory leaks.
     window.removeEventListener('resize', this.updateItemsPerSlide)
   },
@@ -110,5 +92,4 @@
       >
         <div class="d-flex justify-content-center gap-3 px-2">
-          <!-- The inner loop now iterates over the `eventGroup` (the chunk) -->
           <div v-for="event in eventGroup" :key="event.id" class="event-card-wrapper">
             <div class="card shadow-sm h-100 event-card">
@@ -117,8 +98,7 @@
                 <p class="card-text text-muted small mb-3 flex-grow-1">{{ event.description }}</p>
                 <div class="mb-3">
-                  <!-- Pills -->
                   <div class="d-flex flex-wrap gap-2 mb-2">
                     <span class="event-type-pill">
-                      {{ event.eventType }}
+                      {{ eventTypeLabel(event) }}
                     </span>
                     <span
@@ -129,5 +109,4 @@
                     </span>
                   </div>
-                  <!-- Dates -->
                   <div class="text-muted small">
                     <div class="mb-1 d-flex align-items-center">
@@ -159,4 +138,5 @@
       </div>
     </div>
+
     <button
       class="carousel-control-prev"
@@ -179,15 +159,30 @@
 
 <style scoped>
+.carousel-control-prev,
+.carousel-control-next {
+  width: 3.25rem;
+  z-index: 6;
+}
+
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
-  filter: invert(100%); /* This turns white into black */
+  filter: invert(1);
+  opacity: 1;
+  background-size: 1.5rem 1.5rem;
+}
+
+.carousel-inner {
+  padding: 0 3.25rem;
+  box-sizing: border-box;
 }
 
 .event-card-wrapper {
-  flex: 0 0 auto;
+  flex: 0 0 calc(50% - 1.5rem);
+  max-width: calc(50% - 1.5rem);
+  box-sizing: border-box;
 }
 
 .event-card {
-  width: 18rem;
+  width: 100%;
   min-height: 280px;
   transition:
@@ -254,8 +249,17 @@
 }
 
+/* on small screens, revert to single-column card layout and reduce inner padding so mobile uses full width */
 @media (max-width: 768px) {
+  .carousel-inner {
+    padding: 0 1rem;
+  }
+  .event-card-wrapper {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
   .event-card {
     width: 100%;
-    max-width: 18rem;
+    max-width: none;
   }
 }
Index: ReserveNGo-frontend/src/components/Project/Local/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/Locale_.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Local/Locale_.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -18,4 +18,5 @@
 import makeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
 import noImg from '@/assets/no-img.png'
+import { getEnumLabel, getEnumOptions } from '@/utils/enumLabels.ts'
 
 export default {
@@ -60,5 +61,4 @@
       cachedLocale: null,
 
-
       //MODAL
       isModalVisible: false,
@@ -97,4 +97,18 @@
   },
   computed: {
+    localTypeLabel() {
+      return getEnumLabel(this.locale.localType, 'LocalType')
+    },
+    servicesLabels() {
+      return Array.isArray(this.locale.services)
+        ? this.locale.services.map((s) => getEnumLabel(s, 'ProvidedService'))
+        : []
+    },
+    localTypeOptions() {
+      return getEnumOptions('LocalType')
+    },
+    providedServiceOptions() {
+      return getEnumOptions('ProvidedService')
+    },
     roundedRating() {
       const rating = parseFloat(this.locale.ratingAvg)
@@ -133,6 +147,6 @@
     },
     logoImgElementId() {
-      return "logoLocalePicture"
-    }
+      return 'logoLocalePicture'
+    },
   },
 
@@ -235,6 +249,6 @@
         .uploadLogo(formData)
         .then((data) => {
-           this.locale.logo = data
-           this.$refs.uploadLogoInputRef.reset()
+          this.locale.logo = data
+          this.$refs.uploadLogoInputRef.reset()
           this.showToast('Successfully uploaded the logo')
         })
@@ -405,4 +419,5 @@
       this.isEventModalVisible = true
     },
+    getEnumLabel,
   },
 }
@@ -466,9 +481,42 @@
             <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" />
+                <!-- Name + LocalType pill / editor -->
+                <div class="d-flex align-items-center gap-2 mb-2">
+                  <!-- Name (view / edit) -->
+                  <div class="flex-grow-1">
+                    <h2 v-if="!isEditing" class="mb-0 fw-bold">{{ locale.name }}</h2>
+                    <div v-else class="mb-0">
+                      <label for="nameInput" class="form-label fw-bold">Name</label>
+                      <input
+                        type="text"
+                        id="nameInput"
+                        class="form-control"
+                        v-model="locale.name"
+                      />
+                    </div>
+                  </div>
+
+                  <!-- LocalType pill in view -->
+                  <span
+                    v-if="!isEditing && locale.localType"
+                    class="badge rounded-pill local-type-pill"
+                  >
+                    {{ localTypeLabel }}
+                  </span>
+
+                  <!-- LocalType dropdown in edit -->
+                  <div v-if="isEditing" style="min-width: 180px">
+                    <label for="localTypeSelect" class="form-label small mb-1">Type</label>
+                    <select
+                      id="localTypeSelect"
+                      class="form-select form-select-sm"
+                      v-model="locale.localType"
+                    >
+                      <option value="" disabled>Select type</option>
+                      <option v-for="opt in localTypeOptions" :key="opt.value" :value="opt.value">
+                        {{ opt.label }}
+                      </option>
+                    </select>
+                  </div>
                 </div>
 
@@ -624,21 +672,37 @@
               <i class="fas fa-concierge-bell me-2 text-primary"></i>Services & Amenities
             </h6>
+
+            <!-- View mode -->
             <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>
+                <span
+                  v-for="(service, idx) in locale.services"
+                  :key="service + idx"
+                  class="service-badge"
+                  :title="getEnumLabel(service, 'ProvidedService')"
+                >
+                  {{ getEnumLabel(service, 'ProvidedService') }}
+                </span>
               </div>
               <p v-else class="text-muted small mb-0">No services listed</p>
             </div>
+
+            <!-- Edit mode -->
             <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"
-              />
+              <label for="servicesSelect" class="form-label small">Services</label>
+              <select
+                id="servicesSelect"
+                class="form-select form-select-sm"
+                v-model="locale.services"
+                multiple
+                size="5"
+              >
+                <option v-for="opt in providedServiceOptions" :key="opt.value" :value="opt.value">
+                  {{ opt.label }}
+                </option>
+              </select>
+              <small class="text-muted d-block mt-1">
+                Hold Ctrl/Cmd (or use Shift) to multi-select.
+              </small>
             </div>
           </div>
@@ -789,3 +853,14 @@
   font-size: 1.75rem;
 }
+
+.local-type-pill {
+  background-color: #e9f2ff;
+  color: #0d6efd;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.35rem 0.65rem;
+  border: 1px solid #b6d4ff;
+  text-transform: none;
+  border-radius: 999px;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Local/Locale_listing_container.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -78,5 +78,5 @@
 <style scoped>
 #container {
-  margin: 30px auto;
+  margin: 20px 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 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/Local/local_in_local_listing.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -5,4 +5,5 @@
 import MakeReservationModal from '@/components/Project/Customer/makeReservationModal.vue'
 import noImg from '@/assets/no-img.png'
+import { getEnumLabel } from '@/utils/enumLabels.ts'
 
 export default {
@@ -59,4 +60,7 @@
     handleMouseLeave() {
       this.$emit('hover-leave')
+    },
+    localTypeLabel(local) {
+      return getEnumLabel(local?.localType, 'LocalType')
     },
   },
@@ -86,5 +90,11 @@
     <!-- Info -->
     <div class="col info ps-3">
-      <h5 class="mb-1 fw-bold">{{ local.name }}</h5>
+      <div class="d-flex align-items-center gap-2">
+        <h5 class="mb-0 fw-bold">{{ local.name }}</h5>
+        <!-- Local Type Badge -->
+        <span class="local-type-badge">
+          {{ localTypeLabel(local) }}
+        </span>
+      </div>
       <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">
@@ -111,5 +121,6 @@
             @click.stop="addToFavorites"
             v-if="userStore_.isCustomer"
-          > <i class="fas fa-heart me-1"></i>
+          >
+            <i class="fas fa-heart me-1"></i>
             {{ isFavoured ? 'Remove from Favourites' : 'Add to Favourites' }}
           </button>
@@ -239,3 +250,14 @@
   opacity: 0;
 }
+
+.local-type-badge {
+  background-color: #eef5f8;
+  color: #f55845;
+  border: 1px solid #f55845;
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/search_filter_panel.vue	(revision 0e9700596e0a32f80a2743835fe8c5e839e57c20)
+++ ReserveNGo-frontend/src/components/Project/search_filter_panel.vue	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -1,4 +1,5 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
+import { getEnumLabel } from '@/utils/enumLabels'
 
 const props = defineProps({
@@ -37,28 +38,28 @@
 
 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' },
+  { value: 'RESTAURANT', label: getEnumLabel('RESTAURANT', 'LocalType') },
+  { value: 'CAFE', label: getEnumLabel('CAFE', 'LocalType') },
+  { value: 'BAR', label: getEnumLabel('BAR', 'LocalType') },
+  { value: 'PUB', label: getEnumLabel('PUB', 'LocalType') },
+  { value: 'BISTRO', label: getEnumLabel('BISTRO', 'LocalType') },
+  { value: 'FOOD_TRUCK', label: getEnumLabel('FOOD_TRUCK', 'LocalType') },
+  { value: 'BUFFET', label: getEnumLabel('BUFFET', 'LocalType') },
+  { value: 'FAST_FOOD', label: getEnumLabel('FAST_FOOD', 'LocalType') },
+  { value: 'LOUNGE', label: getEnumLabel('LOUNGE', 'LocalType') },
+  { value: 'DELI', label: getEnumLabel('DELI', 'LocalType') },
 ]
 
 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' },
+  { value: 'WIFI', label: getEnumLabel('WIFI', 'ProvidedService') },
+  { value: 'PET_FRIENDLY', label: getEnumLabel('PET_FRIENDLY', 'ProvidedService') },
+  { value: 'PARKING', label: getEnumLabel('PARKING', 'ProvidedService') },
+  { value: 'OUTDOOR', label: getEnumLabel('OUTDOOR', 'ProvidedService') },
+  { value: 'INDOOR', label: getEnumLabel('INDOOR', 'ProvidedService') },
+  { value: 'PLAYGROUND', label: getEnumLabel('PLAYGROUND', 'ProvidedService') },
+  { value: 'VEGAN_FRIENDLY', label: getEnumLabel('VEGAN_FRIENDLY', 'ProvidedService') },
+  { value: 'VEGETARIAN_FRIENDLY', label: getEnumLabel('VEGETARIAN_FRIENDLY', 'ProvidedService') },
+  { value: 'GLUTEN_FREE_FRIENDLY', label: getEnumLabel('GLUTEN_FREE_FRIENDLY', 'ProvidedService') },
+  { value: 'FAMILY_KIDS_FRIENDLY', label: getEnumLabel('FAMILY_KIDS_FRIENDLY', 'ProvidedService') },
+  { value: 'SMOKING_FRIENDLY', label: getEnumLabel('SMOKING_FRIENDLY', 'ProvidedService') },
 ]
 
@@ -70,20 +71,19 @@
 
 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' },
+  { value: 'LIVE_MUSIC', label: getEnumLabel('LIVE_MUSIC', 'EventType') },
+  { value: 'DJ_NIGHT', label: getEnumLabel('DJ_NIGHT', 'EventType') },
+  { value: 'FOOD_SPECIAL', label: getEnumLabel('FOOD_SPECIAL', 'EventType') },
+  { value: 'DRINK_SPECIAL', label: getEnumLabel('DRINK_SPECIAL', 'EventType') },
+  { value: 'HAPPY_HOUR', label: getEnumLabel('HAPPY_HOUR', 'EventType') },
+  { value: 'SPORTS_SCREENING', label: getEnumLabel('SPORTS_SCREENING', 'EventType') },
+  { value: 'KARAOKE', label: getEnumLabel('KARAOKE', 'EventType') },
+  { value: 'THEME_PARTY', label: getEnumLabel('THEME_PARTY', 'EventType') },
+  { value: 'OPEN_MIC', label: getEnumLabel('OPEN_MIC', 'EventType') },
+  { value: 'COOKING_WORKSHOP', label: getEnumLabel('COOKING_WORKSHOP', 'EventType') },
+  { value: 'ART_EXHIBITION', label: getEnumLabel('ART_EXHIBITION', 'EventType') },
+  { value: 'COMEDY_SHOW', label: getEnumLabel('COMEDY_SHOW', 'EventType') },
+  { value: 'GAME_NIGHT', label: getEnumLabel('GAME_NIGHT', 'EventType') },
+  { value: 'PRIVATE_EVENT', label: getEnumLabel('PRIVATE_EVENT', 'EventType') },
+  { value: 'SEASONAL_EVENT', label: getEnumLabel('SEASONAL_EVENT', 'EventType') },
 ]
 
@@ -124,5 +124,4 @@
 </script>
 
-<
 <template>
   <div class="search-bar-wrapper">
Index: ReserveNGo-frontend/src/utils/enumLabels.ts
===================================================================
--- ReserveNGo-frontend/src/utils/enumLabels.ts	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
+++ ReserveNGo-frontend/src/utils/enumLabels.ts	(revision ec3fc6d0472d82bc722a231ac4a551e629b8c413)
@@ -0,0 +1,75 @@
+// Generic fallback
+export function enumToLabel(value?: string): string {
+  if (!value) return ''
+
+  return value
+    .toLowerCase()
+    .split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export const EnumLabelMaps = {
+  LocalType: {
+    RESTAURANT: 'Restaurant',
+    CAFE: 'Cafe',
+    BAR: 'Bar',
+    PUB: 'Pub',
+    BISTRO: 'Bistro',
+    FOOD_TRUCK: 'Food truck',
+    BUFFET: 'Buffet',
+    FAST_FOOD: 'Fast food',
+    LOUNGE: 'Lounge',
+    DELI: 'Deli',
+  },
+  EventType: {
+    DJ_NIGHT: 'DJ night',
+    LIVE_MUSIC: 'Live music',
+    FOOD_SPECIAL: 'Food special',
+    DRINK_SPECIAL: 'Drink special',
+    HAPPY_HOUR: 'Happy hour',
+    SPORTS_SCREENING: 'Sports screening',
+    KARAOKE: 'Karaoke',
+    THEME_PARTY: 'Theme party',
+    OPEN_MIC: 'Open mic',
+    COOKING_WORKSHOP: 'Cooking workshop',
+    ART_EXHIBITION: 'Art exhibition',
+    COMEDY_SHOW: 'Comedy show',
+    GAME_NIGHT: 'Game night',
+    PRIVATE_EVENT: 'Private event',
+    SEASONAL_EVENT: 'Seasonal event',
+  },
+  ProvidedService: {
+    WIFI: 'Wi-Fi',
+    PET_FRIENDLY: 'Pet friendly',
+    FAMILY_KIDS_FRIENDLY: 'Family & kids friendly',
+    PARKING: 'Parking',
+    OUTDOOR: 'Outdoor seating',
+    INDOOR: 'Indoor seating',
+    PLAYGROUND: 'Playground',
+    VEGAN_FRIENDLY: 'Vegan friendly',
+    VEGETARIAN_FRIENDLY: 'Vegetarian friendly',
+    GLUTEN_FREE_FRIENDLY: 'Gluten free friendly',
+    SMOKING_FRIENDLY: 'Smoking friendly',
+  },
+} as const
+
+export type EnumGroup = keyof typeof EnumLabelMaps
+
+export function getEnumLabel(enumValue: string | undefined, enumGroup?: EnumGroup): string {
+  if (!enumValue) return ''
+
+  if (enumGroup && EnumLabelMaps[enumGroup] && EnumLabelMaps[enumGroup][enumValue]) {
+    return EnumLabelMaps[enumGroup][enumValue as keyof (typeof EnumLabelMaps)[typeof enumGroup]]
+  }
+
+  return enumToLabel(enumValue)
+}
+
+export function getEnumOptions(enumGroup?: EnumGroup): Array<{ value: string; label: string }> {
+  if (!enumGroup || !EnumLabelMaps[enumGroup]) return []
+  return Object.keys(EnumLabelMaps[enumGroup]).map((k) => ({
+    value: k,
+    label: (EnumLabelMaps[enumGroup] as Record<string, string>)[k],
+  }))
+}