diff --git a/assets/global.css b/assets/global.css
index 3d102a643..bde37971d 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -22,16 +22,16 @@
   --violet: #7928ca;
   --blue: #0070f3;
 
-  --accents-0: #fff;
-  --accents-1: #fafafa;
-  --accents-2: #eaeaea;
-  --accents-3: #999999;
-  --accents-4: #888888;
-  --accents-5: #666666;
-  --accents-6: #444444;
-  --accents-7: #333333;
-  --accents-8: #111111;
-  --accents-9: #000;
+  --accents-0: #f8f9fa;
+  --accents-1: #f1f3f5;
+  --accents-2: #e9ecef;
+  --accents-3: #dee2e6;
+  --accents-4: #ced4da;
+  --accents-5: #adb5bd;
+  --accents-6: #868e96;
+  --accents-7: #495057;
+  --accents-8: #343a40;
+  --accents-9: #212529;
 }
 
 [data-theme='dark'] {
@@ -46,16 +46,16 @@
   --text-primary: white;
   --text-secondary: black;
 
-  --accents-0: #000;
-  --accents-1: #111111;
-  --accents-2: #333333;
-  --accents-3: #444444;
-  --accents-4: #666666;
-  --accents-5: #888888;
-  --accents-6: #999999;
-  --accents-7: #eaeaea;
-  --accents-8: #fafafa;
-  --accents-9: #fff;
+  --accents-0: #212529;
+  --accents-1: #343a40;
+  --accents-2: #495057;
+  --accents-3: #868e96;
+  --accents-4: #adb5bd;
+  --accents-5: #ced4da;
+  --accents-6: #dee2e6;
+  --accents-7: #e9ecef;
+  --accents-8: #f1f3f5;
+  --accents-9: #f8f9fa;
 }
 
 .fit {
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index 41fedd0f8..0d2265650 100644
--- a/components/core/Searchbar/Searchbar.module.css
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -1,5 +1,5 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accents-4 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out placeholder-accents-5 pr-10;
   min-width: 300px;
 }
 
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index aa754d564..a2fe85f18 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative rounded-lg text-sm bg-accents-1 text-base w-full border border-accents-2',
+        'relative text-sm bg-accents-1 text-base w-full',
         className
       )}
     >
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 45749a588..21b149f80 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -2,12 +2,11 @@
 }
 
 .list {
-  @apply flex flex-row items-center;
+  @apply flex flex-row items-center h-full;
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base;
-
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
   &:hover {
     @apply text-accents-8;
   }
diff --git a/components/icon/ArrowLeft.tsx b/components/icon/ArrowLeft.tsx
index ed80ca7a7..8cc1e1294 100644
--- a/components/icon/ArrowLeft.tsx
+++ b/components/icon/ArrowLeft.tsx
@@ -10,15 +10,15 @@ const ArrowLeft = ({ ...props }) => {
     >
       <path
         d="M19 12H5"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 19L5 12L12 5"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )
diff --git a/components/icon/Check.tsx b/components/icon/Check.tsx
index ce37027f4..89c91a1e3 100644
--- a/components/icon/Check.tsx
+++ b/components/icon/Check.tsx
@@ -10,9 +10,9 @@ const Check = ({ ...props }) => {
     >
       <path
         d="M20 6L9 17L4 12"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )
diff --git a/components/icon/Minus.tsx b/components/icon/Minus.tsx
index f41aa3cf0..1e9411dda 100644
--- a/components/icon/Minus.tsx
+++ b/components/icon/Minus.tsx
@@ -4,9 +4,9 @@ const Minus = ({ ...props }) => {
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )
diff --git a/components/icon/Plus.tsx b/components/icon/Plus.tsx
index 1fca1ac9d..ad030b92e 100644
--- a/components/icon/Plus.tsx
+++ b/components/icon/Plus.tsx
@@ -4,16 +4,16 @@ const Plus = ({ ...props }) => {
       <path
         d="M12 5V19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 1c9b2a75f..7846da50e 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -55,7 +55,7 @@
 }
 
 .squareBg,
-.productTitle,
+.productTitle > span,
 .productPrice,
 .wishlistButton {
   @apply transition ease-in-out duration-300;
@@ -65,9 +65,13 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
+.squareBg.gray {
+  @apply bg-gray-300 !important;
+}
+
 .productTitle {
-  line-height: 51px;
-  width: 200px;
+  line-height: 40px;
+  width: 18vw;
 
   & span {
     @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 847cea12e..3d862e21e 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -8,7 +8,7 @@ interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   node: ProductData
-  variant?: 'slim'
+  variant?: 'slim' | 'simple'
 }
 
 interface ProductData {
@@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
     return (
       <div className="relative overflow-hidden box-border">
         <img
-          className="object-scale-down h-24"
+          className="object-scale-down h-48"
           src={p.images.edges[0].node.urlSmall}
         />
         <div className="absolute inset-0 flex items-center justify-end mr-8">
@@ -44,12 +44,12 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             src={p.images.edges[0].node.urlXL}
           />
         </div>
-        <div className={s.squareBg} />
+        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="">
-            <div className={s.productTitle}>
+            <p className={s.productTitle}>
               <span>{p.name}</span>
-            </div>
+            </p>
             <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index e8f91c99b..444ab4e42 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,7 +1,6 @@
 import { NextSeo } from 'next-seo'
 import { FC, useState } from 'react'
 import s from './ProductView.module.css'
-import { Colors } from '@components/ui/types'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
@@ -15,19 +14,12 @@ interface Props {
   product: Product
 }
 
-interface Choices {
-  size?: string | null
-  color?: string | null
-}
-
 const ProductView: FC<Props> = ({ product, className }) => {
-  const options = getProductOptions(product)
-  // console.log(options)
-
   const addItem = useAddItem()
   const { openSidebar } = useUI()
+  const options = getProductOptions(product)
 
-  const [choices, setChoices] = useState<Choices>({
+  const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
@@ -48,9 +40,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
     }
   }
 
-  const activeSize = choices.size
-  const activeColor = choices.color
-
   return (
     <Container>
       <NextSeo
@@ -88,6 +77,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               {/** TODO: Change with Image Component */}
               {product.images.edges?.map((image, i) => (
                 <img
+                  key={image?.node.urlSmall}
                   className="w-full object-cover"
                   src={image?.node.urlXL}
                   loading={i === 0 ? 'eager' : 'lazy'}
@@ -104,25 +94,28 @@ const ProductView: FC<Props> = ({ product, className }) => {
         <div className="flex-1 flex flex-col pt-24">
           <section>
             {options?.map((opt: any) => (
-              <div className="pb-4">
+              <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v: any) => {
+                    const active = choices[opt.displayName]
+
                     return (
                       <Swatch
                         key={v.entityId}
-                        active={v.label === activeColor}
+                        active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}
                         label={v.label}
-                        onClick={() =>
+                        onClick={() => {
                           setChoices((choices) => {
+                            console.log(choices)
                             return {
                               ...choices,
                               [opt.displayName]: v.label,
                             }
                           })
-                        }
+                        }}
                       />
                     )
                   })}
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 6062e34f8..137f23749 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -1,11 +1,11 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-75 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border;
+  items-center justify-center cursor-pointer transition duration-100 ease-in-out
+  p-0 shadow-none border-gray-200 border box-border text-black;
 }
 
 .active.size {
-  @apply border-accents-2 border-2;
+  @apply border-accents-9 border-2;
 }
 
 .root:hover {
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 3085e6e0a..49befcd28 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -1,10 +1,9 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Colors } from '@components/ui/types'
 import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
-
+import { isDark } from '@lib/colors'
 interface Props {
   active?: boolean
   children?: any
@@ -24,7 +23,8 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  // console.log(variant)
+  const isDarkBg = isDark(color)
+
   const rootClassName = cn(
     s.root,
     {
@@ -38,12 +38,12 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      {...props}
     >
       {variant === 'color' && active && (
         <span
           className={cn('absolute', {
-            'text-white': label !== 'white',
-            'text-black': label === 'white',
+            'text-white': isDarkBg,
           })}
         >
           <Check />
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index ba05a2c48..266e9e78d 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -20,3 +20,7 @@
 .loading {
   @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
+
+.slim {
+  @apply py-2 transform-none normal-case;
+}
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index 9d4213612..22e5b3605 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -13,7 +13,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  variant?: 'flat' | 'slim'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
-    variant = 'filled',
+    variant = 'flat',
     children,
     active,
     onClick,
@@ -50,6 +50,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.slim]: variant === 'slim',
       [s.loading]: loading,
     },
     className
@@ -57,16 +58,16 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
 
   return (
     <Component
-      className={rootClassName}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
       {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+      className={rootClassName}
       style={{
         width,
         ...style,
       }}
-      data-active={isPressed ? '' : undefined}
     >
       {children}
       {loading && (
diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx
index 616a73965..f15bde40a 100644
--- a/components/ui/Logo/Logo.tsx
+++ b/components/ui/Logo/Logo.tsx
@@ -1,12 +1,14 @@
-const Logo = () => (
+const Logo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
   >
-    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
+    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css
index 06786b036..32601a54e 100644
--- a/components/ui/Marquee/Marquee.module.css
+++ b/components/ui/Marquee/Marquee.module.css
@@ -8,7 +8,7 @@
 
   & > * {
     @apply flex-1 px-16 py-4;
-    width: 400px;
+    width: 430px;
   }
 }
 
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
new file mode 100644
index 000000000..061370cf7
--- /dev/null
+++ b/components/ui/Modal/Modal.module.css
@@ -0,0 +1,8 @@
+.root {
+  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  @apply bg-white p-12;
+}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
new file mode 100644
index 000000000..c9a0bc0c3
--- /dev/null
+++ b/components/ui/Modal/Modal.tsx
@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProvider,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { FocusScope } from '@react-aria/focus'
+
+interface Props {
+  className?: string
+  children?: any
+  show?: boolean
+  close: () => void
+}
+
+const Modal: FC<Props> = ({
+  className,
+  children,
+  show = true,
+  close,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  usePreventScroll()
+  let { modalProps } = useModal()
+  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog(props, ref)
+
+  return (
+    <div className={rootClassName}>
+      <FocusScope contain restoreFocus autoFocus>
+        <div
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          className={s.modal}
+        >
+          {children}
+        </div>
+      </FocusScope>
+    </div>
+  )
+}
+
+export default Modal
diff --git a/components/ui/Modal/index.ts b/components/ui/Modal/index.ts
new file mode 100644
index 000000000..e24753a1e
--- /dev/null
+++ b/components/ui/Modal/index.ts
@@ -0,0 +1 @@
+export { default } from './Modal'
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 6d0da5544..33de8eb71 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -7,3 +7,4 @@ export { default as Marquee } from './Marquee'
 export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
+export { default as Modal } from './Modal'
diff --git a/lib/bigcommerce/api/catalog/products.ts b/lib/bigcommerce/api/catalog/products.ts
index f3c01d934..0af21149e 100644
--- a/lib/bigcommerce/api/catalog/products.ts
+++ b/lib/bigcommerce/api/catalog/products.ts
@@ -22,7 +22,7 @@ export type ProductsHandlers = {
 const METHODS = ['GET']
 
 // TODO: a complete implementation should have schema validation for `req.body`
-const cartApi: BigcommerceApiHandler<
+const productApi: BigcommerceApiHandler<
   SearchProductsData,
   ProductsHandlers
 > = async (req, res, config, handlers) => {
@@ -45,4 +45,4 @@ const cartApi: BigcommerceApiHandler<
 
 export const handlers = { getProducts }
 
-export default createApiHandler(cartApi, handlers, {})
+export default createApiHandler(productApi, handlers, {})
diff --git a/lib/bigcommerce/api/fragments/product.ts b/lib/bigcommerce/api/fragments/product.ts
index d047e147a..7c81e0b2e 100644
--- a/lib/bigcommerce/api/fragments/product.ts
+++ b/lib/bigcommerce/api/fragments/product.ts
@@ -9,12 +9,15 @@ export const responsiveImageFragment = /* GraphQL */ `
     isDefault
   }
 `
-export const multipleChoiceFragment = /* GraphQL */ `
+
+export const swatchOptionFragment = /* GraphQL */ `
   fragment swatchOption on SwatchOptionValue {
     isDefault
     hexColors
   }
+`
 
+export const multipleChoiceOptionFragment = /* GraphQL */ `
   fragment multipleChoiceOption on MultipleChoiceOption {
     entityId
     values {
@@ -26,6 +29,8 @@ export const multipleChoiceFragment = /* GraphQL */ `
       }
     }
   }
+
+  ${swatchOptionFragment}
 `
 
 export const productInfoFragment = /* GraphQL */ `
@@ -76,5 +81,22 @@ export const productInfoFragment = /* GraphQL */ `
   }
 
   ${responsiveImageFragment}
-  ${multipleChoiceFragment}
+  ${multipleChoiceOptionFragment}
+`
+
+export const productConnectionFragment = /* GraphQL */ `
+  fragment productConnnection on ProductConnection {
+    pageInfo {
+      startCursor
+      endCursor
+    }
+    edges {
+      cursor
+      node {
+        ...productInfo
+      }
+    }
+  }
+
+  ${productInfoFragment}
 `
diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts
index e1b094cac..5b3bd1f8b 100644
--- a/lib/bigcommerce/api/operations/get-all-products.ts
+++ b/lib/bigcommerce/api/operations/get-all-products.ts
@@ -4,7 +4,7 @@ import type {
 } from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import filterEdges from '../utils/filter-edges'
-import { productInfoFragment } from '../fragments/product'
+import { productConnectionFragment } from '../fragments/product'
 import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
 
 export const getAllProductsQuery = /* GraphQL */ `
@@ -19,24 +19,28 @@ export const getAllProductsQuery = /* GraphQL */ `
     $imgLargeHeight: Int
     $imgXLWidth: Int = 1280
     $imgXLHeight: Int
+    $products: Boolean = false
+    $featuredProducts: Boolean = false
+    $bestSellingProducts: Boolean = false
+    $newestProducts: Boolean = false
   ) {
     site {
-      products(first: $first, entityIds: $entityIds) {
-        pageInfo {
-          startCursor
-          endCursor
-        }
-        edges {
-          cursor
-          node {
-            ...productInfo
-          }
-        }
+      products(first: $first, entityIds: $entityIds) @include(if: $products) {
+        ...productConnnection
+      }
+      featuredProducts(first: $first) @include(if: $featuredProducts) {
+        ...productConnnection
+      }
+      bestSellingProducts(first: $first) @include(if: $bestSellingProducts) {
+        ...productConnnection
+      }
+      newestProducts(first: $first) @include(if: $newestProducts) {
+        ...productConnnection
       }
     }
   }
 
-  ${productInfoFragment}
+  ${productConnectionFragment}
 `
 
 export type Product = NonNullable<
@@ -46,18 +50,34 @@ export type Product = NonNullable<
 export type Products = Product[]
 
 export type GetAllProductsResult<
-  T extends { products: any[] } = { products: Products }
+  T extends Record<keyof GetAllProductsResult, any[]> = { products: Products }
 > = T
 
-export type ProductVariables = Images &
-  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
+const FIELDS = [
+  'products',
+  'featuredProducts',
+  'bestSellingProducts',
+  'newestProducts',
+]
+
+export type ProductTypes =
+  | 'products'
+  | 'featuredProducts'
+  | 'bestSellingProducts'
+  | 'newestProducts'
+
+export type ProductVariables = { field?: ProductTypes } & Images &
+  Omit<GetAllProductsQueryVariables, ProductTypes | keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
   variables?: ProductVariables
   config?: BigcommerceConfig
 }): Promise<GetAllProductsResult>
 
-async function getAllProducts<T extends { products: any[] }, V = any>(opts: {
+async function getAllProducts<
+  T extends Record<keyof GetAllProductsResult, any[]>,
+  V = any
+>(opts: {
   query: string
   variables?: V
   config?: BigcommerceConfig
@@ -65,7 +85,7 @@ async function getAllProducts<T extends { products: any[] }, V = any>(opts: {
 
 async function getAllProducts({
   query = getAllProductsQuery,
-  variables: vars,
+  variables: { field = 'products', ...vars } = {},
   config,
 }: {
   query?: string
@@ -73,17 +93,27 @@ async function getAllProducts({
   config?: BigcommerceConfig
 } = {}): Promise<GetAllProductsResult> {
   config = getConfig(config)
+
   const variables: GetAllProductsQueryVariables = {
     ...config.imageVariables,
     ...vars,
   }
+
+  if (!FIELDS.includes(field)) {
+    throw new Error(
+      `The field variable has to match one of ${FIELDS.join(', ')}`
+    )
+  }
+
+  variables[field] = true
+
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
   const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
     query,
     { variables }
   )
-  const products = data.site?.products?.edges
+  const products = data.site?.[field]?.edges
 
   return {
     products: filterEdges(products as RecursiveRequired<typeof products>),
diff --git a/lib/bigcommerce/api/wishlist/handlers/add-item.ts b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
new file mode 100644
index 000000000..d6678031f
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/add-item.ts
@@ -0,0 +1,30 @@
+import type { WishlistHandlers } from '..'
+
+// Return current wishlist info
+const addItem: WishlistHandlers['addItem'] = async ({
+  res,
+  body: { wishlistId, item },
+  config,
+}) => {
+  if (!item) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Missing item' }],
+    })
+  }
+
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({
+      items: [item],
+    }),
+  }
+  const { data } = await config.storeApiFetch(
+    `/v3/wishlists/${wishlistId}/items`,
+    options
+  )
+
+  res.status(200).json({ data })
+}
+
+export default addItem
diff --git a/lib/bigcommerce/api/wishlist/handlers/add-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/add-wishlist.ts
new file mode 100644
index 000000000..b4090adaa
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/add-wishlist.ts
@@ -0,0 +1,25 @@
+import type { WishlistHandlers } from '..'
+
+// Return current wishlist info
+const addWishlist: WishlistHandlers['addWishlist'] = async ({
+  res,
+  body: { wishlist },
+  config,
+}) => {
+  if (!wishlist) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Missing wishlist data' }],
+    })
+  }
+
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(wishlist),
+  }
+  const { data } = await config.storeApiFetch(`/v3/wishlists/`, options)
+
+  res.status(200).json({ data })
+}
+
+export default addWishlist
diff --git a/lib/bigcommerce/api/wishlist/handlers/get-all-wishlists.ts b/lib/bigcommerce/api/wishlist/handlers/get-all-wishlists.ts
new file mode 100644
index 000000000..310c7f41d
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/get-all-wishlists.ts
@@ -0,0 +1,22 @@
+import { BigcommerceApiError } from '../../utils/errors'
+import type { WishlistList, WishlistHandlers } from '..'
+
+// Return all wishlists
+const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
+  res,
+  body: { customerId },
+  config,
+}) => {
+  let result: { data?: WishlistList } = {}
+
+  try {
+    result = await config.storeApiFetch(`/v3/wishlists/customer_id=${customerId}`)
+  } catch (error) {
+    throw error
+  }
+
+  const data = (result.data ?? []) as any
+  res.status(200).json({ data })
+}
+
+export default getAllWishlists
diff --git a/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts
new file mode 100644
index 000000000..5d0aa19c5
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/get-wishlist.ts
@@ -0,0 +1,20 @@
+import type { Wishlist, WishlistHandlers } from '..'
+
+// Return wishlist info
+const getWishlist: WishlistHandlers['getWishlist'] = async ({
+  res,
+  body: { wishlistId },
+  config,
+}) => {
+  let result: { data?: Wishlist } = {}
+
+  try {
+    result = await config.storeApiFetch(`/v3/wishlists/${wishlistId}`)
+  } catch (error) {
+    throw error
+  }
+
+  res.status(200).json({ data: result.data ?? null })
+}
+
+export default getWishlist
diff --git a/lib/bigcommerce/api/wishlist/handlers/remove-item.ts b/lib/bigcommerce/api/wishlist/handlers/remove-item.ts
new file mode 100644
index 000000000..9be970f11
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/remove-item.ts
@@ -0,0 +1,25 @@
+import type { WishlistHandlers } from '..'
+
+// Return current wishlist info
+const removeItem: WishlistHandlers['removeItem'] = async ({
+  res,
+  body: { wishlistId, itemId },
+  config,
+}) => {
+  if (!wishlistId || !itemId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const result = await config.storeApiFetch<{ data: any } | null>(
+    `/v3/wishlists/${wishlistId}/items/${itemId}`,
+    { method: 'DELETE' }
+  )
+  const data = result?.data ?? null
+
+  res.status(200).json({ data })
+}
+
+export default removeItem
diff --git a/lib/bigcommerce/api/wishlist/handlers/remove-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/remove-wishlist.ts
new file mode 100644
index 000000000..41b210024
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/remove-wishlist.ts
@@ -0,0 +1,25 @@
+import type { WishlistHandlers } from '..'
+
+// Return current wishlist info
+const removeWishlist: WishlistHandlers['removeWishlist'] = async ({
+  res,
+  body: { wishlistId },
+  config,
+}) => {
+  if (!wishlistId) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const result = await config.storeApiFetch<{ data: any } | null>(
+    `/v3/wishlists/${wishlistId}/`,
+    { method: 'DELETE' }
+  )
+  const data = result?.data ?? null
+
+  res.status(200).json({ data })
+}
+
+export default removeWishlist
diff --git a/lib/bigcommerce/api/wishlist/handlers/update-wishlist.ts b/lib/bigcommerce/api/wishlist/handlers/update-wishlist.ts
new file mode 100644
index 000000000..ea1753b65
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/handlers/update-wishlist.ts
@@ -0,0 +1,27 @@
+import type { WishlistHandlers } from '..'
+
+// Update wish info
+const updateWishlist: WishlistHandlers['updateWishlist'] = async ({
+  res,
+  body: { wishlistId, wishlist },
+  config,
+}) => {
+  if (!wishlistId || !wishlist) {
+    return res.status(400).json({
+      data: null,
+      errors: [{ message: 'Invalid request' }],
+    })
+  }
+
+  const { data } = await config.storeApiFetch(
+    `/v3/wishlists/${wishlistId}/`,
+    {
+      method: 'PUT',
+      body: JSON.stringify(wishlist),
+    }
+  )
+
+  res.status(200).json({ data })
+}
+
+export default updateWishlist
diff --git a/lib/bigcommerce/api/wishlist/index.ts b/lib/bigcommerce/api/wishlist/index.ts
new file mode 100644
index 000000000..912d59491
--- /dev/null
+++ b/lib/bigcommerce/api/wishlist/index.ts
@@ -0,0 +1,152 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+  BigcommerceApiHandler,
+  BigcommerceHandler,
+} from '../utils/create-api-handler'
+import { BigcommerceApiError } from '../utils/errors'
+import getWishlist from './handlers/get-wishlist'
+import getAllWishlists from './handlers/get-all-wishlists'
+import addItem from './handlers/add-item'
+import removeItem from './handlers/remove-item'
+import updateWishlist from './handlers/update-wishlist'
+import removeWishlist from './handlers/remove-wishlist'
+import addWishlist from './handlers/add-wishlist'
+
+type Body<T> = Partial<T> | undefined
+
+export type ItemBody = {
+  product_id: number
+  variant_id: number
+}
+
+export type AddItemBody = { wishlistId: string; item: ItemBody }
+
+export type RemoveItemBody = { wishlistId: string; itemId: string }
+
+export type WishlistBody = {
+  customer_id: number
+  is_public: number
+  name: string
+  items: any[]
+}
+
+export type AddWishlistBody = { wishlist: WishlistBody }
+
+// TODO: this type should match:
+// https://developer.bigcommerce.com/api-reference/store-management/wishlists/wishlists/wishlistsbyidget
+export type Wishlist = {
+  id: string
+  customer_id: number
+  name: string
+  is_public: boolean
+  token: string
+  items: any[]
+  // TODO: add missing fields
+}
+
+export type WishlistList = Wishlist[]
+
+export type WishlistHandlers = {
+	getAllWishlists: BigcommerceHandler<WishlistList, { customerId?: string }>
+  getWishlist: BigcommerceHandler<Wishlist, { wishlistId?: string }>
+  addWishlist: BigcommerceHandler<
+    Wishlist,
+    { wishlistId: string } & Body<AddWishlistBody>
+  >
+  updateWishlist: BigcommerceHandler<
+    Wishlist,
+    { wishlistId: string } & Body<AddWishlistBody>
+  >
+  addItem: BigcommerceHandler<Wishlist, { wishlistId: string } & Body<AddItemBody>>
+  removeItem: BigcommerceHandler<
+    Wishlist,
+    { wishlistId: string } & Body<RemoveItemBody>
+  >
+  removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
+}
+
+const METHODS = ['GET', 'POST', 'PUT', 'DELETE']
+
+// TODO: a complete implementation should have schema validation for `req.body`
+const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
+  req,
+  res,
+  config,
+  handlers
+) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  try {
+    const { wishlistId, itemId, customerId } = req.body
+    // Return current wishlist info
+    if (req.method === 'GET' && wishlistId) {
+      const body = { wishlistId: wishlistId as string }
+      return await handlers['getWishlist']({ req, res, config, body })
+    }
+
+    // Add an item to the wishlist
+    if (req.method === 'POST' && wishlistId) {
+      const body = { wishlistId, ...req.body }
+      return await handlers['addItem']({ req, res, config, body })
+    }
+
+    // Update a wishlist
+    if (req.method === 'PUT' && wishlistId) {
+      const body = { wishlistId, ...req.body }
+      return await handlers['updateWishlist']({ req, res, config, body })
+    }
+
+    // Remove an item from the wishlist
+    if (req.method === 'DELETE' && wishlistId && itemId) {
+      const body = {
+        wishlistId: wishlistId as string,
+        itemId: itemId as string,
+      }
+      return await handlers['removeItem']({ req, res, config, body })
+    }
+
+    // Remove the wishlist
+    if (req.method === 'DELETE' && wishlistId && !itemId) {
+      const body = { wishlistId: wishlistId as string }
+      return await handlers['removeWishlist']({ req, res, config, body })
+    }
+
+    // Get all the wishlists
+    if (req.method === 'GET' && !wishlistId) {
+      const body = { customerId: customerId as string }
+      return await handlers['getAllWishlists']({
+        req,
+        res: res as any,
+        config,
+        body,
+      })
+    }
+
+    // Create a wishlist
+    if (req.method === 'POST' && !wishlistId) {
+      const { body } = req
+      return await handlers['addWishlist']({ req, res, config, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof BigcommerceApiError
+        ? 'An unexpected error ocurred with the Bigcommerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export const handlers = {
+  getWishlist,
+  addItem,
+  updateWishlist,
+  removeItem,
+  removeWishlist,
+  getAllWishlists,
+  addWishlist,
+}
+
+export default createApiHandler(wishlistApi, handlers, {})
diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts
index 6bd4ee8e0..e9141337b 100644
--- a/lib/bigcommerce/schema.d.ts
+++ b/lib/bigcommerce/schema.d.ts
@@ -1785,6 +1785,24 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
     }
   }
 
+export type ProductConnnectionFragment = {
+  __typename?: 'ProductConnection'
+} & {
+  pageInfo: { __typename?: 'PageInfo' } & Pick<
+    PageInfo,
+    'startCursor' | 'endCursor'
+  >
+  edges?: Maybe<
+    Array<
+      Maybe<
+        { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+            node: { __typename?: 'Product' } & ProductInfoFragment
+          }
+      >
+    >
+  >
+}
+
 export type GetAllProductPathsQueryVariables = Exact<{ [key: string]: never }>
 
 export type GetAllProductPathsQuery = { __typename?: 'Query' } & {
@@ -1814,25 +1832,24 @@ export type GetAllProductsQueryVariables = Exact<{
   imgLargeHeight?: Maybe<Scalars['Int']>
   imgXLWidth?: Maybe<Scalars['Int']>
   imgXLHeight?: Maybe<Scalars['Int']>
+  products?: Maybe<Scalars['Boolean']>
+  featuredProducts?: Maybe<Scalars['Boolean']>
+  bestSellingProducts?: Maybe<Scalars['Boolean']>
+  newestProducts?: Maybe<Scalars['Boolean']>
 }>
 
 export type GetAllProductsQuery = { __typename?: 'Query' } & {
   site: { __typename?: 'Site' } & {
-    products: { __typename?: 'ProductConnection' } & {
-      pageInfo: { __typename?: 'PageInfo' } & Pick<
-        PageInfo,
-        'startCursor' | 'endCursor'
-      >
-      edges?: Maybe<
-        Array<
-          Maybe<
-            { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
-                node: { __typename?: 'Product' } & ProductInfoFragment
-              }
-          >
-        >
-      >
-    }
+    products: { __typename?: 'ProductConnection' } & ProductConnnectionFragment
+    featuredProducts: {
+      __typename?: 'ProductConnection'
+    } & ProductConnnectionFragment
+    bestSellingProducts: {
+      __typename?: 'ProductConnection'
+    } & ProductConnnectionFragment
+    newestProducts: {
+      __typename?: 'ProductConnection'
+    } & ProductConnnectionFragment
   }
 }
 
diff --git a/lib/bigcommerce/wishlist/use-add-item.tsx b/lib/bigcommerce/wishlist/use-add-item.tsx
new file mode 100644
index 000000000..862041bbd
--- /dev/null
+++ b/lib/bigcommerce/wishlist/use-add-item.tsx
@@ -0,0 +1,46 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useAction from '@lib/commerce/utils/use-action'
+import type { ItemBody, AddItemBody } from '../api/wishlist'
+import useWishlist, { Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlist',
+  method: 'POST',
+}
+
+export type AddItemInput = ItemBody
+
+export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
+  options,
+  { wishlistId, item },
+  fetch
+) => {
+  return fetch({
+    url: options?.url ?? defaultOpts.url,
+    method: options?.method ?? defaultOpts.method,
+    body: { wishlistId, item },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useAddItem = (wishlistId: string) => {
+    const { mutate } = useWishlist(wishlistId)
+    const fn = useAction<Wishlist, AddItemBody>(defaultOpts, customFetcher)
+
+    return useCallback(
+      async function addItem(input: AddItemInput) {
+        const data = await fn({ wishlistId, item: input })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useAddItem.extend = extendHook
+
+  return useAddItem
+}
+
+export default extendHook(fetcher)
diff --git a/lib/bigcommerce/wishlist/use-remove-item.tsx b/lib/bigcommerce/wishlist/use-remove-item.tsx
new file mode 100644
index 000000000..ca9648d35
--- /dev/null
+++ b/lib/bigcommerce/wishlist/use-remove-item.tsx
@@ -0,0 +1,51 @@
+import { useCallback } from 'react'
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useAction from '@lib/commerce/utils/use-action'
+import type { RemoveItemBody } from '../api/wishlist'
+import useWishlist, { Wishlist } from './use-wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlists',
+  method: 'DELETE',
+}
+
+export type RemoveItemInput = {
+  id: string
+}
+
+export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
+  options,
+  { wishlistId, itemId },
+  fetch
+) => {
+  return fetch({
+    url: options?.url ?? defaultOpts.url,
+    method: options?.method ?? defaultOpts.method,
+    body: { wishlistId, itemId },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useRemoveItem = (wishlistId: string, item?: any) => {
+    const { mutate } = useWishlist(wishlistId)
+    const fn = useAction<Wishlist | null, RemoveItemBody>(
+      defaultOpts,
+      customFetcher
+    )
+
+    return useCallback(
+      async function removeItem(input: RemoveItemInput) {
+        const data = await fn({ wishlistId, itemId: input.id ?? item?.id })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useRemoveItem.extend = extendHook
+
+  return useRemoveItem
+}
+
+export default extendHook(fetcher)
diff --git a/lib/bigcommerce/wishlist/use-wishlist-actions.tsx b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx
new file mode 100644
index 000000000..7301994b0
--- /dev/null
+++ b/lib/bigcommerce/wishlist/use-wishlist-actions.tsx
@@ -0,0 +1,11 @@
+import useAddItem from './use-add-item'
+import useRemoveItem from './use-remove-item'
+
+// This hook is probably not going to be used, but it's here
+// to show how a commerce should be structuring it
+export default function useWishlistActions(wishlistId: string) {
+  const addItem = useAddItem(wishlistId)
+  const removeItem = useRemoveItem(wishlistId)
+
+  return { addItem, removeItem }
+}
diff --git a/lib/bigcommerce/wishlist/use-wishlist.tsx b/lib/bigcommerce/wishlist/use-wishlist.tsx
new file mode 100644
index 000000000..1d93609f0
--- /dev/null
+++ b/lib/bigcommerce/wishlist/use-wishlist.tsx
@@ -0,0 +1,41 @@
+import { HookFetcher } from '@lib/commerce/utils/types'
+import useData from '@lib/commerce/utils/use-data'
+import type { Wishlist } from '../api/wishlist'
+
+const defaultOpts = {
+  url: '/api/bigcommerce/wishlists',
+}
+
+export type { Wishlist }
+
+export type WishlistInput = {
+  wishlistId: string | undefined
+}
+
+export const fetcher: HookFetcher<Wishlist | null, WishlistInput> = (
+  options,
+  { wishlistId },
+  fetch
+) => {
+  return fetch({
+    url: options?.url,
+    body: { wishlistId },
+  })
+}
+
+export function extendHook(customFetcher: typeof fetcher) {
+  const useWishlists = (wishlistId: string) => {
+    const fetchFn: typeof fetcher = (options, input, fetch) => {
+      return customFetcher(options, input, fetch)
+    }
+    const response = useData(defaultOpts, [['wishlistId', wishlistId]], fetchFn)
+
+    return response
+  }
+
+  useWishlists.extend = extendHook
+
+  return useWishlists
+}
+
+export default extendHook(fetcher)
diff --git a/lib/colors.ts b/lib/colors.ts
index 2d4ca14cc..2ee56b150 100644
--- a/lib/colors.ts
+++ b/lib/colors.ts
@@ -14,3 +14,37 @@ export function getRandomPairOfColors() {
   // Returns a pair of colors
   return [colors[idx], colors[idx2]]
 }
+
+function hexToRgb(hex: string = '') {
+  // @ts-ignore
+  const match = hex.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i)
+
+  if (!match) {
+    return [0, 0, 0]
+  }
+
+  let colorString = match[0]
+
+  if (match[0].length === 3) {
+    colorString = colorString
+      .split('')
+      .map((char: string) => {
+        return char + char
+      })
+      .join('')
+  }
+
+  const integer = parseInt(colorString, 16)
+  const r = (integer >> 16) & 0xff
+  const g = (integer >> 8) & 0xff
+  const b = integer & 0xff
+
+  return [r, g, b]
+}
+
+export function isDark(color = '') {
+  // Equation from http://24ways.org/2010/calculating-color-contrast
+  const rgb = hexToRgb(color)
+  const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
+  return res < 128
+}
diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx
index bd1af710c..18afba7ba 100644
--- a/lib/commerce/cart/use-cart.tsx
+++ b/lib/commerce/cart/use-cart.tsx
@@ -19,10 +19,12 @@ export default function useCart<T>(
   swrOptions?: ConfigInterface<T | null>
 ) {
   const { cartCookie } = useCommerce()
+
   const fetcher: typeof fetcherFn = (options, input, fetch) => {
     input.cartId = Cookies.get(cartCookie)
     return fetcherFn(options, input, fetch)
   }
+
   const response = useData(options, input, fetcher, swrOptions)
 
   return Object.assign(response, { isEmpty: true }) as CartResponse<T>
diff --git a/lib/commerce/index.tsx b/lib/commerce/index.tsx
index adb0fc37a..3627e3774 100644
--- a/lib/commerce/index.tsx
+++ b/lib/commerce/index.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react'
 import { Fetcher } from './utils/types'
 
-const Commerce = createContext<CommerceContextValue | null>(null)
+const Commerce = createContext<CommerceContextValue | {}>({})
 
 export type CommerceProps = {
   children?: ReactNode
diff --git a/lib/logger.ts b/lib/logger.ts
index 0871a3177..eeda2c325 100644
--- a/lib/logger.ts
+++ b/lib/logger.ts
@@ -1,5 +1,18 @@
 import bunyan from 'bunyan'
+import PrettyStream from 'bunyan-prettystream'
 
-const log = bunyan.createLogger({ name: 'Next.js - Commerce' })
+const prettyStdOut = new PrettyStream()
+
+const log = bunyan.createLogger({
+  name: 'Next.js - Commerce',
+  level: 'debug',
+  streams: [
+    {
+      level: 'debug',
+      type: 'raw',
+      stream: prettyStdOut,
+    },
+  ],
+})
 
 export default log
diff --git a/package.json b/package.json
index ca288630a..16277c1d6 100644
--- a/package.json
+++ b/package.json
@@ -22,15 +22,17 @@
     "@headlessui/react": "^0.2.0",
     "@tailwindcss/ui": "^0.6.2",
     "@types/bunyan": "^1.8.6",
+    "@types/bunyan-prettystream": "^0.1.31",
     "@types/classnames": "^2.2.10",
     "@types/react-swipeable-views": "^0.13.0",
     "animate.css": "^4.1.1",
     "bunyan": "^1.8.14",
+    "bunyan-prettystream": "^0.1.3",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
-    "next": "^9.5.4",
+    "next": "^9.5.6-canary.4",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",
diff --git a/pages/index.tsx b/pages/index.tsx
index 04b3e9ef5..d70886f68 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -9,22 +9,26 @@ import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { pages } = await getAllPages()
   const { products } = await getAllProducts()
+  const { products: featuredProducts } = await getAllProducts({
+    variables: { field: 'featuredProducts', first: 3 },
+  })
   const { categories, brands } = await getSiteInfo()
 
   return {
-    props: { pages, products, categories, brands },
+    props: { pages, products, featuredProducts, categories, brands },
   }
 }
 
 export default function Home({
   products,
+  featuredProducts,
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div className="mt-3">
       <Grid>
-        {products.slice(0, 3).map((p: any) => (
+        {featuredProducts.slice(0, 3).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
@@ -44,42 +48,44 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {products.slice(3, 6).map((p: any) => (
+        {featuredProducts.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} />
         ))}
       </Grid>
       <Marquee>
-        {products.slice(0, 3).map((p: any) => (
+        {products.slice(3, 6).map((p: any) => (
           <ProductCard key={p.id} {...p} variant="slim" />
         ))}
       </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
-        <div className="pr-3 w-48">
-          <ul className="mb-10">
-            <li className="py-1 text-base font-bold tracking-wide">
-              All Categories
-            </li>
-            {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-accents-8">
-                <a href="#">{cat.name}</a>
+        <div className="pr-3 w-48 relative">
+          <div className="sticky top-2">
+            <ul className="mb-10">
+              <li className="py-1 text-base font-bold tracking-wide">
+                All Categories
               </li>
-            ))}
-          </ul>
-          <ul className="">
-            <li className="py-1 text-base font-bold tracking-wide">
-              All Designers
-            </li>
-            {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-accents-8">
-                <a href="#">{node.name}</a>
+              {categories.map((cat) => (
+                <li key={cat.path} className="py-1 text-accents-8">
+                  <a href="#">{cat.name}</a>
+                </li>
+              ))}
+            </ul>
+            <ul className="">
+              <li className="py-1 text-base font-bold tracking-wide">
+                All Designers
               </li>
-            ))}
-          </ul>
+              {brands.flatMap(({ node }) => (
+                <li key={node.path} className="py-1 text-accents-8">
+                  <a href="#">{node.name}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
         <div className="flex-1">
           <Grid layout="normal">
             {products.map((p: any) => (
-              <ProductCard key={p.id} {...p} />
+              <ProductCard key={p.id} {...p} variant="simple" />
             ))}
           </Grid>
         </div>
diff --git a/pages/login.tsx b/pages/login.tsx
new file mode 100644
index 000000000..b9cec445e
--- /dev/null
+++ b/pages/login.tsx
@@ -0,0 +1,40 @@
+import { Layout } from '@components/core'
+import { Logo, Modal, Button } from '@components/ui'
+
+export default function Login() {
+  return (
+    <div className="pb-20">
+      <Modal close={() => {}}>
+        <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
+          <div className="flex justify-center pb-12">
+            <Logo width="64px" height="64px" />
+          </div>
+          <div className="flex flex-col space-y-3">
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                placeholder="Email"
+                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+              />
+            </div>
+            <div className="border border-accents-3 text-accents-6">
+              <input
+                placeholder="Password"
+                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+              />
+            </div>
+            <Button variant="slim">Log In</Button>
+            <span className="pt-3 text-center text-sm">
+              <span className="text-accents-7">Don't have an account?</span>
+              {` `}
+              <a className="text-accent-9 font-bold hover:underline cursor-pointer">
+                Sign Up
+              </a>
+            </span>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+Login.Layout = Layout
diff --git a/pages/search.tsx b/pages/search.tsx
index 24238768c..7d0721f3f 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -149,7 +149,7 @@ export default function Search({
               ))}
             </Grid>
           ) : (
-            <Grid>
+            <Grid layout="normal">
               {range(12).map(() => (
                 <Skeleton
                   className="w-full animate__animated animate__fadeIn"
diff --git a/yarn.lock b/yarn.lock
index c749e9a09..a39341220 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1397,6 +1397,26 @@
     is-promise "4.0.0"
     tslib "~2.0.1"
 
+"@hapi/accept@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
+  integrity sha512-fMr4d7zLzsAXo28PRRQPXR1o2Wmu+6z+VY1UzDp0iFo13Twj8WePakwXBiqn3E1aAlTpSNzCXdnnQXFhst8h8Q==
+  dependencies:
+    "@hapi/boom" "9.x.x"
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/boom@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.0.tgz#0d9517657a56ff1e0b42d0aca9da1b37706fec56"
+  integrity sha512-4nZmpp4tXbm162LaZT45P7F7sgiem8dwAh2vHWT6XX24dozNjGMg6BvKCRvtCUcmcXqeMIUqWN8Rc5X8yKuROQ==
+  dependencies:
+    "@hapi/hoek" "9.x.x"
+
+"@hapi/hoek@9.x.x":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
+  integrity sha512-i9YbZPN3QgfighY/1X1Pu118VUz2Fmmhd6b2n0/O8YVgGGfw0FbUYoA97k7FkpGJ+pLCFEDLUmAPPV4D1kpeFw==
+
 "@headlessui/react@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.2.0.tgz#a31f90892d736243ba91c1474f534b3256d0c538"
@@ -1412,20 +1432,20 @@
     meow "^7.0.0"
     prettier "^2.0.5"
 
-"@next/env@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.4.tgz#950f3370151a940ecac6e7e19cf125e6113e101e"
-  integrity sha512-uGnUO68/u9C8bqHj5obIvyGRDqe/jh1dFSLx03mJmlESjcCmV4umXYJOnt3XzU1VhVntSE+jUZtnS5bjYmmLfQ==
+"@next/env@9.5.6-canary.4":
+  version "9.5.6-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.4.tgz#785956d1e2d26e25377a2dcafbd3fe785cd88c35"
+  integrity sha512-c+JrotEtdgcaF6m4xSZ6D7eY4NWSDBsqcaLwkKAXh+pSEHfH2eKnZv7cRIaR3s7Ll37gE/RNfXGVC2l43vCcuw==
 
-"@next/polyfill-module@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.4.tgz#35ea31ce5f6bbf0ac31aac483b60d4ba17a79861"
-  integrity sha512-GA2sW7gs33s7RGPFqkMiT9asYpaV/Hhw9+XM9/UlPrkNdTaxZWaPa2iHgmqJ7k6OHiOmy+CBLFrUBgzqKNhs3Q==
+"@next/polyfill-module@9.5.6-canary.4":
+  version "9.5.6-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.4.tgz#6144ee81ae42aa44905f6c2b864ff5be19c67c38"
+  integrity sha512-r+kAXpF8AjVZGanJBwveCR5GCqnNIjA0WBsotat4MP+KKQwrptocRYsP+eZZo7gyhHEwSMdMag2NWahqjW+Vlg==
 
-"@next/react-dev-overlay@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.4.tgz#7d88a710d23021020cca213bc77106df18950b2b"
-  integrity sha512-tYvNmOQ0inykSvcimkTiONMv4ZyFB2G2clsy9FKLLRZ2OA+Jiov6T7Pq6YpKbBwTLu/BQGVc7Qn4BZ5CDHR8ig==
+"@next/react-dev-overlay@9.5.6-canary.4":
+  version "9.5.6-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.4.tgz#2218f9a9d5874e838d24178f657ec6dd8e1aa961"
+  integrity sha512-zYKkkdWi2rSyWYnOn7BEAQeZwOP2O6wHC4A/nB2YdRBDvD9p3qLawmribuiQ7vspPmAIgv2JgQ8DauC5YQU7DA==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1438,10 +1458,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@9.5.4":
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.4.tgz#3bfe067f0cfc717f079482d956211708c9e81126"
-  integrity sha512-TPhEiYxK5YlEuzVuTzgZiDN7SDh4drvUAqsO9Yccd8WLcfYqOLRN2fCALremW5mNLAZQZW3iFgW8PW8Gckq4EQ==
+"@next/react-refresh-utils@9.5.6-canary.4":
+  version "9.5.6-canary.4"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.4.tgz#098a55714d906248ef46e9a1c077a1dc6e231331"
+  integrity sha512-hxSF3/lWX/a+6vPLViklLK6DNDzRzd8T/EUJpkUgLdwdHnABKFB6p9m1qvdGuqBQug2RNDcLQy7oKucy42tpVQ==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -2095,6 +2115,13 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/bunyan-prettystream@^0.1.31":
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/@types/bunyan-prettystream/-/bunyan-prettystream-0.1.31.tgz#3864836abb907ab151f7edf7c64c323c9609e1d1"
+  integrity sha512-NE7fq2ZcX7OSMK+VhTNJkVEHlo+hm0uVXpuLeH1ifGm52Qwuo/kLD2GHo7UcEXMFu3duKver/AFo8C4TME93zw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/bunyan@^1.8.6":
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/@types/bunyan/-/bunyan-1.8.6.tgz#6527641cca30bedec5feb9ab527b7803b8000582"
@@ -2977,6 +3004,11 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "~3.7.0"
 
+bunyan-prettystream@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/bunyan-prettystream/-/bunyan-prettystream-0.1.3.tgz#6c3b713266f6ad32007c7b6ab1e998a245349d98"
+  integrity sha1-bDtxMmb2rTIAfHtqsemYokU0nZg=
+
 bunyan@^1.8.14:
   version "1.8.14"
   resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.14.tgz#3d8c1afea7de158a5238c7cb8a66ab6b38dd45b4"
@@ -5887,10 +5919,10 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^9.5.4:
-  version "9.5.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.5.4.tgz#3c6aa3fd38ff1711e956ea2b6833475e0262ec35"
-  integrity sha512-dicsJSxiUFcRjeZ/rNMAO3HS5ttFFuRHhdAn5g7lHnWUZ3MnEX4ggBIihaoUr6qu2So9KoqUPXpS91MuSXUmBw==
+next@^9.5.6-canary.4:
+  version "9.5.6-canary.4"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.4.tgz#af3ed55845f6005ac155f7c5d9d21b7493be7141"
+  integrity sha512-sd29wpQer1Ha9EWpvrBvN6XXmLtJnR5JWAyYnlBmrA835BolN0cQw6++sOGcdTJZV5+ZWbhTEzBVOUTKsSLd5w==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.6.0"
     "@babel/code-frame" "7.10.4"
@@ -5910,10 +5942,11 @@ next@^9.5.4:
     "@babel/preset-typescript" "7.10.4"
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
-    "@next/env" "9.5.4"
-    "@next/polyfill-module" "9.5.4"
-    "@next/react-dev-overlay" "9.5.4"
-    "@next/react-refresh-utils" "9.5.4"
+    "@hapi/accept" "5.0.1"
+    "@next/env" "9.5.6-canary.4"
+    "@next/polyfill-module" "9.5.6-canary.4"
+    "@next/react-dev-overlay" "9.5.6-canary.4"
+    "@next/react-refresh-utils" "9.5.6-canary.4"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"