diff --git a/src/backend/sources/PlayerState/NowPlayingPlayerState.ts b/src/backend/sources/PlayerState/NowPlayingPlayerState.ts
index 1874f811..60ac6120 100644
--- a/src/backend/sources/PlayerState/NowPlayingPlayerState.ts
+++ b/src/backend/sources/PlayerState/NowPlayingPlayerState.ts
@@ -1,3 +1,4 @@
+import { SourcePlayerObj } from "../../../core/Atomic.js";
 import { GenericPlayerState } from "./GenericPlayerState.js";
 
 /**
@@ -23,4 +24,10 @@ export class NowPlayingPlayerState extends GenericPlayerState {
         return super.getOrphanedInterval();
     }
 
+    public getApiState(): SourcePlayerObj {
+        const data = super.getApiState();
+        data.nowPlayingMode = true;
+        return data;
+    }
+
 }
\ No newline at end of file
diff --git a/src/client/components/player/Player.tsx b/src/client/components/player/Player.tsx
index f32de113..73cf96e5 100644
--- a/src/client/components/player/Player.tsx
+++ b/src/client/components/player/Player.tsx
@@ -42,6 +42,7 @@ art = {},
         } = {},
         play,
         listenedDuration = 0,
+        nowPlayingMode = false,
         status: {
             calculated = '???',
             reported,
@@ -51,14 +52,17 @@ art = {},
     } = data;
 
     let durPer = null;
-    if(duration !== undefined && duration !== null && duration !== 0) {
-        if(listenedDuration === 0 || listenedDuration === null) {
-            durPer = ' (0%)';
-        } else {
-            durPer = ` (${((listenedDuration/duration) * 100).toFixed(0)}%)`;
+    if(!nowPlayingMode) {
+        if(duration !== undefined && duration !== null && duration !== 0) {
+            if(listenedDuration === 0 || listenedDuration === null) {
+                durPer = ' (0%)';
+            } else {
+                durPer = ` (${((listenedDuration/duration) * 100).toFixed(0)}%)`;
+            }
         }
     }
 
+
     const [viewMode, setViewMode] = useState('player');
 
     const toggleViewMode = useCallback(() => {
@@ -94,10 +98,10 @@ art = {},
                         <p className="subtitle">{calculated !== 'stopped' ? artists.join(' / ') : '-'}</p>
                     </div>
 
-                    <PlayerTimestamp duration={duration} indeterminate={calculated === 'playing' && data.position === undefined} current={data.position || 0} />
+                    <PlayerTimestamp duration={duration} indeterminate={(calculated === 'playing' && data.position === undefined) || nowPlayingMode} current={data.position || 0} />
                     <div className="flex">
-                        <p className="stats flex-1 text-left">Status: {capitalize(calculated)}</p>
-                        <p className="stats flex-1 text-right">Listened: {calculated !== 'stopped' && listenedDuration !== null ? `${listenedDuration.toFixed(0)}s` : '-'}{durPer}</p>
+                        <p className="stats flex-1 text-left">Status: {['unknown','playing'].includes(calculated) && nowPlayingMode ? 'Now Playing' : capitalize(calculated)}</p>
+                        <p className="stats flex-1 text-right">Listened: {nowPlayingMode !== true && calculated !== 'stopped' && listenedDuration !== null ? `${listenedDuration.toFixed(0)}s` : '-'}{durPer}</p>
                     </div>
                 </section>
                     <PlayerInfo data={data} isVisible={viewMode === 'playlist'} />
diff --git a/src/core/Atomic.ts b/src/core/Atomic.ts
index 0cda60b3..4abee445 100644
--- a/src/core/Atomic.ts
+++ b/src/core/Atomic.ts
@@ -257,6 +257,7 @@ export interface SourcePlayerObj {
     playerLastUpdatedAt: string
     position?: Second
     listenedDuration: Second
+    nowPlayingMode?: boolean
     status: {
         reported: string
         calculated: string