diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css
index ca0e8cc6c..879184dac 100644
--- a/components/wishlist/WishlistCard/WishlistCard.module.css
+++ b/components/wishlist/WishlistCard/WishlistCard.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2;
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2 transition duration-100 ease-in-out;
 
   &:nth-child(3n + 1) {
     & .productBg {
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index f89d2e47f..a5c9ad59f 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -6,6 +6,7 @@ import { Layout } from '@components/core'
 import { Heart } from '@components/icons'
 import { Container, Text } from '@components/ui'
 import { WishlistCard } from '@components/wishlist'
+import { Transition } from '@headlessui/react'
 
 export async function getStaticProps({
   preview,
@@ -27,22 +28,45 @@ export default function Wishlist() {
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
           {isEmpty ? (
-            <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
-              <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
-                <Heart className="absolute" />
-              </span>
-              <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-                Your wishlist is empty
-              </h2>
-              <p className="text-accents-6 px-10 text-center pt-2">
-                Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-              </p>
-            </div>
+            <Transition show>
+              <Transition.Child
+                enter="transition-opacity ease-linear duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition-opacity ease-linear duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
+                  <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
+                    <Heart className="absolute" />
+                  </span>
+                  <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
+                    Your wishlist is empty
+                  </h2>
+                  <p className="text-accents-6 px-10 text-center pt-2">
+                    Biscuit oat cake wafer icing ice cream tiramisu pudding
+                    cupcake.
+                  </p>
+                </div>
+              </Transition.Child>
+            </Transition>
           ) : (
-            data &&
-            data.items?.map((item) => (
-              <WishlistCard key={item.id} item={item} />
-            ))
+            <Transition show>
+              {data &&
+                data.items?.map((item) => (
+                  <Transition.Child
+                    enter="transition-opacity ease-linear duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="transition-opacity ease-linear duration-300"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                  >
+                    <WishlistCard key={item.id} item={item} />
+                  </Transition.Child>
+                ))}
+            </Transition>
           )}
         </div>
       </div>