diff --git a/frontend-tools/video-editor/client/public/videos/sample-video-37s.mp4 b/frontend-tools/video-editor/client/public/videos/sample-video-37s.mp4
new file mode 100644
index 00000000..819250e7
Binary files /dev/null and b/frontend-tools/video-editor/client/public/videos/sample-video-37s.mp4 differ
diff --git a/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx b/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
index 118e9af4..cb2bda5e 100644
--- a/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
+++ b/frontend-tools/video-editor/client/src/components/IOSVideoPlayer.tsx
@@ -37,7 +37,7 @@ const IOSVideoPlayer = ({
       }
     } else {
       // Fallback to sample video if needed
-      setVideoUrl("/videos/sample-video-30s.mp4");
+      setVideoUrl("/videos/sample-video-37s.mp4");
     }
   }, [videoRef]);
 
diff --git a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
index 49f56fbc..f9788243 100644
--- a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
+++ b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx
@@ -2235,7 +2235,7 @@ const TimelineControls = ({
   }, [showSuccessModal, redirectUrl, onSave]);
 
   return (
-    <div className="timeline-container-card">
+    <div className={`timeline-container-card ${isPreviewMode ? 'preview-mode' : ''}`}>
       {/* Current Timecode with Milliseconds */}
       <div className="timeline-header">
         <div className="timeline-title">
@@ -2342,7 +2342,7 @@ const TimelineControls = ({
           {/* Segment Tooltip */}
           {selectedSegmentId !== null && (
             <div 
-              className="segment-tooltip two-row-tooltip"
+              className={`segment-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
               style={{
                 position: 'absolute',
                 ...constrainTooltipPosition(currentTimePercent)
@@ -2639,7 +2639,7 @@ const TimelineControls = ({
           {/* Empty space tooltip - positioned absolutely within timeline container */}
           {showEmptySpaceTooltip && selectedSegmentId === null && (
             <div 
-              className="empty-space-tooltip two-row-tooltip"
+              className={`empty-space-tooltip two-row-tooltip ${isPreviewMode ? 'preview-mode' : ''}`}
               style={{
                 position: 'absolute',
                 ...constrainTooltipPosition(currentTimePercent)
diff --git a/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx b/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
index c07b6513..389cf5cf 100644
--- a/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
+++ b/frontend-tools/video-editor/client/src/components/VideoPlayer.tsx
@@ -35,7 +35,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
   
   const sampleVideoUrl = typeof window !== 'undefined' && 
     (window as any).MEDIA_DATA?.videoUrl || 
-    "/videos/sample-video-30s.mp4";
+    "/videos/sample-video-37s.mp4";
   
   // Detect iOS device
   useEffect(() => {
diff --git a/frontend-tools/video-editor/client/src/styles/TimelineControls.css b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
index fa6b8d04..935700b9 100644
--- a/frontend-tools/video-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
@@ -812,4 +812,42 @@
   0% { opacity: 0.7; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.05); }
   100% { opacity: 0.7; transform: scale(1); }
+}
+
+/* Preview mode styles */
+.preview-mode .tooltip-action-btn {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.preview-mode .tooltip-time-btn {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* Timeline preview mode styles */
+.timeline-container-card.preview-mode {
+  pointer-events: none;
+}
+
+.timeline-container-card.preview-mode .timeline-marker-head,
+.timeline-container-card.preview-mode .timeline-marker-drag,
+.timeline-container-card.preview-mode .clip-segment,
+.timeline-container-card.preview-mode .clip-segment-handle,
+.timeline-container-card.preview-mode .time-button,
+.timeline-container-card.preview-mode .zoom-button,
+.timeline-container-card.preview-mode .save-button,
+.timeline-container-card.preview-mode .save-copy-button,
+.timeline-container-card.preview-mode .save-segments-button {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.timeline-container-card.preview-mode .clip-segment:hover {
+  box-shadow: none;
+  border-color: rgba(0, 0, 0, 0.15);
+  background-color: inherit !important;
 }
\ No newline at end of file