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/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..4a8803446 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 {
diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css
new file mode 100644
index 000000000..cfdade97c
--- /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-accent;
+
+  &: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..ae9add365
--- /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">
+          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">