diff --git a/ui/src/components/EventTimeline.jsx b/ui/src/components/EventTimeline.jsx
index 928a041..135d054 100644
--- a/ui/src/components/EventTimeline.jsx
+++ b/ui/src/components/EventTimeline.jsx
@@ -47,77 +47,61 @@ export default function EventTimeline() {
     return <span className="badge">{state}</span>;
   };
 
-  const groupedEvents = useMemo(() => {
-    return {
-      CO: events.filter(e => e.camera_zone === 'CO'),
-      Mill: events.filter(e => e.camera_zone === 'Mill'),
-      Conveyor: events.filter(e => e.camera_zone === 'Conveyor')
-    };
+  const chronologicalBlocks = useMemo(() => {
+    const blocks = {};
+    events.forEach(ev => {
+      // Group by Minute (HH:MM)
+      const timeKey = ev.start_time.substring(0, 5); 
+      if (!blocks[timeKey]) {
+        blocks[timeKey] = { timeKey, CO: [], Mill: [], Conveyor: [] };
+      }
+      if (ev.camera_zone === 'CO') blocks[timeKey].CO.push(ev);
+      if (ev.camera_zone === 'Mill') blocks[timeKey].Mill.push(ev);
+      if (ev.camera_zone === 'Conveyor') blocks[timeKey].Conveyor.push(ev);
+    });
+
+    // Sort chronologically
+    return Object.values(blocks).sort((a, b) => a.timeKey.localeCompare(b.timeKey));
   }, [events]);
 
-  const renderTimeline = (zone, zoneEvents, index) => (
-    <div style={{ 
-      flex: 1, 
-      overflowY: 'auto', 
-      maxHeight: '70vh',
-      paddingLeft: index === 0 ? '0' : '1.5rem',
-      paddingRight: index === 2 ? '0' : '1.5rem',
-      borderRight: index === 2 ? 'none' : '1px solid rgba(255,255,255,0.05)'
+  const renderEventCard = (ev, i, arrLength) => (
+    <div key={ev.id} style={{ 
+      display: 'flex', flexDirection: 'column', 
+      paddingBottom: i < arrLength - 1 ? '1rem' : '0', 
+      marginBottom: i < arrLength - 1 ? '1rem' : '0',
+      borderBottom: i < arrLength - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none' 
     }}>
-      <h2 style={{ 
-        position: 'sticky', 
-        top: 0, 
-        background: 'var(--panel-bg)', 
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
-        paddingBottom: '1rem', 
-        paddingTop: '0.5rem',
-        borderBottom: '1px solid var(--panel-border)', 
-        zIndex: 10 
-      }}>
-        {zone} Timeline
-      </h2>
-      <div style={{ marginTop: '1rem' }}>
-        {zoneEvents.length === 0 ? (
-          <p style={{ opacity: 0.5, textAlign: 'center' }}>No events recorded.</p>
-        ) : (
-          zoneEvents.map((ev, i) => (
-            <div key={ev.id} style={{ display: 'flex', flexDirection: 'column', padding: '1rem 0', borderBottom: i < zoneEvents.length -1 ? '1px dashed rgba(255,255,255,0.1)' : 'none' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-                <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
-                  {ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}
-                </span>
-                {getStateBadge(ev.state)}
-              </div>
-              <p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
-                <button 
-                  disabled
-                  style={{ 
-                    display: 'flex', alignItems: 'center', gap: '0.25rem', 
-                    padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
-                    background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
-                    cursor: 'not-allowed', fontSize: '0.75rem'
-                  }}
-                  title="Video review is currently disabled"
-                >
-                  <Video size={12} /> View Video
-                </button>
-              </div>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
-                <div>
-                  <span style={{ opacity: 0.7 }}>Std Cycle: </span>
-                  <span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
-                </div>
-                <div>
-                  <span style={{ opacity: 0.7 }}>Manpower: </span>
-                  <span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
-                </div>
-              </div>
-            </div>
-          ))
-        )}
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+        <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+          {ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}
+        </span>
+        {getStateBadge(ev.state)}
+      </div>
+      <p style={{ margin: '0 0 0.5rem 0', fontWeight: '500' }}>{ev.event_description}</p>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.8rem', opacity: 0.8 }}>Duration: {formatDuration(ev.state_duration_seconds)}</span>
+        <button 
+          disabled
+          style={{ 
+            display: 'flex', alignItems: 'center', gap: '0.25rem', 
+            padding: '0.25rem 0.5rem', borderRadius: '4px', border: '1px solid rgba(255,255,255,0.1)',
+            background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)',
+            cursor: 'not-allowed', fontSize: '0.75rem'
+          }}
+          title="Video review is currently disabled"
+        >
+          <Video size={12} /> View Video
+        </button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem', marginTop: '0.75rem', paddingTop: '0.5rem', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: '0.75rem', color: 'var(--text-secondary)' }}>
+        <div>
+          <span style={{ opacity: 0.7 }}>Std Cycle: </span>
+          <span style={{ color: 'var(--text)', fontWeight: '500' }}>N/A</span>
+        </div>
+        <div>
+          <span style={{ opacity: 0.7 }}>Manpower: </span>
+          <span style={{ color: 'var(--text)', fontWeight: '500' }}>Nil</span>
+        </div>
       </div>
     </div>
   );
@@ -137,13 +121,75 @@ export default function EventTimeline() {
           <ArrowLeft size={16} /> Back to Changeover Analytics
         </Link>
         <h1>Event Timeline: {id}</h1>
-        <p>Location-wise sequential breakdown of events</p>
+        <p>Synchronized Swimlane Timeline</p>
       </div>
 
-      <div className="glass-panel" style={{ display: 'flex', padding: '1.5rem', alignItems: 'stretch' }}>
-        {renderTimeline('CO', groupedEvents.CO, 0)}
-        {renderTimeline('Mill', groupedEvents.Mill, 1)}
-        {renderTimeline('Conveyor', groupedEvents.Conveyor, 2)}
+      <div className="glass-panel" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden' }}>
+        
+        {/* Sticky Header Grid */}
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: '80px 1fr 1fr 1fr', 
+          gap: '1.5rem',
+          padding: '1.5rem 1.5rem 1rem 1.5rem',
+          background: 'var(--panel-bg)',
+          backdropFilter: 'blur(16px)',
+          WebkitBackdropFilter: 'blur(16px)',
+          borderBottom: '1px solid var(--panel-border)',
+          position: 'sticky',
+          top: 0,
+          zIndex: 10
+        }}>
+          <h2 style={{ margin: 0, fontSize: '1rem', color: 'var(--text-secondary)' }}>Time</h2>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>CO Timeline</h2>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Mill Timeline</h2>
+          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Conveyor Timeline</h2>
+        </div>
+
+        {/* Scrollable Timeline Tracks Container */}
+        <div style={{ overflowY: 'auto', maxHeight: '65vh', padding: '0 1.5rem' }}>
+          {chronologicalBlocks.length === 0 ? (
+            <p style={{ padding: '2rem', textAlign: 'center', opacity: 0.5 }}>No events recorded.</p>
+          ) : (
+            chronologicalBlocks.map((block, index) => (
+              <div key={block.timeKey} style={{ 
+                display: 'grid', 
+                gridTemplateColumns: '80px 1fr 1fr 1fr', 
+                gap: '1.5rem',
+                borderBottom: index < chronologicalBlocks.length - 1 ? '1px dashed rgba(255,255,255,0.1)' : 'none',
+                padding: '1.5rem 0'
+              }}>
+                
+                {/* Time Anchor Left Column */}
+                <div style={{ position: 'relative' }}>
+                  <div style={{ 
+                    position: 'sticky', 
+                    top: '0', 
+                    fontWeight: '600', 
+                    color: 'var(--accent)',
+                    fontSize: '1.1rem',
+                    letterSpacing: '0.05em'
+                  }}>
+                    {block.timeKey}
+                  </div>
+                </div>
+
+                {/* Event Columns */}
+                <div>
+                  {block.CO.map((ev, i) => renderEventCard(ev, i, block.CO.length))}
+                </div>
+                <div>
+                  {block.Mill.map((ev, i) => renderEventCard(ev, i, block.Mill.length))}
+                </div>
+                <div>
+                  {block.Conveyor.map((ev, i) => renderEventCard(ev, i, block.Conveyor.length))}
+                </div>
+
+              </div>
+            ))
+          )}
+        </div>
+
       </div>
     </div>
   );