diff --git a/web/src/components/AudioPlayer.tsx b/web/src/components/AudioPlayer.tsx
index f55fd1324..3520bff33 100644
--- a/web/src/components/AudioPlayer.tsx
+++ b/web/src/components/AudioPlayer.tsx
@@ -92,31 +92,31 @@ const AudioPlayer = ({ src, className = "" }: Props) => {
         <div className={`flex items-center gap-2 ${className}`}>
             <audio ref={audioRef} src={src} preload="metadata" />
 
-            <div className="flex flex-row items-center px-2 py-1 rounded-md bg-secondary text-secondary-foreground border border-border">
+            <div className="flex flex-row items-center px-2 py-1 rounded-md text-secondary-foreground gap-2">
                 <span className="font-mono text-sm">
                     {formatTime(currentTime)} / {formatTime(duration)}
                 </span>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={togglePlayPause}
+                    disabled={isLoading}
+                    className="shrink-0 h-auto w-auto p-0.5 hover:bg-background/50"
+                >
+                    {isPlaying ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />}
+                </Button>
+                <input
+                    type="range"
+                    min="0"
+                    max={duration || 0}
+                    value={currentTime}
+                    onChange={handleSeek}
+                    disabled={isLoading || !duration}
+                    className="flex-1 h-1 bg-muted hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
+                />
             </div>
 
-            <Button
-                variant="outline"
-                size="icon"
-                onClick={togglePlayPause}
-                disabled={isLoading}
-                className="shrink-0"
-            >
-                {isPlaying ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />}
-            </Button>
 
-            <input
-                type="range"
-                min="0"
-                max={duration || 0}
-                value={currentTime}
-                onChange={handleSeek}
-                disabled={isLoading || !duration}
-                className="flex-1 h-1 bg-muted rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
-            />
         </div>
     );
 };