diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 8c752b46a..3957cad82 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -496,7 +496,7 @@ function DetectionReview({
       >
         {filter?.before == undefined && (
           <NewReviewData
-            className="absolute w-full z-30 pointer-events-none"
+            className="absolute w-full z-50 pointer-events-none"
             contentRef={contentRef}
             reviewItems={currentItems}
             itemsToReview={itemsToReview}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 25f163218..99929b1fb 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -496,8 +496,10 @@ function Timeline({
 
   return (
     <div
-      className={`${isDesktop ? "w-60" : "w-full"} h-full p-4 flex flex-col gap-4 bg-secondary overflow-auto`}
+      className={`${isDesktop ? "w-60" : "w-full"} h-full relative p-4 flex flex-col gap-4 bg-secondary overflow-auto`}
     >
+      <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
       {mainCameraReviewItems.map((review) => {
         if (review.severity == "significant_motion") {
           return;