diff --git a/client-next/src/components/ItineraryList/ItineraryHeaderContent.tsx b/client-next/src/components/ItineraryList/ItineraryHeaderContent.tsx
new file mode 100644
index 00000000000..5e0c10171aa
--- /dev/null
+++ b/client-next/src/components/ItineraryList/ItineraryHeaderContent.tsx
@@ -0,0 +1,97 @@
+import { TripPattern } from '../../gql/graphql.ts';
+import { useMemo } from 'react';
+
+export function ItineraryHeaderContent({
+  containerWidth,
+  tripPattern,
+  itineraryIndex,
+  earliestStartTime,
+  latestEndTime,
+}: {
+  containerWidth: number;
+  tripPattern: TripPattern;
+  itineraryIndex: number;
+  earliestStartTime: string | null;
+  latestEndTime: string | null;
+}) {
+  // TODO are we using the correct values
+  // var maxSpan = itin.tripPlan.latestEndTime - itin.tripPlan.earliestStartTime;
+  const maxSpan = useMemo(
+    () => new Date(latestEndTime!).getTime() - new Date(earliestStartTime!).getTime(),
+    [earliestStartTime, latestEndTime],
+  );
+
+  // TODO are we using the correct values
+  // var startPct = (itin.itinData.startTime - itin.tripPlan.earliestStartTime) / maxSpan;
+  const startPct = useMemo(
+    () => (new Date(tripPattern.aimedStartTime).getTime() - new Date(earliestStartTime!).getTime()) / maxSpan,
+    [tripPattern.aimedStartTime, earliestStartTime],
+  );
+
+  // TODO are we using the correct values
+  // var itinSpan = itin.getEndTime() - itin.getStartTime();
+  const itinSpan = useMemo(
+    () => new Date(tripPattern.aimedEndTime).getTime() - new Date(tripPattern.aimedStartTime).getTime(),
+    [tripPattern.aimedStartTime, tripPattern.aimedEndTime],
+  );
+
+  const CONTAINER_WIDTH_PADDING = 90;
+  const paddedContainerWidth = containerWidth - CONTAINER_WIDTH_PADDING;
+
+  // var timeWidth = 40;
+  const timeWidth = 40;
+  // var startPx = 20 + timeWidth,
+  const startPx = 20 + timeWidth;
+  //   endPx = div.width() - timeWidth - (itin.groupSize ? 48 : 0);
+  const endPx = paddedContainerWidth - timeWidth;
+
+  // var pxSpan = endPx - startPx;
+  const pxSpan = endPx - startPx;
+  // var leftPx = startPx + startPct * pxSpan;
+  const leftPx = startPx + startPct * pxSpan;
+  // var widthPx = pxSpan * (itinSpan / maxSpan);
+  const widthPx = pxSpan * (itinSpan / maxSpan);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <div style={{ position: 'absolute' }}>{itineraryIndex + 1}.</div>
+      <div
+        style={{
+          position: 'absolute',
+          width: `${widthPx + 5}px`,
+          height: '2px',
+          left: `${leftPx - 2}px`,
+          top: '9px',
+          background: 'black',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: `${leftPx - timeWidth}px`,
+          background: 'black',
+          color: 'white',
+        }}
+      >
+        {new Date(tripPattern.aimedStartTime).toLocaleTimeString('en-US', {
+          timeStyle: 'short',
+          hourCycle: 'h24',
+        })}
+      </div>
+
+      <div
+        style={{
+          position: 'absolute',
+          left: `${leftPx + widthPx + 2}px`,
+          background: 'black',
+          color: 'white',
+        }}
+      >
+        {new Date(tripPattern.aimedEndTime).toLocaleTimeString('en-US', {
+          timeStyle: 'short',
+          hourCycle: 'h24',
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/client-next/src/components/ItineraryList/ItineraryListContainer.tsx b/client-next/src/components/ItineraryList/ItineraryListContainer.tsx
index 5fcd4767676..b11506ac259 100644
--- a/client-next/src/components/ItineraryList/ItineraryListContainer.tsx
+++ b/client-next/src/components/ItineraryList/ItineraryListContainer.tsx
@@ -1,108 +1,19 @@
-import { TripPattern, TripQuery } from '../../gql/graphql.ts';
+import { TripQuery } from '../../gql/graphql.ts';
 import { Accordion } from 'react-bootstrap';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { useContainerWidth } from './useContainerWidth.ts';
+import { ItineraryHeaderContent } from './ItineraryHeaderContent.tsx';
 
-function ItineraryHeaderContent({
-  containerWidth,
-  tripPattern,
-  itineraryIndex,
-  earliestStartTime,
-  latestEndTime,
-}: {
-  containerWidth: number;
-  tripPattern: TripPattern;
-  itineraryIndex: number;
-  earliestStartTime: string | null;
-  latestEndTime: string | null;
-}) {
-  // var maxSpan = itin.tripPlan.latestEndTime - itin.tripPlan.earliestStartTime;
-  const maxSpan = useMemo(
-    () => new Date(latestEndTime!).getTime() - new Date(earliestStartTime!).getTime(),
-    [earliestStartTime, latestEndTime],
-  );
-
-  // var startPct = (itin.itinData.startTime - itin.tripPlan.earliestStartTime) / maxSpan;
-  const startPct = useMemo(
-    () => (new Date(tripPattern.aimedStartTime).getTime() - new Date(earliestStartTime!).getTime()) / maxSpan,
-    [tripPattern.aimedStartTime, earliestStartTime],
-  );
-
-  // var itinSpan = itin.getEndTime() - itin.getStartTime();
-  const itinSpan = useMemo(
-    () => new Date(tripPattern.aimedEndTime).getTime() - new Date(tripPattern.aimedStartTime).getTime(),
-    [tripPattern.aimedStartTime, tripPattern.aimedEndTime],
-  );
-
-  const CONTAINER_WIDTH_PADDING = 90;
-  const paddedContainerWidth = containerWidth - CONTAINER_WIDTH_PADDING;
-
-  // var timeWidth = 40;
-  const timeWidth = 40;
-  // var startPx = 20 + timeWidth,
-  const startPx = 20 + timeWidth;
-  //   endPx = div.width() - timeWidth - (itin.groupSize ? 48 : 0);
-  const endPx = paddedContainerWidth - timeWidth;
-
-  // var pxSpan = endPx - startPx;
-  const pxSpan = endPx - startPx;
-  // var leftPx = startPx + startPct * pxSpan;
-  const leftPx = startPx + startPct * pxSpan;
-  // var widthPx = pxSpan * (itinSpan / maxSpan);
-  const widthPx = pxSpan * (itinSpan / maxSpan);
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <div style={{ position: 'absolute' }}>{itineraryIndex + 1}.</div>
-      <div
-        style={{
-          position: 'absolute',
-          width: `${widthPx + 5}px`,
-          height: '2px',
-          left: `${leftPx - 2}px`,
-          top: '9px',
-          background: 'black',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          left: `${leftPx - timeWidth}px`,
-          background: 'black',
-          color: 'white',
-        }}
-      >
-        {new Date(tripPattern.aimedStartTime).toLocaleTimeString('en-US', {
-          timeStyle: 'short',
-          hourCycle: 'h24',
-        })}
-      </div>
-
-      <div
-        style={{
-          position: 'absolute',
-          left: `${leftPx + widthPx + 2}px`,
-          background: 'black',
-          color: 'white',
-        }}
-      >
-        {new Date(tripPattern.aimedEndTime).toLocaleTimeString('en-US', {
-          timeStyle: 'short',
-          hourCycle: 'h24',
-        })}
-      </div>
-    </div>
-  );
-}
-
+// TODO itinerary (accordion) selection should propagate to map view
 export function ItineraryListContainer({
   tripQueryResult, //selectedTripPatternIndex,
-} //setSelectedTripPatternIndex,
-: {
+  //setSelectedTripPatternIndex,
+}: {
   tripQueryResult: TripQuery | null;
   //selectedTripPatternIndex: number;
   //setSelectedTripPatternIndex: (selectedTripPatternIndex: number) => void;
 }) {
+  // TODO is this the right way?
   const earliestStartTime = useMemo(() => {
     return (
       tripQueryResult?.trip.tripPatterns.reduce((acc, current) => {
@@ -115,6 +26,7 @@ export function ItineraryListContainer({
     );
   }, [tripQueryResult?.trip]);
 
+  // TODO is this the right way?
   const latestEndTime = useMemo<string | null>(() => {
     return (
       tripQueryResult?.trip.tripPatterns.reduce((acc, current) => {
@@ -131,7 +43,7 @@ export function ItineraryListContainer({
 
   return (
     <section className="itinerary-list-container" ref={containerRef}>
-      <Accordion defaultActiveKey="0">
+      <Accordion>
         {tripQueryResult &&
           tripQueryResult.trip.tripPatterns.map((tripPattern, itineraryIndex) => (
             <Accordion.Item eventKey={`${itineraryIndex}`} key={`${itineraryIndex}`}>
@@ -144,7 +56,7 @@ export function ItineraryListContainer({
                   latestEndTime={latestEndTime}
                 />
               </Accordion.Header>
-              <Accordion.Body>TODO</Accordion.Body>
+              <Accordion.Body>Itinerary details</Accordion.Body>
             </Accordion.Item>
           ))}
       </Accordion>