diff --git a/src-tauri/src/audio.rs b/src-tauri/src/audio.rs
index ffd9f792..37ebb53c 100644
--- a/src-tauri/src/audio.rs
+++ b/src-tauri/src/audio.rs
@@ -5412,12 +5412,30 @@ pub async fn audio_preview_play(
 
 #[tauri::command]
 pub fn audio_preview_stop(app: AppHandle, state: State<'_, AudioEngine>) {
+    preview_stop_inner(&app, &state, true);
+}
+
+/// Like `audio_preview_stop` but leaves the main sink paused even if it had
+/// been paused by `preview_pause_main`. Used by the player-bar Stop button so
+/// "stop everything" actually goes silent — without this the engine would
+/// auto-resume main playback the moment the preview ends and the user perceives
+/// the click as having no effect.
+#[tauri::command]
+pub fn audio_preview_stop_silent(app: AppHandle, state: State<'_, AudioEngine>) {
+    preview_stop_inner(&app, &state, false);
+}
+
+fn preview_stop_inner(app: &AppHandle, state: &AudioEngine, resume_main: bool) {
     state.preview_gen.fetch_add(1, Ordering::SeqCst);
     let sink = state.preview_sink.lock().unwrap().take();
     let id = state.preview_song_id.lock().unwrap().take();
     if let Some(s) = sink { s.stop(); }
 
-    preview_resume_main(&state);
+    if resume_main {
+        preview_resume_main(state);
+    } else {
+        state.preview_main_resume.store(false, Ordering::Release);
+    }
 
     if let Some(id) = id {
         app.emit("audio:preview-end", PreviewEndPayload {
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 43bd58b7..0f42c993 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -4599,6 +4599,7 @@ pub fn run() {
             audio::audio_play_radio,
             audio::audio_preview_play,
             audio::audio_preview_stop,
+            audio::audio_preview_stop_silent,
             audio::audio_set_crossfade,
             audio::audio_set_gapless,
             audio::audio_set_normalization,
diff --git a/src/components/AlbumTrackList.tsx b/src/components/AlbumTrackList.tsx
index eb32d088..c454b826 100644
--- a/src/components/AlbumTrackList.tsx
+++ b/src/components/AlbumTrackList.tsx
@@ -160,7 +160,7 @@ const TrackRow = React.memo(function TrackRow({
               className={`playlist-suggestion-preview-btn${isPreviewing ? ' is-previewing' : ''}`}
               onClick={e => {
                 e.stopPropagation();
-                usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'albums');
+                usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'albums');
               }}
               data-tooltip={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
               aria-label={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
diff --git a/src/components/PlayerBar.tsx b/src/components/PlayerBar.tsx
index a1e097bd..0a21307e 100644
--- a/src/components/PlayerBar.tsx
+++ b/src/components/PlayerBar.tsx
@@ -25,6 +25,7 @@ import { usePlaybackDelayPress } from '../hooks/usePlaybackDelayPress';
 import PlaybackDelayModal from './PlaybackDelayModal';
 import PlaybackScheduleBadge from './PlaybackScheduleBadge';
 import { usePlaybackScheduleRemaining } from '../utils/playbackScheduleFormat';
+import { usePreviewStore } from '../store/previewStore';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -144,6 +145,8 @@ export default function PlayerBar() {
   const transportAnchorRef = useRef<HTMLDivElement>(null);
   const playSlotRef = useRef<HTMLSpanElement>(null);
   const scheduleRemaining = usePlaybackScheduleRemaining();
+  const isPreviewing = usePreviewStore(s => s.previewingId !== null);
+  const previewingTrack = usePreviewStore(s => s.previewingTrack);
 
   const isRadio = !!currentRadio;
 
@@ -176,8 +179,15 @@ export default function PlayerBar() {
     [currentRadio?.coverArt, currentRadio?.id]
   );
   const radioCoverKey = currentRadio?.coverArt ? coverArtCacheKey(`ra-${currentRadio.id}`, 128) : '';
-  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
-  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
+  // Preview takes visual priority over the queued track in the player-bar info
+  // cell, but only when not in radio mode (radio has its own meta layout).
+  const showPreviewMeta = isPreviewing && !isRadio && previewingTrack !== null;
+  const displayCoverArt = showPreviewMeta ? previewingTrack!.coverArt : currentTrack?.coverArt;
+  const displayTitle = showPreviewMeta ? previewingTrack!.title : (currentTrack?.title ?? t('player.noTitle'));
+  const displayArtist = showPreviewMeta ? previewingTrack!.artist : (currentTrack?.artist ?? '—');
+
+  const coverSrc = useMemo(() => displayCoverArt ? buildCoverArtUrl(displayCoverArt, 128) : '', [displayCoverArt]);
+  const coverKey = displayCoverArt ? coverArtCacheKey(displayCoverArt, 128) : '';
 
   const handleVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setVolume(parseFloat(e.target.value));
@@ -196,7 +206,7 @@ export default function PlayerBar() {
   const playerBarContent = (
     <>
     <footer
-      className={`player-bar ${floatingPlayerBar ? 'floating' : ''}`}
+      className={`player-bar ${floatingPlayerBar ? 'floating' : ''}${showPreviewMeta ? ' is-previewing' : ''}`}
       style={floatingPlayerBar ? floatingStyle : undefined}
       role="region"
       aria-label={t('player.regionLabel')}
@@ -205,9 +215,9 @@ export default function PlayerBar() {
       {/* Track Info */}
       <div className="player-track-info">
         <div
-          className={`player-album-art-wrap ${currentTrack && !isRadio ? 'clickable' : ''}`}
-          onClick={() => !isRadio && currentTrack && toggleFullscreen()}
-          data-tooltip={!isRadio && currentTrack ? t('player.openFullscreen') : undefined}
+          className={`player-album-art-wrap ${currentTrack && !isRadio && !showPreviewMeta ? 'clickable' : ''}`}
+          onClick={() => !isRadio && !showPreviewMeta && currentTrack && toggleFullscreen()}
+          data-tooltip={!isRadio && !showPreviewMeta && currentTrack ? t('player.openFullscreen') : undefined}
         >
           {isRadio ? (
             currentRadio?.coverArt ? (
@@ -222,25 +232,30 @@ export default function PlayerBar() {
                 <Cast size={20} />
               </div>
             )
-          ) : currentTrack?.coverArt ? (
+          ) : displayCoverArt ? (
             <CachedImage
               className="player-album-art"
               src={coverSrc}
               cacheKey={coverKey}
-              alt={`${currentTrack.album} Cover`}
+              alt={showPreviewMeta ? `${previewingTrack!.title} Cover` : `${currentTrack?.album ?? ''} Cover`}
             />
           ) : (
             <div className="player-album-art-placeholder">
               <Music size={22} />
             </div>
           )}
-          {currentTrack && !isRadio && (
+          {currentTrack && !isRadio && !showPreviewMeta && (
             <div className="player-art-expand-hint" aria-hidden="true">
               <Maximize2 size={16} />
             </div>
           )}
         </div>
         <div className="player-track-meta">
+          {showPreviewMeta && (
+            <span className="player-preview-label" aria-label={t('player.previewActive')}>
+              {t('player.previewLabel')}
+            </span>
+          )}
           <MarqueeText
             text={isRadio
               ? (radioMeta.currentTitle
@@ -248,22 +263,22 @@ export default function PlayerBar() {
                       ? `${radioMeta.currentArtist} — ${radioMeta.currentTitle}`
                       : radioMeta.currentTitle)
                   : (currentRadio?.name ?? '—'))
-              : (currentTrack?.title ?? t('player.noTitle'))}
+              : displayTitle}
             className="player-track-name"
-            style={{ cursor: !isRadio && currentTrack?.albumId ? 'pointer' : 'default' }}
-            onClick={() => !isRadio && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
+            style={{ cursor: !isRadio && !showPreviewMeta && currentTrack?.albumId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && !showPreviewMeta && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
           />
           <MarqueeText
             text={isRadio
               ? (radioMeta.currentTitle && currentRadio?.name
                   ? currentRadio.name
                   : t('radio.liveStream'))
-              : (currentTrack?.artist ?? '—')}
+              : displayArtist}
             className="player-track-artist"
-            style={{ cursor: !isRadio && currentTrack?.artistId ? 'pointer' : 'default' }}
-            onClick={() => !isRadio && currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+            style={{ cursor: !isRadio && !showPreviewMeta && currentTrack?.artistId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && !showPreviewMeta && currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
           />
-          {currentTrack && !isRadio && (
+          {currentTrack && !isRadio && !showPreviewMeta && (
             <StarRating
               value={userRatingOverrides[currentTrack.id] ?? currentTrack.userRating ?? 0}
               onChange={r => { setUserRatingOverride(currentTrack.id, r); setRating(currentTrack.id, r).catch(() => {}); }}
@@ -303,7 +318,19 @@ export default function PlayerBar() {
 
       {/* Transport Controls */}
       <div className="player-buttons" ref={transportAnchorRef}>
-        <button className="player-btn player-btn-sm" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
+        <button
+          className="player-btn player-btn-sm"
+          onClick={() => {
+            if (isPreviewing) {
+              usePreviewStore.setState({ previewingId: null, previewingTrack: null, elapsed: 0 });
+              invoke('audio_preview_stop_silent').catch(() => {});
+            } else {
+              stop();
+            }
+          }}
+          aria-label={isPreviewing ? t('playlists.previewStop') : t('player.stop')}
+          data-tooltip={isPreviewing ? t('playlists.previewStop') : t('player.stop')}
+        >
           <Square size={14} fill="currentColor" />
         </button>
         <button className="player-btn" onClick={() => previous()} aria-label={t('player.prev')} data-tooltip={t('player.prev')} disabled={isRadio} style={isRadio ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
@@ -311,12 +338,27 @@ export default function PlayerBar() {
         </button>
         <span className="playback-transport-play-wrap" ref={playSlotRef}>
           <PlaybackScheduleBadge layoutAnchorRef={playSlotRef} />
+          {isPreviewing && (
+            <svg className="player-btn-preview-ring" viewBox="0 0 100 100" aria-hidden="true">
+              <circle cx="50" cy="50" r="47" pathLength="100" className="player-btn-preview-ring-track" />
+              <circle cx="50" cy="50" r="47" pathLength="100" className="player-btn-preview-ring-progress" />
+            </svg>
+          )}
           <button
-            className="player-btn player-btn-primary"
+            className={`player-btn player-btn-primary${isPreviewing ? ' is-previewing' : ''}`}
             type="button"
             {...playPauseBind}
-            aria-label={isPlaying ? t('player.pause') : t('player.play')}
-            data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
+            onClick={isPreviewing
+              ? (() => {
+                  // Visual is "stop preview"; semantics match the tracklist preview
+                  // button — preview ends, main playback auto-resumes if it was
+                  // playing before. Use regular audio_preview_stop (not _silent).
+                  usePreviewStore.setState({ previewingId: null, previewingTrack: null, elapsed: 0 });
+                  invoke('audio_preview_stop').catch(() => {});
+                })
+              : playPauseBind.onClick}
+            aria-label={isPreviewing ? t('playlists.previewStop') : isPlaying ? t('player.pause') : t('player.play')}
+            data-tooltip={isPreviewing ? t('playlists.previewStop') : isPlaying ? t('player.pause') : t('player.play')}
           >
             {scheduleRemaining != null ? (
               <span className={`player-btn-schedule-stack player-btn-schedule-stack--${scheduleRemaining.mode}`}>
@@ -325,6 +367,8 @@ export default function PlayerBar() {
                   : <Sunrise size={10} strokeWidth={2.5} />}
                 <span className="player-btn-schedule-time">{scheduleRemaining.remaining}</span>
               </span>
+            ) : isPreviewing ? (
+              <Square size={16} fill="currentColor" strokeWidth={0} />
             ) : isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" />}
           </button>
         </span>
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 0c8bce73..3cd4d9b9 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -1190,6 +1190,8 @@ export const deTranslation = {
     prev: 'Vorheriger Titel',
     play: 'Play',
     pause: 'Pause',
+    previewActive: 'Vorschau läuft',
+    previewLabel: 'Vorschau',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pause nach',
     delayStartSection: 'Start nach',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 822b7a0f..b5149151 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1196,6 +1196,8 @@ export const enTranslation = {
     prev: 'Previous Track',
     play: 'Play',
     pause: 'Pause',
+    previewActive: 'Preview playing',
+    previewLabel: 'Preview',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pause after',
     delayStartSection: 'Start after',
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 897ca12e..5849b7ee 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -1183,6 +1183,8 @@ export const esTranslation = {
     prev: 'Pista Anterior',
     play: 'Reproducir',
     pause: 'Pausa',
+    previewActive: 'Vista previa activa',
+    previewLabel: 'Vista previa',
     delayModalTitle: 'Temporizador',
     delayPauseSection: 'Pausar después de',
     delayStartSection: 'Iniciar después de',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index c1f30505..67e55593 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -1178,6 +1178,8 @@ export const frTranslation = {
     prev: 'Piste précédente',
     play: 'Lecture',
     pause: 'Pause',
+    previewActive: 'Aperçu en cours',
+    previewLabel: 'Aperçu',
     delayModalTitle: 'Minuteur',
     delayPauseSection: 'Pause après',
     delayStartSection: 'Démarrage après',
diff --git a/src/locales/nb.ts b/src/locales/nb.ts
index 0421e07b..668e7856 100644
--- a/src/locales/nb.ts
+++ b/src/locales/nb.ts
@@ -1177,6 +1177,8 @@ export const nbTranslation = {
     prev: 'Forrige spor',
     play: 'Spill av',
     pause: 'Pause',
+    previewActive: 'Forhåndsvisning spilles av',
+    previewLabel: 'Forhåndsvisning',
     delayModalTitle: 'Tidsur',
     delayPauseSection: 'Pause etter',
     delayStartSection: 'Start etter',
diff --git a/src/locales/nl.ts b/src/locales/nl.ts
index 9fc3cc02..d3a93f46 100644
--- a/src/locales/nl.ts
+++ b/src/locales/nl.ts
@@ -1177,6 +1177,8 @@ export const nlTranslation = {
     prev: 'Vorig nummer',
     play: 'Afspelen',
     pause: 'Pauzeren',
+    previewActive: 'Voorbeeld speelt af',
+    previewLabel: 'Voorbeeld',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pauzeren na',
     delayStartSection: 'Starten na',
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index 96898eab..88f59755 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -1263,6 +1263,8 @@ export const ruTranslation = {
     prev: 'Предыдущий трек',
     play: 'Играть',
     pause: 'Пауза',
+    previewActive: 'Превью воспроизводится',
+    previewLabel: 'Превью',
     delayModalTitle: 'Таймер',
     delayPauseSection: 'Пауза через',
     delayStartSection: 'Старт через',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index 587e1972..3681f551 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -1172,6 +1172,8 @@ export const zhTranslation = {
     prev: '上一首',
     play: '播放',
     pause: '暂停',
+    previewActive: '正在试听',
+    previewLabel: '试听',
     delayModalTitle: '定时',
     delayPauseSection: '多久后暂停',
     delayStartSection: '多久后开始',
diff --git a/src/pages/ArtistDetail.tsx b/src/pages/ArtistDetail.tsx
index c23421b1..bb248eea 100644
--- a/src/pages/ArtistDetail.tsx
+++ b/src/pages/ArtistDetail.tsx
@@ -738,7 +738,7 @@ export default function ArtistDetail() {
                   <button
                     type="button"
                     className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'artist'); }}
+                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'artist'); }}
                     data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                     aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                   >
diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx
index f67d7628..a922b476 100644
--- a/src/pages/Favorites.tsx
+++ b/src/pages/Favorites.tsx
@@ -694,7 +694,7 @@ export default function Favorites() {
                               <button
                                 type="button"
                                 className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                                onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'favorites'); }}
+                                onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'favorites'); }}
                                 data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                                 aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                               >
diff --git a/src/pages/PlaylistDetail.tsx b/src/pages/PlaylistDetail.tsx
index 5e4d91bd..ecaba433 100644
--- a/src/pages/PlaylistDetail.tsx
+++ b/src/pages/PlaylistDetail.tsx
@@ -938,6 +938,9 @@ export default function PlaylistDetail() {
   const startPreview = useCallback((song: SubsonicSong) => {
     usePreviewStore.getState().startPreview({
       id: song.id,
+      title: song.title,
+      artist: song.artist,
+      coverArt: song.coverArt,
       duration: song.duration,
     }, 'suggestions').catch(() => { /* engine errored — store already rolled back */ });
   }, []);
@@ -1709,7 +1712,7 @@ export default function PlaylistDetail() {
                         className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
                         onClick={e => {
                           e.stopPropagation();
-                          usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'playlists');
+                          usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'playlists');
                         }}
                         data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                         aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
diff --git a/src/pages/RandomMix.tsx b/src/pages/RandomMix.tsx
index 0acf81de..1061440e 100644
--- a/src/pages/RandomMix.tsx
+++ b/src/pages/RandomMix.tsx
@@ -471,7 +471,7 @@ export default function RandomMix() {
                       <button
                         type="button"
                         className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                        onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                        onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'randomMix'); }}
                         data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                         aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                       >
@@ -604,7 +604,7 @@ export default function RandomMix() {
                   <button
                     type="button"
                     className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'randomMix'); }}
                     data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                     aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                   >
diff --git a/src/store/previewStore.ts b/src/store/previewStore.ts
index 08093eb9..fb5519a1 100644
--- a/src/store/previewStore.ts
+++ b/src/store/previewStore.ts
@@ -4,15 +4,25 @@ import { buildStreamUrl } from '../api/subsonic';
 import { usePlayerStore } from './playerStore';
 import { useAuthStore, type TrackPreviewLocation } from './authStore';
 
+/** Minimal track info needed to surface the preview in the player bar UI. */
+export interface PreviewingTrack {
+  id: string;
+  title: string;
+  artist: string;
+  coverArt?: string;
+}
+
 interface PreviewState {
   /** Subsonic song id of the active preview, or null when nothing previews. */
   previewingId: string | null;
+  /** Currently previewing track with the metadata the player-bar UI needs. */
+  previewingTrack: PreviewingTrack | null;
   /** Seconds elapsed in the current preview window. */
   elapsed: number;
   /** Total preview window in seconds (echoes the duration_sec arg). */
   duration: number;
 
-  startPreview: (song: { id: string; duration?: number }, location: TrackPreviewLocation) => Promise<void>;
+  startPreview: (song: { id: string; title: string; artist: string; coverArt?: string; duration?: number }, location: TrackPreviewLocation) => Promise<void>;
   stopPreview: () => Promise<void>;
 
   /** Internal — called from the TauriEventBridge on `audio:preview-start`. */
@@ -27,6 +37,7 @@ const PREVIEW_VOLUME_MATCH = true;
 
 export const usePreviewStore = create<PreviewState>((set, get) => ({
   previewingId: null,
+  previewingTrack: null,
   elapsed: 0,
   duration: 30,
 
@@ -61,7 +72,12 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
       }
     }
 
-    set({ previewingId: song.id, elapsed: 0, duration: previewDuration });
+    set({
+      previewingId: song.id,
+      previewingTrack: { id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt },
+      elapsed: 0,
+      duration: previewDuration,
+    });
 
     try {
       await invoke('audio_preview_play', {
@@ -74,7 +90,7 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
     } catch (e) {
       // Roll back optimistic state on failure.
       if (get().previewingId === song.id) {
-        set({ previewingId: null, elapsed: 0 });
+        set({ previewingId: null, previewingTrack: null, elapsed: 0 });
       }
       throw e;
     }
@@ -86,12 +102,14 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
       await invoke('audio_preview_stop');
     } catch {
       /* engine will emit preview-end anyway; clear locally as fallback */
-      set({ previewingId: null, elapsed: 0 });
+      set({ previewingId: null, previewingTrack: null, elapsed: 0 });
     }
   },
 
   _onStart: (id) => {
     if (get().previewingId !== id) {
+      // Engine fired start for an id we didn't track locally — keep id but
+      // leave previewingTrack as-is (the caller's startPreview() set it).
       set({ previewingId: id, elapsed: 0 });
     }
   },
@@ -103,6 +121,6 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
 
   _onEnd: (id) => {
     if (get().previewingId !== id) return;
-    set({ previewingId: null, elapsed: 0 });
+    set({ previewingId: null, previewingTrack: null, elapsed: 0 });
   },
 }));
diff --git a/src/styles/components.css b/src/styles/components.css
index a5f5fa91..8f60a6f6 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -2321,6 +2321,78 @@ html[data-track-previews-randommix="off"]   [data-preview-loc="randomMix"]   .pl
   vertical-align: middle;
 }
 
+/* ── Preview-active state on the player bar ─────────────────────────
+   Combo of two cues so it's unmistakable that a preview is sounding:
+   1) accent top-border on the bar itself
+   2) tiny "Preview" pill above the title in the track-info cell */
+.player-bar.is-previewing {
+  box-shadow: inset 0 2px 0 0 var(--accent), 0 -1px 0 0 var(--bg-border);
+}
+
+.player-preview-label {
+  display: inline-block;
+  align-self: flex-start;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ctp-crust);
+  background: var(--accent);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-bottom: 3px;
+  line-height: 1.3;
+  user-select: none;
+}
+
+/* ── Preview-active state on the play button ────────────────────────
+   While a track preview is sounding, the player-bar play button mirrors
+   the inline preview button used in tracklists: hollow circle + chevron
+   icon + countdown ring. Click still resumes main playback (which the
+   Rust audio engine cancels the preview for, see audio.rs). */
+.player-btn-primary.is-previewing {
+  background: transparent;
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.player-btn-primary.is-previewing:hover {
+  background: var(--bg-hover, transparent);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.player-btn-preview-ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: rotate(-90deg);
+  z-index: 1;
+}
+
+.player-btn-preview-ring-track {
+  fill: none;
+  stroke: var(--ctp-overlay0);
+  stroke-width: 4;
+}
+
+.player-btn-preview-ring-progress {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: player-preview-progress var(--preview-duration, 30s) linear forwards;
+}
+
+@keyframes player-preview-progress {
+  from { stroke-dashoffset: 100; }
+  to { stroke-dashoffset: 0; }
+}
+
 /* ── Custom-minutes input with inline "min" suffix ──────────────────── */
 .playback-delay-custom__field {
   position: relative;