diff --git a/qwen3-tts-frontend/src/pages/Audiobook.tsx b/qwen3-tts-frontend/src/pages/Audiobook.tsx
index 5a4d303..1c7817c 100644
--- a/qwen3-tts-frontend/src/pages/Audiobook.tsx
+++ b/qwen3-tts-frontend/src/pages/Audiobook.tsx
@@ -126,10 +126,10 @@ function SequentialPlayer({
   if (doneSegments.length === 0) return null
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1">
       {displayIndex !== null ? (
         <>
-          <Button size="sm" variant="outline" className="text-red-500 border-red-500 hover:bg-red-500/10 hover:text-red-500" onClick={stop}>
+          <Button size="xs" variant="ghost" className="text-red-500 hover:text-red-500 hover:bg-red-500/10" onClick={stop}>
             <Square className="h-3 w-3 mr-1 fill-current" />{t('projectCard.sequential.stop')}
           </Button>
           <span className="text-xs text-muted-foreground">
@@ -139,7 +139,7 @@ function SequentialPlayer({
           </span>
         </>
       ) : (
-        <Button size="sm" variant="outline" onClick={() => playSegment(0)}>
+        <Button size="xs" variant="ghost" className="text-muted-foreground" onClick={() => playSegment(0)}>
           <Play className="h-3 w-3 mr-1" />{t('projectCard.sequential.play', { count: doneSegments.length })}
         </Button>
       )}
@@ -1584,6 +1584,7 @@ function ChaptersPanel({
         </span>
         {hasChapters && (
           <div className="flex items-center gap-1 flex-wrap">
+            {doneCount > 0 && <SequentialPlayer segments={segments} projectId={project.id} onPlayingChange={onSequentialPlayingChange} />}
             {detail!.chapters.some(c => ['pending', 'error', 'ready'].includes(c.status)) && !isBackgroundGenerating && (
               <Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={onParseAll}>
                 {isAIMode ? <Bot className="h-3 w-3 mr-1" /> : <Wand2 className="h-3 w-3 mr-1" />}
@@ -1633,7 +1634,7 @@ function ChaptersPanel({
               <div key={ch.id} id={`ch-${ch.id}`}>
                 {/* Chapter header — flat, full-width, click to expand */}
                 <button
-                  className="w-full flex items-center gap-2 px-3 py-2.5 bg-muted/40 hover:bg-muted/70 border-b text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+                  className="sticky top-0 z-10 w-full flex items-center gap-2 px-3 py-2.5 bg-emerald-500/5 backdrop-blur-sm hover:bg-emerald-500/10 border-b text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
                   onClick={toggleChExpand}
                 >
                   <span className="shrink-0 text-muted-foreground">
@@ -1866,11 +1867,6 @@ function ChaptersPanel({
         )
       })()}
 
-      {doneCount > 0 && (
-        <div className="px-3 py-2 border-t shrink-0">
-          <SequentialPlayer segments={segments} projectId={project.id} onPlayingChange={onSequentialPlayingChange} />
-        </div>
-      )}
     </div>
   )
 }