diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index 5c14ab79d..ca65836fa 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -20,7 +20,7 @@ import {SUBMISSION_ALLOWED} from './constants';
 export default {
   title: 'Private API / App',
   component: App,
-  decorators: [LayoutDecorator, ConfigDecorator],
+  decorators: [ConfigDecorator],
   args: {
     'form.translationEnabled': true,
     submissionAllowed: SUBMISSION_ALLOWED.yes,
@@ -113,10 +113,11 @@ const render = args => {
 
 export const Default = {
   render,
+  decorators: [LayoutDecorator],
 };
 
 export const TranslationEnabled = {
-  render,
+  ...Default,
   args: {
     'form.translationEnabled': true,
   },
@@ -127,7 +128,7 @@ export const TranslationEnabled = {
 };
 
 export const TranslationDisabled = {
-  render,
+  ...Default,
   args: {
     'form.translationEnabled': false,
   },
@@ -145,8 +146,8 @@ export const TranslationDisabled = {
 };
 
 export const ActiveSubmission = {
+  ...Default,
   name: 'Active submission',
-  render,
   decorators: [
     // remove the window.localStorage entry, UUID value is from `api-mocks/forms.js`.
     // it gets set because of the play function which starts a submission.
@@ -201,3 +202,112 @@ export const ActiveSubmission = {
     await userEvent.click(beginButton);
   },
 };
+
+export const SeveralStepsInMobileViewport = {
+  render,
+  args: {
+    title: 'Progress',
+    formTitle: 'Formulier',
+    steps: [
+      {
+        uuid: '9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5',
+        slug: 'step-1',
+        formDefinition: 'Step 1',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/9e6eb3c5-e5a4-4abf-b64a-73d3243f2bf5`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '71fa50c1-53db-4179-9fe7-eb3378ef39ee',
+        slug: 'step-2',
+        formDefinition: 'Step 2',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/71fa50c1-53db-4179-9fe7-eb3378ef39ee`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'f4f82113-ac83-429b-a17b-c1b145831fa9',
+        slug: 'step-3',
+        formDefinition: 'Step 3',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/f4f82113-ac83-429b-a17b-c1b145831fa9`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'ae5af44e-004f-4d2f-be75-d46a22577244',
+        slug: 'step-4',
+        formDefinition: 'Step 4',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/ae5af44e-004f-4d2f-be75-d46a22577244`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: 'cae11cf8-2773-4d70-80f4-71e5828b6fe3',
+        slug: 'step-5',
+        formDefinition: 'Step 5',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/cae11cf8-2773-4d70-80f4-71e5828b6fe3`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '3b14f4f5-2283-4a81-adf1-03848672c83b',
+        slug: 'step-6',
+        formDefinition: 'Step 6',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/3b14f4f5-2283-4a81-adf1-03848672c83b`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '3f0a2763-74de-4957-b970-a5117f15b023',
+        slug: 'step-7',
+        formDefinition: 'Step 7',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/3f0a2763-74de-4957-b970-a5117f15b023`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-8',
+        formDefinition: 'Step 8',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-9',
+        formDefinition: 'Step 9',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+        completed: false,
+      },
+      {
+        uuid: '03657dc1-6bb1-49cf-8113-4b663981b70f',
+        slug: 'step-10',
+        formDefinition: 'Step 10',
+        index: 0,
+        url: `${BASE_URL}forms/mock/steps/03657dc1-6bb1-49cf-8113-4b663981b70f`,
+        isApplicable: true,
+        completed: false,
+      },
+    ],
+    ariaMobileIconLabel: 'Progress step indicator toggle icon (mobile)',
+    accessibleToggleStepsLabel: 'Current step in form Formulier: Stap 2',
+  },
+  parameters: {
+    chromatic: {disableSnapshot: true},
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+};
diff --git a/src/components/Caption.js b/src/components/Caption.js
index d71fbc406..5ccfe8b15 100644
--- a/src/components/Caption.js
+++ b/src/components/Caption.js
@@ -3,9 +3,13 @@ import React from 'react';
 
 import {getBEMClassName} from 'utils';
 
-const Caption = ({children, component = 'caption'}) => {
+const Caption = ({children, id, component = 'caption'}) => {
   const Component = `${component}`;
-  return <Component className={getBEMClassName('caption')}>{children}</Component>;
+  return (
+    <Component id={id} className={getBEMClassName('caption')}>
+      {children}
+    </Component>
+  );
 };
 
 Caption.propTypes = {
diff --git a/src/components/ProgressIndicator/index.js b/src/components/ProgressIndicator/index.js
index 773f2dc6b..fac8693f6 100644
--- a/src/components/ProgressIndicator/index.js
+++ b/src/components/ProgressIndicator/index.js
@@ -20,7 +20,9 @@ const ProgressIndicator = ({
   const [expanded, setExpanded] = useState(false);
 
   const modifiers = [];
-  if (!expanded) {
+  if (expanded) {
+    modifiers.push('mobile-expanded');
+  } else {
     modifiers.push('mobile-collapsed');
   }
 
@@ -36,7 +38,7 @@ const ProgressIndicator = ({
 
   return (
     <Card blockClassName="progress-indicator" modifiers={modifiers}>
-      <nav>
+      <nav aria-labelledby="proress-indicator-section">
         <MobileButton
           ariaMobileIconLabel={ariaMobileIconLabel}
           accessibleToggleStepsLabel={accessibleToggleStepsLabel}
@@ -44,7 +46,9 @@ const ProgressIndicator = ({
           expanded={expanded}
           onExpandClick={() => setExpanded(!expanded)}
         />
-        <Caption component="h2">{title}</Caption>
+        <Caption id="proress-indicator-section" component="h2">
+          {title}
+        </Caption>
         <List ordered>
           {steps.map((step, index) => (
             <ProgressIndicatorItem
diff --git a/src/scss/components/_anchor.scss b/src/scss/components/_anchor.scss
index da3661679..127318927 100644
--- a/src/scss/components/_anchor.scss
+++ b/src/scss/components/_anchor.scss
@@ -33,10 +33,6 @@
     }
   }
 
-  @include bem.modifier('openforms-active') {
-    font-weight: bold;
-  }
-
   @include bem.modifier('openforms-inherit') {
     color: inherit;
 
@@ -72,3 +68,11 @@
     @extend .utrecht-link, .utrecht-link--openforms;
   }
 }
+
+.openforms-theme {
+  .utrecht-link {
+    @include bem.modifier('openforms-active') {
+      font-weight: bold;
+    }
+  }
+}
diff --git a/src/scss/components/_app.scss b/src/scss/components/_app.scss
index 8b95eb238..d6c4f74a5 100644
--- a/src/scss/components/_app.scss
+++ b/src/scss/components/_app.scss
@@ -26,6 +26,10 @@
     display: flex;
   }
 
+  @include bem.element('body') {
+    flex: 1;
+  }
+
   @include bem.element('debug') {
     margin-block-start: 2em;
   }
diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index 81513562c..724a7f33f 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -80,6 +80,15 @@
         display: none;
       }
     }
+
+    @include bem.modifier('mobile-expanded') {
+      top: 0;
+      left: 0;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
   }
 }
 
@@ -94,6 +103,6 @@
 
   @include bem.element('label') {
     flex-grow: 1;
-    word-break: break-all;
+    hyphens: auto;
   }
 }