diff --git a/packages/app/src/components/choropleth-legenda.tsx b/packages/app/src/components/choropleth-legenda.tsx
index faeaa0b1c0..a1c052552a 100644
--- a/packages/app/src/components/choropleth-legenda.tsx
+++ b/packages/app/src/components/choropleth-legenda.tsx
@@ -1,30 +1,24 @@
 import { ChoroplethThresholdsValue, colors } from '@corona-dashboard/common';
-import { css, SystemStyleObject } from '@styled-system/css';
-import styled from 'styled-components';
 import { ValueAnnotation } from '~/components/value-annotation';
 import { useIntl } from '~/intl';
-import { space, fontSizes } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
 import { useBreakpoints } from '~/utils/use-breakpoints';
-import { useResizeObserver } from '~/utils/use-resize-observer';
 import { Box } from './base';
 import { Legend, LegendItem } from './legend';
-import { InlineText, Text } from './typography';
+import { Text } from './typography';
 
 interface ChoroplethLegendaProps {
   title: string;
   thresholds: ChoroplethThresholdsValue[];
   valueAnnotation?: string;
-  type?: 'default' | 'bar';
   pageType?: string;
   outdatedDataLabel?: string;
 }
 
-export function ChoroplethLegenda({ title, thresholds, valueAnnotation, type = 'bar', pageType, outdatedDataLabel }: ChoroplethLegendaProps) {
-  const [itemRef, itemSize] = useResizeObserver<HTMLLIElement>();
-  const [endLabelRef, endLabelSize] = useResizeObserver<HTMLSpanElement>();
-  const { commonTexts, formatNumber } = useIntl();
+export function ChoroplethLegenda({ title, thresholds, valueAnnotation, pageType, outdatedDataLabel }: ChoroplethLegendaProps) {
+  const { commonTexts } = useIntl();
   const breakpoints = useBreakpoints(true);
+
   const legendItems = thresholds.map(
     (x: ChoroplethThresholdsValue, i) =>
       ({
@@ -41,105 +35,21 @@ export function ChoroplethLegenda({ title, thresholds, valueAnnotation, type = '
       } as LegendItem)
   );
 
+  if (pageType === 'sewer') {
+    legendItems.push({
+      label: outdatedDataLabel,
+      shape: 'square',
+      color: colors.yellow1,
+    } as LegendItem);
+  }
+
   return (
-    <Box width="100%" paddingRight={`${endLabelSize.width ?? 0 / 2}px`} spacing={2} aria-hidden="true">
+    <Box width="100%" spacing={2} aria-hidden="true">
       {title && <Text variant="subtitle1">{title}</Text>}
 
-      {pageType === 'sewer' && (
-        <Box display="flex" alignItems="center" paddingBottom={space[2]}>
-          <LegendaColor first={true} width={`${100 / thresholds.length}%`} color={colors.yellow1} />
-          <Box paddingLeft={space[3]} fontSize={fontSizes[1]}>
-            <InlineText>{outdatedDataLabel}</InlineText>
-          </Box>
-        </Box>
-      )}
-
-      {'bar' === type ? (
-        <List>
-          {thresholds.map(({ color, threshold, label, endLabel }, index) => {
-            const isFirst = index === 0;
-            const isLast = index === thresholds.length - 1;
-            const displayLabel = (itemSize.width ?? 0) > 35 || index % 2 === 0;
-            const formattedTreshold = formatNumber(threshold);
+      <Legend items={legendItems} columns={breakpoints.lg ? 1 : 2} />
 
-            return (
-              <Item key={color + threshold} ref={index === 0 ? itemRef : undefined} width={`${100 / thresholds.length}%`}>
-                <LegendaColor color={color} first={isFirst} last={isLast} />
-                {isFirst ? <StartLabel>{label ?? formattedTreshold}</StartLabel> : displayLabel && <Label>{label ?? formattedTreshold}</Label>}
-
-                {isLast && endLabel && <EndLabel ref={endLabelRef}>{endLabel}</EndLabel>}
-              </Item>
-            );
-          })}
-        </List>
-      ) : (
-        <Legend items={legendItems} columns={breakpoints.md ? 1 : 2} />
-      )}
       <ValueAnnotation>{valueAnnotation}</ValueAnnotation>
     </Box>
   );
 }
-
-const List = styled.ul(
-  css({
-    width: '100%',
-    marginTop: 0,
-    paddingLeft: 0,
-    listStyle: 'none',
-    display: 'flex',
-  })
-);
-
-// Assigning a flex-basis based on number of items in threshold so that legend items outside of the threshold array can be displayed using the same measurement.
-const Item = styled.li<{
-  width: string;
-}>(({ width }) =>
-  css({
-    flex: 1,
-    flexBasis: width,
-    position: 'relative',
-  })
-);
-
-const LegendaColor = styled.div<{
-  first?: boolean;
-  last?: boolean;
-  width?: string;
-  color: string;
-}>((x) =>
-  css({
-    width: '100%',
-    height: '10px',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: x.width,
-    borderRadius: x.first ? '2px 0 0 2px' : x.last ? '0 2px 2px 0' : 0,
-    backgroundColor: x.color,
-  })
-);
-
-const labelStyles: SystemStyleObject = {
-  pt: 1,
-  display: 'inline-block',
-  transform: 'translateX(-50%)',
-  fontSize: [0, null, 1],
-};
-
-const Label = styled.span(css(labelStyles));
-
-const StartLabel = styled.span(
-  css({
-    ...labelStyles,
-    transform: 'translateX(0)',
-  })
-);
-
-const EndLabel = styled.span(
-  css({
-    ...labelStyles,
-    position: 'absolute',
-    top: [12, null, 10],
-    right: 0,
-    transform: 'translateX(50%)',
-  })
-);
diff --git a/packages/app/src/components/choropleth-tile.tsx b/packages/app/src/components/choropleth-tile.tsx
index 513c06c6b5..a6dca03f4b 100644
--- a/packages/app/src/components/choropleth-tile.tsx
+++ b/packages/app/src/components/choropleth-tile.tsx
@@ -1,4 +1,5 @@
 import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
+import { space } from '~/style/theme';
 import { ChoroplethLegenda } from '~/components/choropleth-legenda';
 import { DataProps } from '~/types/attributes';
 import { useBreakpoints } from '~/utils/use-breakpoints';
@@ -16,7 +17,6 @@ type ChoroplethTileProps = DataProps & {
   legend?: {
     title: string;
     thresholds: ChoroplethThresholdsValue[];
-    type?: 'default' | 'bar';
     outdatedDataLabel?: string;
   };
   metadata?: MetadataProps;
@@ -50,45 +50,38 @@ export function ChoroplethTile({
   const breakpoints = useBreakpoints(true);
   const legendaComponent = legend && (
     <Box maxWidth={300} width="100%">
-      <ChoroplethLegenda
-        thresholds={legend.thresholds}
-        title={legend.title}
-        valueAnnotation={valueAnnotation}
-        type={legend.type}
-        pageType={pageType}
-        outdatedDataLabel={legend.outdatedDataLabel}
-      />
+      <ChoroplethLegenda thresholds={legend.thresholds} title={legend.title} valueAnnotation={valueAnnotation} pageType={pageType} outdatedDataLabel={legend.outdatedDataLabel} />
     </Box>
   );
 
   return (
     <FullscreenChartTile metadata={metadata}>
-      <Box display="flex" flexDirection={{ _: 'column', lg: 'row' }} m={0} as="figure" {...dataProps} height="100%" spacing={3}>
+      <Box display="flex" flexDirection={{ _: 'column', lg: 'row' }} margin={space[0]} as="figure" {...dataProps} height="100%" spacing={3}>
         <Box flex={{ lg: 1 }} as="figcaption" spacing={3}>
           <Heading level={3}>{title}</Heading>
 
           {typeof description === 'string' ? <Text>{description}</Text> : description}
 
           {onChartRegionChange && chartRegion && (
-            <Box display="flex" justifyContent={{ _: 'center', lg: 'flex-start' }} pt={4}>
+            <Box display="flex" justifyContent="flex-start" paddingTop={space[4]}>
               <ChartRegionControls value={chartRegion} onChange={onChartRegionChange} />
             </Box>
           )}
 
           {legendaComponent && breakpoints.lg && (
-            <Box display="flex" flexDirection="row" alignItems="flex-center">
+            <Box display="flex" flexDirection="row" alignItems="flex-start">
               {legendaComponent}
             </Box>
           )}
         </Box>
 
         <Box flex={{ lg: 1 }} display="flex" flexDirection="column" height="100%" spacing={3}>
-          <Box height="100%" mt={4} pl={hasPadding && breakpoints.lg ? 4 : undefined}>
+          <Box height="100%" marginTop={space[4]} pl={hasPadding && breakpoints.lg ? 4 : undefined}>
             <ErrorBoundary>{children}</ErrorBoundary>
           </Box>
 
           {legendaComponent && !breakpoints.lg && (
-            <Box display="flex" justifyContent="center">
+            <Box display="flex" justifyContent="flex-start">
               {legendaComponent}
             </Box>
           )}
diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
index 485b671736..96214e7819 100644
--- a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
@@ -1,57 +1,19 @@
-import {
-  colors,
-  DAY_IN_SECONDS,
-  TimeframeOption,
-  TimeframeOptionsList,
-  WEEK_IN_SECONDS,
-} from '@corona-dashboard/common';
+import { colors, DAY_IN_SECONDS, TimeframeOption, TimeframeOptionsList, WEEK_IN_SECONDS } from '@corona-dashboard/common';
 import { Ziekenhuis } from '@corona-dashboard/icons';
 import { last } from 'lodash';
 import { GetStaticPropsContext } from 'next';
-import {
-  ChartTile,
-  DynamicChoropleth,
-  TwoKpiSection,
-  ChoroplethTile,
-  KpiTile,
-  KpiValue,
-  PageInformationBlock,
-  TileList,
-  TimeSeriesChart,
-} from '~/components';
+import { ChartTile, DynamicChoropleth, TwoKpiSection, ChoroplethTile, KpiTile, KpiValue, PageInformationBlock, TileList, TimeSeriesChart } from '~/components';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { Layout, GmLayout } from '~/domain/layout';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import {
-  ElementsQueryResult,
-  getElementsQuery,
-  getTimelineEvents,
-} from '~/queries/get-elements-query';
-import {
-  getArticleParts,
-  getLinkParts,
-  getPagePartsQuery,
-} from '~/queries/get-page-parts-query';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetChoroplethData,
-  createGetContent,
-  getLastGeneratedDate,
-  getLokalizeTexts,
-  selectGmData,
-} from '~/static-props/get-data';
+import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
+import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectGmData } from '~/static-props/get-data';
 import { filterByRegionMunicipalities } from '~/static-props/utils/filter-by-region-municipalities';
 import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms';
-import {
-  countTrailingNullValues,
-  getBoundaryDateStartUnix,
-  replaceVariablesInText,
-  useReverseRouter,
-} from '~/utils';
+import { countTrailingNullValues, getBoundaryDateStartUnix, replaceVariablesInText, useReverseRouter } from '~/utils';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 import { useState } from 'react';
@@ -68,16 +30,12 @@ type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 export { getStaticPaths } from '~/static-paths/gm';
 
 export const getStaticProps = createGetStaticProps(
-  ({ locale }: { locale: keyof Languages }) =>
-    getLokalizeTexts(selectLokalizeTexts, locale),
+  ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
   getLastGeneratedDate,
   selectGmData('hospital_nice', 'code'),
   createGetChoroplethData({
     gm: ({ hospital_nice_choropleth }, context) => ({
-      hospital_nice_choropleth: filterByRegionMunicipalities(
-        hospital_nice_choropleth,
-        context
-      ),
+      hospital_nice_choropleth: filterByRegionMunicipalities(hospital_nice_choropleth, context),
     }),
   }),
   async (context: GetStaticPropsContext) => {
@@ -93,10 +51,7 @@ export const getStaticProps = createGetStaticProps(
 
     return {
       content: {
-        articles: getArticleParts(
-          content.parts.pageParts,
-          'hospitalPageArticles'
-        ),
+        articles: getArticleParts(content.parts.pageParts, 'hospitalPageArticles'),
         links: getLinkParts(content.parts.pageParts, 'hospitalPageLinks'),
         elements: content.elements,
       },
@@ -105,44 +60,24 @@ export const getStaticProps = createGetStaticProps(
 );
 
 function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
-  const {
-    pageText,
-    selectedGmData: data,
-    choropleth,
-    municipalityName,
-    content,
-    lastGenerated,
-  } = props;
+  const { pageText, selectedGmData: data, choropleth, municipalityName, content, lastGenerated } = props;
 
-  const [
-    hospitalAdmissionsOverTimeTimeframe,
-    setHospitalAdmissionsOverTimeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalAdmissionsOverTimeTimeframe, setHospitalAdmissionsOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
   const { commonTexts, formatDateFromSeconds } = useIntl();
   const reverseRouter = useReverseRouter();
 
-  const { textGm, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(
-    pageText,
-    selectLokalizeTexts
-  );
+  const { textGm, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
 
   const lastValue = data.hospital_nice.last_value;
-  const lastValueChoropleth =
-    last(choropleth.gm.hospital_nice_choropleth) || lastValue;
+  const lastValueChoropleth = last(choropleth.gm.hospital_nice_choropleth) || lastValue;
 
   const underReportedRange = getBoundaryDateStartUnix(
     data.hospital_nice.values,
-    countTrailingNullValues(
-      data.hospital_nice.values,
-      'admissions_on_date_of_admission_moving_average'
-    )
+    countTrailingNullValues(data.hospital_nice.values, 'admissions_on_date_of_admission_moving_average')
   );
 
-  const sevenDayAverageDates: [number, number] = [
-    underReportedRange - WEEK_IN_SECONDS,
-    underReportedRange - DAY_IN_SECONDS,
-  ];
+  const sevenDayAverageDates: [number, number] = [underReportedRange - WEEK_IN_SECONDS, underReportedRange - DAY_IN_SECONDS];
 
   const metadata = {
     ...commonTexts.gemeente_index.metadata,
@@ -161,9 +96,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
       <GmLayout code={data.code} municipalityName={municipalityName}>
         <TileList>
           <PageInformationBlock
-            category={
-              commonTexts.sidebar.categories.consequences_for_healthcare.title
-            }
+            category={commonTexts.sidebar.categories.consequences_for_healthcare.title}
             title={replaceVariablesInText(textGm.titel, {
               municipality: municipalityName,
             })}
@@ -194,14 +127,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                 source: textGm.bronnen.rivm,
               }}
             >
-              <KpiValue
-                data-cy="admissions_on_date_of_reporting"
-                absolute={
-                  lastValue.admissions_on_date_of_admission_moving_average_rounded
-                }
-                isAmount
-                isMovingAverageDifference
-              />
+              <KpiValue data-cy="admissions_on_date_of_reporting" absolute={lastValue.admissions_on_date_of_admission_moving_average_rounded} isAmount isMovingAverageDifference />
             </KpiTile>
           </TwoKpiSection>
 
@@ -221,8 +147,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               seriesConfig={[
                 {
                   type: 'line',
-                  metricProperty:
-                    'admissions_on_date_of_admission_moving_average',
+                  metricProperty: 'admissions_on_date_of_admission_moving_average',
                   label: textGm.linechart_legend_titel_moving_average,
                   color: colors.primary,
                 },
@@ -240,15 +165,10 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                     end: Infinity,
                     label: textGm.linechart_legend_underreported_titel,
                     shortLabel: commonTexts.common.incomplete,
-                    cutValuesForMetricProperties: [
-                      'admissions_on_date_of_admission_moving_average_rounded',
-                    ],
+                    cutValuesForMetricProperties: ['admissions_on_date_of_admission_moving_average_rounded'],
                   },
                 ],
-                timelineEvents: getTimelineEvents(
-                  content.elements.timeSeries,
-                  'hospital_nice'
-                ),
+                timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_nice'),
               }}
             />
           </ChartTile>
@@ -265,7 +185,6 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
             legend={{
               title: textShared.chloropleth_legenda.titel,
               thresholds: thresholds.gm.admissions_on_date_of_admission,
-              type: 'default',
             }}
           >
             <DynamicChoropleth
diff --git a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
index f93d9d1fbf..defd1a3b8c 100644
--- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
@@ -11,63 +11,24 @@ import {
 import { Ziekenhuis } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { useState } from 'react';
-import {
-  TwoKpiSection,
-  TimeSeriesChart,
-  TileList,
-  SEOHead,
-  ChartTile,
-  DynamicChoropleth,
-  ChoroplethTile,
-  KpiTile,
-  KpiValue,
-  PageInformationBlock,
-  PageKpi,
-} from '~/components';
+import { TwoKpiSection, TimeSeriesChart, TileList, SEOHead, ChartTile, DynamicChoropleth, ChoroplethTile, KpiTile, KpiValue, PageInformationBlock, PageKpi } from '~/components';
 import { RegionControlOption } from '~/components/chart-region-controls';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { AdmissionsPerAgeGroup } from '~/domain/hospital';
 import { Layout, NlLayout } from '~/domain/layout';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import {
-  ElementsQueryResult,
-  getElementsQuery,
-  getTimelineEvents,
-} from '~/queries/get-elements-query';
-import {
-  getArticleParts,
-  getLinkParts,
-  getPagePartsQuery,
-} from '~/queries/get-page-parts-query';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetChoroplethData,
-  createGetContent,
-  getLastGeneratedDate,
-  getLokalizeTexts,
-  selectNlData,
-} from '~/static-props/get-data';
+import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
+import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectNlData } from '~/static-props/get-data';
 import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms';
-import {
-  countTrailingNullValues,
-  getBoundaryDateStartUnix,
-  replaceVariablesInText,
-  useReverseRouter,
-} from '~/utils';
+import { countTrailingNullValues, getBoundaryDateStartUnix, replaceVariablesInText, useReverseRouter } from '~/utils';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { last } from 'lodash';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 
-const pageMetrics = [
-  'difference.hospital_lcps__beds_occupied_covid.new_date_unix',
-  'hospital_lcps',
-  'hospital_nice_per_age_group',
-  'hospital_nice',
-];
+const pageMetrics = ['difference.hospital_lcps__beds_occupied_covid.new_date_unix', 'hospital_lcps', 'hospital_nice_per_age_group', 'hospital_nice'];
 
 const selectLokalizeTexts = (siteText: SiteText) => ({
   metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata,
@@ -78,15 +39,9 @@ const selectLokalizeTexts = (siteText: SiteText) => ({
 type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 
 export const getStaticProps = createGetStaticProps(
-  ({ locale }: { locale: keyof Languages }) =>
-    getLokalizeTexts(selectLokalizeTexts, locale),
+  ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
   getLastGeneratedDate,
-  selectNlData(
-    'difference.hospital_lcps__beds_occupied_covid',
-    'hospital_lcps',
-    'hospital_nice_per_age_group',
-    'hospital_nice'
-  ),
+  selectNlData('difference.hospital_lcps__beds_occupied_covid', 'hospital_lcps', 'hospital_nice_per_age_group', 'hospital_nice'),
   createGetChoroplethData({
     vr: ({ hospital_nice_choropleth }) => ({ hospital_nice_choropleth }),
     gm: ({ hospital_nice_choropleth }) => ({ hospital_nice_choropleth }),
@@ -98,20 +53,13 @@ export const getStaticProps = createGetStaticProps(
     }>((context) => {
       return `{
         "parts": ${getPagePartsQuery('hospital_page')},
-        "elements": ${getElementsQuery(
-          'nl',
-          ['hospital_nice', 'hospital_nice_per_age_group'],
-          context.locale
-        )}
+        "elements": ${getElementsQuery('nl', ['hospital_nice', 'hospital_nice_per_age_group'], context.locale)}
       }`;
     })(context);
 
     return {
       content: {
-        articles: getArticleParts(
-          content.parts.pageParts,
-          'hospitalPageArticles'
-        ),
+        articles: getArticleParts(content.parts.pageParts, 'hospitalPageArticles'),
         links: getLinkParts(content.parts.pageParts, 'hospitalPageLinks'),
         elements: content.elements,
       },
@@ -120,28 +68,13 @@ export const getStaticProps = createGetStaticProps(
 );
 
 function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
-  const {
-    pageText,
-    selectedNlData: data,
-    choropleth,
-    content,
-    lastGenerated,
-  } = props;
+  const { pageText, selectedNlData: data, choropleth, content, lastGenerated } = props;
 
-  const [
-    hospitalAdmissionsOverTimeTimeframe,
-    setHospitalAdmissionsOverTimeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalAdmissionsOverTimeTimeframe, setHospitalAdmissionsOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
-  const [
-    hospitalBedsOccupiedOverTimeTimeframe,
-    setHospitalBedsOccupiedOverTimeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
-  const [
-    hospitalAdmissionsPerAgeTimeframe,
-    setHospitalAdmissionsPerAgeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalAdmissionsPerAgeTimeframe, setHospitalAdmissionsPerAgeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
   const reverseRouter = useReverseRouter();
   const [selectedMap, setSelectedMap] = useState<RegionControlOption>('vr');
@@ -151,52 +84,30 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
   const lastValueLcps = data.hospital_lcps.last_value;
 
   const lastValueNice = data.hospital_nice.last_value;
-  const lastValueNiceChoropleth =
-    (selectedMap === 'gm'
-      ? last(choropleth.gm.hospital_nice_choropleth)
-      : last(choropleth.vr.hospital_nice_choropleth)) || lastValueNice;
+  const lastValueNiceChoropleth = (selectedMap === 'gm' ? last(choropleth.gm.hospital_nice_choropleth) : last(choropleth.vr.hospital_nice_choropleth)) || lastValueNice;
 
-  const underReportedRange = getBoundaryDateStartUnix(
-    dataHospitalNice.values,
-    countTrailingNullValues(
-      dataHospitalNice.values,
-      'admissions_on_date_of_admission_moving_average'
-    )
-  );
+  const underReportedRange = getBoundaryDateStartUnix(dataHospitalNice.values, countTrailingNullValues(dataHospitalNice.values, 'admissions_on_date_of_admission_moving_average'));
 
-  const sevenDayAverageDates: [number, number] = [
-    underReportedRange - WEEK_IN_SECONDS,
-    underReportedRange - DAY_IN_SECONDS,
-  ];
+  const sevenDayAverageDates: [number, number] = [underReportedRange - WEEK_IN_SECONDS, underReportedRange - DAY_IN_SECONDS];
 
   const bedsLastValue = getLastFilledValue(data.hospital_lcps);
 
   const { commonTexts, formatDateFromSeconds } = useIntl();
-  const { metadataTexts, textNl, textShared } =
-    useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
+  const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
 
   const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics);
 
-  const choroplethDataGm: GmCollectionHospitalNice[] =
-    choropleth.gm.hospital_nice_choropleth;
-  const choroplethDataVr: VrCollectionHospitalNice[] =
-    choropleth.vr.hospital_nice_choropleth;
+  const choroplethDataGm: GmCollectionHospitalNice[] = choropleth.gm.hospital_nice_choropleth;
+  const choroplethDataVr: VrCollectionHospitalNice[] = choropleth.vr.hospital_nice_choropleth;
 
   return (
     <Layout {...metadataTexts} lastGenerated={lastGenerated}>
       <NlLayout>
-        <SEOHead
-          title={textNl.metadata.title}
-          description={textNl.metadata.description}
-        />
+        <SEOHead title={textNl.metadata.title} description={textNl.metadata.description} />
         <TileList>
           <PageInformationBlock
-            category={
-              commonTexts.sidebar.categories.consequences_for_healthcare.title
-            }
-            screenReaderCategory={
-              commonTexts.sidebar.metrics.hospital_admissions.title
-            }
+            category={commonTexts.sidebar.categories.consequences_for_healthcare.title}
+            screenReaderCategory={commonTexts.sidebar.metrics.hospital_admissions.title}
             title={textNl.titel}
             icon={<Ziekenhuis aria-hidden="true" />}
             description={textNl.pagina_toelichting}
@@ -222,13 +133,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                 source: textNl.bronnen.nice,
               }}
             >
-              <PageKpi
-                data={data}
-                metricName="hospital_nice"
-                metricProperty="admissions_on_date_of_admission_moving_average_rounded"
-                isMovingAverageDifference
-                isAmount
-              />
+              <PageKpi data={data} metricName="hospital_nice" metricProperty="admissions_on_date_of_admission_moving_average_rounded" isMovingAverageDifference isAmount />
             </KpiTile>
 
             <KpiTile
@@ -240,14 +145,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               }}
             >
               {bedsLastValue.beds_occupied_covid !== null && (
-                <KpiValue
-                  data-cy="beds_occupied_covid"
-                  absolute={bedsLastValue.beds_occupied_covid}
-                  difference={
-                    data.difference.hospital_lcps__beds_occupied_covid
-                  }
-                  isAmount
-                />
+                <KpiValue data-cy="beds_occupied_covid" absolute={bedsLastValue.beds_occupied_covid} difference={data.difference.hospital_lcps__beds_occupied_covid} isAmount />
               )}
             </KpiTile>
           </TwoKpiSection>
@@ -270,8 +168,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               seriesConfig={[
                 {
                   type: 'line',
-                  metricProperty:
-                    'admissions_on_date_of_admission_moving_average',
+                  metricProperty: 'admissions_on_date_of_admission_moving_average',
                   label: textNl.linechart_legend_titel_moving_average,
                   color: colors.primary,
                 },
@@ -289,15 +186,10 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                     end: Infinity,
                     label: textNl.linechart_legend_underreported_titel,
                     shortLabel: commonTexts.common.incomplete,
-                    cutValuesForMetricProperties: [
-                      'admissions_on_date_of_admission_moving_average',
-                    ],
+                    cutValuesForMetricProperties: ['admissions_on_date_of_admission_moving_average'],
                   },
                 ],
-                timelineEvents: getTimelineEvents(
-                  content.elements.timeSeries,
-                  'hospital_nice'
-                ),
+                timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_nice'),
               }}
             />
           </ChartTile>
@@ -353,12 +245,8 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
             onChartRegionChange={setSelectedMap}
             chartRegion={selectedMap}
             legend={{
-              thresholds:
-                selectedMap === 'gm'
-                  ? thresholds.gm.admissions_on_date_of_admission_per_100000
-                  : thresholds.gm.admissions_on_date_of_admission_per_100000,
+              thresholds: selectedMap === 'gm' ? thresholds.gm.admissions_on_date_of_admission_per_100000 : thresholds.gm.admissions_on_date_of_admission_per_100000,
               title: textShared.chloropleth_legenda.titel,
-              type: 'default',
             }}
             metadata={{
               date: lastValueNiceChoropleth.date_unix,
@@ -408,9 +296,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
 
           <ChartTile
             title={commonTexts.hospital_admissions_per_age_group.chart_title}
-            description={
-              commonTexts.hospital_admissions_per_age_group.chart_description
-            }
+            description={commonTexts.hospital_admissions_per_age_group.chart_description}
             timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
             metadata={{ source: textNl.bronnen.nice }}
@@ -422,10 +308,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               }}
               values={data.hospital_nice_per_age_group.values}
               timeframe={hospitalAdmissionsPerAgeTimeframe}
-              timelineEvents={getTimelineEvents(
-                content.elements.timeSeries,
-                'hospital_nice_per_age_group'
-              )}
+              timelineEvents={getTimelineEvents(content.elements.timeSeries, 'hospital_nice_per_age_group')}
             />
           </ChartTile>
         </TileList>
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
index 21948722c8..6f78f5d4ac 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
@@ -1,59 +1,21 @@
-import {
-  colors,
-  DAY_IN_SECONDS,
-  TimeframeOption,
-  TimeframeOptionsList,
-  WEEK_IN_SECONDS,
-} from '@corona-dashboard/common';
+import { colors, DAY_IN_SECONDS, TimeframeOption, TimeframeOptionsList, WEEK_IN_SECONDS } from '@corona-dashboard/common';
 import { useState } from 'react';
 import { Ziekenhuis } from '@corona-dashboard/icons';
 import { last } from 'lodash';
 import { GetStaticPropsContext } from 'next';
 import { useRouter } from 'next/router';
-import {
-  ChartTile,
-  DynamicChoropleth,
-  ChoroplethTile,
-  KpiTile,
-  KpiValue,
-  PageInformationBlock,
-  TileList,
-  TimeSeriesChart,
-  TwoKpiSection,
-} from '~/components';
+import { ChartTile, DynamicChoropleth, ChoroplethTile, KpiTile, KpiValue, PageInformationBlock, TileList, TimeSeriesChart, TwoKpiSection } from '~/components';
 import { thresholds } from '~/components/choropleth/logic/thresholds';
 import { gmCodesByVrCode } from '~/data';
 import { Layout, VrLayout } from '~/domain/layout';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import {
-  ElementsQueryResult,
-  getElementsQuery,
-  getTimelineEvents,
-} from '~/queries/get-elements-query';
-import {
-  getArticleParts,
-  getLinkParts,
-  getPagePartsQuery,
-} from '~/queries/get-page-parts-query';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetChoroplethData,
-  createGetContent,
-  getLastGeneratedDate,
-  getLokalizeTexts,
-  selectVrData,
-} from '~/static-props/get-data';
+import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
+import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectVrData } from '~/static-props/get-data';
 import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms';
-import {
-  countTrailingNullValues,
-  getBoundaryDateStartUnix,
-  replaceVariablesInText,
-  useReverseRouter,
-} from '~/utils';
+import { countTrailingNullValues, getBoundaryDateStartUnix, replaceVariablesInText, useReverseRouter } from '~/utils';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 
@@ -69,8 +31,7 @@ type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 export { getStaticPaths } from '~/static-paths/vr';
 
 export const getStaticProps = createGetStaticProps(
-  ({ locale }: { locale: keyof Languages }) =>
-    getLokalizeTexts(selectLokalizeTexts, locale),
+  ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
   getLastGeneratedDate,
   selectVrData('hospital_nice'),
   createGetChoroplethData({
@@ -89,10 +50,7 @@ export const getStaticProps = createGetStaticProps(
 
     return {
       content: {
-        articles: getArticleParts(
-          content.parts.pageParts,
-          'hospitalPageArticles'
-        ),
+        articles: getArticleParts(content.parts.pageParts, 'hospitalPageArticles'),
         links: getLinkParts(content.parts.pageParts, 'hospitalPageLinks'),
         elements: content.elements,
       },
@@ -101,48 +59,28 @@ export const getStaticProps = createGetStaticProps(
 );
 
 function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
-  const {
-    pageText,
-    selectedVrData: data,
-    vrName,
-    choropleth,
-    content,
-    lastGenerated,
-  } = props;
+  const { pageText, selectedVrData: data, vrName, choropleth, content, lastGenerated } = props;
 
-  const [
-    hospitalAdmissionsOverTimeTimeframe,
-    setHospitalAdmissionsOverTimeTimeframe,
-  ] = useState<TimeframeOption>(TimeframeOption.ALL);
+  const [hospitalAdmissionsOverTimeTimeframe, setHospitalAdmissionsOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
 
   const { commonTexts, formatDateFromSeconds } = useIntl();
   const reverseRouter = useReverseRouter();
   const router = useRouter();
 
-  const { textVr, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(
-    pageText,
-    selectLokalizeTexts
-  );
+  const { textVr, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
   const lastValue = data.hospital_nice.last_value;
 
-  const lastValueChoropleth =
-    last(choropleth.gm.hospital_nice_choropleth) || lastValue;
+  const lastValueChoropleth = last(choropleth.gm.hospital_nice_choropleth) || lastValue;
 
   const municipalCodes = gmCodesByVrCode[router.query.code as string];
   const selectedMunicipalCode = municipalCodes ? municipalCodes[0] : undefined;
 
   const underReportedRange = getBoundaryDateStartUnix(
     data.hospital_nice.values,
-    countTrailingNullValues(
-      data.hospital_nice.values,
-      'admissions_on_date_of_admission_moving_average'
-    )
+    countTrailingNullValues(data.hospital_nice.values, 'admissions_on_date_of_admission_moving_average')
   );
 
-  const sevenDayAverageDates: [number, number] = [
-    underReportedRange - WEEK_IN_SECONDS,
-    underReportedRange - DAY_IN_SECONDS,
-  ];
+  const sevenDayAverageDates: [number, number] = [underReportedRange - WEEK_IN_SECONDS, underReportedRange - DAY_IN_SECONDS];
 
   const metadata = {
     ...commonTexts.veiligheidsregio_index.metadata,
@@ -162,9 +100,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
       <VrLayout vrName={vrName}>
         <TileList>
           <PageInformationBlock
-            category={
-              commonTexts.sidebar.categories.consequences_for_healthcare.title
-            }
+            category={commonTexts.sidebar.categories.consequences_for_healthcare.title}
             title={replaceVariablesInText(textVr.titel, {
               safetyRegion: vrName,
             })}
@@ -195,14 +131,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                 source: textVr.bronnen.rivm,
               }}
             >
-              <KpiValue
-                data-cy="hospital_moving_avg_per_region"
-                absolute={
-                  lastValue.admissions_on_date_of_admission_moving_average_rounded
-                }
-                isMovingAverageDifference
-                isAmount
-              />
+              <KpiValue data-cy="hospital_moving_avg_per_region" absolute={lastValue.admissions_on_date_of_admission_moving_average_rounded} isMovingAverageDifference isAmount />
             </KpiTile>
           </TwoKpiSection>
 
@@ -222,8 +151,7 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
               seriesConfig={[
                 {
                   type: 'line',
-                  metricProperty:
-                    'admissions_on_date_of_admission_moving_average',
+                  metricProperty: 'admissions_on_date_of_admission_moving_average',
                   label: textVr.linechart_legend_titel_moving_average,
                   color: colors.primary,
                 },
@@ -241,15 +169,10 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
                     end: Infinity,
                     label: textVr.linechart_legend_underreported_titel,
                     shortLabel: commonTexts.common.incomplete,
-                    cutValuesForMetricProperties: [
-                      'admissions_on_date_of_admission_moving_average',
-                    ],
+                    cutValuesForMetricProperties: ['admissions_on_date_of_admission_moving_average'],
                   },
                 ],
-                timelineEvents: getTimelineEvents(
-                  content.elements.timeSeries,
-                  'hospital_nice'
-                ),
+                timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_nice'),
               }}
             />
           </ChartTile>
@@ -262,7 +185,6 @@ function IntakeHospital(props: StaticProps<typeof getStaticProps>) {
             legend={{
               thresholds: thresholds.gm.admissions_on_date_of_admission,
               title: textShared.chloropleth_legenda.titel,
-              type: 'default',
             }}
             metadata={{
               date: lastValueChoropleth.date_unix,