diff --git a/components/filters/hompage-filters.tsx b/components/filters/hompage-filters.tsx
index 726f8479d..3c6e7a38d 100644
--- a/components/filters/hompage-filters.tsx
+++ b/components/filters/hompage-filters.tsx
@@ -13,7 +13,7 @@ const HomePageFilters = async () => {
       <h1 className="text-4xl font-bold tracking-tight text-white lg:text-6xl">
         Find Your Car Part
       </h1>
-      <div className="mt-5">
+      <div className="mt-5 flex grow flex-col items-center gap-3 @md:flex-row">
         <FiltersList
           years={years}
           makes={makes}
diff --git a/components/hero.tsx b/components/hero.tsx
index bc62907e5..a5099371c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -75,7 +75,7 @@ const Hero = async () => {
                 We will match or beat any competitor&apos;s pricing.
               </p>
             </div>
-            <div className="relative mx-auto flex max-w-4xl flex-col items-center ">
+            <div className="relative mx-auto flex w-3/4 max-w-4xl flex-col items-center @container">
               <Suspense fallback={<HomePageFiltersPlaceholder />}>
                 <HomePageFilters />
               </Suspense>