Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision b44a5d69f102f7179f9b8bb22ef98fa156e24e96)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision ba8516756325b4351b3b4d62006b76a07ffe71ac)
@@ -3,5 +3,19 @@
 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) {
@@ -71,6 +85,9 @@
               <img height="100" src="../../ectd/easy-american-pancake-recipe.jpg" class="card-img-top" alt="...">
               <div class="card-body">
-                <h5 class="card-title">{{event.name}}</h5>
-                <p class="card-text">{{event.description}}</p>
+                <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>
@@ -85,6 +102,9 @@
               <img height="100" src="../../ectd/easy-american-pancake-recipe.jpg" class="card-img-top" alt="...">
               <div class="card-body">
-                <h5 class="card-title">{{event.name}}</h5>
-                <p class="card-text">{{event.description}}</p>
+                <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>