diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 8ef896190..8a7a84f4c 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -14,7 +14,7 @@ const Navbar: FC<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <Container>
-        <div className="flex justify-between align-center flex-row p-4 md:p-6 relative">
+        <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
           <div className="flex flex-1 items-center">
             <Link href="/">
               <a className="cursor-pointer">
diff --git a/pages/search.tsx b/pages/search.tsx
index 4e89150b0..9415d07e8 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -2,7 +2,7 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import useSearch from '@lib/bigcommerce/products/use-search'
 import { Layout } from '@components/core'
-import { Grid } from '@components/ui'
+import { Container, Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import { useRouter } from 'next/router'
 
@@ -25,60 +25,66 @@ export default function Home({
   })
 
   return (
-    <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
-      <div className="col-span-2">
-        <ul className="mb-10">
-          <li className="py-1 text-primary font-bold tracking-wide">
-            All Categories
-          </li>
-          {categories.map((cat) => (
-            <li key={cat.path} className="py-1 text-secondary">
-              <a href="#">{cat.name}</a>
+    <Container>
+      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+        <div className="col-span-2">
+          <ul className="mb-10">
+            <li className="py-1 text-primary font-bold tracking-wide">
+              All Categories
             </li>
-          ))}
-        </ul>
-        <ul>
-          <li className="py-1 text-primary font-bold tracking-wide">
-            All Designers
-          </li>
-          {brands.flatMap(({ node }) => (
-            <li key={node.path} className="py-1 text-secondary">
-              <a href="#">{node.name}</a>
+            {categories.map((cat) => (
+              <li key={cat.path} className="py-1 text-secondary">
+                <a href="#">{cat.name}</a>
+              </li>
+            ))}
+          </ul>
+          <ul>
+            <li className="py-1 text-primary font-bold tracking-wide">
+              All Designers
             </li>
-          ))}
-        </ul>
+            {brands.flatMap(({ node }) => (
+              <li key={node.path} className="py-1 text-secondary">
+                <a href="#">{node.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="col-span-8">
+          {data ? (
+            <>
+              {q && (
+                <div className="mb-12">
+                  {data.found ? (
+                    <>Showing {data.products.length} results for</>
+                  ) : (
+                    <>There are no products that match</>
+                  )}{' '}
+                  "<strong>{q}</strong>"
+                </div>
+              )}
+              <Grid
+                items={data.products}
+                layout="normal"
+                wrapper={ProductCard}
+              />
+            </>
+          ) : (
+            <div>Searching...</div>
+          )}
+        </div>
+        <div className="col-span-2">
+          <ul>
+            <li className="py-1 text-primary font-bold tracking-wide">
+              Relevance
+            </li>
+            <li className="py-1 text-secondary">Latest arrivals</li>
+            <li className="py-1 text-secondary">Trending</li>
+            <li className="py-1 text-secondary">Price: Low to high</li>
+            <li className="py-1 text-secondary">Price: High to low</li>
+          </ul>
+        </div>
       </div>
-      <div className="col-span-8">
-        {data ? (
-          <>
-            {q && (
-              <div className="mb-12">
-                {data.found ? (
-                  <>Showing {data.products.length} results for</>
-                ) : (
-                  <>There are no products that match</>
-                )}{' '}
-                "<strong>{q}</strong>"
-              </div>
-            )}
-            <Grid items={data.products} layout="normal" wrapper={ProductCard} />
-          </>
-        ) : (
-          <div>Searching...</div>
-        )}
-      </div>
-      <div className="col-span-2">
-        <ul>
-          <li className="py-1 text-primary font-bold tracking-wide">
-            Relevance
-          </li>
-          <li className="py-1 text-secondary">Latest arrivals</li>
-          <li className="py-1 text-secondary">Trending</li>
-          <li className="py-1 text-secondary">Price: Low to high</li>
-          <li className="py-1 text-secondary">Price: High to low</li>
-        </ul>
-      </div>
-    </div>
+    </Container>
   )
 }