diff --git a/services/app-web/src/pages/MccrsId/MccrsId.test.tsx b/services/app-web/src/pages/MccrsId/MccrsId.test.tsx
index d3c62384f2..2c1659bd88 100644
--- a/services/app-web/src/pages/MccrsId/MccrsId.test.tsx
+++ b/services/app-web/src/pages/MccrsId/MccrsId.test.tsx
@@ -1,6 +1,13 @@
 import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
+import { Route, Routes } from 'react-router'
+import { SubmissionSideNav } from '../SubmissionSideNav'
+import { RoutesRecord } from '../../constants/routes'
+import {
+    fetchCurrentUserMock,
+    fetchStateHealthPlanPackageWithQuestionsMockSuccess,
+    mockValidCMSUser,
+} from '../../testHelpers/apolloMocks'
 import {
     ldUseClientSpy,
     renderWithProviders,
@@ -16,11 +23,32 @@ describe('MCCRSID', () => {
     })
 
     it('renders without errors', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
 
         expect(
             await screen.findByRole('heading', { name: 'MC-CRS record number' })
@@ -31,22 +59,64 @@ describe('MCCRSID', () => {
     })
 
     it('displays the text field for mccrs id', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
 
-        expect(screen.getByTestId('textInput')).toBeInTheDocument()
+        expect(await screen.findByTestId('textInput')).toBeInTheDocument()
     })
 
     it('cannot continue without providing a MCCRS ID', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
-        const continueButton = screen.getByRole('button', {
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
+        const continueButton = await screen.findByRole('button', {
             name: 'Save MC-CRS number',
         })
         continueButton.click()
@@ -61,17 +131,36 @@ describe('MCCRSID', () => {
     })
 
     it('cannot continue with MCCRS ID less than 4 digits', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
+
+        const input = await screen.findByTestId('textInput')
+        input.focus()
 
-        screen
-            .getByLabelText(
-                'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
-            )
-            .focus()
         await userEvent.paste('123')
         const continueButton = screen.getByRole('button', {
             name: 'Save MC-CRS number',
@@ -79,26 +168,43 @@ describe('MCCRSID', () => {
         continueButton.click()
         await waitFor(() => {
             expect(
-                screen.getAllByText(
-                    'You must enter no more than 4 characters'
-                )
+                screen.getAllByText('You must enter no more than 4 characters')
             ).toHaveLength(1)
             expect(continueButton).toHaveAttribute('aria-disabled', 'true')
         })
     })
 
     it('cannot continue with MCCRS ID more than 4 digits', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
+
+        const input = await screen.findByTestId('textInput')
+        input.focus()
 
-        screen
-            .getByLabelText(
-                'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
-            )
-            .focus()
         await userEvent.paste('12345')
         const continueButton = screen.getByRole('button', {
             name: 'Save MC-CRS number',
@@ -106,26 +212,43 @@ describe('MCCRSID', () => {
         continueButton.click()
         await waitFor(() => {
             expect(
-                screen.getAllByText(
-                    'You must enter no more than 4 characters'
-                )
+                screen.getAllByText('You must enter no more than 4 characters')
             ).toHaveLength(1)
             expect(continueButton).toHaveAttribute('aria-disabled', 'true')
         })
     })
 
     it('cannot continue with MCCRS ID with non number input', async () => {
-        renderWithProviders(<MccrsId />, {
-            routerProvider: {
-                route: '/submissions/15/MCCRS-record-number',
-            },
-        })
+        renderWithProviders(
+            <Routes>
+                <Route element={<SubmissionSideNav />}>
+                    <Route
+                        path={RoutesRecord.SUBMISSIONS_MCCRSID}
+                        element={<MccrsId />}
+                    />
+                </Route>
+            </Routes>,
+            {
+                apolloProvider: {
+                    mocks: [
+                        fetchCurrentUserMock({
+                            user: mockValidCMSUser(),
+                            statusCode: 200,
+                        }),
+                        fetchStateHealthPlanPackageWithQuestionsMockSuccess({
+                            id: '15',
+                        }),
+                    ],
+                },
+                routerProvider: {
+                    route: '/submissions/15/MCCRS-record-number',
+                },
+            }
+        )
+
+        const input = await screen.findByTestId('textInput')
+        input.focus()
 
-        screen
-            .getByLabelText(
-                'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
-            )
-            .focus()
         await userEvent.paste('123a')
         const continueButton = screen.getByRole('button', {
             name: 'Save MC-CRS number',
diff --git a/services/app-web/src/pages/MccrsId/MccrsId.tsx b/services/app-web/src/pages/MccrsId/MccrsId.tsx
index 3a32abede9..728dcf5a8d 100644
--- a/services/app-web/src/pages/MccrsId/MccrsId.tsx
+++ b/services/app-web/src/pages/MccrsId/MccrsId.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { Form as UswdsForm, ButtonGroup } from '@trussworks/react-uswds'
 import { Formik, FormikErrors } from 'formik'
 import { FieldTextInput } from '../../components/Form'
@@ -40,15 +40,17 @@ export const MccrsId = (): React.ReactElement => {
     // page context
     const { updateHeading } = usePage()
 
-    useEffect(() => {
-        const customHeading = (
+    const customHeading = useMemo(() => {
+        return (
             <span className={styles.customHeading}>
                 {packageName}
                 <span>MC-CRS record number</span>
             </span>
         )
+    }, [packageName])
+    useEffect(() => {
         updateHeading({ customHeading })
-    }, [packageName, updateHeading])
+    }, [customHeading, updateHeading])
 
     const [showPageErrorMessage, setShowPageErrorMessage] = useState<
         boolean | string