diff --git a/ui/index.html b/ui/index.html
index 830671e..bb10af9 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ui</title>
+    <title>AI SOP Monitoring</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/ui/src/components/EventTimeline.jsx b/ui/src/components/EventTimeline.jsx
index 72ea688..10a834c 100644
--- a/ui/src/components/EventTimeline.jsx
+++ b/ui/src/components/EventTimeline.jsx
@@ -50,8 +50,8 @@ export default function EventTimeline() {
   const chronologicalBlocks = useMemo(() => {
     const blocks = {};
     events.forEach(ev => {
-      // Group by Minute (HH:MM)
-      const timeKey = ev.start_time.substring(0, 5); 
+      // Group by exact time (HH:MM:SS) for a waterfall layout
+      const timeKey = ev.start_time.substring(0, 8); 
       if (!blocks[timeKey]) {
         blocks[timeKey] = { timeKey, CO: [], Mill: [], Conveyor: [] };
       }
@@ -79,7 +79,7 @@ export default function EventTimeline() {
     >
       <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)}
+          {ev.start_time.substring(0, 8)} - {ev.end_time.substring(0, 8)}
         </span>
         {getStateBadge(ev.state)}
       </div>
