diff --git a/assets/global.css b/assets/global.css
index 6f4a9297f..eccfd84e7 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -2,8 +2,9 @@
 
 :root {
   --bg-primary: white;
+  --bg-primary-hover: rgba(0, 0, 0, 0.075);
+  --bg-primary-accent: #f1f3f5;
   --bg-secondary: black;
-  --bg-primary-accent: rgba(0, 0, 0, 0.075);
 
   --text-primary: black;
   --text-secondary: white;
@@ -14,7 +15,8 @@
 [data-theme='dark'] {
   --bg-primary: black;
   --bg-secondary: white;
-  --bg-primary-accent: rgba(255, 255, 255, 0.075);
+  --bg-primary-hover: rgba(255, 255, 255, 0.075);
+  --bg-primary-accent: #111;
 
   --text-primary: white;
   --text-secondary: black;
diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css
index 17715c7dc..6165b05ed 100644
--- a/components/cart/CartItem/CartItem.module.css
+++ b/components/cart/CartItem/CartItem.module.css
@@ -1,6 +1,6 @@
 .quantity {
   appearance: textfield;
-  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
+  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black;
 }
 
 .quantity::-webkit-outer-spin-button,
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 05a19c50b..77f3d719e 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -56,8 +56,8 @@ const CartItem = ({
   return (
     <li className="flex flex-row space-x-6 py-6">
       <div className="h-12 w-12 bg-violet"></div>
-      <div className="flex-1 flex flex-col justify-between">
-        <span>{item.name}</span>
+      <div className="flex-1 flex flex-col justify-between text-primary">
+        <span className="font-bold mb-3">{item.name}</span>
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
             <Minus width={18} height={18} />
@@ -76,7 +76,7 @@ const CartItem = ({
           </button>
         </div>
       </div>
-      <div className="flex flex-col justify-between space-y-2">
+      <div className="flex flex-col justify-between space-y-2 text-primary">
         <span>{price}</span>
         <button
           className="flex justify-end"
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 3927a08a1..0212209d2 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -38,7 +38,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn('h-full flex flex-col', {
-        'bg-black text-white': isEmpty,
+        'bg-white text-black': isEmpty,
         'bg-red text-white': error,
         'bg-green text-white': success,
       })}
diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
index 75ee278ba..f8aa6ba4d 100644
--- a/components/core/Featurebar/Featurebar.module.css
+++ b/components/core/Featurebar/Featurebar.module.css
@@ -1,5 +1,5 @@
 .separator {
-  @apply mx-3 bg-gray-400;
+  @apply mx-3 bg-secondary;
   width: 1px;
   height: 20px;
 }
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 035d0858c..1a2aae7be 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(
-    'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
+    'hidden py-2 px-6 bg-primary-accent text-primary text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent',
     className
   )
   return (
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index 8a26653b5..413c97e42 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 text-gray-600 placeholder-accent-4 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accent-4 pr-10;
   min-width: 300px;
 }
 
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index d98c8bc62..1c86a87f1 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-accent-2 text-gray-600 w-full',
+        'relative rounded-lg text-sm bg-primary-accent text-primary w-full',
         className
       )}
     >
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 7e7bcb4fc..d6af699e1 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -5,7 +5,7 @@ import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
 }
@@ -34,9 +34,11 @@ const UserNav: FC<Props> = ({ className }) => {
             </span>
           )}
         </li>
-        <li className={s.item}>
-          <Heart />
-        </li>
+        <Link href="/wishlist">
+          <li className={s.item}>
+            <Heart />
+          </li>
+        </Link>
         <li className={s.item}>
           <Avatar />
         </li>
diff --git a/components/icon/Minus.tsx b/components/icon/Minus.tsx
index 48614cf2d..f41aa3cf0 100644
--- a/components/icon/Minus.tsx
+++ b/components/icon/Minus.tsx
@@ -3,7 +3,7 @@ const Minus = ({ ...props }) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M5 12H19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/icon/Plus.tsx b/components/icon/Plus.tsx
index bb0da6b1f..1fca1ac9d 100644
--- a/components/icon/Plus.tsx
+++ b/components/icon/Plus.tsx
@@ -3,14 +3,14 @@ const Plus = ({ ...props }) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
       <path
         d="M12 5V19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M5 12H19"
-        stroke="black"
+        stroke="currentColor"
         stroke-width="1.5"
         stroke-linecap="round"
         stroke-linejoin="round"
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 5f4b7a354..50e1c7e81 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -44,7 +44,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
   return (
     <Container>
-      <div className="relative flex flex-row items-start overflow-hidden fit">
+      <div className="relative flex flex-row items-start overflow-hidden fit my-12">
         <div className="absolute top-0 left-0 z-50">
           <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
             {product.name}
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
index 7311788ef..19c107197 100644
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@@ -1,7 +1,7 @@
 .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;
+  p-0 shadow-none border-gray-200 border box-border;
 }
 
 .active.size {
@@ -9,7 +9,7 @@
 }
 
 .root:hover {
-  @apply transform scale-110 bg-primary-accent;
+  @apply transform scale-110 bg-primary-hover;
 }
 
 .colorViolet {
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 5135a4237..f60c71039 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -1,11 +1,12 @@
 .root {
   @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
   bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
-  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
+  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
+  border border-transparent;
 }
 
 .root:hover {
-  @apply bg-gray-800;
+  @apply bg-primary-accent text-primary border border-secondary;
 }
 
 .root:focus {
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index 534270063..5d75cee84 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 const Hero: FC<Props> = ({ headline, description, className }) => {
-  const rootClassName = cn('bg-black py-12 px-4 md:px-6', className)
+  const rootClassName = cn('bg-black py-12', className)
   return (
     <div className={rootClassName}>
       <Container>
diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx
index a864185b1..dfe62e01a 100644
--- a/components/ui/Logo/Logo.tsx
+++ b/components/ui/Logo/Logo.tsx
@@ -6,12 +6,12 @@ const Logo = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="32" height="32" rx="16" fill="black" />
+    <rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="white"
+      fill="var(--bg-primary)"
     />
   </svg>
 )
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 540654549..0f2c0ea7f 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -72,8 +72,8 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-md">
-                    <div className="h-full flex flex-col text-primary bg-primary   shadow-xl overflow-y-auto">
+                  <div className="h-full w-screen max-w-lg">
+                    <div className="h-full flex flex-col text-primary bg-primary-accent shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>
diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css
new file mode 100644
index 000000000..6c1311952
--- /dev/null
+++ b/components/wishlist/WishlistCard/WishlistCard.module.css
@@ -0,0 +1,21 @@
+.root {
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
+
+  &:nth-child(3n + 1) {
+    & .productBg {
+      @apply bg-violet;
+    }
+  }
+
+  &:nth-child(3n + 2) {
+    & .productBg {
+      @apply bg-pink;
+    }
+  }
+
+  &:nth-child(3n + 3) {
+    & .productBg {
+      @apply bg-blue;
+    }
+  }
+}
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
new file mode 100644
index 000000000..f257c2a8e
--- /dev/null
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import { Trash } from '@components/icon'
+import s from './WishlistCard.module.css'
+
+interface Props {
+  className?: string
+  children?: any
+  data?: ProductData
+}
+
+interface ProductData {
+  name: string
+  images: any
+  prices: any
+  path: string
+}
+
+const WishlistCard: FC<Props> = ({ className, data }) => {
+  return (
+    <div className={s.root}>
+      <div className={`col-span-3 ${s.productBg}`} />
+      <div className="col-span-7">
+        <h3 className="text-2xl mb-2">Jacket</h3>
+        <p className="mb-4">
+          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+        </p>
+        <button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
+          Add to cart
+        </button>
+      </div>
+      <div className="col-span-2 flex flex-col justify-between">
+        <div className="flex justify-end font-bold">$ 50.00</div>
+        <div className="flex justify-end">
+          <Trash />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WishlistCard
diff --git a/components/wishlist/WishlistCard/index.ts b/components/wishlist/WishlistCard/index.ts
new file mode 100644
index 000000000..ef572805f
--- /dev/null
+++ b/components/wishlist/WishlistCard/index.ts
@@ -0,0 +1 @@
+export { default } from './WishlistCard'
diff --git a/components/wishlist/index.ts b/components/wishlist/index.ts
new file mode 100644
index 000000000..470e6682c
--- /dev/null
+++ b/components/wishlist/index.ts
@@ -0,0 +1 @@
+export { default as WishlistCard } from './WishlistCard'
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index b3b33246e..3084e5e47 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -2,6 +2,8 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import { Layout } from '@components/core'
 import { Container } from '@components/ui'
+import { WishlistCard } from '@components/wishlist'
+
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
@@ -19,9 +21,6 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <Container>
-      <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
-        My Wishlist
-      </h2>
       <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
@@ -35,7 +34,16 @@ export default function Home({
             ))}
           </ul>
         </div>
-        <div className="col-span-8">Items.</div>
+        <div className="col-span-8">
+          <h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
+            My Wishlist
+          </h2>
+          <div className="group flex flex-col">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <WishlistCard />
+            ))}
+          </div>
+        </div>
         <div className="col-span-2">
           <ul>
             <li className="py-1 text-primary font-bold tracking-wide">
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f193a039..4f605d5fa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
         'accent-1': '#FAFAFA',
         'accent-2': '#F1F3F5',
         'accent-4': '#888',
+        'accent-8': '#111111',
         violet: '#7928CA',
         pink: '#FF0080',
         cyan: '#50E3C2',
@@ -26,6 +27,7 @@ module.exports = {
         primary: 'var(--bg-primary)',
         secondary: 'var(--bg-secondary)',
         'primary-accent': 'var(--bg-primary-accent)',
+        'primary-hover': 'var(--bg-primary-hover)',
       },
       textColor: {
         base: 'var(--text-primary)',