diff --git a/packages/app/src/components/BackgroundMediaPlayer/index.jsx b/packages/app/src/components/BackgroundMediaPlayer/index.jsx
index 136f60f5..bb149143 100644
--- a/packages/app/src/components/BackgroundMediaPlayer/index.jsx
+++ b/packages/app/src/components/BackgroundMediaPlayer/index.jsx
@@ -124,7 +124,9 @@ export default class BackgroundMediaPlayer extends React.Component {
                         >
                             <h4>
                                 {
-                                    this.state.plabackState === "stopped" ? "Nothing is playing" : (this.state.currentPlaying?.title ?? "Untitled")
+                                    this.state.plabackState === "stopped" ? "Nothing is playing" : <>
+                                        {`${this.state.currentPlaying?.title} - ${this.state.currentPlaying?.artist}` ?? "Untitled"}
+                                    </>
                                 }
                             </h4>
                         </Marquee>
@@ -134,10 +136,17 @@ export default class BackgroundMediaPlayer extends React.Component {
                             <Icons.MdAlbum />
 
                             {
-                                this.state.plabackState === "stopped" ? "Nothing is playing" : (this.state.currentPlaying?.title ?? "Untitled")
+                                this.state.plabackState === "stopped" ? "Nothing is playing" : <>
+                                    {this.state.currentPlaying?.title ?? "Untitled"}
+                                </>
                             }
                         </h4>
                     }
+                    {/* {
+                        this.state.expanded && <p>
+                            {this.state.currentPlaying?.artist ?? "Unknown artist"}
+                        </p>
+                    } */}
                 </div>
             </div>
             <div
diff --git a/packages/app/src/components/BackgroundMediaPlayer/index.less b/packages/app/src/components/BackgroundMediaPlayer/index.less
index 0c7341c1..8e5ad676 100644
--- a/packages/app/src/components/BackgroundMediaPlayer/index.less
+++ b/packages/app/src/components/BackgroundMediaPlayer/index.less
@@ -48,6 +48,10 @@
 
                 font-size: 1rem;
             }
+
+            p {
+                height: 100%;
+            }
         }
 
         .background_media_player__controls {
@@ -68,7 +72,8 @@
         .background_media_player__title {
             color: var(--text-color-black);
 
-            h4 {
+            h4,
+            p {
                 color: var(--text-color-black);
             }
         }
@@ -137,24 +142,36 @@
     }
 
     .background_media_player__title {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: center;
+
         max-height: 67px;
 
+        height: 100%;
+
         transition: all 150ms ease-in-out;
 
         color: var(--text-color-white);
 
         width: 100%;
+        height: 100%;
 
         overflow: hidden;
 
+        //gap: 16px;
+
         h4 {
-            line-height: 20px;
+            line-height: 1rem;
 
             font-size: 0.8rem;
             font-weight: 600;
 
             margin: 0 0 0 10px;
 
+            height: 100%;
+
             overflow: hidden;
 
             white-space: nowrap;
@@ -164,6 +181,22 @@
             color: var(--text-color-white);
         }
 
+        p {
+            line-height: 0.8rem;
+
+            font-size: 0.7rem;
+            font-weight: 400;
+
+            margin: 0 0 0 10px;
+
+            height: 0;
+
+            justify-content: flex-end;
+
+            font-family: "Space Grotesk", sans-serif;
+            color: var(--text-color-white);
+        }
+
         .marquee-container {
             width: 100%;