diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index fc184e3d1..1e98a4621 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -213,6 +213,15 @@ export function MotionSegment({
         <div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
           <div className="w-[10px] md:w-[20px] flex justify-end">
             <div
+              data-segment-time={
+                new Date(segmentTime * 1000 + (segmentDuration * 1000) / 2)
+              }
+              data-motion-value={getMotionSegmentValue(
+                segmentTime + segmentDuration / 2,
+              )}
+              data-audio-value={getAudioSegmentValue(
+                segmentTime + segmentDuration / 2,
+              )}
               key={`${segmentKey}_motion_data_1`}
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
@@ -242,6 +251,9 @@ export function MotionSegment({
         <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
           <div className="w-[10px] md:w-[20px] flex justify-end">
             <div
+              data-segment-time={new Date(segmentTime * 1000)}
+              data-motion-value={getMotionSegmentValue(segmentTime)}
+              data-audio-value={getAudioSegmentValue(segmentTime)}
               key={`${segmentKey}_motion_data_2`}
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 10306e07e..ee28350a9 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -63,7 +63,7 @@ export type MockMotionData = {
 function generateRandomMotionAudioData(): MockMotionData[] {
   const now = new Date();
   const endTime = now.getTime() / 1000;
-  const startTime = endTime - 24 * 60 * 60; // 24 hours ago
+  const startTime = endTime - 0.25 * 60 * 60; // 24 hours ago
   const interval = 30; // 30 seconds
 
   const data = [];
@@ -75,14 +75,17 @@ function generateRandomMotionAudioData(): MockMotionData[] {
     const endTimestamp = startTimestamp + interval;
     const motionValue = Math.floor(Math.random() * 101); // Random number between 0 and 100
     const audioValue = Math.random() * -100; // Random negative value between -100 and 0
+    const foo = new Date(startTimestamp * 1000);
     data.push({
       start_time: startTimestamp,
       end_time: endTimestamp,
       motionValue,
       audioValue,
+      foo,
     });
   }
 
+  console.log(data);
   return data;
 }
 
@@ -295,7 +298,7 @@ function UIPlayground() {
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
                 onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
-                showMinimap // show / hide the minimap
+                // show / hide the minimap
                 minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
                 minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
                 events={mockEvents} // events, including new has_been_reviewed and severity properties
@@ -314,7 +317,7 @@ function UIPlayground() {
                 handlebarTime={handlebarTime} // set the time of the handlebar
                 setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
                 onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
-                showMinimap // show / hide the minimap
+                // show / hide the minimap
                 minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
                 minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
                 events={mockEvents} // events, including new has_been_reviewed and severity properties