diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index e8b9baba8..9753b23c3 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -13,7 +13,11 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
 
   &:hover {
-    @apply text-accents-8;
+    @apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
+  }
+
+  &.heart:hover svg {
+    fill: var(--accents-9);
   }
 
   &:last-child {
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 861ea32a1..738793cf5 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -48,7 +48,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             )}
           </li>
           <Link href="/wishlist">
-            <li className={s.item}>
+            <li className={cn(s.item, s.heart)}>
               <Heart />
             </li>
           </Link>