diff --git a/packages/app/src/components/LikeButton/index.jsx b/packages/app/src/components/LikeButton/index.jsx
index 766c9072..1fc6f4bd 100755
--- a/packages/app/src/components/LikeButton/index.jsx
+++ b/packages/app/src/components/LikeButton/index.jsx
@@ -4,68 +4,73 @@ import classnames from "classnames"
 import "./index.less"
 
 export default (props) => {
-    const [liked, setLiked] = React.useState(props.liked)
-    const [clicked, setClicked] = React.useState(false)
+	const [liked, setLiked] = React.useState(
+		typeof props.liked === "function" ? false : props.liked,
+	)
+	const [clicked, setClicked] = React.useState(false)
 
-    // TODO: Support handle like change on websocket event
-    if (typeof props.watchWs === "object") {
-        // useWsEvents({
-        //     [props.watchWs.event]: (data) => {
-        //         handleUpdateTrackLike(data.track_id, data.action === "liked")
-        //     }
-        // }, {
-        //     socketName: props.watchWs.socket,
-        // })
-    }
+	// TODO: Support handle like change on websocket event
+	if (typeof props.watchWs === "object") {
+		// useWsEvents({
+		//     [props.watchWs.event]: (data) => {
+		//         handleUpdateTrackLike(data.track_id, data.action === "liked")
+		//     }
+		// }, {
+		//     socketName: props.watchWs.socket,
+		// })
+	}
 
-    async function computeLikedState() {
-        if (typeof props.liked === "function") {
-            let result = await props.liked()
+	async function computeLikedState() {
+		if (props.disabled) {
+			return false
+		}
 
-            result = result.liked ?? result
+		if (typeof props.liked === "function") {
+			let result = await props.liked()
 
-            return setLiked(result)
-        }
+			result = result.liked ?? result
 
-        return setLiked(props.liked)
-    }
+			return setLiked(result)
+		}
 
-    const handleClick = () => {
-        setClicked(true)
+		return setLiked(props.liked)
+	}
 
-        setTimeout(() => {
-            setClicked(false)
-        }, 500)
+	const handleClick = () => {
+		if (props.disabled) {
+			return false
+		}
 
-        if (typeof props.onClick === "function") {
-            props.onClick()
-        }
+		setClicked(true)
 
-        setLiked(!liked)
-    }
+		setTimeout(() => {
+			setClicked(false)
+		}, 500)
 
-    React.useEffect(() => {
-        computeLikedState()
-    }, [props.liked])
+		if (typeof props.onClick === "function") {
+			props.onClick()
+		}
 
-    return <button
-        className={classnames(
-            "likeButton",
-            {
-                ["liked"]: liked,
-                ["clicked"]: clicked,
-            }
-        )}
-        onClick={handleClick}
-    >
-        {
-            !!props.ripple && <div className="ripple" />
-        }
-        <svg
-            className="heart"
-            viewBox="0 0 24 24"
-        >
-            <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
-        </svg>
-    </button>
-}
\ No newline at end of file
+		setLiked(!liked)
+	}
+
+	React.useEffect(() => {
+		computeLikedState()
+	}, [props.liked])
+
+	return (
+		<button
+			className={classnames("likeButton", {
+				["liked"]: liked,
+				["clicked"]: clicked,
+				["disabled"]: props.disabled,
+			})}
+			onClick={handleClick}
+		>
+			{!!props.ripple && <div className="ripple" />}
+			<svg className="heart" viewBox="0 0 24 24">
+				<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
+			</svg>
+		</button>
+	)
+}
diff --git a/packages/app/src/components/LikeButton/index.less b/packages/app/src/components/LikeButton/index.less
index d92aaca6..11db2727 100755
--- a/packages/app/src/components/LikeButton/index.less
+++ b/packages/app/src/components/LikeButton/index.less
@@ -1,158 +1,161 @@
-@likeAnimationDuration : .5s;
-@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1);
+@likeAnimationDuration: 0.5s;
+@likeAnimationEasing: cubic-bezier(0.7, 0, 0.3, 1);
 
 .likeButton {
-    display: flex;
+	display: flex;
 
-    align-items: center;
-    justify-content: center;
+	align-items: center;
+	justify-content: center;
 
-    color: var(--text-color);
+	color: var(--text-color);
 
-    border: none;
-    border-radius: 50%;
+	border: none;
+	border-radius: 50%;
 
-    width: 1em;
-    height: 1em;
+	width: 1em;
+	height: 1em;
 
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
 
-    z-index: 2;
+	z-index: 2;
 
-    transition: all @likeAnimationDuration @likeAnimationEasing;
+	transition: all @likeAnimationDuration @likeAnimationEasing;
 
-    background-color: transparent;
+	background-color: transparent;
 
-    &:before {
-        z-index: -1;
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1em;
-        height: 1em;
-        border-radius: inherit;
-        transition: inherit;
-    }
+	&:before {
+		z-index: -1;
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 1em;
+		height: 1em;
+		border-radius: inherit;
+		transition: inherit;
+	}
 
-    &:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1em;
-        height: 1em;
-        border-radius: inherit;
-        z-index: -1;
-    }
+	&:after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 1em;
+		height: 1em;
+		border-radius: inherit;
+		z-index: -1;
+	}
 
-    &.liked {
-        .heart {
-            >path {
-                stroke: var(--colorPrimary);
-                fill: var(--colorPrimary);
-            }
+	&.liked {
+		.heart {
+			> path {
+				stroke: var(--colorPrimary);
+				fill: var(--colorPrimary);
+			}
 
-            filter: drop-shadow(0px 0px 2px var(--colorPrimary));
-        }
-    }
+			filter: drop-shadow(0px 0px 2px var(--colorPrimary));
+		}
+	}
 
-    &.clicked {
-        .heart {
-            animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;
+	&.clicked {
+		.heart {
+			animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;
 
-            @keyframes heart-bounce {
-                40% {
-                    transform: scale(0.7);
-                }
+			@keyframes heart-bounce {
+				40% {
+					transform: scale(0.7);
+				}
 
-                0%,
-                80%,
-                100% {
-                    transform: scale(1);
-                }
-            }
-        }
-    }
+				0%,
+				80%,
+				100% {
+					transform: scale(1);
+				}
+			}
+		}
+	}
 
-    .heart {
-        position: relative;
+	&.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
 
-        cursor: pointer;
+	.heart {
+		position: relative;
 
-        >path {
-            stroke-width: 2;
-            transition: fill @likeAnimationDuration @likeAnimationEasing;
-            stroke: currentColor;
-            fill: transparent;
-        }
+		cursor: pointer;
 
-        animation: none;
+		> path {
+			stroke-width: 2;
+			transition: fill @likeAnimationDuration @likeAnimationEasing;
+			stroke: currentColor;
+			fill: transparent;
+		}
 
-        width: 1em;
-        height: 1em;
+		animation: none;
 
-        margin: 0;
+		width: 1em;
+		height: 1em;
 
-        transition: all @likeAnimationDuration @likeAnimationEasing;
-    }
+		margin: 0;
 
-    .ripple {
-        position: absolute;
+		transition: all @likeAnimationDuration @likeAnimationEasing;
+	}
 
-        height: 1em;
-        width: 1em;
+	.ripple {
+		position: absolute;
 
-        border-radius: 50%;
-        overflow: hidden;
+		height: 1em;
+		width: 1em;
 
-        z-index: 1;
+		border-radius: 50%;
+		overflow: hidden;
 
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: .4em solid var(--colorPrimary);
-            border-radius: inherit;
-            transform: scale(0);
-        }
-    }
+		z-index: 1;
+
+		&:before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			border: 0.4em solid var(--colorPrimary);
+			border-radius: inherit;
+			transform: scale(0);
+		}
+	}
 }
 
 @keyframes ripple-out {
-    from {
-        transform: scale(0);
-    }
+	from {
+		transform: scale(0);
+	}
 
-    to {
-        transform: scale(5);
-    }
+	to {
+		transform: scale(5);
+	}
 }
 
 @keyframes depress {
+	from,
+	to {
+		transform: none;
+	}
 
-    from,
-    to {
-        transform: none;
-    }
-
-    50% {
-        transform: translateY(5%) scale(0.9);
-    }
+	50% {
+		transform: translateY(5%) scale(0.9);
+	}
 }
 
 @keyframes depress-shadow {
+	from,
+	to {
+		transform: none;
+	}
 
-    from,
-    to {
-        transform: none;
-    }
-
-    50% {
-        transform: scale(0.5);
-    }
-}
\ No newline at end of file
+	50% {
+		transform: scale(0.5);
+	}
+}