diff --git a/app/component/trafficnow/CanceledTripCard.js b/app/component/trafficnow/CanceledTripCard.js
index b3a139736a..d8c07f03a8 100644
--- a/app/component/trafficnow/CanceledTripCard.js
+++ b/app/component/trafficnow/CanceledTripCard.js
@@ -1,57 +1,36 @@
 import React from 'react';
 import { useRouter } from 'found';
-import { DateTime } from 'luxon';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { connectToStores } from 'fluxible-addons-react';
 import { useConfigContext } from '../../configurations/ConfigContext';
-import { PREFIX_TIMETABLE, TRAFFICNOW, routePagePath } from '../../util/path';
+import { TRAFFICNOW, routePagePath } from '../../util/path';
 import Card from '../Card';
 import Icon from '../Icon';
 import CanceledDepartures from './components/CanceledDepartures';
 import DisruptionStatus from './components/DisruptionStatus';
 import RouteBadgeGroup from './components/RouteBadgeGroup';
 import DisruptionBadge from './DisruptionBadge';
+import EntityBadge from './components/EntityBadge';
+import { favouriteShape, patternShape, routeShape } from '../../util/shapes';
+import { useFilterContext } from './filters/FiltersContext';
 
-const CanceledTripCard = ({ mode, totalCount, trips, isMobile = false }) => {
+const CanceledTripCard = ({
+  mode,
+  routes,
+  isMobile = false,
+  favourites = [],
+}) => {
   const { router } = useRouter();
-  const { colors } = useConfigContext();
-
+  const intl = useIntl();
+  const { colors, trafficNowMaxRoutesPerCard } = useConfigContext();
+  const { selectedFilters } = useFilterContext();
   const handleRouteBadgeClick = url => e => {
     e.preventDefault();
     e.stopPropagation();
     router.push(url);
   };
-
-  /* eslint-disable no-param-reassign */
-  const groupedTrips = trips.reduce((container, { start, trip }) => {
-    if (!trip?.route?.gtfsId || !start?.schedule?.time?.departure) {
-      return container;
-    }
-
-    const shortName = trip?.route?.shortName || 'unknown';
-    if (container[shortName]) {
-      container[shortName].trips.push({
-        ...trip,
-        departureTime: DateTime.fromISO(
-          start?.schedule.time.departure,
-        ).toFormat('HH:mm'),
-      });
-    } else {
-      container[shortName] = {
-        routeGtfsId: trip.route.gtfsId,
-        trips: [
-          {
-            ...trip,
-            departureTime: DateTime.fromISO(
-              start?.schedule.time.departure,
-            ).toFormat('HH:mm'),
-          },
-        ],
-      };
-    }
-    return container;
-  }, {});
-
-  const isSingleRoute = Object.keys(groupedTrips).length === 1;
+  const favRoutes = favourites.map(({ gtfsId }) => gtfsId);
 
   return (
     <Card
@@ -63,7 +42,6 @@ const CanceledTripCard = ({ mode, totalCount, trips, isMobile = false }) => {
           <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
           {!isMobile && (
             <>
-              {' '}
               <div className="separator vertical" />
               <DisruptionStatus
                 active
@@ -85,32 +63,48 @@ const CanceledTripCard = ({ mode, totalCount, trips, isMobile = false }) => {
         <RouteBadgeGroup
           mode={mode}
           stopPropagation
-          routes={Object.entries(groupedTrips).map(
-            ([shortName, { routeGtfsId, trips: groupedRouteTrips }]) => ({
-              id: shortName,
-              name: shortName,
-              url: routePagePath(routeGtfsId, PREFIX_TIMETABLE),
-              gtfsId: routeGtfsId,
-              trips: groupedRouteTrips,
-            }),
-          )}
-          renderRouteSuffix={({ trips: groupedRouteTrips }) =>
-            isSingleRoute ? (
+          highlightedGtfsId={selectedFilters.entity?.gtfsId}
+          routes={routes
+            .slice()
+            .sort(
+              (a, b) =>
+                Number(favRoutes.includes(b.route.gtfsId)) -
+                Number(favRoutes.includes(a.route.gtfsId)),
+            )
+            .slice(0, trafficNowMaxRoutesPerCard)
+            .map(({ route }) => ({
+              name: route.shortName,
+              gtfsId: route.gtfsId,
+              id: route.id,
+              url: routePagePath(route.gtfsId),
+            }))}
+          renderRouteSuffix={route =>
+            routes.length === 1 ? (
               <CanceledDepartures
-                departures={groupedRouteTrips.map(
-                  ({ tripId, departureTime }) => ({
-                    tripId,
-                    departureTime,
-                  }),
-                )}
+                inline
+                mode={mode}
+                departureLimit={5}
+                patterns={routes
+                  .find(
+                    routeSummary => routeSummary.route.gtfsId === route.gtfsId,
+                  )
+                  .patterns.map(p => p.pattern)}
               />
             ) : null
           }
           renderSuffix={
-            totalCount > trips.length ? (
-              <span style={{ backgroundColor: '#F2F5F7' }}>
-                <Icon img="icon_three-dots" width={1.3} height={1.3} />
-              </span>
+            routes.length > trafficNowMaxRoutesPerCard ? (
+              <EntityBadge
+                className="more-routes"
+                entity={{
+                  name: `+${routes.length - trafficNowMaxRoutesPerCard}`,
+                }}
+                mode={mode}
+                ariaLabel={intl.formatMessage(
+                  { id: 'traffic-now_more-routes' },
+                  { count: routes.length - trafficNowMaxRoutesPerCard },
+                )}
+              />
             ) : null
           }
         />
@@ -124,9 +118,28 @@ const CanceledTripCard = ({ mode, totalCount, trips, isMobile = false }) => {
 
 CanceledTripCard.propTypes = {
   mode: PropTypes.string.isRequired,
-  totalCount: PropTypes.number.isRequired,
-  trips: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   isMobile: PropTypes.bool,
+  favourites: PropTypes.arrayOf(favouriteShape),
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      cancellationCount: PropTypes.number.isRequired,
+      route: routeShape.isRequired,
+      patterns: PropTypes.arrayOf(
+        PropTypes.shape({
+          pattern: patternShape.isRequired,
+          cancellationCount: PropTypes.number.isRequired,
+        }).isRequired,
+      ).isRequired,
+    }),
+  ).isRequired,
 };
 
-export default CanceledTripCard;
+const connectedComponent = connectToStores(
+  CanceledTripCard,
+  ['FavouriteStore'],
+  context => ({
+    favourites: context.getStore('FavouriteStore').getFavourites(),
+  }),
+);
+
+export { connectedComponent as default, CanceledTripCard as Component };
diff --git a/app/component/trafficnow/CanceledTrips.js b/app/component/trafficnow/CanceledTrips.js
index 1642e12777..9485378c92 100644
--- a/app/component/trafficnow/CanceledTrips.js
+++ b/app/component/trafficnow/CanceledTrips.js
@@ -1,150 +1,84 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import Button from '@hsl-fi/button';
 import cx from 'classnames';
 import Link from 'found/Link';
-import { DateTime } from 'luxon';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { usePaginationFragment } from 'react-relay/hooks';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import Card from '../Card';
 import Icon from '../Icon';
-import CanceledTripsModal from './CanceledTripsModal';
 import CancellationContainer from './components/CancellationContainer';
 import ResultsProgressBar from './components/ResultsProgressBar';
-import DisruptionBadge from './DisruptionBadge';
-import DisruptionStatus from './components/DisruptionStatus';
-import CanceledTripsPaginationFragment from './queries/CanceledTripsPaginationFragment';
+import { patternShape, routeShape } from '../../util/shapes';
 
-const CANCELED_TRIPS_QUERY_AMOUNT = 20;
+const DEFAULT_ROUTES_SHOWN_AMOUNT = 8;
 
-const CanceledTrips = ({ query, isMobile = false, ...props }) => {
+const CanceledTrips = ({ canceledRoutes = [], mode, isMobile = false }) => {
   const { colors } = useConfigContext();
   const intl = useIntl();
-  const [detailsKey, setDetailsKey] = useState(null);
-
-  const {
-    data: { canceledTrips },
-    loadNext,
-    isLoadingNext,
-    hasNext,
-  } = usePaginationFragment(CanceledTripsPaginationFragment, query);
-
-  const mode = props.mode.toLowerCase();
-
-  const allEdges = canceledTrips?.edges ?? [];
-
-  const trips = useMemo(
-    () =>
-      /* eslint-disable no-param-reassign */
-      allEdges.reduce((routeGroups, { node }) => {
-        if (
-          !node?.trip?.route?.gtfsId ||
-          !node?.start?.schedule?.time?.departure
-        ) {
-          return routeGroups;
-        }
-
-        const { start, end, trip } = node;
-        const routeShortName = trip?.route?.shortName;
-        const patternCode = trip?.pattern?.code;
-
-        if (!routeGroups[routeShortName]) {
-          routeGroups[routeShortName] = {
-            routeGtfsId: trip.route.gtfsId,
-            patterns: {},
-          };
-        }
-
-        if (routeGroups[routeShortName].patterns[patternCode]) {
-          routeGroups[routeShortName].patterns[
-            patternCode
-          ].canceledDepartures.push(
-            DateTime.fromISO(start?.schedule.time.departure).toFormat('HH:mm'),
-          );
-        } else {
-          routeGroups[routeShortName].patterns[patternCode] = {
-            start,
-            end,
-            trip,
-            canceledDepartures: [
-              DateTime.fromISO(start?.schedule.time.departure).toFormat(
-                'HH:mm',
-              ),
-            ],
-          };
-        }
-
-        return routeGroups;
-      }, {}),
-    [allEdges],
+  const [showAmount, setShowAmount] = useState(
+    DEFAULT_ROUTES_SHOWN_AMOUNT > canceledRoutes.length
+      ? canceledRoutes.length
+      : DEFAULT_ROUTES_SHOWN_AMOUNT,
   );
 
   const content = (
     <>
-      <header className="canceled-trips__header">
-        <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
-        <DisruptionStatus active showDates={false} className="text-s-bold" />
-      </header>
       <div className="canceled-trips__body">
-        {Object.entries(trips).map(
-          ([routeShortName, { routeGtfsId, patterns }], i, arr) =>
-            isMobile ? (
-              <Card key={routeShortName}>
-                <CancellationContainer
-                  item={{
-                    routeShortName,
-                    routeGtfsId,
-                    patterns,
-                    index: i,
-                    total: arr.length,
-                  }}
-                  mode={mode}
-                  isMobile={isMobile}
-                  colors={colors}
-                  onShowDetailsClick={setDetailsKey}
-                />
-              </Card>
-            ) : (
-              <CancellationContainer
-                key={routeShortName}
-                item={{
-                  routeShortName,
-                  routeGtfsId,
-                  patterns,
-                  index: i,
-                  total: arr.length,
-                }}
-                mode={mode}
-                isMobile={isMobile}
-                colors={colors}
-                onShowDetailsClick={setDetailsKey}
-              />
-            ),
-        )}
+        {canceledRoutes.slice(0, showAmount).map((routeSummary, i) => {
+          const cancellationContainer = (
+            <CancellationContainer
+              routeSummary={routeSummary}
+              mode={mode.toLowerCase()}
+              isMobile={isMobile}
+              colors={colors}
+              separator={!isMobile && i + 1 < canceledRoutes.length}
+            />
+          );
+
+          return isMobile ? (
+            <React.Fragment key={routeSummary.route.shortName}>
+              {cancellationContainer}
+            </React.Fragment>
+          ) : (
+            <Card
+              key={routeSummary.route.shortName}
+              className="canceled-trips__card"
+            >
+              {cancellationContainer}
+            </Card>
+          );
+        })}
       </div>
       <footer className="canceled-trips__footer paragraph-extra-small">
         <div className="canceled-trips__footer-body">
           <FormattedMessage
             id="traffic-now_canceled-trips--amount"
             values={{
-              amount: allEdges.length,
-              totalAmount: canceledTrips.totalCount,
+              amount: showAmount,
+              totalAmount: canceledRoutes.length,
             }}
           />
           <ResultsProgressBar
-            currentAmount={allEdges.length}
-            totalAmount={canceledTrips.totalCount}
+            currentAmount={showAmount}
+            totalAmount={canceledRoutes.length}
           />
-          {hasNext && (
+          {showAmount < canceledRoutes.length && (
             <Button
               className="load-more-button link-bold-small"
               size="small"
               fullWidth={false}
               variant="white"
               value={intl.formatMessage({ id: 'show-more' })}
-              onClick={() => loadNext(CANCELED_TRIPS_QUERY_AMOUNT)}
-              disabled={isLoadingNext}
+              onClick={() =>
+                setShowAmount(
+                  // cannot be set to more than the amount of cancellations
+                  showAmount + DEFAULT_ROUTES_SHOWN_AMOUNT >
+                    canceledRoutes.length
+                    ? canceledRoutes.length
+                    : showAmount + DEFAULT_ROUTES_SHOWN_AMOUNT,
+                )
+              }
             />
           )}
         </div>
@@ -166,24 +100,25 @@ const CanceledTrips = ({ query, isMobile = false, ...props }) => {
         </Link>
       </div>
 
-      <div className="canceled-trips__container">
-        {isMobile ? content : <Card>{content}</Card>}
-      </div>
-      {!!detailsKey && (
-        <CanceledTripsModal
-          detailsKey={detailsKey}
-          mode={mode}
-          trips={trips}
-          onClose={() => setDetailsKey(null)}
-        />
-      )}
+      <div className="canceled-trips__container">{content}</div>
     </>
   );
 };
 
 CanceledTrips.propTypes = {
+  canceledRoutes: PropTypes.arrayOf(
+    PropTypes.shape({
+      cancellationCount: PropTypes.number.isRequired,
+      route: routeShape.isRequired,
+      patterns: PropTypes.arrayOf(
+        PropTypes.shape({
+          cancellationCount: PropTypes.number.isRequired,
+          pattern: patternShape.isRequired,
+        }),
+      ).isRequired,
+    }),
+  ),
   mode: PropTypes.string.isRequired,
-  query: PropTypes.shape({}).isRequired,
   isMobile: PropTypes.bool,
 };
 
diff --git a/app/component/trafficnow/CanceledTripsContainer.js b/app/component/trafficnow/CanceledTripsContainer.js
index 7c234853cd..85c368ac8c 100644
--- a/app/component/trafficnow/CanceledTripsContainer.js
+++ b/app/component/trafficnow/CanceledTripsContainer.js
@@ -1,20 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useLazyLoadQuery } from 'react-relay/hooks';
+import { connectToStores } from 'fluxible-addons-react';
+import { DateTime } from 'luxon';
 import CanceledTrips from './CanceledTrips';
 import CanceledTripsForModeQuery from './queries/CanceledTripsForModeQuery';
+import { favouriteShape } from '../../util/shapes';
 
-const CanceledTripsContainer = ({ mode, isMobile }) => {
-  const queryData = useLazyLoadQuery(CanceledTripsForModeQuery, {
-    first: 20,
+const CanceledTripsContainer = ({ mode, isMobile, favourites = [] }) => {
+  const { canceledTripsSummary } = useLazyLoadQuery(CanceledTripsForModeQuery, {
     mode: mode.toUpperCase(),
+    serviceDateRanges: [{ start: DateTime.now().toISODate(), end: null }],
   });
+  const favRoutes = favourites.map(({ gtfsId }) => gtfsId);
 
-  return <CanceledTrips query={queryData} mode={mode} isMobile={isMobile} />;
+  return (
+    <CanceledTrips
+      canceledRoutes={canceledTripsSummary.routes
+        .slice()
+        .sort(
+          (a, b) =>
+            Number(favRoutes.includes(b.route.gtfsId)) -
+            Number(favRoutes.includes(a.route.gtfsId)),
+        )}
+      mode={mode}
+      isMobile={isMobile}
+    />
+  );
 };
 CanceledTripsContainer.propTypes = {
   mode: PropTypes.string.isRequired,
   isMobile: PropTypes.bool,
+  favourites: PropTypes.arrayOf(favouriteShape),
 };
 
-export default CanceledTripsContainer;
+const connectedComponent = connectToStores(
+  CanceledTripsContainer,
+  ['FavouriteStore'],
+  context => ({
+    favourites: context.getStore('FavouriteStore').getFavourites(),
+  }),
+);
+
+export default connectedComponent;
diff --git a/app/component/trafficnow/CanceledTripsModal.js b/app/component/trafficnow/CanceledTripsModal.js
deleted file mode 100644
index 5eb1e501c3..0000000000
--- a/app/component/trafficnow/CanceledTripsModal.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from 'react';
-import Button from '@hsl-fi/button';
-import Modal from '@hsl-fi/modal';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useRouter } from 'found';
-import { PREFIX_TIMETABLE, routePagePath } from '../../util/path';
-import Icon from '../Icon';
-import IconBackground from '../icon/IconBackground';
-import PatternWithCancellations from './components/PatternWithCancellations';
-import RouteBadgeGroup from './components/RouteBadgeGroup';
-
-const CanceledTripsModal = ({
-  mode,
-  detailsKey = undefined,
-  trips,
-  onClose,
-}) => {
-  const intl = useIntl();
-  const { router } = useRouter();
-
-  const handleRouteBadgeClick = url => e => {
-    e.preventDefault();
-    router.push(url);
-  };
-
-  return (
-    <Modal
-      appElement="#app"
-      isOpen={!!detailsKey}
-      shouldCloseOnEsc
-      shouldCloseOnOverlayClick
-      contentLabel="Canceled trips modal"
-      onRequestClose={onClose}
-      variant="large"
-      className="traffic-now traffic-now__modal sheet design-system"
-      overlayClassName="traffic-now__modal-overlay"
-    >
-      <header className="traffic-now__modal-header">
-        <RouteBadgeGroup
-          mode={mode}
-          headsignGroupClassName={mode}
-          routes={[
-            {
-              id: detailsKey,
-              name: detailsKey,
-              url: routePagePath(
-                trips[detailsKey].routeGtfsId,
-                PREFIX_TIMETABLE,
-              ),
-              gtfsId: trips[detailsKey].routeGtfsId,
-            },
-          ]}
-        />
-        <button type="button" onClick={onClose}>
-          <Icon
-            height={2}
-            width={2}
-            iconScale={0.4}
-            img="icon_close"
-            color="#007ac9"
-            background={<IconBackground shape="circle" color="#ebf6fd" />}
-          />
-        </button>
-      </header>
-      <div className="traffic-now__modal-cancellations">
-        {Object.entries(trips[detailsKey].patterns).map(
-          ([patternCode, pattern], i, arr) => (
-            <React.Fragment key={`${patternCode}-${pattern.trip.tripId}`}>
-              <div className="traffic-now__modal-cancellations-pattern">
-                <PatternWithCancellations
-                  pattern={pattern}
-                  withDepartureBadges
-                />
-                <Button
-                  className="routepage-button link-bold-small"
-                  size="small"
-                  fullWidth={false}
-                  variant="white"
-                  value={intl.formatMessage({
-                    id: 'traffic-now_go-to-route-page',
-                  })}
-                  href={routePagePath(
-                    trips[detailsKey].routeGtfsId,
-                    PREFIX_TIMETABLE,
-                    patternCode,
-                  )}
-                  onLinkClick={handleRouteBadgeClick(
-                    routePagePath(
-                      trips[detailsKey].routeGtfsId,
-                      PREFIX_TIMETABLE,
-                      patternCode,
-                    ),
-                  )}
-                />
-              </div>
-              {i + 1 < arr.length && (
-                <div className="separator horizontal padded-xs" />
-              )}
-            </React.Fragment>
-          ),
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-CanceledTripsModal.propTypes = {
-  mode: PropTypes.string.isRequired,
-  detailsKey: PropTypes.string,
-  trips: PropTypes.shape({}).isRequired,
-  onClose: PropTypes.func.isRequired,
-  appElement: PropTypes.shape({}),
-};
-
-export default CanceledTripsModal;
diff --git a/app/component/trafficnow/Disruptions.js b/app/component/trafficnow/Disruptions.js
index 46c54b79f4..27759a7604 100644
--- a/app/component/trafficnow/Disruptions.js
+++ b/app/component/trafficnow/Disruptions.js
@@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
 import cx from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { useRouter } from 'found';
+import { DateTime } from 'luxon';
 import { useLazyLoadQuery } from 'react-relay/hooks';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import { TransportMode } from '../../constants';
@@ -15,8 +16,20 @@ import AlertsQuery from './queries/AlertsQuery';
 import CanceledTripsOverviewQuery from './queries/CanceledTripsOverviewQuery';
 import { buildDisruptionCards } from './utils';
 import { TRAFFICNOW } from '../../util/path';
+import { splitGtfsId } from '../../util/gtfs';
 
-const CANCELED_TRIPS_OVERVIEW_QUERY_AMOUNT = 20;
+// filters out routes with non relevant feedId:s and modes without any routes
+export function getCanceledModes(cancelationsByMode, feedIds) {
+  return Object.entries(cancelationsByMode)
+    .map(([key, value]) => ({
+      key,
+      ...value,
+      routes: value.routes.filter(({ route }) =>
+        feedIds.includes(splitGtfsId(route.gtfsId).feedId),
+      ),
+    }))
+    .filter(({ routes }) => routes.length);
+}
 
 export default function Disruptions() {
   const breakpoint = useBreakpoint();
@@ -25,7 +38,7 @@ export default function Disruptions() {
   const { router } = useRouter();
   const { selectedFilters } = useFilterContext();
 
-  const handleCardClick = id => {
+  const disruptionCardOnClick = id => {
     router.push(`/${TRAFFICNOW}/hairio/${id}`);
   };
 
@@ -45,7 +58,12 @@ export default function Disruptions() {
         ]
       : selectedFilters.vehicleModes.map(mode => mode.toUpperCase());
   const canceledTripsVars = {
-    amount: CANCELED_TRIPS_OVERVIEW_QUERY_AMOUNT,
+    serviceDateRanges: [
+      {
+        start: DateTime.now().toISODate(),
+        end: null,
+      },
+    ],
     fetchBus: modesToFetch.includes(TransportMode.Bus),
     fetchTram: modesToFetch.includes(TransportMode.Tram),
     fetchRail: modesToFetch.includes(TransportMode.Rail),
@@ -53,11 +71,15 @@ export default function Disruptions() {
     fetchFerry: modesToFetch.includes(TransportMode.Ferry),
   };
 
-  const { bus, tram, rail, subway, ferry } = useLazyLoadQuery(
+  const cancelationsByMode = useLazyLoadQuery(
     CanceledTripsOverviewQuery,
     canceledTripsVars,
   );
 
+  const canceledModes = useMemo(
+    () => getCanceledModes(cancelationsByMode, config.feedIds),
+    [cancelationsByMode, config.feedIds],
+  );
   const disruptions = useMemo(
     () => filterAndSortAlerts(alerts, selectedFilters),
     [alerts, selectedFilters],
@@ -70,21 +92,9 @@ export default function Disruptions() {
 
   const mobile = breakpoint !== 'large';
 
-  const canceledModes = [
-    bus && { key: 'bus', ...bus },
-    tram && { key: 'tram', ...tram },
-    rail && { key: 'rail', ...rail },
-    subway && { key: 'subway', ...subway },
-    ferry && { key: 'ferry', ...ferry },
-  ].filter(Boolean);
+  const noResults = !disruptions.length && !canceledModes.length;
 
-  const noResults =
-    !disruptions.length && !canceledModes.some(mode => mode.totalCount > 0);
-
-  const resultAmount = canceledModes.reduce(
-    (sum, mode) => (mode.totalCount > 0 ? sum + 1 : sum),
-    disruptionCards.length,
-  );
+  const resultAmount = canceledModes.length + disruptionCards.length;
 
   return (
     <div
@@ -105,24 +115,20 @@ export default function Disruptions() {
             {msg => <h3 className="heading-xs">{msg}</h3>}
           </FormattedMessage>
           <div className="disruptions-list">
-            {canceledModes.map(
-              ({ key, totalCount, edges }) =>
-                edges.length > 0 && (
-                  <CanceledTripCard
-                    isMobile={mobile}
-                    key={key}
-                    mode={key}
-                    totalCount={totalCount}
-                    trips={edges.map(({ node }) => node)}
-                  />
-                ),
-            )}
+            {canceledModes.map(({ key, routes }) => (
+              <CanceledTripCard
+                isMobile={mobile}
+                key={key}
+                mode={key}
+                routes={routes}
+              />
+            ))}
             {disruptionCards.map(({ key, alert, mode }) => (
               <DisruptionCard
                 key={key}
                 alert={alert}
                 mode={mode}
-                onClick={handleCardClick}
+                onClick={disruptionCardOnClick}
                 isMobile={mobile}
               />
             ))}
diff --git a/app/component/trafficnow/README.md b/app/component/trafficnow/README.md
index 6cc9c33f08..28ab7b43ac 100644
--- a/app/component/trafficnow/README.md
+++ b/app/component/trafficnow/README.md
@@ -25,11 +25,12 @@ The feature has two user flows:
 - alert cards second (`DisruptionCard`)
 
 ### Mode-specific cancellations flow
-1. `CanceledTripsContainer.js` and `CanceledTrips.js` load paginated mode-specific data via Relay pagination fragment/query.
+1. `CanceledTripsContainer.js` and `CanceledTrips.js` load paginated mode-specific data via canceledTripsSummary query
 2. Trips are grouped for display by:
 - `routeShortName`
 - then `patternCode`
-3. Details are shown in `CanceledTripsModal` when selected.
+- canceled trips are shown under each mode, grouped per day. 
+  By default 10 departure times are shown initially with the ability to expand the list when theres more available
 
 ## Data Sources and GraphQL
 
@@ -40,7 +41,7 @@ The feature has two user flows:
 - entities (`Stop`, `Route`, `StopOnRoute`)
 
 ### Canceled trips overview
-`queries/CanceledTripsOverviewQuery.js` requests one canceledTrips connection per mode:
+`queries/CanceledTripsOverviewQuery.js` requests one canceledTripsSummary per mode:
 - BUS
 - TRAM
 - RAIL
@@ -56,13 +57,14 @@ Each mode query is conditionally included with `@include` booleans from availabl
 
 ### Canceled trips cards (`CanceledTripCard.js`)
 Rules in overview:
-1. One card per mode appears when that mode has `edges.length > 0`.
+1. One card per mode appears when that mode has more than one cancellation.
 2. A node is skipped if either is missing:
 - `trip.route.gtfsId`
 - `start.schedule.time.departure`
 3. Card-internal grouping key is `trip.route.shortName`.
 4. Departure times are formatted to `HH:mm`.
 5. If exactly one grouped route exists, canceled departure times are displayed directly in the card.
+  - Pattern and date are also then showed inline with the departures.
 6. If `totalCount > trips.length`, an ellipsis indicator is shown.
 
 ### Alert cards (`DisruptionCard.js`)
@@ -140,11 +142,5 @@ Important behavior:
 ## TODO
 - Move `CanceledTripsContainer` under `FilterContextProvider` and have the selected filters affect CanceledTrips as well
   - Added filtering based on mode selection, more filters could be added when the api supports them
-- Add a reasonable unit test suite
-- Change CanceledTrips view to render on route basis when OTP endpoint supports such response
-  - Currently the response contains cancellations on cancellation basis which results in bad UX if all cancellations don't fit in the initial 20 node quota.
 - Change `Disruptions` view to render paginated results when OTP endpoint supports pagination
   - Blocked until API updates
-- Define whether and how to present `canceledTrips` that are in future (i.e. tomorrow and beyond)
-  - Show cancelations on the current day as ongoing, future cancelations as upcoming
-  - Needs to wait until api updates
diff --git a/app/component/trafficnow/RouteBadges.js b/app/component/trafficnow/RouteBadges.js
index 73dac45169..6f604b8a52 100644
--- a/app/component/trafficnow/RouteBadges.js
+++ b/app/component/trafficnow/RouteBadges.js
@@ -8,6 +8,7 @@ import { AlertEntityType } from '../../constants';
 import { groupEntitiesByMode } from './utils';
 import { useFilterContext } from './filters/FiltersContext';
 import RouteBadgeGroup from './components/RouteBadgeGroup';
+import EntityBadge from './components/EntityBadge';
 
 export default function RouteBadges({
   entities: rawEntities,
@@ -55,6 +56,7 @@ export default function RouteBadges({
         return (
           <RouteBadgeGroup
             key={key}
+            stopPropagation
             mode={groupMode}
             routes={visibleEntities.map(({ id, name, url, gtfsId }) => ({
               id,
@@ -66,15 +68,14 @@ export default function RouteBadges({
             highlightedGtfsId={selectedFilters.entity?.gtfsId}
             renderSuffix={
               hiddenCount > 0 ? (
-                <span
-                  className={`routes-m-narrow ${groupMode}`}
-                  aria-label={intl.formatMessage(
+                <EntityBadge
+                  entity={{ name: `+${hiddenCount}` }}
+                  mode={groupMode}
+                  ariaLabel={intl.formatMessage(
                     { id: 'traffic-now_more-routes' },
                     { count: hiddenCount },
                   )}
-                >
-                  {`+${hiddenCount}`}
-                </span>
+                />
               ) : null
             }
           />
diff --git a/app/component/trafficnow/TrafficNow.js b/app/component/trafficnow/TrafficNow.js
index 6f2c628dc6..6c048a9c16 100644
--- a/app/component/trafficnow/TrafficNow.js
+++ b/app/component/trafficnow/TrafficNow.js
@@ -63,7 +63,6 @@ const TrafficNow = () => {
       )}
       <Gutterer
         maxWidth="1440px"
-        containerStyles={{ height: '100%' }}
         leftGutterStyles={{
           backgroundColor: 'var(--white)',
         }}
diff --git a/app/component/trafficnow/components/CanceledDepartures.js b/app/component/trafficnow/components/CanceledDepartures.js
index dba5d3db11..004470344d 100644
--- a/app/component/trafficnow/components/CanceledDepartures.js
+++ b/app/component/trafficnow/components/CanceledDepartures.js
@@ -1,27 +1,142 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useFragment } from 'react-relay';
+import { DateTime } from 'luxon';
+import cx from 'classnames';
+import { useIntl } from 'react-intl';
+import CanceledDeparturesFragment from '../queries/CanceledDeparturesFragment';
+import Icon from '../../Icon';
+import EntityBadge from './EntityBadge';
+import { stopShape } from '../../../util/shapes';
 
-const CanceledDepartures = ({ departures }) => (
-  <div className="badges__departure-group">
-    {departures.map(({ tripId, departureTime }) => (
-      <span
-        key={`${tripId}-${departureTime}`}
-        className="badges__departure-time"
-      >
-        <span className="routes-s-narrow">{departureTime}</span>
-      </span>
-    ))}
-  </div>
-);
+const DEPARTURE_LIMIT = 10;
+
+const CanceledDepartures = ({
+  patterns: patternRefs,
+  inline = false,
+  departureLimit = DEPARTURE_LIMIT,
+  mode,
+}) => {
+  const patterns = useFragment(CanceledDeparturesFragment, patternRefs);
+  const { formatMessage } = useIntl();
+  const [expandedDates, setExpandedDates] = useState([]);
+
+  const patternsWithVisibleDeparturesByDate = patterns
+    .map(pattern => {
+      const visibleCanceledTrips = inline
+        ? pattern.canceledTrips.slice(0, departureLimit)
+        : pattern.canceledTrips;
+
+      return {
+        ...pattern,
+        hiddenDepartureCount: inline
+          ? Math.max(pattern.canceledTrips.length - departureLimit, 0)
+          : 0,
+        canceledTripsByDate: Object.groupBy(
+          visibleCanceledTrips,
+          ({ serviceDate }) => serviceDate,
+        ),
+      };
+    })
+    .filter(pattern => !inline || pattern.canceledTrips.length);
+
+  return (
+    <div className={cx('badges__departure-group', { inline })}>
+      {patternsWithVisibleDeparturesByDate.map(pattern => (
+        <React.Fragment key={pattern.code}>
+          {(patterns.length > 1 || inline) && (
+            <EntityBadge entity={pattern} isPattern mode={mode} />
+          )}
+          {Object.entries(pattern.canceledTripsByDate).map(
+            ([serviceDate, canceledTrips]) => (
+              <div
+                className={cx('badges__departure-group__date-group', {
+                  inline,
+                })}
+                key={`${pattern.code}-${serviceDate}`}
+              >
+                {serviceDate !== DateTime.now().toISODate() && (
+                  <div className="departures-date-badge">
+                    <Icon img="icon_calendar" />
+                    <div className="routes-s-bold">
+                      {serviceDate ===
+                      DateTime.now().plus({ days: 1 }).toISODate()
+                        ? formatMessage({ id: 'tomorrow' })
+                        : DateTime.fromISO(serviceDate).toFormat('d.L.')}
+                    </div>
+                  </div>
+                )}
+                <div className="departuretimes">
+                  {canceledTrips
+                    .filter(
+                      (_, i) =>
+                        inline ||
+                        i < departureLimit ||
+                        expandedDates.includes(serviceDate),
+                    )
+                    .map(({ trip }) => (
+                      <span
+                        key={`${trip.gtfsId}-${trip.stoptimes[0].scheduledDeparture}`}
+                        className="badges__departure-time"
+                      >
+                        <span className="routes-m-narrow">
+                          {DateTime.fromISO(serviceDate)
+                            .plus(trip.stoptimes[0].scheduledDeparture * 1000)
+                            .toFormat(' HH:mm ')}
+                        </span>
+                      </span>
+                    ))}
+                </div>
+                {canceledTrips.length > departureLimit &&
+                  !expandedDates.includes(serviceDate) &&
+                  !inline && (
+                    <button
+                      className="show-departures-button"
+                      onClick={() =>
+                        setExpandedDates([...expandedDates, serviceDate])
+                      }
+                    >
+                      {formatMessage({ id: 'show-all' })}
+                    </button>
+                  )}
+              </div>
+            ),
+          )}
+          {inline && pattern.hiddenDepartureCount > 0 && (
+            <span className="badges__departure-time badges__departure-time--show-more">
+              <span className="routes-m-narrow">
+                +{pattern.hiddenDepartureCount}
+              </span>
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
 
 CanceledDepartures.propTypes = {
-  departures: PropTypes.arrayOf(
+  patterns: PropTypes.arrayOf(
     PropTypes.shape({
-      tripId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-        .isRequired,
-      departureTime: PropTypes.string.isRequired,
-    }),
+      code: PropTypes.string.isRequired,
+      stops: PropTypes.arrayOf(stopShape).isRequired,
+      canceledTrips: PropTypes.arrayOf(
+        PropTypes.shape({
+          trip: PropTypes.shape({
+            gtfsId: PropTypes.string.isRequired,
+            stoptimes: PropTypes.arrayOf(
+              PropTypes.shape({
+                scheduledDeparture: PropTypes.number.isRequired,
+              }).isRequired,
+            ).isRequired,
+          }).isRequired,
+        }).isRequired,
+      ),
+    }).isRequired,
   ).isRequired,
+  departureLimit: PropTypes.number,
+  inline: PropTypes.bool,
+  mode: PropTypes.string,
 };
 
 export default CanceledDepartures;
diff --git a/app/component/trafficnow/components/CancellationContainer.js b/app/component/trafficnow/components/CancellationContainer.js
index 1c57b6851c..df4765a9bc 100644
--- a/app/component/trafficnow/components/CancellationContainer.js
+++ b/app/component/trafficnow/components/CancellationContainer.js
@@ -1,22 +1,17 @@
 import React from 'react';
-import Button from '@hsl-fi/button';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import FavouriteRouteContainer from '../../routepage/FavouriteRouteContainer';
 import { PREFIX_TIMETABLE, routePagePath } from '../../../util/path';
-import Icon from '../../Icon';
 import PatternWithCancellations from './PatternWithCancellations';
 import RouteBadgeGroup from './RouteBadgeGroup';
+import DisruptionBadge from '../DisruptionBadge';
+import { patternShape, routeShape } from '../../../util/shapes';
 
-const CancellationContainer = ({
-  item,
-  mode,
-  isMobile,
-  colors,
-  onShowDetailsClick,
-}) => {
-  const { routeShortName, routeGtfsId, patterns, index, total } = item;
-  const intl = useIntl();
+const CancellationContainer = ({ routeSummary, mode }) => {
+  const {
+    route: { shortName, gtfsId },
+    patterns,
+  } = routeSummary;
 
   return (
     <div className="cancellation-container">
@@ -27,68 +22,47 @@ const CancellationContainer = ({
             headsignGroupClassName={mode}
             routes={[
               {
-                id: routeShortName,
-                name: routeShortName,
-                url: routePagePath(routeGtfsId, PREFIX_TIMETABLE),
-                gtfsId: routeGtfsId,
+                id: shortName,
+                name: shortName,
+                url: routePagePath(gtfsId, PREFIX_TIMETABLE),
+                gtfsId,
               },
             ]}
           />
+          <DisruptionBadge showIcon variant="WARNING" label="NO_SERVICE" />
         </div>
-        <FavouriteRouteContainer gtfsId={routeGtfsId} />
+        <FavouriteRouteContainer gtfsId={gtfsId} />
       </div>
       <div className="cancellation-container--row">
         <div className="cancellation-container__patterns--column">
-          {Object.entries(patterns).map(([patternCode, pattern]) => (
-            <React.Fragment
-              key={`${routeShortName}-${patternCode}-${pattern.trip.tripId}`}
-            >
+          {patterns.map(({ pattern }) => (
+            <React.Fragment key={`${shortName}-${pattern.code}`}>
               <PatternWithCancellations
+                routeId={gtfsId}
+                mode={mode}
                 pattern={pattern}
-                withDeparturesAmount
+                summarize={false}
               />
             </React.Fragment>
           ))}
         </div>
-        {isMobile && (
-          <button
-            type="button"
-            onClick={() => onShowDetailsClick(routeShortName)}
-          >
-            <Icon img="icon_arrow-collapse--right" color={colors.primary} />
-          </button>
-        )}
       </div>
-
-      {!isMobile && (
-        <Button
-          className="show-departures-button link-bold-small"
-          size="small"
-          fullWidth={false}
-          variant="white"
-          value={intl.formatMessage({ id: 'show-departures' })}
-          onClick={() => onShowDetailsClick(routeShortName)}
-        />
-      )}
-      {!isMobile && index + 1 < total && (
-        <div className="separator horizontal" />
-      )}
     </div>
   );
 };
 
 CancellationContainer.propTypes = {
-  item: PropTypes.shape({
-    routeShortName: PropTypes.string,
-    routeGtfsId: PropTypes.string,
-    patterns: PropTypes.shape({}),
-    index: PropTypes.number,
-    total: PropTypes.number,
+  routeSummary: PropTypes.shape({
+    route: routeShape.isRequired,
+    patterns: PropTypes.arrayOf(
+      PropTypes.shape({
+        pattern: patternShape.isRequired,
+        cancellationCount: PropTypes.number.isRequired,
+      }),
+    ).isRequired,
+    cancellationCount: PropTypes.number.isRequired,
   }).isRequired,
   mode: PropTypes.string.isRequired,
-  isMobile: PropTypes.bool.isRequired,
-  colors: PropTypes.shape({ primary: PropTypes.string }).isRequired,
-  onShowDetailsClick: PropTypes.func.isRequired,
 };
 
 export default CancellationContainer;
diff --git a/app/component/trafficnow/components/EntityBadge.js b/app/component/trafficnow/components/EntityBadge.js
new file mode 100644
index 0000000000..bafb7ff085
--- /dev/null
+++ b/app/component/trafficnow/components/EntityBadge.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Icon from '../../Icon';
+import { entityShape } from '../../../util/shapes';
+
+function EntityBadge({
+  entity,
+  mode,
+  ariaLabel,
+  className,
+  handleClick = () => {},
+  isFavourite = false,
+  isPattern = false,
+  highlighted = false,
+}) {
+  const { name, url } = entity;
+
+  const link = !isPattern ? (
+    <a
+      onClick={handleClick(url)}
+      href={url}
+      className={cx(mode, {
+        highlight: highlighted,
+      })}
+    >
+      <span className="routes-m-narrow">{name}</span>
+    </a>
+  ) : (
+    <a onClick={handleClick} href={url} className={mode}>
+      <span className="routes-m-narrow">{entity.stops[0].name}</span>
+      <Icon img="icon_arrow-right-long" color="currentcolor" />
+      <span className="routes-m-narrow">
+        {entity.headsign || entity.stops[0].name}
+      </span>
+    </a>
+  );
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cx(['badge-container', mode, className])}
+    >
+      <div className="entity-name">{link}</div>
+      {isFavourite && <Icon img="icon_my-place" className="fav-icon" />}
+    </div>
+  );
+}
+
+EntityBadge.propTypes = {
+  entity: PropTypes.shape(() => entityShape).isRequired,
+  mode: PropTypes.string,
+  ariaLabel: PropTypes.string,
+  className: PropTypes.string,
+  handleClick: PropTypes.func,
+  isFavourite: PropTypes.bool,
+  isPattern: PropTypes.bool,
+  highlighted: PropTypes.bool,
+};
+
+export default EntityBadge;
diff --git a/app/component/trafficnow/components/PatternWithCancellations.js b/app/component/trafficnow/components/PatternWithCancellations.js
index cd9cdb9d4b..dbc9aed6d1 100644
--- a/app/component/trafficnow/components/PatternWithCancellations.js
+++ b/app/component/trafficnow/components/PatternWithCancellations.js
@@ -1,74 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { useConfigContext } from '../../../configurations/ConfigContext';
-import Icon from '../../Icon';
+import { useFragment } from 'react-relay';
+import { useRouter } from 'found';
 import CanceledDepartures from './CanceledDepartures';
-
 import './PatternWithCancellations.scss';
+import CanceledTripsPatternFragment from '../queries/CanceledTripsPatternFragment';
+import { patternShape } from '../../../util/shapes';
+import EntityBadge from './EntityBadge';
+import { PREFIX_TIMETABLE, routePagePath } from '../../../util/path';
+
+const PatternWithCancellations = ({ routeId, pattern: patternRef, mode }) => {
+  const pattern = useFragment(CanceledTripsPatternFragment, patternRef);
+  const { router } = useRouter();
+  const url = routePagePath(routeId, PREFIX_TIMETABLE, pattern.code);
 
-const PatternWithCancellations = ({
-  pattern,
-  withDepartureBadges = false,
-  withDeparturesAmount = false,
-}) => {
-  const { colors } = useConfigContext();
-  const { start, end, trip, canceledDepartures } = pattern;
+  const handleClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    router.push(url);
+  };
 
   return (
-    <div
-      className="pattern-column"
-      style={{
-        gap: withDepartureBadges ? 'var(--space-xs)' : 'var(--space-xxs)',
-      }}
-    >
-      <div className="pattern-stops">
-        <span>{start.stopLocation.name}</span>
-        <Icon img="icon_arrow-right-long" color={colors.primary} />
-        <span>{trip.pattern.headsign || end.stopLocation.name}</span>
-      </div>
-      {withDeparturesAmount && (
-        <div className="routes-s warning">
-          <FormattedMessage
-            id="traffic-now_canceled-trips--simple"
-            values={{ amount: canceledDepartures.length }}
-          />
-        </div>
-      )}
-      {withDepartureBadges && (
-        <CanceledDepartures
-          departures={canceledDepartures.map(departureTime => ({
-            tripId: trip.tripId,
-            departureTime,
-          }))}
-        />
-      )}
+    <div className="pattern-column">
+      <EntityBadge
+        mode={mode}
+        entity={{
+          __typename: 'Pattern',
+          ...pattern,
+        }}
+        handleClick={handleClick}
+        isPattern
+      />
+      <CanceledDepartures patterns={[pattern]} />
     </div>
   );
 };
 
 PatternWithCancellations.propTypes = {
-  pattern: PropTypes.shape({
-    start: PropTypes.shape({
-      stopLocation: PropTypes.shape({
-        name: PropTypes.string,
-      }),
-    }),
-    end: PropTypes.shape({
-      stopLocation: PropTypes.shape({
-        name: PropTypes.string,
-      }),
-    }),
-    trip: PropTypes.shape({
-      tripId: PropTypes.string,
-      pattern: PropTypes.shape({
-        headsign: PropTypes.string,
-      }),
-    }),
-    canceledDepartures: PropTypes.arrayOf(PropTypes.shape({})),
-  }).isRequired,
-  withDepartureBadges: PropTypes.bool,
-  withDeparturesAmount: PropTypes.bool,
+  routeId: PropTypes.string.isRequired,
+  pattern: patternShape.isRequired,
+  mode: PropTypes.string,
 };
 
 export default PatternWithCancellations;
diff --git a/app/component/trafficnow/components/RouteBadgeGroup.js b/app/component/trafficnow/components/RouteBadgeGroup.js
index 8ca0b36ab8..0f81669a0e 100644
--- a/app/component/trafficnow/components/RouteBadgeGroup.js
+++ b/app/component/trafficnow/components/RouteBadgeGroup.js
@@ -2,8 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useRouter } from 'found';
+import connectToStores from 'fluxible-addons-react/connectToStores';
 import Icon from '../../Icon';
 import IconBackground from '../../icon/IconBackground';
+import { favouriteShape } from '../../../util/shapes';
+import EntityBadge from './EntityBadge';
 
 const STOP_SIGN_ICON_SCALE = 0.5;
 const NORMAL_ICON_SCALE = 1;
@@ -17,9 +20,12 @@ const RouteBadgeGroup = ({
   renderSuffix = null,
   headsignGroupClassName = undefined,
   stopPropagation = false,
+  favourites = [],
 }) => {
   const { router } = useRouter();
 
+  const favouriteRoutesAndStops = favourites.map(({ gtfsId }) => gtfsId);
+
   const handleRouteBadgeClick = url => e => {
     e.preventDefault();
     if (stopPropagation) {
@@ -42,27 +48,32 @@ const RouteBadgeGroup = ({
       />
       <div className={cx('badges__headsign-group', headsignGroupClassName)}>
         {routes.map(route => {
-          const { name, url, gtfsId } = route;
-          const routeKey = gtfsId || `${name}-${url}`;
-          const link = (
-            <a
-              onClick={handleRouteBadgeClick(url)}
-              href={url}
-              className={cx(mode, {
-                highlight: gtfsId === highlightedGtfsId,
-              })}
-            >
-              <span className="routes-m-narrow">{name}</span>
-            </a>
-          );
+          const routeKey = route.gtfsId || `${route.name}-${route.url}`;
+          const isFavourite = favouriteRoutesAndStops.includes(route.gtfsId);
 
           if (!renderRouteSuffix) {
-            return <React.Fragment key={routeKey}>{link}</React.Fragment>;
+            return (
+              <React.Fragment key={routeKey}>
+                <EntityBadge
+                  entity={route}
+                  isFavourite={isFavourite}
+                  handleClick={handleRouteBadgeClick}
+                  mode={mode}
+                  highlighted={highlightedGtfsId === route.gtfsId}
+                />
+              </React.Fragment>
+            );
           }
 
           return (
             <div key={routeKey} className="badges__headsign-group--route">
-              {link}
+              <EntityBadge
+                entity={route}
+                isFavourite={isFavourite}
+                handleClick={handleRouteBadgeClick}
+                mode={mode}
+                highlighted={highlightedGtfsId === route.gtfsId}
+              />
               {renderRouteSuffix(route)}
             </div>
           );
@@ -89,6 +100,15 @@ RouteBadgeGroup.propTypes = {
   renderSuffix: PropTypes.node,
   headsignGroupClassName: PropTypes.string,
   stopPropagation: PropTypes.bool,
+  favourites: PropTypes.arrayOf(favouriteShape),
 };
 
-export default RouteBadgeGroup;
+const connectedComponent = connectToStores(
+  RouteBadgeGroup,
+  ['FavouriteStore'],
+  context => ({
+    favourites: context.getStore('FavouriteStore').getFavourites(),
+  }),
+);
+
+export { connectedComponent as default, RouteBadgeGroup as Component };
diff --git a/app/component/trafficnow/queries/CanceledDeparturesFragment.js b/app/component/trafficnow/queries/CanceledDeparturesFragment.js
new file mode 100644
index 0000000000..2c75b08a1a
--- /dev/null
+++ b/app/component/trafficnow/queries/CanceledDeparturesFragment.js
@@ -0,0 +1,30 @@
+import { graphql } from 'react-relay';
+
+export default graphql`
+  fragment CanceledDeparturesFragment on Pattern
+  @relay(plural: true)
+  @argumentDefinitions(serviceDateRanges: { type: "[LocalDateRangeInput!]" }) {
+    code
+    stops {
+      name
+    }
+    canceledTrips(serviceDateRanges: $serviceDateRanges) {
+      serviceDate
+      trip {
+        gtfsId
+        stoptimes {
+          scheduledDeparture
+        }
+        directionId
+        pattern {
+          code
+          headsign
+        }
+        route {
+          gtfsId
+          shortName
+        }
+      }
+    }
+  }
+`;
diff --git a/app/component/trafficnow/queries/CanceledTripNodeFieldsFragment.js b/app/component/trafficnow/queries/CanceledTripNodeFieldsFragment.js
deleted file mode 100644
index ee0e527047..0000000000
--- a/app/component/trafficnow/queries/CanceledTripNodeFieldsFragment.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { graphql } from 'react-relay';
-
-export default graphql`
-  fragment CanceledTripNodeFieldsFragment on TripOnServiceDate {
-    start {
-      stopLocation {
-        ... on Stop {
-          name
-        }
-      }
-      schedule {
-        time {
-          ... on ArrivalDepartureTime {
-            departure
-          }
-        }
-      }
-    }
-    end {
-      stopLocation {
-        ... on Stop {
-          name
-        }
-      }
-    }
-    trip {
-      tripId: id
-      pattern {
-        code
-        headsign
-      }
-      directionId
-      route {
-        gtfsId
-        shortName
-      }
-    }
-  }
-`;
diff --git a/app/component/trafficnow/queries/CanceledTripsForModeQuery.js b/app/component/trafficnow/queries/CanceledTripsForModeQuery.js
index dddb281ce4..9d2446881f 100644
--- a/app/component/trafficnow/queries/CanceledTripsForModeQuery.js
+++ b/app/component/trafficnow/queries/CanceledTripsForModeQuery.js
@@ -1,12 +1,33 @@
 import { graphql } from 'react-relay';
-import './CanceledTripsPaginationFragment';
+import './CanceledTripsPatternFragment';
 
 export default graphql`
   query CanceledTripsForModeQuery(
-    $first: Int!
-    $after: String
     $mode: TransitMode!
+    $serviceDateRanges: [LocalDateRangeInput!]!
   ) {
-    ...CanceledTripsPaginationFragment
+    canceledTripsSummary(
+      filters: {
+        include: { modes: [$mode], serviceDateRanges: $serviceDateRanges }
+      }
+    ) {
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            ...CanceledTripsPatternFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
+    }
   }
 `;
diff --git a/app/component/trafficnow/queries/CanceledTripsOverviewFragment.js b/app/component/trafficnow/queries/CanceledTripsOverviewFragment.js
deleted file mode 100644
index 39affa3d23..0000000000
--- a/app/component/trafficnow/queries/CanceledTripsOverviewFragment.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { graphql } from 'react-relay';
-import './CanceledTripNodeFieldsFragment';
-
-export default graphql`
-  fragment CanceledTripsOverviewFragment on TripOnServiceDateConnection {
-    totalCount
-    pageInfo {
-      endCursor
-      hasNextPage
-    }
-    edges {
-      node {
-        ...CanceledTripNodeFieldsFragment @relay(mask: false)
-      }
-    }
-  }
-`;
diff --git a/app/component/trafficnow/queries/CanceledTripsOverviewQuery.js b/app/component/trafficnow/queries/CanceledTripsOverviewQuery.js
index 13a22eff02..1501808d3f 100644
--- a/app/component/trafficnow/queries/CanceledTripsOverviewQuery.js
+++ b/app/component/trafficnow/queries/CanceledTripsOverviewQuery.js
@@ -1,46 +1,153 @@
 import { graphql } from 'react-relay';
-import './CanceledTripsOverviewFragment';
+import './CanceledDeparturesFragment';
 
 export default graphql`
   query CanceledTripsOverviewQuery(
-    $amount: Int!
+    $serviceDateRanges: [LocalDateRangeInput!]!
     $fetchBus: Boolean!
     $fetchTram: Boolean!
     $fetchRail: Boolean!
     $fetchSubway: Boolean!
     $fetchFerry: Boolean!
   ) {
-    bus: canceledTrips(first: $amount, filters: { include: { modes: [BUS] } })
-      @include(if: $fetchBus) {
-      ...CanceledTripsOverviewFragment @relay(mask: false)
+    bus: canceledTripsSummary(
+      filters: {
+        include: { modes: [BUS], serviceDateRanges: $serviceDateRanges }
+      }
+    ) @include(if: $fetchBus) {
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            headsign
+            stops {
+              name
+            }
+            ...CanceledDeparturesFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
     }
 
-    tram: canceledTrips(
-      first: $amount
-      filters: { include: { modes: [TRAM] } }
+    tram: canceledTripsSummary(
+      filters: {
+        include: { modes: [TRAM], serviceDateRanges: $serviceDateRanges }
+      }
     ) @include(if: $fetchTram) {
-      ...CanceledTripsOverviewFragment @relay(mask: false)
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            headsign
+            stops {
+              name
+            }
+            ...CanceledDeparturesFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
     }
 
-    rail: canceledTrips(
-      first: $amount
-      filters: { include: { modes: [RAIL] } }
+    rail: canceledTripsSummary(
+      filters: {
+        include: { modes: [RAIL], serviceDateRanges: $serviceDateRanges }
+      }
     ) @include(if: $fetchRail) {
-      ...CanceledTripsOverviewFragment @relay(mask: false)
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            headsign
+            stops {
+              name
+            }
+            ...CanceledDeparturesFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
     }
 
-    subway: canceledTrips(
-      first: $amount
-      filters: { include: { modes: [SUBWAY] } }
+    subway: canceledTripsSummary(
+      filters: {
+        include: { modes: [SUBWAY], serviceDateRanges: $serviceDateRanges }
+      }
     ) @include(if: $fetchSubway) {
-      ...CanceledTripsOverviewFragment @relay(mask: false)
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            headsign
+            stops {
+              name
+            }
+            ...CanceledDeparturesFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
     }
 
-    ferry: canceledTrips(
-      first: $amount
-      filters: { include: { modes: [FERRY] } }
+    ferry: canceledTripsSummary(
+      filters: {
+        include: { modes: [FERRY], serviceDateRanges: $serviceDateRanges }
+      }
     ) @include(if: $fetchFerry) {
-      ...CanceledTripsOverviewFragment @relay(mask: false)
+      routes {
+        cancellationCount
+        route {
+          id
+          gtfsId
+          shortName
+          mode
+        }
+        patterns {
+          cancellationCount
+          pattern {
+            code
+            headsign
+            stops {
+              name
+            }
+            ...CanceledDeparturesFragment
+              @arguments(serviceDateRanges: $serviceDateRanges)
+          }
+        }
+      }
     }
   }
 `;
diff --git a/app/component/trafficnow/queries/CanceledTripsPaginationFragment.js b/app/component/trafficnow/queries/CanceledTripsPaginationFragment.js
deleted file mode 100644
index 92de92a258..0000000000
--- a/app/component/trafficnow/queries/CanceledTripsPaginationFragment.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { graphql } from 'react-relay';
-import './CanceledTripNodeFieldsFragment';
-
-export default graphql`
-  fragment CanceledTripsPaginationFragment on QueryType
-  @refetchable(queryName: "CanceledTripsPaginationQuery") {
-    canceledTrips(
-      first: $first
-      after: $after
-      filters: { include: { modes: [$mode] } }
-    ) @connection(key: "CanceledTripsPagination__canceledTrips") {
-      totalCount
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      edges {
-        node {
-          ...CanceledTripNodeFieldsFragment @relay(mask: false)
-        }
-      }
-    }
-  }
-`;
diff --git a/app/component/trafficnow/queries/CanceledTripsPatternFragment.js b/app/component/trafficnow/queries/CanceledTripsPatternFragment.js
new file mode 100644
index 0000000000..6f7561f0b4
--- /dev/null
+++ b/app/component/trafficnow/queries/CanceledTripsPatternFragment.js
@@ -0,0 +1,16 @@
+import { graphql } from 'react-relay';
+import './CanceledDeparturesFragment';
+
+export default graphql`
+  fragment CanceledTripsPatternFragment on Pattern
+  @argumentDefinitions(serviceDateRanges: { type: "[LocalDateRangeInput!]" }) {
+    id
+    code
+    headsign
+    stops {
+      name
+    }
+    ...CanceledDeparturesFragment
+      @arguments(serviceDateRanges: $serviceDateRanges)
+  }
+`;
diff --git a/app/component/trafficnow/styles/cards.scss b/app/component/trafficnow/styles/cards.scss
index 1c4556aa51..e6d28b1c50 100644
--- a/app/component/trafficnow/styles/cards.scss
+++ b/app/component/trafficnow/styles/cards.scss
@@ -58,11 +58,17 @@
       &__body {
         width: 100%;
         overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+
+        @media screen and (max-width: $bp-tablet) {
+          gap: var(--space-s);
+        }
       }
 
       &__footer {
         width: 100%;
-        background-color: $white;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -88,53 +94,105 @@
         flex-direction: column;
         align-items: flex-start;
         gap: var(--space-m);
-        flex: 1 0 0;
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
+        flex: 1 1 auto;
+        min-height: 0;
+        min-width: 0;
+        width: auto;
+        max-width: 100%;
 
         @media screen and (max-width: $bp-tablet) {
           padding: 0;
-          gap: var(--space-xs);
+          gap: var(--space-s);
+          width: 100%;
         }
 
-        .card {
-          width: 100%;
+        .cancellation-container {
+          position: relative;
           display: flex;
-          padding: var(--space-xl) var(--space-xl) var(--space-m)
-            var(--space-xl);
           flex-direction: column;
-          align-items: flex-start;
-          gap: var(--space-s);
-          align-self: stretch;
-          margin-bottom: 0;
+          width: 100%;
+          gap: var(--space-m);
+
+          @media screen and (max-width: $bp-tablet) {
+            padding: var(--space-fixed-m);
+            background-color: $white;
+            border-top: 1px solid $light-gray;
+            border-bottom: 1px solid $light-gray;
+          }
+
+          &:first-child {
+            @media screen and (max-width: $bp-tablet) {
+              border-top: 0;
+            }
+          }
+
+          &--row {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            @media screen and (max-width: $bp-tablet) {
+              width: 100%;
+            }
+          }
 
-          .cancellation-container {
-            position: relative;
+          &__patterns--column {
             display: flex;
             flex-direction: column;
+            gap: var(--space-m);
             width: 100%;
-            gap: var(--space-s);
-            padding: var(--space-s) var(--space-m);
-
-            &--row {
-              display: flex;
-              flex-direction: row;
-              justify-content: space-between;
-              align-items: center;
-            }
 
-            &__patterns--column {
-              display: flex;
-              flex-direction: column;
-              gap: var(--space-s);
+            .pattern-column {
+              gap: var(--space-fixed-s);
+              margin-bottom: var(--space-s);
+
+              @media screen and (max-width: $bp-tablet) {
+                > .badge-container,
+                > .badge-container .entity-name,
+                > .badge-container .entity-name a {
+                  width: 100%;
+                }
+
+                > .badge-container {
+                  display: flex;
+                }
+
+                > .badge-container .entity-name {
+                  display: flex;
+                  flex: 1 1 auto;
+                }
+
+                > .badge-container .entity-name a {
+                  justify-content: center;
+                  text-align: center;
+                }
+              }
             }
 
-            button.show-departures-button {
-              border-radius: var(--radius-pill, 999px);
-              align-self: flex-end;
+            @media screen and (max-width: $bp-tablet) {
+              width: 100%;
             }
           }
+
+          button.show-departures-button {
+            color: $link-color;
+            align-self: flex-end;
+          }
+        }
+
+        .canceled-trips__card {
+          width: 100%;
+          display: flex;
+          padding: var(--space-l) var(--space-xl);
+          flex-direction: column;
+          align-items: flex-start;
+          gap: var(--space-m);
+          align-self: stretch;
+          margin-bottom: 0;
+          background-color: $white;
+          border-radius: var(--radius-l);
+          border: 1px solid $light-gray;
         }
       }
     }
diff --git a/app/component/trafficnow/styles/components.scss b/app/component/trafficnow/styles/components.scss
index efbb4d369c..369b168d2a 100644
--- a/app/component/trafficnow/styles/components.scss
+++ b/app/component/trafficnow/styles/components.scss
@@ -14,16 +14,51 @@
   }
 }
 
+.badge-container {
+  position: relative;
+  display: inline-flex;
+
+  .fav-icon {
+    position: absolute;
+    top: -8px;
+    right: -4px;
+  }
+
+  a {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-xs);
+    align-items: center;
+    background-color: color-mix(in srgb, currentcolor, white 90%);
+    border-radius: var(--radius-s);
+    padding: var(--space-xs) var(--space-xs);
+    text-decoration: none;
+    height: $badge-height;
+    min-width: $badge-height;
+    justify-content: center;
+
+    &.highlight {
+      border: 1px solid $standalone-btn-active-color;
+    }
+
+    &:hover {
+      background-color: color-mix(in srgb, currentcolor, white 80%);
+    }
+  }
+}
+
 // Route badges, departure badges, badge groups
 .badges {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-xs);
+  gap: var(--space-fixed-xs);
 
   &__group {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     gap: var(--space-xxs);
+    align-items: center;
 
     .icon.stop {
       margin: 0 calc(-1 * var(--space-xxs));
@@ -31,57 +66,89 @@
   }
 
   &__headsign-group {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--space-xxs);
-    align-items: center;
+    display: contents;
 
     &--route {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--space-xxs);
+      display: contents;
+    }
+  }
+
+  &__departure-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+
+    &.inline {
+      display: contents;
     }
 
-    a,
-    > span {
+    &__date-group {
       display: flex;
-      align-items: center;
-      background-color: color-mix(in srgb, currentcolor, white 90%);
-      border-radius: var(--radius-s);
-      padding: var(--space-xs) var(--space-xs);
-      text-decoration: none;
-      height: $badge-height;
-      min-width: $badge-height;
-      justify-content: center;
+      flex-direction: column;
+      gap: var(--space-xs);
+
+      &.inline {
+        display: contents;
+      }
+
+      .departures-date-badge {
+        background-color: #f2f5f7;
+        border-radius: var(--radius-s);
+        padding: var(--space-xxs) var(--space-s);
+        display: flex;
+        flex-direction: row;
+        gap: var(--space-xxs);
+        width: fit-content;
+        align-items: center;
+      }
 
-      &.highlight {
-        border: 1px solid $standalone-btn-active-color;
+      &.inline .departures-date-badge {
+        align-self: stretch;
+        padding: var(--space-xs) var(--space-xs);
       }
 
-      &:hover {
-        background-color: color-mix(in srgb, currentcolor, white 80%);
+      .departuretimes {
+        display: flex;
+        flex-direction: row;
+        gap: var(--space-fixed-xs);
+        flex-wrap: wrap;
+      }
+
+      &.inline .departuretimes {
+        display: contents;
       }
     }
   }
 
-  &__departure-group {
-    display: flex;
-    flex-direction: row;
-    gap: $gap-badge-departure;
+  &__departure-date {
+    padding: var(--space-xxs) var(--space-xs);
+    justify-content: center;
   }
 
   &__departure-time {
-    padding: var(--space-xxs) var(--space-xs);
+    padding: var(--space-xxs) var(--space-fixed-xs);
     color: $cancelation-red;
     text-decoration: line-through;
+    text-decoration-thickness: 2px;
     border-radius: var(--radius-s);
     border: 1px solid $light-gray;
     background: $white;
+    min-width: 60px;
+    text-align: center;
+    white-space: pre;
 
     > span {
       color: $gray;
     }
+
+    &--show-more {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 32px;
+      min-width: 32px;
+      width: 32px;
+      text-decoration: none;
+    }
   }
 }
diff --git a/app/component/trafficnow/styles/layout.scss b/app/component/trafficnow/styles/layout.scss
index 6062e46614..aaf1db095b 100644
--- a/app/component/trafficnow/styles/layout.scss
+++ b/app/component/trafficnow/styles/layout.scss
@@ -6,7 +6,7 @@
 .traffic-now {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  min-height: 100%;
   width: 100%;
   font-family: $font-family;
 
@@ -81,7 +81,7 @@
     display: flex;
     flex-direction: row;
     align-content: center;
-    height: 100%;
+    min-height: 0;
     justify-content: flex-start;
     background-color: $background-color-lighter;
 
diff --git a/app/translations/en.js b/app/translations/en.js
index 9316b93648..69d7b1252c 100644
--- a/app/translations/en.js
+++ b/app/translations/en.js
@@ -743,6 +743,7 @@ export default {
       'You can choose your preferred taxi and ride‑hailing services to include them in route planning.',
     'settings-taxi-routes':
       'Include taxi and ride‑hailing services in your routes!',
+    'show-all': 'Show all',
     'show-departures': 'Show departures',
     'show-more': 'Show more',
     'show-more-stops-near-you': 'Show more stops near you',
@@ -841,7 +842,7 @@ export default {
     'traffic-now-long': 'Services now',
     'traffic-now_bread': 'Travelling',
     'traffic-now_canceled-trips--amount':
-      'Listing {amount} of {totalAmount} cancelled departures',
+      'Listing {amount} of {totalAmount} routes',
     'traffic-now_canceled-trips--simple': '{amount} cancellations',
     'traffic-now_description':
       'Up-to-date information on disruptions and exceptions. ',
diff --git a/app/translations/fi.js b/app/translations/fi.js
index e26e37b009..6038090057 100644
--- a/app/translations/fi.js
+++ b/app/translations/fi.js
@@ -722,6 +722,7 @@ export default {
     'settings-taxi':
       'Voit valita haluamasi taksi- ja kyytipalvelut, jolloin ne ovat osana reititystä',
     'settings-taxi-routes': 'Taksi- ja kyytipalvelut osaksi reittejäsi!',
+    'show-all': 'Näytä kaikki',
     'show-departures': 'Näytä lähdöt',
     'show-more': 'Näytä lisää',
     'show-more-stops-near-you': 'Näytä lisää pysäkkejä lähelläsi',
@@ -821,7 +822,7 @@ export default {
     'traffic-now-long': 'Liikennetilanne nyt',
     'traffic-now_bread': 'Matkustaminen',
     'traffic-now_canceled-trips--amount':
-      'Näytetään {amount} yhteensä {totalAmount} perutusta lähdöstä',
+      'Näytetään {amount} yhteensä {totalAmount} linjasta',
     'traffic-now_canceled-trips--simple': '{amount} peruttua',
     'traffic-now_description':
       'Ajantasaiset tiedot häiriöistä ja poikkeuksista. ',
diff --git a/app/translations/sv.js b/app/translations/sv.js
index 2a07909739..e5a4a1e4ba 100644
--- a/app/translations/sv.js
+++ b/app/translations/sv.js
@@ -732,6 +732,7 @@ export default {
       'Du kan själv välja vilka taxi- och skjutstjänster som ska ingå i din rutt',
     'settings-taxi-routes':
       'Använd taxi- och skjutstjänster som en del av din resa!',
+    'show-all': 'Visa alla',
     'show-departures': 'Visa avgångarna',
     'show-more': 'Visa mer',
     'show-more-stops-near-you': 'Visa flera hållplatser nära dig',
@@ -833,7 +834,7 @@ export default {
     'traffic-now-long': 'Trafikläget nu',
     'traffic-now_bread': 'Att resa med oss',
     'traffic-now_canceled-trips--amount':
-      'Visar {amount} av {totalAmount} inställda avgångar',
+      'Visar {amount} av {totalAmount} rutter',
     'traffic-now_canceled-trips--simple': '{amount} inställda',
     'traffic-now_description':
       'Aktuell information om störningar och undantag. ',
diff --git a/build/schema.graphql b/build/schema.graphql
index 88e306cf56..5ddb72b236 100644
--- a/build/schema.graphql
+++ b/build/schema.graphql
@@ -346,6 +346,33 @@ type CallSchedule {
   time: CallScheduledTime
 }
 
+"Cancellation statistics grouped by entities."
+type CanceledTripsSummary {
+  "How many canceled trips there are for the routes which have any cancellations."
+  routes: [CanceledTripsSummaryRoute!]!
+}
+
+"Contains pattern and the information for how many canceled trips there are for the pattern."
+type CanceledTripsSummaryPattern {
+  "How many canceled trips there are for the pattern."
+  cancellationCount: Int!
+  "The pattern for which the cancellation statistics are provided for."
+  pattern: Pattern!
+}
+
+"""
+Contains route, how many canceled trips there are for the route and cancellation statistics grouped
+by patterns.
+"""
+type CanceledTripsSummaryRoute {
+  "How many canceled trips there are for the route."
+  cancellationCount: Int!
+  "How many canceled trips there are for the patterns which have any cancellations."
+  patterns: [CanceledTripsSummaryPattern!]!
+  "The route for which the cancellation statistics are provided for."
+  route: Route!
+}
+
 "Car park represents a location where cars can be parked."
 type CarPark implements Node & PlaceInterface {
   "ID of the car park"
@@ -1071,7 +1098,24 @@ type Pattern implements Node {
     """
     types: [PatternAlertType]
   ): [Alert]
-  "ID of the pattern"
+  """
+  Get canceled trips for this pattern. Planned cancellations are not currently supported, so
+  only real-time canceled trips are returned.
+    
+  Avoid using this when fetching all patterns at once.
+  """
+  canceledTrips(
+    """
+    Only return canceled trips whose service date falls within one of these ranges.
+    An empty list or a list containing `null` is forbidden.  If this argument is not provided or its
+    value is `null`, no filtering is applied.
+    """
+    serviceDateRanges: [LocalDateRangeInput!]
+  ): [TripOnServiceDate!]!
+  """
+  ID of the pattern. This is not always a stable ID that originates from the transit data. This can
+  be generated by the system and it's not guaranteed to stay stable over time.
+  """
   code: String!
   """
   Direction of the pattern. Possible values: 0, 1 or -1.
@@ -1100,7 +1144,11 @@ type Pattern implements Node {
   same, even if their ids have changed.
   """
   semanticHash: String
-  "List of stops served by this pattern"
+  """
+  List of stops in order in which they are visited by this pattern.
+    
+  If a stop is visited more than once, it will appear several times.
+  """
   stops: [Stop!]
   "Trips which run on this pattern"
   trips: [Trip!]
@@ -1346,8 +1394,14 @@ type QueryType {
     """
     Can be used to filter the results. When paging, the filter should not be changed between pages.
         
-    An empty list of filters or no value means that all trips should be included. Only one filter
-    is allowed for now. Once new filtering criteria is introduced, this limitation will be removed.
+    An empty list of filters or no value means that all trips should be included. Multiple filters
+    are allowed.
+        
+    Filter order does not matter. Each filter entry is evaluated independently and the final result
+    is the union (OR) of all matching filter entries.
+        
+    Inside one filter entry, selectors in `include` are combined with OR, selectors in `exclude`
+    are combined with OR, and the final match is `include AND NOT(exclude)`.
     """
     filters: [CanceledTripsFilterInput!],
     """
@@ -1362,6 +1416,18 @@ type QueryType {
     """
     last: Int
   ): TripOnServiceDateConnection @timingData
+  """
+  Summary of canceled trips. Can be used as a preliminary query before using other
+  queries to fetch the details of the canceled trips.
+  """
+  canceledTripsSummary(
+    """
+    Can be used to filter the results.
+        
+    An empty list of filters or no value means that all cancellations should be included.
+    """
+    filters: [CanceledTripsSummaryFilterInput!]
+  ): CanceledTripsSummary @timingData
   "Get canceled TripTimes."
   cancelledTripTimes(
     "Feed feedIds (e.g. [\"HSL\"])."
@@ -1489,6 +1555,16 @@ type QueryType {
   pattern(id: String!): Pattern @timingData
   "Get all patterns"
   patterns: [Pattern] @timingData
+  """
+  Get the patterns for the given pattern codes (the value of a pattern's `code` field).
+    
+  **Note**: Pattern codes can change quite often, for example whenever the underlying transit
+  data is updated. Therefore they should not be persisted for a long time.
+  """
+  patternsByIds(
+    "Return the patterns with these codes, i.e. values of the field `code`."
+    ids: [String!]!
+  ): [Pattern] @timingData
   "Plans an itinerary from point A to point B based on the given arguments"
   plan(
     "Invariant: `boardSlack + alightSlack <= transferSlack`. Default value: 0"
@@ -2303,6 +2379,22 @@ type Stop implements Node & PlaceInterface {
     """
     types: [StopAlertType]
   ): [Alert]
+  """
+  Canceled stop calls (arrivals/departures) at this stop. A call is included if either the trip it
+  belongs to has been canceled, or the visit at this stop has been canceled (skipped).
+    
+  **Note**: A service date is a technical term useful for transit planning purposes and might not
+  correspond to how a passenger thinks of a calendar date. For example, a night bus running on
+  Sunday morning at 1am to 3am, might have the previous Saturday's service date.
+  """
+  canceledCalls(
+    """
+    Only include canceled calls whose trip's service date is within any of these date ranges.
+    If omitted (or `null`), no service date filter is applied and canceled calls across the entire
+    transit service period are returned. Defining a range is recommended.
+    """
+    serviceDateRanges: [LocalDateRangeInput!]
+  ): [StopCallOnTripOnServiceDate!]!
   "The cluster which this stop is part of"
   cluster: Cluster @deprecated(reason : "Not implemented")
   "Stop code which is visible at the stop"
@@ -2468,6 +2560,14 @@ type StopCall {
   stopLocation: CallStopLocation!
 }
 
+"A stop call together with the trip on service date it belongs to."
+type StopCallOnTripOnServiceDate {
+  "A stop call which belongs to the trip on a service date."
+  stopCall: StopCall!
+  "The trip on service date that the stop call belongs to."
+  tripOnServiceDate: TripOnServiceDate!
+}
+
 type StopGeometries {
   "Representation of the stop geometries as GeoJSON (https://geojson.org/)"
   geoJson: GeoJson
@@ -3285,13 +3385,7 @@ one can use the triangle factors.
 enum CyclingOptimizationType {
   "Emphasize flatness over safety or duration of the route. This option was previously called `FLAT`."
   FLAT_STREETS
-  """
-  Completely ignore the elevation differences and prefer the streets, that are evaluated
-  to be the safest, even more than with the `SAFE_STREETS` option.
-  Safety can also include other concerns such as convenience and general cyclist preferences
-  by taking into account road surface etc. This option was previously called `GREENWAYS`.
-  """
-  SAFEST_STREETS
+  SAFEST_STREETS @deprecated(reason : "Use SAFE_STREETS instead")
   """
   Emphasize cycling safety over flatness or duration of the route. Safety can also include other
   concerns such as convenience and general cyclist preferences by taking into account
@@ -3959,15 +4053,7 @@ one can use the triangle factors.
 enum ScooterOptimizationType {
   "Emphasize flatness over safety or duration of the route. This option was previously called `FLAT`."
   FLAT_STREETS
-  """
-  Completely ignore the elevation differences and prefer the streets, that are evaluated
-  to be safest for scooters, even more than with the `SAFE_STREETS` option.
-  Safety can also include other concerns such as convenience and general preferences by taking
-  into account road surface etc.  Note, currently the same criteria is used both for cycling and
-  scooter travel to determine how safe streets are for cycling or scooter.
-  This option was previously called `GREENWAYS`.
-  """
-  SAFEST_STREETS
+  SAFEST_STREETS @deprecated(reason : "Use SAFE_STREETS instead")
   """
   Emphasize scooter safety over flatness or duration of the route. Safety can also include other
   concerns such as convenience and general preferences by taking into account road surface etc.
@@ -4303,10 +4389,10 @@ input BoardPreferencesInput {
 }
 
 """
-A collection of selectors for including or excluding trips from canceled trips search. Currently,
-you can only use either include or exclude filter (as filtering is only supported with transit modes).
+A collection of selectors for including or excluding trips from canceled trips search. Excludes
+override includes.
 """
-input CanceledTripsFilterInput @oneOf {
+input CanceledTripsFilterInput {
   """
   A list of selectors for excluding canceled trips.
     
@@ -4328,6 +4414,38 @@ means everything is allowed to be returned and empty lists are not allowed.
 input CanceledTripsFilterSelectInput {
   "Canceled trips from these transit modes should be included/excluded."
   modes: [TransitMode!]
+  """
+  Canceled trips are included/excluded based on if their service date (but not necessarily their running date)  is within any of these time
+  ranges.
+  """
+  serviceDateRanges: [LocalDateRangeInput!]
+}
+
+"Used to limit which canceled trips are included for the summary."
+input CanceledTripsSummaryFilterInput {
+  """
+  A list of selectors for excluding canceled trips.
+    
+  An empty list or a list containing `null` is forbidden.
+  """
+  exclude: [CanceledTripsSummaryFilterSelectInput!]
+  """
+  A list of selectors for including canceled trips.
+    
+  An empty list or a list containing `null` is forbidden.
+  """
+  include: [CanceledTripsSummaryFilterSelectInput!]
+}
+
+"Filter options for including or excluding canceled trips from the canceled trips summary."
+input CanceledTripsSummaryFilterSelectInput {
+  "Canceled trips from these transit modes should be included/excluded."
+  modes: [TransitMode!]
+  """
+  Canceled trips are included/excluded based on if their service date is within any of these time
+  ranges.
+  """
+  serviceDateRanges: [LocalDateRangeInput!]
 }
 
 "Preferences for car parking facilities used during the routing."
diff --git a/digitransit-search-util/packages/digitransit-search-util-query-utils/package.json b/digitransit-search-util/packages/digitransit-search-util-query-utils/package.json
index e7f43b75f2..fe01d12361 100644
--- a/digitransit-search-util/packages/digitransit-search-util-query-utils/package.json
+++ b/digitransit-search-util/packages/digitransit-search-util-query-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-search-util/digitransit-search-util-query-utils",
-  "version": "4.5.10",
+  "version": "4.5.11",
   "description": "digitransit-search-util query-utils module",
   "main": "lib/index.js",
   "publishConfig": {
diff --git a/digitransit-search-util/packages/digitransit-search-util-query-utils/schema/schema.graphql b/digitransit-search-util/packages/digitransit-search-util-query-utils/schema/schema.graphql
index 88e306cf56..5ddb72b236 100644
--- a/digitransit-search-util/packages/digitransit-search-util-query-utils/schema/schema.graphql
+++ b/digitransit-search-util/packages/digitransit-search-util-query-utils/schema/schema.graphql
@@ -346,6 +346,33 @@ type CallSchedule {
   time: CallScheduledTime
 }
 
+"Cancellation statistics grouped by entities."
+type CanceledTripsSummary {
+  "How many canceled trips there are for the routes which have any cancellations."
+  routes: [CanceledTripsSummaryRoute!]!
+}
+
+"Contains pattern and the information for how many canceled trips there are for the pattern."
+type CanceledTripsSummaryPattern {
+  "How many canceled trips there are for the pattern."
+  cancellationCount: Int!
+  "The pattern for which the cancellation statistics are provided for."
+  pattern: Pattern!
+}
+
+"""
+Contains route, how many canceled trips there are for the route and cancellation statistics grouped
+by patterns.
+"""
+type CanceledTripsSummaryRoute {
+  "How many canceled trips there are for the route."
+  cancellationCount: Int!
+  "How many canceled trips there are for the patterns which have any cancellations."
+  patterns: [CanceledTripsSummaryPattern!]!
+  "The route for which the cancellation statistics are provided for."
+  route: Route!
+}
+
 "Car park represents a location where cars can be parked."
 type CarPark implements Node & PlaceInterface {
   "ID of the car park"
@@ -1071,7 +1098,24 @@ type Pattern implements Node {
     """
     types: [PatternAlertType]
   ): [Alert]
-  "ID of the pattern"
+  """
+  Get canceled trips for this pattern. Planned cancellations are not currently supported, so
+  only real-time canceled trips are returned.
+    
+  Avoid using this when fetching all patterns at once.
+  """
+  canceledTrips(
+    """
+    Only return canceled trips whose service date falls within one of these ranges.
+    An empty list or a list containing `null` is forbidden.  If this argument is not provided or its
+    value is `null`, no filtering is applied.
+    """
+    serviceDateRanges: [LocalDateRangeInput!]
+  ): [TripOnServiceDate!]!
+  """
+  ID of the pattern. This is not always a stable ID that originates from the transit data. This can
+  be generated by the system and it's not guaranteed to stay stable over time.
+  """
   code: String!
   """
   Direction of the pattern. Possible values: 0, 1 or -1.
@@ -1100,7 +1144,11 @@ type Pattern implements Node {
   same, even if their ids have changed.
   """
   semanticHash: String
-  "List of stops served by this pattern"
+  """
+  List of stops in order in which they are visited by this pattern.
+    
+  If a stop is visited more than once, it will appear several times.
+  """
   stops: [Stop!]
   "Trips which run on this pattern"
   trips: [Trip!]
@@ -1346,8 +1394,14 @@ type QueryType {
     """
     Can be used to filter the results. When paging, the filter should not be changed between pages.
         
-    An empty list of filters or no value means that all trips should be included. Only one filter
-    is allowed for now. Once new filtering criteria is introduced, this limitation will be removed.
+    An empty list of filters or no value means that all trips should be included. Multiple filters
+    are allowed.
+        
+    Filter order does not matter. Each filter entry is evaluated independently and the final result
+    is the union (OR) of all matching filter entries.
+        
+    Inside one filter entry, selectors in `include` are combined with OR, selectors in `exclude`
+    are combined with OR, and the final match is `include AND NOT(exclude)`.
     """
     filters: [CanceledTripsFilterInput!],
     """
@@ -1362,6 +1416,18 @@ type QueryType {
     """
     last: Int
   ): TripOnServiceDateConnection @timingData
+  """
+  Summary of canceled trips. Can be used as a preliminary query before using other
+  queries to fetch the details of the canceled trips.
+  """
+  canceledTripsSummary(
+    """
+    Can be used to filter the results.
+        
+    An empty list of filters or no value means that all cancellations should be included.
+    """
+    filters: [CanceledTripsSummaryFilterInput!]
+  ): CanceledTripsSummary @timingData
   "Get canceled TripTimes."
   cancelledTripTimes(
     "Feed feedIds (e.g. [\"HSL\"])."
@@ -1489,6 +1555,16 @@ type QueryType {
   pattern(id: String!): Pattern @timingData
   "Get all patterns"
   patterns: [Pattern] @timingData
+  """
+  Get the patterns for the given pattern codes (the value of a pattern's `code` field).
+    
+  **Note**: Pattern codes can change quite often, for example whenever the underlying transit
+  data is updated. Therefore they should not be persisted for a long time.
+  """
+  patternsByIds(
+    "Return the patterns with these codes, i.e. values of the field `code`."
+    ids: [String!]!
+  ): [Pattern] @timingData
   "Plans an itinerary from point A to point B based on the given arguments"
   plan(
     "Invariant: `boardSlack + alightSlack <= transferSlack`. Default value: 0"
@@ -2303,6 +2379,22 @@ type Stop implements Node & PlaceInterface {
     """
     types: [StopAlertType]
   ): [Alert]
+  """
+  Canceled stop calls (arrivals/departures) at this stop. A call is included if either the trip it
+  belongs to has been canceled, or the visit at this stop has been canceled (skipped).
+    
+  **Note**: A service date is a technical term useful for transit planning purposes and might not
+  correspond to how a passenger thinks of a calendar date. For example, a night bus running on
+  Sunday morning at 1am to 3am, might have the previous Saturday's service date.
+  """
+  canceledCalls(
+    """
+    Only include canceled calls whose trip's service date is within any of these date ranges.
+    If omitted (or `null`), no service date filter is applied and canceled calls across the entire
+    transit service period are returned. Defining a range is recommended.
+    """
+    serviceDateRanges: [LocalDateRangeInput!]
+  ): [StopCallOnTripOnServiceDate!]!
   "The cluster which this stop is part of"
   cluster: Cluster @deprecated(reason : "Not implemented")
   "Stop code which is visible at the stop"
@@ -2468,6 +2560,14 @@ type StopCall {
   stopLocation: CallStopLocation!
 }
 
+"A stop call together with the trip on service date it belongs to."
+type StopCallOnTripOnServiceDate {
+  "A stop call which belongs to the trip on a service date."
+  stopCall: StopCall!
+  "The trip on service date that the stop call belongs to."
+  tripOnServiceDate: TripOnServiceDate!
+}
+
 type StopGeometries {
   "Representation of the stop geometries as GeoJSON (https://geojson.org/)"
   geoJson: GeoJson
@@ -3285,13 +3385,7 @@ one can use the triangle factors.
 enum CyclingOptimizationType {
   "Emphasize flatness over safety or duration of the route. This option was previously called `FLAT`."
   FLAT_STREETS
-  """
-  Completely ignore the elevation differences and prefer the streets, that are evaluated
-  to be the safest, even more than with the `SAFE_STREETS` option.
-  Safety can also include other concerns such as convenience and general cyclist preferences
-  by taking into account road surface etc. This option was previously called `GREENWAYS`.
-  """
-  SAFEST_STREETS
+  SAFEST_STREETS @deprecated(reason : "Use SAFE_STREETS instead")
   """
   Emphasize cycling safety over flatness or duration of the route. Safety can also include other
   concerns such as convenience and general cyclist preferences by taking into account
@@ -3959,15 +4053,7 @@ one can use the triangle factors.
 enum ScooterOptimizationType {
   "Emphasize flatness over safety or duration of the route. This option was previously called `FLAT`."
   FLAT_STREETS
-  """
-  Completely ignore the elevation differences and prefer the streets, that are evaluated
-  to be safest for scooters, even more than with the `SAFE_STREETS` option.
-  Safety can also include other concerns such as convenience and general preferences by taking
-  into account road surface etc.  Note, currently the same criteria is used both for cycling and
-  scooter travel to determine how safe streets are for cycling or scooter.
-  This option was previously called `GREENWAYS`.
-  """
-  SAFEST_STREETS
+  SAFEST_STREETS @deprecated(reason : "Use SAFE_STREETS instead")
   """
   Emphasize scooter safety over flatness or duration of the route. Safety can also include other
   concerns such as convenience and general preferences by taking into account road surface etc.
@@ -4303,10 +4389,10 @@ input BoardPreferencesInput {
 }
 
 """
-A collection of selectors for including or excluding trips from canceled trips search. Currently,
-you can only use either include or exclude filter (as filtering is only supported with transit modes).
+A collection of selectors for including or excluding trips from canceled trips search. Excludes
+override includes.
 """
-input CanceledTripsFilterInput @oneOf {
+input CanceledTripsFilterInput {
   """
   A list of selectors for excluding canceled trips.
     
@@ -4328,6 +4414,38 @@ means everything is allowed to be returned and empty lists are not allowed.
 input CanceledTripsFilterSelectInput {
   "Canceled trips from these transit modes should be included/excluded."
   modes: [TransitMode!]
+  """
+  Canceled trips are included/excluded based on if their service date (but not necessarily their running date)  is within any of these time
+  ranges.
+  """
+  serviceDateRanges: [LocalDateRangeInput!]
+}
+
+"Used to limit which canceled trips are included for the summary."
+input CanceledTripsSummaryFilterInput {
+  """
+  A list of selectors for excluding canceled trips.
+    
+  An empty list or a list containing `null` is forbidden.
+  """
+  exclude: [CanceledTripsSummaryFilterSelectInput!]
+  """
+  A list of selectors for including canceled trips.
+    
+  An empty list or a list containing `null` is forbidden.
+  """
+  include: [CanceledTripsSummaryFilterSelectInput!]
+}
+
+"Filter options for including or excluding canceled trips from the canceled trips summary."
+input CanceledTripsSummaryFilterSelectInput {
+  "Canceled trips from these transit modes should be included/excluded."
+  modes: [TransitMode!]
+  """
+  Canceled trips are included/excluded based on if their service date is within any of these time
+  ranges.
+  """
+  serviceDateRanges: [LocalDateRangeInput!]
 }
 
 "Preferences for car parking facilities used during the routing."
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
index 2528d25bca..694362c0a3 100644
--- a/sass/base/_typography.scss
+++ b/sass/base/_typography.scss
@@ -565,7 +565,7 @@
     color: #333;
     font-family: var(--font-family-narrow);
     font-weight: var(--font-weight-medium);
-    font-size: rem(14);
+    font-size: rem(15);
     line-height: 1.28;
     letter-spacing: 0;
 
diff --git a/static/assets/svg-sprite.default.svg b/static/assets/svg-sprite.default.svg
index f4b2faa804..4a036c6ff6 100644
--- a/static/assets/svg-sprite.default.svg
+++ b/static/assets/svg-sprite.default.svg
@@ -1363,6 +1363,16 @@
     </circle>
   </symbol>
 
+  <symbol id="icon_my-place" viewBox="0 0 16 16" fill="none">
+    <g clip-path="url(#clip0_2510_164333)">
+      <path d="M0 8C0 3.58172 3.58172 0 8 0V0C12.4183 0 16 3.58172 16 8V8C16 12.4183 12.4183 16 8 16V16C3.58172 16 0 12.4183 0 8V8Z" fill="white"/>
+      <path d="M10.7468 11.1824C10.8908 11.0864 10.9548 10.9104 10.9388 10.7344L10.6348 8.54241L12.1708 6.94241C12.2988 6.81441 12.3308 6.63841 12.2828 6.47841C12.2188 6.30241 12.0908 6.19041 11.9148 6.15841L9.73879 5.75841L8.68279 3.80641C8.60279 3.64641 8.44279 3.56641 8.26679 3.56641C8.10679 3.56641 7.94679 3.64641 7.86679 3.80641L6.81079 5.75841L4.63479 6.15841C4.45879 6.19041 4.31479 6.30241 4.26679 6.47841C4.21879 6.63841 4.25079 6.81441 4.37879 6.94241L5.89879 8.54241L5.61079 10.7344C5.57879 10.9104 5.65879 11.0864 5.80279 11.1824C5.88279 11.2464 5.97879 11.2624 6.07479 11.2624C6.13879 11.2624 6.20279 11.2624 6.26679 11.2304L8.26679 10.2544L10.2668 11.2304C10.4268 11.2944 10.6028 11.2784 10.7468 11.1824Z" fill="#C53291"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_2510_164333">
+        <path d="M0 8C0 3.58172 3.58172 0 8 0V0C12.4183 0 16 3.58172 16 8V8C16 12.4183 12.4183 16 8 16V16C3.58172 16 0 12.4183 0 8V8Z" fill="white"/>
+      </clipPath>
+    </defs>
   <symbol id="icon_checkbox" viewBox="0 0 24 24" fill="none" >
     <path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="currentcolor"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M16.0307 7.55772L10.3661 13.0814L7.91499 10.6913C7.37031 10.1602 6.55329 10.1602 6.00861 10.6913C5.46393 11.2225 5.46393 12.0191 6.00861 12.5503L10.3661 16.7992L17.9916 9.41665C18.5363 8.88553 18.5363 8.08885 17.9916 7.55772C17.3924 7.07972 16.5754 7.07972 16.0307 7.55772Z" fill="white"/>
diff --git a/static/assets/svg-sprite.hsl.svg b/static/assets/svg-sprite.hsl.svg
index bc07840196..71ea387bf0 100644
--- a/static/assets/svg-sprite.hsl.svg
+++ b/static/assets/svg-sprite.hsl.svg
@@ -1526,5 +1526,17 @@
     <path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z" fill="currentcolor"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M16.0307 7.55772L10.3661 13.0814L7.91499 10.6913C7.37031 10.1602 6.55329 10.1602 6.00861 10.6913C5.46393 11.2225 5.46393 12.0191 6.00861 12.5503L10.3661 16.7992L17.9916 9.41665C18.5363 8.88553 18.5363 8.08885 17.9916 7.55772C17.3924 7.07972 16.5754 7.07972 16.0307 7.55772Z" fill="white"/>
   </symbol>
+
+  <symbol id="icon_my-place" viewBox="0 0 16 16" fill="none">
+    <g clip-path="url(#clip0_2510_164333)">
+      <path d="M0 8C0 3.58172 3.58172 0 8 0V0C12.4183 0 16 3.58172 16 8V8C16 12.4183 12.4183 16 8 16V16C3.58172 16 0 12.4183 0 8V8Z" fill="white"/>
+      <path d="M10.7468 11.1824C10.8908 11.0864 10.9548 10.9104 10.9388 10.7344L10.6348 8.54241L12.1708 6.94241C12.2988 6.81441 12.3308 6.63841 12.2828 6.47841C12.2188 6.30241 12.0908 6.19041 11.9148 6.15841L9.73879 5.75841L8.68279 3.80641C8.60279 3.64641 8.44279 3.56641 8.26679 3.56641C8.10679 3.56641 7.94679 3.64641 7.86679 3.80641L6.81079 5.75841L4.63479 6.15841C4.45879 6.19041 4.31479 6.30241 4.26679 6.47841C4.21879 6.63841 4.25079 6.81441 4.37879 6.94241L5.89879 8.54241L5.61079 10.7344C5.57879 10.9104 5.65879 11.0864 5.80279 11.1824C5.88279 11.2464 5.97879 11.2624 6.07479 11.2624C6.13879 11.2624 6.20279 11.2624 6.26679 11.2304L8.26679 10.2544L10.2668 11.2304C10.4268 11.2944 10.6028 11.2784 10.7468 11.1824Z" fill="#C53291"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_2510_164333">
+        <path d="M0 8C0 3.58172 3.58172 0 8 0V0C12.4183 0 16 3.58172 16 8V8C16 12.4183 12.4183 16 8 16V16C3.58172 16 0 12.4183 0 8V8Z" fill="white"/>
+      </clipPath>
+    </defs>
+  </symbol>
  </defs>
 </svg>
diff --git a/test/unit/component/trafficnow/CanceledDepartures.test.js b/test/unit/component/trafficnow/CanceledDepartures.test.js
new file mode 100644
index 0000000000..dacf930374
--- /dev/null
+++ b/test/unit/component/trafficnow/CanceledDepartures.test.js
@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import React from 'react';
+import { shallowWithIntl } from '../../helpers/mock-intl-enzyme';
+import CanceledDepartures from '../../../../app/component/trafficnow/components/CanceledDepartures';
+
+const makeCanceledTrip = (serviceDate, scheduledDeparture, gtfsId) => ({
+  serviceDate,
+  trip: {
+    gtfsId,
+    stoptimes: [{ scheduledDeparture }],
+  },
+});
+
+const makePattern = canceledTrips => ({
+  code: 'pattern-1',
+  stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+  headsign: 'Kamppi',
+  canceledTrips,
+});
+
+describe('<CanceledDepartures />', () => {
+  const departureTimes = wrapper =>
+    wrapper.find('.routes-m-narrow').map(node => node.text().trim());
+
+  const renderCanceledDepartures = props =>
+    shallowWithIntl(
+      <CanceledDepartures
+        departureLimit={1}
+        patterns={[
+          makePattern([
+            makeCanceledTrip('2026-01-01', 28800, 'trip-1'),
+            makeCanceledTrip('2026-01-01', 29100, 'trip-2'),
+            makeCanceledTrip('2026-01-02', 32400, 'trip-3'),
+          ]),
+        ]}
+        {...props}
+      />,
+    );
+
+  it('splits departures per date and applies the limit per date', () => {
+    const wrapper = renderCanceledDepartures();
+
+    expect(
+      wrapper.find('.badges__departure-group__date-group'),
+    ).to.have.lengthOf(2);
+    expect(departureTimes(wrapper)).to.deep.equal(['08:00', '09:00']);
+  });
+
+  it('shows a button when a date has more departures than the limit', () => {
+    const wrapper = renderCanceledDepartures();
+    const showAllButton = wrapper.find('.show-departures-button');
+
+    expect(showAllButton).to.have.lengthOf(1);
+  });
+
+  it('shows all departures for the date when the button is clicked', () => {
+    const wrapper = renderCanceledDepartures();
+
+    wrapper.find('.show-departures-button').simulate('click');
+    expect(departureTimes(wrapper)).to.deep.equal(['08:00', '08:05', '09:00']);
+  });
+});
diff --git a/test/unit/component/trafficnow/CanceledTripCard.test.js b/test/unit/component/trafficnow/CanceledTripCard.test.js
index 633ae44002..b2032b06f6 100644
--- a/test/unit/component/trafficnow/CanceledTripCard.test.js
+++ b/test/unit/component/trafficnow/CanceledTripCard.test.js
@@ -2,149 +2,339 @@ import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import React from 'react';
 import { shallow } from 'enzyme';
-import { shallowWithIntl } from '../../helpers/mock-intl-enzyme';
-import CanceledTripCard from '../../../../app/component/trafficnow/CanceledTripCard';
-import CanceledDepartures from '../../../../app/component/trafficnow/components/CanceledDepartures';
+import sinon from 'sinon';
+import {
+  shallowWithIntl,
+  createShallowHookSandbox,
+} from '../../helpers/mock-intl-enzyme';
+import { Component as CanceledTripCard } from '../../../../app/component/trafficnow/CanceledTripCard';
+import Card from '../../../../app/component/Card';
 import DisruptionStatus from '../../../../app/component/trafficnow/components/DisruptionStatus';
 import RouteBadgeGroup from '../../../../app/component/trafficnow/components/RouteBadgeGroup';
-import Icon from '../../../../app/component/Icon';
+import CanceledDepartures from '../../../../app/component/trafficnow/components/CanceledDepartures';
+import * as FiltersContext from '../../../../app/component/trafficnow/filters/FiltersContext';
+import EntityBadge from '../../../../app/component/trafficnow/components/EntityBadge';
 
-const makeTrip = ({
+const makeRouteSummary = ({
   shortName = '21B',
   gtfsId = 'HSL:21B',
-  tripId = 'trip-1',
-  departure = '2024-02-24T10:30:00',
-  ...rest
+  id = 'route-21B',
+  cancellationCount = 2,
+  patterns = [
+    {
+      cancellationCount: 2,
+      pattern: {
+        code: 'pattern-21B',
+        headsign: 'Kamppi',
+        stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+        canceledTrips: [
+          {
+            serviceDate: '2026-01-01',
+            trip: {
+              gtfsId: 'trip-21B-1',
+              stoptimes: [{ scheduledDeparture: 28800 }],
+            },
+          },
+        ],
+      },
+    },
+  ],
 } = {}) => ({
-  start: { schedule: { time: { departure } } },
-  trip: {
-    tripId,
-    route: { gtfsId, shortName },
-    ...rest,
+  cancellationCount,
+  route: {
+    shortName,
+    gtfsId,
+    id,
+    mode: 'BUS',
   },
+  patterns,
 });
 
+const makeRoutes = amount =>
+  new Array(amount).fill(null).map((_, i) =>
+    makeRouteSummary({
+      shortName: `${20 + i}`,
+      gtfsId: `HSL:${20 + i}`,
+      id: `route-${20 + i}`,
+    }),
+  );
+
+const makeCanceledTrips = ({
+  amount,
+  serviceDate = '2026-01-01',
+  startTime = 8 * 60 * 60,
+  gtfsIdPrefix = 'trip-21B',
+}) =>
+  new Array(amount).fill(null).map((_, i) => ({
+    serviceDate,
+    trip: {
+      gtfsId: `${gtfsIdPrefix}-${i}`,
+      stoptimes: [{ scheduledDeparture: startTime + i * 60 }],
+    },
+  }));
+
 const baseProps = {
   mode: 'bus',
-  totalCount: 1,
-  trips: [makeTrip()],
+  routes: [makeRouteSummary()],
+};
+
+const baseConfig = {
+  CONFIG: 'default',
+  colors: { primary: '#007ac9' },
+  trafficNowMaxRoutesPerCard: 5,
 };
 
 describe('<CanceledTripCard />', () => {
-  describe('Grouping logic', () => {
-    it('groups trips by route shortName', () => {
-      const props = {
-        ...baseProps,
-        totalCount: 2,
-        trips: [
-          makeTrip({
-            shortName: '21B',
-            tripId: 'trip-1',
-            departure: '2024-02-24T10:30:00',
-          }),
-          makeTrip({
-            shortName: '21B',
-            tripId: 'trip-2',
-            departure: '2024-02-24T11:00:00',
-          }),
-        ],
-      };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
+  let stubs;
+  let sandbox;
+  let filterContextStub;
+
+  beforeEach(() => {
+    ({ sandbox, stubs } = createShallowHookSandbox({ config: baseConfig }));
+    filterContextStub = sandbox.stub(FiltersContext, 'useFilterContext');
+    filterContextStub.returns({
+      selectedFilters: {},
+    });
+  });
+  afterEach(() => sandbox.restore());
+
+  describe('RouteBadgeGroup props', () => {
+    it('maps canceled route summaries to route badges', () => {
+      const wrapper = shallowWithIntl(<CanceledTripCard {...baseProps} />);
       const badgeGroup = wrapper.find(RouteBadgeGroup);
-      expect(badgeGroup).to.have.length(1);
-      const routes = badgeGroup.prop('routes');
-      expect(routes).to.have.length(1);
-      expect(routes[0].id).to.equal('21B');
-      expect(routes[0].trips).to.have.length(2);
+
+      expect(badgeGroup).to.have.lengthOf(1);
+      expect(badgeGroup.prop('mode')).to.equal('bus');
+      expect(badgeGroup.prop('stopPropagation')).to.equal(true);
+      expect(badgeGroup.prop('routes')).to.deep.equal([
+        {
+          name: '21B',
+          gtfsId: 'HSL:21B',
+          id: 'route-21B',
+          url: '/linjat/HSL%3A21B',
+        },
+      ]);
     });
 
-    it('groups trips from different routes into separate groups', () => {
-      const props = {
-        ...baseProps,
-        totalCount: 2,
-        trips: [
-          makeTrip({ shortName: '21B', gtfsId: 'HSL:21B', tripId: 'trip-1' }),
-          makeTrip({ shortName: '55', gtfsId: 'HSL:55', tripId: 'trip-2' }),
-        ],
-      };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
+    it('limits the amount of route badges', () => {
+      stubs.useConfigContext.returns({
+        ...baseConfig,
+        trafficNowMaxRoutesPerCard: 3,
+      });
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard {...baseProps} routes={makeRoutes(6)} />,
+      );
       const routes = wrapper.find(RouteBadgeGroup).prop('routes');
-      expect(routes).to.have.length(2);
+
+      expect(routes).to.have.lengthOf(3);
+      expect(routes.map(route => route.name)).to.deep.equal(['20', '21', '22']);
     });
 
-    it('uses "unknown" as shortName when route.shortName is missing', () => {
-      const trip = {
-        start: { schedule: { time: { departure: '2024-02-24T09:00:00' } } },
-        trip: { tripId: 'x', route: { gtfsId: 'HSL:99' } },
-      };
-      const props = { ...baseProps, trips: [trip] };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const routes = wrapper.find(RouteBadgeGroup).prop('routes');
-      expect(routes[0].id).to.equal('unknown');
+    it('renders the count of hidden routes when there are more than allowed', () => {
+      stubs.useConfigContext.returns({
+        ...baseConfig,
+        trafficNowMaxRoutesPerCard: 3,
+      });
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard {...baseProps} routes={makeRoutes(6)} />,
+      );
+      const renderSuffix = wrapper.find(RouteBadgeGroup).prop('renderSuffix');
+      const rendered = shallow(<div>{renderSuffix}</div>);
+      const moreRoutes = rendered.find(EntityBadge);
+
+      expect(moreRoutes).to.have.lengthOf(1);
+      expect(moreRoutes.prop('className')).to.equal('more-routes');
+      expect(moreRoutes.prop('entity').name).to.equal('+3');
     });
 
-    it('skips trips missing trip.route.gtfsId', () => {
-      const invalidTrip = {
-        start: { schedule: { time: { departure: '2024-02-24T10:00:00' } } },
-        trip: { tripId: 'bad', route: {} },
-      };
-      const props = { ...baseProps, trips: [invalidTrip] };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const routes = wrapper.find(RouteBadgeGroup).prop('routes');
-      expect(routes).to.have.length(0);
+    it('does not render the three-dots icon when all routes are visible', () => {
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard {...baseProps} routes={makeRoutes(5)} />,
+      );
+
+      expect(wrapper.find(RouteBadgeGroup).prop('renderSuffix')).to.equal(null);
     });
 
-    it('skips trips missing start.schedule.time.departure', () => {
-      const invalidTrip = {
-        start: { schedule: { time: {} } },
-        trip: { tripId: 'bad2', route: { gtfsId: 'HSL:1', shortName: '1' } },
-      };
-      const props = { ...baseProps, trips: [invalidTrip] };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const routes = wrapper.find(RouteBadgeGroup).prop('routes');
-      expect(routes).to.have.length(0);
+    it('renders the departure time when there is only a single route', () => {
+      const wrapper = shallowWithIntl(<CanceledTripCard {...baseProps} />);
+      const badgeGroup = wrapper.find(RouteBadgeGroup);
+      const [route] = badgeGroup.prop('routes');
+      const renderedSuffix = shallow(
+        <div>{badgeGroup.prop('renderRouteSuffix')(route)}</div>,
+      );
+
+      expect(
+        renderedSuffix
+          .find(CanceledDepartures)
+          .dive()
+          .find('.routes-m-narrow')
+          .text(),
+      ).to.equal(' 08:00 ');
     });
 
-    it('formats departure time as HH:mm from ISO string', () => {
-      const props = {
-        ...baseProps,
-        trips: [makeTrip({ departure: '2024-02-24T10:30:00' })],
-      };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const routes = wrapper.find(RouteBadgeGroup).prop('routes');
-      expect(routes[0].trips[0].departureTime).to.equal('10:30');
+    it('renders cancellations from all patterns when there is only a single route', () => {
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard
+          {...baseProps}
+          routes={[
+            makeRouteSummary({
+              patterns: [
+                {
+                  cancellationCount: 1,
+                  pattern: {
+                    code: 'pattern-21B-1',
+                    headsign: 'Kamppi',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: [
+                      {
+                        serviceDate: '2026-01-01',
+                        trip: {
+                          gtfsId: 'trip-21B-1',
+                          stoptimes: [{ scheduledDeparture: 28800 }],
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  cancellationCount: 1,
+                  pattern: {
+                    code: 'pattern-21B-2',
+                    headsign: 'Rautatientori',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: [
+                      {
+                        serviceDate: '2026-01-01',
+                        trip: {
+                          gtfsId: 'trip-21B-2',
+                          stoptimes: [{ scheduledDeparture: 29100 }],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            }),
+          ]}
+        />,
+      );
+      const badgeGroup = wrapper.find(RouteBadgeGroup);
+      const [route] = badgeGroup.prop('routes');
+      const renderedSuffix = shallow(
+        <div>{badgeGroup.prop('renderRouteSuffix')(route)}</div>,
+      );
+
+      expect(
+        renderedSuffix
+          .find(CanceledDepartures)
+          .dive()
+          .find('.routes-m-narrow')
+          .map(node => node.text()),
+      ).to.deep.equal([' 08:00 ', ' 08:05 ']);
     });
-  });
 
-  describe('Single-route rendering', () => {
-    it('renders CanceledDepartures inline for a single route via renderRouteSuffix', () => {
-      const props = { ...baseProps };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
+    it('limits inline departures per pattern', () => {
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard
+          {...baseProps}
+          routes={[
+            makeRouteSummary({
+              patterns: [
+                {
+                  cancellationCount: 6,
+                  pattern: {
+                    code: 'pattern-21B-1',
+                    headsign: 'Kamppi',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: makeCanceledTrips({
+                      amount: 6,
+                      gtfsIdPrefix: 'trip-21B-1',
+                    }),
+                  },
+                },
+                {
+                  cancellationCount: 6,
+                  pattern: {
+                    code: 'pattern-21B-2',
+                    headsign: 'Rautatientori',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: makeCanceledTrips({
+                      amount: 6,
+                      startTime: 9 * 60 * 60,
+                      gtfsIdPrefix: 'trip-21B-2',
+                    }),
+                  },
+                },
+              ],
+            }),
+          ]}
+        />,
+      );
       const badgeGroup = wrapper.find(RouteBadgeGroup);
-      const renderRouteSuffix = badgeGroup.prop('renderRouteSuffix');
-      // renderRouteSuffix returns a JSX element — check its type directly without re-wrapping
-      const result = renderRouteSuffix({
-        trips: [{ tripId: 'trip-1', departureTime: '10:30' }],
-      });
-      expect(result).to.not.equal(null);
-      expect(result.type).to.equal(CanceledDepartures);
+      const [route] = badgeGroup.prop('routes');
+      const renderedSuffix = shallow(
+        <div>{badgeGroup.prop('renderRouteSuffix')(route)}</div>,
+      );
+
+      expect(
+        renderedSuffix
+          .find(CanceledDepartures)
+          .dive()
+          .find('.badges__departure-time')
+          .not('.badges__departure-time--show-more'),
+      ).to.have.lengthOf(10);
     });
 
-    it('returns null from renderRouteSuffix when there are multiple routes', () => {
-      const props = {
-        mode: 'bus',
-        totalCount: 2,
-        trips: [
-          makeTrip({ shortName: '21B', tripId: 'trip-1' }),
-          makeTrip({ shortName: '55', tripId: 'trip-2' }),
-        ],
-      };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const renderRouteSuffix = wrapper
-        .find(RouteBadgeGroup)
-        .prop('renderRouteSuffix');
-      const rendered = renderRouteSuffix({ trips: [] });
-      expect(rendered).to.equal(null);
+    it('renders inline hidden departure count per pattern', () => {
+      const wrapper = shallowWithIntl(
+        <CanceledTripCard
+          {...baseProps}
+          routes={[
+            makeRouteSummary({
+              patterns: [
+                {
+                  cancellationCount: 7,
+                  pattern: {
+                    code: 'pattern-21B-1',
+                    headsign: 'Kamppi',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: makeCanceledTrips({
+                      amount: 7,
+                      gtfsIdPrefix: 'trip-21B-1',
+                    }),
+                  },
+                },
+                {
+                  cancellationCount: 8,
+                  pattern: {
+                    code: 'pattern-21B-2',
+                    headsign: 'Rautatientori',
+                    stops: [{ name: 'Eira' }, { name: 'Kamppi' }],
+                    canceledTrips: makeCanceledTrips({
+                      amount: 8,
+                      startTime: 9 * 60 * 60,
+                      gtfsIdPrefix: 'trip-21B-2',
+                    }),
+                  },
+                },
+              ],
+            }),
+          ]}
+        />,
+      );
+      const badgeGroup = wrapper.find(RouteBadgeGroup);
+      const [route] = badgeGroup.prop('routes');
+      const renderedSuffix = shallow(
+        <div>{badgeGroup.prop('renderRouteSuffix')(route)}</div>,
+      );
+
+      expect(
+        renderedSuffix
+          .find(CanceledDepartures)
+          .dive()
+          .find('.badges__departure-time--show-more')
+          .map(node => node.text()),
+      ).to.deep.equal(['+2', '+3']);
     });
   });
 
@@ -153,6 +343,7 @@ describe('<CanceledTripCard />', () => {
       const wrapper = shallowWithIntl(
         <CanceledTripCard {...baseProps} isMobile={false} />,
       );
+
       expect(wrapper.find('.separator.vertical')).to.have.lengthOf(1);
       expect(wrapper.find('header').find(DisruptionStatus)).to.have.lengthOf(1);
     });
@@ -161,32 +352,29 @@ describe('<CanceledTripCard />', () => {
       const wrapper = shallowWithIntl(
         <CanceledTripCard {...baseProps} isMobile />,
       );
+
       expect(wrapper.find('.separator.vertical')).to.have.lengthOf(0);
       expect(wrapper.find('header').find(DisruptionStatus)).to.have.lengthOf(0);
       expect(wrapper.find(DisruptionStatus)).to.have.lengthOf(1);
     });
   });
 
-  describe('Ellipsis (three-dots icon)', () => {
-    it('renders the three-dots icon when totalCount > trips.length', () => {
-      const props = {
-        mode: 'bus',
-        totalCount: 5,
-        trips: [makeTrip()],
+  describe('Navigation', () => {
+    it('navigates to the canceled trips detail view for the mode when the card is clicked', () => {
+      const router = { push: sinon.spy() };
+      const wrapper = shallowWithIntl(<CanceledTripCard {...baseProps} />, {
+        router,
+      });
+      const event = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
       };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const renderSuffix = wrapper.find(RouteBadgeGroup).prop('renderSuffix');
-      const rendered = shallow(<div>{renderSuffix}</div>);
-      expect(
-        rendered.find(Icon).findWhere(n => n.prop('img') === 'icon_three-dots'),
-      ).to.have.length(1);
-    });
 
-    it('does not render the three-dots icon when totalCount equals trips.length', () => {
-      const props = { ...baseProps, totalCount: 1 };
-      const wrapper = shallowWithIntl(<CanceledTripCard {...props} />);
-      const renderSuffix = wrapper.find(RouteBadgeGroup).prop('renderSuffix');
-      expect(renderSuffix).to.equal(null);
+      wrapper.find(Card).prop('onClick')(event);
+
+      expect(router.push.calledWith('/liikenne/peruutukset/bus')).to.equal(
+        true,
+      );
     });
   });
 });
diff --git a/test/unit/component/trafficnow/Disruptions.test.js b/test/unit/component/trafficnow/Disruptions.test.js
new file mode 100644
index 0000000000..5e5c71f5f5
--- /dev/null
+++ b/test/unit/component/trafficnow/Disruptions.test.js
@@ -0,0 +1,50 @@
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import { getCanceledModes } from '../../../../app/component/trafficnow/Disruptions';
+
+const makeRouteSummary = gtfsId => ({
+  route: {
+    gtfsId,
+    shortName: gtfsId,
+    id: gtfsId,
+    mode: 'BUS',
+  },
+  cancellationCount: 1,
+  patterns: [],
+});
+
+describe('getCanceledModes', () => {
+  it('filters canceled trip routes by configured feed ids', () => {
+    const canceledModes = getCanceledModes(
+      {
+        bus: {
+          routes: [
+            makeRouteSummary('HSL:1001'),
+            makeRouteSummary('MATKA:2001'),
+          ],
+        },
+      },
+      ['HSL'],
+    );
+
+    expect(canceledModes).to.deep.equal([
+      {
+        key: 'bus',
+        routes: [makeRouteSummary('HSL:1001')],
+      },
+    ]);
+  });
+
+  it('omits cancellation modes when all routes are filtered out', () => {
+    const canceledModes = getCanceledModes(
+      {
+        bus: {
+          routes: [makeRouteSummary('MATKA:2001')],
+        },
+      },
+      ['HSL'],
+    );
+
+    expect(canceledModes).to.deep.equal([]);
+  });
+});
diff --git a/test/unit/component/trafficnow/RouteBadgeGroup.test.js b/test/unit/component/trafficnow/RouteBadgeGroup.test.js
index 2f3c4e1a8d..66affc2e28 100644
--- a/test/unit/component/trafficnow/RouteBadgeGroup.test.js
+++ b/test/unit/component/trafficnow/RouteBadgeGroup.test.js
@@ -4,8 +4,9 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import * as found from 'found';
-import RouteBadgeGroup from '../../../../app/component/trafficnow/components/RouteBadgeGroup';
+import { Component as RouteBadgeGroup } from '../../../../app/component/trafficnow/components/RouteBadgeGroup';
 import Icon from '../../../../app/component/Icon';
+import EntityBadge from '../../../../app/component/trafficnow/components/EntityBadge';
 
 const makeRoute = ({
   id = 'HSL:1',
@@ -67,7 +68,7 @@ describe('<RouteBadgeGroup />', () => {
           highlightedGtfsId="HSL:1"
         />,
       );
-      expect(wrapper.find('a').hasClass('highlight')).to.equal(true);
+      expect(wrapper.find(EntityBadge).prop('highlighted')).to.equal(true);
     });
 
     it('does not apply the highlight class when gtfsId does not match', () => {
@@ -78,7 +79,7 @@ describe('<RouteBadgeGroup />', () => {
           highlightedGtfsId="HSL:99"
         />,
       );
-      expect(wrapper.find('a').hasClass('highlight')).to.equal(false);
+      expect(wrapper.find(EntityBadge).prop('highlighted')).to.equal(false);
     });
   });
 
@@ -94,7 +95,7 @@ describe('<RouteBadgeGroup />', () => {
         preventDefault: sinon.spy(),
         stopPropagation: sinon.spy(),
       };
-      wrapper.find('a').prop('onClick')(mockEvent);
+      wrapper.find(EntityBadge).prop('handleClick')('/route/HSL:1')(mockEvent);
       expect(mockRouter.push.calledWith('/route/HSL:1')).to.equal(true);
     });
 
@@ -106,7 +107,7 @@ describe('<RouteBadgeGroup />', () => {
         preventDefault: sinon.spy(),
         stopPropagation: sinon.spy(),
       };
-      wrapper.find('a').prop('onClick')(mockEvent);
+      wrapper.find(EntityBadge).prop('handleClick')('/route/HSL:1')(mockEvent);
       expect(mockEvent.stopPropagation.calledOnce).to.equal(true);
     });
 
@@ -122,7 +123,7 @@ describe('<RouteBadgeGroup />', () => {
         preventDefault: sinon.spy(),
         stopPropagation: sinon.spy(),
       };
-      wrapper.find('a').prop('onClick')(mockEvent);
+      wrapper.find(EntityBadge).prop('handleClick')('/route/HSL:1')(mockEvent);
       expect(mockEvent.stopPropagation.called).to.equal(false);
     });
   });