diff --git a/AdminInterface/www/mupi.php b/AdminInterface/www/mupi.php
index 7b1441fb..aa1ac6e8 100644
--- a/AdminInterface/www/mupi.php
+++ b/AdminInterface/www/mupi.php
@@ -441,6 +441,36 @@
   $CHANGE_TXT=$CHANGE_TXT."<li>Press Button delay set to ".$_POST['pressDelay']. " seconds</li>";
   $change=2;
   }
+ $playtime_changed = false;
+ if( $_POST['playtime_save'] )
+  {
+  if( !isset($data["playtimeLimit"]) || !is_array($data["playtimeLimit"]) )
+   {
+   $data["playtimeLimit"] = array(
+    "enabled" => false,
+    "resetHour" => 0,
+    "maxOverrunMinutes" => 10,
+    "limitsMinutes" => array("mon"=>60,"tue"=>60,"wed"=>60,"thu"=>60,"fri"=>60,"sat"=>60,"sun"=>60),
+   );
+   }
+  if( !isset($data["playtimeLimit"]["limitsMinutes"]) || !is_array($data["playtimeLimit"]["limitsMinutes"]) )
+   {
+   $data["playtimeLimit"]["limitsMinutes"] = array("mon"=>60,"tue"=>60,"wed"=>60,"thu"=>60,"fri"=>60,"sat"=>60,"sun"=>60);
+   }
+  $data["playtimeLimit"]["enabled"] = (isset($_POST['playtime_enabled']) && $_POST['playtime_enabled'] === '1');
+  $data["playtimeLimit"]["resetHour"] = max(0, min(23, intval($_POST['playtime_resetHour'])));
+  $data["playtimeLimit"]["maxOverrunMinutes"] = max(0, min(60, intval($_POST['playtime_maxOverrunMinutes'])));
+  $playtime_days = array('mon','tue','wed','thu','fri','sat','sun');
+  foreach( $playtime_days as $d )
+   {
+   $field = 'playtime_limit_' . $d;
+   $val = isset($_POST[$field]) ? intval($_POST[$field]) : 60;
+   $data["playtimeLimit"]["limitsMinutes"][$d] = max(0, min(1440, $val));
+   }
+  $playtime_changed = true;
+  $CHANGE_TXT = $CHANGE_TXT."<li>Playtime limit settings saved (player restarting...)</li>";
+  $change = 2;
+  }
  if( $data["shim"]["ledPin"]!=$_POST['ledPin'] && $_POST['ledPin'])
   {
   $data["shim"]["ledPin"]=$_POST['ledPin'];
@@ -569,7 +599,12 @@
    exec("sudo mv /tmp/.mupiboxconfig.json /etc/mupibox/mupiboxconfig.json");
    exec("sudo /usr/local/bin/mupibox/./setting_update.sh");
   }
-  
+ if( $playtime_changed )
+  {
+  // Player caches mupiboxconfig.json at startup via require(); restart so the new playtime values take effect.
+  exec("sudo -i -u dietpi pm2 restart spotify-control");
+  }
+
 $CHANGE_TXT=$CHANGE_TXT."</ul></div>";
 ?>
 
@@ -695,6 +730,68 @@
 		</ul>
 	</details>
 
+	<details id="playtimelimit">
+		<summary><i class="fa-solid fa-hourglass-half"></i> Daily playtime limit</summary>
+		<ul>
+			<li id="li_1">
+				<h2>About</h2>
+				<p>Caps the total daily listening time on the box. When the limit is reached, playback stops and new playback is refused until the next day. Set a day to <b>0</b> to block playback completely on that day. Settings take effect after saving (the player is restarted automatically).</p>
+			</li>
+			<li id="li_1">
+				<h2>Status</h2>
+				<?php
+				$playtime_enabled_state = ( isset($data["playtimeLimit"]["enabled"]) && $data["playtimeLimit"]["enabled"] ) ? true : false;
+				$playtime_resetHour = isset($data["playtimeLimit"]["resetHour"]) ? intval($data["playtimeLimit"]["resetHour"]) : 0;
+				$playtime_limits = isset($data["playtimeLimit"]["limitsMinutes"]) && is_array($data["playtimeLimit"]["limitsMinutes"]) ? $data["playtimeLimit"]["limitsMinutes"] : array();
+				echo '<p>Currently: <b>'.($playtime_enabled_state ? 'ENABLED' : 'DISABLED').'</b></p>';
+				?>
+				<p>Enable / disable the daily limit:</p>
+				<select name="playtime_enabled">
+					<option value="1" <?php echo $playtime_enabled_state ? 'selected' : ''; ?>>Enabled</option>
+					<option value="0" <?php echo !$playtime_enabled_state ? 'selected' : ''; ?>>Disabled</option>
+				</select>
+			</li>
+			<li id="li_1">
+				<h2>Reset hour (0 - 23)</h2>
+				<p>Hour of day at which the counter resets to 0. <b>0</b> = midnight. Use e.g. <b>4</b> if you don't want a reset to interrupt late evening listening.</p>
+				<input type="number" name="playtime_resetHour" min="0" max="23" step="1" value="<?php echo $playtime_resetHour; ?>">
+			</li>
+			<li id="li_1">
+				<h2>Grace period (minutes)</h2>
+				<p>When the daily limit is reached, allow playback to continue for up to this many additional minutes so the current track can finish naturally. The player stops at the next track boundary (for local files / radio / RSS) or at the latest when this grace runs out. <b>0</b> = stop immediately at the limit. Default: <b>10</b>. Maximum: 60.</p>
+				<?php $playtime_maxOverrunMinutes = isset($data["playtimeLimit"]["maxOverrunMinutes"]) ? intval($data["playtimeLimit"]["maxOverrunMinutes"]) : 10; ?>
+				<input type="number" name="playtime_maxOverrunMinutes" min="0" max="60" step="1" value="<?php echo $playtime_maxOverrunMinutes; ?>"> min
+			</li>
+			<li id="li_1">
+				<h2>Daily limit per weekday (minutes)</h2>
+				<p>Set <b>0</b> to block playback entirely on that day. Maximum 1440 (= 24 h).</p>
+				<table class="version">
+					<tr><th>Day</th><th>Minutes per day</th></tr>
+					<?php
+					$playtime_day_labels = array(
+						'mon' => 'Monday',
+						'tue' => 'Tuesday',
+						'wed' => 'Wednesday',
+						'thu' => 'Thursday',
+						'fri' => 'Friday',
+						'sat' => 'Saturday',
+						'sun' => 'Sunday',
+					);
+					foreach( $playtime_day_labels as $key => $label )
+						{
+						$val = isset($playtime_limits[$key]) ? intval($playtime_limits[$key]) : 60;
+						echo '<tr><td>'.$label.'</td><td><input type="number" name="playtime_limit_'.$key.'" min="0" max="1440" step="1" value="'.$val.'"> min</td></tr>';
+						}
+					?>
+				</table>
+			</li>
+			<li class="buttons">
+				<input type="hidden" name="form_id" value="37271" />
+				<input id="saveForm" class="button_text" type="submit" name="playtime_save" value="Save playtime settings" />
+			</li>
+		</ul>
+	</details>
+
 	<details id="systemsettings">
 		<summary><i class="fa-solid fa-screwdriver-wrench"></i> System settings</summary>
 		<ul>
diff --git a/config/templates/mupiboxconfig.json b/config/templates/mupiboxconfig.json
index 12d6a89a..b7991001 100644
--- a/config/templates/mupiboxconfig.json
+++ b/config/templates/mupiboxconfig.json
@@ -265,6 +265,20 @@
 		"idleDisplayOff": "10",
 		"pressDelay": "2"
 	    },
+	"playtimeLimit": {
+		"enabled": false,
+		"resetHour": 0,
+		"maxOverrunMinutes": 10,
+		"limitsMinutes": {
+			"mon": 60,
+			"tue": 60,
+			"wed": 60,
+			"thu": 60,
+			"fri": 60,
+			"sat": 60,
+			"sun": 60
+		}
+	},
 	"shim": {
 		"poweroffPin": "4",
 		"triggerPin": "17",
diff --git a/src/backend-api/src/models/mupibox-config.model.ts b/src/backend-api/src/models/mupibox-config.model.ts
index 4d3176ef..1abfe877 100644
--- a/src/backend-api/src/models/mupibox-config.model.ts
+++ b/src/backend-api/src/models/mupibox-config.model.ts
@@ -1,7 +1,10 @@
+import type { PlaytimeLimitConfig } from './playtime.model'
+
 export interface MupiboxConfig {
   spotify?: {
     disableScraperForPlaylists?: boolean
     [key: string]: unknown
   }
+  playtimeLimit?: PlaytimeLimitConfig
   [key: string]: unknown
 }
diff --git a/src/backend-api/src/models/playtime.model.ts b/src/backend-api/src/models/playtime.model.ts
new file mode 100644
index 00000000..2bf775ec
--- /dev/null
+++ b/src/backend-api/src/models/playtime.model.ts
@@ -0,0 +1,33 @@
+export type PlaytimeDayKey = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun'
+
+export type PlaytimeLimitsMinutes = Partial<Record<PlaytimeDayKey, number>>
+
+export interface PlaytimeLimitConfig {
+  enabled: boolean
+  resetHour?: number
+  maxOverrunMinutes?: number
+  limitsMinutes?: PlaytimeLimitsMinutes
+}
+
+// 'normal'  → under daily limit, playback unrestricted
+// 'grace'   → over limit, current track allowed to finish; new commands blocked
+// 'blocked' → fully stopped, frontend overlays the screen
+export type PlaytimePlayState = 'normal' | 'grace' | 'blocked'
+
+export type PlaytimeStatus = PlaytimeStatusEnabled | PlaytimeStatusDisabled
+
+export interface PlaytimeStatusDisabled {
+  enabled: false
+}
+
+export interface PlaytimeStatusEnabled {
+  enabled: true
+  state: PlaytimePlayState
+  date: string
+  dayKey: PlaytimeDayKey
+  limitMinutes: number
+  usedSeconds: number
+  remainingSeconds: number
+  graceEndsInSeconds: number
+  resetHour: number
+}
diff --git a/src/backend-api/src/server.ts b/src/backend-api/src/server.ts
index 51399c7d..de246320 100644
--- a/src/backend-api/src/server.ts
+++ b/src/backend-api/src/server.ts
@@ -10,6 +10,7 @@ import ky from 'ky'
 import xmlparser from 'xml-js'
 import { LogRequest, LogResponse } from './models/log.model'
 import type { MupiboxConfig } from './models/mupibox-config.model'
+import type { PlaytimeStatus } from './models/playtime.model'
 import { ServerConfig } from './models/server.model'
 import type { SpotifyValidationRequest, SpotifyValidationResponse } from './models/spotify-api.model'
 import { SpotifyApiService } from './services/spotify-api.service'
@@ -62,6 +63,7 @@ const wlanFile = `${configBasePath}/wlan.json`
 const monitorFile = `${configBasePath}/monitor.json`
 const albumstopFile = `${configBasePath}/albumstop.json`
 const mupihat = '/tmp/mupihat.json'
+const playtimeFile = '/tmp/playtime.json'
 const dataLock = '/tmp/.data.lock'
 const resumeLock = '/tmp/.resume.lock'
 
@@ -163,6 +165,26 @@ app.get('/api/mupihat', (_req, res) => {
   }
 })
 
+// Playback time tracking written by backend-player to /tmp/playtime.json (tmpfs).
+// Missing/unreadable file means the player hasn't ticked yet or the feature is off —
+// either way, surfaces as "disabled" so the frontend can hide the UI safely.
+app.get('/api/playtime', (_req, res) => {
+  const disabled: PlaytimeStatus = { enabled: false }
+  if (!fs.existsSync(playtimeFile)) {
+    res.json(disabled)
+    return
+  }
+  jsonfile.readFile(playtimeFile, (error, data) => {
+    if (error) {
+      console.log(`${new Date().toLocaleString()}: [MuPiBox-Server] Error /api/playtime read playtime.json`)
+      console.log(`${new Date().toLocaleString()}: [MuPiBox-Server] ${error}`)
+      res.json(disabled)
+    } else {
+      res.json(data)
+    }
+  })
+})
+
 app.get('/api/activeresume', (_req, res) => {
   if (fs.existsSync(activeresumeFile)) {
     jsonfile.readFile(activeresumeFile, (error, data) => {
diff --git a/src/backend-player/src/spotify-control.js b/src/backend-player/src/spotify-control.js
index 732da894..2f19df37 100644
--- a/src/backend-player/src/spotify-control.js
+++ b/src/backend-player/src/spotify-control.js
@@ -122,6 +122,20 @@ player.on('track-change', () => {
     cmdCall('/usr/bin/python3 /usr/local/bin/mupibox/telegram_Track_Local.py')
 })
 
+// Playtime grace period: stop at the next natural mplayer break point
+// (start of next track, or end of playlist). Spotify doesn't surface these
+// events, so for Spotify the grace timeout in playtimeTick() is the only stop trigger.
+player.on('track-change', () => {
+  if (playtimeState.state === 'grace') {
+    finalizePlaytimeBlock('next track would start during grace period')
+  }
+})
+player.on('playlist-finish', () => {
+  if (playtimeState.state === 'grace') {
+    finalizePlaytimeBlock('playlist finished during grace period')
+  }
+})
+
 setInterval(() => {
   const cmdVolume = "/usr/bin/amixer sget Master | grep 'Right:'"
   const exec = require('node:child_process').exec
@@ -180,6 +194,220 @@ const currentMeta = {
   volume: 0,
 }
 
+// === Playtime Limit (daily listening cap) ===
+// Per-weekday limit on active playback time. Configured in mupiboxconfig.json
+// under "playtimeLimit". Working state lives in /tmp (tmpfs, no SD wear);
+// a checkpoint on the SD card persists across reboots, written at most every 60s.
+// Config changes require a player restart (consistent with other config in this file).
+const PLAYTIME_DAY_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
+const PLAYTIME_DEFAULT_LIMITS = { mon: 60, tue: 60, wed: 60, thu: 60, fri: 60, sat: 60, sun: 60 }
+const PLAYTIME_WORKING_PATH = '/tmp/playtime.json'
+const PLAYTIME_CHECKPOINT_PATH = path.join(configBasePath, 'playtime-checkpoint.json')
+const PLAYTIME_CHECKPOINT_INTERVAL_MS = 60_000
+
+function readPlaytimeConfig() {
+  const raw = muPiBoxConfig?.playtimeLimit || {}
+  const resetHour = Number.isInteger(raw.resetHour) && raw.resetHour >= 0 && raw.resetHour < 24 ? raw.resetHour : 0
+  // Grace period in minutes after the limit is reached during which playback may
+  // continue (current track allowed to finish). 0 = stop immediately at the limit.
+  const maxOverrunMinutes =
+    Number.isInteger(raw.maxOverrunMinutes) && raw.maxOverrunMinutes >= 0 && raw.maxOverrunMinutes <= 60
+      ? raw.maxOverrunMinutes
+      : 10
+  return {
+    enabled: raw.enabled === true,
+    resetHour,
+    maxOverrunMinutes,
+    limitsMinutes: { ...PLAYTIME_DEFAULT_LIMITS, ...(raw.limitsMinutes || {}) },
+  }
+}
+
+// Reset-hour shifts when "today" begins. With resetHour=4, Sunday 02:00 still counts as Saturday.
+function getLogicalDay(now, resetHour) {
+  const shifted = new Date(now.getTime() - resetHour * 3600 * 1000)
+  const y = shifted.getFullYear()
+  const m = String(shifted.getMonth() + 1).padStart(2, '0')
+  const d = String(shifted.getDate()).padStart(2, '0')
+  return { dateStr: `${y}-${m}-${d}`, dayKey: PLAYTIME_DAY_KEYS[shifted.getDay()] }
+}
+
+function isActuallyPlaying() {
+  if (!currentMeta.currentPlayer) return false
+  if (currentMeta.currentPlayer === 'spotify') return currentMeta.pause === false
+  if (currentMeta.currentPlayer === 'mplayer') return currentMeta.playing === true
+  return false
+}
+
+// state machine: 'normal' (under limit) → 'grace' (over limit, current track finishing) → 'blocked' (stopped)
+const playtimeState = {
+  date: '',
+  dayKey: 'mon',
+  usedSeconds: 0,
+  state: 'normal',
+  graceEndsAt: null,
+}
+let playtimeLastCheckpointAt = 0
+let playtimeLastCheckpointSeconds = -1
+
+function loadPlaytimeCheckpoint() {
+  try {
+    if (!fs.existsSync(PLAYTIME_CHECKPOINT_PATH)) return
+    const data = JSON.parse(fs.readFileSync(PLAYTIME_CHECKPOINT_PATH, 'utf8'))
+    const today = getLogicalDay(new Date(), readPlaytimeConfig().resetHour)
+    if (data && data.date === today.dateStr) {
+      playtimeState.date = data.date
+      playtimeState.dayKey = data.dayKey || today.dayKey
+      playtimeState.usedSeconds = Number(data.usedSeconds) || 0
+      // console.log so it shows even when logLevel='error' (the default)
+      console.log(
+        `${new Date().toLocaleString()}: [Playtime] Resumed counter: ${playtimeState.usedSeconds}s for ${playtimeState.date}`,
+      )
+    }
+  } catch (e) {
+    console.error(`${new Date().toLocaleString()}: [Playtime] Failed to load checkpoint:`, e)
+  }
+}
+
+function writePlaytimeWorking() {
+  const cfg = readPlaytimeConfig()
+  if (!cfg.enabled) {
+    fs.writeFile(PLAYTIME_WORKING_PATH, JSON.stringify({ enabled: false }), () => {})
+    return
+  }
+  const limit = cfg.limitsMinutes[playtimeState.dayKey] ?? 60
+  const graceEndsInSeconds =
+    playtimeState.graceEndsAt !== null ? Math.max(0, Math.ceil((playtimeState.graceEndsAt - Date.now()) / 1000)) : 0
+  const payload = {
+    enabled: true,
+    state: playtimeState.state,
+    date: playtimeState.date,
+    dayKey: playtimeState.dayKey,
+    limitMinutes: limit,
+    usedSeconds: playtimeState.usedSeconds,
+    remainingSeconds: Math.max(0, limit * 60 - playtimeState.usedSeconds),
+    graceEndsInSeconds,
+    resetHour: cfg.resetHour,
+  }
+  fs.writeFile(PLAYTIME_WORKING_PATH, JSON.stringify(payload), () => {})
+}
+
+function writePlaytimeCheckpoint() {
+  const payload = {
+    date: playtimeState.date,
+    dayKey: playtimeState.dayKey,
+    usedSeconds: playtimeState.usedSeconds,
+  }
+  fs.writeFile(PLAYTIME_CHECKPOINT_PATH, JSON.stringify(payload), (err) => {
+    if (err) log.error(`${new Date().toLocaleString()}: [Playtime] Failed to write checkpoint:`, err)
+  })
+  playtimeLastCheckpointAt = Date.now()
+  playtimeLastCheckpointSeconds = playtimeState.usedSeconds
+}
+
+// Used by the catch-all to decide whether to refuse new play/resume/skip commands.
+// During grace, the *current* track is allowed to finish but no new playback may start.
+function isPlaytimeBlocked() {
+  return playtimeState.state === 'grace' || playtimeState.state === 'blocked'
+}
+
+// Transition to fully-stopped state. Called from the tick on grace timeout, from the
+// mplayer track-change/playlist-finish handlers, or directly when grace=0.
+function finalizePlaytimeBlock(reason) {
+  // console.log so it shows even when logLevel='error' (the default)
+  console.log(`${new Date().toLocaleString()}: [Playtime] Finalizing block (${reason})`)
+  playtimeState.state = 'blocked'
+  playtimeState.graceEndsAt = null
+  try {
+    stop()
+  } catch (e) {
+    console.error(`${new Date().toLocaleString()}: [Playtime] Error stopping playback:`, e)
+  }
+  writePlaytimeCheckpoint()
+}
+
+// Commands that *start or resume* playback. These get blocked when the daily cap is hit.
+// Pause/stop/volume/system commands are NOT blocked — those should always work.
+function isPlayInitiatingCommand(command) {
+  if (command.name?.includes('spotify:')) return true
+  if (
+    command.dir &&
+    (command.dir.includes('library') ||
+      command.dir.includes('radio') ||
+      command.dir.includes('rss') ||
+      command.dir.includes('say/'))
+  ) {
+    return true
+  }
+  if (['play', 'next', 'previous', 'seek+30', 'seek-30'].includes(command.name)) return true
+  if (command.name?.startsWith('seekpos:')) return true
+  return false
+}
+
+function playtimeTick() {
+  const cfg = readPlaytimeConfig()
+  if (!cfg.enabled) {
+    if (playtimeState.state !== 'normal' || playtimeState.graceEndsAt !== null) {
+      playtimeState.state = 'normal'
+      playtimeState.graceEndsAt = null
+    }
+    writePlaytimeWorking()
+    return
+  }
+  const now = new Date()
+  const today = getLogicalDay(now, cfg.resetHour)
+  // Day rollover: reset counter and state
+  if (today.dateStr !== playtimeState.date) {
+    playtimeState.date = today.dateStr
+    playtimeState.dayKey = today.dayKey
+    playtimeState.usedSeconds = 0
+    playtimeState.state = 'normal'
+    playtimeState.graceEndsAt = null
+    writePlaytimeCheckpoint()
+    console.log(`${now.toLocaleString()}: [Playtime] New day: ${today.dateStr} (${today.dayKey})`)
+  }
+  // Increment counter only when actually playing
+  if (isActuallyPlaying()) {
+    playtimeState.usedSeconds++
+  }
+  // State transitions
+  const limit = cfg.limitsMinutes[today.dayKey] ?? 60
+  const limitSeconds = limit * 60
+  const limitReached = playtimeState.usedSeconds >= limitSeconds
+  if (limitReached) {
+    if (playtimeState.state === 'normal') {
+      // Just-reached transition
+      const overrunMs = cfg.maxOverrunMinutes * 60 * 1000
+      if (overrunMs > 0) {
+        playtimeState.state = 'grace'
+        playtimeState.graceEndsAt = Date.now() + overrunMs
+        console.log(
+          `${now.toLocaleString()}: [Playtime] Daily limit reached (${limit} min for ${today.dayKey}). Entering grace period (max ${cfg.maxOverrunMinutes} min until current track ends).`,
+        )
+        writePlaytimeCheckpoint()
+      } else {
+        finalizePlaytimeBlock(`limit reached (${limit} min, no grace configured)`)
+      }
+    } else if (playtimeState.state === 'grace') {
+      if (playtimeState.graceEndsAt !== null && Date.now() >= playtimeState.graceEndsAt) {
+        finalizePlaytimeBlock(`grace period expired (${cfg.maxOverrunMinutes} min)`)
+      }
+    }
+    // else 'blocked': stay blocked
+  }
+  // Working state: every tick (tmpfs, no SD wear)
+  writePlaytimeWorking()
+  // SD checkpoint: every 60s if value changed
+  if (
+    Date.now() - playtimeLastCheckpointAt >= PLAYTIME_CHECKPOINT_INTERVAL_MS &&
+    playtimeState.usedSeconds !== playtimeLastCheckpointSeconds
+  ) {
+    writePlaytimeCheckpoint()
+  }
+}
+
+loadPlaytimeCheckpoint()
+setInterval(playtimeTick, 1000)
+
 function writeplayerstatePlay() {
   playerstate = 'play'
   fs.writeFile('/tmp/playerstate', playerstate, (err) => {
@@ -1029,6 +1257,17 @@ app.use((req, res) => {
   const command = path.parse(req.url)
   log.debug(`${nowDate.toLocaleString()}: [Spotify Control]name: ${command.name}`)
   log.debug(`${nowDate.toLocaleString()}: [Spotify Control]dir: ${command.dir}`)
+
+  // Playtime limit: refuse new playback when the daily cap is reached.
+  // Pause/stop/volume/system commands fall through normally.
+  if (isPlaytimeBlocked() && isPlayInitiatingCommand(command)) {
+    console.log(
+      `${new Date().toLocaleString()}: [Playtime] Rejected command (limit reached): name=${command.name} dir=${command.dir}`,
+    )
+    res.status(423).send({ status: 'blocked', error: 'playtime_limit_reached' })
+    return
+  }
+
   /*this is the first command to be received. It always includes the device id encoded in between two /*/
   /*check this if we need to transfer the playback to a new device*/
   if (command.name.includes('spotify:')) {
diff --git a/src/frontend-box/src/app/app.component.html b/src/frontend-box/src/app/app.component.html
index 212bf92f..fbc30220 100644
--- a/src/frontend-box/src/app/app.component.html
+++ b/src/frontend-box/src/app/app.component.html
@@ -2,5 +2,9 @@
   @if (monitorOff()) {
     <div class="mupi-monitor-blocker" (click)="$event.stopPropagation()"></div>
   }
+  <mupi-playtime-chip></mupi-playtime-chip>
+  @if (playtimeBlocked()) {
+    <mupi-playtime-blocked></mupi-playtime-blocked>
+  }
   <ion-router-outlet></ion-router-outlet>
 </ion-app>
diff --git a/src/frontend-box/src/app/app.component.ts b/src/frontend-box/src/app/app.component.ts
index 794b5148..9555ad7c 100644
--- a/src/frontend-box/src/app/app.component.ts
+++ b/src/frontend-box/src/app/app.component.ts
@@ -1,27 +1,49 @@
 import { HttpClient } from '@angular/common/http'
-import { ChangeDetectionStrategy, Component, Signal } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed, effect, Signal } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'
 import { distinctUntilChanged, interval, map, Observable, switchMap } from 'rxjs'
 import { environment } from 'src/environments/environment'
+import { CurrentMediaService } from './current-media.service'
+import type { CurrentMPlayer } from './current.mplayer'
+import type { CurrentSpotify } from './current.spotify'
 import { DisplayManagerService } from './display-manager.service'
 import { ExternalPlaybackNavigatorService } from './external-playback-navigator.service'
+import { MediaService } from './media.service'
 import { Monitor } from './monitor'
+import type { PlaytimePlayState } from './playtime.model'
+import { PlaytimeService } from './playtime.service'
+import { PlaytimeBlockedOverlayComponent } from './playtime-blocked-overlay/playtime-blocked-overlay.component'
+import { PlaytimeChipComponent } from './playtime-chip/playtime-chip.component'
+import { buildResumeMedia } from './resume-builder'
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
-  imports: [IonApp, IonRouterOutlet],
+  imports: [IonApp, IonRouterOutlet, PlaytimeBlockedOverlayComponent, PlaytimeChipComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   protected monitorOff: Signal<boolean>
+  protected playtimeBlocked: Signal<boolean>
+
+  // Latest state snapshots — kept fresh by ngOnInit subscriptions on
+  // mediaService.current$/local$ so the resume-on-cap effect can read them
+  // synchronously when a transition fires.
+  private latestSpotify: CurrentSpotify | null = null
+  private latestLocal: CurrentMPlayer | null = null
+  // Track previous playtime state to detect normal -> grace/blocked transitions.
+  // 'unknown' on first tick avoids spurious save before we know the baseline.
+  private prevPlaytimeState: PlaytimePlayState | 'unknown' = 'unknown'
 
   public constructor(
     private http: HttpClient,
     _externalPlaybackNavigator: ExternalPlaybackNavigatorService,
     _displayManager: DisplayManagerService,
+    playtimeService: PlaytimeService,
+    private mediaService: MediaService,
+    private currentMediaService: CurrentMediaService,
   ) {
     this.monitorOff = toSignal(
       // 1.5s should be enough to be somewhat "recent".
@@ -32,5 +54,47 @@ export class AppComponent {
       ),
       { initialValue: false },
     )
+    this.playtimeBlocked = computed(() => {
+      const s = playtimeService.status()
+      return s.enabled === true && s.state === 'blocked'
+    })
+
+    // Keep player-state snapshots fresh. AppComponent is the root component
+    // and lives for the kiosk's lifetime, so these subscriptions never need
+    // teardown; they also cause MediaService to keep its shared polling alive.
+    this.mediaService.current$.subscribe((s) => {
+      this.latestSpotify = s
+    })
+    this.mediaService.local$.subscribe((l) => {
+      this.latestLocal = l
+    })
+
+    // Global resume-on-cap: when playtime/quiet hours transitions
+    // normal -> grace or normal -> blocked, persist a resume entry for the
+    // currently-playing Media. This is what makes "weiterhören wo aufgehört"
+    // work even if the user listens from the home page (player page unmounted,
+    // its in-page saver inert). Backend's composite-key dedup means the entry
+    // overwrites any existing resume for the same item.
+    //
+    // Gated on shouldPersistResume() so a wrong-cover-touch right before a
+    // cap doesn't leave a stale entry in the resume swiper.
+    effect(() => {
+      const status = playtimeService.status()
+      if (!status.enabled) {
+        this.prevPlaytimeState = 'unknown'
+        return
+      }
+      const cur = status.state
+      const prev = this.prevPlaytimeState
+      this.prevPlaytimeState = cur
+      if (prev === 'unknown' || prev === cur) return
+      if (cur !== 'grace' && cur !== 'blocked') return
+      if (!this.currentMediaService.shouldPersistResume()) return
+
+      const source = this.currentMediaService.get()
+      if (!source) return
+      const resumeMedia = buildResumeMedia(source, this.latestSpotify, this.latestLocal)
+      this.mediaService.addRawResume(resumeMedia)
+    })
   }
 }
diff --git a/src/frontend-box/src/app/current-media.service.ts b/src/frontend-box/src/app/current-media.service.ts
new file mode 100644
index 00000000..9096cece
--- /dev/null
+++ b/src/frontend-box/src/app/current-media.service.ts
@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject, interval } from 'rxjs'
+import type { CurrentMPlayer } from './current.mplayer'
+import type { CurrentSpotify } from './current.spotify'
+import type { Media } from './media'
+import { MediaService } from './media.service'
+
+// Tracks the Media that the player most recently started playing. Set by
+// PlayerService.playMedia / resumeMedia. Read by the global resume-on-cap
+// effect in AppComponent so we can write a resume entry when playtime / quiet
+// hours stops playback while the user is on the home screen (and the player
+// page — which historically owned saveResumeFiles — is unmounted).
+//
+// Also gates whether a resume entry should be persisted at all: a kid touching
+// the wrong cover for a few seconds shouldn't pollute the resume swiper.
+// shouldPersistResume() returns true once the kid has actively listened to
+// the current Media for RESUME_THRESHOLD_S seconds — wall-clock pauses don't
+// count, and the counter resets on every new playMedia/resumeMedia.
+@Injectable({ providedIn: 'root' })
+export class CurrentMediaService {
+  // Active-listening seconds required before a resume entry is worth keeping.
+  // 30s is the historical value from the player.page's onLeave guard; lifting
+  // it into one service so the same intent applies to the Cap-time saver in
+  // AppComponent and to any future save path.
+  private static readonly RESUME_THRESHOLD_S = 30
+
+  readonly currentMedia$ = new BehaviorSubject<Media | null>(null)
+
+  private activeSeconds = 0
+  private worthResume = false
+  private latestSpotify: CurrentSpotify | null = null
+  private latestLocal: CurrentMPlayer | null = null
+
+  constructor(mediaService: MediaService) {
+    // current$ / local$ are shareReplay'd inside MediaService — keeping a
+    // forever-subscription here is cheap and runs alongside the existing
+    // pollers (1s for mplayer, 1s/10s for Spotify depending on SDK use).
+    mediaService.current$.subscribe((s) => {
+      this.latestSpotify = s
+    })
+    mediaService.local$.subscribe((l) => {
+      this.latestLocal = l
+    })
+    interval(1000).subscribe(() => this.tick())
+  }
+
+  set(media: Media | null): void {
+    this.activeSeconds = 0
+    this.worthResume = false
+    this.currentMedia$.next(media ? { ...media } : null)
+  }
+
+  get(): Media | null {
+    return this.currentMedia$.value
+  }
+
+  clear(): void {
+    this.set(null)
+  }
+
+  // Single source of truth for "has this kid been listening long enough that
+  // we should persist a resume entry?" Used by every save path (player.page
+  // saveResumeFiles, AppComponent global cap saver) so the gating is
+  // consistent and based on actual listening, not wall-clock time.
+  shouldPersistResume(): boolean {
+    return this.worthResume
+  }
+
+  private tick(): void {
+    if (this.worthResume) return
+    if (!this.currentMedia$.value) return
+    if (!this.isActuallyPlaying()) return
+    this.activeSeconds++
+    if (this.activeSeconds >= CurrentMediaService.RESUME_THRESHOLD_S) {
+      this.worthResume = true
+    }
+  }
+
+  private isActuallyPlaying(): boolean {
+    if (this.latestLocal?.playing === true) return true
+    if (this.latestSpotify?.is_playing === true) return true
+    return false
+  }
+}
diff --git a/src/frontend-box/src/app/player.service.ts b/src/frontend-box/src/app/player.service.ts
index 42059219..0c4fa887 100644
--- a/src/frontend-box/src/app/player.service.ts
+++ b/src/frontend-box/src/app/player.service.ts
@@ -4,6 +4,7 @@ import type { ServerHttpApiConfig } from '@backend-api/server.model'
 import type { Observable } from 'rxjs'
 import { publishReplay, refCount } from 'rxjs/operators'
 import { environment } from '../environments/environment'
+import { CurrentMediaService } from './current-media.service'
 import { LogService } from './log.service'
 import type { Media } from './media'
 import { SpotifyService } from './spotify.service'
@@ -42,6 +43,7 @@ export class PlayerService {
     private http: HttpClient,
     private logService: LogService,
     private spotifyService: SpotifyService,
+    private currentMediaService: CurrentMediaService,
   ) {}
 
   getConfig() {
@@ -124,6 +126,10 @@ export class PlayerService {
       }
     }
 
+    // Snapshot the Media so the global resume-on-cap effect (AppComponent)
+    // knows what was playing if playtime/quiet stops it while the user is
+    // off the player page.
+    this.currentMediaService.set(media)
     this.sendRequest(url)
     return true
   }
@@ -148,6 +154,7 @@ export class PlayerService {
       url = `spotify/now/spotify:show:${encodeURIComponent(media.audiobookid)}:${media.resumespotifytrack_number}:${media.resumespotifyprogress_ms}`
     }
 
+    this.currentMediaService.set(media)
     this.sendRequest(url)
     return true
   }
diff --git a/src/frontend-box/src/app/player/player.page.ts b/src/frontend-box/src/app/player/player.page.ts
index 775025a1..c097129f 100644
--- a/src/frontend-box/src/app/player/player.page.ts
+++ b/src/frontend-box/src/app/player/player.page.ts
@@ -1,5 +1,6 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, DestroyRef, inject, OnInit, ViewChild } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { FormsModule } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
@@ -33,6 +34,7 @@ import {
 } from 'ionicons/icons'
 import type { Observable } from 'rxjs'
 import type { AlbumStop } from '../albumstop'
+import { CurrentMediaService } from '../current-media.service'
 import type { CurrentMPlayer } from '../current.mplayer'
 import type { CurrentSpotify } from '../current.spotify'
 import { LogService } from '../log.service'
@@ -40,6 +42,8 @@ import type { Media } from '../media'
 import { MediaService } from '../media.service'
 import { MupiHatIconComponent } from '../mupihat-icon/mupihat-icon.component'
 import { PlayerCmds, PlayerService } from '../player.service'
+import type { PlaytimePlayState } from '../playtime.model'
+import { PlaytimeService } from '../playtime.service'
 import { SpotifyService } from '../spotify.service'
 
 @Component({
@@ -86,6 +90,10 @@ export class PlayerPage implements OnInit {
   progress = 0
   shufflechanged = 0
   tmpProgressTime = 0
+  // Tracks the playtime state across ticks so we can detect transitions
+  // (normal -> grace, grace -> blocked, etc.) and persist resume on time.
+  private prevPlaytimeState: PlaytimePlayState | 'unknown' = 'unknown'
+  private destroyRef = inject(DestroyRef)
   public readonly spotify$: Observable<CurrentSpotify>
   public readonly local$: Observable<CurrentMPlayer>
 
@@ -97,6 +105,8 @@ export class PlayerPage implements OnInit {
     private navController: NavController,
     private playerService: PlayerService,
     private spotifyService: SpotifyService,
+    private playtimeService: PlaytimeService,
+    private currentMediaService: CurrentMediaService,
   ) {
     this.spotify$ = this.mediaService.current$
     this.local$ = this.mediaService.local$
@@ -130,14 +140,12 @@ export class PlayerPage implements OnInit {
       this.handleExternalPlayback()
     }
 
-    this.mediaService.current$.subscribe((spotify) => {
+    // Track player state for the lifetime of this component. takeUntilDestroyed
+    // ties the subscription to the page; previously updateProgress() and
+    // saveResumeFiles() each re-subscribed on every call without ever
+    // unsubscribing, so a 60-min listen accrued ~120 lingering subscriptions.
+    this.mediaService.current$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((spotify) => {
       this.currentPlayedSpotify = spotify
-    })
-    this.mediaService.local$.subscribe((local) => {
-      this.currentPlayedLocal = local
-    })
-    // Use cover from CurrentSpotify for Spotify content, fallback to media.cover for other types
-    this.mediaService.current$.subscribe((spotify) => {
       if (this.media?.type === 'spotify' && spotify?.item?.album?.images?.[0]?.url) {
         this.cover = spotify.item.album.images[0].url
       } else if (this.media?.cover) {
@@ -146,7 +154,10 @@ export class PlayerPage implements OnInit {
         this.cover = '../assets/images/nocover_mupi.png'
       }
     })
-    this.mediaService.albumStop$.subscribe((albumStop) => {
+    this.mediaService.local$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((local) => {
+      this.currentPlayedLocal = local
+    })
+    this.mediaService.albumStop$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((albumStop) => {
       this.albumStop = albumStop
     })
   }
@@ -170,7 +181,7 @@ export class PlayerPage implements OnInit {
       }
 
       // Subscribe to currentTrack$ to update when track info becomes available
-      this.spotifyService.currentTrack$.subscribe((track) => {
+      this.spotifyService.currentTrack$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((track) => {
         if (track && this.media.title === 'External Playback') {
           this.logService.log('[PlayerPage] Updating media object with track info:', track.name)
           this.media = this.spotifyService.createMediaFromSpotifyTrack(track)
@@ -190,13 +201,9 @@ export class PlayerPage implements OnInit {
   }
 
   updateProgress() {
-    this.mediaService.current$.subscribe((spotify) => {
-      this.currentPlayedSpotify = spotify
-    })
-    this.mediaService.local$.subscribe((local) => {
-      this.currentPlayedLocal = local
-    })
-
+    // currentPlayedSpotify / currentPlayedLocal are kept fresh by the
+    // takeUntilDestroyed-bound subscriptions in ngOnInit — read them
+    // directly here instead of re-subscribing on every tick.
     this.playing = !this.currentPlayedLocal?.pause
     if (this.playing) {
       this.resumeTimer++
@@ -204,6 +211,7 @@ export class PlayerPage implements OnInit {
         this.saveResumeFiles()
       }
     }
+    this.checkPlaytimeForResume()
 
     if (this.media.type === 'spotify') {
       const seek = this.currentPlayedSpotify?.progress_ms || 0
@@ -282,9 +290,12 @@ export class PlayerPage implements OnInit {
     if (
       (this.media.type === 'spotify' || this.media.type === 'library' || this.media.type === 'rss') &&
       !this.media.shuffle &&
-      this.resumeTimer > 30 &&
       this.playing
     ) {
+      // saveResumeFiles itself enforces the listening-time threshold via
+      // CurrentMediaService.shouldPersistResume(); the local resumeTimer > 30
+      // guard that used to live here is gone — it was page-mount-scoped and
+      // wall-clock-based, both of which the central service handles better.
       this.saveResumeFiles()
     }
     this.updateProgression = false
@@ -350,14 +361,35 @@ export class PlayerPage implements OnInit {
     }
   }
 
+  // The 30s saveResumeFiles cadence in updateProgress() is fine for normal use, but it
+  // can be up to 30 seconds stale when the playtime limit cuts playback off. Save
+  // immediately on the entry transition to grace and to blocked so the resume entry
+  // captures (close to) the actual stop position. In the last minute before the limit
+  // is reached, also save more frequently so the grace-entry save isn't itself stale.
+  private checkPlaytimeForResume() {
+    const status = this.playtimeService.status()
+    if (!status.enabled) {
+      this.prevPlaytimeState = 'unknown'
+      return
+    }
+    const cur = status.state
+    if (this.prevPlaytimeState !== 'unknown' && cur !== this.prevPlaytimeState) {
+      if (cur === 'grace' || cur === 'blocked') {
+        this.saveResumeFiles()
+      }
+    } else if (cur === 'normal' && this.playing && status.remainingSeconds <= 60 && this.resumeTimer % 5 === 0) {
+      this.saveResumeFiles()
+    }
+    this.prevPlaytimeState = cur
+  }
+
   saveResumeFiles() {
+    // Single gate for "is this listen worth persisting?" — covers the 30s
+    // updateProgress cadence, the on-leave save, and the cap-transition save.
+    // Resets on every new playMedia/resumeMedia, counts only active playback.
+    if (!this.currentMediaService.shouldPersistResume()) return
+
     this.resumemedia = Object.assign({}, this.media)
-    this.mediaService.current$.subscribe((spotify) => {
-      this.currentPlayedSpotify = spotify
-    })
-    this.mediaService.local$.subscribe((local) => {
-      this.currentPlayedLocal = local
-    })
     if (this.resumemedia.type === 'spotify' && this.resumemedia?.showid) {
       this.resumemedia.resumespotifytrack_number = this.currentPlayedSpotify?.item?.track_number || 1
       this.resumemedia.resumespotifyprogress_ms = this.currentPlayedSpotify?.progress_ms || 0
diff --git a/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.html b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.html
new file mode 100644
index 00000000..09656bc8
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.html
@@ -0,0 +1,11 @@
+<div class="playtime-blocked-overlay" (click)="$event.stopPropagation()">
+  <div class="content">
+    <ion-icon name="moon-outline" class="icon" aria-hidden="true"></ion-icon>
+    <h1>Heute war genug Musik</h1>
+    <p>
+      <ion-icon name="musical-notes-outline" class="inline-icon" aria-hidden="true"></ion-icon>
+      Morgen geht's weiter
+      <ion-icon name="musical-notes-outline" class="inline-icon" aria-hidden="true"></ion-icon>
+    </p>
+  </div>
+</div>
diff --git a/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.scss b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.scss
new file mode 100644
index 00000000..a9094cdf
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.scss
@@ -0,0 +1,50 @@
+.playtime-blocked-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  user-select: none;
+  cursor: default;
+
+  .content {
+    color: #ffffff;
+    padding: 2rem;
+    max-width: 90%;
+  }
+
+  .icon {
+    font-size: 96px;
+    margin-bottom: 1.5rem;
+    opacity: 0.85;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    line-height: 1.2;
+  }
+
+  p {
+    font-size: 1.25rem;
+    opacity: 0.8;
+    margin: 0;
+    line-height: 1.3;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .inline-icon {
+    font-size: 1.4rem;
+    opacity: 0.85;
+    vertical-align: middle;
+  }
+}
diff --git a/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.ts b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.ts
new file mode 100644
index 00000000..d9e23ffb
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-blocked-overlay/playtime-blocked-overlay.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { IonIcon } from '@ionic/angular/standalone'
+import { addIcons } from 'ionicons'
+import { moonOutline, musicalNotesOutline } from 'ionicons/icons'
+
+@Component({
+  selector: 'mupi-playtime-blocked',
+  templateUrl: './playtime-blocked-overlay.component.html',
+  styleUrls: ['./playtime-blocked-overlay.component.scss'],
+  imports: [IonIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PlaytimeBlockedOverlayComponent {
+  constructor() {
+    addIcons({ moonOutline, musicalNotesOutline })
+  }
+}
diff --git a/src/frontend-box/src/app/playtime-chip/playtime-chip.component.html b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.html
new file mode 100644
index 00000000..99c60b34
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.html
@@ -0,0 +1,6 @@
+@if (visible()) {
+  <div class="playtime-chip" [attr.data-level]="level()" aria-label="Verbleibende Hörzeit">
+    <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
+    <span>{{ remainingMinutes() }} min</span>
+  </div>
+}
diff --git a/src/frontend-box/src/app/playtime-chip/playtime-chip.component.scss b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.scss
new file mode 100644
index 00000000..8f7c94b5
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.scss
@@ -0,0 +1,38 @@
+.playtime-chip {
+  position: fixed;
+  // Sit just below the typical ion-toolbar (56px in md mode) so the chip
+  // never overlaps the cloud/battery icons (home), the volume + track
+  // counter (player), or any other toolbar elements on other pages.
+  top: 64px;
+  right: 8px;
+  z-index: 9000;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  font-size: 14px;
+  font-weight: 500;
+  background: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+
+  ion-icon {
+    font-size: 16px;
+  }
+
+  &[data-level='warning'] {
+    background: rgba(255, 193, 7, 0.9);
+    color: #1a1a1a;
+  }
+
+  &[data-level='critical'] {
+    background: rgba(244, 67, 54, 0.92);
+    color: #ffffff;
+  }
+}
diff --git a/src/frontend-box/src/app/playtime-chip/playtime-chip.component.ts b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.ts
new file mode 100644
index 00000000..dab010d4
--- /dev/null
+++ b/src/frontend-box/src/app/playtime-chip/playtime-chip.component.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, computed, inject, Signal } from '@angular/core'
+import { IonIcon } from '@ionic/angular/standalone'
+import { addIcons } from 'ionicons'
+import { timeOutline } from 'ionicons/icons'
+import { PlaytimeService } from '../playtime.service'
+
+type ChipLevel = 'normal' | 'warning' | 'critical'
+
+@Component({
+  selector: 'mupi-playtime-chip',
+  templateUrl: './playtime-chip.component.html',
+  styleUrls: ['./playtime-chip.component.scss'],
+  imports: [IonIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PlaytimeChipComponent {
+  private playtimeService = inject(PlaytimeService)
+
+  protected readonly visible: Signal<boolean> = computed(() => {
+    const s = this.playtimeService.status()
+    return s.enabled === true && s.state === 'normal'
+  })
+
+  protected readonly remainingMinutes: Signal<number> = computed(() => {
+    const s = this.playtimeService.status()
+    if (s.enabled !== true) return 0
+    return Math.ceil(s.remainingSeconds / 60)
+  })
+
+  protected readonly level: Signal<ChipLevel> = computed(() => {
+    const m = this.remainingMinutes()
+    if (m < 10) return 'critical'
+    if (m < 30) return 'warning'
+    return 'normal'
+  })
+
+  constructor() {
+    addIcons({ timeOutline })
+  }
+}
diff --git a/src/frontend-box/src/app/playtime.model.ts b/src/frontend-box/src/app/playtime.model.ts
new file mode 100644
index 00000000..c9e933a5
--- /dev/null
+++ b/src/frontend-box/src/app/playtime.model.ts
@@ -0,0 +1,21 @@
+export type PlaytimeDayKey = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun'
+
+export type PlaytimePlayState = 'normal' | 'grace' | 'blocked'
+
+export type PlaytimeStatus = PlaytimeStatusEnabled | PlaytimeStatusDisabled
+
+export interface PlaytimeStatusDisabled {
+  enabled: false
+}
+
+export interface PlaytimeStatusEnabled {
+  enabled: true
+  state: PlaytimePlayState
+  date: string
+  dayKey: PlaytimeDayKey
+  limitMinutes: number
+  usedSeconds: number
+  remainingSeconds: number
+  graceEndsInSeconds: number
+  resetHour: number
+}
diff --git a/src/frontend-box/src/app/playtime.service.ts b/src/frontend-box/src/app/playtime.service.ts
new file mode 100644
index 00000000..62495164
--- /dev/null
+++ b/src/frontend-box/src/app/playtime.service.ts
@@ -0,0 +1,26 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable, inject, Signal } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { catchError, of, switchMap, timer } from 'rxjs'
+import { environment } from 'src/environments/environment'
+import type { PlaytimeStatus } from './playtime.model'
+
+// Polled by chip + overlay + player page. Endpoint just reads /tmp/playtime.json
+// (tmpfs), so 5s is fine and gives snappy state transitions in the UI.
+const POLL_INTERVAL_MS = 5_000
+
+@Injectable({ providedIn: 'root' })
+export class PlaytimeService {
+  private http = inject(HttpClient)
+
+  readonly status: Signal<PlaytimeStatus> = toSignal(
+    timer(0, POLL_INTERVAL_MS).pipe(
+      switchMap(() =>
+        this.http
+          .get<PlaytimeStatus>(`${environment.backend.apiUrl}/playtime`)
+          .pipe(catchError(() => of<PlaytimeStatus>({ enabled: false }))),
+      ),
+    ),
+    { initialValue: { enabled: false } as PlaytimeStatus },
+  )
+}
diff --git a/src/frontend-box/src/app/resume-builder.ts b/src/frontend-box/src/app/resume-builder.ts
new file mode 100644
index 00000000..e5952189
--- /dev/null
+++ b/src/frontend-box/src/app/resume-builder.ts
@@ -0,0 +1,36 @@
+import type { CurrentMPlayer } from './current.mplayer'
+import type { CurrentSpotify } from './current.spotify'
+import type { Media } from './media'
+
+// Builds a resume-shaped Media from the Media that started playback plus the
+// most recent player state. Mirrors the field-mapping that lived inline in
+// player.page.ts:saveResumeFiles so both the in-page saver and the global
+// resume-on-cap effect produce identical entries (which lets the backend's
+// composite-key dedup overwrite cleanly instead of duplicating).
+export function buildResumeMedia(
+  source: Media,
+  spotify: CurrentSpotify | null | undefined,
+  local: CurrentMPlayer | null | undefined,
+): Media {
+  const resume: Media = { ...source }
+
+  if (resume.type === 'spotify' && resume.showid) {
+    resume.resumespotifytrack_number = spotify?.item?.track_number || 1
+    resume.resumespotifyprogress_ms = spotify?.progress_ms || 0
+    resume.resumespotifyduration_ms = spotify?.item?.duration_ms || 0
+  } else if (resume.type === 'spotify') {
+    resume.resumespotifytrack_number = spotify?.item?.track_number || 0
+    resume.resumespotifyprogress_ms = spotify?.progress_ms || 0
+    resume.resumespotifyduration_ms = spotify?.item?.duration_ms || 0
+  } else if (resume.type === 'library') {
+    resume.resumelocalalbum = resume.category
+    resume.resumelocalcurrentTracknr = local?.currentTracknr || 0
+    resume.resumelocalprogressTime = local?.progressTime || 0
+  } else if (resume.type === 'rss') {
+    resume.resumerssprogressTime = local?.progressTime || 0
+  }
+
+  resume.category = 'resume'
+  resume.index = undefined
+  return resume
+}