diff --git a/src/components/line-chip/index.tsx b/src/components/line-chip/index.tsx
new file mode 100644
index 00000000..d884ffd5
--- /dev/null
+++ b/src/components/line-chip/index.tsx
@@ -0,0 +1,47 @@
+import {
+  TransportIcon,
+  useTransportationThemeColor,
+} from '@atb/components/transport-mode/transport-icon';
+import {
+  TransportModeType,
+  TransportSubmodeType,
+} from '@atb/components/transport-mode/types';
+import { Typo } from '@atb/components/typography';
+import style from './line-chip.module.css';
+
+export type LineChipProps = {
+  transportMode: TransportModeType;
+  transportSubmode?: TransportSubmodeType;
+  publicCode: string;
+};
+
+export default function LineChip({
+  transportMode,
+  transportSubmode,
+  publicCode,
+}: LineChipProps) {
+  const transportationColor = useTransportationThemeColor({
+    mode: transportMode,
+    subMode: transportSubmode,
+  });
+
+  return (
+    <div
+      className={style.container}
+      style={{
+        backgroundColor: transportationColor.backgroundColor,
+        color: transportationColor.textColor,
+      }}
+    >
+      <TransportIcon
+        mode={{
+          mode: transportMode,
+          subMode: transportSubmode,
+        }}
+      />
+      <Typo.span className={style.publicCode} textType="body__primary--bold">
+        {publicCode}
+      </Typo.span>
+    </div>
+  );
+}
diff --git a/src/components/line-chip/line-chip.module.css b/src/components/line-chip/line-chip.module.css
new file mode 100644
index 00000000..ab8ac258
--- /dev/null
+++ b/src/components/line-chip/line-chip.module.css
@@ -0,0 +1,14 @@
+.container {
+  min-width: 4.125rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: var(--spacings-xSmall);
+  padding: var(--spacings-small);
+  border-radius: var(--spacings-small);
+}
+.publicCode {
+  text-align: right;
+}
diff --git a/src/modules/time-representation/index.ts b/src/modules/time-representation/index.ts
new file mode 100644
index 00000000..85247fc7
--- /dev/null
+++ b/src/modules/time-representation/index.ts
@@ -0,0 +1,31 @@
+import { secondsBetween } from '@atb/utils/date';
+
+const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS = 60;
+
+type TimeValues = {
+  aimedTime: string;
+  expectedTime?: string;
+  missingRealTime?: boolean;
+};
+
+type TimeRepresentationType =
+  | 'no-realtime'
+  | 'no-significant-difference'
+  | 'significant-difference';
+
+export function getTimeRepresentationType({
+  missingRealTime,
+  aimedTime,
+  expectedTime,
+}: TimeValues): TimeRepresentationType {
+  if (missingRealTime) {
+    return 'no-realtime';
+  }
+  if (!expectedTime) {
+    return 'no-significant-difference';
+  }
+  const secondsDifference = Math.abs(secondsBetween(aimedTime, expectedTime));
+  return secondsDifference <= DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS
+    ? 'no-significant-difference'
+    : 'significant-difference';
+}
diff --git a/src/page-modules/assistant/trip/trip-pattern/utils.ts b/src/page-modules/assistant/trip/trip-pattern/utils.ts
index 319ccea3..a4157727 100644
--- a/src/page-modules/assistant/trip/trip-pattern/utils.ts
+++ b/src/page-modules/assistant/trip/trip-pattern/utils.ts
@@ -9,6 +9,7 @@ import { Language, TranslateFunction, PageText } from '@atb/translations';
 import dictionary from '@atb/translations/dictionary';
 import { screenReaderPause } from '@atb/components/typography/utils';
 import { transportModeToTranslatedString } from '@atb/components/transport-mode';
+import { getTimeRepresentationType } from '@atb/modules/time-representation';
 
 export const tripSummary = (
   tripPattern: TripPattern,
@@ -231,31 +232,3 @@ export function getFilteredLegsByWalkOrWaitTime(tripPattern: TripPattern) {
 function isLegFlexibleTransport(leg: Leg): boolean {
   return !!leg.line?.flexibleLineType;
 }
-
-const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_MINUTES = 1;
-
-type TimeValues = {
-  aimedTime: string;
-  expectedTime?: string;
-  missingRealTime?: boolean;
-};
-type TimeRepresentationType =
-  | 'no-realtime'
-  | 'no-significant-difference'
-  | 'significant-difference';
-function getTimeRepresentationType({
-  missingRealTime,
-  aimedTime,
-  expectedTime,
-}: TimeValues): TimeRepresentationType {
-  if (missingRealTime) {
-    return 'no-realtime';
-  }
-  if (!expectedTime) {
-    return 'no-significant-difference';
-  }
-  const secondsDifference = Math.abs(secondsBetween(aimedTime, expectedTime));
-  return secondsDifference <= DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_MINUTES * 60
-    ? 'no-significant-difference'
-    : 'significant-difference';
-}
diff --git a/src/page-modules/departures/__tests__/departure-details.test.tsx b/src/page-modules/departures/__tests__/departure-details.test.tsx
new file mode 100644
index 00000000..9d7e4b6b
--- /dev/null
+++ b/src/page-modules/departures/__tests__/departure-details.test.tsx
@@ -0,0 +1,106 @@
+import { serviceJourneyFixture } from './service-journey-data.fixture';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { DeparturesDetails } from '../details';
+
+afterEach(function () {
+  cleanup();
+});
+
+const serviceJourneyId = 'ATB:ServiceJourney:22_230306097862461_113';
+const date = '2023-11-10';
+const fromQuayId = 'NSR:Quay:74990';
+
+describe('departure details page', function () {
+  it('should render correct header', () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+    expect(
+      output.getByText(
+        `${serviceJourneyFixture.line.publicCode} ${serviceJourneyFixture.estimatedCalls[0].destinationDisplay.frontText}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should not render passed quays', () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[0].quay.name}`,
+      ),
+    ).toBeInTheDocument();
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).not.toBeInTheDocument();
+
+    const fromQuayName =
+      serviceJourneyFixture.estimatedCalls
+        .map((call) => call.quay)
+        .find((quay) => quay.id === fromQuayId)?.name || '';
+    expect(output.queryByText(fromQuayName)).toBeInTheDocument();
+  });
+
+  it('should render passed departures when collapse button is clicked', async () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+    const button = screen.getByRole('button', {
+      name: /mellomstopp/i,
+    });
+
+    await userEvent.click(button);
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).toBeInTheDocument();
+
+    await userEvent.click(button);
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should render all departures', async () => {
+    const fromQuayIndex = serviceJourneyFixture.estimatedCalls.findIndex(
+      (call) => call.quay.id === fromQuayId,
+    );
+    const expectedDepartures = serviceJourneyFixture.estimatedCalls.slice(
+      fromQuayIndex,
+      serviceJourneyFixture.estimatedCalls.length,
+    );
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+
+    for (let i = 0; i < expectedDepartures.length; i++) {
+      expect(
+        output.getByText(`${expectedDepartures[i].quay.name}`),
+      ).toBeInTheDocument();
+    }
+  });
+});
diff --git a/src/page-modules/departures/__tests__/departure.test.tsx b/src/page-modules/departures/__tests__/departure.test.tsx
index 3b5ba322..b78c2075 100644
--- a/src/page-modules/departures/__tests__/departure.test.tsx
+++ b/src/page-modules/departures/__tests__/departure.test.tsx
@@ -63,6 +63,9 @@ describe('departure page', function () {
       estimatedCalls() {
         return {} as any;
       },
+      serviceJourney() {
+        return {} as any;
+      },
       client: null as any,
     };
 
diff --git a/src/page-modules/departures/__tests__/service-journey-data.fixture.ts b/src/page-modules/departures/__tests__/service-journey-data.fixture.ts
new file mode 100644
index 00000000..91f59295
--- /dev/null
+++ b/src/page-modules/departures/__tests__/service-journey-data.fixture.ts
@@ -0,0 +1,234 @@
+import { ServiceJourneyData } from '../server/journey-planner/validators';
+import {
+  TransportModeType,
+  TransportSubmodeType,
+} from '@atb/components/transport-mode/types';
+
+export const serviceJourneyFixture: ServiceJourneyData = {
+  id: 'ATB:ServiceJourney:22_230306097862461_113',
+  transportMode: 'bus' as TransportModeType,
+  transportSubmode: 'localBus' as TransportSubmodeType,
+  line: { publicCode: '22' },
+  estimatedCalls: [
+    {
+      actualArrivalTime: '2023-11-10T14:59:24+01:00',
+      actualDepartureTime: '2023-11-10T14:59:24+01:00',
+      aimedArrivalTime: '2023-11-10T14:59:00+01:00',
+      aimedDepartureTime: '2023-11-10T14:59:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T14:59:24+01:00',
+      expectedArrivalTime: '2023-11-10T14:59:24+01:00',
+      forAlighting: false,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Strinda vgs.',
+        id: 'NSR:Quay:73030',
+        stopPlace: { id: 'NSR:StopPlace:42623' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:01:22+01:00',
+      actualDepartureTime: '2023-11-10T15:01:40+01:00',
+      aimedArrivalTime: '2023-11-10T15:00:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:00:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:01:40+01:00',
+      expectedArrivalTime: '2023-11-10T15:01:22+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Magnus Berrføtts veg',
+        id: 'NSR:Quay:72609',
+        stopPlace: { id: 'NSR:StopPlace:42400' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:02:11+01:00',
+      actualDepartureTime: '2023-11-10T15:02:50+01:00',
+      aimedArrivalTime: '2023-11-10T15:01:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:01:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:02:50+01:00',
+      expectedArrivalTime: '2023-11-10T15:02:11+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Valentinlyst',
+        id: 'NSR:Quay:71898',
+        stopPlace: { id: 'NSR:StopPlace:42004' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:03:04+01:00',
+      actualDepartureTime: '2023-11-10T15:03:43+01:00',
+      aimedArrivalTime: '2023-11-10T15:02:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:02:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:03:43+01:00',
+      expectedArrivalTime: '2023-11-10T15:03:04+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Tyholtveien',
+        id: 'NSR:Quay:71678',
+        stopPlace: { id: 'NSR:StopPlace:41882' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:03:54+01:00',
+      actualDepartureTime: '2023-11-10T15:04:09+01:00',
+      aimedArrivalTime: '2023-11-10T15:03:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:03:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:04:09+01:00',
+      expectedArrivalTime: '2023-11-10T15:03:54+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Cecilie Thoresens veg',
+        id: 'NSR:Quay:75585',
+        stopPlace: { id: 'NSR:StopPlace:44015' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:04:42+01:00',
+      actualDepartureTime: '2023-11-10T15:05:07+01:00',
+      aimedArrivalTime: '2023-11-10T15:04:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:04:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:05:07+01:00',
+      expectedArrivalTime: '2023-11-10T15:04:42+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Tyholt',
+        id: 'NSR:Quay:71659',
+        stopPlace: { id: 'NSR:StopPlace:41875' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:05:19+01:00',
+      actualDepartureTime: '2023-11-10T15:05:56+01:00',
+      aimedArrivalTime: '2023-11-10T15:05:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:05:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:05:56+01:00',
+      expectedArrivalTime: '2023-11-10T15:05:19+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Clara Holsts veg',
+        id: 'NSR:Quay:75616',
+        stopPlace: { id: 'NSR:StopPlace:44034' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:06:34+01:00',
+      actualDepartureTime: '2023-11-10T15:07:14+01:00',
+      aimedArrivalTime: '2023-11-10T15:06:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:06:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:07:14+01:00',
+      expectedArrivalTime: '2023-11-10T15:06:34+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Persaunet leir',
+        id: 'NSR:Quay:74990',
+        stopPlace: { id: 'NSR:StopPlace:43687' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:07:52+01:00',
+      actualDepartureTime: '2023-11-10T15:08:22+01:00',
+      aimedArrivalTime: '2023-11-10T15:07:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:07:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:08:22+01:00',
+      expectedArrivalTime: '2023-11-10T15:07:52+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Brian Smiths gate',
+        id: 'NSR:Quay:75371',
+        stopPlace: { id: 'NSR:StopPlace:43896' },
+      },
+    },
+    {
+      actualArrivalTime: '2023-11-10T15:09:56+01:00',
+      actualDepartureTime: '2023-11-10T15:10:33+01:00',
+      aimedArrivalTime: '2023-11-10T15:09:00+01:00',
+      aimedDepartureTime: '2023-11-10T15:09:00+01:00',
+      cancellation: false,
+      date: '2023-11-10',
+      destinationDisplay: {
+        frontText: 'Vestlia via sentrum-Othilienborg',
+      },
+      expectedDepartureTime: '2023-11-10T15:10:33+01:00',
+      expectedArrivalTime: '2023-11-10T15:09:56+01:00',
+      forAlighting: true,
+      forBoarding: true,
+      realtime: true,
+      quay: {
+        publicCode: '',
+        name: 'Dalen Hageby',
+        id: 'NSR:Quay:74497',
+        stopPlace: { id: 'NSR:StopPlace:43418' },
+      },
+    },
+  ],
+};
diff --git a/src/page-modules/departures/details/decoration-line/decoration-line.module.css b/src/page-modules/departures/details/decoration-line/decoration-line.module.css
new file mode 100644
index 00000000..6d720cd6
--- /dev/null
+++ b/src/page-modules/departures/details/decoration-line/decoration-line.module.css
@@ -0,0 +1,36 @@
+.decoration {
+  position: absolute;
+  height: 100%;
+  width: var(--decorationLineWidth);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  left: calc(var(--spacings-large) / 2 + var(--labelWidth));
+  transform: translateX(-50%);
+}
+
+.decorationMarker {
+  width: var(--decorationLineEndWidth);
+  height: var(--decorationLineWidth);
+  left: -0.25rem;
+}
+
+.decorationMarker__start {
+  position: absolute;
+  top: 0;
+}
+.decorationMarker__center {
+  position: absolute;
+  top: calc(var(--spacings-large) + var(--spacings-small));
+}
+.decorationMarker__end {
+  position: absolute;
+  bottom: 0;
+}
+
+.decorationLine {
+  height: 1.25rem;
+  flex-grow: 1;
+}
diff --git a/src/page-modules/departures/details/decoration-line/index.tsx b/src/page-modules/departures/details/decoration-line/index.tsx
new file mode 100644
index 00000000..524f35dd
--- /dev/null
+++ b/src/page-modules/departures/details/decoration-line/index.tsx
@@ -0,0 +1,43 @@
+import { and } from '@atb/utils/css';
+import style from './decoration-line.module.css';
+
+type DecorationLineProps = {
+  hasStart?: boolean;
+  hasCenter?: boolean;
+  hasEnd?: boolean;
+  color: string;
+};
+
+export default function DecorationLine({
+  color,
+  hasStart,
+  hasCenter,
+  hasEnd,
+}: DecorationLineProps) {
+  const colorStyle = { backgroundColor: color };
+  return (
+    <div className={style.decoration} style={colorStyle}>
+      {hasStart && (
+        <div
+          className={and(style.decorationMarker, style.decorationMarker__start)}
+          style={colorStyle}
+        />
+      )}
+      {hasCenter && (
+        <div
+          className={and(
+            style.decorationMarker,
+            style.decorationMarker__center,
+          )}
+          style={colorStyle}
+        />
+      )}
+      {hasEnd && (
+        <div
+          className={and(style.decorationMarker, style.decorationMarker__end)}
+          style={colorStyle}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/page-modules/departures/details/departure-time/departure-time.module.css b/src/page-modules/departures/details/departure-time/departure-time.module.css
new file mode 100644
index 00000000..1e9a620c
--- /dev/null
+++ b/src/page-modules/departures/details/departure-time/departure-time.module.css
@@ -0,0 +1,13 @@
+.expectedContainer {
+  display: flex;
+  align-items: center;
+}
+.significantDifferenceContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.significantDifference {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/page-modules/departures/details/departure-time/index.tsx b/src/page-modules/departures/details/departure-time/index.tsx
new file mode 100644
index 00000000..f6498243
--- /dev/null
+++ b/src/page-modules/departures/details/departure-time/index.tsx
@@ -0,0 +1,71 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { formatToClock } from '@atb/utils/date';
+import { Typo } from '@atb/components/typography';
+import { getTimeRepresentationType } from '@atb/modules/time-representation';
+import style from './departure-time.module.css';
+
+type DepartureTimeProps = {
+  aimedDepartureTime: string;
+  expectedDepartureTime: string;
+  realtime: boolean;
+  isStartOfServiceJourney: boolean;
+};
+
+export default function DepartureTime({
+  aimedDepartureTime,
+  expectedDepartureTime,
+  realtime,
+  isStartOfServiceJourney,
+}: DepartureTimeProps) {
+  const { t, language } = useTranslation();
+
+  const representationType = getTimeRepresentationType({
+    aimedTime: aimedDepartureTime,
+    expectedTime: expectedDepartureTime,
+    missingRealTime: !realtime && isStartOfServiceJourney,
+  });
+  const scheduled = formatToClock(aimedDepartureTime, language, 'floor');
+
+  const expected = expectedDepartureTime
+    ? formatToClock(expectedDepartureTime, language, 'floor')
+    : '';
+
+  switch (representationType) {
+    case 'significant-difference': {
+      return (
+        <div className={style.significantDifferenceContainer}>
+          <div className={style.significantDifference}>
+            <Typo.p
+              textType="body__primary"
+              aria-label={`${t(
+                PageText.Departures.details.time.expectedPrefix,
+              )} ${expected}`}
+            >
+              {expected}
+            </Typo.p>
+          </div>
+          <Typo.p
+            textType="body__tertiary"
+            color="secondary"
+            aria-label={`${t(
+              PageText.Departures.details.time.aimedPrefix,
+            )} ${scheduled}`}
+            style={{ textDecorationLine: 'line-through' }}
+          >
+            {scheduled}
+          </Typo.p>
+        </div>
+      );
+    }
+    case 'no-realtime': {
+      return <Typo.p textType="body__primary">{scheduled}</Typo.p>;
+    }
+    default: {
+      return (
+        <div className={style.expectedContainer}>
+          <Typo.p textType="body__primary">{expected}</Typo.p>
+        </div>
+      );
+    }
+  }
+}
diff --git a/src/page-modules/departures/details/details.module.css b/src/page-modules/departures/details/details.module.css
new file mode 100644
index 00000000..0b75b057
--- /dev/null
+++ b/src/page-modules/departures/details/details.module.css
@@ -0,0 +1,105 @@
+.container {
+  margin: 0 auto;
+  max-width: var(--maxPageWidth);
+  padding: var(--spacings-xLarge);
+
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  grid-template-areas:
+    'header header'
+    'serviceJourney map';
+  gap: var(--spacings-small);
+}
+@media (max-width: 650px) {
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'header'
+      'serviceJourney'
+      'map';
+  }
+}
+.headerContainer {
+  grid-area: header;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacings-large);
+}
+.mapContainer {
+  grid-area: map;
+  max-height: 37.5rem;
+  width: 100%;
+  margin: 0 auto;
+}
+.serviceJourneyContainer {
+  grid-area: serviceJourney;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacings-large);
+}
+
+.realtimeText {
+  display: flex;
+  align-items: center;
+  gap: var(--spacings-small);
+  font-size: 0.875rem;
+  color: var(--text-colors-secondary);
+}
+
+.callRows {
+  margin-top: var(--spacings-large);
+}
+.callRows__container {
+  padding: var(--spacings-medium);
+}
+.callRows__container:nth-of-type(odd) {
+  padding-bottom: var(--spacings-large);
+}
+.callRows__container:nth-of-type(even) {
+  padding-top: 0;
+}
+.rowContainer {
+  position: relative;
+  overflow: hidden;
+  --labelWidth: 5rem;
+  --decorationContainerWidth: 1.25rem;
+  --decorationLineWidth: 0.25rem;
+  --decorationLineEndWidth: 0.75rem;
+}
+.boardingInfo {
+  color: var(--text-colors-secondary);
+}
+.collapseButton {
+  padding: var(--spacings-xSmall);
+  margin-bottom: var(--spacings-medium);
+  margin-left: calc(
+    var(--labelWidth) + var(--decorationContainerWidth) - var(--spacings-xSmall)
+  );
+  color: var(--text-colors-secondary);
+}
+.row {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  padding: var(--spacings-small) 0;
+  text-decoration: none;
+  color: inherit;
+}
+.middleRow {
+  min-height: 3.75rem;
+}
+.leftColumn {
+  display: flex;
+  justify-content: flex-end;
+  min-width: var(--labelWidth);
+}
+.rightColumn {
+  flex: 1;
+}
+.decorationPlaceholder {
+  width: var(--spacings-large);
+}
diff --git a/src/page-modules/departures/details/estimated-call-rows.tsx b/src/page-modules/departures/details/estimated-call-rows.tsx
new file mode 100644
index 00000000..50a53115
--- /dev/null
+++ b/src/page-modules/departures/details/estimated-call-rows.tsx
@@ -0,0 +1,199 @@
+import { TransportModeType } from '@atb/components/transport-mode/types';
+import { EstimatedCallWithMetadata } from '../types';
+import { PageText, useTranslation } from '@atb/translations';
+import { PropsWithChildren, useState } from 'react';
+import style from './details.module.css';
+import { motion } from 'framer-motion';
+import { useTransportationThemeColor } from '@atb/components/transport-mode/transport-icon';
+import { Typo } from '@atb/components/typography';
+import { MonoIcon } from '@atb/components/icon';
+import { Button } from '@atb/components/button';
+import Link from 'next/link';
+import DepartureTime from './departure-time';
+import DecorationLine from './decoration-line';
+import { and } from '@atb/utils/css';
+
+export type EstimatedCallRowsProps = {
+  calls: EstimatedCallWithMetadata[];
+  mode: TransportModeType;
+};
+
+export function EstimatedCallRows({ calls, mode }: EstimatedCallRowsProps) {
+  const { t } = useTranslation();
+  const [collapsed, setCollapsed] = useState(true);
+
+  const passedCalls = calls.filter((c) => c.metadata.group === 'passed');
+  const showCollapsable = passedCalls.length > 1;
+
+  const estimatedCallsToShow = calls.filter(
+    (c) => c.metadata.group !== 'passed',
+  );
+
+  const passedCallsToShow = collapsed ? [passedCalls[0]] : passedCalls;
+
+  const collapseButton = showCollapsable ? (
+    <Button
+      onClick={() => setCollapsed(!collapsed)}
+      title={t(
+        PageText.Departures.details.collapse.label(passedCalls.length - 1),
+      )}
+      mode="transparent"
+      size="compact"
+      icon={{
+        right: collapsed ? (
+          <MonoIcon icon="navigation/ExpandMore" />
+        ) : (
+          <MonoIcon icon="navigation/ExpandLess" />
+        ),
+      }}
+      className={style.collapseButton}
+      buttonProps={{
+        'aria-label': t(PageText.Departures.details.collapse.a11yHint),
+      }}
+    />
+  ) : null;
+
+  return (
+    <div className={style.callRows}>
+      {passedCalls.length > 0 && (
+        <div className={style.callRows__container}>
+          {passedCallsToShow.map((call, i) => (
+            <motion.div
+              key={`${call.quay.id}-${call.aimedDepartureTime}`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{
+                delay: i * 0.05,
+              }}
+            >
+              <EstimatedCallRow
+                call={call}
+                mode={mode}
+                collapseButton={
+                  call.metadata.isStartOfServiceJourney ? collapseButton : null
+                }
+              />
+            </motion.div>
+          ))}
+        </div>
+      )}
+
+      <div className={style.callRows__container}>
+        {estimatedCallsToShow.map((call, i) => (
+          <motion.div
+            key={`${call.quay.id}-${call.aimedDepartureTime}`}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              delay: i * 0.015,
+            }}
+          >
+            <EstimatedCallRow call={call} mode={mode} collapseButton={null} />
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type EstimatedCallRowProps = {
+  call: EstimatedCallWithMetadata;
+  mode: TransportModeType;
+  collapseButton: JSX.Element | null;
+};
+function EstimatedCallRow({
+  call,
+  mode,
+  collapseButton,
+}: EstimatedCallRowProps) {
+  const { t } = useTranslation();
+  const { group, isStartOfGroup, isEndOfGroup } = call.metadata;
+  const isBetween = !isStartOfGroup && !isEndOfGroup;
+  const iconColor = useTransportationThemeColor({
+    mode: group === 'trip' ? mode : 'unknown',
+  });
+
+  return (
+    <div className={style.rowContainer}>
+      <DecorationLine
+        hasStart={isStartOfGroup}
+        hasCenter={isBetween}
+        hasEnd={isEndOfGroup}
+        color={iconColor.backgroundColor}
+      />
+      <Row
+        rowLabel={
+          <DepartureTime
+            aimedDepartureTime={call.aimedDepartureTime}
+            expectedDepartureTime={call.expectedDepartureTime}
+            realtime={call.realtime}
+            isStartOfServiceJourney
+          />
+        }
+        alignChildren={
+          isStartOfGroup ? 'flex-start' : isEndOfGroup ? 'flex-end' : 'center'
+        }
+        isBetween={isBetween}
+        href={`/departures/${call.quay.stopPlace.id}`}
+      >
+        <Typo.p textType="body__primary">{call.quay.name}</Typo.p>
+        {!call.forAlighting && !call.metadata.isStartOfServiceJourney && (
+          <Typo.p textType="body__secondary" className={style.boardingInfo}>
+            {t(PageText.Departures.details.messages.noAlighting)}
+          </Typo.p>
+        )}
+        {!call.forBoarding && !call.metadata.isEndOfServiceJourney && (
+          <Typo.p textType="body__secondary" className={style.boardingInfo}>
+            {t(PageText.Departures.details.messages.noBoarding)}
+          </Typo.p>
+        )}
+      </Row>
+      {collapseButton}
+    </div>
+  );
+}
+
+type RowProps = PropsWithChildren<{
+  rowLabel?: React.ReactNode;
+  alignChildren?: 'flex-start' | 'flex-end' | 'center';
+  href?: string;
+  isBetween?: boolean;
+}>;
+function Row({
+  rowLabel,
+  children,
+  alignChildren = 'center',
+  href,
+  isBetween = false,
+}: RowProps) {
+  const rowContent = (
+    <>
+      <div className={style.leftColumn}>{rowLabel}</div>
+      <div className={style.decorationPlaceholder} />
+      <div className={style.rightColumn}>{children}</div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={and(style.row, isBetween && style.middleRow)}
+        style={{ alignItems: alignChildren }}
+      >
+        {rowContent}
+      </Link>
+    );
+  }
+
+  return (
+    <div
+      className={and(style.row, isBetween && style.middleRow)}
+      style={{ alignItems: alignChildren }}
+    >
+      {rowContent}
+    </div>
+  );
+}
diff --git a/src/page-modules/departures/details/index.tsx b/src/page-modules/departures/details/index.tsx
new file mode 100644
index 00000000..7fb73e31
--- /dev/null
+++ b/src/page-modules/departures/details/index.tsx
@@ -0,0 +1,68 @@
+import LineChip from '@atb/components/line-chip';
+import { Typo } from '@atb/components/typography';
+import style from './details.module.css';
+import { ButtonLink } from '@atb/components/button';
+import { ColorIcon, MonoIcon } from '@atb/components/icon';
+import { useRealtimeText } from './use-realtime-text';
+import { addMetadataToEstimatedCalls } from './utils';
+import { ServiceJourneyData } from '../server/journey-planner/validators';
+import { EstimatedCallRows } from './estimated-call-rows';
+import { PageText, useTranslation } from '@atb/translations';
+
+export type DeparturesDetailsProps = {
+  fromQuayId?: string;
+  serviceJourney: ServiceJourneyData;
+};
+
+export function DeparturesDetails({
+  fromQuayId,
+  serviceJourney,
+}: DeparturesDetailsProps) {
+  const { t } = useTranslation();
+  const focusedCall =
+    serviceJourney.estimatedCalls.find((call) => call.quay.id === fromQuayId) ||
+    serviceJourney.estimatedCalls[0];
+  const title = `${serviceJourney.line.publicCode} ${focusedCall.destinationDisplay.frontText}`;
+  const realtimeText = useRealtimeText(serviceJourney.estimatedCalls);
+  const estimatedCallsWithMetadata = addMetadataToEstimatedCalls(
+    serviceJourney.estimatedCalls,
+    fromQuayId,
+    undefined,
+  );
+
+  return (
+    <section className={style.container}>
+      <div className={style.headerContainer}>
+        <ButtonLink
+          mode="transparent"
+          href={`/departures/${focusedCall.quay.stopPlace.id}`}
+          title={t(PageText.Departures.details.back)}
+          icon={{ left: <MonoIcon icon="navigation/ArrowLeft" /> }}
+        />
+        <div className={style.header}>
+          <LineChip
+            transportMode={serviceJourney.transportMode}
+            transportSubmode={serviceJourney.transportSubmode}
+            publicCode={serviceJourney.line.publicCode}
+          />
+          <Typo.h2 textType="heading--big">{title}</Typo.h2>
+        </div>
+        {realtimeText && (
+          <div className={style.realtimeText}>
+            <ColorIcon icon="status/Realtime" size="small" />
+            <Typo.h3 textType="body__secondary">{realtimeText}</Typo.h3>
+          </div>
+        )}
+      </div>
+
+      <div className={style.mapContainer}></div>
+
+      <div className={style.serviceJourneyContainer}>
+        <EstimatedCallRows
+          calls={estimatedCallsWithMetadata}
+          mode={serviceJourney.transportMode}
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/src/page-modules/departures/details/use-realtime-text.ts b/src/page-modules/departures/details/use-realtime-text.ts
new file mode 100644
index 00000000..7c52191d
--- /dev/null
+++ b/src/page-modules/departures/details/use-realtime-text.ts
@@ -0,0 +1,55 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { formatToClock, isInPast } from '@atb/utils/date';
+import { ServiceJourneyData } from '../server/journey-planner/validators';
+import { getTimeRepresentationType } from '@atb/modules/time-representation';
+
+export const useRealtimeText = (
+  estimatedCalls: ServiceJourneyData['estimatedCalls'][0][],
+) => {
+  const { t, language } = useTranslation();
+  const lastPassedStop = estimatedCalls
+    .filter((a) => a.actualDepartureTime)
+    .pop();
+
+  if (
+    lastPassedStop &&
+    lastPassedStop.actualDepartureTime &&
+    lastPassedStop.quay?.name
+  ) {
+    return t(
+      PageText.Departures.details.lastPassedStop(
+        lastPassedStop.quay.name,
+        formatToClock(lastPassedStop.actualDepartureTime, language, 'nearest'),
+      ),
+    );
+  }
+
+  const firstStop = estimatedCalls[0];
+
+  if (
+    firstStop?.quay?.name &&
+    firstStop.realtime &&
+    !isInPast(firstStop.expectedDepartureTime)
+  ) {
+    return t(
+      PageText.Departures.details.noPassedStop(
+        firstStop.quay.name,
+        formatToClock(firstStop.expectedDepartureTime, language, 'floor'),
+      ),
+    );
+  }
+
+  const timeRepType = getTimeRepresentationType({
+    missingRealTime: !firstStop?.realtime,
+    aimedTime: firstStop?.aimedDepartureTime,
+    expectedTime: firstStop?.expectedDepartureTime,
+  });
+  switch (timeRepType) {
+    case 'no-significant-difference':
+      return t(PageText.Departures.details.onTime);
+    case 'significant-difference':
+      return t(PageText.Departures.details.notOnTime);
+    default:
+      return undefined;
+  }
+};
diff --git a/src/page-modules/departures/details/utils.ts b/src/page-modules/departures/details/utils.ts
new file mode 100644
index 00000000..67bcfb10
--- /dev/null
+++ b/src/page-modules/departures/details/utils.ts
@@ -0,0 +1,36 @@
+import { ServiceJourneyData } from '../server/journey-planner/validators';
+import { EstimatedCallMetadata, EstimatedCallWithMetadata } from '../types';
+
+export function addMetadataToEstimatedCalls(
+  estimatedCalls: ServiceJourneyData['estimatedCalls'][0][],
+  fromQuayId?: string,
+  toQuayId?: string,
+): EstimatedCallWithMetadata[] {
+  let currentGroup: EstimatedCallMetadata['group'] = 'passed';
+
+  return estimatedCalls.reduce<EstimatedCallWithMetadata[]>(
+    (calls, currentCall, index) => {
+      const previousCall = calls[calls.length - 1];
+      if (currentCall.quay?.id === fromQuayId) {
+        if (previousCall) previousCall.metadata.isEndOfGroup = true;
+        currentGroup = 'trip';
+      }
+
+      const metadata: EstimatedCallMetadata = {
+        group: currentGroup,
+        isStartOfServiceJourney: index === 0,
+        isStartOfGroup: currentGroup !== previousCall?.metadata.group,
+        isEndOfServiceJourney: index === estimatedCalls.length - 1,
+        isEndOfGroup: index === estimatedCalls.length - 1,
+      };
+
+      if (currentCall.quay?.id === toQuayId) {
+        metadata.isEndOfGroup = true;
+        currentGroup = 'after';
+      }
+
+      return [...calls, { ...currentCall, metadata }];
+    },
+    [],
+  );
+}
diff --git a/src/page-modules/departures/server/journey-planner/index.ts b/src/page-modules/departures/server/journey-planner/index.ts
index caf690b8..8f8f8eda 100644
--- a/src/page-modules/departures/server/journey-planner/index.ts
+++ b/src/page-modules/departures/server/journey-planner/index.ts
@@ -31,6 +31,8 @@ import {
   stopPlaceSchema,
   Quay,
   Departure,
+  ServiceJourneyData,
+  serviceJourneySchema,
 } from './validators';
 import {
   TransportMode,
@@ -43,6 +45,12 @@ import {
   TransportModeType,
   TransportSubmodeType,
 } from '@atb/components/transport-mode/types';
+import {
+  ServiceJourneyWithEstimatedCallsDocument,
+  ServiceJourneyWithEstimatedCallsQuery,
+  ServiceJourneyWithEstimatedCallsQueryVariables,
+} from './journey-gql/service-journey-with-estimated-calls.generated';
+import { formatISO } from 'date-fns';
 
 export type DepartureInput = {
   id: string;
@@ -64,6 +72,12 @@ export type EstimatedCallsInput = {
   quayId: string;
   startTime: string;
 };
+
+export type ServiceJourneyInput = {
+  id: string;
+  date: Date;
+};
+
 export type { StopPlaceInfo, NearestStopPlacesData, StopPlaceWithDistance };
 
 export type JourneyPlannerApi = {
@@ -73,6 +87,7 @@ export type JourneyPlannerApi = {
     input: NearestStopPlacesInput,
   ): Promise<NearestStopPlacesData>;
   estimatedCalls(input: EstimatedCallsInput): Promise<EstimatedCallsData>;
+  serviceJourney(input: ServiceJourneyInput): Promise<ServiceJourneyData>;
 };
 
 export function createJourneyApi(
@@ -257,7 +272,7 @@ export function createJourneyApi(
             e.serviceJourney.line.transportMode,
           )
             ? e.serviceJourney.line.transportMode
-            : undefined,
+            : 'unknown',
           transportSubmode: e.serviceJourney.line.transportSubmode,
           publicCode: e.serviceJourney.line.publicCode,
         })),
@@ -267,6 +282,68 @@ export function createJourneyApi(
         throw validated.error;
       }
 
+      return validated.data;
+    },
+    async serviceJourney(input) {
+      const result = await client.query<
+        ServiceJourneyWithEstimatedCallsQuery,
+        ServiceJourneyWithEstimatedCallsQueryVariables
+      >({
+        query: ServiceJourneyWithEstimatedCallsDocument,
+        variables: {
+          id: input.id,
+          date: formatISO(input.date, { representation: 'date' }),
+        },
+      });
+
+      if (result.error) {
+        throw result.error;
+      }
+
+      const serviceJourney = result.data.serviceJourney;
+
+      const data: RecursivePartial<ServiceJourneyData> = {
+        id: serviceJourney?.id,
+        transportMode: isTransportModeType(serviceJourney?.transportMode)
+          ? serviceJourney?.transportMode
+          : 'unknown',
+        transportSubmode: serviceJourney?.transportSubmode,
+        line: {
+          publicCode: serviceJourney?.line.publicCode,
+        },
+        estimatedCalls: serviceJourney?.estimatedCalls?.map(
+          (estimatedCall) => ({
+            actualArrivalTime: estimatedCall.actualArrivalTime || null,
+            actualDepartureTime: estimatedCall.actualDepartureTime || null,
+            aimedArrivalTime: estimatedCall.aimedArrivalTime,
+            aimedDepartureTime: estimatedCall.aimedDepartureTime,
+            cancellation: estimatedCall.cancellation,
+            date: estimatedCall.date,
+            destinationDisplay: {
+              frontText: estimatedCall.destinationDisplay?.frontText,
+            },
+            expectedDepartureTime: estimatedCall.expectedDepartureTime,
+            expectedArrivalTime: estimatedCall.expectedArrivalTime,
+            forAlighting: estimatedCall.forAlighting,
+            forBoarding: estimatedCall.forBoarding,
+            realtime: estimatedCall.realtime,
+            quay: {
+              id: estimatedCall.quay.id,
+              publicCode: estimatedCall.quay.publicCode,
+              name: estimatedCall.quay.name,
+              stopPlace: {
+                id: estimatedCall.quay.stopPlace?.id,
+              },
+            },
+          }),
+        ),
+      };
+
+      const validated = serviceJourneySchema.safeParse(data);
+      if (!validated.success) {
+        throw validated.error;
+      }
+
       return validated.data;
     },
   };
diff --git a/src/page-modules/departures/server/journey-planner/journey-gql/service-journey-with-estimated-calls.gql b/src/page-modules/departures/server/journey-planner/journey-gql/service-journey-with-estimated-calls.gql
new file mode 100644
index 00000000..b1f8fe0a
--- /dev/null
+++ b/src/page-modules/departures/server/journey-planner/journey-gql/service-journey-with-estimated-calls.gql
@@ -0,0 +1,35 @@
+query serviceJourneyWithEstimatedCalls($id: String!, $date: Date) {
+  serviceJourney(id: $id) {
+    id
+    transportMode
+    transportSubmode
+    publicCode
+    line {
+      publicCode
+    }
+    estimatedCalls(date: $date) {
+      actualArrivalTime
+      actualDepartureTime
+      aimedArrivalTime
+      aimedDepartureTime
+      cancellation
+      date
+      destinationDisplay {
+        frontText
+      }
+      expectedDepartureTime
+      expectedArrivalTime
+      forAlighting
+      forBoarding
+      realtime
+      quay {
+        id
+        name
+        publicCode
+        stopPlace {
+          id
+        }
+      }
+    }
+  }
+}
diff --git a/src/page-modules/departures/server/journey-planner/validators.ts b/src/page-modules/departures/server/journey-planner/validators.ts
index 5649910b..6c5f1cbe 100644
--- a/src/page-modules/departures/server/journey-planner/validators.ts
+++ b/src/page-modules/departures/server/journey-planner/validators.ts
@@ -52,6 +52,39 @@ export const estimatedCallsSchema = z.object({
   departures: z.array(departureSchema),
 });
 
+export const serviceJourneySchema = z.object({
+  id: z.string(),
+  transportMode: TransportModeType,
+  transportSubmode: TransportSubmodeType.optional(),
+  line: z.object({
+    publicCode: z.string(),
+  }),
+  estimatedCalls: z.array(
+    z.object({
+      actualArrivalTime: z.string().nullable(),
+      actualDepartureTime: z.string().nullable(),
+      aimedArrivalTime: z.string(),
+      aimedDepartureTime: z.string(),
+      cancellation: z.boolean(),
+      date: z.string(),
+      destinationDisplay: z.object({ frontText: z.string() }),
+      expectedDepartureTime: z.string(),
+      expectedArrivalTime: z.string(),
+      forAlighting: z.boolean(),
+      forBoarding: z.boolean(),
+      realtime: z.boolean(),
+      quay: z.object({
+        publicCode: z.string().nullable(),
+        name: z.string(),
+        id: z.string(),
+        stopPlace: z.object({
+          id: z.string(),
+        }),
+      }),
+    }),
+  ),
+});
+
 export type DepartureData = z.infer<typeof departureDataSchema>;
 export type StopPlaceInfo = z.infer<typeof stopPlaceSchema>;
 export const nearestStopPlaces = z.array(stopPlaceWithDistance);
@@ -60,3 +93,4 @@ export type NearestStopPlacesData = z.infer<typeof nearestStopPlaces>;
 export type EstimatedCallsData = z.infer<typeof estimatedCallsSchema>;
 export type Departure = z.infer<typeof departureSchema>;
 export type Quay = z.infer<typeof quaySchema>;
+export type ServiceJourneyData = z.infer<typeof serviceJourneySchema>;
diff --git a/src/page-modules/departures/stop-place/index.tsx b/src/page-modules/departures/stop-place/index.tsx
index 6b9b5966..1cab94e5 100644
--- a/src/page-modules/departures/stop-place/index.tsx
+++ b/src/page-modules/departures/stop-place/index.tsx
@@ -13,16 +13,15 @@ import {
 } from '@atb/utils/date';
 import { PageText, useTranslation } from '@atb/translations';
 import dictionary from '@atb/translations/dictionary';
-import { TransportIcon } from '@atb/components/transport-mode';
 import Link from 'next/link';
 import { Typo } from '@atb/components/typography';
 import { useState } from 'react';
 import { and, andIf } from '@atb/utils/css';
 import { useRouter } from 'next/router';
 import { Departures } from '@atb/translations/pages';
-import { useTransportationThemeColor } from '@atb/components/transport-mode/transport-icon';
 import { nextDepartures } from '../client';
 import { Button } from '@atb/components/button';
+import LineChip from '@atb/components/line-chip';
 
 export type StopPlaceProps = {
   departures: DepartureData;
@@ -139,7 +138,11 @@ export function EstimatedCallList({ quay }: EstimatedCallListProps) {
           {departures.length > 0 ? (
             <>
               {departures.map((departure) => (
-                <EstimatedCallItem key={departure.id} departure={departure} />
+                <EstimatedCallItem
+                  key={departure.id}
+                  departure={departure}
+                  quayId={quay.id}
+                />
               ))}
             </>
           ) : (
@@ -169,77 +172,71 @@ export function EstimatedCallList({ quay }: EstimatedCallListProps) {
 }
 
 type EstimatedCallItemProps = {
+  quayId: string;
   departure: Departure;
 };
 
-export function EstimatedCallItem({ departure }: EstimatedCallItemProps) {
-  const transportationColor = useTransportationThemeColor({
-    mode: departure.transportMode || 'unknown',
-    subMode: departure.transportSubmode,
-  });
-
+export function EstimatedCallItem({
+  quayId,
+  departure,
+}: EstimatedCallItemProps) {
   return (
     <li>
       <Link
         className={style.listItem}
-        href={`/departures/details/${departure.id}`}
+        href={`details/${departure.id}?date=${departure.date}&fromQuayId=${quayId}`}
       >
         <div className={style.transportInfo}>
           {(departure.transportMode || departure.publicCode) && (
-            <div
-              className={style.lineChip}
-              style={{
-                backgroundColor: transportationColor.backgroundColor,
-                color: transportationColor.textColor,
-              }}
-            >
-              {departure.transportMode && (
-                <TransportIcon
-                  mode={{
-                    mode: departure.transportMode,
-                    subMode: departure.transportSubmode,
-                  }}
-                />
-              )}
-
-              <p className={style.lineChip__publicCode}>
-                {departure.publicCode}
-              </p>
-            </div>
+            <LineChip
+              transportMode={departure.transportMode || 'unknown'}
+              publicCode={departure.publicCode}
+              transportSubmode={departure.transportSubmode}
+            />
           )}
 
           <p>{departure.name}</p>
         </div>
 
-        <DepartureTime departure={departure} />
+        <DepartureTime
+          expectedDepartureTime={departure.expectedDepartureTime}
+          aimedDepartureTime={departure.aimedDepartureTime}
+        />
       </Link>
     </li>
   );
 }
 
-export function DepartureTime({ departure }: EstimatedCallItemProps) {
+type DepartureTimeProps = {
+  expectedDepartureTime: string;
+  aimedDepartureTime: string;
+};
+export function DepartureTime({
+  expectedDepartureTime,
+  aimedDepartureTime,
+}: DepartureTimeProps) {
   const { t, language } = useTranslation();
   return (
     <div className={style.departureTime}>
       <Typo.p textType="body__primary--bold">
         {formatToClockOrRelativeMinutes(
-          departure.expectedDepartureTime,
+          expectedDepartureTime,
           language,
           t(dictionary.date.units.now),
         )}
       </Typo.p>
       {isMoreThanOneMinuteDelayed(
-        departure.expectedDepartureTime,
-        departure.aimedDepartureTime,
+        expectedDepartureTime,
+        aimedDepartureTime,
       ) && (
         <Typo.span
           textType="body__tertiary--strike"
           aria-label={
             t(dictionary.a11yRouteTimePrefix) +
-            formatLocaleTime(departure.aimedDepartureTime, language)
+            formatLocaleTime(aimedDepartureTime, language)
           }
         >
-          {formatLocaleTime(departure.aimedDepartureTime, language)}
+          {formatLocaleTime(aimedDepartureTime, language)}
         </Typo.span>
       )}
     </div>
diff --git a/src/page-modules/departures/types.ts b/src/page-modules/departures/types.ts
index af018029..09df8537 100644
--- a/src/page-modules/departures/types.ts
+++ b/src/page-modules/departures/types.ts
@@ -1,4 +1,5 @@
 import { FeatureCategory } from '@atb/components/venue-icon';
+import { ServiceJourneyData } from './server/journey-planner/validators';
 
 export type GeocoderFeature = {
   id: string;
@@ -11,3 +12,16 @@ export type GeocoderFeature = {
   };
   street?: string;
 };
+
+export type EstimatedCallMetadata = {
+  group: 'passed' | 'trip' | 'after';
+  isStartOfServiceJourney: boolean;
+  isEndOfServiceJourney: boolean;
+  isStartOfGroup: boolean;
+  isEndOfGroup: boolean;
+};
+
+export type EstimatedCallWithMetadata =
+  ServiceJourneyData['estimatedCalls'][0] & {
+    metadata: EstimatedCallMetadata;
+  };
diff --git a/src/pages/departures/details/[id].tsx b/src/pages/departures/details/[id].tsx
new file mode 100644
index 00000000..71280020
--- /dev/null
+++ b/src/pages/departures/details/[id].tsx
@@ -0,0 +1,44 @@
+import DefaultLayout from '@atb/layouts/default';
+import type { WithGlobalData } from '@atb/layouts/global-data';
+import { withGlobalData } from '@atb/layouts/global-data';
+import { NextPage } from 'next';
+import {
+  DeparturesDetails,
+  DeparturesDetailsProps,
+} from '@atb/page-modules/departures/details';
+import { withDepartureClient } from '@atb/page-modules/departures/server';
+
+export type DeparturesDetailsPageProps = WithGlobalData<DeparturesDetailsProps>;
+const DeparturesDetailsPage: NextPage<DeparturesDetailsPageProps> = (props) => {
+  return (
+    <DefaultLayout {...props}>
+      <DeparturesDetails {...props} />
+    </DefaultLayout>
+  );
+};
+
+export default DeparturesDetailsPage;
+
+export const getServerSideProps = withGlobalData(
+  withDepartureClient<DeparturesDetailsProps, { id: string[] | undefined }>(
+    async function ({ client, params, query }) {
+      if (!params?.id || !query.date || !query.fromQuayId) {
+        return {
+          notFound: true,
+        };
+      }
+      const id = params.id.toString();
+      const date = new Date(query.date.toString());
+      const fromQuayId = query.fromQuayId.toString();
+
+      const serviceJourney = await client.serviceJourney({
+        id,
+        date,
+      });
+
+      return {
+        props: { fromQuayId, serviceJourney: serviceJourney },
+      };
+    },
+  ),
+);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 60776bd4..3b5b8777 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -36,7 +36,8 @@ html {
 
   color: var(--static-background-background_1-text);
   background-color: var(--static-background-background_1-background);
-  transition: background-color 150ms ease-in,
+  transition:
+    background-color 150ms ease-in,
     color 150ms ease-in;
 }
 
diff --git a/src/translations/pages/departures.ts b/src/translations/pages/departures.ts
index b423bcb0..8d7e8ea4 100644
--- a/src/translations/pages/departures.ts
+++ b/src/translations/pages/departures.ts
@@ -102,4 +102,52 @@ export const Departures = {
       ),
     },
   },
+  details: {
+    back: _(
+      'Tilbake til avganger',
+      'Back to departures',
+      'Tilbake til avgangar',
+    ),
+    lastPassedStop: (stopPlaceName: string, time: string) =>
+      _(
+        `Passerte ${stopPlaceName} kl. ${time}`,
+        `Passed ${stopPlaceName} at ${time}`,
+        `Passerte ${stopPlaceName} kl. ${time}`,
+      ),
+    noPassedStop: (stopPlaceName: string, time: string) =>
+      _(
+        `Kjører fra ${stopPlaceName} kl. ${time}`,
+        `Departs from ${stopPlaceName} at ${time}`,
+        `Køyrer frå ${stopPlaceName} kl. ${time}`,
+      ),
+    onTime: _(`I rute`, `On time`, `I rute`),
+    notOnTime: _(`Etter rutetid`, `Behind scheduled time`, `Etter rutetid`),
+    time: {
+      aimedPrefix: _('Rutetid', 'Route time', `Rutetid`),
+      expectedPrefix: _('Sanntid', 'Realtime', `Sanntid`),
+    },
+    collapse: {
+      label: (numberStops: number) =>
+        _(
+          `${numberStops} mellomstopp`,
+          `${numberStops} intermediate stops`,
+          `${numberStops} mellomstopp`,
+        ),
+      a11yHint: _(
+        'Aktivér for å vise alle mellomstopp.',
+        'Activate to show intermediate stops',
+        'Aktiver for å vise alle mellomstopp',
+      ),
+    },
+    messages: {
+      loading: _('Laster detaljer', 'Loading details', 'Lastar detaljar'),
+      noAlighting: _('Ingen avstigning', 'No disembarking', 'Ingen avstiging'),
+      noBoarding: _('Ingen påstigning', 'No boarding', 'Ingen påstiging'),
+      noActiveItem: _(
+        'Ojda! Noe gikk galt med lasting av detaljer for denne reisen.',
+        'Oops! We had some issues loading the details for this journey.',
+        'Oi då! Noko gjekk gale med lasting av detaljar for denne reisa.',
+      ),
+    },
+  },
 };