diff --git a/src/api-mocks/submissions.js b/src/api-mocks/submissions.js
index ae7aece9d..beb4bbc40 100644
--- a/src/api-mocks/submissions.js
+++ b/src/api-mocks/submissions.js
@@ -17,6 +17,15 @@ const SUBMISSION_DETAILS = {
       completed: false,
       canSubmit: true,
     },
+    {
+      id: 'a0ff2cfe-e59a-4881-88de-e1b0a76af8d3',
+      name: 'Step 2',
+      url: `${BASE_URL}submissions/458b29ae-5baa-4132-a0d7-8c7071b8152a/steps/98980oi8-e5a4-4abf-b64a-76j3j3ki897`,
+      formStep: `${BASE_URL}forms/mock/steps/98980oi8-e5a4-4abf-b64a-76j3j3ki897`,
+      isApplicable: false,
+      completed: false,
+      canSubmit: false,
+    },
   ],
   submissionAllowed: 'yes',
   isAuthenticated: false,
diff --git a/src/components/App.stories.js b/src/components/App.stories.js
index e910aa6e8..b9bcfa09c 100644
--- a/src/components/App.stories.js
+++ b/src/components/App.stories.js
@@ -45,7 +45,7 @@ export default {
         uuid: '98980oi8-e5a4-4abf-b64a-76j3j3ki897',
         slug: 'step-2',
         formDefinition: 'Step 2',
-        index: 0,
+        index: 1,
         literals: {
           previousText: {resolved: 'Previous', value: ''},
           saveText: {resolved: 'Save', value: ''},
@@ -203,6 +203,40 @@ export const ActiveSubmission = {
   },
 };
 
+export const NonApplicableStepActiveSubmission = {
+  ...Default,
+  name: 'Active submission with non-applicable step hidden',
+  args: {
+    hideNonApplicableSteps: true,
+  },
+  argTypes: {
+    submissionAllowed: {table: {disable: true}},
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        mockSubmissionPost(),
+        mockSubmissionGet(),
+        mockSubmissionStepGet(),
+        mockSubmissionCheckLogicPost(),
+        mockLanguageInfoGet([
+          {code: 'nl', name: 'Nederlands'},
+          {code: 'en', name: 'English'},
+        ]),
+        mockLanguageChoicePut,
+        mockAnalyticsToolConfigGet(),
+      ],
+    },
+  },
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const beginButton = await canvas.findByRole('button', {name: 'Begin'});
+    await userEvent.click(beginButton);
+  },
+};
+
 export const SeveralStepsInMobileViewport = {
   render,
   args: {
diff --git a/src/components/Form.js b/src/components/Form.js
index a58c78e2d..35af0d4db 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -292,31 +292,16 @@ const Form = () => {
     {formName, activeStepTitle}
   );
 
-  // Add slug and label to the submission steps.
-  // We need to show the items in the ProgressIndicator according to the
-  // submission data, as we may have logic rules which have been applied to them.
-  const updatedSubmissionSteps = submission?.steps.map(subStep => {
-    const updatedSubStep = {...subStep};
-
-    for (const formStep of steps) {
-      if (formStep.uuid === subStep.id) {
-        updatedSubStep['slug'] = formStep.slug;
-        updatedSubStep['formDefinition'] = formStep.formDefinition;
-      }
-    }
-    return updatedSubStep;
-  });
+  // process the form/submission steps information into step data that can be passed
+  // to the progress indicator.
+  // If the form is marked to not display non-applicable steps at all, filter them out.
+  const showNonApplicableSteps = !form.hideNonApplicableSteps;
+  const updatedSteps =
+    // first, process all the form steps in a format suitable for the PI
+    getStepsInfo(steps, submission, currentPathname)
+      // then, filter out the non-applicable steps if they should not be displayed
+      .filter(step => showNonApplicableSteps || step.isApplicable);
 
-  // Show only applicable steps when this is set in the admin.
-  let applicableSteps = form.hideNonApplicableSteps
-    ? (updatedSubmissionSteps || steps).filter(step => step.isApplicable)
-    : [];
-
-  const updatedSteps = getStepsInfo(
-    applicableSteps.length > 0 ? applicableSteps : updatedSubmissionSteps || form.steps,
-    submission,
-    currentPathname
-  );
   const stepsToRender = addFixedSteps(
     intl,
     updatedSteps,