diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index 189ca10aa..24d1480d3 100644
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -7,12 +7,12 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense>
-      <div className="mx-auto flex max-w-screen-2xl flex-col px-4 py-6 text-black dark:text-white md:flex-row">
-        <div className="order-first flex-none md:pr-12 md:pt-6">
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+        <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>
         <div className="order-last min-h-screen w-full md:order-none">{children}</div>
-        <div className="order-none md:order-last md:flex-none md:pl-12 md:pt-6">
+        <div className="order-none flex-none md:order-last md:w-[125px]">
           <FilterList list={sorting} title="Sort by" />
         </div>
       </div>
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 2af9a9767..92681555a 100644
--- a/components/grid/index.tsx
+++ b/components/grid/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 function Grid(props: React.ComponentProps<'ul'>) {
   return (
-    <ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}>
+    <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
       {props.children}
     </ul>
   );
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 04b73e8c2..3afc98707 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -8,7 +8,7 @@ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half
     <div
       className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
     >
-      <Link className="block h-full p-2" href={`/product/${item.handle}`}>
+      <Link className="block h-full" href={`/product/${item.handle}`}>
         <GridTileImage
           src={item.featuredImage.url}
           width={size === 'full' ? 1080 : 540}
@@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto max-w-screen-2xl p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2">
+    <section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2">
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index 054994fc6..ac5002d68 100644
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -7,18 +7,18 @@ export type PathFilterItem = { title: string; path: string };
 
 function FilterItemList({ list }: { list: ListItem[] }) {
   return (
-    <div className="hidden md:block">
+    <>
       {list.map((item: ListItem, i) => (
         <FilterItem key={i} item={item} />
       ))}
-    </div>
+    </>
   );
 }
 
 export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
   return (
     <>
-      <nav className="col-span-2 w-full flex-none">
+      <nav>
         {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />