diff --git a/qwen3-tts-frontend/src/pages/Audiobook.tsx b/qwen3-tts-frontend/src/pages/Audiobook.tsx
index fd0c584..d9a75ca 100644
--- a/qwen3-tts-frontend/src/pages/Audiobook.tsx
+++ b/qwen3-tts-frontend/src/pages/Audiobook.tsx
@@ -129,7 +129,7 @@ function SequentialPlayer({
     <div className="flex items-center gap-2">
       {displayIndex !== null ? (
         <>
-          <Button size="sm" variant="outline" onClick={stop}>
+          <Button size="sm" variant="outline" className="text-red-500 border-red-500 hover:bg-red-500/10 hover:text-red-500" onClick={stop}>
             <Square className="h-3 w-3 mr-1 fill-current" />{t('projectCard.sequential.stop')}
           </Button>
           <span className="text-xs text-muted-foreground">
@@ -1465,7 +1465,7 @@ function ChaptersPanel({
     const ch = detail.chapters.find(c => c.chapter_index === seg.chapter_index)
     if (ch) setExpandedChapters(prev => { const n = new Set(prev); n.add(ch.id); return n })
     setTimeout(() => {
-      segRefs.current[sequentialPlayingId]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      segRefs.current[sequentialPlayingId]?.scrollIntoView({ behavior: 'smooth', block: 'center' })
     }, 50)
   }, [sequentialPlayingId, detail, segments])
 
@@ -1725,7 +1725,7 @@ function ChaptersPanel({
                         <div
                           key={seg.id}
                           ref={el => { segRefs.current[seg.id] = el }}
-                          className={`rounded-lg border overflow-hidden ${sequentialPlayingId === seg.id ? 'border-primary/40 bg-primary/5' : 'bg-card'}`}
+                          className={`rounded-lg border overflow-hidden ${sequentialPlayingId === seg.id ? 'border-red-500 ring-1 ring-red-500' : 'bg-card'}`}
                         >
                           {/* Card header */}
                           <div className="flex items-center gap-1.5 px-3 py-2 border-b border-border/50">