Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision 11196e84a6b4480681e3ddd7c1037b2b61de96e3)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision c2ee0db709d80612dab642f2b2ae1b313c32105f)
@@ -10,8 +10,8 @@
   props:{
     mode: String,
+    locals: Array,
   },
   data() {
     return {
-      locals: [],
       favourite_locals: [],
       userStore: userStore(),
@@ -46,8 +46,4 @@
 
   mounted() {
-    useLocales
-      .getLocals()
-      .then(data => { this.locals = data.locals; console.log("The data of the locals will probobly be needed later so this console log stays", data); })
-      .catch(err => console.log("The locals are not being caught.", err))
 
     // Only fetch favourite locals if user is logged in and is a customer
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 11196e84a6b4480681e3ddd7c1037b2b61de96e3)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision c2ee0db709d80612dab642f2b2ae1b313c32105f)
@@ -5,4 +5,5 @@
 import { transformArray } from '@/mixins/utilFunctions.js'
 import { useEvents } from '@/repository/Events.ts'
+import { useLocales } from '@/repository/Locale.ts'
 
 export default {
@@ -17,4 +18,5 @@
       allEvents: [],
       showBackToTop: true,
+      locals: [],
     }
   },
@@ -50,4 +52,9 @@
         })
       }
+    },
+    sendSearchQuery(searchQuery, sortBy, directions, isOpen) {
+        useLocales.getLocals(searchQuery, sortBy, directions, isOpen)
+          .then(data => { this.locals = data.locals;})
+          .catch(err => console.log("The locals are not being caught.", err))
     }
   },
@@ -61,4 +68,9 @@
       })
       .catch(error => console.log("Probably failed fetching events due to login", error))
+
+    useLocales
+      .getLocals()
+      .then(data => { this.locals = data.locals; console.log("The data of the locals will probobly be needed later so this console log stays", data); })
+      .catch(err => console.log("The locals are not being caught.", err))
   }
 }
@@ -71,5 +83,5 @@
         <div class="row justify-content-center">
           <!-- Sticky Search and Filter Bar -->
-          <SearchFilterPanel />
+          <SearchFilterPanel @search-query-sent="sendSearchQuery" />
 
           <!-- Events Section - Compact Secondary Feature -->
@@ -82,5 +94,5 @@
           <!-- Scrollable Local Listings -->
           <div class="col-md-8 listing-column">
-            <Locale_listing_container :mode="'all'" />
+            <Locale_listing_container :locals="locals" :mode="'all'" />
           </div>
         </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision 11196e84a6b4480681e3ddd7c1037b2b61de96e3)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue	(revision c2ee0db709d80612dab642f2b2ae1b313c32105f)
@@ -1,15 +1,24 @@
 <script setup lang="ts">
-
-
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const selectedFilters = ref([])
 
-const filterOptions = [
-  'Open Now',
-  'Top Rated',
-  'Nearby'
-]
+/*const filterOptions = ['Open Now', 'Top Rated', 'Nearby']*/
+const filterOptions = { 'Open Now': 'isOpen', 'Top Rated': 'rating', Nearby: 'distance' }
+const sortQuery = ref('')
+const searchInput = ref('')
 
+let debounceTimer = null
+const emit = defineEmits(['searchQuerySent'])
+
+watch([searchInput, sortQuery, selectedFilters], (newValues) => {
+  clearTimeout(debounceTimer)
+
+  debounceTimer = setTimeout(() => {
+    const [newSearchValue, newSortValue, newSelectedFilters] = newValues
+    const [extractedSortValue, ascOrDsc = 'asc'] = newSortValue.split(',')
+    emit('searchQuerySent', newSearchValue, extractedSortValue, ascOrDsc, newSelectedFilters.includes('isOpen'))
+  }, 400)
+})
 </script>
 
@@ -18,18 +27,22 @@
   <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...">
+        <input
+          v-model="searchInput"
+          type="text"
+          class="form-control"
+          placeholder="Search locales..."
+        />
       </div>
 
       <!-- Sort By Dropdown -->
       <div class="col-6 col-md-3">
-        <select class="form-select">
+        <select v-model="sortQuery" 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>
+          <option value="name,asc">Name (A-Z)</option>
+          <option value="name,desc">Name (Z-A)</option>
+          <option value="rating">Rating</option>
+          <option value="newest">Newest</option>
         </select>
       </div>
@@ -46,16 +59,16 @@
             Filter
           </button>
-          <ul class="dropdown-menu p-2" style="min-width: 200px;">
-            <li v-for="option in filterOptions" :key="option">
+          <ul class="dropdown-menu p-2" style="min-width: 200px">
+            <li v-for="(option, key) in filterOptions" :key="key">
               <div class="form-check">
                 <input
                   class="form-check-input"
                   type="checkbox"
-                  :id="option"
+                  :id="key"
                   :value="option"
                   v-model="selectedFilters"
-                >
+                />
                 <label class="form-check-label" :for="option">
-                  {{ option }}
+                  {{ key }}
                 </label>
               </div>
@@ -64,10 +77,7 @@
         </div>
       </div>
-
     </div>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
Index: ReserveNGo-frontend/src/repository/Locale.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Locale.ts	(revision 11196e84a6b4480681e3ddd7c1037b2b61de96e3)
+++ ReserveNGo-frontend/src/repository/Locale.ts	(revision c2ee0db709d80612dab642f2b2ae1b313c32105f)
@@ -15,6 +15,7 @@
   }
 
-  getLocals() {
-    return this.httpClient.get()
+  getLocals(name?: string, sortBy?: string, direction?: string, isOpen?: boolean) {
+    if (name || sortBy || direction) return this.httpClient.get("", { queryParams: { name, sortBy, direction, isOpen } })
+    else return this.httpClient.get()
   }
   getSpecificLocale(localeId: number) {