diff --git a/packages/app/src/components/typography.tsx b/packages/app/src/components/typography.tsx
index bff978e848..300b21d227 100644
--- a/packages/app/src/components/typography.tsx
+++ b/packages/app/src/components/typography.tsx
@@ -1,4 +1,4 @@
-import { Color } from '@corona-dashboard/common';
+import { Color, colors } from '@corona-dashboard/common';
 import css, { CSSProperties } from '@styled-system/css';
 import styled, { DefaultTheme } from 'styled-components';
 import { Preset, preset } from '~/style/preset';
@@ -13,20 +13,7 @@ export interface TextProps {
   ariaLabel?: string;
 }
 
-export interface AnchorProps extends TextProps {
-  underline?: boolean | 'hover';
-  hoverColor?: TextProps['color'];
-  display?: string;
-  width?: string | number;
-}
-
-export interface HeadingProps extends TextProps {
-  level: HeadingLevel;
-}
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5;
-
-function textStyle(props: TextProps & { as?: string }) {
+export const textStyle = (props: TextProps & { as?: string }) => {
   return css({
     ...(props.as === 'button'
       ? {
@@ -40,16 +27,13 @@ function textStyle(props: TextProps & { as?: string }) {
       : undefined),
 
     ...(props.variant ? preset.typography[props.variant] : undefined),
-
     ...(props.fontWeight ? { fontWeight: props.fontWeight } : undefined),
     ...(props.color ? { color: props.color } : undefined),
-    ...(props.textTransform
-      ? { textTransform: props.textTransform }
-      : undefined),
+    ...(props.textTransform ? { textTransform: props.textTransform } : undefined),
     ...(props.textAlign ? { textAlign: props.textAlign } : undefined),
     ...(props.hyphens ? { hyphens: props.hyphens } : undefined),
   });
-}
+};
 
 export const Text = styled.p<TextProps>(textStyle);
 
@@ -57,40 +41,62 @@ export const InlineText = styled.span<TextProps>(textStyle);
 
 export const BoldText = styled.strong<TextProps>(textStyle);
 
-export const Anchor = styled.a<AnchorProps>(
-  textStyle,
-  (props) =>
-    props.underline &&
-    css({
-      textDecoration: props.underline === 'hover' ? 'none' : 'underline',
-      '&:hover, &:focus': {
-        span: {
-          textDecoration: 'underline',
-        },
-      },
-    }),
-  (props) =>
-    props.hoverColor &&
-    css({
-      '&:hover,&:focus': { color: 'blue8' },
-    }),
-  (props) =>
-    props.display &&
-    css({
-      display: props.display,
-    })
-);
+export interface AnchorProps extends TextProps {
+  underline?: boolean | 'hover';
+  hoverColor?: TextProps['color'];
+  display?: string;
+  width?: string | number;
+}
+
+export const Anchor = styled.a<AnchorProps>`
+  ${textStyle}
+  ${({ underline }) =>
+    underline
+      ? `
+          cursor: pointer;
+          text-decoration: ${underline === 'hover' ? 'none' : 'underline'};
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
 
-export const Heading = styled.h1.attrs(
-  (props: HeadingProps & { as?: string }) => ({
-    as: props.as ?? (`h${props.level}` as const),
-    variant: props.variant ?? (`h${props.level}` as const),
-  })
-)<HeadingProps>(textStyle);
+      span {
+        text-decoration: underline;
+      }
+    }
+  `
+      : undefined}
+  ${({ hoverColor }) =>
+    hoverColor
+      ? `
+    &:hover,
+    &:focus {
+      color: ${colors.blue8};
+    }
+  `
+      : undefined}
+  ${({ display }) =>
+    display
+      ? `
+    display: ${display};
+  `
+      : undefined}
+`;
 
-export function styledTextVariant(variant: string, as?: string) {
+export interface HeadingProps extends TextProps {
+  level: HeadingLevel;
+}
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5;
+
+export const Heading = styled.h1.attrs((props: HeadingProps & { as?: string }) => ({
+  as: props.as ?? (`h${props.level}` as const),
+  variant: props.variant ?? (`h${props.level}` as const),
+}))<HeadingProps>(textStyle);
+
+export const styledTextVariant = (variant: string, as?: string) => {
   return styled.p.attrs(() => ({
     as: as ?? 'p',
     variant,
   }));
-}
+};
diff --git a/packages/app/src/domain/layout/gm-layout.tsx b/packages/app/src/domain/layout/gm-layout.tsx
index 22c976673a..b36b42da99 100644
--- a/packages/app/src/domain/layout/gm-layout.tsx
+++ b/packages/app/src/domain/layout/gm-layout.tsx
@@ -4,9 +4,10 @@ import { Menu, MenuRenderer } from '~/components/aside/menu';
 import { Box } from '~/components/base';
 import { ErrorBoundary } from '~/components/error-boundary';
 import { AppContent } from '~/components/layout/app-content';
-import { Heading, Text } from '~/components/typography';
+import { Anchor, Heading, Text } from '~/components/typography';
 import { VisuallyHidden } from '~/components/visually-hidden';
 import { useIntl } from '~/intl';
+import { space } from '~/style/theme';
 import { getVrForMunicipalityCode } from '~/utils/get-vr-for-municipality-code';
 import { Link } from '~/utils/link';
 import { useReverseRouter } from '~/utils/use-reverse-router';
@@ -64,10 +65,7 @@ export function GmLayout(props: GmLayoutProps) {
     layout: 'gm',
     code: code,
     map: [
-      [
-        'development_of_the_virus',
-        ['sewage_measurement', 'positive_tests', 'mortality'],
-      ],
+      ['development_of_the_virus', ['sewage_measurement', 'positive_tests', 'mortality']],
       ['consequences_for_healthcare', ['hospital_admissions']],
       ['actions_to_take', ['vaccinations']],
     ],
@@ -76,23 +74,14 @@ export function GmLayout(props: GmLayoutProps) {
   return (
     <>
       <Head>
-        <link
-          key="dc-spatial"
-          rel="dcterms:spatial"
-          href="https://standaarden.overheid.nl/owms/terms/Nederland"
-        />
-        <link
-          key="dc-spatial-title"
-          rel="dcterms:spatial"
-          href="https://standaarden.overheid.nl/owms/terms/Nederland"
-          title="Nederland"
-        />
+        <link key="dc-spatial" rel="dcterms:spatial" href="https://standaarden.overheid.nl/owms/terms/Nederland" />
+        <link key="dc-spatial-title" rel="dcterms:spatial" href="https://standaarden.overheid.nl/owms/terms/Nederland" title="Nederland" />
       </Head>
 
       <AppContent
         hideBackButton={isMainRoute}
         searchComponent={
-          <Box height="100%" maxWidth={{ _: '38rem', md: undefined }} mx="auto">
+          <Box height="100%" maxWidth={{ _: '38rem', md: undefined }} marginX="auto">
             <GmComboBox getLink={getLink} selectedGmCode={code} />
           </Box>
         }
@@ -107,21 +96,19 @@ export function GmLayout(props: GmLayoutProps) {
                 aria-labelledby="sidebar-title"
                 role="navigation"
                 maxWidth={{ _: '38rem', md: undefined }}
-                mx="auto"
+                marginX="auto"
                 spacing={1}
               >
-                <Box px={3} pb={4} spacing={1}>
+                <Box paddingX={space[3]} paddingBottom={space[4]} spacing={1}>
                   <Heading id="sidebar-title" level={2} variant="h3">
-                    <VisuallyHidden as="span">
-                      {commonTexts.gemeente_layout.headings.sidebar}
-                    </VisuallyHidden>
+                    <VisuallyHidden as="span">{commonTexts.gemeente_layout.headings.sidebar}</VisuallyHidden>
                     {municipalityName}
                   </Heading>
                   {vr && (
                     <Text>
                       {commonTexts.common.veiligheidsregio_label}{' '}
                       <Link href={reverseRouter.vr.index(vr.code)}>
-                        <a>{vr.name}</a>
+                        <Anchor underline="hover">{vr.name}</Anchor>
                       </Link>
                     </Text>
                   )}