diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
index 8ef4b53..77d36ab 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor
@@ -61,21 +61,13 @@ else
                             <VolumeControls Volume="@Volume" VolumeChanged="@OnVolumeChange"/>
                         </div>
 
-                        <div class="d-flex flex-column flex-grow-1">
-                            <div @onpointerdown="OnSeekStart"
-                                @onpointerup="@(() => OnSeekEnd(_seekPosition))"
-                                @onpointerleave="@(async () => { if (_isSeeking) await OnSeekEnd(_seekPosition); })">
-                                <MudSlider T="double"
-                                        Min="0"
-                                        Max="@(Duration ?? 0D)"
-                                        Step="0.1"
-                                        Value="@DisplayTime"
-                                        ValueChanged="@OnSeekChange"
-                                        Immediate="true"
-                                        Disabled="@(!CanSeek)"/>
-                            </div>
-                            <SpectrumVisualizer />
-                        </div>
+                        <PlayerSeekZone DisplayTime="DisplayTime"
+                                        Duration="Duration"
+                                        CanSeek="CanSeek"
+                                        OnSeekStart="@OnSeekStart"
+                                        OnSeekEnd="@OnSeekEnd"
+                                        OnSeekChange="@OnSeekChange"
+                                        Class="flex-grow-1"/>
                     </div>
                 }