diff --git a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
index 75db60ae..72cdae9f 100644
--- a/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
+++ b/src/workspaces/officerdev/src/apps/Music/MusicDetail.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { createContext, useContext, useState, useEffect, useRef } from 'react';
 import { useClient } from 'hooks/useClient';
 import { usePanelChannel } from 'hooks/usePanelChannel';
-import { Play, ChevronLeft, MicVocal, Volume2 } from 'lucide-react';
+import { Play, Pause, ChevronLeft, MicVocal, Volume2 } from 'lucide-react';
 import type { LayoutNode, PanelComponents } from '../../components/Workspace';
 import { WorkspaceLayout } from '../../components/Workspace';
 import { MusicHeart } from './MusicHeart';
@@ -196,6 +196,13 @@ export const MusicDetail = () => {
   const isCurrent = (albumRel: string, file: string) =>
     player.current?.albumRel === albumRel && player.current?.file === file;
 
+  // The album's play button is the dock's play button when the dock is already on this album: same
+  // useGlobal state, so it shows pause while it plays and resumes where it stopped. It only starts the
+  // album from the top when something else (or nothing) is loaded.
+  const albumLoaded = !!album && player.current?.albumRel === rel;
+  const albumPlaying = albumLoaded && player.playing;
+  const toggleAlbum = () => (albumLoaded ? player.toggle() : playCurrent(0));
+
   const crumbs = rel ? rel.split('/') : [];
 
   const Card = ({ r, name, playable }: { r: string; name: string; playable: boolean }) => (
@@ -295,10 +302,11 @@ export const MusicDetail = () => {
               <div className="mt-3 flex items-center gap-3">
                 <button
                   type="button"
-                  onClick={() => playCurrent(0)}
-                  className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground hover:scale-105"
+                  onClick={toggleAlbum}
+                  title={albumPlaying ? 'Pause' : 'Play'}
+                  className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-primary text-primary-foreground hover:scale-105"
                 >
-                  <Play size={18} className="ml-0.5" />
+                  {albumPlaying ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
                 </button>
                 <MusicHeart kind="album" favKey={rel} size={24} className="p-1" />
                 <button