diff --git a/web/src/components/scrubber/ActivityScrubber.tsx b/web/src/components/scrubber/ActivityScrubber.tsx
index 229a4d3ac..c88f3a3f1 100644
--- a/web/src/components/scrubber/ActivityScrubber.tsx
+++ b/web/src/components/scrubber/ActivityScrubber.tsx
@@ -185,12 +185,7 @@ function ActivityScrubber({
     if (items) timelineRef.current.timeline.setItems(items);
   }, [items, groups, options, currentTime, eventHandlers]);
 
-  return (
-    <div>
-      <div ref={containerRef} />
-      <div className="absolute bg-red-500 w-[2px]" />
-    </div>
-  );
+  return <div ref={containerRef} />;
 }
 
 export default ActivityScrubber;
diff --git a/web/src/pages/History.tsx b/web/src/pages/History.tsx
index 8ec118fe3..bb42ab3cf 100644
--- a/web/src/pages/History.tsx
+++ b/web/src/pages/History.tsx
@@ -195,7 +195,7 @@ function History() {
             onItemSelected={(card) => setPlayback(card)}
           />
         )}
-        {playback != undefined && <HistoryTimelineView card={playback} />}
+        {playback != undefined && <HistoryTimelineView card={playback} isMobile={shouldAutoPlay} />}
       </>
     </>
   );
diff --git a/web/src/views/history/HistoryTimelineView.tsx b/web/src/views/history/HistoryTimelineView.tsx
index 710cd55d8..ffbf09494 100644
--- a/web/src/views/history/HistoryTimelineView.tsx
+++ b/web/src/views/history/HistoryTimelineView.tsx
@@ -11,10 +11,12 @@ import Player from "video.js/dist/types/player";
 
 type HistoryTimelineViewProps = {
   card: Card;
+  isMobile: boolean;
 };
 
 export default function HistoryTimelineView({
   card,
+  isMobile,
 }: HistoryTimelineViewProps) {
   const apiHost = useApiHost();
   const playerRef = useRef<Player | undefined>(undefined);
@@ -47,8 +49,12 @@ export default function HistoryTimelineView({
 
   return (
     <>
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -mr-[640px]">
-        <div className={`2xl:w-[1280px]`}>
+      <div
+        className={
+          isMobile ? "" : "absolute left-1/2 -translate-x-1/2 -mr-[640px]"
+        }
+      >
+        <div className={`w-screen 2xl:w-[1280px]`}>
           <div className={`${scrubbing ? "hidden" : "visible"}`}>
             <VideoPlayer
               options={{
@@ -100,25 +106,26 @@ export default function HistoryTimelineView({
               }}
             />
           </div>
-                  <ActivityScrubber
-                      midBar={true}
+          <ActivityScrubber
             items={timelineItemsToScrubber(card.entries)}
+            timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
             options={{
               min: new Date(parseInt(playbackTimes.start) * 1000),
               max: new Date(parseInt(playbackTimes.end) * 1000),
+              snap: null,
             }}
-            rangechangeHandler={(time) => {
+            timechangeHandler={(data) => {
               if (!scrubbing) {
                 playerRef.current?.pause();
                 setScrubbing(true);
               }
 
-              const rangeStart = time.start.getTime() / 1000;
-              const midTime =
-                rangeStart + (time.end.getTime() / 1000 - rangeStart / 2);
-              previewRef.current?.currentTime(midTime - relevantPreview.start);
+              const seekTimestamp = data.time.getTime() / 1000;
+              previewRef.current?.currentTime(
+                seekTimestamp - relevantPreview.start
+              );
             }}
-            rangechangedHandler={(data) => {
+            timechangedHandler={(data) => {
               const playbackTime = data.time.getTime() / 1000;
               playerRef.current?.currentTime(
                 playbackTime - parseInt(playbackTimes.start)