Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision a896ace7c911d22f375fdbd162456c43800ad8dd)
+++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
@@ -143,5 +143,5 @@
   <div class="events-section">
     <div class="events-header">
-      <h5 class="events-title">Popular Events</h5>
+      <h5 class="events-title">Newest Events</h5>
     </div>
 
@@ -244,5 +244,5 @@
 
 .event-card {
-  width: 280px;
+  width: 300px;
   height: 90px;
   border-left: 3px solid #5ea5bc;
Index: serveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision a896ace7c911d22f375fdbd162456c43800ad8dd)
+++ 	(revision )
@@ -1,297 +1,0 @@
-<script>
-import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
-import Event_listing_container from '@/components/Project/Event/event_listing_container.vue'
-import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
-import Events_carousel from '@/components/Project/Event/events_carousel.vue'
-
-import { useEvents } from '@/repository/Events.ts'
-import { useLocales } from '@/repository/Locale.ts'
-import { useCustomer } from '@/repository/Customer.ts'
-
-export default {
-  components: {
-    Locale_listing_container,
-    Event_listing_container,
-    SearchFilterPanel,
-    Events_carousel,
-  },
-
-  data() {
-    return {
-      locals: [],
-      events: [],
-      activeView: 'locals',
-
-      localPage: 0,
-      localTotalPages: 0,
-      eventPage: 0,
-      eventTotalPages: 0,
-      pageSize: 5,
-
-      /* filters */
-      lastSearch: '',
-      lastSortBy: 'name',
-      lastDirection: 'asc',
-
-      lastIsOpen: null,
-      lastLocalType: null,
-      lastServices: [],
-
-      lastEventStatus: null,
-      lastEventType: null,
-    }
-  },
-
-  methods: {
-    /* ===================== LOCALS ===================== */
-    fetchLocals(page = 0) {
-      useLocales
-        .getLocals({
-          name: this.lastSearch,
-          sortBy: this.lastSortBy,
-          direction: this.lastDirection,
-          isOpen: this.lastIsOpen,
-          localType: this.lastLocalType,
-          services: this.lastServices,
-          page,
-          size: this.pageSize,
-        })
-        .then((data) => {
-          this.locals = data.locals
-          this.localPage = data.currentPage
-          this.localTotalPages = data.totalPages
-        })
-    },
-
-    /* ===================== EVENTS ===================== */
-    fetchEvents(page = 0) {
-      useEvents
-        .getEvents({
-          name: this.lastSearch,
-          sortBy: this.lastSortBy,
-          direction: this.lastDirection,
-          eventStatus: this.lastEventStatus,
-          eventType: this.lastEventType,
-          page,
-          size: this.pageSize,
-        })
-        .then((data) => {
-          this.events = data.events
-          this.eventPage = data.currentPage
-          this.eventTotalPages = data.totalPages
-        })
-    },
-
-    /* ===================== SEARCH / FILTER ===================== */
-    sendSearchQuery(payload) {
-      this.lastSearch = payload.name || ''
-      this.lastSortBy = payload.sortBy || 'name'
-      this.lastDirection = payload.direction || 'asc'
-
-      if (this.activeView === 'locals') {
-        this.lastIsOpen = payload.isOpen
-        this.lastLocalType = payload.localType
-        this.lastServices = payload.services || []
-
-        this.localPage = 0
-        this.fetchLocals(0)
-      } else {
-        this.lastEventStatus = payload.eventStatus
-        this.lastEventType = payload.eventType
-
-        this.eventPage = 0
-        this.fetchEvents(0)
-      }
-    },
-
-    setActiveView(view) {
-      this.activeView = view
-
-      // Load data if switching view and a list is empty
-      if (view === 'locals' && this.locals.length === 0) {
-        this.fetchLocals(this.localPage)
-      }
-
-      if (view === 'events' && this.events.length === 0) {
-        this.fetchEvents(this.eventPage)
-      }
-    },
-
-    /* ===================== FAVOURITES ===================== */
-    async loadFavouriteEvents() {
-      try {
-        const data = await useCustomer.getFavouriteEvent()
-        this.favouriteEvents = data.events || data || []
-      } catch (error) {
-        console.log('Failed to fetch favourite events', error)
-        this.favouriteEvents = []
-      }
-    },
-
-    toggleFavouriteEvent(id) {
-      const isFav = this.favouriteEvents.map((item) => item.id).includes(id)
-      const action = isFav
-        ? useCustomer.removeFavouriteEvent(id)
-        : useCustomer.addFavouriteEvent(id)
-
-      Promise.resolve(action)
-        .then(() => {
-          if (isFav) {
-            this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id)
-          } else {
-            const event = this.events.find((e) => e.id === id)
-            if (event) {
-              this.favouriteEvents.push(event)
-            }
-          }
-        })
-        .catch((err) => console.log('Error toggling favourite:', err))
-    },
-  },
-
-  beforeMount() {
-    this.loadFavouriteEvents()
-    this.fetchLocals(0)
-    this.fetchEvents(0)
-  },
-}
-</script>
-
-<template>
-  <div class="home-page-wrapper">
-    <div class="container-fluid px-0">
-      <div class="row justify-content-center">
-        <!-- SEARCH -->
-        <SearchFilterPanel :activeView="activeView" @search-query-sent="sendSearchQuery" />
-
-        <!-- EVENTS CAROUSEL (NOT PAGED) -->
-        <div class="col-12 events-section-wrapper">
-          <div class="container">
-            <Events_carousel :all-events="events" />
-          </div>
-        </div>
-
-        <!-- VIEW TOGGLE -->
-        <div class="col-md-8">
-          <div class="navigation-toggle">
-            <button
-              @click="setActiveView('locals')"
-              :class="['nav-btn', { active: activeView === 'locals' }]"
-            >
-              <i class="fas fa-utensils me-2"></i>Locals
-            </button>
-            <button
-              @click="setActiveView('events')"
-              :class="['nav-btn', { active: activeView === 'events' }]"
-            >
-              <i class="fas fa-calendar-alt me-2"></i>Events
-            </button>
-          </div>
-        </div>
-
-        <!-- LISTING -->
-        <div class="col-md-8 listing-column">
-          <Locale_listing_container v-if="activeView === 'locals'" :locals="locals" mode="all" />
-
-          <Event_listing_container
-            v-else
-            :events="events"
-            :favouriteEvents="favouriteEvents"
-            @toggle-favourite="toggleFavouriteEvent"
-          />
-
-          <!-- ===================== PAGINATION ===================== -->
-          <div
-            v-if="activeView === 'locals' && localTotalPages > 1"
-            class="d-flex justify-content-center align-items-center mt-4 gap-2"
-          >
-            <button
-              class="btn btn-outline-secondary"
-              :disabled="localPage === 0"
-              @click="fetchLocals(localPage - 1)"
-            >
-              Prev
-            </button>
-
-            <span>Page {{ localPage + 1 }} of {{ localTotalPages }}</span>
-
-            <button
-              class="btn btn-outline-secondary"
-              :disabled="localPage >= localTotalPages - 1"
-              @click="fetchLocals(localPage + 1)"
-            >
-              Next
-            </button>
-          </div>
-
-          <div
-            v-if="activeView === 'events' && eventTotalPages > 1"
-            class="d-flex justify-content-center align-items-center mt-4 gap-2"
-          >
-            <button
-              class="btn btn-outline-secondary"
-              :disabled="eventPage === 0"
-              @click="fetchEvents(eventPage - 1)"
-            >
-              Prev
-            </button>
-
-            <span>Page {{ eventPage + 1 }} of {{ eventTotalPages }}</span>
-
-            <button
-              class="btn btn-outline-secondary"
-              :disabled="eventPage >= eventTotalPages - 1"
-              @click="fetchEvents(eventPage + 1)"
-            >
-              Next
-            </button>
-          </div>
-          <!-- ===================== END PAGINATION ===================== -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.home-page-wrapper {
-  overflow-x: hidden;
-}
-
-.events-section-wrapper {
-  background-color: #f3f5f8;
-  padding: 0.75rem 0;
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.navigation-toggle {
-  display: flex;
-  gap: 1rem;
-  padding: 1rem 1rem 0.5rem;
-  background-color: #f3f5f8;
-}
-
-.nav-btn {
-  flex: 1;
-  padding: 0.75rem 1.5rem;
-  background-color: #fff;
-  border: 2px solid #dee2e6;
-  border-radius: 8px;
-  font-weight: 500;
-  color: #6c757d;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.nav-btn.active {
-  background-color: #5ea5bc;
-  border-color: #5ea5bc;
-  color: #fff;
-}
-
-.listing-column {
-  background-color: #f3f5f8;
-  padding: 1rem;
-}
-</style>
Index: ReserveNGo-frontend/src/components/Project/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/home_.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
+++ ReserveNGo-frontend/src/components/Project/home_.vue	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
@@ -0,0 +1,314 @@
+<script>
+import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
+import Event_listing_container from '@/components/Project/Event/event_listing_container.vue'
+import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
+import Events_carousel from '@/components/Project/Event/events_carousel.vue'
+
+import { useEvents } from '@/repository/Events.ts'
+import { useLocales } from '@/repository/Locale.ts'
+import { useCustomer } from '@/repository/Customer.ts'
+
+export default {
+  components: {
+    Locale_listing_container,
+    Event_listing_container,
+    SearchFilterPanel,
+    Events_carousel,
+  },
+
+  data() {
+    return {
+      locals: [],
+      events: [],
+      carouselEvents: [],
+
+      activeView: 'locals',
+
+      localPage: 0,
+      localTotalPages: 0,
+      eventPage: 0,
+      eventTotalPages: 0,
+      pageSize: 5,
+
+      /* filters */
+      lastSearch: '',
+      lastSortBy: 'name',
+      lastDirection: 'asc',
+
+      lastIsOpen: null,
+      lastLocalType: null,
+      lastServices: [],
+
+      lastEventStatus: null,
+      lastEventType: null,
+    }
+  },
+
+  methods: {
+    /* ===================== LOCALS ===================== */
+    fetchLocals(page = 0) {
+      useLocales
+        .getLocals({
+          name: this.lastSearch,
+          sortBy: this.lastSortBy,
+          direction: this.lastDirection,
+          isOpen: this.lastIsOpen,
+          localType: this.lastLocalType,
+          services: this.lastServices,
+          page,
+          size: this.pageSize,
+        })
+        .then((data) => {
+          this.locals = data.locals
+          this.localPage = data.currentPage
+          this.localTotalPages = data.totalPages
+        })
+    },
+
+    /* ===================== EVENTS ===================== */
+    fetchEvents(page = 0) {
+      useEvents
+        .getEvents({
+          name: this.lastSearch,
+          sortBy: this.lastSortBy,
+          direction: this.lastDirection,
+          eventStatus: this.lastEventStatus,
+          eventType: this.lastEventType,
+          page,
+          size: this.pageSize,
+        })
+        .then((data) => {
+          this.events = data.events
+          this.eventPage = data.currentPage
+          this.eventTotalPages = data.totalPages
+        })
+    },
+
+    fetchCarouselEvents() {
+      useEvents
+        .getEvents({
+          page: 0,
+          size: 9,
+          sortBy: 'createdAt',
+          direction: 'desc',
+        })
+        .then((data) => {
+          this.carouselEvents = data.events
+        })
+        .catch((err) => console.log('Failed fetching carousel events', err))
+    },
+
+    /* ===================== SEARCH / FILTER ===================== */
+    sendSearchQuery(payload) {
+      this.lastSearch = payload.name || ''
+      this.lastSortBy = payload.sortBy || 'name'
+      this.lastDirection = payload.direction || 'asc'
+
+      if (this.activeView === 'locals') {
+        this.lastIsOpen = payload.isOpen
+        this.lastLocalType = payload.localType
+        this.lastServices = payload.services || []
+
+        this.localPage = 0
+        this.fetchLocals(0)
+      } else {
+        this.lastEventStatus = payload.eventStatus
+        this.lastEventType = payload.eventType
+
+        this.eventPage = 0
+        this.fetchEvents(0)
+      }
+    },
+
+    setActiveView(view) {
+      this.activeView = view
+
+      // Load data if switching view and a list is empty
+      if (view === 'locals' && this.locals.length === 0) {
+        this.fetchLocals(this.localPage)
+      }
+
+      if (view === 'events' && this.events.length === 0) {
+        this.fetchEvents(this.eventPage)
+      }
+    },
+
+    /* ===================== FAVOURITES ===================== */
+    async loadFavouriteEvents() {
+      try {
+        const data = await useCustomer.getFavouriteEvent()
+        this.favouriteEvents = data.events || data || []
+      } catch (error) {
+        console.log('Failed to fetch favourite events', error)
+        this.favouriteEvents = []
+      }
+    },
+
+    toggleFavouriteEvent(id) {
+      const isFav = this.favouriteEvents.map((item) => item.id).includes(id)
+      const action = isFav
+        ? useCustomer.removeFavouriteEvent(id)
+        : useCustomer.addFavouriteEvent(id)
+
+      Promise.resolve(action)
+        .then(() => {
+          if (isFav) {
+            this.favouriteEvents = this.favouriteEvents.filter((fav) => fav.id !== id)
+          } else {
+            const event = this.events.find((e) => e.id === id)
+            if (event) {
+              this.favouriteEvents.push(event)
+            }
+          }
+        })
+        .catch((err) => console.log('Error toggling favourite:', err))
+    },
+  },
+
+  beforeMount() {
+    this.loadFavouriteEvents()
+    this.fetchLocals(0)
+    this.fetchEvents(0)
+    this.fetchCarouselEvents()
+  },
+}
+</script>
+
+<template>
+  <div class="home-page-wrapper">
+    <div class="container-fluid px-0">
+      <div class="row justify-content-center">
+        <!-- SEARCH -->
+        <SearchFilterPanel :activeView="activeView" @search-query-sent="sendSearchQuery" />
+
+        <!-- EVENTS CAROUSEL (NOT PAGED) -->
+        <div class="col-12 events-section-wrapper">
+          <div class="container">
+            <Events_carousel :all-events="carouselEvents" />
+          </div>
+        </div>
+
+        <!-- VIEW TOGGLE -->
+        <div class="col-md-8">
+          <div class="navigation-toggle">
+            <button
+              @click="setActiveView('locals')"
+              :class="['nav-btn', { active: activeView === 'locals' }]"
+            >
+              <i class="fas fa-utensils me-2"></i>Locals
+            </button>
+            <button
+              @click="setActiveView('events')"
+              :class="['nav-btn', { active: activeView === 'events' }]"
+            >
+              <i class="fas fa-calendar-alt me-2"></i>Events
+            </button>
+          </div>
+        </div>
+
+        <!-- LISTING -->
+        <div class="col-md-8 listing-column">
+          <Locale_listing_container v-if="activeView === 'locals'" :locals="locals" mode="all" />
+
+          <Event_listing_container
+            v-else
+            :events="events"
+            :favouriteEvents="favouriteEvents"
+            @toggle-favourite="toggleFavouriteEvent"
+          />
+
+          <!-- ===================== PAGINATION ===================== -->
+          <div
+            v-if="activeView === 'locals' && localTotalPages > 1"
+            class="d-flex justify-content-center align-items-center mt-4 gap-2"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              :disabled="localPage === 0"
+              @click="fetchLocals(localPage - 1)"
+            >
+              Prev
+            </button>
+
+            <span>Page {{ localPage + 1 }} of {{ localTotalPages }}</span>
+
+            <button
+              class="btn btn-outline-secondary"
+              :disabled="localPage >= localTotalPages - 1"
+              @click="fetchLocals(localPage + 1)"
+            >
+              Next
+            </button>
+          </div>
+
+          <div
+            v-if="activeView === 'events' && eventTotalPages > 1"
+            class="d-flex justify-content-center align-items-center mt-4 gap-2"
+          >
+            <button
+              class="btn btn-outline-secondary"
+              :disabled="eventPage === 0"
+              @click="fetchEvents(eventPage - 1)"
+            >
+              Prev
+            </button>
+
+            <span>Page {{ eventPage + 1 }} of {{ eventTotalPages }}</span>
+
+            <button
+              class="btn btn-outline-secondary"
+              :disabled="eventPage >= eventTotalPages - 1"
+              @click="fetchEvents(eventPage + 1)"
+            >
+              Next
+            </button>
+          </div>
+          <!-- ===================== END PAGINATION ===================== -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-page-wrapper {
+  overflow-x: hidden;
+}
+
+.events-section-wrapper {
+  background-color: #f3f5f8;
+  padding: 0.75rem 0;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.navigation-toggle {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem 1rem 0.5rem;
+  background-color: #f3f5f8;
+}
+
+.nav-btn {
+  flex: 1;
+  padding: 0.75rem 1.5rem;
+  background-color: #fff;
+  border: 2px solid #dee2e6;
+  border-radius: 8px;
+  font-weight: 500;
+  color: #6c757d;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-btn.active {
+  background-color: #5ea5bc;
+  border-color: #5ea5bc;
+  color: #fff;
+}
+
+.listing-column {
+  background-color: #f3f5f8;
+  padding: 1rem;
+}
+</style>
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision a896ace7c911d22f375fdbd162456c43800ad8dd)
+++ ReserveNGo-frontend/src/router/index.js	(revision 420171e26f37228de6fa298c4451ffb8e9134921)
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import home_ from '@/components/Project/Restaurant/home_.vue'
+import home_ from '@/components/Project/home_.vue'
 import login_ from '@/components/Project/Auth/login_.vue'
 import register_ from '@/components/Project/Auth/register_.vue'