diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
index c7808ec38fc9..6175cf0810af 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
+++ b/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { screen } from '@testing-library/react'
 
 import { COLORS, renderWithProviders } from '@opentrons/components'
 
@@ -20,33 +21,43 @@ describe('LegacyModal', () => {
   })
 
   it('should render modal without header icon when type is info', () => {
-    const [{ getByText, queryByTestId, getByTestId }] = render(props)
-    expect(queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
-    getByText('mock info modal')
-    expect(getByTestId('Modal_header')).toHaveStyle(
+    render(props)
+    expect(screen.queryByTestId('Modal_header_icon')).not.toBeInTheDocument()
+    screen.getByText('mock info modal')
+    expect(screen.getByTestId('Modal_header')).toHaveStyle(
       `background-color: ${COLORS.white}`
     )
   })
 
   it('should render modal with orange header icon when type is warning', () => {
     props.type = 'warning'
-    const [{ getByTestId }] = render(props)
-    const headerIcon = getByTestId('Modal_header_icon')
+    render(props)
+    const headerIcon = screen.getByTestId('Modal_header_icon')
     expect(headerIcon).toBeInTheDocument()
     expect(headerIcon).toHaveStyle(`color: ${COLORS.yellow50}`)
-    expect(getByTestId('Modal_header')).toHaveStyle(
+    expect(screen.getByTestId('Modal_header')).toHaveStyle(
       `background-color: ${COLORS.white}`
     )
   })
 
   it('should render modal with red header icon when type is error', () => {
     props.type = 'error'
-    const [{ getByTestId }] = render(props)
-    const headerIcon = getByTestId('Modal_header_icon')
+    render(props)
+    const headerIcon = screen.getByTestId('Modal_header_icon')
     expect(headerIcon).toBeInTheDocument()
     expect(headerIcon).toHaveStyle(`color: ${COLORS.red50}`)
-    expect(getByTestId('Modal_header')).toHaveStyle(
+    expect(screen.getByTestId('Modal_header')).toHaveStyle(
       `background-color: ${COLORS.white}`
     )
   })
+
+  it('should supply a default margin to account for the sidebar, aligning the modal in the center of the app', () => {
+    render(props)
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'width: 31.25rem'
+    )
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'margin-left: 5.656rem'
+    )
+  })
 })
diff --git a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
index f3473854489a..1831f991e2fe 100644
--- a/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
+++ b/app/src/organisms/UpdateAppModal/__tests__/UpdateAppModal.test.tsx
@@ -133,4 +133,13 @@ describe('UpdateAppModal', () => {
       screen.getByRole('heading', { name: 'Update Error' })
     ).toBeInTheDocument()
   })
+  it('uses a custom width and left margin to properly center the modal', () => {
+    render(props)
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'width: 40rem'
+    )
+    expect(screen.getByLabelText('ModalShell_ModalArea')).toHaveStyle(
+      'margin-left: 5.336rem'
+    )
+  })
 })