Index: ReserveNGo-backend/.gitignore
===================================================================
--- ReserveNGo-backend/.gitignore	(revision b50fa5a203b3e812f300881d355dab8adc957711)
+++ ReserveNGo-backend/.gitignore	(revision 6fd5b6ad5dcb9a6a013455391e7e1f9cda4939cb)
@@ -34,2 +34,4 @@
 
 .env
+
+/ReserveNgo-backend/uploads/
Index: ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/dto/eventDTO/DisplayEventDTO.java
===================================================================
--- ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/dto/eventDTO/DisplayEventDTO.java	(revision b50fa5a203b3e812f300881d355dab8adc957711)
+++ ReserveNGo-backend/src/main/java/mk/ukim/finki/it/reservengo/dto/eventDTO/DisplayEventDTO.java	(revision 6fd5b6ad5dcb9a6a013455391e7e1f9cda4939cb)
@@ -8,5 +8,5 @@
 import java.util.List;
 
-public record   DisplayEventDTO(
+public record DisplayEventDTO(
         Long id,
         String name,
@@ -16,5 +16,6 @@
         LocalDateTime eventEnd,
         Long localId,
-        EventStatus status
+        EventStatus status,
+        String localLogo
 ) {
     public static DisplayEventDTO fromEvent(Event event) {
@@ -27,5 +28,6 @@
                 event.getEventEnd(),
                 event.getLocal().getId(),
-                event.getStatus()
+                event.getStatus(),
+                event.getLocal().getLogoUrl()
         );
     }
Index: ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision b50fa5a203b3e812f300881d355dab8adc957711)
+++ ReserveNGo-frontend/src/components/Project/Event/event_in_event_listing.vue	(revision 6fd5b6ad5dcb9a6a013455391e7e1f9cda4939cb)
@@ -2,4 +2,5 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import noImg from '@/assets/no-img.png'
+import { config } from '@/constants/Api_config.js'
 
 export default {
@@ -18,26 +19,56 @@
   },
 
+  computed: {
+    eventImageSrc() {
+      if (!this.event.localLogo) return noImg
+
+      try {
+        return new URL(this.event.localLogo, config.API_BASE_URL).toString()
+      } catch {
+        return config.API_BASE_URL + this.event.localLogo
+      }
+    },
+
+    formattedStart() {
+      return this.formatDateTime(this.event.eventStart)
+    },
+
+    formattedEnd() {
+      return this.formatDateTime(this.event.eventEnd)
+    },
+  },
+
   methods: {
     handleClick() {
       this.$emit('select', this.event.id)
     },
+
     addToFavourites(e) {
       e.stopPropagation()
       this.$emit('toggle-favourite', this.event.id)
     },
+
     onImageError(event) {
       event.target.src = noImg
     },
+
     handleMouseEnter() {
       this.isHovered = true
     },
+
     handleMouseLeave() {
       this.isHovered = false
     },
-  },
-
-  computed: {
-    eventImageSrc() {
-      return this.event.image ? this.event.image : noImg
+
+    formatDateTime(dateTime) {
+      if (!dateTime) return ''
+      const d = new Date(dateTime)
+      return d.toLocaleString(undefined, {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
     },
   },
@@ -54,9 +85,9 @@
     @mouseleave="handleMouseLeave"
   >
-    <!-- Image -->
+    <!-- Local Logo -->
     <div class="col-auto pe-0">
       <img
         :src="eventImageSrc"
-        alt="Event"
+        alt="Local logo"
         class="rounded"
         style="width: 60px; height: 60px; object-fit: cover"
@@ -67,13 +98,18 @@
     <!-- Info -->
     <div class="col info ps-3">
-      <h5 class="mb-1 fw-bold">{{ event.title || event.name }}</h5>
-      <p class="mb-1 text-muted">
-        <i class="fas fa-calendar-alt me-1"></i>{{ event.date }}
-        <span v-if="event.date" class="ms-2">
-          <i class="fas fa-clock me-1"></i>{{ event.time }}
+      <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 }}
         </span>
-      </p>
-      <p class="mb-1 text-muted" v-if="event.location">
-        <i class="fas fa-map-marker-alt me-1"></i>{{ event.location }}
+      </div>
+
+      <p class="mb-1 text-muted mt-1">
+        <i class="fas fa-calendar-alt me-1"></i>
+        {{ formattedStart }}
+        <span class="mx-1">→</span>
+        {{ formattedEnd }}
       </p>
     </div>
@@ -84,11 +120,12 @@
         <div class="action-buttons d-flex align-items-center gap-2" v-if="isHovered || isSelected">
           <button
+            v-if="userStore_.isCustomer"
             class="btn btn-favourite"
             :class="{ active: isFavoured }"
             @click.stop="addToFavourites"
           >
+            <i class="fas fa-heart me-1"></i>
             {{ isFavoured ? 'Remove from Favourites' : 'Add to Favourites' }}
           </button>
-
 
           <router-link :to="`/more_details/${event.localId}`">
@@ -166,11 +203,13 @@
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+.event-type-badge {
+  background-color: #eef5f8;
+  color: #5ea5bc;
+  border: 1px solid #5ea5bc;
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
 }
 
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision b50fa5a203b3e812f300881d355dab8adc957711)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision 6fd5b6ad5dcb9a6a013455391e7e1f9cda4939cb)
@@ -1,5 +1,4 @@
 <script lang="ts">
 import { userStore } from '@/PiniaStores/UserStore.js'
-import { useLocales } from '@/repository/Locale'
 import { config } from '@/constants/Api_config'
 import { transformArray, ensureEventDateTime } from '@/mixins/utilFunctions'
@@ -11,6 +10,4 @@
       userStore_: userStore(),
       itemsPerSlide: 3,
-      processedEventIds: new Set(), // Track which events we've already processed
-      processedLocalIds: new Set(), // Track which locals we've already fetched
     }
   },
@@ -41,46 +38,15 @@
       event.target.src = noImg
     },
-    processEventsForLogos(events) {
-      if (!events || events.length === 0) return
-
-      const flatEvents = events.flat()
-      flatEvents.forEach((event) => {
-        // Only fetch if:
-        // 1. Event has a localId
-        // 2. We haven't processed this event ID
-        // 3. We haven't yet fetched this local
-        // 4. Event doesn't already have a logo
-        if (
-          event &&
-          event.localId &&
-          !this.processedEventIds.has(event.id) &&
-          !this.processedLocalIds.has(event.localId) &&
-          !event.logo
-        ) {
-          this.processedEventIds.add(event.id)
-          this.processedLocalIds.add(event.localId)
-
-          useLocales
-            .getSpecificLocale(event.localId)
-            .then((locale) => {
-              if (locale && locale.logo) {
-                // Set a logo for all events with this localId
-                flatEvents.forEach((e) => {
-                  if (e.localId === event.localId) {
-                    e.logo = locale.logo
-                  }
-                })
-              }
-            })
-            .catch((error) => {
-              console.error('Error fetching local for event:', error)
-              // Remove from sets on error so we can retry if needed
-              this.processedEventIds.delete(event.id)
-              this.processedLocalIds.delete(event.localId)
-            })
-        }
+    formatDateTime(dateTime) {
+      if (!dateTime) return ''
+      const d = new Date(dateTime)
+      return d.toLocaleString(undefined, {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
       })
     },
-
     /**
      * Checks the window width and updates the `itemsPerSlide` data property.
@@ -103,26 +69,15 @@
 
     getImageLogo(imageLogo) {
-      if (!imageLogo) {
-        return noImg
-      }
+      if (!imageLogo) return noImg
 
       try {
-        const url = new URL(imageLogo, config.API_BASE_URL)
-        return url.toString()
+        return new URL(imageLogo, config.API_BASE_URL).toString()
       } catch {
         return config.API_BASE_URL + imageLogo
       }
-    }
+    },
   },
 
   mounted() {
-    // Process events only once when component mounts
-    // Use nextTick to ensure props are fully initialized
-    this.$nextTick(() => {
-      if (this.allEvents && this.allEvents.length > 0) {
-        this.processEventsForLogos(this.allEvents)
-      }
-    })
-
     // Call the method once on the component mount to set the initial state.
     this.updateItemsPerSlide()
@@ -164,5 +119,5 @@
                   <div class="event-image-wrapper">
                     <img
-                      :src="getImageLogo(event.logo)"
+                      :src="getImageLogo(event.localLogo)"
                       class="event-image"
                       alt="Event image"
@@ -170,27 +125,35 @@
                     />
                     <div class="event-type-badge">
-                      <span class="badge bg-primary">{{ event.eventType }}</span>
+                      <span class="event-type-pill">
+                        {{ event.eventType }}
+                      </span>
                     </div>
                   </div>
 
                   <div class="card-body d-flex flex-column p-2">
-                    <h6 class="card-title fw-bold mb-1">{{ event.name }}</h6>
+                    <div class="d-flex align-items-center gap-1">
+                      <h6 class="card-title fw-bold mb-0">{{ event.name }}</h6>
+                    </div>
+
                     <div class="event-details">
-                      <div class="d-flex align-items-center text-muted mb-1">
-                        <i class="fas fa-calendar-alt me-1"></i>
-                        <span>{{ event.date }}</span>
+                      <div class="d-flex align-items-center text-muted">
+                        <i class="fas fa-play me-1 text-success"></i>
+                        <span class="text-truncate">
+                          {{ formatDateTime(event.eventStart) }}
+                        </span>
                       </div>
+
                       <div class="d-flex align-items-center text-muted">
-                        <i class="fas fa-clock me-1"></i>
-                        <span>{{ event.time }}</span>
+                        <i class="fas fa-stop me-1 text-danger"></i>
+                        <span class="text-truncate">
+                          {{ formatDateTime(event.eventEnd) }}
+                        </span>
                       </div>
                     </div>
 
-                    <router-link :to="`/more_details/${event.localId}`">
-                      <button
-                        class="btn btn-outline-dark btn-sm mt-1"
-                        style="font-size: 0.7rem; padding: 0.2rem 0.4rem"
-                      >
-                        <i class="fas fa-info-circle me-1"></i>Details
+                    <router-link :to="`/more_details/${event.localId}`" class="details-btn-wrapper">
+                      <button class="btn btn-outline-dark btn-sm details-btn">
+                        <i class="fas fa-info-circle"></i>
+                        Details
                       </button>
                     </router-link>
@@ -426,15 +389,31 @@
 }
 
-.view-all-link {
+.event-type-pill {
+  background-color: #eef5f8;
+  color: #5ea5bc;
+  border: 1px solid #5ea5bc;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.details-btn-wrapper {
+  position: absolute;
+  bottom: 6px;
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.event-card:hover .details-btn-wrapper {
+  opacity: 1;
+}
+
+.details-btn {
   font-size: 0.75rem;
-  font-weight: 500;
-  color: #9ca3af; /* neutral grey */
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.view-all-link:hover {
-  color: #6b7280; /* slightly darker grey */
-  text-decoration: none;
+  padding: 0.2rem 0.35rem;
+  line-height: 1;
 }
 </style>
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision b50fa5a203b3e812f300881d355dab8adc957711)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 6fd5b6ad5dcb9a6a013455391e7e1f9cda4939cb)
@@ -2,6 +2,7 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useLocalManager } from '@/repository/LocalManager'
-import { transformArray } from '@/mixins/utilFunctions'
 import { useToasts } from '@/composables/useToast.js'
+import { transformArray, ensureEventDateTime } from '@/mixins/utilFunctions'
+import { config } from '@/constants/Api_config'
 
 export default {
@@ -19,23 +20,16 @@
   // 2. COMPUTED: Create a property that automatically recalculates when its dependencies change.
   computed: {
-    /**
-     * This computed property flattens the original nested allEvents array
-     * and then re-chunks it based on the current `itemsPerSlide`.
-     */
     chunkedEvents() {
-      /*  console.log("CHUNKED EVENTS",this.allEvents)*/
-      // Return an empty array if the prop is not yet ready.
       if (!this.allEvents || this.allEvents.length === 0) {
         return []
       }
 
-      // First, flatten the nested array into a single list of all events.
-      // e.g., [[1,2,3], [4,5,6]] becomes [1,2,3,4,5,6]
+      // flatten once
       const flatEvents = this.allEvents.flat()
-      /*console.log('flatEvents', flatEvents)*/
-
-      // This is the abstract "resize the array" method you mentioned.
-      // It chunks the flat list into new subarrays.
-
+
+      // Normalize all events before chunking (important)
+      flatEvents.forEach((ev) => ensureEventDateTime(ev))
+
+      // Now chunk the already-normalized flatEvents
       return transformArray(flatEvents, this.itemsPerSlide, false)
     },
@@ -66,4 +60,23 @@
           this.showToast(err.response, 'error')
         })
+    },
+    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',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
     },
   },
@@ -104,14 +117,29 @@
                 <p class="card-text text-muted small mb-3 flex-grow-1">{{ event.description }}</p>
                 <div class="mb-3">
-                  <div class="d-flex align-items-center mb-2">
-                    <span class="badge bg-primary me-2">{{ event.eventType }}</span>
+                  <!-- Pills -->
+                  <div class="d-flex flex-wrap gap-2 mb-2">
+                    <span class="event-type-pill">
+                      {{ event.eventType }}
+                    </span>
+                    <span
+                      class="event-status-pill"
+                      :class="`status-${event.status?.toLowerCase()}`"
+                    >
+                      {{ event.status }}
+                    </span>
                   </div>
+                  <!-- Dates -->
                   <div class="text-muted small">
-                    <div class="mb-1">
-                      <i class="fas fa-calendar me-2"></i>{{ event.eventStart.date }}
+                    <div class="mb-1 d-flex align-items-center">
+                      <i class="fas fa-play me-2 text-success"></i>
+                      {{ formatDateTime(event.eventStart) }}
                     </div>
-                    <div><i class="fas fa-clock me-2"></i>{{ event.eventStart.time }}</div>
+                    <div class="d-flex align-items-center">
+                      <i class="fas fa-stop me-2 text-danger"></i>
+                      {{ formatDateTime(event.eventEnd) }}
+                    </div>
                   </div>
                 </div>
+
                 <div v-if="userStore_.isLocaleManager" class="d-flex gap-2 mt-auto">
                   <button
@@ -188,4 +216,42 @@
 }
 
+.event-type-pill {
+  background-color: #eef5f8;
+  color: #5ea5bc;
+  border: 1px solid #5ea5bc;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.event-status-pill {
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-transform: uppercase;
+}
+
+.status-upcoming {
+  background-color: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffeeba;
+}
+
+.status-active {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.status-finished {
+  background-color: #e2e3e5;
+  color: #383d41;
+  border: 1px solid #d6d8db;
+}
+
 @media (max-width: 768px) {
   .event-card {