Index: ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
+++ ReserveNGo-frontend/src/components/Project/Event/AddEventModal.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -0,0 +1,38 @@
+<script>
+  import { userStore } from '@/PiniaStores/UserStore.js'
+
+  export default {
+    data() {
+      return {
+        event:{
+          name:'',
+          description:'',
+          eventType:'',
+          eventStart:'',
+          eventEnd:'',
+        },
+        user:userStore()
+      }
+    },
+    methods:{
+      add(){
+        fetch('http://localhost:8080/api/local-manager/add-event',{
+          method: 'POST',
+          headers: {
+            Authorization: this.user.getToken,
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<template>
+<div class="container">
+
+</div>
+</template>
+
+<style scoped>
+
+</style>
Index: ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
+++ ReserveNGo-frontend/src/components/Project/Event/EditEventModal.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -0,0 +1,37 @@
+<script>
+  import { userStore } from '@/PiniaStores/UserStore.js'
+
+  export default {
+    props: ['eventId'],
+    data(){
+      return {
+        event:{
+          name:'',
+          description:'',
+          eventType:'',
+          eventStart:'',
+          eventEnd:'',
+        },
+        user:userStore(),
+      }
+    },
+    methods:{
+      editEvent(){
+        fetch(`http://localhost:8080/api/local-manager/events/edit/${this.eventId}`,{
+          method:'PUT',
+          headers:{
+            Authorisation: this.user.getToken,
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<template>
+<div class="container"></div>
+</template>
+
+<style scoped>
+
+</style>
Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -0,0 +1,168 @@
+<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 {
+  data() {
+    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() {
+    // IMPORTANT: Remove the event listener when the component is destroyed
+    // to prevent memory leaks.
+    window.removeEventListener('resize', this.updateItemsPerSlide)
+  },
+}
+</script>
+
+<template>
+  <div id="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
+    <div class="carousel-inner">
+      <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">
+              <img
+                height="100"
+                :src="getImageLogo(event.logo) || pankake"
+                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"
+    >
+      <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>
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  filter: invert(100%); /* This turns white into black */
+}
+</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 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -0,0 +1,157 @@
+<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 {
+  data() {
+    return {
+      userStore_: userStore(),
+      pankake: pankake,
+      itemsPerSlide: 3,
+      showEditModal: false,
+    }
+  },
+  props: ['allEvents'],
+
+  // 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 < 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
+    },
+    deleteEvent(eventId){
+      fetch(`http://localhost:8080/api/local-manager/delete-event/${eventId}`, {
+          method: 'DELETE',
+        headers: {
+            Authorization: this.userStore_.getToken,
+        }
+      })
+        .then(()=> this.allEvents.filter(event => event.id !== eventId))
+        .then(()=> this.updateItemsPerSlide())
+        .catch((err)=>console.log(err))
+    }
+  },
+
+  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="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
+    <div class="carousel-inner">
+      <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>
+                <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>
+                <button class="btn btn-dark " @click="showEditModal==true">Edit event</button>
+                <button class="btn btn-danger " @click="deleteEvent(event.id)">Delete event</button>
+              </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>
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  filter: invert(100%); /* This turns white into black */
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -3,5 +3,5 @@
 import { useRouter } from 'vue-router'
 import { transformArray } from '@/mixins/utilFunctions.js'
-import events_carousel from '@/components/Project/Restaurant/events_carousel_in_locale.vue'
+import events_carousel from '@/components/Project/Event/events_carousel_in_locale.vue'
 import WorkingHoursTable from '@/components/Project/Restaurant/working-hours-table.vue'
 import { useLocalManager } from '@/repository/LocalManager.ts'
Index: serveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
+++ 	(revision )
@@ -1,168 +1,0 @@
-<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 {
-  data() {
-    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() {
-    // IMPORTANT: Remove the event listener when the component is destroyed
-    // to prevent memory leaks.
-    window.removeEventListener('resize', this.updateItemsPerSlide)
-  },
-}
-</script>
-
-<template>
-  <div id="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
-    <div class="carousel-inner">
-      <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">
-              <img
-                height="100"
-                :src="getImageLogo(event.logo) || pankake"
-                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"
-    >
-      <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>
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  filter: invert(100%); /* This turns white into black */
-}
-</style>
Index: serveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel_in_locale.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
+++ 	(revision )
@@ -1,143 +1,0 @@
-<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 {
-  data() {
-    return {
-      userStore_: userStore(),
-      pankake: pankake,
-      itemsPerSlide: 3,
-    }
-  },
-  props: ['allEvents'],
-
-  // 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 < 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="carouselMulti3" class="carousel slide col-12" data-bs-ride="carousel">
-    <div class="carousel-inner">
-      <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>
-                <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>
-              </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>
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  filter: invert(100%); /* This turns white into black */
-}
-</style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -2,5 +2,5 @@
 import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
 import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
-import Events_carousel from '@/components/Project/Restaurant/events_carousel.vue'
+import Events_carousel from '@/components/Project/Event/events_carousel.vue'
 import { transformArray } from '@/mixins/utilFunctions.js'
 
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 2e5324bb5670e38ec798dae6bd5438a52a43f2a8)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
@@ -30,4 +30,8 @@
   }
 
+  addEvent(formData: FormData): Promise<any> {
+    return this.httpClient.post('add-event', formData)
+  }
+
 }