diff --git a/assets/base.css b/assets/base.css
index 3c962b16c..9334525f0 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -11,6 +11,8 @@
   --text-secondary: white;
 
   --hover: rgba(0, 0, 0, 0.075);
+  --hover-1: rgba(0, 0, 0, 0.15);
+  --hover-2: rgba(0, 0, 0, 0.25);
 
   --cyan: #22b8cf;
   --green: #37b679;
@@ -41,6 +43,8 @@
   --secondary: white;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
+  --hover-1: rgba(255, 255, 255, 0.15);
+  --hover-2: rgba(255, 255, 255, 0.25);
   --selection: var(--purple);
 
   --text-base: white;
diff --git a/assets/components.css b/assets/components.css
index eab469589..ebebcc238 100644
--- a/assets/components.css
+++ b/assets/components.css
@@ -1,3 +1,3 @@
 .fit {
-  min-height: calc(100vh - 88px - 41px);
+  min-height: calc(100vh - 88px);
 }
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index d8bea803a..3797f8073 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index e98cf1bda..ed5bd469b 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -36,21 +36,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
             <ul className="flex flex-initial flex-col md:flex-1">
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Home
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Careers
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/blog">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Blog
                   </a>
                 </Link>
@@ -58,7 +58,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {sitePages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
@@ -71,7 +71,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {legalPages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css
index 54fc80eb8..bb90675a6 100644
--- a/components/core/Layout/Layout.module.css
+++ b/components/core/Layout/Layout.module.css
@@ -1,4 +1,4 @@
 .root {
-  @apply h-full bg-primary mx-auto;
+  @apply h-full bg-primary mx-auto transition-colors duration-150;
   max-width: 2460px;
 }
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 883ddd45b..74c5a4069 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
@@ -18,13 +18,35 @@ interface Props {
 const Layout: FC<Props> = ({ children, pageProps }) => {
   const { displaySidebar, closeSidebar } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  useEffect(() => {
+    const offset = 0
+    function handleScroll() {
+      const { scrollTop } = document.documentElement
+      if (scrollTop > offset) setHasScrolled(true)
+      else setHasScrolled(false)
+    }
+    document.addEventListener('scroll', handleScroll)
+
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   return (
     <CommerceProvider locale="en-us">
       <div className={cn(s.root)}>
-        <Container>
-          <Navbar />
-        </Container>
+        <header
+          className={cn(
+            'sticky top-0 bg-primary z-40 transition-all duration-150',
+            { 'shadow-magical': hasScrolled }
+          )}
+        >
+          <Container>
+            <Navbar />
+          </Container>
+        </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
         <Sidebar show={displaySidebar} close={closeSidebar}>
diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css
index c2dedc9be..5abeb32e0 100644
--- a/components/core/Navbar/Navbar.module.css
+++ b/components/core/Navbar/Navbar.module.css
@@ -1,3 +1,3 @@
 .link {
-  @apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer;
+  @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
 }
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index a2fe85f18..25f6eb7a8 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 text-sm bg-accents-1 text-base w-full',
+        'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
         className
       )}
     >
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
index d33d3c371..25b918d79 100644
--- a/components/core/Toggle/Toggle.tsx
+++ b/components/core/Toggle/Toggle.tsx
@@ -9,26 +9,30 @@ interface Props {
 
 const Toggle: FC<Props> = ({ className, checked, onChange }) => {
   return (
-    <Switch checked={checked} onChange={onChange}>
+    <Switch
+      checked={checked}
+      onChange={onChange}
+      className="focus:outline-none"
+    >
       <span
         role="checkbox"
         aria-checked="false"
         tabIndex={0}
         className={`${
           checked ? 'bg-gray-800' : 'bg-gray-200'
-        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
+        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
       >
         <span
           aria-hidden="true"
           className={`${
             checked ? 'translate-x-5' : 'translate-x-0'
-          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
+          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
         >
           <span
             className={`${
               checked
-                ? 'opacity-0 ease-out duration-100'
-                : 'opacity-100 ease-in duration-200'
+                ? 'opacity-0 ease-out duration-150'
+                : 'opacity-100 ease-in duration-150'
             } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
             <HiSun className="h-3 w-3 text-gray-400" />
@@ -36,9 +40,9 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
           <span
             className={`${
               checked
-                ? 'opacity-100 ease-in duration-200'
-                : 'opacity-0 ease-out duration-100'
-            } opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+                ? 'opacity-100 ease-in duration-150'
+                : 'opacity-0 ease-out duration-150'
+            } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
             <HiMoon className="h-3 w-3 text-yellow-400" />
           </span>
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index 61f8d4ca2..da4369c4b 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
   return (
     <Transition
       show={open}
-      enter="transition ease-out duration-100 z-20"
+      enter="transition ease-out duration-150 z-20"
       enterFrom="transform opacity-0 scale-95"
       enterTo="transform opacity-100 scale-100"
       leave="transition ease-in duration-75"
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index d76382671..a22a1868c 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -10,7 +10,7 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center outline-none;
 
   &:hover {
     @apply text-accents-8 transition scale-110 duration-100;
@@ -20,7 +20,8 @@
     @apply mr-0;
   }
 
-  &:focus {
-    outline: none;
+  &:focus,
+  &:active {
+    @apply outline-none;
   }
 }
diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx
index 00ed94a60..cd96a6fa5 100644
--- a/components/icon/DoubleChevron.tsx
+++ b/components/icon/DoubleChevron.tsx
@@ -10,7 +10,7 @@ const DoubleChevron = ({ ...props }) => {
     >
       <path
         d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
-        stroke="white"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/icon/RightArrow.tsx b/components/icon/RightArrow.tsx
new file mode 100644
index 000000000..183a04d18
--- /dev/null
+++ b/components/icon/RightArrow.tsx
@@ -0,0 +1,29 @@
+const RightArrow = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5 12H19"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 5L19 12L12 19"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default RightArrow
diff --git a/components/icon/index.ts b/components/icon/index.ts
index e76cfa493..0a8a191c3 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -10,3 +10,4 @@ export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
+export { default as RightArrow } from './RightArrow'
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
index 5f076af16..740c30369 100644
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ b/components/product/ProductSlider/ProductSlider.module.css
@@ -1,22 +1,76 @@
 .root {
-  @apply relative w-full h-full;
+  @apply relative w-full h-full relative;
   overflow-y: hidden;
+}
 
-  & > div {
-    overflow: visible !important;
+.leftControl,
+.rightControl {
+  @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+}
+
+.leftControl {
+  @apply left-6;
+}
+
+.rightControl {
+  @apply right-6;
+}
+
+.control {
+  @apply opacity-0 transition duration-150;
+}
+
+.root:hover .control {
+  @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+  @apply hidden;
+  @screen sm {
+    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
   }
 }
 
-.rootPanel {
-  @apply absolute flex flex-row inset-0 z-20 m-20;
+.positionIndicator {
+  @apply rounded-full p-2;
+
+  /* :hover .dot {
+    @apply bg-hover-2;
+  }
+
+  :focus .dot {
+    @apply outline-none;
+  } */
 }
 
-.leftPanel {
-  @apply flex-1;
-  cursor: url('/cursor-left.png'), auto;
+.dot {
+  @apply bg-hover-1 transition w-3 h-3 rounded-full;
 }
 
-.rightPanel {
-  @apply flex-1;
-  cursor: url('/cursor-right.png'), auto;
+.positionIndicator:hover .dot {
+  @apply bg-hover-2;
 }
+
+.positionIndicator:focus {
+  @apply outline-none;
+}
+
+.positionIndicator:focus .dot {
+  @apply shadow-outline-blue;
+}
+
+.positionIndicatorActive .dot {
+  @apply bg-white;
+}
+
+.positionIndicatorActive:hover .dot {
+  @apply bg-white;
+}
+/* sx={{
+  width: '10px',
+  height: '10px',
+  bg: currentSlide === idx ? 'primary' : 'gray',
+  borderRadius: 'full',
+  mx: 2,
+  '&:focus': { outline: 'none' },
+}} */
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 77610e8c1..0b95ba1e2 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -1,36 +1,71 @@
-import React, { FC, useState } from 'react'
-import SwipeableViews from 'react-swipeable-views'
+import { useKeenSlider } from 'keen-slider/react'
+import React, { Children, FC, isValidElement, useState } from 'react'
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
+import cn from 'classnames'
+
 import s from './ProductSlider.module.css'
-interface Props {
-  children?: any
-}
 
-const ProductSlider: FC<Props> = ({ children }) => {
-  const [idx, setIdx] = useState(0)
-  const count = React.Children.count(children)
+const ProductSlider: FC = ({ children }) => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [isMounted, setIsMounted] = useState(false)
 
-  const goBack = () => {
-    idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
-  }
-
-  const goNext = () => {
-    idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
-  }
+  const [ref, slider] = useKeenSlider<HTMLDivElement>({
+    loop: true,
+    slidesPerView: 1,
+    mounted: () => setIsMounted(true),
+    slideChanged(s) {
+      setCurrentSlide(s.details().relativeSlide)
+    },
+  })
 
   return (
     <div className={s.root}>
-      <SwipeableViews
-        index={idx}
-        onChangeIndex={setIdx}
-        containerStyle={{ overflow: 'visible' }}
-        slideStyle={{ overflow: 'visible' }}
+      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
+        <HiChevronLeft />
+      </button>
+      <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
+        <HiChevronRight />
+      </button>
+      <div
+        ref={ref}
+        className="keen-slider h-full transition-opacity duration-150"
+        style={{ opacity: isMounted ? 1 : 0 }}
       >
-        {children}
-      </SwipeableViews>
-      <div className={s.rootPanel}>
-        <div className={s.leftPanel} onClick={goBack}></div>
-        <div className={s.rightPanel} onClick={goNext}></div>
+        {Children.map(children, (child) => {
+          // Add the keen-slider__slide className to children
+          if (isValidElement(child)) {
+            return {
+              ...child,
+              props: {
+                ...child.props,
+                className: `${
+                  child.props.className ? `${child.props.className} ` : ''
+                }keen-slider__slide`,
+              },
+            }
+          }
+          return child
+        })}
       </div>
+      {slider && (
+        <div className={cn(s.positionIndicatorsContainer)}>
+          {[...Array(slider.details().size).keys()].map((idx) => {
+            return (
+              <button
+                key={idx}
+                className={cn(s.positionIndicator, {
+                  [s.positionIndicatorActive]: currentSlide === idx,
+                })}
+                onClick={() => {
+                  slider.moveToSlideRelative(idx)
+                }}
+              >
+                <div className={s.dot} />
+              </button>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 98264a46c..80c103b24 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -1,8 +1,8 @@
 .root {
-  @apply relative grid items-start gap-8 grid-cols-1;
+  @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
 
   @screen lg {
-    @apply grid-cols-12 pt-10;
+    @apply grid-cols-12;
   }
 }
 
@@ -17,24 +17,18 @@
   }
 
   @screen lg {
-    @apply mx-0 col-span-7;
+    @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
   }
 }
 
 .squareBg {
-  @apply absolute inset-0 bg-violet z-0;
-  max-height: 250px;
-
-  @screen md {
-    @apply inset-20;
-    max-height: 500px;
-  }
+  @apply absolute inset-0 bg-violet z-0 h-full;
 }
 
 .nameBox {
-  @apply absolute top-6 left-10 z-10;
+  @apply absolute top-6 left-6 z-20;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -46,20 +40,19 @@
     @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
   }
 
-  @screen md {
+  @screen lg {
     & .name,
     & .price {
-      @apply bg-violet-light text-white;
+      @apply bg-hover-1 text-white;
     }
   }
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
 
   @screen lg {
-    @apply col-span-5;
-    padding-top: 5rem;
+    @apply col-span-5 pl-12 pt-20;
   }
 }
 
@@ -68,20 +61,18 @@
 }
 
 .img {
-  @apply w-full h-full object-cover;
-
-  @screen md {
-    height: 100%;
-    margin-top: -2.75rem;
-  }
-
-  @screen lg {
-    height: 100%;
-    margin-top: -8%;
-  }
+  @apply w-full h-auto max-h-full object-cover;
 }
 
 .button {
   min-width: 300px;
   text-align: center;
 }
+
+.wishlistButton {
+  @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+
+  @screen lg {
+    @apply right-12 text-white bg-violet;
+  }
+}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 1ae8b91cc..cfa70bd11 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -2,14 +2,16 @@ import { FC, useState, useEffect } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import { isDesktop } from '@lib/browser'
+
+import s from './ProductView.module.css'
+import { Heart } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
+
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { getProductOptions } from '../helpers'
-import s from './ProductView.module.css'
 
 interface Props {
   className?: string
@@ -22,17 +24,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
   const [loading, setLoading] = useState(false)
-  const [validMedia, setValidMedia] = useState(false)
 
   const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
 
-  useEffect(() => {
-    setValidMedia(isDesktop())
-  }, [])
-
   const addToCart = async () => {
     setLoading(true)
     try {
@@ -48,7 +45,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   }
 
   return (
-    <Container>
+    <Container className="max-w-none w-full" clean>
       <NextSeo
         title={product.name}
         description={product.description}
@@ -91,12 +88,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
-
-          {!validMedia && (
-            <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
-              <img src="/slider-arrows.png" />
-            </div>
-          )}
         </div>
 
         <div className={s.sidebar}>
@@ -146,6 +137,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
             </div>
           </section>
         </div>
+
+        {/* TODO make it work */}
+        <div className={s.wishlistButton}>
+          <Heart />
+        </div>
       </div>
     </Container>
   )
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index cd6bd4b83..ae37771ad 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -1,6 +1,6 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-100 ease-in-out
+  items-center justify-center cursor-pointer transition duration-150 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 
   & > span {
@@ -13,7 +13,7 @@
 }
 
 .color {
-  @apply text-black transition duration-100 ease-in-out;
+  @apply text-black transition duration-150 ease-in-out;
 
   &:hover {
     @apply text-black;
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 582c781b3..f037d8486 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -5,10 +5,11 @@ interface Props {
   className?: string
   children?: any
   el?: HTMLElement
+  clean?: boolean
 }
 
-const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-8xl px-12', className)
+const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
+  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index 5d75cee84..ad600ec83 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -1,26 +1,28 @@
-import cn from 'classnames'
 import React, { FC } from 'react'
-import s from './Hero.module.css'
 import { Container } from '@components/ui'
+import { RightArrow } from '@components/icon'
 interface Props {
   className?: string
   headline: string
   description: string
 }
 
-const Hero: FC<Props> = ({ headline, description, className }) => {
-  const rootClassName = cn('bg-black py-12', className)
+const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <div className={rootClassName}>
-      <Container>
-        <div className="max-w-xl">
-          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
-            {headline}
-          </h2>
-          <p className="mt-5 text-xl leading-7 text-gray-400">{description}</p>
+    <Container>
+      <div className="mx-auto grid grid-cols-2 bg-black py-32">
+        <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+          {headline}
+        </h2>
+        <div className="flex flex-col justify-between">
+          <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
+          <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
+            <span>Read it here</span>
+            <RightArrow width="20" heigh="20" className="ml-1" />
+          </a>
         </div>
-      </Container>
-    </div>
+      </div>
+    </Container>
   )
 }
 
diff --git a/package.json b/package.json
index f8d321ab4..7625d24a0 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
+    "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "next": "^9.5.6-canary.12",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 986ccedbe..a814e9a65 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import '@assets/main.css'
+import 'keen-slider/keen-slider.min.css'
 
 // To be removed
 import 'animate.css'
diff --git a/pages/index.tsx b/pages/index.tsx
index 96939beca..bd97b1d32 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -63,7 +63,7 @@ export default function Home({
   }, [])
 
   return (
-    <div className="mt-3">
+    <div>
       <Grid>
         {featured.slice(0, 3).map(({ node }, i) => (
           <ProductCard
@@ -121,7 +121,7 @@ export default function Home({
       </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
         <div className="pr-3 w-48 relative">
-          <div className="sticky top-2">
+          <div className="sticky top-32">
             <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
                 All Categories
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ef5bb95c..b1d46ff6b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,8 @@ module.exports = {
         secondary: 'var(--secondary)',
         'secondary-2': 'var(--secondary-2)',
         hover: 'var(--hover)',
+        'hover-1': 'var(--hover-1)',
+        'hover-2': 'var(--hover-2)',
         'accents-0': 'var(--accents-0)',
         'accents-1': 'var(--accents-1)',
         'accents-2': 'var(--accents-2)',
@@ -41,6 +43,10 @@ module.exports = {
         primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
       },
+      boxShadow: {
+        magical:
+          'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
+      },
     },
   },
   variants: {},
diff --git a/yarn.lock b/yarn.lock
index e9605bf3c..270517ea4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5109,6 +5109,11 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+keen-slider@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
+  integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
+
 keycode@^2.1.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"