diff --git a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
index 89e4a8b4..032977b5 100644
--- a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
@@ -1878,7 +1878,9 @@ const TimelineControls = ({
 
     // Render the clip segments on the timeline
     const renderClipSegments = () => {
-        return clipSegments.map((segment, index) => {
+        // Sort segments by start time to ensure correct chronological order
+        const sortedSegments = [...clipSegments].sort((a, b) => a.startTime - b.startTime);
+        return sortedSegments.map((segment, index) => {
             const startPercent = (segment.startTime / duration) * 100;
             const widthPercent = ((segment.endTime - segment.startTime) / duration) * 100;