diff --git a/packages/app/src/pages/play/[play_id].jsx b/packages/app/src/pages/play/[play_id].jsx
index 0049a22a..95595240 100755
--- a/packages/app/src/pages/play/[play_id].jsx
+++ b/packages/app/src/pages/play/[play_id].jsx
@@ -5,37 +5,16 @@ import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import moment from "moment"
 
+import { WithPlayerContext } from "contexts/WithPlayerContext"
+
 import { ImageViewer } from "components"
 import { Icons } from "components/Icons"
 
 import PlaylistsModel from "models/playlists"
+import MusicTrack from "components/MusicTrack"
 
 import "./index.less"
 
-const TrackItem = (props) => {
-    return <div className="track_item">
-        <div className="track_item_actions">
-            <antd.Button
-                type="primary"
-                shape="circle"
-                icon={<Icons.Play />}
-                onClick={props.onClick}
-            />
-        </div>
-        <div className="track_item_cover">
-            <ImageViewer src={props.track.thumbnail} />
-        </div>
-        <div className="track_item_details">
-            <div className="track_item_title">
-                {props.track.title}
-            </div>
-            <div className="track_item_artist">
-                {props.track.artist}
-            </div>
-        </div>
-    </div>
-}
-
 export default (props) => {
     const play_id = props.params.play_id
 
@@ -99,17 +78,19 @@ export default (props) => {
                     </div>
 
                     <div className="play_info_statistics">
-                        <div className="play_info_statistics_item">
-                            <p
-                                onClick={() => {
-                                    app.navigation.goToAccount(playlist.user.username)
-                                }}
-                            >
-                                <Icons.MdPerson />
+                        {
+                            playlist.publisher && <div className="play_info_statistics_item">
+                                <p
+                                    onClick={() => {
+                                        app.navigation.goToAccount(playlist.user.username)
+                                    }}
+                                >
+                                    <Icons.MdPerson />
 
-                                Publised by <a>{playlist.user.username}</a>
-                            </p>
-                        </div>
+                                    Publised by <a>{playlist.publisher.username}</a>
+                                </p>
+                            </div>
+                        }
                         <div className="play_info_statistics_item">
                             <p>
                                 <Icons.MdLibraryMusic /> {playlist.list.length} Tracks
@@ -130,14 +111,18 @@ export default (props) => {
             <h1>
                 <Icons.MdPlaylistPlay /> Tracks
             </h1>
-            {
-                playlist.list.map((item, index) => {
-                    return <TrackItem
-                        track={item}
-                        onClick={() => handleOnClickTrack(item)}
-                    />
-                })
-            }
+
+            <WithPlayerContext>
+                {
+                    playlist.list.map((item, index) => {
+                        return <MusicTrack
+                            order={index + 1}
+                            track={item}
+                            onClick={() => handleOnClickTrack(item)}
+                        />
+                    })
+                }
+            </WithPlayerContext>
         </div>
     </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/play/index.less b/packages/app/src/pages/play/index.less
index 85ef8a12..ace3f5be 100755
--- a/packages/app/src/pages/play/index.less
+++ b/packages/app/src/pages/play/index.less
@@ -150,84 +150,7 @@
         color: var(--text-color);
 
         padding: 20px 30px;
-    }
-}
 
-
-.track_item {
-    display: flex;
-    flex-direction: row;
-
-    align-items: center;
-
-    padding: 10px;
-    margin-bottom: 10px;
-
-    border-radius: 8px;
-
-    background-color: var(--background-color-accent);
-
-    cursor: pointer;
-
-    .track_item_actions {
-        margin-right: 10px;
-
-        .ant-btn {
-            svg {
-                margin: 0 !important;
-
-                background-color: transparent;
-            }
-
-            margin-right: 10px;
-
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-    }
-
-    .track_item_cover {
-        display: flex;
-        flex-direction: column;
-
-        align-items: center;
-        justify-content: center;
-
-        background-color: black;
-
-        border-radius: 12px;
-
-        overflow: hidden;
-
-        width: 50px;
-        height: 50px;
-
-        img {
-            width: 100%;
-            height: 100%;
-
-            object-fit: cover;
-        }
-    }
-
-    .track_item_details {
-        display: flex;
-        flex-direction: column;
-
-        margin-left: 10px;
-
-        .track_item_title {
-            font-size: 1rem;
-            font-family: "Space Grotesk", sans-serif;
-        }
-
-        .track_item_artist {
-            font-size: 0.8rem;
-        }
-    }
-
-    &:last-child {
-        margin-bottom: 0;
+        gap: 10px;
     }
 }
\ No newline at end of file