diff --git a/packages/app/src/pages/@mobile-views/player/index.jsx b/packages/app/src/pages/@mobile-views/player/index.jsx
index 305e6452..eb3c204f 100755
--- a/packages/app/src/pages/@mobile-views/player/index.jsx
+++ b/packages/app/src/pages/@mobile-views/player/index.jsx
@@ -4,7 +4,7 @@ import classnames from "classnames"
 import { Icons } from "@components/Icons"
 import SeekBar from "@components/Player/SeekBar"
 import Controls from "@components/Player/Controls"
-import ExtraActions from "@components/Player/ExtraActions"
+import Actions from "@components/Player/Actions"
 
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 import RGBStringToValues from "@utils/rgbToValues"
@@ -12,102 +12,96 @@ import RGBStringToValues from "@utils/rgbToValues"
 import "./index.less"
 
 const ServiceIndicator = (props) => {
-    if (!props.service) {
-        return null
-    }
+	if (!props.service) {
+		return null
+	}
 
-    switch (props.service) {
-        case "tidal": {
-            return <div className="service_indicator">
-                <Icons.SiTidal /> Playing from Tidal
-            </div>
-        }
-        default: {
-            return null
-        }
-    }
+	switch (props.service) {
+		case "tidal": {
+			return (
+				<div className="service_indicator">
+					<Icons.SiTidal /> Playing from Tidal
+				</div>
+			)
+		}
+		default: {
+			return null
+		}
+	}
 }
 
 const AudioPlayer = (props) => {
-    const [playerState] = usePlayerStateContext()
+	const [playerState] = usePlayerStateContext()
 
-    React.useEffect(() => {
-        if (app.currentDragger) {
-            app.currentDragger.setBackgroundColorValues(RGBStringToValues(playerState.track_manifest?.cover_analysis?.rgb))
-        }
+	React.useEffect(() => {
+		if (app.currentDragger) {
+			app.currentDragger.setBackgroundColorValues(
+				RGBStringToValues(
+					playerState.track_manifest?.cover_analysis?.rgb,
+				),
+			)
+		}
+	}, [playerState.track_manifest?.cover_analysis])
 
-    }, [playerState.track_manifest?.cover_analysis])
+	const {
+		title,
+		album,
+		artist,
+		service,
+		lyricsEnabled,
+		cover_analysis,
+		cover,
+	} = playerState.track_manifest ?? {}
 
-    const {
-        title,
-        album,
-        artist,
-        service,
-        lyricsEnabled,
-        cover_analysis,
-        cover,
-    } = playerState.track_manifest ?? {}
+	const playing = playerState.playback_status === "playing"
+	const stopped = playerState.playback_status === "stopped"
 
-    const playing = playerState.playback_status === "playing"
-    const stopped = playerState.playback_status === "stopped"
+	const titleText = !playing && stopped ? "Stopped" : (title ?? "Untitled")
+	const subtitleText = `${artist} | ${album?.title ?? album}`
 
-    const titleText = (!playing && stopped) ? "Stopped" : (title ?? "Untitled")
-    const subtitleText = `${artist} | ${album?.title ?? album}`
+	return (
+		<div
+			className={classnames("mobile-player_wrapper", {
+				cover_light: cover_analysis?.isLight,
+			})}
+			style={{
+				"--cover_isLight": cover_analysis?.isLight,
+			}}
+		>
+			<div className="mobile-player">
+				<ServiceIndicator service={service} />
 
-    return <div
-        className={classnames(
-            "mobile_media_player_wrapper",
-            {
-                "cover_light": cover_analysis?.isLight,
-            }
-        )}
-        style={{
-            "--cover_isLight": cover_analysis?.isLight,
-        }}
-    >
-        <div className="mobile_media_player">
-            <ServiceIndicator
-                service={service}
-            />
+				<div
+					className="mobile-player-cover"
+					style={{
+						backgroundImage: `url(${cover ?? "/assets/no_song.png"})`,
+					}}
+				/>
 
-            <div
-                className="cover"
-                style={{
-                    backgroundImage: `url(${cover ?? "/assets/no_song.png"})`,
-                }}
-            />
+				<div className="mobile-player-header">
+					<div className="mobile-player-info">
+						<div className="mobile-player-info-title">
+							<h1>{titleText}</h1>
+						</div>
+						<div className="mobile-player-info-subTitle">
+							<span>{subtitleText}</span>
+						</div>
+					</div>
+				</div>
 
-            <div className="header">
-                <div className="info">
-                    <div className="title">
-                        <h2>
-                            {
-                                titleText
-                            }
-                        </h2>
-                    </div>
-                    <div className="subTitle">
-                        <div className="artist">
-                            <h3>
-                                {subtitleText}
-                            </h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
+				<Controls />
 
-            <Controls />
+				<SeekBar
+					stopped={playerState.playback_status === "stopped"}
+					playing={playerState.playback_status === "playing"}
+					streamMode={playerState.livestream_mode}
+					disabled={playerState.control_locked}
+				/>
 
-            <SeekBar
-                stopped={playerState.playback_status === "stopped"}
-                playing={playerState.playback_status === "playing"}
-                streamMode={playerState.livestream_mode}
-                disabled={playerState.control_locked}
-            />
-
-            <ExtraActions />
-        </div>
-    </div>
+				<Actions />
+			</div>
+		</div>
+	)
 }
 
-export default AudioPlayer
\ No newline at end of file
+export default AudioPlayer
diff --git a/packages/app/src/pages/@mobile-views/player/index.less b/packages/app/src/pages/@mobile-views/player/index.less
index 40cf24cc..880817ce 100755
--- a/packages/app/src/pages/@mobile-views/player/index.less
+++ b/packages/app/src/pages/@mobile-views/player/index.less
@@ -1,199 +1,184 @@
 @top_controls_height: 55px;
 
-.mobile_media_player_wrapper {
-    position: relative;
+.mobile-player_wrapper {
+	position: relative;
 
-    z-index: 320;
+	z-index: 320;
 
-    display: flex;
+	display: flex;
 
-    flex-direction: column;
+	flex-direction: column;
 
-    height: 100%;
-    width: 100%;
+	height: 100%;
+	width: 100%;
 
-    .mobile_media_player_background {
-        position: absolute;
+	margin-bottom: 30px;
 
-        z-index: 320;
+	.mobile-player_background {
+		position: absolute;
 
-        top: 0;
-        left: 0;
+		z-index: 320;
 
-        width: 100%;
-        height: 100%;
+		top: 0;
+		left: 0;
 
-        background-color: rgba(var(--cover_averageValues), 0.4);
-    }
+		width: 100%;
+		height: 100%;
+
+		background-color: rgba(var(--cover_averageValues), 0.4);
+	}
 }
 
-.mobile_media_player {
-    position: relative;
+.mobile-player {
+	position: relative;
 
-    display: inline-flex;
-    flex-direction: column;
+	display: inline-flex;
+	flex-direction: column;
 
-    align-items: flex-start;
-    justify-content: center;
+	align-items: flex-start;
+	justify-content: center;
 
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 
-    gap: 10px;
+	gap: 10px;
 
-    transition: all 150ms ease-out;
+	transition: all 150ms ease-out;
 
-    z-index: 330;
+	z-index: 330;
 
-    .service_indicator {
-        color: var(--text-color);
+	.service_indicator {
+		color: var(--text-color);
 
-        background-color: var(--background-color-accent);
-        padding: 7px;
-        border-radius: 8px;
+		background-color: var(--background-color-accent);
+		padding: 7px;
+		border-radius: 8px;
 
-        font-size: 0.9rem;
-    }
+		font-size: 0.9rem;
+	}
 
-    .cover {
-        position: relative;
+	.mobile-player-cover {
+		position: relative;
 
-        z-index: 320;
+		z-index: 320;
 
-        margin: auto;
+		margin: auto;
 
-        width: 100%;
-        height: 100%;
+		width: 100%;
+		height: 100%;
 
-        min-height: 40vh;
-        min-width: 100%;
+		min-height: 40vh;
+		min-width: 100%;
 
-        border-radius: 24px;
+		border-radius: 24px;
 
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
 
-        transition: all 0.3s ease-in-out;
+		transition: all 0.3s ease-in-out;
 
-        img {
-            width: 100%;
-            height: 100%;
+		img {
+			width: 100%;
+			height: 100%;
 
-            object-fit: cover;
-            object-position: center;
-        }
-    }
+			object-fit: cover;
+			object-position: center;
+		}
+	}
 
-    .header {
-        position: relative;
+	.mobile-player-header {
+		position: relative;
 
-        display: flex;
-        flex-direction: row;
+		display: flex;
+		flex-direction: row;
 
-        width: 100%;
+		width: 100%;
 
-        .info {
-            display: flex;
-            flex-direction: column;
+		.mobile-player-info {
+			display: flex;
+			flex-direction: column;
 
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6,
-            p,
-            span {
-                margin: 0;
-                color: var(--text-color);
-            }
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6,
+			p,
+			span {
+				margin: 0;
+				color: var(--text-color);
+			}
 
-            width: 100%;
+			width: 100%;
 
-            .title {
-                font-size: 1rem;
-                font-weight: 600;
-                color: var(--text-color);
+			.mobile-player-info-title {
+				display: flex;
+				flex-direction: row;
 
-                word-break: break-all;
+				align-items: center;
 
-                font-family: "Space Grotesk", sans-serif;
-            }
+				font-size: 1rem;
+				font-weight: 600;
 
-            .subTitle {
-                display: flex;
-                flex-direction: row;
+				word-break: break-all;
 
-                width: 100%;
+				font-family: "Space Grotesk", sans-serif;
+			}
 
-                justify-content: space-between;
+			.mobile-player-info-subTitle {
+				display: flex;
+				flex-direction: row;
 
-                .likeButton {
-                    margin-right: 20px;
-                }
+				align-items: center;
+				justify-content: space-between;
 
-                .artist {
-                    font-size: 0.6rem;
-                    font-weight: 400;
-                    color: var(--text-color);
-                }
-            }
-        }
-    }
+				font-size: 0.7rem;
+				font-weight: 400;
+			}
+		}
+	}
 
-    .player-controls {
-        .ant-btn {
-            min-width: 40px !important;
-            min-height: 40px !important;
-        }
+	.player-controls {
+		.ant-btn {
+			min-width: 40px !important;
+			min-height: 40px !important;
+		}
 
-        svg {
-            font-size: 1.2rem;
-        }
+		svg {
+			font-size: 1.2rem;
+		}
 
-        .playButton {
-            min-width: 50px !important;
-            min-height: 50px !important;
+		.playButton {
+			min-width: 50px !important;
+			min-height: 50px !important;
 
-            svg {
-                font-size: 1.6rem;
-            }
-        }
-    }
+			svg {
+				font-size: 1.6rem;
+			}
+		}
+	}
 
-    .player-seek_bar {
-        .progress {
-            .MuiSlider-root {
-                .MuiSlider-rail {
-                    height: 7px;
-                }
+	.player-seek_bar {
+		.progress {
+			.MuiSlider-root {
+				.MuiSlider-rail {
+					height: 7px;
+				}
 
-                .MuiSlider-track {
-                    height: 7px;
-                }
+				.MuiSlider-track {
+					height: 7px;
+				}
 
-                .MuiSlider-thumb {
-                    width: 5px;
-                    height: 13px;
-                    border-radius: 2px;
+				.MuiSlider-thumb {
+					width: 5px;
+					height: 13px;
+					border-radius: 2px;
 
-                    background-color: var(--background-color-contrast);
-                }
-            }
-        }
-    }
-
-    .extra_actions {
-        padding: 0 30px;
-
-        .ant-btn {
-            padding: 5px;
-
-            svg {
-                height: 23px;
-                min-width: 23px;
-            }
-        }
-    }
-}
\ No newline at end of file
+					background-color: var(--background-color-contrast);
+				}
+			}
+		}
+	}
+}