Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -8,4 +8,6 @@
 import { useLocalManager } from '@/repository/LocalManager.ts'
 import {useUtility} from '@/repository/utility.ts'
+import PhotosGrid from '@/components/Project/Utility/PhotosGrid.vue'
+
 
 export default {
@@ -14,4 +16,5 @@
     events_carousel,
     WorkingHoursTable,
+    PhotosGrid,
   },
   data() {
@@ -166,4 +169,7 @@
           </div>
           <button @click="uploadLogo" class="btn btn-dark m-3">Save Logo</button>
+
+<!--          <PhotosGrid></PhotosGrid>-->
+
         </div>
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -1,4 +1,9 @@
 <script lang="ts">
 import { userStore } from '@/PiniaStores/UserStore.js'
+import { useLocales } from '@/repository/Locale'
+import { config } from '@/constants/Api_config'
+import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
+import { transformArray } from '@/mixins/utilFunctions'
+
 
 export default {
@@ -6,11 +11,98 @@
     return {
       userStore_: userStore(),
+      pankake: pankake,
+      itemsPerSlide: 3,
     }
   },
   props: ['allEvents'],
 
+  watch: {
+    allEvents: {
+      handler(events) {
+        if (events && events.length > 0) {
+          events.forEach((eventGroup) => {
+            eventGroup.forEach((event) => {
+              useLocales.getSpecificLocale(event.localId).then((locale) => {
+                event.logo = locale.logo
+              })
+            })
+          })
+        } else {
+          console.log('allEvents is still empty or undefined.')
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  // 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 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]
+      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 sub-arrays.
+
+      return transformArray(flatEvents, this.itemsPerSlide, false)
+    },
+  },
+
+  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
+      // Using standard Bootstrap breakpoints
+      if (width < 768) {
+        // Small devices (phones)
+        this.itemsPerSlide = 1
+      } else if (width < 992) {
+        // Medium devices (tablets/laptops)
+        this.itemsPerSlide = 2
+      } else {
+        // Large devices (desktops)
+        this.itemsPerSlide = 3
+      }
+    },
+
+    getImageLogo(imageLogo: string): any {
+      if (!imageLogo || !imageLogo.startsWith('/')) {
+        return pankake
+      }
+      return config.API_BASE_URL + imageLogo
+    },
+  },
+
+  mounted() {
+ /*   setInterval(() => {
+      console.log(this.chunkedEvents)
+    }, 1000)*/
+    // Call the method once on component mount to set the initial state.
+    this.updateItemsPerSlide()
+    // Add event listener for window resizing.
+    window.addEventListener('resize', this.updateItemsPerSlide)
+  },
+
   beforeUnmount() {
-    console.log("Events", this.allEvents)
-  }
+    // IMPORTANT: Remove the event listener when the component is destroyed
+    // to prevent memory leaks.
+    window.removeEventListener('resize', this.updateItemsPerSlide)
+  },
 }
 </script>
@@ -19,36 +111,23 @@
   <div id="carouselMulti3" class="carousel slide col-12 col-md-8" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <div class="carousel-item active">
+      <!--
+        HERE IS THE FIX:
+        - We use a single v-for to loop through our reactive `chunkedEvents`.
+        - `chunkedEvents` will contain arrays of 1, 2, or 3 items, depending on screen size.
+        - `:class="{ active: index === 0 }"` dynamically makes the first carousel slide active.
+      -->
+      <div
+        class="carousel-item"
+        v-for="(eventGroup, index) in chunkedEvents"
+        :key="index"
+        :class="{ active: index === 0 }"
+      >
         <div style="gap: 0.2rem" class="d-flex justify-content-center">
-          <div class="" v-for="event in allEvents[0]" :key="event.id">
+          <!-- The inner loop now iterates over the `eventGroup` (the chunk) -->
+          <div class="" v-for="event in eventGroup" :key="event.id">
             <div class="card" style="width: 18rem">
               <img
                 height="100"
-                src="../../ectd/easy-american-pancake-recipe.jpg"
-                class="card-img-top"
-                alt="..."
-              />
-              <div class="card-body">
-                <h5 class="card-title fw-bold">{{ event.name }}</h5>
-                <div class="card-text d-flex justify-content-between">
-                  <div class="text-muted">{{ event.eventType }}</div>
-                  <div class="text-muted">
-                    {{ event.eventStart.date }} <br />
-                    <i class="fas fa-clock me-2 text-secondary"></i>{{ event.eventStart.time }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!--      Sto Ako listata e pomala od 3 !!!!!!! -->
-      <div class="carousel-item" v-for="eventGroup in allEvents.slice(1)" :key="eventGroup">
-        <div class="d-flex justify-content-center">
-          <div style="gap: 0.2rem" class="" v-for="event in eventGroup" :key="event.id">
-            <div class="card" style="width: 18rem">
-              <img
-                height="100"
-                :src="'../../ectd/easy-american-pancake-recipe.jpg'"
+                :src="getImageLogo(event.logo) || pankake"
                 class="card-img-top"
                 alt="..."
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -4,4 +4,5 @@
 import { useUtility } from '@/repository/utility.ts'
 import {config} from '@/constants/Api_config.js'
+import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
 
 export default {
@@ -17,4 +18,5 @@
       userStore_: userStore(),
       localeLogo: null,
+      pankake: pankake
     }
   },
@@ -52,4 +54,5 @@
   computed: {
     locale_logo() {
+      if (!this.local.logo.startsWith('/')) {return this.pankake}
       const url = new URL(this.local.logo, config.API_BASE_URL)
       return url.toString();
Index: ReserveNGo-frontend/src/components/Project/Utility/PhotosGrid.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PhotosGrid.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ ReserveNGo-frontend/src/components/Project/Utility/PhotosGrid.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -0,0 +1,97 @@
+<script lang="ts">
+
+
+export default {
+  data() {
+    return {
+    }
+  },
+}
+
+</script>
+
+<template>
+  <!-- Place this code below your "Save Logo" button -->
+  <div class="logo-options-grid">
+    <!-- Top row with 2 images -->
+    <div class="grid-row-top">
+      <!-- Replace '...' with your actual image paths -->
+      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 1" class="grid-image">
+      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 2" class="grid-image">
+    </div>
+    <!-- Bottom row with 3 images -->
+    <div class="grid-row-bottom">
+      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 3" class="grid-image">
+      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 4" class="grid-image">
+      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 5" class="grid-image">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+  Main container for the image grid.
+  It's set to match the width of your logo container above it.
+  I've used a max-width as an example.
+*/
+.logo-options-grid {
+  width: 100%;
+  max-width: 380px; /* Adjust this to match your logo container's width */
+  margin: 1.5rem auto 0; /* Adds space above and centers it */
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* This creates the space between the top and bottom rows */
+}
+
+/*
+  Common styles for both rows.
+  We use flexbox to automatically align the images inside.
+*/
+.grid-row-top,
+.grid-row-bottom {
+  display: flex;
+  justify-content: center; /* Centers the images if they don't fill all space */
+  gap: 0.5rem; /* This creates the space between the images in a row */
+}
+
+/*
+  Styling for each individual image in the grid.
+*/
+.grid-image {
+  width: 100%; /* Allows the flex container to determine the size */
+  height: auto;
+  border-radius: 8px; /* Gives the images slightly rounded corners */
+  cursor: pointer; /* Changes the mouse to a pointer on hover */
+
+  /* This is key for the smooth hover effect. We create a transparent
+     outline that will get a color on hover, preventing the layout
+     from shifting. */
+  outline: 3px solid transparent;
+  transition: outline-color 0.3s ease;
+}
+
+/*
+  The hover effect!
+  When you hover over an image, the outline color changes to a nice blue.
+*/
+.grid-image:hover {
+  outline-color: #3498db; /* A pleasant, modern blue */
+}
+
+
+/* --- RESPONSIVENESS --- */
+
+/*
+  This media query applies styles ONLY when the screen width
+  is 768px or less (typical for tablets and phones).
+*/
+@media (max-width: 768px) {
+  /*
+    On smaller screens, we simply hide the top row of two images
+    to achieve the requested "one row of 3 images" layout.
+  */
+  .grid-row-top {
+    display: none;
+  }
+}
+</style>
Index: ReserveNGo-frontend/src/mixins/utilFunctions.js
===================================================================
--- ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision 166f25df42e476b2f2ee0cd31dba64cc8a25214b)
+++ ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -7,10 +7,14 @@
 
 
-export function transformArray(arr, howMany) {
+export function transformArray(arr, howMany, doDateEdit = true) {
 
+
+
+  if (doDateEdit) {
   arr.forEach(item => {
     item.eventEnd = transformDate(item.eventEnd)
     item.eventStart = transformDate(item.eventStart)
   })
+  }
 
   let newArray = []
Index: ReserveNGo-frontend/src/repository/Locale.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Locale.ts	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ ReserveNGo-frontend/src/repository/Locale.ts	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
@@ -0,0 +1,26 @@
+import { config } from '@/constants/Api_config'
+import { HttpClient } from '@/Api_Classes/HttpClient'
+
+const BASE_API_URL = config.API_BASE_URL
+
+/*
+console.warn("THIS IS THE BASE URL",BASE_API_URL)
+*/
+
+class Locale {
+  private readonly httpClient: HttpClient
+
+  constructor(baseUrl: string) {
+    this.httpClient = new HttpClient(baseUrl)
+  }
+
+  getLocals() {
+    return this.httpClient.get()
+  }
+  getSpecificLocale(localeId: number) {
+    return this.httpClient.get(`${localeId}`)
+  }
+
+}
+
+export const useLocales = new Locale(BASE_API_URL + '/api/locals/', )