diff --git a/src/components/counter-box/counter-box.module.css b/src/components/counter-box/counter-box.module.css
new file mode 100644
index 000000000..503bec8ff
--- /dev/null
+++ b/src/components/counter-box/counter-box.module.css
@@ -0,0 +1,8 @@
+.counterBox {
+  background-color: token('color.background.neutral.2.background');
+  border-radius: token('border.radius.circle');
+  padding: token('spacing.small') token('spacing.medium');
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/counter-box/index.tsx b/src/components/counter-box/index.tsx
new file mode 100644
index 000000000..9e3622dd0
--- /dev/null
+++ b/src/components/counter-box/index.tsx
@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import { Typo } from '@atb/components/typography';
+import { and } from '@atb/utils/css';
+import style from './counter-box.module.css';
+
+export type CounterBoxProps = {
+  count: number;
+  notification?: ReactNode;
+  className?: string;
+};
+
+export function CounterBox({
+  count,
+  notification,
+  className,
+}: CounterBoxProps) {
+  if (count < 1) return null;
+  return (
+    <>
+      <div className={and(style.counterBox, className)}>
+        <Typo.span textType="body__m__strong">+{count}</Typo.span>
+      </div>
+      {notification}
+    </>
+  );
+}
diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
index 7bf64fd4f..3fe5f8de5 100644
--- a/src/components/icon/index.tsx
+++ b/src/components/icon/index.tsx
@@ -1,5 +1,6 @@
 export * from './color-icon';
 export * from './image';
 export * from './mono-icon';
+export * from './tinted-mono-icon';
 export * from './checkbox-icon';
 export type * from './generated-icons';
diff --git a/src/components/icon/tinted-mono-icon.tsx b/src/components/icon/tinted-mono-icon.tsx
new file mode 100644
index 000000000..6ba595099
--- /dev/null
+++ b/src/components/icon/tinted-mono-icon.tsx
@@ -0,0 +1,40 @@
+import { CSSProperties } from 'react';
+import { MonoIcons, icons } from './generated-icons';
+import { SizeProps, useSize } from './utils';
+
+export type TintedMonoIconProps = {
+  icon: MonoIcons;
+  size?: SizeProps;
+  className?: string;
+};
+
+export function TintedMonoIcon({
+  icon,
+  size = 'normal',
+  className,
+}: TintedMonoIconProps) {
+  const wh = useSize(size);
+  const maskUrl = `/assets/${icons['mono'][icon].relative.replace(
+    'mono/',
+    'mono/dark/',
+  )}`;
+
+  const maskStyle: CSSProperties = {
+    display: 'inline-block',
+    width: wh,
+    height: wh,
+    backgroundColor: 'currentColor',
+    WebkitMaskImage: `url("${maskUrl}")`,
+    maskImage: `url("${maskUrl}")`,
+    WebkitMaskRepeat: 'no-repeat',
+    maskRepeat: 'no-repeat',
+    WebkitMaskPosition: 'center',
+    maskPosition: 'center',
+    WebkitMaskSize: 'contain',
+    maskSize: 'contain',
+  };
+
+  return <span aria-hidden="true" className={className} style={maskStyle} />;
+}
+
+export default TintedMonoIcon;
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index eb41a266c..be62a6bdc 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -84,7 +84,7 @@ export default function Map({ layer, onSelectStopPlace, ...props }: MapProps) {
   }, [isMobileDevice, initializeMap]);
 
   return (
-    <div className={style.map} aria-hidden="true">
+    <div className={style.map}>
       <Button
         className={style.fullscreenButton}
         title={t(ComponentText.Map.map.openFullscreenButton)}
@@ -95,7 +95,7 @@ export default function Map({ layer, onSelectStopPlace, ...props }: MapProps) {
       <div className={style.mapWrapper} ref={mapWrapper}>
         <FocusScope
           contain={isFullscreen}
-          restoreFocus
+          restoreFocus={isFullscreen}
           autoFocus={isFullscreen}
         >
           <Button
@@ -123,6 +123,7 @@ export default function Map({ layer, onSelectStopPlace, ...props }: MapProps) {
           />
           <div
             ref={mapContainer}
+            aria-hidden="true"
             className={and(
               style.mapContainer,
               mapLegs && style.mapContainer__borderRadius,
diff --git a/src/components/message-box/index.tsx b/src/components/message-box/index.tsx
index b34a16b2f..e4107ff9e 100644
--- a/src/components/message-box/index.tsx
+++ b/src/components/message-box/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from '@atb/translations';
-import { StatusColorName, useTheme } from '@atb/modules/theme';
+import { Statuses, useTheme } from '@atb/modules/theme';
 import { andIf } from '@atb/utils/css';
 import { MonoIcon, MonoIconProps } from '@atb/components/icon';
 import { messageTypeToMonoIcon } from '@atb/modules/situations-and-notices';
@@ -11,7 +11,7 @@ import { colorToOverrideMode } from '@atb/utils/color';
 import { HTMLAttributes } from 'react';
 import Link from 'next/link';
 
-export type MessageMode = StatusColorName;
+export type MessageMode = Statuses;
 
 export type OnClickConfig = {
   text: string;
diff --git a/src/components/overflow-container/__tests__/overflow-container.test.tsx b/src/components/overflow-container/__tests__/overflow-container.test.tsx
new file mode 100644
index 000000000..a3eea1c3f
--- /dev/null
+++ b/src/components/overflow-container/__tests__/overflow-container.test.tsx
@@ -0,0 +1,43 @@
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { OverflowContainer } from '../';
+
+afterEach(function () {
+  cleanup();
+});
+
+function renderContainer(labels: string[]) {
+  return render(
+    <OverflowContainer overflow={(hiddenCount) => <span>+{hiddenCount}</span>}>
+      {labels.map((label) => (
+        <span key={label}>{label}</span>
+      ))}
+    </OverflowContainer>,
+  );
+}
+
+describe('overflow container', function () {
+  it('renders all children without marking any as overflowing', () => {
+    const output = renderContainer(['a', 'b', 'c']);
+
+    expect(output.getByText('a')).toBeInTheDocument();
+    expect(output.getByText('b')).toBeInTheDocument();
+    expect(output.getByText('c')).toBeInTheDocument();
+    expect(
+      output.container.querySelectorAll('[data-overflowing]'),
+    ).toHaveLength(0);
+  });
+
+  it('renders the worst-case overflow indicator only inside the hidden probe', () => {
+    const output = renderContainer(['a', 'b', 'c']);
+
+    const worstCase = output.getByText('+3');
+    expect(worstCase.parentElement).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders no probe when there are no children', () => {
+    const output = renderContainer([]);
+
+    expect(output.container.querySelector('[aria-hidden="true"]')).toBeNull();
+  });
+});
diff --git a/src/components/overflow-container/index.tsx b/src/components/overflow-container/index.tsx
new file mode 100644
index 000000000..797f6e5a7
--- /dev/null
+++ b/src/components/overflow-container/index.tsx
@@ -0,0 +1,62 @@
+import { Children, isValidElement, type ReactNode } from 'react';
+import { and } from '@atb/utils/css';
+import { useOverflowingChildren } from './use-overflowing-children';
+import style from './overflow-container.module.css';
+
+export type OverflowContainerProps = {
+  children: ReactNode[];
+  overflow: (hiddenCount: number) => ReactNode;
+  className?: string;
+};
+
+export function OverflowContainer({
+  children,
+  overflow,
+  className,
+}: OverflowContainerProps) {
+  const items = Children.toArray(children);
+  const keys = items.map((child, i) =>
+    isValidElement(child) && child.key != null ? child.key : `__idx_${i}`,
+  );
+
+  const {
+    rootRef,
+    overflowProbeRef,
+    visibleCount,
+    overflowIndicatorPositionLeft,
+  } = useOverflowingChildren(keys.join('|'));
+
+  const hasOverflow = visibleCount < items.length;
+  const hiddenCount = hasOverflow ? items.length - visibleCount : 0;
+
+  return (
+    <div className={and(style.container, className)}>
+      <div className={style.row} ref={rootRef}>
+        {items.map((child, i) => (
+          <div
+            key={keys[i]}
+            className={style.item}
+            data-overflowing={
+              hasOverflow && i >= visibleCount ? 'true' : undefined
+            }
+          >
+            {child}
+          </div>
+        ))}
+      </div>
+      {hasOverflow && (
+        <div
+          className={style.indicator}
+          style={{ left: overflowIndicatorPositionLeft }}
+        >
+          {overflow(hiddenCount)}
+        </div>
+      )}
+      {items.length > 0 && (
+        <div className={style.probe} aria-hidden="true" ref={overflowProbeRef}>
+          {overflow(items.length)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/overflow-container/overflow-container.module.css b/src/components/overflow-container/overflow-container.module.css
new file mode 100644
index 000000000..f3b35c3a8
--- /dev/null
+++ b/src/components/overflow-container/overflow-container.module.css
@@ -0,0 +1,41 @@
+.container {
+  position: relative;
+  min-width: 0;
+}
+
+.row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--overflow-container-gap, 0);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.item {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.item[data-overflowing='true'] {
+  visibility: hidden;
+}
+
+.indicator {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.probe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+  pointer-events: none;
+}
diff --git a/src/components/overflow-container/use-overflowing-children.ts b/src/components/overflow-container/use-overflowing-children.ts
new file mode 100644
index 000000000..c936cdfea
--- /dev/null
+++ b/src/components/overflow-container/use-overflowing-children.ts
@@ -0,0 +1,71 @@
+import { useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '@atb/utils/use-isomorphic-layout-effect';
+
+type OverflowState = {
+  visibleCount: number;
+
+  // To determine how many elements fit before overflow, we need to lay out all
+  // elements and measure (with some hidden if they don't fit).
+  // But that means that if we need an overflow indicator, another element
+  // already has its position in the flex flow
+  //
+  // Therefore, we absolutely position the overflow indicator at this position:
+  overflowIndicatorPositionLeft: number;
+};
+
+export function useOverflowingChildren(depKey: string) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const overflowProbeRef = useRef<HTMLDivElement | null>(null);
+  const [state, setState] = useState<OverflowState>({
+    visibleCount: Number.POSITIVE_INFINITY,
+    overflowIndicatorPositionLeft: 0,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current;
+    const overflowIndicatorProbe = overflowProbeRef.current;
+    if (
+      !root ||
+      !overflowIndicatorProbe ||
+      typeof ResizeObserver === 'undefined'
+    )
+      return;
+
+    const measure = () => {
+      const rootRect = root.getBoundingClientRect();
+      if (rootRect.width === 0) return;
+      const rects = Array.from(root.children, (child) =>
+        child.getBoundingClientRect(),
+      );
+      const lastRect = rects[rects.length - 1];
+      let visibleCount = rects.length;
+      let overflowIndicatorPositionLeft = 0;
+      if (lastRect && lastRect.right > rootRect.right) {
+        const gap = parseFloat(getComputedStyle(root).columnGap) || 0;
+        const limit = rootRect.right - overflowIndicatorProbe.offsetWidth - gap;
+        visibleCount = 0;
+        for (const rect of rects) {
+          if (rect.right > limit) break;
+          visibleCount++;
+          overflowIndicatorPositionLeft = rect.right - rootRect.left + gap;
+        }
+      }
+      setState((previous) =>
+        previous.visibleCount === visibleCount &&
+        previous.overflowIndicatorPositionLeft === overflowIndicatorPositionLeft
+          ? previous
+          : { visibleCount, overflowIndicatorPositionLeft },
+      );
+    };
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    observer.observe(overflowIndicatorProbe);
+    Array.from(root.children).forEach((child) => observer.observe(child));
+    measure();
+
+    return () => observer.disconnect();
+  }, [depKey]);
+
+  return { rootRef, overflowProbeRef, ...state };
+}
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index 91f04e092..8c43a1ed9 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -1,4 +1,4 @@
-import { StatusColorName, useTheme } from '@atb/modules/theme';
+import { Statuses, useTheme } from '@atb/modules/theme';
 import { andIf } from '@atb/utils/css';
 import { ColorIcon, MonoIcon, MonoIcons } from '@atb/components/icon';
 import { messageTypeToColorIcon } from '@atb/modules/situations-and-notices';
@@ -7,7 +7,7 @@ import { Typo } from '@atb/components/typography';
 import style from './tag.module.css';
 import { HTMLAttributes } from 'react';
 
-type TagStatuses = 'primary' | 'secondary' | StatusColorName;
+type TagStatuses = 'primary' | 'secondary' | Statuses;
 
 type TagSize = 'small' | 'regular';
 
diff --git a/src/modules/situations-and-notices/__tests__/utils.test.ts b/src/modules/situations-and-notices/__tests__/utils.test.ts
index 31de0f831..6654780da 100644
--- a/src/modules/situations-and-notices/__tests__/utils.test.ts
+++ b/src/modules/situations-and-notices/__tests__/utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { getAffectedStopNames } from '../utils';
+import { getAffectedStopNames, getMostCriticalStatus } from '../utils';
 import { SituationFragment } from '@atb/page-modules/assistant/journey-gql/trip-with-details.generated.ts';
 
 type Affects = SituationFragment['affects'];
@@ -52,3 +52,24 @@ describe('getAffectedStopNames', () => {
     expect(getAffectedStopNames(affects)).toEqual(['A', 'B']);
   });
 });
+
+describe('getMostCriticalStatusColor', () => {
+  it('returns undefined for an empty list', () => {
+    expect(getMostCriticalStatus([])).toBeUndefined();
+  });
+
+  it('returns undefined when every entry is undefined', () => {
+    expect(getMostCriticalStatus([undefined, undefined])).toBeUndefined();
+  });
+
+  it('ignores undefined entries', () => {
+    expect(getMostCriticalStatus([undefined, 'info', undefined])).toBe('info');
+  });
+
+  it('picks the most severe status regardless of order', () => {
+    expect(getMostCriticalStatus(['valid', 'error', 'info', 'warning'])).toBe(
+      'error',
+    );
+    expect(getMostCriticalStatus(['info', 'warning', 'valid'])).toBe('warning');
+  });
+});
diff --git a/src/modules/situations-and-notices/utils.ts b/src/modules/situations-and-notices/utils.ts
index 4471c89a7..0fdb480e5 100644
--- a/src/modules/situations-and-notices/utils.ts
+++ b/src/modules/situations-and-notices/utils.ts
@@ -4,7 +4,7 @@ import { getTextForLanguage } from '@atb/translations/utils';
 import { daysBetween, isBetween } from '@atb/utils/date';
 import { onlyUniques, onlyUniquesBasedOnField } from '@atb/utils/only-uniques';
 import { isDefined } from '@atb/utils/presence';
-import { StatusColorName } from '@atb/modules/theme';
+import { Statuses } from '@atb/modules/theme';
 import { isAfter, isBefore } from 'date-fns';
 import {
   NoticeFragment,
@@ -18,7 +18,7 @@ export const getMsgTypeForMostCriticalSituationOrNotice = (
   situations: SituationFragment[],
   notices?: NoticeFragment[],
   cancellation: boolean = false,
-): StatusColorName | undefined => {
+): Statuses | undefined => {
   if (cancellation) return 'error';
   if (!situations.length) {
     return notices?.length ? 'info' : undefined;
@@ -32,6 +32,24 @@ export const getMsgTypeForMostCriticalSituationOrNotice = (
     );
 };
 
+const statusSeverity: Record<Statuses, number> = {
+  error: 3,
+  warning: 2,
+  info: 1,
+  valid: 0,
+};
+
+export const getMostCriticalStatus = (
+  statusColors: (Statuses | undefined)[],
+): Statuses | undefined =>
+  statusColors.reduce<Statuses | undefined>((mostCritical, current) => {
+    if (!current) return mostCritical;
+    if (!mostCritical) return current;
+    return statusSeverity[current] >= statusSeverity[mostCritical]
+      ? current
+      : mostCritical;
+  }, undefined);
+
 export const getIconForMostCriticalSituationOrNotice = (
   situations: SituationFragment[],
   notices?: NoticeFragment[],
@@ -45,9 +63,7 @@ export const getIconForMostCriticalSituationOrNotice = (
   return msgType && messageTypeToColorIcon(msgType);
 };
 
-export const messageTypeToColorIcon = (
-  messageType: StatusColorName,
-): ColorIcons => {
+export const messageTypeToColorIcon = (messageType: Statuses): ColorIcons => {
   switch (messageType) {
     case 'warning':
       return 'status/Warning';
@@ -60,9 +76,7 @@ export const messageTypeToColorIcon = (
   }
 };
 
-export const messageTypeToMonoIcon = (
-  messageType: StatusColorName,
-): MonoIcons => {
+export const messageTypeToMonoIcon = (messageType: Statuses): MonoIcons => {
   switch (messageType) {
     case 'warning':
       return 'status/Warning';
diff --git a/src/modules/theme/index.ts b/src/modules/theme/index.ts
index ced8c233d..af16320a6 100644
--- a/src/modules/theme/index.ts
+++ b/src/modules/theme/index.ts
@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 export type {
   InteractiveColor,
   InteractiveState,
-  StatusColorName,
+  StatusColorName as Statuses,
   TransportColors,
   ContrastColor,
   TextColorType,
diff --git a/src/modules/transport-mode/icon/icon.module.css b/src/modules/transport-mode/icon/icon.module.css
index 62bc03e78..4ac35a48f 100644
--- a/src/modules/transport-mode/icon/icon.module.css
+++ b/src/modules/transport-mode/icon/icon.module.css
@@ -3,20 +3,43 @@
   gap: 0.125rem;
 }
 
-.transportIcon,
-.transportIconWithLabel {
+.transportIcon {
   display: inline-block;
-  border-radius: token('border.radius.small');
+  border-radius: token('border.radius.circle');
   padding: token('spacing.xSmall');
 }
 
+.transportIconWithLabelContainer {
+  display: flex;
+  align-items: center;
+}
+
 .transportIconWithLabel {
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: token('border.radius.circle');
   padding: token('spacing.small') token('spacing.medium');
 }
 
+.transportIconWithLabel__hasNotification {
+  padding-right: calc(token('spacing.medium') + token('spacing.small'));
+}
+
+.transportIconNotification {
+  margin-left: calc(
+    -1 * (token('border.width.medium') + token('icon.size.small') / 2)
+  );
+  background-color: token('color.background.neutral.0.background');
+  border-radius: 50%;
+  padding: token('border.width.medium');
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
 .transportIcon img,
 .transportIconWithLabel img {
   display: block;
diff --git a/src/modules/transport-mode/icon/index.tsx b/src/modules/transport-mode/icon/index.tsx
index 341bbef12..586403749 100644
--- a/src/modules/transport-mode/icon/index.tsx
+++ b/src/modules/transport-mode/icon/index.tsx
@@ -1,10 +1,18 @@
 import MonoIcon, { MonoIconProps } from '@atb/components/icon/mono-icon';
-import { ContrastColor, TransportColors, useTheme } from '@atb/modules/theme';
+import { ColorIcon } from '@atb/components/icon';
+import {
+  ContrastColor,
+  Statuses,
+  TransportColors,
+  useTheme,
+} from '@atb/modules/theme';
 import { useTranslation } from '@atb/translations';
 import { isSubModeBoat, transportModeToTranslatedString } from '../utils';
 import { colorToOverrideMode } from '@atb/utils/color';
 import { Typo } from '@atb/components/typography';
 import { secondsToMinutes } from '@atb/utils/date';
+import { messageTypeToColorIcon } from '@atb/modules/situations-and-notices';
+import { and } from '@atb/utils/css';
 
 import style from './icon.module.css';
 import { TransportSubmode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
@@ -24,11 +32,22 @@ export function TransportIcon({
   isFlexible,
 }: TransportIconProps) {
   const { t } = useTranslation();
-  const { backgroundColor, overrideMode } = useTransportationThemeColor({
+  const {
+    color: { background },
+  } = useTheme();
+  let { backgroundColor, overrideMode } = useTransportationThemeColor({
     transportMode,
     transportSubmode,
     isFlexible,
   });
+
+  if (transportMode === 'foot') {
+    backgroundColor = background.neutral[2].background;
+    overrideMode = colorToOverrideMode(
+      background.neutral[2].foreground.primary,
+    );
+  }
+
   return (
     <span className={style.transportIcon} style={{ backgroundColor }}>
       <MonoIcon
@@ -61,6 +80,7 @@ export type TransportIconWithDurationProps = {
   label?: string;
   duration?: number;
   isFlexible?: boolean;
+  notificationType?: Statuses;
 };
 
 export function TransportIconWithDuration({
@@ -69,6 +89,7 @@ export function TransportIconWithDuration({
   label,
   duration,
   isFlexible,
+  notificationType,
 }: TransportIconWithDurationProps) {
   const { t } = useTranslation();
   const {
@@ -91,9 +112,12 @@ export function TransportIconWithDuration({
     };
   }
 
-  return (
+  const pill = (
     <span
-      className={style.transportIconWithLabel}
+      className={and(
+        style.transportIconWithLabel,
+        notificationType && style.transportIconWithLabel__hasNotification,
+      )}
       style={{ backgroundColor: colors.backgroundColor }}
     >
       <MonoIcon
@@ -121,6 +145,29 @@ export function TransportIconWithDuration({
       )}
     </span>
   );
+
+  if (!notificationType) return pill;
+
+  return (
+    <span className={style.transportIconWithLabelContainer}>
+      {pill}
+      <TransportNotificationBadge notificationType={notificationType} />
+    </span>
+  );
+}
+
+export type TransportNotificationBadgeProps = {
+  notificationType: Statuses;
+};
+
+export function TransportNotificationBadge({
+  notificationType,
+}: TransportNotificationBadgeProps) {
+  return (
+    <span className={style.transportIconNotification} aria-hidden="true">
+      <ColorIcon icon={messageTypeToColorIcon(notificationType)} size="small" />
+    </span>
+  );
 }
 
 export function useTransportationThemeColor(props: {
diff --git a/src/page-modules/assistant/client/journey-planner/index.ts b/src/page-modules/assistant/client/journey-planner/index.ts
index 8c89b882d..24d25e3d7 100644
--- a/src/page-modules/assistant/client/journey-planner/index.ts
+++ b/src/page-modules/assistant/client/journey-planner/index.ts
@@ -108,7 +108,8 @@ function getTripPatternCount(data: TripApiReturnType[] | undefined) {
   return data?.reduce((acc, curr) => acc + curr.tripPatterns.length, 0) ?? 0;
 }
 
-const TRIP_REFRESH_INTERVAL_MS = 30_000;
+const TRIP_REFRESH_INTERVAL_MS = 30000;
+const TRIP_REFRESH_DEDUPE_MS = 30000;
 
 /**
  * Polls /api/assistant/refresh-trip with the given (original) trip pattern,
@@ -127,7 +128,9 @@ export function useRefreshedTripPattern(
     swrPostFetcher,
     {
       refreshInterval: TRIP_REFRESH_INTERVAL_MS,
+      dedupingInterval: TRIP_REFRESH_DEDUPE_MS,
       revalidateOnFocus: false,
+      revalidateOnMount: false,
     },
   );
 
diff --git a/src/page-modules/assistant/details/details-header/index.tsx b/src/page-modules/assistant/details/details-header/index.tsx
index d57b2f436..ad8219fe9 100644
--- a/src/page-modules/assistant/details/details-header/index.tsx
+++ b/src/page-modules/assistant/details/details-header/index.tsx
@@ -88,7 +88,6 @@ export function AssistantDetailsHeader({ tripPattern }: DetailsHeaderProps) {
         <div className={style.duration} data-testid={'detailsHeader-duration'}>
           <Price
             tripPattern={tripPattern}
-            inView={true}
             behaviour={{ ifFound: 'show-icon' }}
           />
         </div>
diff --git a/src/page-modules/assistant/details/trip-section/index.tsx b/src/page-modules/assistant/details/trip-section/index.tsx
index 6efc448ba..79de9cc3a 100644
--- a/src/page-modules/assistant/details/trip-section/index.tsx
+++ b/src/page-modules/assistant/details/trip-section/index.tsx
@@ -5,7 +5,7 @@ import {
 } from '@atb/modules/trip-details';
 import style from './trip-section.module.css';
 import {
-  TransportIcon,
+  TransportIconWithDuration,
   useTransportationThemeColor,
 } from '@atb/modules/transport-mode';
 import { Typo } from '@atb/components/typography';
@@ -18,7 +18,7 @@ import {
 } from '@atb/modules/situations-and-notices';
 import { PageText, useTranslation } from '@atb/translations';
 import { InterchangeDetails, InterchangeSection } from './interchange-section';
-import { formatLineName, getPlaceName } from '../utils';
+import { getLineDestinationName, getPlaceName } from '../utils';
 import WaitSection, { type LegWaitDetails } from './wait-section';
 import { EstimatedCallsSection } from './estimated-calls-section';
 import { DepartureTime } from '@atb/components/departure-time';
@@ -118,25 +118,26 @@ export default function TripSection({
         )}
 
         {isWalkSection ? (
-          <WalkSection walkDuration={leg.duration} />
+          <WalkSection
+            walkDuration={leg.duration}
+            walkDistance={leg.distance}
+          />
         ) : (
-          <TripRow
-            rowLabel={
-              <TransportIcon
+          <TripRow>
+            <div className={style.transportLine}>
+              <TransportIconWithDuration
                 transportMode={leg.mode}
                 transportSubmode={leg.transportSubmode}
+                label={leg.line?.publicCode ?? undefined}
                 isFlexible={isFlexible}
-                size="xSmall"
               />
-            }
-          >
-            <Typo.p textType="body__m__strong">
-              {formatLineName(
-                leg.fromEstimatedCall?.destinationDisplay?.frontText,
-                leg.line?.name,
-                leg.line?.publicCode,
-              )}
-            </Typo.p>
+              <Typo.p textType="body__m__strong">
+                {getLineDestinationName(
+                  leg.fromEstimatedCall?.destinationDisplay?.frontText,
+                  leg.line?.name,
+                )}
+              </Typo.p>
+            </div>
             {isFlexible && (
               <Typo.p
                 textType="body__s"
diff --git a/src/page-modules/assistant/details/trip-section/trip-section.module.css b/src/page-modules/assistant/details/trip-section/trip-section.module.css
index ee1c30600..ae02e6cab 100644
--- a/src/page-modules/assistant/details/trip-section/trip-section.module.css
+++ b/src/page-modules/assistant/details/trip-section/trip-section.module.css
@@ -36,3 +36,8 @@
   color: token('color.foreground.dynamic.secondary');
   padding-top: token('spacing.small');
 }
+.transportLine {
+  display: flex;
+  align-items: center;
+  gap: token('spacing.small');
+}
diff --git a/src/page-modules/assistant/details/trip-section/walk-section.tsx b/src/page-modules/assistant/details/trip-section/walk-section.tsx
index 33d03dc5e..7529ce3fb 100644
--- a/src/page-modules/assistant/details/trip-section/walk-section.tsx
+++ b/src/page-modules/assistant/details/trip-section/walk-section.tsx
@@ -3,6 +3,7 @@ import { TransportIcon } from '@atb/modules/transport-mode';
 import { TripRow } from '@atb/modules/trip-details';
 import { PageText, useTranslation } from '@atb/translations';
 import { secondsToDuration } from '@atb/utils/date';
+import { humanizeDistance } from '@atb/utils/distance';
 import style from './trip-section.module.css';
 import { Mode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
 
@@ -10,25 +11,39 @@ const MIN_SIGNIFICANT_WALK_IN_SECONDS = 30;
 
 export type WalkSectionProps = {
   walkDuration: number;
+  walkDistance?: number;
 };
 
-export default function WalkSection({ walkDuration }: WalkSectionProps) {
+export default function WalkSection({
+  walkDuration,
+  walkDistance,
+}: WalkSectionProps) {
   const { t, language } = useTranslation();
   const isWalkTimeOfSignificance =
     walkDuration > MIN_SIGNIFICANT_WALK_IN_SECONDS;
+
+  const durationText = secondsToDuration(walkDuration, language);
+  const distanceText = walkDistance ? humanizeDistance(walkDistance, t) : '';
+
+  const walkText = !isWalkTimeOfSignificance
+    ? t(PageText.Assistant.details.tripSection.shortWalk)
+    : distanceText
+      ? t(
+          PageText.Assistant.details.tripSection.walk.labelWithDistance(
+            durationText,
+            distanceText,
+          ),
+        )
+      : t(PageText.Assistant.details.tripSection.walk.label(durationText));
+
   return (
-    <TripRow
-      rowLabel={<TransportIcon transportMode={Mode.Foot} size="xSmall" />}
-    >
-      <Typo.p textType="body__s" className={style.walkTime}>
-        {isWalkTimeOfSignificance
-          ? t(
-              PageText.Assistant.details.tripSection.walk.label(
-                secondsToDuration(walkDuration, language),
-              ),
-            )
-          : t(PageText.Assistant.details.tripSection.shortWalk)}
-      </Typo.p>
+    <TripRow>
+      <div className={style.transportLine}>
+        <TransportIcon transportMode={Mode.Foot} />
+        <Typo.p textType="body__s" className={style.walkTime}>
+          {walkText}
+        </Typo.p>
+      </div>
     </TripRow>
   );
 }
diff --git a/src/page-modules/assistant/details/utils.ts b/src/page-modules/assistant/details/utils.ts
index 0f3f33629..ca3ae0613 100644
--- a/src/page-modules/assistant/details/utils.ts
+++ b/src/page-modules/assistant/details/utils.ts
@@ -24,11 +24,9 @@ export function getPlaceName(
     : fallback;
 }
 
-export function formatLineName(
+export function getLineDestinationName(
   frontText?: string,
   lineName?: string,
-  publicCode?: string | null,
 ): string {
-  const name = frontText ?? lineName ?? '';
-  return publicCode ? `${publicCode} ${name}` : name;
+  return frontText ?? lineName ?? '';
 }
diff --git a/src/page-modules/assistant/server/journey-planner/index.ts b/src/page-modules/assistant/server/journey-planner/index.ts
index b4d7572cc..3d6e8fdb7 100644
--- a/src/page-modules/assistant/server/journey-planner/index.ts
+++ b/src/page-modules/assistant/server/journey-planner/index.ts
@@ -319,7 +319,7 @@ export function createJourneyApi(
       return {
         trip: {
           tripPatterns: [
-            {
+            withDerivedTripTimes({
               ...singleTripPattern,
               compressedQuery: generateSingleTripQueryString(
                 extractServiceJourneyIds(singleTripPattern),
@@ -329,7 +329,7 @@ export function createJourneyApi(
               legs: singleTripPattern.legs.map((leg) =>
                 extendLeg(leg, refreshedAt),
               ),
-            },
+            }),
           ],
         },
       };
@@ -524,6 +524,31 @@ function generateSingleTripQueryString(
   );
 }
 
+function withDerivedTripTimes<
+  T extends {
+    legs: ExtendedLegType[];
+    expectedStartTime: string;
+    expectedEndTime: string;
+  },
+>(
+  tripPattern: T,
+): T & {
+  aimedStartTime: string;
+  aimedEndTime: string;
+} {
+  const adjustedLegs = adjustNonTransitExpectedTimes(tripPattern.legs);
+  const { aimedStartTime, aimedEndTime } =
+    computeTripAimedStartEnd(adjustedLegs);
+  return {
+    ...tripPattern,
+    aimedStartTime,
+    aimedEndTime,
+    expectedStartTime: adjustedLegs[0].expectedStartTime,
+    expectedEndTime: adjustedLegs[adjustedLegs.length - 1].expectedEndTime,
+    legs: adjustedLegs,
+  };
+}
+
 export function mapRawTripResponse(
   rawTrip: TripsWithDetailsQuery['trip'],
   queryVariables: TripsWithDetailsQueryVariables,
@@ -531,15 +556,17 @@ export function mapRawTripResponse(
   const refreshedAt = new Date().toISOString();
   return {
     ...rawTrip,
-    tripPatterns: rawTrip.tripPatterns.map((tripPattern) => ({
-      ...tripPattern,
-      compressedQuery: generateSingleTripQueryString(
-        extractServiceJourneyIds(tripPattern),
-        tripPattern.legs[0].aimedStartTime,
-        queryVariables,
-      ),
-      legs: tripPattern.legs.map((leg) => extendLeg(leg, refreshedAt)),
-    })),
+    tripPatterns: rawTrip.tripPatterns.map((tripPattern) =>
+      withDerivedTripTimes({
+        ...tripPattern,
+        compressedQuery: generateSingleTripQueryString(
+          extractServiceJourneyIds(tripPattern),
+          tripPattern.legs[0].aimedStartTime,
+          queryVariables,
+        ),
+        legs: tripPattern.legs.map((leg) => extendLeg(leg, refreshedAt)),
+      }),
+    ),
   };
 }
 
@@ -730,15 +757,17 @@ async function getSortedViaTrips(
 
   return {
     trip: {
-      tripPatterns: tripPatternsSortedByExpectedEndTime.map((tripPattern) => ({
-        ...tripPattern,
-        compressedQuery: generateSingleTripQueryString(
-          extractServiceJourneyIds(tripPattern),
-          tripPattern.legs[0].aimedStartTime,
-          queryVariables,
-        ),
-        legs: tripPattern.legs.map((leg) => extendLeg(leg, refreshedAt)),
-      })),
+      tripPatterns: tripPatternsSortedByExpectedEndTime.map((tripPattern) =>
+        withDerivedTripTimes({
+          ...tripPattern,
+          compressedQuery: generateSingleTripQueryString(
+            extractServiceJourneyIds(tripPattern),
+            tripPattern.legs[0].aimedStartTime,
+            queryVariables,
+          ),
+          legs: tripPattern.legs.map((leg) => extendLeg(leg, refreshedAt)),
+        }),
+      ),
     },
   };
 }
diff --git a/src/page-modules/assistant/trip-summary-panel/index.tsx b/src/page-modules/assistant/trip-summary-panel/index.tsx
index b84c343db..0720ec1cc 100644
--- a/src/page-modules/assistant/trip-summary-panel/index.tsx
+++ b/src/page-modules/assistant/trip-summary-panel/index.tsx
@@ -2,6 +2,7 @@ import { Map } from '@atb/components/map';
 import { MonoIcon } from '@atb/components/icon';
 import { PageText, useTranslation } from '@atb/translations';
 import { secondsBetween, secondsToDurationShort } from '@atb/utils/date';
+import { humanizeDistance } from '@atb/utils/distance';
 import {
   ExtendedLegType,
   ExtendedTripPatternWithDetailsType,
@@ -25,7 +26,7 @@ export function TripSummaryPanel({ tripPattern }: TripSummaryPanelProps) {
     secondsBetween(tripPattern.expectedStartTime, tripPattern.expectedEndTime),
     language,
   );
-  const walkDistance = (tripPattern.streetDistance ?? 0).toFixed();
+  const walkDistance = humanizeDistance(tripPattern.streetDistance ?? 0, t);
 
   return (
     <div className={style.container}>
@@ -41,11 +42,7 @@ export function TripSummaryPanel({ tripPattern }: TripSummaryPanelProps) {
         />
         <SummaryRow
           icon={<MonoIcon icon="transportation/WalkFill" />}
-          value={t(
-            PageText.Assistant.details.summaryPanel.walkDistanceValue(
-              walkDistance,
-            ),
-          )}
+          value={walkDistance}
           label={t(PageText.Assistant.details.summaryPanel.walkDistanceLabel)}
         />
       </div>
diff --git a/src/page-modules/assistant/trip-summary-panel/trip-summary-panel.module.css b/src/page-modules/assistant/trip-summary-panel/trip-summary-panel.module.css
index 92582b17e..5d51e5645 100644
--- a/src/page-modules/assistant/trip-summary-panel/trip-summary-panel.module.css
+++ b/src/page-modules/assistant/trip-summary-panel/trip-summary-panel.module.css
@@ -5,7 +5,7 @@
 }
 
 .mapContainer {
-  height: 37.5rem;
+  min-height: 20rem;
   width: 100%;
 }
 
@@ -42,6 +42,6 @@
 
 @media (max-width: 650px) {
   .mapContainer {
-    height: auto;
+    min-height: auto;
   }
 }
diff --git a/src/page-modules/assistant/trip/trip-pattern/index.tsx b/src/page-modules/assistant/trip/trip-pattern/index.tsx
index 3eea88445..c7a2cb0df 100644
--- a/src/page-modules/assistant/trip/trip-pattern/index.tsx
+++ b/src/page-modules/assistant/trip/trip-pattern/index.tsx
@@ -1,32 +1,41 @@
-import { useClientWidth } from '@atb/utils/use-client-width';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Fragment, useEffect, useId, useState } from 'react';
+import { useId, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 import { getFilteredLegsByWalkOrWaitTime, tripSummary } from './utils';
 import { PageText, useTranslation } from '@atb/translations';
 import style from './trip-pattern.module.css';
-import { formatToClock, isInPast, secondsBetween } from '@atb/utils/date';
+import { isInPast, secondsBetween } from '@atb/utils/date';
 import { TripPatternHeader } from './trip-pattern-header';
-import { MonoIcon } from '@atb/components/icon';
-import { Typo } from '@atb/components/typography';
-import { TransportIconWithDuration } from '@atb/modules/transport-mode';
+import { MonoIcon, TintedMonoIcon } from '@atb/components/icon';
+import {
+  TransportIconWithDuration,
+  TransportNotificationBadge,
+} from '@atb/modules/transport-mode';
 import { andIf } from '@atb/utils/css';
 import { useRouter } from 'next/router';
-import {
-  getBookingStatus,
-  isLineFlexibleTransport,
-} from '@atb/modules/flexible';
+import { isLineFlexibleTransport } from '@atb/modules/flexible';
 import {
   ExtendedLegType,
   ExtendedTripPatternWithDetailsType,
 } from '@atb/page-modules/assistant';
+import { useRefreshedTripPattern } from '@atb/page-modules/assistant/client';
 import { Button, ButtonLink } from '@atb/components/button';
-import { AssistantDetailsBody } from '@atb/page-modules/assistant/details-body';
-import { Price } from './price';
-import { useInView } from 'react-intersection-observer';
-import { Tag } from '@atb/components/tag';
+import TripSection from '@atb/page-modules/assistant/details/trip-section';
+import { getInterchangeDetails } from '@atb/page-modules/assistant/details/trip-section/interchange-section.tsx';
+import { getLegWaitDetails } from '@atb/page-modules/assistant/details/trip-section/wait-section.tsx';
+import { TripSummaryPanel } from '@atb/page-modules/assistant/trip-summary-panel';
+import {
+  getMostCriticalStatus,
+  getMsgTypeForMostCriticalSituationOrNotice,
+} from '@atb/modules/situations-and-notices';
+import { getNoticesForLeg } from '@atb/page-modules/assistant/utils';
+import { Statuses } from '@atb/modules/theme';
+import { TransportSubmode } from '@atb/modules/graphql-types/journeyplanner-types_v3.generated.ts';
+import { OverflowContainer } from '@atb/components/overflow-container';
+import { CounterBox } from '@atb/components/counter-box';
 
-const LAST_LEG_PADDING = 20;
-const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS = 60;
+const SHORT_TRANSFER_SECONDS = 180;
+const MIN_SIGNIFICANT_WAIT_SECONDS = 30;
 const ANIMATION_DURATION = 0.2;
 
 type TripPatternProps = {
@@ -36,6 +45,48 @@ type TripPatternProps = {
   testId?: string;
 };
 
+function getLegOverflowNotificationType(
+  leg: ExtendedLegType,
+): Statuses | undefined {
+  return getMsgTypeForMostCriticalSituationOrNotice(
+    leg.situations,
+    getNoticesForLeg(leg),
+    leg.fromEstimatedCall?.cancellation,
+  );
+}
+
+function getLegNotificationType(
+  leg: ExtendedLegType,
+  previousLeg: ExtendedLegType | undefined,
+): Statuses | undefined {
+  const situationsMsgType = getLegOverflowNotificationType(leg);
+  const railReplacementMsgType =
+    leg.transportSubmode === TransportSubmode.RailReplacementBus
+      ? ('warning' as const)
+      : undefined;
+  const bookingMsgType = leg.bookingArrangements
+    ? ('warning' as const)
+    : undefined;
+  const shortTransferMsgType: Statuses | undefined = (() => {
+    if (!previousLeg) return undefined;
+    const waitSeconds = secondsBetween(
+      previousLeg.expectedEndTime,
+      leg.expectedStartTime,
+    );
+    return waitSeconds > MIN_SIGNIFICANT_WAIT_SECONDS &&
+      waitSeconds <= SHORT_TRANSFER_SECONDS
+      ? 'info'
+      : undefined;
+  })();
+
+  return getMostCriticalStatus([
+    situationsMsgType,
+    railReplacementMsgType,
+    bookingMsgType,
+    shortTransferMsgType,
+  ]);
+}
+
 export default function TripPattern({
   tripPattern,
   delay,
@@ -44,33 +95,11 @@ export default function TripPattern({
 }: TripPatternProps) {
   const { t, language } = useTranslation();
 
-  const filteredLegs = getFilteredLegsByWalkOrWaitTime(tripPattern);
-
-  const [numberOfExpandedLegs, setNumberOfExpandedLegs] = useState(
-    filteredLegs.length,
-  );
   const [isOpen, setIsOpen] = useState(false);
   const router = useRouter();
   const id = useId();
 
-  const expandedLegs = filteredLegs.slice(0, numberOfExpandedLegs);
-  const collapsedLegs = filteredLegs.slice(
-    numberOfExpandedLegs,
-    filteredLegs.length,
-  );
-
-  const [legsParentWidth, legsParentRef] = useClientWidth<HTMLDivElement>();
-  const [legsContentWidth, legsContentRef] = useClientWidth<HTMLDivElement>();
-
-  // Dynamically collapse legs to fit horizontally
-  useEffect(() => {
-    if (legsParentWidth && legsContentWidth) {
-      if (legsContentWidth >= legsParentWidth - LAST_LEG_PADDING) {
-        setNumberOfExpandedLegs((val) => Math.max(val - 1, 1));
-      }
-      // TODO: Increase expanded legs if there is space?
-    }
-  }, [legsParentWidth, legsContentWidth]);
+  const { ref, inView } = useInView({ rootMargin: '100px' });
 
   const tripIsInPast = isInPast(tripPattern.legs[0].expectedStartTime);
 
@@ -78,32 +107,40 @@ export default function TripPattern({
     (leg) => leg.fromEstimatedCall?.cancellation,
   );
 
-  const className = andIf({
-    [style.tripPattern]: true,
-  });
+  const { refreshedTripPattern } = useRefreshedTripPattern(tripPattern, inView);
+  const displayTripPattern = refreshedTripPattern ?? tripPattern;
+
+  const filteredLegs = getFilteredLegsByWalkOrWaitTime(displayTripPattern);
 
   const staySeated = (idx: number) => {
-    const leg = expandedLegs[idx];
+    const leg = filteredLegs[idx];
     return leg && leg.interchangeTo?.staySeated === true;
   };
 
-  const isNotLastLeg = (i: number) => {
-    return i < expandedLegs.length - 1 || collapsedLegs.length > 0;
-  };
+  const renderedLegs = filteredLegs
+    .map((leg, originalIndex) => ({ leg, originalIndex }))
+    .filter(({ originalIndex }) => !staySeated(originalIndex - 1));
 
-  const { ref, inView } = useInView({
-    triggerOnce: true,
-    rootMargin: '100px',
-    threshold: 0,
-  });
+  const legNotificationTypes = renderedLegs.map(({ leg, originalIndex }) =>
+    getLegNotificationType(leg, filteredLegs[originalIndex - 1]),
+  );
 
-  const requireTicketBooking = tripPattern.legs.some((leg: ExtendedLegType) => {
-    if (!leg.bookingArrangements) return false;
-    return (
-      getBookingStatus(leg.bookingArrangements, leg.aimedStartTime, 7) !==
-      'none'
-    );
-  });
+  const renderLeg = (
+    { leg }: { leg: ExtendedLegType; originalIndex: number },
+    i: number,
+  ) => (
+    <TransportIconWithDuration
+      key={leg.id ?? i}
+      transportMode={leg.mode}
+      transportSubmode={leg.transportSubmode}
+      label={
+        leg.mode === 'foot' ? undefined : (leg.line?.publicCode ?? undefined)
+      }
+      duration={leg.mode === 'foot' ? leg.duration : undefined}
+      isFlexible={isLineFlexibleTransport(leg.line)}
+      notificationType={legNotificationTypes[i]}
+    />
+  );
 
   return (
     <div ref={ref} className={style.tripPatternContainer}>
@@ -119,16 +156,16 @@ export default function TripPattern({
           }
         }}
         aria-expanded={isOpen}
-        className={className}
+        className={style.tripPattern}
         data-testid={testId}
         initial={{ opacity: 0, x: -10 }}
         animate={{ opacity: 1, x: 0 }}
         exit={{ opacity: 0, x: -10 }}
         transition={{
-          delay, // staggerChildren on parent only works first render
+          delay,
         }}
         aria-label={`${tripSummary(
-          tripPattern,
+          displayTripPattern,
           t,
           language,
           tripIsInPast,
@@ -137,149 +174,40 @@ export default function TripPattern({
         )}. ${isOpen ? t(PageText.Assistant.trip.tripPattern.activateToCollapse) : t(PageText.Assistant.trip.tripPattern.activateToExpand)}`}
       >
         <TripPatternHeader
-          tripPattern={tripPattern}
+          tripPattern={displayTripPattern}
           isCancelled={isCancelled}
         />
 
         <div className={style.legs}>
-          <div
-            className={style.legs__expandedLegsContainer}
-            ref={legsParentRef}
+          <OverflowContainer
+            className={style.legs__legsAndLine}
+            overflow={(hiddenCount) => {
+              const notificationType = getMostCriticalStatus(
+                legNotificationTypes.slice(-hiddenCount),
+              );
+              return (
+                <CounterBox
+                  count={hiddenCount}
+                  notification={
+                    notificationType && (
+                      <TransportNotificationBadge
+                        notificationType={notificationType}
+                      />
+                    )
+                  }
+                />
+              );
+            }}
           >
-            <div className={style.legs__expandedLegs} ref={legsContentRef}>
-              {expandedLegs.map((leg, i) => (
-                <Fragment key={`leg-${leg.expectedStartTime}-${i}`}>
-                  {staySeated(i - 1) ? null : (
-                    <div className={style.legs__leg}>
-                      {leg.mode ? (
-                        <TransportIconWithDuration
-                          transportMode={leg.mode}
-                          transportSubmode={leg.transportSubmode}
-                          label={leg.line?.publicCode ?? undefined}
-                          duration={
-                            leg.mode === 'foot' ? leg.duration : undefined
-                          }
-                          isFlexible={isLineFlexibleTransport(leg.line)}
-                        />
-                      ) : (
-                        <div className={style.legs__leg__walkIcon}>
-                          <MonoIcon icon="transportation/WalkFill" />
-                        </div>
-                      )}
-
-                      <div
-                        className={style.timeStartContainer}
-                        data-testid={`timeStartContainer-${i}`}
-                      >
-                        {secondsBetween(
-                          leg.aimedStartTime,
-                          leg.expectedStartTime,
-                        ) > DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS ? (
-                          <>
-                            <Typo.span
-                              textType="body__xs"
-                              testID="expStartTime"
-                            >
-                              {formatToClock(
-                                leg.expectedStartTime,
-                                language,
-                                'floor',
-                              )}
-                            </Typo.span>
-                            <Typo.span
-                              textType="body__xs__strike"
-                              className={style.outdatet}
-                              testID="aimedStartTime"
-                            >
-                              {formatToClock(
-                                leg.aimedStartTime,
-                                language,
-                                'floor',
-                              )}
-                            </Typo.span>
-                          </>
-                        ) : (
-                          <Typo.span
-                            textType={
-                              isCancelled ? 'body__xs__strike' : 'body__xs'
-                            }
-                            testID="expStartTime"
-                          >
-                            {formatToClock(
-                              leg.aimedStartTime,
-                              language,
-                              'floor',
-                            )}
-                          </Typo.span>
-                        )}
-                      </div>
-                    </div>
-                  )}
-
-                  {isNotLastLeg(i) && !staySeated(i) && (
-                    <div className={style.legs__legLineContainer}>
-                      <div className={style.legs__legLine} />
-                      <div className={style.legs__legLine} />
-                    </div>
-                  )}
-                </Fragment>
-              ))}
-
-              {collapsedLegs.length > 0 && (
-                <div className={style.legs__collapsedLegs}>
-                  <Typo.span textType="body__m__strong">
-                    +{collapsedLegs.length}
-                  </Typo.span>
-                </div>
-              )}
-            </div>
-
-            <div className={style.legs__lastLegLineContainer}>
-              <div className={style.legs__lastLegLine} />
-            </div>
-          </div>
-
-          <div className={style.legs__lastLeg}>
-            <div className={style.legs__lastLeg__icon}>
-              <MonoIcon icon="places/Destination" />
-            </div>
-            <Typo.span
-              textType={isCancelled ? 'body__xs__strike' : 'body__xs'}
-              testID="expEndTime"
-            >
-              {formatToClock(tripPattern.expectedEndTime, language, 'ceil')}
-            </Typo.span>
-          </div>
-        </div>
-        <footer className={style.footer}>
-          <div className={style.info__container}>
-            {tripIsInPast && (
-              <Tag
-                type="warning"
-                message={t(PageText.Assistant.trip.tripPattern.passedTrip)}
-                testID="tripIsInPast"
-              />
-            )}
-            {requireTicketBooking && (
-              <Tag
-                type="warning"
-                message={t(PageText.Assistant.trip.tripPattern.requiresBooking)}
-                testID="requireTicketBooking"
-              />
-            )}
-            <Price
-              tripPattern={tripPattern}
-              inView={inView}
-              size="small"
-              behaviour={{ ifNotFound: 'show-text' }}
-            />
-          </div>
+            {renderedLegs.map(renderLeg)}
+          </OverflowContainer>
           <Button
             title={
               isOpen
                 ? t(PageText.Assistant.trip.tripPattern.seeLess)
                 : t(PageText.Assistant.trip.tripPattern.seeMore)
             }
+            mode="transparent"
             buttonProps={{
               tabIndex: -1,
               'aria-hidden': true,
@@ -289,7 +217,7 @@ export default function TripPattern({
             onClick={() => setIsOpen(!isOpen)}
             icon={{
               right: (
-                <MonoIcon
+                <TintedMonoIcon
                   icon="navigation/ExpandMore"
                   className={andIf({
                     [style.chevron]: true,
@@ -299,7 +227,7 @@ export default function TripPattern({
               ),
             }}
           />
-        </footer>
+        </div>
       </motion.div>
       <AnimatePresence>
         {isOpen && (
@@ -312,20 +240,42 @@ export default function TripPattern({
             }}
             exit={{ height: 0, transition: { duration: ANIMATION_DURATION } }}
           >
-            <div className={style.accordionBody}>
-              <AssistantDetailsBody tripPattern={tripPattern} />
-            </div>
-            <div className={style.accordionFooter}>
-              <ButtonLink
-                href={`/assistant/${tripPattern.compressedQuery}?filter=${router.query.filter}`}
-                title={t(PageText.Assistant.trip.tripPattern.details)}
-                mode="interactive_2"
-                size="pill"
-                radiusSize="circular"
-                className={style.goToDetailsButton}
-                icon={{ right: <MonoIcon icon="navigation/ArrowRight" /> }}
-                testID="moreDetailsButton"
-              />
+            <div className={style.detailsGrid}>
+              <div className={style.accordionBody}>
+                {displayTripPattern.legs.map((leg, index) => (
+                  <TripSection
+                    key={index}
+                    isFirst={index === 0}
+                    isLast={index === displayTripPattern.legs.length - 1}
+                    leg={leg}
+                    interchangeDetails={getInterchangeDetails(
+                      displayTripPattern.legs,
+                      leg.interchangeTo?.toServiceJourney?.id,
+                      t,
+                    )}
+                    legWaitDetails={getLegWaitDetails(
+                      leg,
+                      displayTripPattern.legs[index + 1],
+                    )}
+                  />
+                ))}
+              </div>
+              <div className={style.detailsAside}>
+                <TripSummaryPanel tripPattern={displayTripPattern} />
+                <ButtonLink
+                  href={`/assistant/${displayTripPattern.compressedQuery}?filter=${router.query.filter}`}
+                  title={t(PageText.Assistant.trip.tripPattern.details)}
+                  mode="interactive_2"
+                  size="small"
+                  radiusSize="circular"
+                  display="block"
+                  className={style.goToDetailsButton}
+                  icon={{
+                    right: <MonoIcon icon="navigation/ChevronRight" />,
+                  }}
+                  testID="moreDetailsButton"
+                />
+              </div>
             </div>
           </motion.div>
         )}
diff --git a/src/page-modules/assistant/trip/trip-pattern/price/index.tsx b/src/page-modules/assistant/trip/trip-pattern/price/index.tsx
index e869b5d8c..65e2e1dfe 100644
--- a/src/page-modules/assistant/trip/trip-pattern/price/index.tsx
+++ b/src/page-modules/assistant/trip/trip-pattern/price/index.tsx
@@ -18,7 +18,6 @@ type NotFoundBehaviour = 'show-text' | 'hide-text';
 
 type PriceProps = {
   tripPattern: ExtendedTripPatternWithDetailsType;
-  inView: boolean;
   size?: 'small' | 'regular';
   behaviour?: {
     ifFound?: FoundBehaviour;
@@ -28,7 +27,6 @@ type PriceProps = {
 
 export function Price({
   tripPattern,
-  inView,
   size = 'regular',
   behaviour,
 }: PriceProps) {
@@ -40,9 +38,8 @@ export function Price({
 
   const { ifFound = 'hide-icon', ifNotFound = 'hide-text' } = behaviour ?? {};
 
-  const shouldFetch =
+  const enableFetch =
     isEnabled &&
-    inView &&
     !disableBoatCombinationTripPatterns(
       tripPattern,
       !!disableBoatComboPriceSearch,
@@ -55,7 +52,7 @@ export function Price({
   } = useTripPatternPrice(
     new Date(tripPattern.legs[0].serviceDate),
     tripPattern.legs,
-    shouldFetch,
+    enableFetch,
   );
 
   if (!isEnabled) {
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/__tests__/trip-pattern-header.test.tsx b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/__tests__/trip-pattern-header.test.tsx
index 9f266e047..5fe3e8025 100644
--- a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/__tests__/trip-pattern-header.test.tsx
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/__tests__/trip-pattern-header.test.tsx
@@ -2,11 +2,7 @@ import { cleanup, render, screen } from '@testing-library/react';
 import mockRouter from 'next-router-mock';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { createDynamicRouteParser } from 'next-router-mock/dynamic-routes';
-import {
-  getQuayOrPlaceName,
-  getStartModeAndPlaceText,
-  TripPatternHeader,
-} from '..';
+import { getQuayOrPlaceName, TripPatternHeader } from '..';
 import {
   tripPatternFixture,
   tripPatternWithDetailsFixture,
@@ -40,11 +36,11 @@ const customRender = (
 };
 
 describe('trip pattern header', function () {
-  it('should render trip pattern header', async () => {
+  it('should render trip pattern header with duration and ended status', async () => {
     render(<TripPatternHeader tripPattern={tripPatternWithDetailsFixture} />);
 
-    expect(screen.getByText('Buss fra From 1')).toBeInTheDocument();
-    expect(screen.getByText('1 time')).toBeInTheDocument();
+    expect(screen.getByTestId('resultDuration')).toBeInTheDocument();
+    expect(screen.getByText('Reisen er ferdig')).toBeInTheDocument();
   });
 
   it('should render trip pattern header in english', async () => {
@@ -60,8 +56,7 @@ describe('trip pattern header', function () {
       },
     );
 
-    expect(screen.getByText('Bus from From 1')).toBeInTheDocument();
-    expect(screen.getByText('1 hour')).toBeInTheDocument();
+    expect(screen.getByText('Trip ended')).toBeInTheDocument();
   });
 
   it('should render trip pattern header in nynorsk', async () => {
@@ -77,8 +72,7 @@ describe('trip pattern header', function () {
       },
     );
 
-    expect(screen.getByText('Buss frå From 1')).toBeInTheDocument();
-    expect(screen.getByText('1 time')).toBeInTheDocument();
+    expect(screen.getByText('Reisa er ferdig')).toBeInTheDocument();
   });
 
   it('should get quay name from quay', () => {
@@ -186,27 +180,4 @@ describe('trip pattern header', function () {
 
     expect(screen.getByText('FromPlaceName')).toBeInTheDocument();
   });
-
-  it('should get start mode and start place from trip', () => {
-    const Test = function () {
-      const { t } = useTranslation();
-
-      const startModeAndPlaceText = getStartModeAndPlaceText(
-        tripPatternWithDetailsFixture,
-        t,
-      );
-      return <div>{startModeAndPlaceText}</div>;
-    };
-
-    customRender(<Test />, {
-      providerProps: {
-        initialCookies: {
-          darkmode: false,
-          language: 'no',
-        },
-      },
-    });
-
-    expect(screen.getByText('Buss fra From 1')).toBeInTheDocument();
-  });
 });
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/index.tsx b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/index.tsx
index 6591aeb6f..758b1bb4a 100644
--- a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/index.tsx
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/index.tsx
@@ -1,22 +1,98 @@
 import style from './trip-pattern-header.module.css';
 import { Typo } from '@atb/components/typography';
 import { useTranslation, PageText, TranslateFunction } from '@atb/translations';
-import { formatTripDuration } from '@atb/utils/date';
-import { flatMap } from 'lodash';
-import { RailReplacementBusMessage } from './rail-replacement-bus';
-import { SituationOrNoticeIcon } from '@atb/modules/situations-and-notices';
-import { isSubModeBoat } from '@atb/modules/transport-mode';
-import { ColorIcon } from '@atb/components/icon';
+import {
+  formatToClock,
+  formatTripDuration,
+  isInPast,
+  secondsBetween,
+} from '@atb/utils/date';
 import { Assistant } from '@atb/translations/pages';
-import { getNoticesForLeg } from '@atb/page-modules/assistant/utils.ts';
 import { ExtendedTripPatternWithDetailsType } from '@atb/page-modules/assistant';
 import { QuayFragment } from '@atb/page-modules/assistant/journey-gql/trip-with-details.generated.ts';
+import { StatusText, StatusType } from './status-text';
+import { getBookingStatus } from '@atb/modules/flexible';
+
+const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS = 60;
 
 type TripPatternHeaderProps = {
   tripPattern: ExtendedTripPatternWithDetailsType;
   isCancelled?: boolean;
 };
 
+type StatusConfig = {
+  statusType: StatusType;
+  text: string;
+};
+
+function getStatusConfig(
+  tripPattern: ExtendedTripPatternWithDetailsType,
+  isCancelled: boolean,
+  t: ReturnType<typeof useTranslation>['t'],
+): StatusConfig | undefined {
+  if (isCancelled) {
+    return {
+      statusType: 'error',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.cancelled),
+    };
+  }
+
+  if (tripPattern.status === 'impossible') {
+    return {
+      statusType: 'error',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.impossible),
+    };
+  }
+
+  const endIsInPast = isInPast(tripPattern.expectedEndTime);
+  const startIsInPast = isInPast(tripPattern.expectedStartTime);
+
+  if (endIsInPast) {
+    return {
+      statusType: 'error',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.ended),
+    };
+  }
+
+  if (startIsInPast) {
+    return {
+      statusType: 'info',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.started),
+    };
+  }
+
+  const bookingLegs = tripPattern.legs.filter((leg) => leg.bookingArrangements);
+  if (bookingLegs.length > 0) {
+    const anyDeadlineExceeded = bookingLegs.some(
+      (leg) =>
+        getBookingStatus(leg.bookingArrangements!, leg.aimedStartTime) ===
+        'late',
+    );
+    if (anyDeadlineExceeded) {
+      return {
+        statusType: 'interactive',
+        text: t(
+          PageText.Assistant.trip.tripPattern.statusText
+            .bookingDeadlineExceeded,
+        ),
+      };
+    }
+    return {
+      statusType: 'info',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.requiresBooking),
+    };
+  }
+
+  if (tripPattern.status === 'stale') {
+    return {
+      statusType: 'info',
+      text: t(PageText.Assistant.trip.tripPattern.statusText.stale),
+    };
+  }
+
+  return undefined;
+}
+
 export function TripPatternHeader({
   tripPattern,
   isCancelled = false,
@@ -29,103 +105,77 @@ export function TripPatternHeader({
     language,
   );
 
-  const startModeAndPlaceText = getStartModeAndPlaceText(tripPattern, t);
+  const expectedStartTimeLabel = formatToClock(
+    tripPattern.expectedStartTime,
+    language,
+    'floor',
+  );
+  const expectedEndTimeLabel = formatToClock(
+    tripPattern.expectedEndTime,
+    language,
+    'ceil',
+  );
+
+  const aimedStartTime =
+    tripPattern.aimedStartTime ?? tripPattern.legs[0]?.aimedStartTime;
+  const aimedEndTime =
+    tripPattern.aimedEndTime ??
+    tripPattern.legs[tripPattern.legs.length - 1]?.aimedEndTime;
+
+  const aimedStartTimeLabel = formatToClock(aimedStartTime, language, 'floor');
+  const aimedEndTimeLabel = formatToClock(aimedEndTime, language, 'ceil');
+
+  const startTimeDiffers =
+    Math.abs(secondsBetween(aimedStartTime, tripPattern.expectedStartTime)) >
+    DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS;
+  const endTimeDiffers =
+    Math.abs(secondsBetween(aimedEndTime, tripPattern.expectedEndTime)) >
+    DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS;
+  const showAimedTime = startTimeDiffers || endTimeDiffers;
+
+  const statusConfig = getStatusConfig(tripPattern, isCancelled, t);
 
   return (
     <header className={style.header}>
-      {isCancelled ? (
-        <ColorIcon
-          icon="status/Error"
-          className={style.situationIcon}
-          alt={t(PageText.Assistant.trip.tripPattern.isCancelled.label)}
-        />
-      ) : (
-        <SituationOrNoticeIcon
-          situations={flatMap(tripPattern.legs, (leg) => leg.situations)}
-          notices={tripPattern.legs.flatMap(getNoticesForLeg)}
-          cancellation={isCancelled}
-          iconSize="large"
-        />
-      )}
-      <RailReplacementBusMessage tripPattern={tripPattern} />
-      <Typo.span textType="body__s__strong">
-        {startModeAndPlaceText}
-        {isCancelled &&
-          ` (${t(
-            PageText.Assistant.trip.tripPattern.isCancelled.title,
-          ).toUpperCase()})`}
-      </Typo.span>
-      <Typo.span textType="body__s" className={style.header__duration}>
-        {duration}
-      </Typo.span>
+      <div className={style.header__timesArea}>
+        {statusConfig && (
+          <StatusText
+            statusType={statusConfig.statusType}
+            text={statusConfig.text}
+          />
+        )}
+        <div className={style.header__timesRow}>
+          <Typo.span
+            textType={isCancelled ? 'body__m__strike' : 'body__m__strong'}
+            testID="expectedTimeRange"
+          >
+            {`${expectedStartTimeLabel} - ${expectedEndTimeLabel}`}
+          </Typo.span>
+        </div>
+        {showAimedTime && (
+          <Typo.span
+            textType="body__s"
+            className={style.header__aimedTime}
+            testID="aimedTimeRange"
+          >
+            {t(PageText.Assistant.trip.tripPattern.originalTime)}{' '}
+            {aimedStartTimeLabel} - {aimedEndTimeLabel}
+          </Typo.span>
+        )}
+      </div>
+      <div className={style.header__duration}>
+        <Typo.span
+          textType="body__s"
+          className={style.header__durationText}
+          testID="resultDuration"
+        >
+          {duration}
+        </Typo.span>
+      </div>
     </header>
   );
 }
 
-export function getStartModeAndPlaceText(
-  tripPattern: ExtendedTripPatternWithDetailsType,
-  t: TranslateFunction,
-): string {
-  let startLeg = tripPattern.legs[0];
-  let tmpStartName = startLeg.fromPlace.name;
-
-  if (tripPattern.legs[0].mode === 'foot' && tripPattern.legs[1]) {
-    startLeg = tripPattern.legs[1];
-    tmpStartName = getQuayOrPlaceName(
-      t,
-      startLeg.fromPlace.quay,
-      startLeg.fromPlace.name,
-    );
-  } else if (tripPattern.legs[0].mode !== 'foot') {
-    tmpStartName = getQuayOrPlaceName(
-      t,
-      startLeg.fromPlace.quay,
-      startLeg.fromPlace.name,
-    );
-  }
-
-  const startName: string =
-    tmpStartName ??
-    t(PageText.Assistant.trip.tripPattern.travelFrom.unknownPlace);
-
-  switch (startLeg.mode) {
-    case 'bus':
-    case 'coach':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.bus(startName));
-    case 'tram':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.tram(startName));
-    case 'metro':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.metro(startName));
-    case 'rail':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.rail(startName));
-    case 'water':
-      if (
-        startLeg.transportSubmode &&
-        isSubModeBoat(startLeg.transportSubmode)
-      ) {
-        return t(
-          PageText.Assistant.trip.tripPattern.travelFrom.boat(startName),
-        );
-      } else {
-        return t(
-          PageText.Assistant.trip.tripPattern.travelFrom.ferry(startName),
-        );
-      }
-    case 'air':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.air(startName));
-    case 'bicycle':
-      return t(
-        PageText.Assistant.trip.tripPattern.travelFrom.bicycle(startName),
-      );
-    case 'foot':
-      return t(PageText.Assistant.trip.tripPattern.travelFrom.foot(startName));
-    default:
-      return t(
-        PageText.Assistant.trip.tripPattern.travelFrom.unknown(startName),
-      );
-  }
-}
-
 export function getQuayOrPlaceName(
   t: TranslateFunction,
   quay?: QuayFragment,
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.module.css b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.module.css
new file mode 100644
index 000000000..c0173646c
--- /dev/null
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.module.css
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: token('spacing.xSmall');
+}
+
+.error {
+  color: token('color.foreground.emphasis.error');
+}
+
+.info {
+  color: token('color.foreground.emphasis.info');
+}
+
+.interactive {
+  color: token('color.foreground.emphasis.interactive');
+}
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.tsx b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.tsx
new file mode 100644
index 000000000..4dd45d137
--- /dev/null
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/status-text.tsx
@@ -0,0 +1,41 @@
+import { ColorIcon } from '@atb/components/icon';
+import { Typo } from '@atb/components/typography';
+import style from './status-text.module.css';
+
+export type StatusType = 'error' | 'info' | 'interactive';
+
+type StatusTextProps = {
+  statusType: StatusType;
+  text: string;
+  showIcon?: boolean;
+};
+
+export function StatusText({
+  statusType,
+  text,
+  showIcon = false,
+}: StatusTextProps) {
+  return (
+    <div className={style.container}>
+      {showIcon && (
+        <ColorIcon icon={statusTypeToColorIcon(statusType)} size="xSmall" />
+      )}
+      <Typo.span textType="body__s__strong" className={style[statusType]}>
+        {text}
+      </Typo.span>
+    </div>
+  );
+}
+
+function statusTypeToColorIcon(
+  statusType: StatusType,
+): 'status/Error' | 'status/Info' | 'status/Warning' {
+  switch (statusType) {
+    case 'error':
+      return 'status/Error';
+    case 'interactive':
+      return 'status/Warning';
+    default:
+      return 'status/Info';
+  }
+}
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/trip-pattern-header.module.css b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/trip-pattern-header.module.css
index 936cc22fc..0b9ce0db4 100644
--- a/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/trip-pattern-header.module.css
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern-header/trip-pattern-header.module.css
@@ -1,19 +1,40 @@
 .header {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: 'times  duration';
   gap: token('spacing.small');
+  align-items: start;
+  padding: token('spacing.medium') token('spacing.medium') 0;
+}
+
+.header__timesArea {
+  grid-area: times;
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.xSmall');
+  min-width: 0;
+}
+
+.header__timesRow {
+  display: flex;
   align-items: center;
-  padding: token('spacing.small') token('spacing.medium');
+  gap: token('spacing.small');
 }
 
-@media (max-width: 650px) {
-  .header {
-    align-items: center;
-  }
+.header__aimedTime {
+  color: token('color.foreground.dynamic.secondary');
 }
 
 .header__duration {
+  grid-area: duration;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: token('spacing.xSmall');
+}
+
+.header__durationText {
   color: token('color.foreground.dynamic.secondary');
-  margin-left: auto;
 }
 
 .situationIcon {
diff --git a/src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css b/src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css
index cb9a4c810..f96857629 100644
--- a/src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css
+++ b/src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css
@@ -21,160 +21,53 @@
   border-radius: token('border.radius.regular');
 }
 
-.header {
-  display: flex;
-  justify-content: space-between;
-  padding: token('spacing.small') token('spacing.medium');
-}
-
-.header__duration {
-  color: token('color.foreground.dynamic.secondary');
-}
-
 .details {
   display: flex;
   flex-direction: column;
-  padding: 0 token('spacing.medium');
-}
-
-.legs {
-  display: flex;
-  align-items: center;
-  padding: token('spacing.small') token('spacing.medium');
-}
-
-.legs__expandedLegsContainer {
-  display: flex;
-  flex-grow: 1;
-  overflow: hidden;
-  max-width: 100%;
-  margin-right: token('spacing.xSmall');
-}
-
-.legs__expandedLegs {
-  display: flex;
-  align-items: flex-start;
-  position: relative;
-  margin-right: token('spacing.xSmall');
-}
-
-.legs__leg {
-  display: flex;
-  flex-direction: column;
-  gap: token('spacing.small');
-}
-
-.legs__legLineContainer,
-.legs__lastLegLineContainer {
-  /* The height of the icon in a leg. */
-  --inner-height: 20px;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  padding: 0 token('spacing.xSmall');
-  /* Set the container to the same height as leg boxes to vertically center the line correctly. */
-  height: calc(var(--inner-height) + token('spacing.small') * 2);
-}
-.legs__legLine,
-.legs__lastLegLine {
-  width: 0.3125rem;
-  height: 0.125rem;
-  background-color: token('color.interactive.1.disabled.background');
-  border-radius: token('border.radius.circle');
-}
-
-.legs__lastLegLineContainer {
-  padding: 0;
-}
-
-.legs__lastLegLineContainer,
-.legs__lastLegLine {
-  flex: 1 1;
-}
-
-.legs__leg__walkIcon {
-  background-color: token('color.background.neutral.2.background');
-  border-radius: token('border.radius.small');
-  display: grid;
-  place-content: center;
-  padding: token('spacing.small');
+  border-top: token('border.width.slim') solid
+    token('color.background.neutral.1.background');
+  background-color: token('color.background.neutral.0.background');
 }
 
-.legs__collapsedLegs {
-  background-color: token('color.background.neutral.2.background');
-  border-radius: token('border.radius.small');
-  padding: token('spacing.small');
+.detailsGrid {
   display: grid;
-  place-content: center;
+  grid-template-columns: 3fr 2fr;
+  gap: token('spacing.xLarge');
+  padding: token('spacing.large') token('spacing.medium')
+    token('spacing.medium');
 }
 
-.legs__collapsedLegs > span {
-  display: grid;
-  place-content: center;
-  height: 20px;
-  width: 20px;
+@media (max-width: 650px) {
+  .detailsGrid {
+    grid-template-columns: 1fr;
+  }
 }
 
-.legs__lastLeg {
-  margin-left: auto;
+.detailsAside {
   display: flex;
-  gap: token('spacing.small');
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.legs__lastLeg__icon {
-  background-color: token('color.background.neutral.2.background');
-  border-radius: token('border.radius.small');
-  display: grid;
-  place-content: center;
-  padding: token('spacing.small');
-}
-
-.footer {
-  border-top: 1px solid token('color.background.neutral.1.background');
-  display: grid;
-  grid-template-areas: 'price button';
-  width: 100%;
   justify-content: space-between;
-  align-items: center;
-  padding: token('spacing.small') token('spacing.medium');
-  gap: token('spacing.small');
+  gap: token('spacing.medium');
 }
 
-.footer__details {
+.legs {
   display: flex;
-  gap: token('spacing.small');
   align-items: center;
-  color: token('color.interactive.0.default.foreground.primary');
-}
-
-.footer__link {
-  text-decoration: none;
-  padding: token('spacing.xSmall') token('spacing.medium');
-  border-radius: token('border.radius.circle');
-  background-color: token('color.interactive.0.default.background');
-}
-
-.accordionBody {
   padding: token('spacing.medium');
+  gap: token('spacing.small');
+  min-width: 0;
 }
 
-.accordionFooter {
-  display: flex;
-  justify-content: flex-end;
-  padding: token('spacing.small') token('spacing.medium');
+.legs__legsAndLine {
+  flex: 1;
+  --overflow-container-gap: token('spacing.xSmall');
 }
 
-.timeStartContainer {
+.accordionBody {
   display: flex;
-  direction: row;
-  gap: token('spacing.xSmall');
-}
-
-.outdatet {
-  color: token('color.foreground.dynamic.secondary');
+  flex-direction: column;
+  gap: token('spacing.medium');
+  background-color: token('color.background.neutral.0.background');
 }
 
 .chevron {
@@ -186,28 +79,29 @@
 }
 
 .seeMoreButton {
-  grid-area: button;
+  flex-shrink: 0;
+  align-self: flex-end;
+}
+.seeMoreButton {
+  padding-right: 0;
+  color: token('color.foreground.emphasis.interactive');
+}
+.seeMoreButton:hover,
+.seeMoreButton:active {
+  color: token('color.foreground.emphasis.interactive');
 }
 
 .goToDetailsButton {
-  border: 2px solid token('color.foreground.dynamic.secondary');
-  align-self: flex-end;
+  border: token('border.width.medium') solid
+    token('color.foreground.emphasis.interactive');
+  text-align: center;
 }
-
+.goToDetailsButton:hover,
 .goToDetailsButton:active {
-  border: 2px solid token('color.interactive.0.outline.background');
+  color: token('color.foreground.emphasis.interactive');
 }
 
-.info__container {
-  display: flex;
-  flex-direction: row;
-  gap: token('spacing.small');
-  align-items: center;
-}
-
-@media (max-width: 650px) {
-  .info__container {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+.goToDetailsButton:active {
+  border: token('border.width.medium') solid
+    token('color.interactive.0.outline.background');
 }
diff --git a/src/page-modules/assistant/trip/trip-pattern/utils.ts b/src/page-modules/assistant/trip/trip-pattern/utils.ts
index acfe2ef16..bb9faca72 100644
--- a/src/page-modules/assistant/trip/trip-pattern/utils.ts
+++ b/src/page-modules/assistant/trip/trip-pattern/utils.ts
@@ -5,10 +5,14 @@ import {
 } from '@atb/utils/date';
 import { Language, TranslateFunction, PageText } from '@atb/translations';
 import dictionary from '@atb/translations/dictionary';
+import { humanizeDistance } from '@atb/utils/distance';
 import { screenReaderPause } from '@atb/components/typography/utils';
 import { transportModeToTranslatedString } from '@atb/modules/transport-mode';
 import { getTimeRepresentationType } from '@atb/modules/time-representation';
-import { ExtendedTripPatternWithDetailsType } from '@atb/page-modules/assistant';
+import {
+  ExtendedLegType,
+  ExtendedTripPatternWithDetailsType,
+} from '@atb/page-modules/assistant';
 import { getQuayOrPlaceName } from '@atb/page-modules/assistant/trip/trip-pattern/trip-pattern-header';
 import { LegWithDetailsFragment } from '../../journey-gql/trip-with-details.generated';
 
@@ -20,13 +24,7 @@ export const tripSummary = (
   listPosition: number,
   isCancelled: boolean,
 ) => {
-  const distance = Math.round(tripPattern.legs[0].distance);
-  let humanizedDistance;
-  if (distance >= 1000) {
-    humanizedDistance = `${distance / 1000} ${t(dictionary.distance.km)}`;
-  } else {
-    humanizedDistance = `${distance} ${t(dictionary.distance.m)}`;
-  }
+  const humanizedDistance = humanizeDistance(tripPattern.legs[0].distance, t);
 
   let startText = '';
 
@@ -239,14 +237,11 @@ function isSignificantFootLegWalkOrWaitTime(
 
 export function getFilteredLegsByWalkOrWaitTime(
   tripPattern: ExtendedTripPatternWithDetailsType,
-) {
-  if (!!tripPattern?.legs?.length) {
-    return tripPattern.legs.filter((leg, i) =>
-      isSignificantFootLegWalkOrWaitTime(leg, tripPattern.legs[i + 1]),
-    );
-  } else {
-    return [];
-  }
+): ExtendedLegType[] {
+  const legs = tripPattern.legs;
+  return legs.filter((leg, i) =>
+    isSignificantFootLegWalkOrWaitTime(leg, legs[i + 1]),
+  );
 }
 
 function isLegFlexibleTransport(leg: LegWithDetailsFragment): boolean {
diff --git a/src/page-modules/assistant/trip/trip.module.css b/src/page-modules/assistant/trip/trip.module.css
index 82838fd27..eb2259fde 100644
--- a/src/page-modules/assistant/trip/trip.module.css
+++ b/src/page-modules/assistant/trip/trip.module.css
@@ -7,7 +7,7 @@
 .tripResults {
   display: flex;
   flex-direction: column;
-  gap: token('spacing.large');
+  gap: token('spacing.medium');
 }
 
 .nonTransitResult {
diff --git a/src/page-modules/assistant/types.ts b/src/page-modules/assistant/types.ts
index 2cd141437..b3bae2ee7 100644
--- a/src/page-modules/assistant/types.ts
+++ b/src/page-modules/assistant/types.ts
@@ -142,19 +142,16 @@ export type ExtendedLegType = LegWithDetailsFragment & {
  */
 export type TripPatternStatus = 'valid' | 'impossible' | 'stale';
 
-export type ExtendedTripPatternWithDetailsType =
-  TripPatternWithDetailsFragment & {
-    compressedQuery: string;
-    legs: ExtendedLegType[];
-    status?: TripPatternStatus;
-    /**
-     * Trip-level aimed times, derived from the legs by refreshSingleTrip.
-     * Non-transit legs have no real schedule, so these are anchored to the
-     * nearest transit legs.
-     */
-    aimedStartTime?: string;
-    aimedEndTime?: string;
-  };
+export type ExtendedTripPatternWithDetailsType = Omit<
+  TripPatternWithDetailsFragment,
+  'legs'
+> & {
+  compressedQuery: string;
+  legs: ExtendedLegType[];
+  status?: TripPatternStatus;
+  aimedStartTime?: string;
+  aimedEndTime?: string;
+};
 export type TripWithDetailsType = TripsWithDetailsQuery & {
   trip: {
     tripPatterns: ExtendedTripPatternWithDetailsType[];
diff --git a/src/translations/pages/assistant.ts b/src/translations/pages/assistant.ts
index d98ebdead..ff9cb748f 100644
--- a/src/translations/pages/assistant.ts
+++ b/src/translations/pages/assistant.ts
@@ -98,6 +98,7 @@ const AssistantInternal = {
       'Reiseforslag funne',
     ),
     tripPattern: {
+      originalTime: _('Opprinnelig', 'Original', 'Opphavleg'),
       travelFrom: {
         bus: (place: string) =>
           _(`Buss fra ${place}`, `Bus from ${place}`, `Buss frå ${place}`),
@@ -203,6 +204,27 @@ const AssistantInternal = {
           'Denne reisa er innstilt',
         ),
       },
+      statusText: {
+        cancelled: _('Innstilt', 'Cancelled', 'Innstilt'),
+        impossible: _('Ikke mulig', 'Not possible', 'Ikkje mogleg'),
+        ended: _('Reisen er ferdig', 'Trip ended', 'Reisa er ferdig'),
+        started: _('Reisen har startet', 'Trip started', 'Reisa har starta'),
+        bookingDeadlineExceeded: _(
+          'Bestillingsfristen er passert',
+          'Booking deadline exceeded',
+          'Bestillingsfristen er passert',
+        ),
+        requiresBooking: _(
+          'Krever bestilling',
+          'Requires booking',
+          'Krev bestilling',
+        ),
+        stale: _(
+          'Resultatene kan være utdaterte',
+          'Results may be outdated',
+          'Resultata kan vera utdaterte',
+        ),
+      },
     },
     fetchMore: _(
       'Last inn flere reiseforslag',
@@ -438,8 +460,6 @@ const AssistantInternal = {
         'Total walking distance',
         'Total gangavstand',
       ),
-      walkDistanceValue: (distance: string) =>
-        _(`${distance} m`, `${distance} m`, `${distance} m`),
       priceLabel: (traveller: string) =>
         _(
           `Pris (1 ${traveller})`,
@@ -451,6 +471,12 @@ const AssistantInternal = {
       walk: {
         label: (duration: string) =>
           _(`Gå i ${duration}`, `Walk for ${duration}`, `Gå i ${duration}`),
+        labelWithDistance: (duration: string, distance: string) =>
+          _(
+            `Gå ${distance} (${duration})`,
+            `Walk ${distance} (${duration})`,
+            `Gå ${distance} (${duration})`,
+          ),
       },
       shortWalk: _(
         `Gå i mindre enn ett minutt`,
diff --git a/src/utils/distance.ts b/src/utils/distance.ts
new file mode 100644
index 000000000..b84bce4a4
--- /dev/null
+++ b/src/utils/distance.ts
@@ -0,0 +1,13 @@
+import dictionary from '@atb/translations/dictionary';
+import { TranslateFunction } from '@atb/translations';
+
+export function humanizeDistance(
+  distanceInMeters: number,
+  t: TranslateFunction,
+): string {
+  const rounded = Math.round(distanceInMeters);
+  if (rounded >= 1000) {
+    return `${(rounded / 1000).toFixed(1)} ${t(dictionary.distance.km)}`;
+  }
+  return `${rounded} ${t(dictionary.distance.m)}`;
+}
diff --git a/src/utils/use-isomorphic-layout-effect.ts b/src/utils/use-isomorphic-layout-effect.ts
new file mode 100644
index 000000000..f3946ec46
--- /dev/null
+++ b/src/utils/use-isomorphic-layout-effect.ts
@@ -0,0 +1,9 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// React logs a warning when useLayoutEffect is registered during SSR. The
+// /assistant page can server-render <TripPattern> (SWR-seeded from a cached
+// fallback in getServerSideProps), so any layout effect inside it would fire
+// that warning on cache hits. This shim aliases useLayoutEffect on the client
+// and useEffect on the server to silence it. Standard ecosystem pattern.
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;