Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 09f11c3ed2ba804e10d2ce8929a2720451945f56)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision 09f11c3ed2ba804e10d2ce8929a2720451945f56)
@@ -0,0 +1,100 @@
+<script lang="ts">
+
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+  data() {
+    return {
+      allEvents: [],
+      userStore_: userStore()
+    }
+  },
+
+  beforeMount() {
+    fetch('http://localhost:8080/api/events',
+      {
+        method: 'GET',
+        headers: {
+
+          Authorization: this.userStore_.getToken,
+
+        }
+      })
+    .then(res => res.json())
+    .then(data => {console.log("PRINTING DATA",data)})
+      .catch(error => console.log("WHAT FAILED",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-6" data-bs-ride="carousel">
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <div class="row">
+          <div class="col-4" v-for="test in 3" :key="test">
+            <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">Card title: {{test}}</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" class="btn btn-primary">Go somewhere</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="carousel-item">
+        <div class="row">
+          <div class="col-4" v-for="test in 3" :key="test">
+            <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">Card title: {{test+3}}</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <a href="#" class="btn btn-primary">Go somewhere</a>
+              </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 f153db4398a08b0cf618de053ec6bb76de1332d4)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 09f11c3ed2ba804e10d2ce8929a2720451945f56)
@@ -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,7 @@
 
       <!-- 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/>
+      <Events_carousel/>
 
-          <!-- 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>
 
       <!-- 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 09f11c3ed2ba804e10d2ce8929a2720451945f56)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 09f11c3ed2ba804e10d2ce8929a2720451945f56)
@@ -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>