Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision ac6da220e5ac6d1eb87092a8b5792cf225b59338)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
@@ -44,6 +44,6 @@
     fetch('http://localhost:8080/api/locals')
       .then(res => res.json())
-      .then(data => (this.locals = data))
-      .catch(err => console.log(err))
+      .then(data => {this.locals = data.local; console.log("The data of the locals will probobly be needed later so this console log stays", data);})
+      .catch(err => console.log("The locals are not being caught.", err))
 
     fetch('http://localhost:8080/api/customer/favourite-locals', {
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
@@ -0,0 +1,129 @@
+<script lang="ts">
+
+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 {
+      allEvents: [],
+      userStore_: userStore()
+    }
+  },
+
+  beforeMount() {
+    //Events ne bi trebalo da bara authorisation. !!!!
+    fetch('http://localhost:8080/api/events',
+      {
+        method: 'GET',
+        headers: {
+
+          Authorization: this.userStore_.getToken,
+
+        }
+      })
+    .then(res => res.json())
+    .then(data => { this.allEvents = transformArray(data); console.log("Currently Reading here", this.allEvents) })
+      .catch(error => console.log("Probobly failed fetching events because of login",error))
+  }
+
+}
+
+</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 col-md-6" data-bs-ride="carousel">
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <div class="row">
+          <div class="col-4" 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="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.eventStatus}}</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="row" >
+          <div class="col-4" 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.eventStatus}}</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">
+      <span class="carousel-control-prev-icon"></span>
+    </button>
+    <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>
+
+</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision ac6da220e5ac6d1eb87092a8b5792cf225b59338)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
@@ -1,13 +1,6 @@
 <script setup>
-import { ref } from 'vue'
 import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
-
-const selectedFilters = ref([])
-
-const filterOptions = [
-  'Open Now',
-  'Top Rated',
-  'Nearby'
-]
+import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
+import Events_carousel from '@/components/Project/Restaurant/events_carousel.vue'
 </script>
 
@@ -17,55 +10,9 @@
 
       <!-- Sticky Search and Filter Bar outside scroll area -->
-      <div class="col-12 col-md-8 search-bar sticky-top shadow-sm px-3 py-3">
-        <div class="row g-2 align-items-center">
+      <SearchFilterPanel/>
 
-          <!-- Search Bar -->
-          <div class="col-12 col-md-6">
-            <input type="text" class="form-control" placeholder="Search locales...">
-          </div>
 
-          <!-- Sort By Dropdown -->
-          <div class="col-6 col-md-3">
-            <select class="form-select">
-              <option selected disabled>Sort by</option>
-              <option>Name (A-Z)</option>
-              <option>Name (Z-A)</option>
-              <option>Rating</option>
-              <option>Newest</option>
-            </select>
-          </div>
+      <Events_carousel/>
 
-          <!-- Filter Dropdown with Checkboxes -->
-          <div class="col-6 col-md-3">
-            <div class="dropdown">
-              <button
-                class="btn btn-outline-secondary dropdown-toggle w-100"
-                type="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                Filter
-              </button>
-              <ul class="dropdown-menu p-2" style="min-width: 200px;">
-                <li v-for="option in filterOptions" :key="option">
-                  <div class="form-check">
-                    <input
-                      class="form-check-input"
-                      type="checkbox"
-                      :id="option"
-                      :value="option"
-                      v-model="selectedFilters"
-                    >
-                    <label class="form-check-label" :for="option">
-                      {{ option }}
-                    </label>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-        </div>
-      </div>
 
       <!-- Scrollable List Below Sticky Filter Bar -->
Index: ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 3e13a51e39e7db2ce96a604c5c227109f43d4d09)
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+
+
+import { ref } from 'vue'
+
+const selectedFilters = ref([])
+
+const filterOptions = [
+  'Open Now',
+  'Top Rated',
+  'Nearby'
+]
+
+</script>
+
+<template>
+  <!-- Sticky Search and Filter Bar outside scroll area -->
+  <div class="col-12 col-md-8 search-bar sticky-top shadow-sm px-3 py-3 mb-5">
+    <div class="row g-2 align-items-center">
+
+      <!-- Search Bar -->
+      <div class="col-12 col-md-6">
+        <input type="text" class="form-control" placeholder="Search locales...">
+      </div>
+
+      <!-- Sort By Dropdown -->
+      <div class="col-6 col-md-3">
+        <select class="form-select">
+          <option selected disabled>Sort by</option>
+          <option>Name (A-Z)</option>
+          <option>Name (Z-A)</option>
+          <option>Rating</option>
+          <option>Newest</option>
+        </select>
+      </div>
+
+      <!-- Filter Dropdown with Checkboxes -->
+      <div class="col-6 col-md-3">
+        <div class="dropdown">
+          <button
+            class="btn btn-outline-secondary dropdown-toggle w-100"
+            type="button"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            Filter
+          </button>
+          <ul class="dropdown-menu p-2" style="min-width: 200px;">
+            <li v-for="option in filterOptions" :key="option">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  :id="option"
+                  :value="option"
+                  v-model="selectedFilters"
+                >
+                <label class="form-check-label" :for="option">
+                  {{ option }}
+                </label>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>