Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -116,5 +116,5 @@
     openImageModal(index, secondRow = false) {
       if (secondRow) {
-        index += 1
+        index += 2
       }
       this.selectedImageIndex = index
@@ -130,7 +130,7 @@
         .then((data) => {
           this.locale = data
-          console.log('LOCALE', this.locale)
+        /*  console.log('LOCALE', this.locale)*/
           // Safety checks for nested objects
-          console.log('LOCALE DATA FOR PICTURES', this.locale)
+         /* console.log('LOCALE DATA FOR PICTURES', this.locale)*/
           if (!this.locale.contact) {
             this.locale.contact = { phone: '', email: '' }
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -109,12 +109,6 @@
 
 <template>
-  <div id="carouselMulti3" class="carousel slide col-12 col-md-8" data-bs-ride="carousel">
+  <div id="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <!--
-        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"
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -1,92 +1,113 @@
 <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'
 
-import { userStore } from '@/PiniaStores/UserStore.js'
-
-/*function transformDate(dateTime) {
-  let [date, time] = dateTime.split('T')
-  let timeSplit = time.split(':')
-  time = timeSplit[0] + ":" + timeSplit[1]
-  return {date: date, time: time}
-}
-
-
-function transformArray(arr) {
-
-  arr.forEach(item => {
-    item.eventEnd = transformDate(item.eventEnd)
-    item.eventStart = transformDate(item.eventStart)
-  })
-
-  let newArray = []
-  for (let i = 0; i<arr.length; i+=3) {
-    newArray.push(arr.slice(i, i + 3))
-  }
-  return newArray;
-
-}*/
 
 export default {
   data() {
     return {
-      userStore_: userStore()
+      userStore_: userStore(),
+      pankake: pankake,
+      itemsPerSlide: 3,
     }
   },
   props: ['allEvents'],
 
-  /* beforeMount() {
-     //Events ne bi trebalo da bara authorisation. !!!!
-     fetch('http://localhost:8080/api/events',
-       {
-         method: 'GET',
-         headers: {
+  // 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 []
+      }
 
-           Authorization: this.userStore_.getToken,
+      // 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)*/
 
-         }
-       })
-     .then(res => res.json())
-     .then(data => { this.allEvents = transformArray(data.events); console.log("Currently Reading here", this.allEvents) })
-       .catch(error => console.log("Probobly failed fetching events because of login",error))
-   }*/
+      // 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 < 992) {
+        // Small devices (phones)
+        this.itemsPerSlide = 1
+      } else if (width < 1100) {
+        // 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() {
+    // IMPORTANT: Remove the event listener when the component is destroyed
+    // to prevent memory leaks.
+    window.removeEventListener('resize', this.updateItemsPerSlide)
+  },
 }
-
 </script>
 
 <template>
-
-  <!--
-    <div id="carouselExampleControls" class="col-6 carousel slide" data-bs-ride="carousel">
-      <div class="carousel-inner">
-        <div class="carousel-item active">
-          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
-        </div>
-        <div class="carousel-item">
-          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
-        </div>
-        <div class="carousel-item">
-          <img height="200" src="../../ectd/easy-american-pancake-recipe.jpg" data-bs-interval="5000" class="d-block w-100" alt="...">
-        </div>
-      </div>
-      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      </button>
-      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      </button>
-    </div>-->
-
   <div id="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <div class="carousel-item active">
-        <div style="gap: 0.2rem" class="d-flex">
-          <div class="" v-for="event in allEvents[0]" :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="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">
+          <!-- 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">
               <div class="card-body">
-                <h5 class="card-title fw-bold">{{event.name}}</h5>
+                <h5 class="card-title fw-bold">{{ event.name }}</h5>
+                <p>{{event.description}}</p>
                 <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 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>
@@ -95,35 +116,28 @@
         </div>
       </div>
-      <!--      Sto Ako listata e pomala od 3 !!!!!!! -->
-      <div class="carousel-item" v-for="eventGroup in allEvents.slice(1)" :key="eventGroup">
-        <div style="gap: 0.2rem" class="d-flex">
-          <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>
-
     </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#carouselMulti3" data-bs-slide="prev">
+    <button
+      class="carousel-control-prev"
+      type="button"
+      data-bs-target="#carouselMulti3"
+      data-bs-slide="prev"
+    >
       <span class="carousel-control-prev-icon"></span>
     </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#carouselMulti3" data-bs-slide="next">
+    <button
+      class="carousel-control-next"
+      type="button"
+      data-bs-target="#carouselMulti3"
+      data-bs-slide="next"
+    >
       <span class="carousel-control-next-icon"></span>
     </button>
   </div>
-
-
 </template>
 
 <style scoped>
-
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  filter: invert(100%); /* This turns white into black */
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -55,5 +55,5 @@
   computed: {
     locale_logo() {
-      if (!this.local.logo.startsWith('/')) {return this.pankake}
+      if (this.local.logo === null) {return this.pankake}
       const url = new URL(this.local.logo, config.API_BASE_URL)
       return url.toString();
Index: ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -125,5 +125,5 @@
       // If no item is found (we might be at the end), we don't scroll
       if (targetItem) {
-        console.log("TargetItem", targetItem)
+/*        console.log("TargetItem", targetItem)*/
         container.scrollTo({
           left: targetItem.offsetLeft + targetItem.clientWidth - container.clientWidth,
Index: ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
@@ -36,5 +36,5 @@
     <!-- Bottom row with 3 images -->
     <div class="grid-row-bottom">
-      <img @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(2, 4)" :key="index" :src="image" alt="">
+      <img @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(2, 5)" :key="index" :src="image" alt="">
     </div>
   </div>