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 420a2dd87c002908545df9e252877014a3e3400b)
@@ -1,35 +1,156 @@
 <script>
-  import { userStore } from '@/PiniaStores/UserStore.js'
+import { userStore } from '@/PiniaStores/UserStore.js'
 
-  export default {
-    data() {
-      return {
-        event:{
-          name:'',
-          description:'',
-          eventType:'',
-          eventStart:'',
-          eventEnd:'',
-        },
-        user:userStore()
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ['close', 'event-added'],
+  data() {
+    return {
+      event: {
+        name: '',
+        description: '',
+        eventType: '',
+        eventStart: '',
+        eventEnd: '',
+      },
+      user: userStore(),
+      isLoading: false,
+    }
+  },
+  methods: {
+    close() {
+
+      this.$emit('close')
+    },
+    async addEvent() {
+      if (this.isLoading) return
+      this.isLoading = true
+
+
+      if (!this.event.name || !this.event.eventStart || !this.event.eventEnd) {
+        alert('Please fill in all required fields (Name, Start Date, End Date).')
+        this.isLoading = false
+        return
       }
-    },
-    methods:{
-      add(){
-        fetch('http://localhost:8080/api/local-manager/add-event',{
+
+      try {
+        const response = await fetch('http://localhost:8080/api/local-manager/add-event', {
           method: 'POST',
           headers: {
             Authorization: this.user.getToken,
-          }
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(this.event),
         })
+
+        if (!response.ok) {
+          throw new Error('Server responded with an error!')
+        }
+        this.$emit('event-added')
+        this.event = { name: '', description: '', eventType: 'Music', eventStart: '', eventEnd: '' }
+        this.close()
+
+      } catch (err) {
+        console.error('Failed to add event:', err)
+        alert('An error occurred. Please try again.')
+      } finally {
+        this.isLoading = false
       }
-    }
-  }
+    },
+  },
+}
 </script>
 
 <template>
-<div class="container">
+  <!-- Modal Backdrop -->
+  <div v-if="show" class="modal-backdrop fade show"></div>
 
-</div>
+  <!-- Modal -->
+  <div
+    v-if="show"
+    class="modal fade show"
+    style="display: block"
+    tabindex="-1"
+    aria-labelledby="addEventModalLabel"
+    aria-modal="true"
+    role="dialog"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <form @submit.prevent="addEvent">
+          <div class="modal-header">
+            <h5 class="modal-title" id="addEventModalLabel">Add New Event</h5>
+            <button type="button" class="btn-close" @click="close" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <!-- Event Name -->
+            <div class="mb-3">
+              <label for="eventName" class="form-label">Event Name</label>
+              <input type="text" class="form-control" id="eventName" v-model="event.name" required />
+            </div>
+
+            <!-- Event Description -->
+            <div class="mb-3">
+              <label for="eventDescription" class="form-label">Description</label>
+              <textarea
+                class="form-control"
+                id="eventDescription"
+                rows="3"
+                v-model="event.description"
+              ></textarea>
+            </div>
+
+            <!-- Event Type -->
+            <div class="mb-3">
+              <label for="eventType" class="form-label">Event Type</label>
+              <select class="form-select" id="eventType" v-model="event.eventType">
+                <option>LIVE_MUSIC</option>
+                <option>DJ_NIGHT</option>
+                <option>FOOD_SPECIAL</option>
+                <option>DRINK_SPECIAL</option>
+                <option>HAPPY_HOUR</option>
+              </select>
+            </div>
+
+            <!-- Event Start/End -->
+            <div class="row">
+              <div class="col-md-6 mb-3">
+                <label for="eventStart" class="form-label">Start Date & Time</label>
+                <input
+                  type="datetime-local"
+                  class="form-control"
+                  id="eventStart"
+                  v-model="event.eventStart"
+                  required
+                />
+              </div>
+              <div class="col-md-6 mb-3">
+                <label for="eventEnd" class="form-label">End Date & Time</label>
+                <input
+                  type="datetime-local"
+                  class="form-control"
+                  id="eventEnd"
+                  v-model="event.eventEnd"
+                  required
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="close">Close</button>
+            <button type="submit" class="btn btn-primary" :disabled="isLoading">
+              <span v-if="isLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+              {{ isLoading ? 'Saving...' : 'Save Event' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </template>
 
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 420a2dd87c002908545df9e252877014a3e3400b)
@@ -76,6 +76,10 @@
         }
       })
-        .then(()=> this.allEvents.filter(event => event.id !== eventId))
-        .then(()=> this.updateItemsPerSlide())
+        .then(res=>{
+          if (res.ok){
+            this.$emit('event-deleted', eventId)
+          }
+        })
+
         .catch((err)=>console.log(err))
     }
@@ -113,5 +117,5 @@
           <div class="" v-for="event in eventGroup" :key="event.id">
             <div class="card" style="width: 18rem">
-              <div class="card-body">
+              <div class="card-body mb-2">
                 <h5 class="card-title fw-bold">{{ event.name }}</h5>
                 <p>{{event.description}}</p>
@@ -120,5 +124,5 @@
                   <div class="text-muted">
                     {{ event.eventStart.date }} <br />
-                    <i class="fas fa-clock me-2 text-secondary"></i> {{ event.eventStart.time }}
+                    <i class="fas fa-clock me-2 text-secondary mb-2"></i> {{ event.eventStart.time }}
                   </div>
                 </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 3d1727cc50b1415c5b8bfcb7364c0cea5b193cce)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 420a2dd87c002908545df9e252877014a3e3400b)
@@ -13,4 +13,5 @@
 import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
 import HorizontalScroller from '@/components/Project/Utility/HorizontalScroller.vue'
+import AddEventModal from '@/components/Project/Event/AddEventModal.vue'
 
 export default {
@@ -23,4 +24,5 @@
     RatingsForLocal,
     ManagerFileInput,
+    AddEventModal,
   },
   data() {
@@ -72,4 +74,6 @@
       isPhotoUploading: false,
       //END UPLOADINg files state
+
+      isAddEventModalVisible: false,
     }
   },
@@ -243,4 +247,12 @@
         })
     },
+    deleteEvent(eventId) {
+      this.locale.events = this.locale.events.filter(event=>event.id !== eventId);
+      this.fetchLocaleData()
+    },
+    addEvent() {
+      this.fetchLocaleData()
+      this.isAddEventModalVisible = false
+    }
   },
 }
@@ -441,7 +453,15 @@
             <!-- Events Carousel (Read-only) -->
             <h6 class="fw-bold">Events</h6>
-            <div class="mb-3 row">
-              <events_carousel :all-events="eventsForCarousel" />
-            </div>
+
+            <div class="mb-2 row">
+              <events_carousel :all-events="eventsForCarousel" @event-deleted="deleteEvent" />
+            </div>
+            <button
+              v-if="userStore.isLocaleManager"
+              class="btn btn-primary btn-sm mb-2"
+              @click="isAddEventModalVisible = true"
+            >
+              <i class="fas fa-plus me-1"></i> Add Event
+            </button>
 
             <!-- Main Action Buttons -->
@@ -482,4 +502,9 @@
     </div>
   </div>
+  <AddEventModal
+    :show="isAddEventModalVisible"
+    @close="isAddEventModalVisible = false"
+    @event-added="addEvent"
+  />
 </template>