diff --git a/packages/app/src/components/PlaylistItem/index.jsx b/packages/app/src/components/PlaylistItem/index.jsx
new file mode 100644
index 00000000..7347190a
--- /dev/null
+++ b/packages/app/src/components/PlaylistItem/index.jsx
@@ -0,0 +1,58 @@
+import React from "react"
+import classnames from "classnames"
+
+import { ImageViewer } from "components"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export default (props) => {
+    const [coverHover, setCoverHover] = React.useState(false)
+    const { playlist } = props
+
+    const onClick = () => {
+        if (typeof props.onClick === "function") {
+            return props.onClick(playlist)
+        }
+
+        return app.location.push(`/play/${playlist._id}`)
+    }
+
+    const onClickPlay = (e) => {
+        e.stopPropagation()
+
+        app.cores.player.startPlaylist(playlist.list)
+    }
+
+    return <div
+        id={playlist._id}
+        key={props.key}
+        className={classnames(
+            "playlistItem",
+            {
+                "cover-hovering": coverHover
+            }
+        )}
+    >
+        <div
+            className="playlistItem_cover"
+            onMouseEnter={() => setCoverHover(true)}
+            onMouseLeave={() => setCoverHover(false)}
+            onClick={onClickPlay}
+        >
+            <div className="playlistItem_cover_mask">
+                <Icons.MdPlayArrow />
+            </div>
+
+            <ImageViewer
+                src={playlist.cover ?? playlist.thumbnail ?? "/assets/no_song.png"}
+            />
+        </div>
+
+        <div className="playlistItem_info">
+            <div className="playlistItem_info_title" onClick={onClick}>
+                <h1>{playlist.title}</h1>
+            </div>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/packages/app/src/components/PlaylistItem/index.less b/packages/app/src/components/PlaylistItem/index.less
new file mode 100644
index 00000000..252cc846
--- /dev/null
+++ b/packages/app/src/components/PlaylistItem/index.less
@@ -0,0 +1,153 @@
+.playlistItem {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+
+    cursor: pointer;
+
+    width: 100%;
+    height: 140px;
+
+    border-radius: 12px;
+
+    transition: all 0.2s ease-in-out;
+
+    background-color: var(--background-color-accent);
+
+    &.cover-hovering {
+        .playlistItem_cover {
+            transform: scale(1.1);
+
+            .playlistItem_cover_mask {
+                opacity: 1;
+            }
+        }
+
+        .playlistItem_info {
+            transform: translateX(10px);
+        }
+    }
+
+    .playlistItem_cover {
+        position: relative;
+
+        height: 140px;
+
+        transition: all 0.2s ease-in-out;
+
+        img {
+            width: 140px;
+            height: 140px;
+
+            object-fit: cover;
+            border-radius: 8px;
+
+            background-color: black;
+
+            z-index: 50
+        }
+
+        .playlistItem_cover_mask {
+            position: absolute;
+
+            top: 0;
+            left: 0;
+
+            display: flex;
+
+            align-items: center;
+            justify-content: center;
+
+            width: 100%;
+            height: 100%;
+
+            opacity: 0;
+
+            transition: all 0.2s ease-in-out;
+
+            z-index: 55;
+
+            background-color: rgba(var(--layoutBackgroundColor), 0.6);
+            color: var(--text-color);
+
+            font-size: 3rem;
+        }
+    }
+
+    .playlistItem_info {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+
+        padding: 10px;
+
+        max-width: calc(100% - 10vh);
+
+        transition: all 0.2s ease-in-out;
+
+        .playlistItem_info_title {
+            font-size: 1rem;
+            font-weight: 600;
+
+            color: var(--background-color-contrast);
+            font-family: "Space Grotesk", sans-serif;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            h1,
+            h4 {
+                overflow: hidden;
+
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                margin: 0;
+            }
+        }
+
+        // set userPreview to the bottom of the playlistItem_info
+        .userPreview {
+            margin-top: auto;
+            font-size: 0.8rem;
+
+            h1 {
+                font-size: 0.8rem;
+            }
+
+            .avatar {
+                display: flex;
+                flex-direction: row;
+
+                align-items: center;
+                justify-content: center;
+
+                width: 30px;
+                height: 30px;
+            }
+        }
+    }
+
+    .playlistItem_actions {
+        display: flex;
+        flex-direction: column;
+
+        align-self: flex-end;
+        justify-self: flex-end;
+
+        justify-content: center;
+        align-items: center;
+
+        height: 100%;
+
+        padding: 10px;
+
+        .ant-btn {
+            svg {
+                margin: 0 !important;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/pages/music/components/feed/index.jsx b/packages/app/src/pages/music/components/feed/index.jsx
index 536d4d10..9abb7220 100755
--- a/packages/app/src/pages/music/components/feed/index.jsx
+++ b/packages/app/src/pages/music/components/feed/index.jsx
@@ -4,7 +4,6 @@ import classnames from "classnames"
 import { Translation } from "react-i18next"
 
 import Searcher from "components/Searcher"
-import { ImageViewer } from "components"
 import { Icons, createIconRender } from "components/Icons"
 
 import { WithPlayerContext } from "contexts/WithPlayerContext"
@@ -13,6 +12,7 @@ import FeedModel from "models/feed"
 import PlaylistModel from "models/playlists"
 
 import MusicTrack from "components/MusicTrack"
+import PlaylistItem from "components/PlaylistItem"
 
 import "./index.less"
 
@@ -146,56 +146,7 @@ const PlaylistsList = (props) => {
     </div>
 }
 
-const PlaylistItem = (props) => {
-    const [coverHover, setCoverHover] = React.useState(false)
-    const { playlist } = props
 
-    const onClick = () => {
-        if (typeof props.onClick === "function") {
-            return props.onClick(playlist)
-        }
-
-        return app.location.push(`/play/${playlist._id}`)
-    }
-
-    const onClickPlay = (e) => {
-        e.stopPropagation()
-
-        app.cores.player.startPlaylist(playlist.list)
-    }
-
-    return <div
-        id={playlist._id}
-        key={props.key}
-        className={classnames(
-            "playlistItem",
-            {
-                "cover-hovering": coverHover
-            }
-        )}
-    >
-        <div
-            className="playlistItem_cover"
-            onMouseEnter={() => setCoverHover(true)}
-            onMouseLeave={() => setCoverHover(false)}
-            onClick={onClickPlay}
-        >
-            <div className="playlistItem_cover_mask">
-                <Icons.MdPlayArrow />
-            </div>
-
-            <ImageViewer
-                src={playlist.cover ?? playlist.thumbnail ?? "/assets/no_song.png"}
-            />
-        </div>
-
-        <div className="playlistItem_info">
-            <div className="playlistItem_info_title" onClick={onClick}>
-                <h1>{playlist.title}</h1>
-            </div>
-        </div>
-    </div>
-}
 
 const ResultGroupsDecorators = {
     "playlists": {
@@ -215,7 +166,8 @@ const ResultGroupsDecorators = {
             return <MusicTrack
                 key={props.key}
                 track={props.item}
-                onClick={() => app.cores.player.start(props.item)}
+                onClickPlayBtn={() => app.cores.player.start(props.item)}
+                onClick={() => app.location.push(`/play/${props.item._id}`)}
             />
         }
     }
diff --git a/packages/app/src/pages/music/components/feed/index.less b/packages/app/src/pages/music/components/feed/index.less
index e6992a7f..080e5392 100755
--- a/packages/app/src/pages/music/components/feed/index.less
+++ b/packages/app/src/pages/music/components/feed/index.less
@@ -84,160 +84,6 @@
     }
 }
 
-.playlistItem {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-
-    cursor: pointer;
-
-    width: 100%;
-    height: 140px;
-
-    border-radius: 12px;
-
-    transition: all 0.2s ease-in-out;
-
-    background-color: var(--background-color-accent);
-
-    &.cover-hovering {
-        .playlistItem_cover {
-            transform: scale(1.1);
-
-            .playlistItem_cover_mask {
-                opacity: 1;
-            }
-        }
-
-        .playlistItem_info {
-            transform: translateX(10px);
-        }
-    }
-
-    .playlistItem_cover {
-        position: relative;
-
-        height: 140px;
-
-        transition: all 0.2s ease-in-out;
-
-        img {
-            width: 140px;
-            height: 140px;
-
-            object-fit: cover;
-            border-radius: 8px;
-
-            background-color: black;
-
-            z-index: 50
-        }
-
-        .playlistItem_cover_mask {
-            position: absolute;
-
-            top: 0;
-            left: 0;
-
-            display: flex;
-
-            align-items: center;
-            justify-content: center;
-
-            width: 100%;
-            height: 100%;
-
-            opacity: 0;
-
-            transition: all 0.2s ease-in-out;
-
-            z-index: 55;
-
-            background-color: rgba(var(--layoutBackgroundColor), 0.6);
-            color: var(--text-color);
-
-            font-size: 3rem;
-        }
-    }
-
-    .playlistItem_info {
-        display: flex;
-        flex-direction: column;
-
-        width: 100%;
-
-        padding: 10px;
-
-        max-width: calc(100% - 10vh);
-
-        transition: all 0.2s ease-in-out;
-
-        .playlistItem_info_title {
-            font-size: 1rem;
-            font-weight: 600;
-
-            color: var(--background-color-contrast);
-            font-family: "Space Grotesk", sans-serif;
-
-            &:hover {
-                text-decoration: underline;
-            }
-
-            h1,
-            h4 {
-                overflow: hidden;
-
-                text-overflow: ellipsis;
-                white-space: nowrap;
-
-                margin: 0;
-            }
-        }
-
-        // set userPreview to the bottom of the playlistItem_info
-        .userPreview {
-            margin-top: auto;
-            font-size: 0.8rem;
-
-            h1 {
-                font-size: 0.8rem;
-            }
-
-            .avatar {
-                display: flex;
-                flex-direction: row;
-
-                align-items: center;
-                justify-content: center;
-
-                width: 30px;
-                height: 30px;
-            }
-        }
-    }
-
-    .playlistItem_actions {
-        display: flex;
-        flex-direction: column;
-
-        align-self: flex-end;
-        justify-self: flex-end;
-
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-
-        padding: 10px;
-
-        .ant-btn {
-            svg {
-                margin: 0 !important;
-            }
-        }
-    }
-}
-
 .music-explorer_search_results {
     display: grid;
 
@@ -270,7 +116,6 @@
         grid-template-columns: 1fr;
     }
 
-
     &.no_results {
         display: flex;
         flex-direction: column;