diff --git a/.gitignore b/.gitignore
index b5232955b..640afa9c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,7 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
\ No newline at end of file
+.vercel
+
+# dev
+framework
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 55ed5289d..c32b1268f 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 import getSlug from '@lib/get-slug'
-import { Github } from '@components/icons'
+import { Github, Vercel } from '@components/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
@@ -99,14 +99,10 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
-          <div className="flex items-center">
+          <div className="flex items-center text-primary">
             <span className="text-primary">Crafted by</span>
-            <a href="https://vercel.com" aria-label="Vercel.com Link">
-              <img
-                src="/vercel.svg"
-                alt="Vercel.com Logo"
-                className="inline-block h-6 ml-4 text-primary"
-              />
+            <a href="https://vercel.com" aria-label="Vercel.com Link" target="_blank" className="text-primary">
+              <Vercel className="inline-block h-6 ml-4 text-primary" alt="Vercel.com Logo" />
             </a>
           </div>
         </div>
diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx
index 92b40322d..995e1faee 100644
--- a/components/common/I18nWidget/I18nWidget.tsx
+++ b/components/common/I18nWidget/I18nWidget.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import Link from 'next/link'
-import { useRef, FC, useState } from 'react'
+import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import s from './I18nWidget.module.css'
 import { Cross, ChevronUp } from '@components/icons'
@@ -41,10 +41,9 @@ const I18nWidget: FC = () => {
 
   const options = locales?.filter((val) => val !== locale)
   const currentLocale = locale || defaultLocale
-  const ref = useRef<HTMLDivElement | null>(null)
 
   return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)} ref={ref}>
+    <ClickOutside active={display} onClick={() => setDisplay(false)} >
       <nav className={s.root}>
         <div
           className="flex items-center relative"
diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index 158f63068..14c07860a 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -6,11 +6,12 @@ import React, { FC } from 'react'
 import { useUI } from '@components/ui/context'
 import { Navbar, Footer } from '@components/common'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
-import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
 import { CartSidebarView } from '@components/cart'
 
+import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
+import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+
 const Loading = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
     <LoadingDots />
@@ -76,7 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
-            <Button className="mx-5" onClick={onAcceptCookies}>
+            <Button className="mx-5" onClick={() => onAcceptCookies()}>
               Accept cookies
             </Button>
           }
diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx
index fb3ddc7de..0c47158db 100644
--- a/components/common/UserNav/DropdownMenu.tsx
+++ b/components/common/UserNav/DropdownMenu.tsx
@@ -8,6 +8,7 @@ import { Avatar } from '@components/common'
 import { Moon, Sun } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import ClickOutside from '@lib/click-outside'
+
 import {
   disableBodyScroll,
   enableBodyScroll,
@@ -15,6 +16,7 @@ import {
 } from 'body-scroll-lock'
 
 import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
+
 interface DropdownMenuProps {
   open?: boolean
 }
@@ -75,7 +77,10 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
                       className={cn(s.link, {
                         [s.active]: pathname === href,
                       })}
-                      onClick={closeSidebarIfPresent}
+                      onClick={() => {
+                        setDisplay(false)
+                        closeSidebarIfPresent()
+                      }}
                     >
                       {name}
                     </a>
@@ -86,9 +91,10 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
             <li>
               <a
                 className={cn(s.link, 'justify-between')}
-                onClick={() =>
+                onClick={() => {
                   theme === 'dark' ? setTheme('light') : setTheme('dark')
-                }
+                  setDisplay(false)
+                }}
               >
                 <div>
                   Theme: <strong>{theme}</strong>{' '}
diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx
new file mode 100644
index 000000000..8e8f6457d
--- /dev/null
+++ b/components/icons/Vercel.tsx
@@ -0,0 +1,16 @@
+const Vercel = ({ ...props }) => {
+    return (
+  <svg width="89" height="20" viewBox="0 0 89 20" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
+      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor"/>
+      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="currentColor"/>
+      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="currentColor"/>
+      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="currentColor"/>
+      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="currentColor"/>
+      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
+      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="currentColor"/>
+  </svg>
+
+  )
+}
+
+export default Vercel
diff --git a/components/icons/index.ts b/components/icons/index.ts
index e72660e83..6e57ab0e8 100644
--- a/components/icons/index.ts
+++ b/components/icons/index.ts
@@ -13,3 +13,4 @@ export { default as DoubleChevron } from './DoubleChevron'
 export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
 export { default as ChevronUp } from './ChevronUp'
+export { default as Vercel } from './Vercel'
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 039643abb..1484cfaa4 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -9,8 +9,8 @@
       transform: scale(0.98);
     }
 
-    & .product-image {
-      transform: scale(1.05);
+    & .productImage {
+      transform: scale(1.2625);
     }
 
     & .productTitle > span,
@@ -44,10 +44,6 @@
     }
   }
 
-  & .product-image {
-    @apply transform transition-transform duration-500;
-  }
-
   &:nth-child(6n + 1) .squareBg {
     @apply bg-violet;
   }
@@ -135,7 +131,6 @@
   }
 }
 
-.image {
-  object-fit: cover;
-  transform: scale(1.2);
+.productImage {
+  @apply transform transition-transform duration-500 object-cover scale-120;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 3cd288c7c..449647c74 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -1,12 +1,13 @@
-import type { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import Image from 'next/image'
+import type { FC } from 'react'
 import s from './ProductCard.module.css'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
+import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
+import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
+
 interface Props {
   className?: string
   product: ProductNode
@@ -82,7 +83,7 @@ const ProductCard: FC<Props> = ({
                 quality="85"
                 src={src}
                 alt={p.name}
-                className={s.image}
+                className={s.productImage}
                 width={imgWidth}
                 sizes={imgSizes}
                 height={imgHeight}
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index e7f3d89c1..ca5db36a6 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -27,12 +27,12 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     variant = 'flat',
     children,
     active,
-    onClick,
     width,
-    Component = 'button',
     loading = false,
     disabled = false,
     style = {},
+    Component = 'button',
+    ...rest
   } = props
   const ref = useRef<typeof Component>(null)
 
@@ -57,6 +57,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
         width,
         ...style,
       }}
+      {...rest}
     >
       {children}
       {loading && (
diff --git a/lib/click-outside/click-outside.tsx b/lib/click-outside/click-outside.tsx
index d3bba953c..268fc13d9 100644
--- a/lib/click-outside/click-outside.tsx
+++ b/lib/click-outside/click-outside.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, Ref, MouseEvent } from 'react'
+import React, { useRef, useEffect, MouseEvent } from 'react'
 import hasParent from './has-parent'
 
 interface ClickOutsideProps {
@@ -7,18 +7,12 @@ interface ClickOutsideProps {
   children: any
 }
 
-const ClickOutside = forwardRef(
-  (
-    { active = true, onClick, children }: ClickOutsideProps,
-    ref: Ref<HTMLDivElement> | null | any = {}
-  ) => {
-    const innerRef = ref?.current
+const ClickOutside = ({ active = true, onClick, children }: ClickOutsideProps) => {
+    const innerRef = useRef()
 
     const handleClick = (event: any) => {
-      if (!hasParent(event.target, innerRef)) {
+      if (!hasParent(event.target, innerRef?.current)) {
         if (typeof onClick === 'function') {
-          event.preventDefault()
-          event.stopImmediatePropagation()
           onClick(event)
         }
       }
@@ -38,8 +32,7 @@ const ClickOutside = forwardRef(
       }
     })
 
-    return React.cloneElement(children, { ref })
+    return React.cloneElement(children, { ref: innerRef })
   }
-)
 
 export default ClickOutside
diff --git a/lib/hooks/useAcceptCookies.ts b/lib/hooks/useAcceptCookies.ts
index 2ba130abc..7f33adf47 100644
--- a/lib/hooks/useAcceptCookies.ts
+++ b/lib/hooks/useAcceptCookies.ts
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
 import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
 
 const COOKIE_NAME = 'accept_cookies'
 
@@ -14,9 +14,7 @@ export const useAcceptCookies = () => {
 
   const acceptCookies = () => {
     setAcceptedCookies(true)
-    Cookies.set(COOKIE_NAME, 'accepted', {
-      expires: 365,
-    })
+    Cookies.set(COOKIE_NAME, 'accepted', { expires: 365 })
   }
 
   return {
diff --git a/next.config.js b/next.config.js
index 9cf29493f..0ed7f7ea8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -53,6 +53,7 @@ module.exports = bundleAnalyzer({
         // This rewrite will also handle `/search/designers`
         source: '/search/:category',
         destination: '/search',
+        locale: false
       },
     ]
   },
diff --git a/public/vercel.svg b/public/vercel.svg
index 5f387a32d..c0a8ee464 100644
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -1,9 +1,9 @@
 <svg width="89" height="20" viewBox="0 0 89 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="black"/>
-<path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="black"/>
-<path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="black"/>
-<path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="black"/>
-<path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="black"/>
-<path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
-<path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="black"/>
+    <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor"/>
+    <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="currentColor"/>
+    <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="currentColor"/>
+    <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="currentColor"/>
+    <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="currentColor"/>
+    <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
+    <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="currentColor"/>
 </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 62c598137..4a9e6549a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,6 +51,9 @@ module.exports = {
       },
       lineHeight: {
         'extra-loose': '2.2'
+      },
+      scale: {
+        '120': '1.2',
       }
     },
   },