diff --git a/packages/features/bookings/components/FiltersContainer.tsx b/packages/features/bookings/components/FiltersContainer.tsx
index eb8566d2aa..9299875861 100644
--- a/packages/features/bookings/components/FiltersContainer.tsx
+++ b/packages/features/bookings/components/FiltersContainer.tsx
@@ -29,7 +29,7 @@ const filters: Filter[] = [
 
 export function FiltersContainer() {
   return (
-    <div className="flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse lg:justify-end ">
+    <div className="flex w-full space-x-2 rtl:space-x-reverse">
       {filters.map((filter) => {
         if (!filter.showByDefault) {
           // TODO: check if any of the controllingQueryParams are present in the query params and show the filter if so
diff --git a/packages/features/bookings/layout/BookingLayout.tsx b/packages/features/bookings/layout/BookingLayout.tsx
index 20bd6590f7..47c5008d9f 100644
--- a/packages/features/bookings/layout/BookingLayout.tsx
+++ b/packages/features/bookings/layout/BookingLayout.tsx
@@ -35,9 +35,11 @@ export default function BookingLayout({
   return (
     <Shell {...rest}>
       <div className="flex max-w-6xl flex-col">
-        <div className="flex  flex-col lg:flex-row">
+        <div className="flex flex-col gap-2 lg:flex-row">
           <HorizontalTabs tabs={tabs} />
-          <FiltersContainer />
+          <div className="overflow-x-auto lg:ml-auto">
+            <FiltersContainer />
+          </div>
         </div>
         <main className="w-full max-w-6xl">{children}</main>
       </div>