From 3bcd4c9cdbb3dcbfbfa7110ef30ff75a35f01f5c Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:39:11 -0400
Subject: [PATCH] refactor(components, app): odd and desktop modal unification
 (#15870)

closes AUTH-619

1. `LegacyModal` is now `Modal` and lives in the component directory
along with `LegacyModalShell`, `LegacyModalHeader` - both of which also
lost `Legacy` at the beginning
2. `Modal` in the app directory is now `OddModal` and `ModalHeader` is
now `OddModalHeader`
3. `Modal` in the components directory is now `LegacyModal` and has a
deprecated tag.
4. some unused modals have been deleted which include: `interstitial`,
`modalShell` in the components directory, `BaseModal`
---
 app/src/App/DesktopAppFallback.tsx            |  10 +-
 app/src/App/OnDeviceDisplayAppFallback.tsx    |  10 +-
 .../Interstitial/Interstitial.stories.tsx     |  24 ---
 app/src/atoms/Interstitial/Interstitial.tsx   |  73 ---------
 .../InterstitialTitleBar.stories.tsx          |  19 ---
 .../Interstitial/InterstitiallTitleBar.tsx    |  89 -----------
 .../Interstitial/__tests__/TitleBar.test.tsx  |  33 -----
 app/src/atoms/MenuList/index.tsx              |   6 +-
 app/src/atoms/Skeleton/Skeleton.stories.tsx   |   2 +-
 .../GenericWizardTile.stories.tsx             |   6 +-
 .../LegacyModal/LegacyModal.stories.tsx       |  54 -------
 .../LegacyModal/LegacyModalShell.tsx          | 128 ----------------
 app/src/molecules/LegacyModal/index.tsx       |  80 ----------
 .../ModalHeader.stories.tsx                   |   8 +-
 .../OddModal.stories.tsx}                     |   8 +-
 .../Modal.tsx => OddModal/OddModal.tsx}       |  14 +-
 .../OddModalHeader.tsx}                       |   4 +-
 .../SmallModalChildren.stories.tsx            |   0
 .../SmallModalChildren.tsx                    |   6 +-
 .../__tests__/OddModal.test.tsx}              |  16 +-
 .../__tests__/OddModalHeader.test.tsx}        |  10 +-
 .../__tests__/SmallModalChildren.test.tsx     |   0
 .../molecules/{Modal => OddModal}/index.ts    |   2 +-
 .../molecules/{Modal => OddModal}/types.ts    |   2 +-
 .../SimpleWizardBody.stories.tsx              |   7 +-
 .../ClearUnavailableRobots.tsx                |   6 +-
 .../AppSettings/PreviousVersionModal.tsx      |   6 +-
 .../organisms/ApplyHistoricOffsets/index.tsx  |  12 +-
 app/src/organisms/CalibrateDeck/index.tsx     |   7 +-
 .../CalibratePipetteOffset/index.tsx          |   7 +-
 .../AskForCalibrationBlockModal.tsx           |   6 +-
 .../organisms/CalibrateTipLength/index.tsx    |   7 +-
 .../organisms/CalibrationTaskList/index.tsx   |   6 +-
 app/src/organisms/ChangePipette/index.tsx     |  12 +-
 app/src/organisms/CheckCalibration/index.tsx  |   7 +-
 .../AddFixtureModal.tsx                       |  20 +--
 .../DeckConfigurationDiscardChangesModal.tsx  |  10 +-
 .../DeckFixtureSetupInstructionsModal.tsx     |  20 +--
 .../ConnectionTroubleshootingModal.tsx        |  10 +-
 .../HeaterShakerIsRunningModal/index.tsx      |   6 +-
 .../ProtocolAnalysisErrorBanner.tsx           |   6 +-
 .../ProtocolAnalysisErrorModal.tsx            |   6 +-
 .../ProtocolRun/ProtocolDropTipModal.tsx      |  12 +-
 .../Devices/ProtocolRun/RunFailedModal.tsx    |  10 +-
 .../SetupLabware/CurrentOffsetsModal.tsx      |  15 +-
 .../SetupLabware/SecureLabwareModal.tsx       |   6 +-
 .../HowLPCWorksModal.tsx                      |   6 +-
 .../LiquidsLabwareDetailsModal.tsx            |  12 +-
 .../ChooseModuleToConfigureModal.tsx          |  12 +-
 .../LocationConflictModal.tsx                 |  12 +-
 .../SetupModuleAndDeck/NotConfiguredModal.tsx |   6 +-
 .../OT2MultipleModulesHelp.tsx                |   6 +-
 .../AdvancedTabSlideouts/DeviceResetModal.tsx |  10 +-
 .../ConnectNetwork/DisconnectModal.tsx        |   6 +-
 .../RobotUpdateProgressModal.tsx              |   6 +-
 .../UpdateBuildroot/UpdateRobotModal.tsx      |   6 +-
 .../DropTipWizardFlows/DropTipWizard.tsx      |   6 +-
 .../DropTipWizardFlows/TipsAttachedModal.tsx  |  10 +-
 .../EmergencyStop/EstopMissingModal.tsx       |  20 +--
 .../EmergencyStop/EstopPressedModal.tsx       |  22 +--
 .../shared/ErrorDetailsModal.tsx              |  24 ++-
 .../shared/TipSelectionModal.tsx              |  10 +-
 .../__tests__/ErrorDetailsModal.test.tsx      |   8 +-
 .../UpdateInProgressModal.tsx                 |   6 +-
 .../FirmwareUpdateModal/UpdateNeededModal.tsx |  10 +-
 .../UpdateResultsModal.tsx                    |  14 +-
 .../organisms/GripperWizardFlows/index.tsx    |   6 +-
 .../HowCalibrationWorksModal/index.tsx        |   6 +-
 .../IncompatibleModuleODDModalBody.tsx        |  12 +-
 app/src/organisms/InterventionModal/index.tsx |   6 +-
 .../LabwareCard/CustomLabwareOverflowMenu.tsx |   6 +-
 .../LabwarePositionCheck/FatalErrorModal.tsx  |   6 +-
 .../IntroScreen/index.tsx                     |   6 +-
 .../LabwarePositionCheck/JogToWell.tsx        |   6 +-
 .../LabwarePositionCheckComponent.tsx         |  11 +-
 .../ModuleCard/ConfirmAttachmentModal.tsx     |   6 +-
 app/src/organisms/ModuleCard/ErrorInfo.tsx    |   6 +-
 .../ModuleCard/FirmwareUpdateFailedModal.tsx  |   6 +-
 .../organisms/ModuleCard/ModuleSetupModal.tsx |   6 +-
 app/src/organisms/ModuleWizardFlows/index.tsx |  11 +-
 .../RestartRobotConfirmationModal.tsx         |  10 +-
 .../AlternativeSecurityTypeModal.tsx          |  10 +-
 .../RunningProtocol/CancelingRunModal.tsx     |   6 +-
 .../RunningProtocol/ConfirmCancelRunModal.tsx |  10 +-
 .../RunningProtocol/RunFailedModal.tsx        |  10 +-
 .../organisms/OpenDoorAlertModal/index.tsx    |   6 +-
 .../PipetteWizardFlows/ChoosePipette.tsx      |  14 +-
 .../organisms/PipetteWizardFlows/index.tsx    |  15 +-
 .../ProtocolAnalysisFailure/index.tsx         |   6 +-
 app/src/organisms/ProtocolDetails/index.tsx   |   6 +-
 .../LabwareMapViewModal.tsx                   |  14 +-
 .../organisms/ProtocolSetupLabware/index.tsx  |   6 +-
 .../ModulesAndDeckMapViewModal.tsx            |  10 +-
 .../SetupInstructionsModal.tsx                |  10 +-
 .../AnalysisFailedModal.tsx                   |  10 +-
 .../ResetValuesModal.tsx                      |  10 +-
 .../ConfirmDeleteProtocolModal.tsx            |   6 +-
 .../QuickTransferFlow/ConfirmExitModal.tsx    |   6 +-
 .../QuickTransferFlow/SaveOrRunModal.tsx      |   6 +-
 .../QuickTransferFlow/SelectDestWells.tsx     |  10 +-
 .../DeckCalibrationConfirmModal.tsx           |   6 +-
 .../RobotSettingsDashboard/DeviceReset.tsx    |  10 +-
 .../NetworkSettings/NetworkDetailsModal.tsx   |  10 +-
 .../RobotSystemVersionModal.tsx               |  10 +-
 .../RunDetails/ConfirmCancelModal.tsx         |   6 +-
 .../organisms/TakeoverModal/TakeoverModal.tsx |  14 +-
 app/src/organisms/UpdateAppModal/index.tsx    |  14 +-
 .../hooks/useDashboardCalibrateDeck.tsx       |   6 +-
 .../hooks/useDashboardCalibratePipOffset.tsx  |   6 +-
 .../hooks/useDashboardCalibrateTipLength.tsx  |   6 +-
 .../DevicesLanding/NewRobotSetupHelp.tsx      |   6 +-
 .../DeleteProtocolConfirmationModal.tsx       |  10 +-
 .../ProtocolDashboard/LongPressModal.tsx      |   2 +-
 .../pages/ProtocolDashboard/ProtocolCard.tsx  |  10 +-
 app/src/pages/ProtocolDetails/index.tsx       |  10 +-
 .../ProtocolSetup/ConfirmAttachedModal.tsx    |  10 +-
 .../DeleteTransferConfirmationModal.tsx       |  10 +-
 .../IntroductoryModal.tsx                     |   6 +-
 .../QuickTransferDashboard/LongPressModal.tsx |   2 +-
 .../PipetteNotAttachedErrorModal.tsx          |   6 +-
 .../QuickTransferCard.tsx                     |  10 +-
 .../StorageLimitReachedErrorModal.tsx         |   6 +-
 app/src/pages/QuickTransferDetails/index.tsx  |   2 +-
 app/src/pages/RobotDashboard/WelcomeModal.tsx |   6 +-
 components/src/modals/AlertModal.tsx          |   7 +-
 components/src/modals/BaseModal.tsx           | 119 ---------------
 components/src/modals/ContinueModal.tsx       |   1 +
 components/src/modals/LegacyModal.tsx         |  59 ++++++++
 components/src/modals/Modal.stories.tsx       | 138 +++++-------------
 components/src/modals/Modal.tsx               | 115 +++++++++------
 .../src/modals/ModalHeader.tsx                |  36 ++---
 components/src/modals/ModalPage.tsx           |  42 ------
 components/src/modals/ModalShell.tsx          |  27 ++--
 components/src/modals/SpinnerModal.tsx        |   3 +
 components/src/modals/SpinnerModalPage.tsx    |   1 +
 .../src/modals/__tests__/BaseModal.test.tsx   |   4 -
 .../src/modals/__tests__/Modal.test.tsx       |  14 +-
 .../src/modals/__tests__/ModalHeader.test.tsx |  22 ++-
 .../src/modals/__tests__/ModalShell.test.tsx  |  13 +-
 components/src/modals/index.ts                |  11 +-
 components/src/structure/TitleBar.tsx         |   2 +-
 .../fields/WellOrderField/WellOrderModal.tsx  |   6 +-
 .../WellSelectionField/WellSelectionModal.tsx |   6 +-
 .../components/labware/BrowseLabwareModal.tsx |   6 +-
 .../modals/AnnouncementModal/index.tsx        |   6 +-
 .../modals/FilePipettesModal/index.tsx        |   6 +-
 .../components/modals/MoreOptionsModal.tsx    |   6 +-
 147 files changed, 736 insertions(+), 1399 deletions(-)
 delete mode 100644 app/src/atoms/Interstitial/Interstitial.stories.tsx
 delete mode 100644 app/src/atoms/Interstitial/Interstitial.tsx
 delete mode 100644 app/src/atoms/Interstitial/InterstitialTitleBar.stories.tsx
 delete mode 100644 app/src/atoms/Interstitial/InterstitiallTitleBar.tsx
 delete mode 100644 app/src/atoms/Interstitial/__tests__/TitleBar.test.tsx
 delete mode 100644 app/src/molecules/LegacyModal/LegacyModal.stories.tsx
 delete mode 100644 app/src/molecules/LegacyModal/LegacyModalShell.tsx
 delete mode 100644 app/src/molecules/LegacyModal/index.tsx
 rename app/src/molecules/{Modal => OddModal}/ModalHeader.stories.tsx (78%)
 rename app/src/molecules/{Modal/Modal.stories.tsx => OddModal/OddModal.stories.tsx} (82%)
 rename app/src/molecules/{Modal/Modal.tsx => OddModal/OddModal.tsx} (84%)
 rename app/src/molecules/{Modal/ModalHeader.tsx => OddModal/OddModalHeader.tsx} (92%)
 rename app/src/molecules/{Modal => OddModal}/SmallModalChildren.stories.tsx (100%)
 rename app/src/molecules/{Modal => OddModal}/SmallModalChildren.tsx (92%)
 rename app/src/molecules/{Modal/__tests__/Modal.test.tsx => OddModal/__tests__/OddModal.test.tsx} (77%)
 rename app/src/molecules/{Modal/__tests__/ModalHeader.test.tsx => OddModal/__tests__/OddModalHeader.test.tsx} (76%)
 rename app/src/molecules/{Modal => OddModal}/__tests__/SmallModalChildren.test.tsx (100%)
 rename app/src/molecules/{Modal => OddModal}/index.ts (57%)
 rename app/src/molecules/{Modal => OddModal}/types.ts (79%)
 delete mode 100644 components/src/modals/BaseModal.tsx
 create mode 100644 components/src/modals/LegacyModal.tsx
 rename app/src/molecules/LegacyModal/LegacyModalHeader.tsx => components/src/modals/ModalHeader.tsx (74%)
 delete mode 100644 components/src/modals/ModalPage.tsx
 delete mode 100644 components/src/modals/__tests__/BaseModal.test.tsx
 rename app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx => components/src/modals/__tests__/Modal.test.tsx (83%)
 rename app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx => components/src/modals/__tests__/ModalHeader.test.tsx (80%)
 rename app/src/molecules/LegacyModal/__tests__/LegacyModalShell.test.tsx => components/src/modals/__tests__/ModalShell.test.tsx (72%)

diff --git a/app/src/App/DesktopAppFallback.tsx b/app/src/App/DesktopAppFallback.tsx
index 30525606b23..d39552323a3 100644
--- a/app/src/App/DesktopAppFallback.tsx
+++ b/app/src/App/DesktopAppFallback.tsx
@@ -15,9 +15,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../molecules/LegacyModal'
 import { reloadUi } from '../redux/shell'
 
 import type { Dispatch } from '../redux/types'
@@ -38,11 +38,7 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
   }
 
   return (
-    <LegacyModal
-      type="warning"
-      title={t('error_boundary_title')}
-      marginLeft="0"
-    >
+    <Modal type="warning" title={t('error_boundary_title')} marginLeft="0">
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
           <LegacyStyledText as="p">
@@ -59,6 +55,6 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
           {t('reload_app')}
         </AlertPrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
index c5509cd60c9..c69e581f5c5 100644
--- a/app/src/App/OnDeviceDisplayAppFallback.tsx
+++ b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -18,11 +18,11 @@ import {
 } from '@opentrons/components'
 
 import { MediumButton } from '../atoms/buttons'
-import { Modal } from '../molecules/Modal'
+import { OddModal } from '../molecules/OddModal'
 import { appRestart, sendLog } from '../redux/shell'
 
 import type { Dispatch } from '../redux/types'
-import type { ModalHeaderBaseProps } from '../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../molecules/OddModal/types'
 
 export function OnDeviceDisplayAppFallback({
   error,
@@ -40,7 +40,7 @@ export function OnDeviceDisplayAppFallback({
     })
     dispatch(appRestart(error.message as string))
   }
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('error_boundary_title'),
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
@@ -52,7 +52,7 @@ export function OnDeviceDisplayAppFallback({
   }, [])
 
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -69,6 +69,6 @@ export function OnDeviceDisplayAppFallback({
           onClick={handleRestartClick}
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/atoms/Interstitial/Interstitial.stories.tsx b/app/src/atoms/Interstitial/Interstitial.stories.tsx
deleted file mode 100644
index f7d22e917e5..00000000000
--- a/app/src/atoms/Interstitial/Interstitial.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { Interstitial } from './Interstitial'
-import type { Story, Meta } from '@storybook/react'
-
-export default {
-  title: 'App/Atoms/Interstitial',
-  component: Interstitial,
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof Interstitial>> = args => (
-  <Interstitial {...args} />
-)
-
-export const Primary = Template.bind({})
-Primary.args = {
-  titleBar: {
-    title: 'title',
-    exit: {
-      onClick: () => jest.fn(),
-      title: 'exit',
-      children: 'exit',
-    },
-  },
-}
diff --git a/app/src/atoms/Interstitial/Interstitial.tsx b/app/src/atoms/Interstitial/Interstitial.tsx
deleted file mode 100644
index c86968c1103..00000000000
--- a/app/src/atoms/Interstitial/Interstitial.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react'
-import {
-  Box,
-  Flex,
-  POSITION_ABSOLUTE,
-  DIRECTION_COLUMN,
-  JUSTIFY_FLEX_START,
-  POSITION_RELATIVE,
-  COLORS,
-  TYPOGRAPHY,
-  SPACING,
-  Overlay,
-} from '@opentrons/components'
-import { InterstitialTitleBar } from './InterstitiallTitleBar'
-
-import type { InterstitialTitleBarProps } from './InterstitiallTitleBar'
-export interface InterstitialProps {
-  titleBar: InterstitialTitleBarProps
-  contentsClassName?: string
-  heading?: React.ReactNode
-  children?: React.ReactNode
-  innerProps?: React.ComponentProps<typeof Box>
-  outerProps?: React.ComponentProps<typeof Box>
-}
-
-export function Interstitial(props: InterstitialProps): JSX.Element {
-  const { titleBar, heading, innerProps = {}, outerProps = {} } = props
-
-  return (
-    <Box
-      flexDirection={DIRECTION_COLUMN}
-      position={POSITION_ABSOLUTE}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      justifyContent={JUSTIFY_FLEX_START}
-      padding={`${SPACING.spacing40} ${SPACING.spacing48} ${SPACING.spacing16} ${SPACING.spacing48}`}
-      data-testid="interstitial"
-      {...outerProps}
-    >
-      <Overlay backgroundColor={COLORS.white} />
-
-      <InterstitialTitleBar {...titleBar} />
-      <Box
-        zIndex="1"
-        width="auto"
-        margin="0 auto"
-        padding={SPACING.spacing16}
-        position={POSITION_RELATIVE}
-        boxShadow="0px 1px 3px rgba(0, 0, 0, 0.3)"
-        border={`1px solid ${String(COLORS.grey30)}`}
-        backgroundColor={COLORS.white}
-        maxHeight="100%"
-        overflowY="auto"
-        paddingTop={SPACING.spacing16}
-        {...innerProps}
-      >
-        {heading != null ? (
-          <Flex
-            marginTop="0"
-            marginBottom={SPACING.spacing16}
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            fontWeight={TYPOGRAPHY.fontWeightBold}
-          >
-            <h3>{heading}</h3>
-          </Flex>
-        ) : null}
-        {props.children}
-      </Box>
-    </Box>
-  )
-}
diff --git a/app/src/atoms/Interstitial/InterstitialTitleBar.stories.tsx b/app/src/atoms/Interstitial/InterstitialTitleBar.stories.tsx
deleted file mode 100644
index 2c868e5be53..00000000000
--- a/app/src/atoms/Interstitial/InterstitialTitleBar.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-import { InterstitialTitleBar } from './InterstitiallTitleBar'
-
-import type { Story, Meta } from '@storybook/react'
-
-export default {
-  title: 'App/Atoms/InterstitialTitleBar',
-  component: InterstitialTitleBar,
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof InterstitialTitleBar>
-> = args => <InterstitialTitleBar {...args} />
-
-export const Primary = Template.bind({})
-Primary.args = {
-  title: 'Title goes here',
-  exit: { title: 'Exit', children: 'Exit' },
-}
diff --git a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx b/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx
deleted file mode 100644
index 00c77a8c1cb..00000000000
--- a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as React from 'react'
-import { css } from 'styled-components'
-import {
-  Btn,
-  COLORS,
-  DIRECTION_ROW,
-  Flex,
-  Icon,
-  JUSTIFY_SPACE_BETWEEN,
-  POSITION_ABSOLUTE,
-  SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
-} from '@opentrons/components'
-
-import type { ButtonProps } from '@opentrons/components'
-
-export interface InterstitialTitleBarProps {
-  title: React.ReactNode
-  exit?: ButtonProps
-}
-
-const TITLE_BAR = css`
-  position: ${POSITION_ABSOLUTE};
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 3;
-`
-
-export function InterstitialTitleBar(
-  props: InterstitialTitleBarProps
-): JSX.Element {
-  const { title, exit } = props
-
-  return (
-    <Flex
-      width="100%"
-      backgroundColor={COLORS.black90}
-      color={COLORS.white}
-      flexDirection={DIRECTION_ROW}
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      css={TITLE_BAR}
-      data-testid="titlebar"
-    >
-      <Flex padding={SPACING.spacing4} data-testid={`titlebar_${title}`}>
-        <Icon
-          name="ot-logo"
-          width={TYPOGRAPHY.lineHeight18}
-          height={TYPOGRAPHY.lineHeight18}
-          paddingTop={SPACING.spacing2}
-          aria-label="ot-logo"
-        />
-        <Flex
-          paddingLeft={SPACING.spacing4}
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          fontSize={TYPOGRAPHY.fontSizeH3}
-        >
-          {title}
-        </Flex>
-      </Flex>
-      {exit != null && (
-        <Flex
-          paddingRight={TYPOGRAPHY.fontSizeH6}
-          data-testid={`titlebar_${exit.title}`}
-        >
-          <LegacyStyledText
-            paddingRight={SPACING.spacing8}
-            paddingTop={SPACING.spacing4}
-            fontWeight={TYPOGRAPHY.fontWeightRegular}
-            fontSize={TYPOGRAPHY.fontSizeH3}
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-          >
-            {exit.title}
-          </LegacyStyledText>
-          <Btn
-            size="1.5rem"
-            onClick={exit.onClick}
-            paddingTop="3px"
-            aria-label="close_btn"
-          >
-            <Icon name="close" aria-label="close" color={COLORS.white} />
-          </Btn>
-        </Flex>
-      )}
-    </Flex>
-  )
-}
diff --git a/app/src/atoms/Interstitial/__tests__/TitleBar.test.tsx b/app/src/atoms/Interstitial/__tests__/TitleBar.test.tsx
deleted file mode 100644
index 57b68cbdfe7..00000000000
--- a/app/src/atoms/Interstitial/__tests__/TitleBar.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { describe, it, vi, beforeEach, expect } from 'vitest'
-import { screen, fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { InterstitialTitleBar } from '../InterstitiallTitleBar'
-
-const render = (props: React.ComponentProps<typeof InterstitialTitleBar>) => {
-  return renderWithProviders(<InterstitialTitleBar {...props} />)[0]
-}
-
-describe('TitleBar', () => {
-  let props: React.ComponentProps<typeof InterstitialTitleBar>
-  const EXIT = { title: 'EXIT', onClick: vi.fn(), children: 'EXIT' }
-
-  beforeEach(() => {
-    props = {
-      title: 'TITLE',
-      exit: EXIT,
-    }
-  })
-
-  it('should render everything when back is defined and clicks button', () => {
-    render(props)
-    screen.getByText('TITLE')
-    screen.getByLabelText('ot-logo')
-    screen.getByLabelText('close')
-    screen.getByText('EXIT')
-    const button = screen.getByRole('button', { name: /close_btn/i })
-    expect(button).toBeEnabled()
-    fireEvent.click(button)
-    expect(EXIT.onClick).toBeCalled()
-  })
-})
diff --git a/app/src/atoms/MenuList/index.tsx b/app/src/atoms/MenuList/index.tsx
index 1994e6b24d9..45e6438fac2 100644
--- a/app/src/atoms/MenuList/index.tsx
+++ b/app/src/atoms/MenuList/index.tsx
@@ -7,8 +7,8 @@ import {
   SPACING,
   BORDERS,
   JUSTIFY_CENTER,
+  ModalShell,
 } from '@opentrons/components'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 
 interface MenuListProps {
   children: React.ReactNode
@@ -19,7 +19,7 @@ interface MenuListProps {
 export const MenuList = (props: MenuListProps): JSX.Element | null => {
   const { children, isOnDevice = false, onClick = null } = props
   return isOnDevice && onClick != null ? (
-    <LegacyModalShell
+    <ModalShell
       borderRadius={BORDERS.borderRadius16}
       width="max-content"
       onOutsideClick={onClick}
@@ -31,7 +31,7 @@ export const MenuList = (props: MenuListProps): JSX.Element | null => {
       >
         {children}
       </Flex>
-    </LegacyModalShell>
+    </ModalShell>
   ) : (
     <Flex
       borderRadius="4px 4px 0px 0px"
diff --git a/app/src/atoms/Skeleton/Skeleton.stories.tsx b/app/src/atoms/Skeleton/Skeleton.stories.tsx
index 686df256a8f..f3c4ab231c4 100644
--- a/app/src/atoms/Skeleton/Skeleton.stories.tsx
+++ b/app/src/atoms/Skeleton/Skeleton.stories.tsx
@@ -8,8 +8,8 @@ import {
   JUSTIFY_END,
   ALIGN_FLEX_END,
   PrimaryButton,
+  Modal,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
 import { Skeleton as SkeletonComponent } from '.'
 
 import type { Meta, StoryObj } from '@storybook/react'
diff --git a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
index a943b2c9089..b5c61246cd1 100644
--- a/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
+++ b/app/src/molecules/GenericWizardTile/GenericWizardTile.stories.tsx
@@ -7,9 +7,9 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  ModalShell,
 } from '@opentrons/components'
 import { Skeleton } from '../../atoms/Skeleton'
-import { LegacyModalShell } from '../LegacyModal'
 import { WizardHeader } from '../WizardHeader'
 import { configReducer } from '../../redux/config/reducer'
 import { GenericWizardTile } from './index'
@@ -37,10 +37,10 @@ const Template: Story<
   React.ComponentProps<typeof GenericWizardTile>
 > = args => (
   <Provider store={store}>
-    <LegacyModalShell>
+    <ModalShell>
       <WizardHeader currentStep={3} totalSteps={4} title="Example Title" />
       <GenericWizardTile {...args} />
-    </LegacyModalShell>
+    </ModalShell>
   </Provider>
 )
 const body = (
diff --git a/app/src/molecules/LegacyModal/LegacyModal.stories.tsx b/app/src/molecules/LegacyModal/LegacyModal.stories.tsx
deleted file mode 100644
index a56eacd934f..00000000000
--- a/app/src/molecules/LegacyModal/LegacyModal.stories.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import {
-  COLORS,
-  PrimaryBtn,
-  SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
-} from '@opentrons/components'
-import { LegacyModal } from './index'
-
-import type { Story, Meta } from '@storybook/react'
-
-export default {
-  title: 'App/Molecules/LegacyModal',
-  component: LegacyModal,
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof LegacyModal>> = args => (
-  <LegacyModal {...args} />
-)
-
-const Children = (
-  <React.Fragment>
-    <LegacyStyledText
-      fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-      fontSize={TYPOGRAPHY.fontSizeP}
-      paddingTop={SPACING.spacing4}
-    >
-      {'LegacyModal body goes here'}
-    </LegacyStyledText>
-
-    <PrimaryBtn
-      backgroundColor={COLORS.blue50}
-      marginTop="28rem"
-      textTransform={TYPOGRAPHY.textTransformNone}
-    >
-      <LegacyStyledText
-        fontWeight={TYPOGRAPHY.fontWeightRegular}
-        fontSize={TYPOGRAPHY.fontSizeP}
-      >
-        {'btn text'}
-      </LegacyStyledText>
-    </PrimaryBtn>
-  </React.Fragment>
-)
-
-export const Primary = Template.bind({})
-Primary.args = {
-  type: 'info',
-  onClose: () => {},
-  closeOnOutsideClick: false,
-  title: 'Modal Title',
-  children: Children,
-}
diff --git a/app/src/molecules/LegacyModal/LegacyModalShell.tsx b/app/src/molecules/LegacyModal/LegacyModalShell.tsx
deleted file mode 100644
index 7f9378433dc..00000000000
--- a/app/src/molecules/LegacyModal/LegacyModalShell.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react'
-import styled from 'styled-components'
-import {
-  ALIGN_CENTER,
-  BORDERS,
-  COLORS,
-  JUSTIFY_CENTER,
-  OVERFLOW_AUTO,
-  POSITION_ABSOLUTE,
-  POSITION_RELATIVE,
-  POSITION_STICKY,
-  RESPONSIVENESS,
-  SPACING,
-  styleProps,
-} from '@opentrons/components'
-import type { StyleProps } from '@opentrons/components'
-export interface LegacyModalShellProps extends StyleProps {
-  /** Modal content */
-  children: React.ReactNode
-  /** Optional close on outside click **/
-  onOutsideClick?: React.MouseEventHandler
-  /** Optional sticky header */
-  header?: React.ReactNode
-  /** Optional sticky footer */
-  footer?: React.ReactNode
-  /** Optional full page takeover */
-  fullPage?: boolean
-}
-
-/**
- * A ModalShell is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- * - An optional onOutsideClick function
- */
-export function LegacyModalShell(props: LegacyModalShellProps): JSX.Element {
-  const {
-    onOutsideClick,
-    zIndex = 10,
-    header,
-    footer,
-    fullPage = false,
-    children,
-    ...styleProps
-  } = props
-
-  return (
-    <Overlay
-      aria-label="BackgroundOverlay_ModalShell"
-      onClick={(e: React.MouseEvent) => {
-        e.stopPropagation()
-        if (onOutsideClick != null) onOutsideClick(e)
-      }}
-    >
-      <ContentArea zIndex={zIndex}>
-        <ModalArea
-          aria-label="ModalShell_ModalArea"
-          isFullPage={fullPage}
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation()
-          }}
-          {...styleProps}
-        >
-          {header != null ? <Header>{header}</Header> : null}
-          {children}
-          {footer != null ? <Footer>{footer}</Footer> : null}
-        </ModalArea>
-      </ContentArea>
-    </Overlay>
-  )
-}
-
-const Overlay = styled.div`
-  position: ${POSITION_ABSOLUTE};
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
-  cursor: default;
-`
-const ContentArea = styled.div<{ zIndex: string | number }>`
-  display: flex;
-  position: ${POSITION_ABSOLUTE};
-  align-items: ${ALIGN_CENTER};
-  justify-content: ${JUSTIFY_CENTER};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: ${({ zIndex }) => zIndex};
-  padding: ${SPACING.spacing16};
-`
-
-const ModalArea = styled.div<
-  { isFullPage: boolean; backgroundColor?: string } & StyleProps
->`
-  position: ${POSITION_RELATIVE};
-  overflow-y: ${OVERFLOW_AUTO};
-  max-height: 100%;
-  width: 100%;
-  border-radius: ${BORDERS.borderRadius8};
-  box-shadow: ${BORDERS.smallDropShadow};
-  height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')};
-  background-color: ${COLORS.white};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    border-radius: ${BORDERS.borderRadius16};
-  }
-  ${styleProps};
-`
-
-const Footer = styled.div`
-  background-color: ${COLORS.white};
-  position: ${POSITION_STICKY};
-  bottom: 0;
-`
-const Header = styled.div`
-  background-color: ${COLORS.white};
-  position: ${POSITION_STICKY};
-  top: 0;
-`
diff --git a/app/src/molecules/LegacyModal/index.tsx b/app/src/molecules/LegacyModal/index.tsx
deleted file mode 100644
index 7f5a6004111..00000000000
--- a/app/src/molecules/LegacyModal/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react'
-import { SPACING, COLORS, Box } from '@opentrons/components'
-import { LegacyModalHeader } from './LegacyModalHeader'
-import { LegacyModalShell } from './LegacyModalShell'
-import type { IconProps, StyleProps } from '@opentrons/components'
-
-type ModalType = 'info' | 'warning' | 'error'
-export * from './LegacyModalShell'
-export * from './LegacyModalHeader'
-
-export interface LegacyModalProps extends StyleProps {
-  type?: ModalType
-  onClose?: React.MouseEventHandler
-  closeOnOutsideClick?: boolean
-  title?: React.ReactNode
-  fullPage?: boolean
-  childrenPadding?: string | number
-  children?: React.ReactNode
-  footer?: React.ReactNode
-}
-
-/**
- * For Desktop app use only.
- */
-export const LegacyModal = (props: LegacyModalProps): JSX.Element => {
-  const {
-    type = 'info',
-    onClose,
-    closeOnOutsideClick,
-    title,
-    childrenPadding = `${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24}`,
-    children,
-    footer,
-    ...styleProps
-  } = props
-
-  const iconColor = (type: ModalType): string => {
-    let iconColor: string = ''
-    switch (type) {
-      case 'warning':
-        iconColor = COLORS.yellow50
-        break
-      case 'error':
-        iconColor = COLORS.red50
-        break
-    }
-    return iconColor
-  }
-
-  const modalIcon: IconProps = {
-    name: 'ot-alert',
-    color: iconColor(type),
-    size: '1.25rem',
-    marginRight: SPACING.spacing8,
-  }
-
-  const modalHeader = (
-    <LegacyModalHeader
-      onClose={onClose}
-      title={title}
-      icon={['error', 'warning'].includes(type) ? modalIcon : undefined}
-      color={COLORS.black90}
-      backgroundColor={COLORS.white}
-    />
-  )
-
-  return (
-    <LegacyModalShell
-      width={styleProps.width ?? '31.25rem'}
-      header={modalHeader}
-      onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined}
-      // center within viewport aside from nav
-      marginLeft={styleProps.marginLeft ?? '5.656rem'}
-      {...styleProps}
-      footer={footer}
-    >
-      <Box padding={childrenPadding}>{children}</Box>
-    </LegacyModalShell>
-  )
-}
diff --git a/app/src/molecules/Modal/ModalHeader.stories.tsx b/app/src/molecules/OddModal/ModalHeader.stories.tsx
similarity index 78%
rename from app/src/molecules/Modal/ModalHeader.stories.tsx
rename to app/src/molecules/OddModal/ModalHeader.stories.tsx
index 92e9c83f9b4..adf9524988e 100644
--- a/app/src/molecules/Modal/ModalHeader.stories.tsx
+++ b/app/src/molecules/OddModal/ModalHeader.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { COLORS, VIEWPORT } from '@opentrons/components'
-import { ModalHeader } from './ModalHeader'
+import { OddModalHeader } from './OddModalHeader'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'ODD/Molecules/Modal/ModalHeader',
+  title: 'ODD/Molecules/OddModal/OddModalHeader',
   argTypes: {
     iconName: {
       options: ['information', 'ot-check', 'ot-alert', undefined],
@@ -26,8 +26,8 @@ export default {
   parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof ModalHeader>> = args => (
-  <ModalHeader {...args} />
+const Template: Story<React.ComponentProps<typeof OddModalHeader>> = args => (
+  <OddModalHeader {...args} />
 )
 export const Default = Template.bind({})
 Default.args = {
diff --git a/app/src/molecules/Modal/Modal.stories.tsx b/app/src/molecules/OddModal/OddModal.stories.tsx
similarity index 82%
rename from app/src/molecules/Modal/Modal.stories.tsx
rename to app/src/molecules/OddModal/OddModal.stories.tsx
index 09456d77828..1ba0914779b 100644
--- a/app/src/molecules/Modal/Modal.stories.tsx
+++ b/app/src/molecules/OddModal/OddModal.stories.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { COLORS, Flex, BORDERS, SPACING, VIEWPORT } from '@opentrons/components'
-import { Modal } from './Modal'
+import { OddModal } from './OddModal'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'ODD/Molecules/Modal/Modal',
+  title: 'ODD/Molecules/OddModal/OddModal',
   argTypes: {
     modalSize: {
       options: ['small', 'medium', 'large'],
@@ -15,8 +15,8 @@ export default {
   parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof Modal>> = args => (
-  <Modal {...args} />
+const Template: Story<React.ComponentProps<typeof OddModal>> = args => (
+  <OddModal {...args} />
 )
 export const Default = Template.bind({})
 Default.args = {
diff --git a/app/src/molecules/Modal/Modal.tsx b/app/src/molecules/OddModal/OddModal.tsx
similarity index 84%
rename from app/src/molecules/Modal/Modal.tsx
rename to app/src/molecules/OddModal/OddModal.tsx
index f51293c015d..1f18e3e1fd9 100644
--- a/app/src/molecules/Modal/Modal.tsx
+++ b/app/src/molecules/OddModal/OddModal.tsx
@@ -9,25 +9,25 @@ import {
   JUSTIFY_CENTER,
 } from '@opentrons/components'
 import { BackgroundOverlay } from '../BackgroundOverlay'
-import { ModalHeader } from './ModalHeader'
+import { OddModalHeader } from './OddModalHeader'
 
 import type { StyleProps } from '@opentrons/components'
-import type { ModalHeaderBaseProps, ModalSize } from '../Modal/types'
+import type { OddModalHeaderBaseProps, ModalSize } from './types'
 
-interface ModalProps extends StyleProps {
+interface OddModalProps extends StyleProps {
   /** clicking anywhere outside of the modal closes it  */
   onOutsideClick?: React.MouseEventHandler
   /** modal content */
   children: React.ReactNode
   /** for small, medium, or large modal sizes, medium by default */
   modalSize?: ModalSize
-  /** see ModalHeader component for more details */
-  header?: ModalHeaderBaseProps
+  /** see OddModalHeader component for more details */
+  header?: OddModalHeaderBaseProps
 }
 /**
  * For ODD use only.
  */
-export function Modal(props: ModalProps): JSX.Element {
+export function OddModal(props: OddModalProps): JSX.Element {
   const {
     modalSize = 'medium',
     onOutsideClick,
@@ -71,7 +71,7 @@ export function Modal(props: ModalProps): JSX.Element {
         }}
       >
         {header != null ? (
-          <ModalHeader {...header} onClick={onOutsideClick} />
+          <OddModalHeader {...header} onClick={onOutsideClick} />
         ) : null}
         <Flex
           backgroundColor={COLORS.white}
diff --git a/app/src/molecules/Modal/ModalHeader.tsx b/app/src/molecules/OddModal/OddModalHeader.tsx
similarity index 92%
rename from app/src/molecules/Modal/ModalHeader.tsx
rename to app/src/molecules/OddModal/OddModalHeader.tsx
index a305b67b8bc..38b798d9593 100644
--- a/app/src/molecules/Modal/ModalHeader.tsx
+++ b/app/src/molecules/OddModal/OddModalHeader.tsx
@@ -11,9 +11,9 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import type { ModalHeaderBaseProps } from '../Modal/types'
+import type { OddModalHeaderBaseProps } from './types'
 
-export function ModalHeader(props: ModalHeaderBaseProps): JSX.Element {
+export function OddModalHeader(props: OddModalHeaderBaseProps): JSX.Element {
   const {
     title,
     hasExitIcon,
diff --git a/app/src/molecules/Modal/SmallModalChildren.stories.tsx b/app/src/molecules/OddModal/SmallModalChildren.stories.tsx
similarity index 100%
rename from app/src/molecules/Modal/SmallModalChildren.stories.tsx
rename to app/src/molecules/OddModal/SmallModalChildren.stories.tsx
diff --git a/app/src/molecules/Modal/SmallModalChildren.tsx b/app/src/molecules/OddModal/SmallModalChildren.tsx
similarity index 92%
rename from app/src/molecules/Modal/SmallModalChildren.tsx
rename to app/src/molecules/OddModal/SmallModalChildren.tsx
index 76ed00cd8b6..35c6d180f85 100644
--- a/app/src/molecules/Modal/SmallModalChildren.tsx
+++ b/app/src/molecules/OddModal/SmallModalChildren.tsx
@@ -9,7 +9,7 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '.'
+import { OddModal } from './index'
 
 interface SmallModalChildrenProps {
   handleCloseMaxPinsAlert: () => void
@@ -23,7 +23,7 @@ export function SmallModalChildren(
   const { handleCloseMaxPinsAlert, header, subText, buttonText } = props
 
   return (
-    <Modal onOutsideClick={handleCloseMaxPinsAlert} modalSize="small">
+    <OddModal onOutsideClick={handleCloseMaxPinsAlert} modalSize="small">
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing8}
@@ -57,6 +57,6 @@ export function SmallModalChildren(
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/molecules/Modal/__tests__/Modal.test.tsx b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
similarity index 77%
rename from app/src/molecules/Modal/__tests__/Modal.test.tsx
rename to app/src/molecules/OddModal/__tests__/OddModal.test.tsx
index 96aecccac18..3d18e8aea3b 100644
--- a/app/src/molecules/Modal/__tests__/Modal.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModal.test.tsx
@@ -4,23 +4,23 @@ import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
 import { renderWithProviders } from '../../../__testing-utils__'
-import { ModalHeader } from '../ModalHeader'
-import { Modal } from '../Modal'
+import { OddModalHeader } from '../OddModalHeader'
+import { OddModal } from '../OddModal'
 
-vi.mock('../ModalHeader')
+vi.mock('../OddModalHeader')
 
-const render = (props: React.ComponentProps<typeof Modal>) => {
-  return renderWithProviders(<Modal {...props} />)[0]
+const render = (props: React.ComponentProps<typeof OddModal>) => {
+  return renderWithProviders(<OddModal {...props} />)[0]
 }
 
-describe('Modal', () => {
-  let props: React.ComponentProps<typeof Modal>
+describe('OddModal', () => {
+  let props: React.ComponentProps<typeof OddModal>
   beforeEach(() => {
     props = {
       onOutsideClick: vi.fn(),
       children: <div>children</div>,
     }
-    vi.mocked(ModalHeader).mockReturnValue(<div>mock Modal Header</div>)
+    vi.mocked(OddModalHeader).mockReturnValue(<div>mock Modal Header</div>)
   })
   it('should render the modal with no header', () => {
     render(props)
diff --git a/app/src/molecules/Modal/__tests__/ModalHeader.test.tsx b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
similarity index 76%
rename from app/src/molecules/Modal/__tests__/ModalHeader.test.tsx
rename to app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
index 1fab5918501..53d95f6acf1 100644
--- a/app/src/molecules/Modal/__tests__/ModalHeader.test.tsx
+++ b/app/src/molecules/OddModal/__tests__/OddModalHeader.test.tsx
@@ -4,14 +4,14 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
-import { ModalHeader } from '../ModalHeader'
+import { OddModalHeader } from '../OddModalHeader'
 
-const render = (props: React.ComponentProps<typeof ModalHeader>) => {
-  return renderWithProviders(<ModalHeader {...props} />)[0]
+const render = (props: React.ComponentProps<typeof OddModalHeader>) => {
+  return renderWithProviders(<OddModalHeader {...props} />)[0]
 }
 
-describe('ModalHeader', () => {
-  let props: React.ComponentProps<typeof ModalHeader>
+describe('OddModalHeader', () => {
+  let props: React.ComponentProps<typeof OddModalHeader>
   beforeEach(() => {
     props = {
       title: 'title',
diff --git a/app/src/molecules/Modal/__tests__/SmallModalChildren.test.tsx b/app/src/molecules/OddModal/__tests__/SmallModalChildren.test.tsx
similarity index 100%
rename from app/src/molecules/Modal/__tests__/SmallModalChildren.test.tsx
rename to app/src/molecules/OddModal/__tests__/SmallModalChildren.test.tsx
diff --git a/app/src/molecules/Modal/index.ts b/app/src/molecules/OddModal/index.ts
similarity index 57%
rename from app/src/molecules/Modal/index.ts
rename to app/src/molecules/OddModal/index.ts
index 906cd511fc0..e10fa99331d 100644
--- a/app/src/molecules/Modal/index.ts
+++ b/app/src/molecules/OddModal/index.ts
@@ -1,2 +1,2 @@
-export * from './Modal'
+export * from './OddModal'
 export * from './SmallModalChildren'
diff --git a/app/src/molecules/Modal/types.ts b/app/src/molecules/OddModal/types.ts
similarity index 79%
rename from app/src/molecules/Modal/types.ts
rename to app/src/molecules/OddModal/types.ts
index a9ddd05ffed..940554658de 100644
--- a/app/src/molecules/Modal/types.ts
+++ b/app/src/molecules/OddModal/types.ts
@@ -2,7 +2,7 @@ import type { IconName, StyleProps } from '@opentrons/components'
 
 export type ModalSize = 'small' | 'medium' | 'large'
 
-export interface ModalHeaderBaseProps extends StyleProps {
+export interface OddModalHeaderBaseProps extends StyleProps {
   title: string
   onClick?: React.MouseEventHandler
   hasExitIcon?: boolean
diff --git a/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx b/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
index ef58f6f61d0..240be51e27e 100644
--- a/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
+++ b/app/src/molecules/SimpleWizardBody/SimpleWizardBody.stories.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
-import { COLORS, PrimaryButton } from '@opentrons/components'
-import { LegacyModalShell } from '../LegacyModal'
+import { COLORS, PrimaryButton, ModalShell } from '@opentrons/components'
 import { WizardHeader } from '../WizardHeader'
 import { configReducer } from '../../redux/config/reducer'
 import { SimpleWizardBody } from './index'
@@ -28,10 +27,10 @@ const store: Store<any> = createStore(
 
 const Template: Story<React.ComponentProps<typeof SimpleWizardBody>> = args => (
   <Provider store={store}>
-    <LegacyModalShell>
+    <ModalShell>
       <WizardHeader currentStep={3} totalSteps={4} title="Attach a pipette" />
       <SimpleWizardBody {...args} />
-    </LegacyModalShell>
+    </ModalShell>
   </Provider>
 )
 
diff --git a/app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx b/app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx
index 1913f27a549..42a698a955e 100644
--- a/app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx
+++ b/app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx
@@ -18,12 +18,12 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
   useConditionalConfirm,
+  Modal,
 } from '@opentrons/components'
 
 import { TertiaryButton } from '../../atoms/buttons'
 import { ERROR_TOAST, SUCCESS_TOAST } from '../../atoms/Toast'
 import { useToaster } from '../../organisms/ToasterOven'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import {
   clearDiscoveryCache,
@@ -68,7 +68,7 @@ export function ClearUnavailableRobots(): JSX.Element {
     <>
       {showConfirmDeleteUnavailRobots
         ? createPortal(
-            <LegacyModal
+            <Modal
               type="warning"
               title={t('clear_unavailable_robots')}
               onClose={cancelExit}
@@ -101,7 +101,7 @@ export function ClearUnavailableRobots(): JSX.Element {
                   </AlertPrimaryButton>
                 </Flex>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/AppSettings/PreviousVersionModal.tsx b/app/src/organisms/AppSettings/PreviousVersionModal.tsx
index 38321c66367..de0af38bcd3 100644
--- a/app/src/organisms/AppSettings/PreviousVersionModal.tsx
+++ b/app/src/organisms/AppSettings/PreviousVersionModal.tsx
@@ -7,9 +7,9 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  Modal,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
 
 export const UNINSTALL_APP_URL =
@@ -27,7 +27,7 @@ export function PreviousVersionModal(
   const { t } = useTranslation(['app_settings', 'branded'])
 
   return (
-    <LegacyModal onClose={props.closeModal} title={t('how_to_restore')}>
+    <Modal onClose={props.closeModal} title={t('how_to_restore')}>
       <Box>
         <LegacyStyledText as="p" paddingBottom={SPACING.spacing8}>
           {t('branded:restore_description')}
@@ -55,6 +55,6 @@ export function PreviousVersionModal(
           {t('close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/ApplyHistoricOffsets/index.tsx b/app/src/organisms/ApplyHistoricOffsets/index.tsx
index eebacb44513..846ee9af827 100644
--- a/app/src/organisms/ApplyHistoricOffsets/index.tsx
+++ b/app/src/organisms/ApplyHistoricOffsets/index.tsx
@@ -15,13 +15,11 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  ModalHeader,
+  ModalShell,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../App/portal'
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
-import {
-  LegacyModalHeader,
-  LegacyModalShell,
-} from '../../molecules/LegacyModal'
 import { PythonLabwareOffsetSnippet } from '../../molecules/PythonLabwareOffsetSnippet'
 import { LabwareOffsetTabs } from '../LabwareOffsetTabs'
 import { getLabwareDefinitionsFromCommands } from '../../molecules/Command/utils/getLabwareDefinitionsFromCommands'
@@ -112,10 +110,10 @@ export function ApplyHistoricOffsets(
       </Link>
       {showOffsetDataModal
         ? createPortal(
-            <LegacyModalShell
+            <ModalShell
               maxWidth="40rem"
               header={
-                <LegacyModalHeader
+                <ModalHeader
                   title={t(
                     noOffsetData
                       ? 'what_is_labware_offset_data'
@@ -183,7 +181,7 @@ export function ApplyHistoricOffsets(
                   )
                 ) : null}
               </Flex>
-            </LegacyModalShell>,
+            </ModalShell>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/CalibrateDeck/index.tsx b/app/src/organisms/CalibrateDeck/index.tsx
index 6385a1165f1..56dcb31dcf2 100644
--- a/app/src/organisms/CalibrateDeck/index.tsx
+++ b/app/src/organisms/CalibrateDeck/index.tsx
@@ -6,7 +6,7 @@ import { useQueryClient } from 'react-query'
 
 import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
-import { useConditionalConfirm } from '@opentrons/components'
+import { useConditionalConfirm, ModalShell } from '@opentrons/components'
 
 import * as Sessions from '../../redux/sessions'
 import {
@@ -20,7 +20,6 @@ import {
   LoadingState,
   CompleteConfirmation,
 } from '../../organisms/CalibrationPanels'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getTopPortalEl } from '../../App/portal'
 
@@ -135,7 +134,7 @@ export function CalibrateDeck(
       ? PANEL_BY_STEP[currentStep]
       : null
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -176,7 +175,7 @@ export function CalibrateDeck(
           allowChangeTipRack
         />
       )}
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/CalibratePipetteOffset/index.tsx b/app/src/organisms/CalibratePipetteOffset/index.tsx
index f579e34104a..a945a856ef7 100644
--- a/app/src/organisms/CalibratePipetteOffset/index.tsx
+++ b/app/src/organisms/CalibratePipetteOffset/index.tsx
@@ -6,7 +6,7 @@ import { useQueryClient } from 'react-query'
 
 import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
-import { useConditionalConfirm } from '@opentrons/components'
+import { useConditionalConfirm, ModalShell } from '@opentrons/components'
 
 import * as Sessions from '../../redux/sessions'
 import {
@@ -20,7 +20,6 @@ import {
   LoadingState,
   CompleteConfirmation,
 } from '../../organisms/CalibrationPanels'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getTopPortalEl } from '../../App/portal'
 
@@ -121,7 +120,7 @@ export function CalibratePipetteOffset(
       ? PANEL_BY_STEP[currentStep]
       : null
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -162,7 +161,7 @@ export function CalibratePipetteOffset(
           defaultTipracks={instrument?.defaultTipracks}
         />
       )}
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx b/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx
index 9e2c891a5c6..1269104cec4 100644
--- a/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx
+++ b/app/src/organisms/CalibrateTipLength/AskForCalibrationBlockModal.tsx
@@ -14,12 +14,12 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  ModalShell,
 } from '@opentrons/components'
 import { useDispatch } from 'react-redux'
 
 import styles from './styles.module.css'
 import { labwareImages } from '../../organisms/CalibrationPanels/labwareImages'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getTopPortalEl } from '../../App/portal'
 import { setUseTrashSurfaceForTipCal } from '../../redux/calibration'
@@ -54,7 +54,7 @@ export function AskForCalibrationBlockModal(props: Props): JSX.Element {
   }
 
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -127,7 +127,7 @@ export function AskForCalibrationBlockModal(props: Props): JSX.Element {
           </Flex>
         </Flex>
       </Flex>
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/CalibrateTipLength/index.tsx b/app/src/organisms/CalibrateTipLength/index.tsx
index 4ad7681ee34..3fc318d91a1 100644
--- a/app/src/organisms/CalibrateTipLength/index.tsx
+++ b/app/src/organisms/CalibrateTipLength/index.tsx
@@ -7,7 +7,7 @@ import { css } from 'styled-components'
 
 import { useHost } from '@opentrons/react-api-client'
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
-import { useConditionalConfirm } from '@opentrons/components'
+import { useConditionalConfirm, ModalShell } from '@opentrons/components'
 
 import * as Sessions from '../../redux/sessions'
 import {
@@ -21,7 +21,6 @@ import {
   LoadingState,
   CompleteConfirmation,
 } from '../../organisms/CalibrationPanels'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getTopPortalEl } from '../../App/portal'
 
@@ -135,7 +134,7 @@ export function CalibrateTipLength(
       ? PANEL_BY_STEP[currentStep]
       : null
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -176,7 +175,7 @@ export function CalibrateTipLength(
           allowChangeTipRack={allowChangeTipRack}
         />
       )}
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/CalibrationTaskList/index.tsx b/app/src/organisms/CalibrationTaskList/index.tsx
index d72a5ced341..77f0590c304 100644
--- a/app/src/organisms/CalibrationTaskList/index.tsx
+++ b/app/src/organisms/CalibrationTaskList/index.tsx
@@ -14,10 +14,10 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
 import { StatusLabel } from '../../atoms/StatusLabel'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { TaskList } from '../TaskList'
 
 import {
@@ -108,7 +108,7 @@ export function CalibrationTaskList({
   }
 
   return (
-    <LegacyModal
+    <Modal
       title={`${robotName} ${t('calibration_dashboard')}`}
       onClose={() => {
         navigate(`/devices/${robotName}/robot-settings/calibration`)
@@ -183,6 +183,6 @@ export function CalibrationTaskList({
           />
         </>
       )}
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/ChangePipette/index.tsx b/app/src/organisms/ChangePipette/index.tsx
index a241ed2dd8c..a3de4f6a8dd 100644
--- a/app/src/organisms/ChangePipette/index.tsx
+++ b/app/src/organisms/ChangePipette/index.tsx
@@ -4,7 +4,12 @@ import { useSelector, useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { getPipetteNameSpecs } from '@opentrons/shared-data'
-import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components'
+import {
+  SPACING,
+  TYPOGRAPHY,
+  LegacyStyledText,
+  ModalShell,
+} from '@opentrons/components'
 
 import {
   useDispatchApiRequests,
@@ -24,7 +29,6 @@ import {
   HOME,
 } from '../../redux/robot-controls'
 
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
 import { useAttachedPipettes } from '../Devices/hooks'
@@ -322,7 +326,7 @@ export function ChangePipette(props: Props): JSX.Element | null {
     )
   }
   return (
-    <LegacyModalShell width="42.375rem">
+    <ModalShell width="42.375rem">
       <WizardHeader
         totalSteps={eightChannel ? EIGHT_CHANNEL_STEPS : SINGLE_CHANNEL_STEPS}
         currentStep={currentStepCount}
@@ -330,6 +334,6 @@ export function ChangePipette(props: Props): JSX.Element | null {
         onExit={exitWizardHeader}
       />
       {contents}
-    </LegacyModalShell>
+    </ModalShell>
   )
 }
diff --git a/app/src/organisms/CheckCalibration/index.tsx b/app/src/organisms/CheckCalibration/index.tsx
index 24e4b07abfb..595afa1b8cf 100644
--- a/app/src/organisms/CheckCalibration/index.tsx
+++ b/app/src/organisms/CheckCalibration/index.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 
 import { getPipetteModelSpecs } from '@opentrons/shared-data'
-import { useConditionalConfirm } from '@opentrons/components'
+import { useConditionalConfirm, ModalShell } from '@opentrons/components'
 
 import * as Sessions from '../../redux/sessions'
 import {
@@ -18,7 +18,6 @@ import {
   LoadingState,
   ConfirmExit,
 } from '../../organisms/CalibrationPanels'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getTopPortalEl } from '../../App/portal'
 import { ReturnTip } from './ReturnTip'
@@ -175,7 +174,7 @@ export function CheckCalibration(
       ? PANEL_BY_STEP[currentStep]
       : null
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -219,7 +218,7 @@ export function CheckCalibration(
           activePipette={activePipette}
         />
       )}
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
index 756ca93acb7..ff456be6d13 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -13,6 +13,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   LegacyStyledText,
   SPACING,
+  Modal,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
@@ -49,8 +50,7 @@ import {
 
 import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants'
 import { TertiaryButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
-import { LegacyModal } from '../../molecules/LegacyModal'
+import { OddModal } from '../../molecules/OddModal'
 import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration/'
 
 import type {
@@ -58,8 +58,8 @@ import type {
   CutoutId,
   CutoutFixtureId,
 } from '@opentrons/shared-data'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
-import type { LegacyModalProps } from '../../molecules/LegacyModal'
+import type { ModalProps } from '@opentrons/components'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface AddFixtureModalProps {
   cutoutId: CutoutId
@@ -104,7 +104,7 @@ export function AddFixtureModal({
     initialStage
   )
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('add_to_slot', {
       slotName: getCutoutDisplayName(cutoutId),
     }),
@@ -112,7 +112,7 @@ export function AddFixtureModal({
     onClick: closeModal,
   }
 
-  const modalProps: LegacyModalProps = {
+  const modalProps: ModalProps = {
     title: t('add_to_slot', {
       slotName: getCutoutDisplayName(cutoutId),
     }),
@@ -335,7 +335,7 @@ export function AddFixtureModal({
   return (
     <>
       {isOnDevice ? (
-        <Modal
+        <OddModal
           header={modalHeader}
           onOutsideClick={() => {
             if (providedFixtureOptions == null) closeModal()
@@ -350,9 +350,9 @@ export function AddFixtureModal({
               {nextStageOptions}
             </Flex>
           </Flex>
-        </Modal>
+        </OddModal>
       ) : (
-        <LegacyModal {...modalProps}>
+        <Modal {...modalProps}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
             <LegacyStyledText as="p">
               {t('add_fixture_description')}
@@ -377,7 +377,7 @@ export function AddFixtureModal({
               </LegacyStyledText>
             </Btn>
           ) : null}
-        </LegacyModal>
+        </Modal>
       )}
     </>
   )
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx
index 03fa0608e38..31b1db88fba 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx
@@ -11,9 +11,9 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface DeckConfigurationDiscardChangesModalProps {
   setShowConfirmationModal: (showConfirmationModal: boolean) => void
@@ -24,7 +24,7 @@ export function DeckConfigurationDiscardChangesModal({
 }: DeckConfigurationDiscardChangesModalProps): JSX.Element {
   const { t } = useTranslation('device_details')
   const navigate = useNavigate()
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('changes_will_be_lost'),
   }
 
@@ -34,7 +34,7 @@ export function DeckConfigurationDiscardChangesModal({
   }
 
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <LegacyStyledText as="p">
           {t('changes_will_be_lost_description')}
@@ -59,6 +59,6 @@ export function DeckConfigurationDiscardChangesModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx
index 38a5db55dc5..944a74aa394 100644
--- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx
+++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx
@@ -8,14 +8,14 @@ import {
   Flex,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
 } from '@opentrons/components'
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
-import { Modal } from '../../molecules/Modal'
-import { LegacyModal } from '../../molecules/LegacyModal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
-import type { LegacyModalProps } from '../../molecules/LegacyModal'
+import type { ModalProps } from '@opentrons/components'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 import imgSrc from '../../assets/images/on-device-display/deck_fixture_setup_qrcode.png'
 
@@ -33,7 +33,7 @@ export function DeckFixtureSetupInstructionsModal({
   isOnDevice = false,
 }: DeckFixtureSetupInstructionsModalProps): JSX.Element {
   const { i18n, t } = useTranslation(['device_details', 'shared', 'branded'])
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('deck_fixture_setup_instructions'),
     iconName: 'information',
     iconColor: COLORS.black90,
@@ -43,7 +43,7 @@ export function DeckFixtureSetupInstructionsModal({
     },
   }
 
-  const modalProps: LegacyModalProps = {
+  const modalProps: ModalProps = {
     title: t('deck_fixture_setup_instructions'),
     onClose: () => {
       setShowSetupInstructionsModal(false)
@@ -56,7 +56,7 @@ export function DeckFixtureSetupInstructionsModal({
   return (
     <>
       {isOnDevice ? (
-        <Modal
+        <OddModal
           header={modalHeader}
           onOutsideClick={() => {
             setShowSetupInstructionsModal(false)
@@ -76,9 +76,9 @@ export function DeckFixtureSetupInstructionsModal({
               <img src={imgSrc} alt={IMG_ALT} width="178px" height="178px" />
             </Flex>
           </Flex>
-        </Modal>
+        </OddModal>
       ) : (
-        <LegacyModal {...modalProps}>
+        <Modal {...modalProps}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
             <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>
               <Flex
@@ -111,7 +111,7 @@ export function DeckFixtureSetupInstructionsModal({
               {i18n.format(t('shared:close'), 'capitalize')}
             </PrimaryButton>
           </Flex>
-        </LegacyModal>
+        </Modal>
       )}
     </>
   )
diff --git a/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx b/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx
index 5479a500c37..c6289ead522 100644
--- a/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx
+++ b/app/src/organisms/Devices/ConnectionTroubleshootingModal.tsx
@@ -9,12 +9,11 @@ import {
   Link,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../../molecules/LegacyModal'
-
 const NEW_ROBOT_SETUP_SUPPORT_ARTICLE_HREF =
   'https://support.opentrons.com/s/article/Troubleshooting-connection-problems'
 const SUPPORT_EMAIL = 'support@opentrons.com'
@@ -26,10 +25,7 @@ export function ConnectionTroubleshootingModal(props: Props): JSX.Element {
   const { t } = useTranslation(['devices_landing', 'shared'])
 
   return (
-    <LegacyModal
-      title={t('why_is_this_robot_unavailable')}
-      onClose={props.onClose}
-    >
+    <Modal title={t('why_is_this_robot_unavailable')} onClose={props.onClose}>
       <Flex flexDirection={DIRECTION_COLUMN}>
         <LegacyStyledText as="p">
           {t('connection_troubleshooting_intro')}
@@ -73,7 +69,7 @@ export function ConnectionTroubleshootingModal(props: Props): JSX.Element {
           {t('shared:close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
 
diff --git a/app/src/organisms/Devices/HeaterShakerIsRunningModal/index.tsx b/app/src/organisms/Devices/HeaterShakerIsRunningModal/index.tsx
index ec54023e3b0..58dc5796f3d 100644
--- a/app/src/organisms/Devices/HeaterShakerIsRunningModal/index.tsx
+++ b/app/src/organisms/Devices/HeaterShakerIsRunningModal/index.tsx
@@ -13,9 +13,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 import { useAttachedModules } from '../hooks'
-import { LegacyModal } from '../../../molecules/LegacyModal'
 import { HeaterShakerModuleCard } from '../HeaterShakerWizard/HeaterShakerModuleCard'
 import { HEATERSHAKER_MODULE_TYPE } from '@opentrons/shared-data'
 
@@ -83,7 +83,7 @@ export const HeaterShakerIsRunningModal = (
   }
 
   return (
-    <LegacyModal onClose={closeModal} title={title}>
+    <Modal onClose={closeModal} title={title}>
       <Box>
         <HeaterShakerModuleCard module={module} />
       </Box>
@@ -110,6 +110,6 @@ export const HeaterShakerIsRunningModal = (
           {t('keep_shaking_start_run')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx
index 5864092f0ce..965b2aee53d 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx
@@ -12,11 +12,11 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../App/portal'
 import { Banner } from '../../../atoms/Banner'
-import { LegacyModal } from '../../../molecules/LegacyModal'
 
 import type { AnalysisError } from '@opentrons/shared-data'
 
@@ -67,7 +67,7 @@ export function ProtocolAnalysisErrorBanner(
       </Flex>
       {showErrorDetails
         ? createPortal(
-            <LegacyModal
+            <Modal
               type="error"
               title={t('protocol_analysis_failure')}
               onClose={handleToggleDetails}
@@ -88,7 +88,7 @@ export function ProtocolAnalysisErrorBanner(
                   {t('shared:close')}
                 </PrimaryButton>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorModal.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorModal.tsx
index e9433c57cf7..6ad5d5af302 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorModal.tsx
@@ -9,11 +9,11 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  Modal,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../App/portal'
-import { LegacyModal } from '../../../molecules/LegacyModal'
 
 import type { AnalysisError } from '@opentrons/shared-data'
 
@@ -33,7 +33,7 @@ export function ProtocolAnalysisErrorModal({
   const { t } = useTranslation(['run_details', 'shared'])
 
   return createPortal(
-    <LegacyModal
+    <Modal
       data-testid="ProtocolRunDetails_analysisErrorModal"
       type="error"
       title="Protocol analysis failure"
@@ -66,7 +66,7 @@ export function ProtocolAnalysisErrorModal({
           </LegacyStyledText>
         </PrimaryButton>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipModal.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipModal.tsx
index 7888f184de2..4de86b54f09 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipModal.tsx
@@ -11,12 +11,10 @@ import {
   StyledText,
   PrimaryButton,
   JUSTIFY_END,
+  ModalHeader,
+  ModalShell,
 } from '@opentrons/components'
 
-import {
-  LegacyModalHeader,
-  LegacyModalShell,
-} from '../../../molecules/LegacyModal'
 import { TextOnlyButton } from '../../../atoms/buttons'
 
 import type { PipetteData } from '@opentrons/api-client'
@@ -87,7 +85,7 @@ export function ProtocolDropTipModal({
 
   const buildHeader = (): JSX.Element => {
     return (
-      <LegacyModalHeader
+      <ModalHeader
         title={t('remove_attached_tips')}
         icon={buildIcon()}
         color={COLORS.black90}
@@ -97,7 +95,7 @@ export function ProtocolDropTipModal({
   }
 
   return (
-    <LegacyModalShell header={buildHeader()} css={MODAL_STYLE}>
+    <ModalShell header={buildHeader()} css={MODAL_STYLE}>
       <Flex
         padding={SPACING.spacing24}
         gridGap={SPACING.spacing24}
@@ -123,7 +121,7 @@ export function ProtocolDropTipModal({
           </PrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModalShell>
+    </ModalShell>
   )
 }
 
diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
index cabf46391be..030f2a29d86 100644
--- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx
@@ -16,15 +16,15 @@ import {
   OVERFLOW_WRAP_ANYWHERE,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../../../molecules/LegacyModal'
 import { useDownloadRunLog } from '../hooks'
 
 import type { RunError } from '@opentrons/api-client'
-import type { LegacyModalProps } from '../../../molecules/LegacyModal'
+import type { ModalProps } from '@opentrons/components'
 
 /**
  * This modal is for Desktop app
@@ -52,7 +52,7 @@ export function RunFailedModal({
   highestPriorityError,
 }: RunFailedModalProps): JSX.Element | null {
   const { i18n, t } = useTranslation(['run_details', 'shared', 'branded'])
-  const modalProps: LegacyModalProps = {
+  const modalProps: ModalProps = {
     type: 'error',
     title: t('run_failed_modal_title'),
     onClose: () => {
@@ -77,7 +77,7 @@ export function RunFailedModal({
   }
 
   return (
-    <LegacyModal {...modalProps}>
+    <Modal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN}>
         <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
           {t('error_info', {
@@ -110,7 +110,7 @@ export function RunFailedModal({
           </PrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
 
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
index f7a1112fd04..0e81df5ed5d 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/CurrentOffsetsModal.tsx
@@ -14,15 +14,13 @@ import {
   DIRECTION_COLUMN,
   SPACING,
   TYPOGRAPHY,
+  ModalHeader,
+  ModalShell,
   COLORS,
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 
 import { getIsLabwareOffsetCodeSnippetsOn } from '../../../../redux/config'
-import {
-  LegacyModalHeader,
-  LegacyModalShell,
-} from '../../../../molecules/LegacyModal'
 import { LabwareOffsetTabs } from '../../../LabwareOffsetTabs'
 import { OffsetVector } from '../../../../molecules/OffsetVector'
 import { PythonLabwareOffsetSnippet } from '../../../../molecules/PythonLabwareOffsetSnippet'
@@ -133,13 +131,10 @@ export function CurrentOffsetsModal(
     />
   )
   return (
-    <LegacyModalShell
+    <ModalShell
       maxWidth="40rem"
       header={
-        <LegacyModalHeader
-          title={t('applied_offset_data')}
-          onClose={onCloseClick}
-        />
+        <ModalHeader title={t('applied_offset_data')} onClose={onCloseClick} />
       }
     >
       <Flex
@@ -157,6 +152,6 @@ export function CurrentOffsetsModal(
           TableComponent
         )}
       </Flex>
-    </LegacyModalShell>
+    </ModalShell>
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SecureLabwareModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SecureLabwareModal.tsx
index c7f08ea90b0..6f313f9fb1c 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SecureLabwareModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SecureLabwareModal.tsx
@@ -12,9 +12,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import secureMagModBracketImage from '../../../../assets/images/secure_mag_mod_bracket.png'
 import secureTCLatchImage from '../../../../assets/images/secure_tc_latch.png'
 import { getModuleName } from '../utils/getModuleName'
@@ -32,7 +32,7 @@ export const SecureLabwareModal = (
   const { t } = useTranslation(['protocol_setup', 'shared', 'branded'])
   const moduleName = getModuleName(props.type)
   return createPortal(
-    <LegacyModal
+    <Modal
       title={t(`secure_labware_modal`, {
         name: moduleName,
       })}
@@ -94,7 +94,7 @@ export const SecureLabwareModal = (
           {t('shared:close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/HowLPCWorksModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/HowLPCWorksModal.tsx
index bfe67509891..55397d219eb 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/HowLPCWorksModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/HowLPCWorksModal.tsx
@@ -11,9 +11,9 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 
 const OFFSET_DATA_HELP_ARTICLE =
   'https://support.opentrons.com/s/article/How-Labware-Offsets-work-on-the-OT-2'
@@ -24,7 +24,7 @@ interface HowLPCWorksModalProps {
 export const HowLPCWorksModal = (props: HowLPCWorksModalProps): JSX.Element => {
   const { t } = useTranslation(['protocol_setup', 'shared', 'branded'])
   return createPortal(
-    <LegacyModal
+    <Modal
       title={t('how_offset_data_works')}
       onClose={props.onCloseClick}
       width="31.25rem"
@@ -59,7 +59,7 @@ export const HowLPCWorksModal = (props: HowLPCWorksModalProps): JSX.Element => {
           {t('shared:close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
index a2ed940a8e8..1b4fec7b8e7 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx
@@ -16,11 +16,11 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
-import { Modal } from '../../../../molecules/Modal'
+import { OddModal } from '../../../../molecules/OddModal'
 import { getIsOnDevice } from '../../../../redux/config'
 import { useMostRecentCompletedAnalysis } from '../../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { getLocationInfoNames } from '../utils/getLocationInfoNames'
 import { getSlotLabwareDefinition } from '../utils/getSlotLabwareDefinition'
 import { LiquidDetailCard } from './LiquidDetailCard'
@@ -127,7 +127,7 @@ export const LiquidsLabwareDetailsModal = (
   })
 
   return isOnDevice ? (
-    <Modal
+    <OddModal
       modalSize="large"
       onOutsideClick={closeModal}
       header={{
@@ -158,9 +158,9 @@ export const LiquidsLabwareDetailsModal = (
           </svg>
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   ) : (
-    <LegacyModal
+    <Modal
       onClose={closeModal}
       closeOnOutsideClick
       title={labwareName}
@@ -236,6 +236,6 @@ export const LiquidsLabwareDetailsModal = (
           </Flex>
         </Flex>
       </Box>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx
index 79066ce7398..3b2f70716bc 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx
@@ -16,6 +16,7 @@ import {
   LegacyStyledText,
   TEXT_ALIGN_CENTER,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 import {
   getFixtureDisplayName,
@@ -24,8 +25,7 @@ import {
   getModuleDisplayName,
 } from '@opentrons/shared-data'
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
-import { Modal } from '../../../../molecules/Modal'
+import { OddModal } from '../../../../molecules/OddModal'
 import { FixtureOption } from '../../../DeviceDetailsDeckConfiguration/AddFixtureModal'
 import { useNotifyDeckConfigurationQuery } from '../../../../resources/deck_configuration'
 import { SmallButton } from '../../../../atoms/buttons'
@@ -139,7 +139,7 @@ export const ChooseModuleToConfigureModal = (
 
   return createPortal(
     isOnDevice ? (
-      <Modal
+      <OddModal
         onOutsideClick={onCloseClick}
         header={{
           title: t('add_to_slot', { slotName: displaySlotName }),
@@ -148,9 +148,9 @@ export const ChooseModuleToConfigureModal = (
         }}
       >
         {contents}
-      </Modal>
+      </OddModal>
     ) : (
-      <LegacyModal
+      <Modal
         title={
           <Flex
             flexDirection={DIRECTION_ROW}
@@ -171,7 +171,7 @@ export const ChooseModuleToConfigureModal = (
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
           {contents}
         </Flex>
-      </LegacyModal>
+      </Modal>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
index 16742e8564b..79c1a0a4a3f 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
@@ -17,6 +17,7 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 import {
   getCutoutDisplayName,
@@ -29,8 +30,7 @@ import {
 } from '@opentrons/shared-data'
 
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
-import { Modal } from '../../../../molecules/Modal'
+import { OddModal } from '../../../../molecules/OddModal'
 import { SmallButton } from '../../../../atoms/buttons/SmallButton'
 import { useNotifyDeckConfigurationQuery } from '../../../../resources/deck_configuration'
 
@@ -175,7 +175,7 @@ export const LocationConflictModal = (
 
   return createPortal(
     isOnDevice ? (
-      <Modal
+      <OddModal
         onOutsideClick={onCloseClick}
         header={{
           title: t('deck_conflict'),
@@ -273,9 +273,9 @@ export const LocationConflictModal = (
             />
           </Flex>
         </Flex>
-      </Modal>
+      </OddModal>
     ) : (
-      <LegacyModal
+      <Modal
         title={
           <Flex
             flexDirection={DIRECTION_ROW}
@@ -371,7 +371,7 @@ export const LocationConflictModal = (
             </PrimaryButton>
           </Flex>
         </Flex>
-      </LegacyModal>
+      </Modal>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx
index 63a47ba67e7..ad229c25b9e 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx
@@ -11,6 +11,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
   LegacyStyledText,
+  Modal,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
@@ -19,7 +20,6 @@ import {
 } from '@opentrons/shared-data'
 import { TertiaryButton } from '../../../../atoms/buttons/TertiaryButton'
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { useNotifyDeckConfigurationQuery } from '../../../../resources/deck_configuration'
 
 import type { CutoutFixtureId, CutoutId } from '@opentrons/shared-data'
@@ -50,7 +50,7 @@ export const NotConfiguredModal = (
   }
   const cutoutDisplayName = getCutoutDisplayName(cutoutId)
   return createPortal(
-    <LegacyModal
+    <Modal
       title={t('add_fixture', {
         fixtureName: getFixtureDisplayName(requiredFixtureId),
         locationName: cutoutDisplayName,
@@ -79,7 +79,7 @@ export const NotConfiguredModal = (
           </Flex>
         </Flex>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx
index 876bd060922..531dc15526b 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx
@@ -11,12 +11,12 @@ import {
   Link,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../../../App/portal'
 import { Banner } from '../../../../atoms/Banner'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import multipleModuleHelp from '../../../../assets/images/Moam_modal_image.png'
 
 const HOW_TO_MULTIPLE_MODULES_HREF =
@@ -63,7 +63,7 @@ export function OT2MultipleModulesHelp(): JSX.Element {
       </Box>
       {showMultipleModulesModal
         ? createPortal(
-            <LegacyModal
+            <Modal
               title={t('multiple_modules_modal')}
               onClose={onCloseClick}
               width="44.75rem"
@@ -116,7 +116,7 @@ export function OT2MultipleModulesHelp(): JSX.Element {
                   {t('shared:close')}
                 </PrimaryButton>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx
index 25386016168..29e79772be1 100644
--- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx
@@ -13,10 +13,10 @@ import {
   Link,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../../../../molecules/LegacyModal'
 import {
   useDispatchApiRequest,
   getRequestById,
@@ -92,7 +92,7 @@ export function DeviceResetModal({
   return (
     <>
       {isRobotReachable ? (
-        <LegacyModal
+        <Modal
           type="warning"
           title={t('reset_to_factory_settings')}
           onClose={closeModal}
@@ -120,9 +120,9 @@ export function DeviceResetModal({
               </AlertPrimaryButton>
             </Flex>
           </Flex>
-        </LegacyModal>
+        </Modal>
       ) : (
-        <LegacyModal
+        <Modal
           type="warning"
           title={t('connection_to_robot_lost')}
           onClose={closeModal}
@@ -142,7 +142,7 @@ export function DeviceResetModal({
               {t('shared:close')}
             </PrimaryButton>
           </Flex>
-        </LegacyModal>
+        </Modal>
       )}
     </>
   )
diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/DisconnectModal.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/DisconnectModal.tsx
index 170e3c9ec55..57118478b27 100644
--- a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/DisconnectModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/DisconnectModal.tsx
@@ -15,10 +15,10 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  Modal,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { useRobot } from '../../../../organisms/Devices/hooks'
 import { CONNECTABLE } from '../../../../redux/discovery'
 import {
@@ -120,7 +120,7 @@ export const DisconnectModal = ({
   }, [isDisconnected])
 
   return (
-    <LegacyModal
+    <Modal
       type="warning"
       title={
         isDisconnected
@@ -182,6 +182,6 @@ export const DisconnectModal = ({
           )}
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
index 72f468cde16..5bcb3adae0e 100644
--- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx
@@ -13,11 +13,11 @@ import {
   JUSTIFY_FLEX_END,
   NewPrimaryBtn,
   SPACING,
+  Modal,
   LegacyStyledText,
 } from '@opentrons/components'
 import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
 
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { ProgressBar } from '../../../../atoms/ProgressBar'
 import { FOOTER_BUTTON_STYLE } from './UpdateRobotModal'
 import {
@@ -113,7 +113,7 @@ export function RobotUpdateProgressModal({
   )
 
   return (
-    <LegacyModal
+    <Modal
       title={`${t('updating')} ${robotName}`}
       width="40rem"
       textAlign="center"
@@ -167,7 +167,7 @@ export function RobotUpdateProgressModal({
           </LegacyStyledText>
         </Flex>
       )}
-    </LegacyModal>
+    </Modal>
   )
 }
 
diff --git a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
index b0e965a5a46..8aea8ea2b7b 100644
--- a/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
+++ b/app/src/organisms/Devices/RobotSettings/UpdateBuildroot/UpdateRobotModal.tsx
@@ -13,6 +13,7 @@ import {
   Flex,
   NewPrimaryBtn,
   NewSecondaryBtn,
+  Modal,
   BORDERS,
 } from '@opentrons/components'
 
@@ -29,7 +30,6 @@ import { ExternalLink } from '../../../../atoms/Link/ExternalLink'
 import { ReleaseNotes } from '../../../../molecules/ReleaseNotes'
 import { useIsRobotBusy } from '../../hooks'
 import { Tooltip } from '../../../../atoms/Tooltip'
-import { LegacyModal } from '../../../../molecules/LegacyModal'
 import { Banner } from '../../../../atoms/Banner'
 import { useDispatchStartRobotUpdate } from '../../../../redux/robot-update/hooks'
 
@@ -148,7 +148,7 @@ export function UpdateRobotModal({
   )
 
   return (
-    <LegacyModal
+    <Modal
       title={heading}
       onClose={closeModal}
       closeOnOutsideClick={true}
@@ -161,6 +161,6 @@ export function UpdateRobotModal({
         </UpdateAppBanner>
         <ReleaseNotes source={releaseNotes} />
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
index 0586db9966c..aaf2acf7706 100644
--- a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
+++ b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx
@@ -15,10 +15,10 @@ import {
   POSITION_ABSOLUTE,
   SPACING,
   LegacyStyledText,
+  ModalShell,
   useConditionalConfirm,
 } from '@opentrons/components'
 
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { getIsOnDevice } from '../../redux/config'
@@ -178,13 +178,13 @@ export function DropTipWizardSetupType(
         </Flex>
       </Flex>
     ) : (
-      <LegacyModalShell
+      <ModalShell
         width="47rem"
         header={<DropTipWizardHeader {...props} />}
         overflow="hidden"
       >
         <DropTipWizardContent {...props} />
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/DropTipWizardFlows/TipsAttachedModal.tsx b/app/src/organisms/DropTipWizardFlows/TipsAttachedModal.tsx
index 0cb1872b196..980367fe2e0 100644
--- a/app/src/organisms/DropTipWizardFlows/TipsAttachedModal.tsx
+++ b/app/src/organisms/DropTipWizardFlows/TipsAttachedModal.tsx
@@ -15,11 +15,11 @@ import { ApiHostProvider } from '@opentrons/react-api-client'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { DropTipWizardFlows, useDropTipWizardFlows } from '.'
 
 import type { HostConfig } from '@opentrons/api-client'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 import type { PipetteWithTip } from '.'
 
 interface TipsAttachedModalProps {
@@ -45,7 +45,7 @@ const TipsAttachedModal = NiceModal.create(
     const { mount, specs } = head(pipettesWithTip) as PipetteWithTip
     const { showDTWiz, toggleDTWiz } = useDropTipWizardFlows()
 
-    const tipsAttachedHeader: ModalHeaderBaseProps = {
+    const tipsAttachedHeader: OddModalHeaderBaseProps = {
       title: t('remove_any_attached_tips'),
       iconName: 'ot-alert',
       iconColor: COLORS.red50,
@@ -61,7 +61,7 @@ const TipsAttachedModal = NiceModal.create(
 
     return (
       <ApiHostProvider {...host} hostname={host?.hostname ?? null}>
-        <Modal header={tipsAttachedHeader}>
+        <OddModal header={tipsAttachedHeader}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
             <LegacyStyledText as="p">
               <Trans
@@ -89,7 +89,7 @@ const TipsAttachedModal = NiceModal.create(
               />
             </Flex>
           </Flex>
-        </Modal>
+        </OddModal>
         {showDTWiz ? (
           <DropTipWizardFlows
             instrumentModelSpecs={specs}
diff --git a/app/src/organisms/EmergencyStop/EstopMissingModal.tsx b/app/src/organisms/EmergencyStop/EstopMissingModal.tsx
index 7c1379f27cd..380d1f0f5ab 100644
--- a/app/src/organisms/EmergencyStop/EstopMissingModal.tsx
+++ b/app/src/organisms/EmergencyStop/EstopMissingModal.tsx
@@ -10,15 +10,15 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModal } from '../../molecules/LegacyModal'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { getIsOnDevice } from '../../redux/config'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
-import type { LegacyModalProps } from '../../molecules/LegacyModal'
+import type { ModalProps } from '@opentrons/components'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 // Note (07/13/2023) After the launch, we will unify the modal components into one component.
 // Then TouchScreenModal and DesktopModal will be TouchScreenContent and DesktopContent that only render each content.
@@ -66,7 +66,7 @@ function TouchscreenModal({
   robotName,
 }: EstopMissingTouchscreenModalProps): JSX.Element {
   const { t } = useTranslation('device_settings')
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('estop_missing'),
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
@@ -76,7 +76,7 @@ function TouchscreenModal({
   }
 
   return (
-    <Modal {...modalProps}>
+    <OddModal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
         <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightBold}>
           {t('connect_the_estop_to_continue')}
@@ -85,7 +85,7 @@ function TouchscreenModal({
           {t('estop_missing_description', { robotName: robotName })}
         </LegacyStyledText>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
@@ -106,7 +106,7 @@ function DesktopModal({
     closeModal()
   }
 
-  const modalProps: LegacyModalProps = {
+  const modalProps: ModalProps = {
     type: 'error',
     title: t('estop_missing'),
     onClose: handleCloseModal,
@@ -116,7 +116,7 @@ function DesktopModal({
   }
 
   return (
-    <LegacyModal {...modalProps}>
+    <Modal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
         <LegacyStyledText as="h1">
           {t('connect_the_estop_to_continue')}
@@ -125,6 +125,6 @@ function DesktopModal({
           {t('estop_missing_description', { robotName: robotName })}
         </LegacyStyledText>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
index 78b0c440931..0c7d190e172 100644
--- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
+++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx
@@ -15,6 +15,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   PrimaryButton,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
@@ -25,15 +26,14 @@ import { getTopPortalEl } from '../../App/portal'
 import { Banner } from '../../atoms/Banner'
 import { ListItem } from '../../atoms/ListItem'
 import { SmallButton } from '../../atoms/buttons'
-import { LegacyModal } from '../../molecules/LegacyModal'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { getIsOnDevice } from '../../redux/config'
 
 import type {
-  ModalHeaderBaseProps,
+  OddModalHeaderBaseProps,
   ModalSize,
-} from '../../molecules/Modal/types'
-import type { LegacyModalProps } from '../../molecules/LegacyModal'
+} from '../../molecules/OddModal/types'
+import type { ModalProps } from '@opentrons/components'
 
 // Note (07/13/2023) After the launch, we will unify the modal components into one component.
 // Then TouchScreenModal and DesktopModal will be TouchScreenContent and DesktopContent that only render each content.
@@ -76,7 +76,7 @@ function TouchscreenModal({
   const { t } = useTranslation(['device_settings', 'branded'])
   const [isResuming, setIsResuming] = React.useState<boolean>(false)
   const { acknowledgeEstopDisengage } = useAcknowledgeEstopDisengageMutation()
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('estop_pressed'),
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
@@ -91,7 +91,7 @@ function TouchscreenModal({
     closeModal()
   }
   return (
-    <Modal {...modalProps}>
+    <OddModal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing40}>
         <LegacyStyledText as="p" fontWeight>
           {t('branded:estop_pressed_description')}
@@ -123,7 +123,7 @@ function TouchscreenModal({
           onClick={handleClick}
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
@@ -143,7 +143,7 @@ function DesktopModal({
     closeModal()
   }
 
-  const modalProps: LegacyModalProps = {
+  const modalProps: ModalProps = {
     type: 'error',
     title: t('estop_pressed'),
     onClose: handleCloseModal,
@@ -166,7 +166,7 @@ function DesktopModal({
   }
 
   return (
-    <LegacyModal {...modalProps}>
+    <Modal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
         <Banner type={isEngaged ? 'error' : 'success'}>
           {isEngaged ? t('estop_engaged') : t('estop_disengaged')}
@@ -190,6 +190,6 @@ function DesktopModal({
           </PrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
index f1921b83d02..0cf31872bcc 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx
@@ -8,25 +8,23 @@ import {
   StyledText,
   SPACING,
   COLORS,
+  ModalShell,
+  ModalHeader,
   BORDERS,
   DIRECTION_COLUMN,
 } from '@opentrons/components'
 
 import { useErrorName } from '../hooks'
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 import { getModalPortalEl, getTopPortalEl } from '../../../App/portal'
 import { ERROR_KINDS } from '../constants'
 import { InlineNotification } from '../../../atoms/InlineNotification'
 import { StepInfo } from './StepInfo'
 import { getErrorKind } from '../utils'
-import {
-  LegacyModalShell,
-  LegacyModalHeader,
-} from '../../../molecules/LegacyModal'
 
 import type { RobotType } from '@opentrons/shared-data'
 import type { IconProps } from '@opentrons/components'
-import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../../molecules/OddModal/types'
 import type { ERUtilsResults } from '../hooks'
 import type { ErrorRecoveryFlowsProps } from '..'
 import type { DesktopSizeType } from '../types'
@@ -68,7 +66,7 @@ export function ErrorDetailsModal(props: ErrorDetailsModalProps): JSX.Element {
     }
   }
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: errorName,
     hasExitIcon: true,
   }
@@ -104,7 +102,7 @@ export function ErrorDetailsModal(props: ErrorDetailsModalProps): JSX.Element {
 
 type ErrorDetailsModalType = ErrorDetailsModalProps & {
   children: React.ReactNode
-  modalHeader: ModalHeaderBaseProps
+  modalHeader: OddModalHeaderBaseProps
   toggleModal: () => void
   desktopType: DesktopSizeType
 }
@@ -126,7 +124,7 @@ export function ErrorDetailsModalDesktop(
 
   const buildHeader = (): JSX.Element => {
     return (
-      <LegacyModalHeader
+      <ModalHeader
         onClose={toggleModal}
         title={t('error_details')}
         icon={buildIcon()}
@@ -137,7 +135,7 @@ export function ErrorDetailsModalDesktop(
   }
 
   return (
-    <LegacyModalShell
+    <ModalShell
       header={buildHeader()}
       css={
         desktopType === 'desktop-small'
@@ -158,7 +156,7 @@ export function ErrorDetailsModalDesktop(
           <StepInfo {...props} desktopStyle="bodyDefaultRegular" />
         </Flex>
       </Flex>
-    </LegacyModalShell>
+    </ModalShell>
   )
 }
 
@@ -168,7 +166,7 @@ export function ErrorDetailsModalODD(
   const { children, modalHeader, toggleModal } = props
 
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       onOutsideClick={toggleModal}
       zIndex={15}
@@ -185,7 +183,7 @@ export function ErrorDetailsModalODD(
           <StepInfo {...props} desktopStyle="bodyDefaultRegular" />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TipSelectionModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TipSelectionModal.tsx
index cd11c9cf33b..ea8f911ede5 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/TipSelectionModal.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/TipSelectionModal.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 import { getTopPortalEl } from '../../../App/portal'
 import { TipSelection } from './TipSelection'
 
-import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../../molecules/OddModal/types'
 import type { TipSelectionProps } from './TipSelection'
 
 type TipSelectionModalProps = TipSelectionProps & {
@@ -19,16 +19,16 @@ export function TipSelectionModal(
   const { toggleModal } = props
   const { t } = useTranslation('error_recovery')
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('change_tip_pickup_location'),
     hasExitIcon: true,
   }
 
   if (props.isOnDevice) {
     return createPortal(
-      <Modal header={modalHeader} onOutsideClick={toggleModal} zIndex={15}>
+      <OddModal header={modalHeader} onOutsideClick={toggleModal} zIndex={15}>
         <TipSelection {...props} />
-      </Modal>,
+      </OddModal>,
       getTopPortalEl()
     )
   } else {
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
index b63464b4382..9e851aca35f 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/ErrorDetailsModal.test.tsx
@@ -7,7 +7,7 @@ import { i18n } from '../../../../i18n'
 import { mockRecoveryContentProps } from '../../__fixtures__'
 import { InlineNotification } from '../../../../atoms/InlineNotification'
 import { StepInfo } from '../StepInfo'
-import { Modal } from '../../../../molecules/Modal'
+import { OddModal } from '../../../../molecules/OddModal'
 import {
   useErrorDetailsModal,
   ErrorDetailsModal,
@@ -18,8 +18,8 @@ vi.mock('react-dom', () => ({
   ...vi.importActual('react-dom'),
   createPortal: vi.fn((element, container) => element),
 }))
-vi.mock('../../../../molecules/Modal', () => ({
-  Modal: vi.fn(({ children }) => <div>{children}</div>),
+vi.mock('../../../../molecules/OddModal', () => ({
+  OddModal: vi.fn(({ children }) => <div>{children}</div>),
 }))
 
 vi.mock('../../../../atoms/InlineNotification')
@@ -71,7 +71,7 @@ describe('ErrorDetailsModal', () => {
 
   it('renders the ODD modal with the correct content', () => {
     render(props)
-    expect(vi.mocked(Modal)).toHaveBeenCalledWith(
+    expect(vi.mocked(OddModal)).toHaveBeenCalledWith(
       expect.objectContaining({
         header: {
           title: 'Error',
diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
index 223558a4aa4..93f74c21efc 100644
--- a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
@@ -13,7 +13,7 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import type { Subsystem } from '@opentrons/api-client'
 
 interface UpdateInProgressModalProps {
@@ -36,7 +36,7 @@ export function UpdateInProgressModal(
   const { t } = useTranslation('firmware_update')
 
   return (
-    <Modal>
+    <OddModal>
       <Flex
         height="17.25rem"
         width="100%"
@@ -63,6 +63,6 @@ export function UpdateInProgressModal(
           spin
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx
index c4a669ce747..32ef5a6763e 100644
--- a/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx
@@ -17,12 +17,12 @@ import {
 import { LEFT, RIGHT } from '@opentrons/shared-data'
 import { getTopPortalEl } from '../../App/portal'
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { UpdateInProgressModal } from './UpdateInProgressModal'
 import { UpdateResultsModal } from './UpdateResultsModal'
 import type { Subsystem } from '@opentrons/api-client'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface UpdateNeededModalProps {
   onClose: () => void
@@ -70,14 +70,14 @@ export function UpdateNeededModal(props: UpdateNeededModalProps): JSX.Element {
   if (subsystem === 'pipette_left') mount = LEFT
   else if (subsystem === 'pipette_right') mount = RIGHT
 
-  const updateNeededHeader: ModalHeaderBaseProps = {
+  const updateNeededHeader: OddModalHeaderBaseProps = {
     title: t('update_needed'),
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
   }
 
   let modalContent = (
-    <Modal header={updateNeededHeader}>
+    <OddModal header={updateNeededHeader}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <LegacyStyledText as="p" marginBottom={SPACING.spacing60}>
           <Trans
@@ -101,7 +101,7 @@ export function UpdateNeededModal(props: UpdateNeededModalProps): JSX.Element {
           width="100%"
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
   if (
     (status === 'updating' || status === 'queued') &&
diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx
index 8eb1783d908..cd5dad33f02 100644
--- a/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx
+++ b/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx
@@ -12,11 +12,11 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { usePipetteModelSpecs } from '../../resources/instruments/hooks'
 
 import type { InstrumentData, PipetteData } from '@opentrons/api-client'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface UpdateResultsModalProps {
   isSuccess: boolean
@@ -31,7 +31,7 @@ export function UpdateResultsModal(
   const { isSuccess, shouldExit, onClose, instrument } = props
   const { i18n, t } = useTranslation(['firmware_update', 'shared', 'branded'])
 
-  const updateFailedHeader: ModalHeaderBaseProps = {
+  const updateFailedHeader: OddModalHeaderBaseProps = {
     title: t('update_failed'),
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
@@ -51,7 +51,7 @@ export function UpdateResultsModal(
   return (
     <>
       {!isSuccess ? (
-        <Modal header={updateFailedHeader}>
+        <OddModal header={updateFailedHeader}>
           <Flex flexDirection={DIRECTION_COLUMN}>
             <LegacyStyledText as="p" marginBottom={SPACING.spacing32}>
               {t('branded:firmware_update_download_logs')}
@@ -66,9 +66,9 @@ export function UpdateResultsModal(
               width="100%"
             />
           </Flex>
-        </Modal>
+        </OddModal>
       ) : (
-        <Modal>
+        <OddModal>
           <Flex
             flexDirection={DIRECTION_COLUMN}
             gridGap={SPACING.spacing32}
@@ -122,7 +122,7 @@ export function UpdateResultsModal(
               width="100%"
             />
           </Flex>
-        </Modal>
+        </OddModal>
       )}
     </>
   )
diff --git a/app/src/organisms/GripperWizardFlows/index.tsx b/app/src/organisms/GripperWizardFlows/index.tsx
index aafc36acf9e..69068d9eb8c 100644
--- a/app/src/organisms/GripperWizardFlows/index.tsx
+++ b/app/src/organisms/GripperWizardFlows/index.tsx
@@ -9,13 +9,13 @@ import {
   POSITION_ABSOLUTE,
   COLORS,
   BORDERS,
+  ModalShell,
 } from '@opentrons/components'
 import {
   useCreateMaintenanceCommandMutation,
   useDeleteMaintenanceRunMutation,
 } from '@opentrons/react-api-client'
 import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
@@ -392,9 +392,9 @@ export const GripperWizard = (
         {modalContent}
       </Flex>
     ) : (
-      <LegacyModalShell width="48rem" header={wizardHeader}>
+      <ModalShell width="48rem" header={wizardHeader}>
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/HowCalibrationWorksModal/index.tsx b/app/src/organisms/HowCalibrationWorksModal/index.tsx
index 3c73fce3d3f..9cdf4f18f4b 100644
--- a/app/src/organisms/HowCalibrationWorksModal/index.tsx
+++ b/app/src/organisms/HowCalibrationWorksModal/index.tsx
@@ -13,6 +13,7 @@ import {
   SPACING,
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
+  Modal,
   LegacyStyledText,
 } from '@opentrons/components'
 
@@ -20,7 +21,6 @@ import { getTopPortalEl } from '../../App/portal'
 import RobotCalHelpImage from '../../assets/images/robot_calibration_help.png'
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
 import { Divider } from '../../atoms/structure'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 const ROBOT_CAL_HELP_ARTICLE =
   'https://support.opentrons.com/s/article/How-positional-calibration-works-on-the-OT-2'
@@ -33,7 +33,7 @@ export function HowCalibrationWorksModal({
 }: HowCalibrationWorksModalProps): JSX.Element {
   const { t } = useTranslation(['protocol_setup', 'shared'])
   return createPortal(
-    <LegacyModal
+    <Modal
       title={t('robot_cal_help_title')}
       onClose={onCloseClick}
       maxHeight="28.125rem"
@@ -109,7 +109,7 @@ export function HowCalibrationWorksModal({
           {t('shared:close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx
index 54883f2546c..a54f63268fe 100644
--- a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx
+++ b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx
@@ -10,10 +10,10 @@ import {
   OVERFLOW_SCROLL,
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
-import type { AttachedModule } from '@opentrons/api-client'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { ListItem } from '../../atoms/ListItem'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { AttachedModule } from '@opentrons/api-client'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 export interface IncompatibleModuleODDModalBodyProps {
   modules: AttachedModule[]
 }
@@ -22,11 +22,11 @@ export function IncompatibleModuleODDModalBody({
   modules,
 }: IncompatibleModuleODDModalBodyProps): JSX.Element {
   const { t } = useTranslation('incompatible_modules')
-  const incompatibleModuleHeader: ModalHeaderBaseProps = {
+  const incompatibleModuleHeader: OddModalHeaderBaseProps = {
     title: capitalize(t('incompatible_modules_attached') as string),
   }
   return (
-    <Modal header={incompatibleModuleHeader}>
+    <OddModal header={incompatibleModuleHeader}>
       <Flex flexDirection={DIRECTION_COLUMN} width="100%">
         <LegacyStyledText as="p" marginBottom={SPACING.spacing32}>
           <Trans t={t} i18nKey="remove_before_running_protocol" />
@@ -50,6 +50,6 @@ export function IncompatibleModuleODDModalBody({
           ))}
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/InterventionModal/index.tsx b/app/src/organisms/InterventionModal/index.tsx
index 1e7cb9e8475..03fc58d175e 100644
--- a/app/src/organisms/InterventionModal/index.tsx
+++ b/app/src/organisms/InterventionModal/index.tsx
@@ -21,7 +21,7 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { InterventionModal as InterventionModalMolecule } from '../../molecules/InterventionModal'
 import { getIsOnDevice } from '../../redux/config'
 import { PauseInterventionContent } from './PauseInterventionContent'
@@ -117,7 +117,7 @@ export function InterventionModal({
   // TODO(bh, 2023-7-18): this is a one-off modal implementation for desktop
   // reimplement when design system shares a modal component between desktop/ODD
   return isOnDevice ? (
-    <Modal
+    <OddModal
       border={`${BORDERS.borderRadius8} ${BORDERS.styleSolid} ${COLORS.blue50}`}
       modalSize="large"
       header={{
@@ -141,7 +141,7 @@ export function InterventionModal({
           buttonType="secondary"
         />
       </Flex>
-    </Modal>
+    </OddModal>
   ) : (
     <InterventionModalMolecule
       iconHeading={<LegacyStyledText as="h1">{headerTitle}</LegacyStyledText>}
diff --git a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx
index d84dcd1e2bc..ef0a8c0cbf4 100644
--- a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx
+++ b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx
@@ -19,6 +19,7 @@ import {
   POSITION_ABSOLUTE,
   POSITION_RELATIVE,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
   useConditionalConfirm,
@@ -28,7 +29,6 @@ import {
 import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { Divider } from '../../atoms/structure'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import {
   deleteCustomLabwareFile,
@@ -139,7 +139,7 @@ export function CustomLabwareOverflowMenu(
       )}
       {showDeleteConfirmation &&
         createPortal(
-          <LegacyModal
+          <Modal
             type="warning"
             title={t('delete_this_labware')}
             onClose={handleCancelModal}
@@ -169,7 +169,7 @@ export function CustomLabwareOverflowMenu(
                 </AlertPrimaryButton>
               </Flex>
             </Flex>
-          </LegacyModal>,
+          </Modal>,
           getTopPortalEl()
         )}
     </Flex>
diff --git a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
index e6a57928419..54b0503c19d 100644
--- a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
+++ b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx
@@ -15,12 +15,12 @@ import {
   RESPONSIVENESS,
   SPACING,
   LegacyStyledText,
+  ModalShell,
   TEXT_ALIGN_CENTER,
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { i18n } from '../../i18n'
 
@@ -35,7 +35,7 @@ export function FatalErrorModal(props: FatalErrorModalProps): JSX.Element {
   const { errorMessage, shouldUseMetalProbe, onClose } = props
   const { t } = useTranslation(['labware_position_check', 'shared', 'branded'])
   return createPortal(
-    <LegacyModalShell
+    <ModalShell
       width="47rem"
       header={
         <WizardHeader
@@ -83,7 +83,7 @@ export function FatalErrorModal(props: FatalErrorModalProps): JSX.Element {
           {t('shared:exit')}
         </PrimaryButton>
       </Flex>
-    </LegacyModalShell>,
+    </ModalShell>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
index e311e198cc0..e11c60cdf50 100644
--- a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
+++ b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx
@@ -13,6 +13,7 @@ import {
   Icon,
   JUSTIFY_SPACE_BETWEEN,
   PrimaryButton,
+  ModalShell,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -26,7 +27,6 @@ import { NeedHelpLink } from '../../CalibrationPanels'
 import { useSelector } from 'react-redux'
 import { TwoUpTileLayout } from '../TwoUpTileLayout'
 import { getTopPortalEl } from '../../../App/portal'
-import { LegacyModalShell } from '../../../molecules/LegacyModal'
 import { SmallButton } from '../../../atoms/buttons'
 import { CALIBRATION_PROBE } from '../../PipetteWizardFlows/constants'
 import { TerseOffsetTable } from '../ResultsSummary'
@@ -181,7 +181,7 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element {
       </Btn>
       {showOffsetsTable
         ? createPortal(
-            <LegacyModalShell
+            <ModalShell
               width="60rem"
               height="33.5rem"
               padding={SPACING.spacing32}
@@ -213,7 +213,7 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element {
                   labwareDefinitions={labwareDefinitions}
                 />
               </Box>
-            </LegacyModalShell>,
+            </ModalShell>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
index 12476b96002..81e89741546 100644
--- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
+++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx
@@ -18,6 +18,7 @@ import {
   SecondaryButton,
   SPACING,
   LegacyStyledText,
+  ModalShell,
   TYPOGRAPHY,
   WELL_LABEL_OPTIONS,
 } from '@opentrons/components'
@@ -34,7 +35,6 @@ import levelProbeWithTip from '../../assets/images/lpc_level_probe_with_tip.svg'
 import levelProbeWithLabware from '../../assets/images/lpc_level_probe_with_labware.svg'
 import { getIsOnDevice } from '../../redux/config'
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { SmallButton } from '../../atoms/buttons'
 import { NeedHelpLink } from '../CalibrationPanels'
 import { JogControls } from '../../molecules/JogControls'
@@ -193,7 +193,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
           </Flex>
           {showFullJogControls
             ? createPortal(
-                <LegacyModalShell
+                <ModalShell
                   width="60rem"
                   height="33.5rem"
                   padding={SPACING.spacing32}
@@ -229,7 +229,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
                     }
                     isOnDevice={true}
                   />
-                </LegacyModalShell>,
+                </ModalShell>,
                 getTopPortalEl()
               )
             : null}
diff --git a/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx b/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx
index 32662dd7391..9b6e232af68 100644
--- a/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx
+++ b/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx
@@ -4,7 +4,7 @@ import isEqual from 'lodash/isEqual'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-import { useConditionalConfirm } from '@opentrons/components'
+import { useConditionalConfirm, ModalShell } from '@opentrons/components'
 import {
   useCreateLabwareOffsetMutation,
   useCreateMaintenanceCommandMutation,
@@ -16,7 +16,6 @@ import { getTopPortalEl } from '../../App/portal'
 import { IntroScreen } from './IntroScreen'
 import { ExitConfirmation } from './ExitConfirmation'
 import { CheckItem } from './CheckItem'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { getIsOnDevice } from '../../redux/config'
 import { AttachProbe } from './AttachProbe'
@@ -431,14 +430,14 @@ export const LabwarePositionCheckComponent = (
   )
   return createPortal(
     isOnDevice ? (
-      <LegacyModalShell fullPage>
+      <ModalShell fullPage>
         {wizardHeader}
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
-      <LegacyModalShell width="47rem" header={wizardHeader}>
+      <ModalShell width="47rem" header={wizardHeader}>
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
index 9df50e041c5..8797f0aebc0 100644
--- a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
+++ b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx
@@ -10,12 +10,12 @@ import {
   JUSTIFY_FLEX_END,
   Link,
   PrimaryButton,
+  Modal,
   SPACING,
   LegacyStyledText,
   TEXT_ALIGN_CENTER,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { updateConfigValue } from '../../redux/config'
 import type { Dispatch } from '../../redux/types'
 import type { UpdateConfigValueAction } from '../../redux/config/types'
@@ -50,7 +50,7 @@ export const ConfirmAttachmentModal = (
   }
 
   return (
-    <LegacyModal
+    <Modal
       title={t('confirm_heater_shaker_modal_attachment')}
       onClose={onCloseClick}
     >
@@ -129,6 +129,6 @@ export const ConfirmAttachmentModal = (
           </PrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/ModuleCard/ErrorInfo.tsx b/app/src/organisms/ModuleCard/ErrorInfo.tsx
index 4e838451d20..5bb41c4e72d 100644
--- a/app/src/organisms/ModuleCard/ErrorInfo.tsx
+++ b/app/src/organisms/ModuleCard/ErrorInfo.tsx
@@ -12,6 +12,7 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
+  Modal,
   JUSTIFY_FLEX_END,
   PrimaryButton,
   SPACING,
@@ -20,7 +21,6 @@ import {
 } from '@opentrons/components'
 import { Banner } from '../../atoms/Banner'
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 import type { AttachedModule } from '../../redux/modules/types'
 
@@ -82,7 +82,7 @@ export function ErrorInfo(props: ErrorInfoProps): JSX.Element | null {
       </Flex>
       {showErrorDetails
         ? createPortal(
-            <LegacyModal
+            <Modal
               type="error"
               title={t('module_name_error', {
                 moduleName: getModuleDisplayName(attachedModule.moduleModel),
@@ -110,7 +110,7 @@ export function ErrorInfo(props: ErrorInfoProps): JSX.Element | null {
                   {t('shared:close')}
                 </PrimaryButton>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/ModuleCard/FirmwareUpdateFailedModal.tsx b/app/src/organisms/ModuleCard/FirmwareUpdateFailedModal.tsx
index d7000b0a15b..d1af72560b8 100644
--- a/app/src/organisms/ModuleCard/FirmwareUpdateFailedModal.tsx
+++ b/app/src/organisms/ModuleCard/FirmwareUpdateFailedModal.tsx
@@ -11,9 +11,9 @@ import {
   PrimaryButton,
   SPACING,
   LegacyStyledText,
+  Modal,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 import type { AttachedModule } from '../../redux/modules/types'
 
@@ -43,7 +43,7 @@ export const FirmwareUpdateFailedModal = (
   )
 
   return (
-    <LegacyModal title={title} onClose={onCloseClick}>
+    <Modal title={title} onClose={onCloseClick}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         data-testid={`FirmwareUpdateFailedModal_body_text_${module.serialNumber}`}
@@ -68,6 +68,6 @@ export const FirmwareUpdateFailedModal = (
           {t('shared:close')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/ModuleCard/ModuleSetupModal.tsx b/app/src/organisms/ModuleCard/ModuleSetupModal.tsx
index 2c5b032c698..f389cc878ea 100644
--- a/app/src/organisms/ModuleCard/ModuleSetupModal.tsx
+++ b/app/src/organisms/ModuleCard/ModuleSetupModal.tsx
@@ -9,12 +9,12 @@ import {
   Flex,
   Icon,
   Link,
+  Modal,
   PrimaryButton,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 
 const MODULE_SETUP_URL = 'https://support.opentrons.com/s/modules'
@@ -29,7 +29,7 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
   const { t, i18n } = useTranslation(['protocol_setup', 'shared', 'branded'])
 
   return createPortal(
-    <LegacyModal
+    <Modal
       title={t('modal_instructions_title', { moduleName: moduleDisplayName })}
       onClose={props.close}
       width="668px"
@@ -68,7 +68,7 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
           {i18n.format(t('shared:close'), 'capitalize')}
         </PrimaryButton>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/ModuleWizardFlows/index.tsx b/app/src/organisms/ModuleWizardFlows/index.tsx
index f0b542b4069..c6642af4308 100644
--- a/app/src/organisms/ModuleWizardFlows/index.tsx
+++ b/app/src/organisms/ModuleWizardFlows/index.tsx
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDeleteMaintenanceRunMutation } from '@opentrons/react-api-client'
-import { COLORS, LegacyStyledText } from '@opentrons/components'
+import { COLORS, LegacyStyledText, ModalShell } from '@opentrons/components'
 import {
   getModuleType,
   getModuleDisplayName,
@@ -14,7 +14,6 @@ import {
   getDeckDefFromRobotType,
   FLEX_ROBOT_TYPE,
 } from '@opentrons/shared-data'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { useAttachedPipettesFromInstrumentsQuery } from '../../organisms/Devices/hooks'
@@ -361,14 +360,14 @@ export const ModuleWizardFlows = (
 
   return createPortal(
     isOnDevice ? (
-      <LegacyModalShell>
+      <ModalShell>
         {wizardHeader}
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
-      <LegacyModalShell width="47rem" height="auto" header={wizardHeader}>
+      <ModalShell width="47rem" height="auto" header={wizardHeader}>
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx
index d0ac255b744..5be5488fd03 100644
--- a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx
+++ b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx
@@ -12,11 +12,11 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { restartRobot } from '../../redux/robot-admin'
 
 import type { Dispatch } from '../../redux/types'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface RestartRobotConfirmationModalProps {
   robotName: string
@@ -29,7 +29,7 @@ export function RestartRobotConfirmationModal({
   setShowRestartRobotConfirmationModal,
 }: RestartRobotConfirmationModalProps): JSX.Element {
   const { i18n, t } = useTranslation(['device_settings', 'shared'])
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('restart_now'),
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -37,7 +37,7 @@ export function RestartRobotConfirmationModal({
   const dispatch = useDispatch<Dispatch>()
 
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -73,6 +73,6 @@ export function RestartRobotConfirmationModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx
index b4a532f095b..8709d9bdca5 100644
--- a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx
+++ b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx
@@ -13,9 +13,9 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface AlternativeSecurityTypeModalProps {
   setShowAlternativeSecurityTypeModal: (
@@ -28,7 +28,7 @@ export function AlternativeSecurityTypeModal({
 }: AlternativeSecurityTypeModalProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'branded'])
   const navigate = useNavigate()
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('alternative_security_types'),
     hasExitIcon: true,
   }
@@ -41,7 +41,7 @@ export function AlternativeSecurityTypeModal({
   }
 
   return (
-    <Modal
+    <OddModal
       modalSize="small"
       header={modalHeader}
       onOutsideClick={handleCloseModal}
@@ -66,6 +66,6 @@ export function AlternativeSecurityTypeModal({
           onClick={handleClick}
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx
index 6e732ce55f9..ae1bd9bbca2 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx
@@ -13,13 +13,13 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 
 export function CancelingRunModal(): JSX.Element {
   const { t, i18n } = useTranslation('run_details')
 
   return (
-    <Modal>
+    <OddModal>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         justifyContent={JUSTIFY_CENTER}
@@ -41,6 +41,6 @@ export function CancelingRunModal(): JSX.Element {
           {i18n.format(t('canceling_run_dot'), 'capitalize')}
         </LegacyStyledText>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx
index 6a674b6835b..0a858bf0dfb 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx
@@ -19,14 +19,14 @@ import {
 } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../../atoms/buttons'
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 import { useTrackProtocolRunEvent } from '../../../organisms/Devices/hooks'
 import { useRunStatus } from '../../../organisms/RunTimeControl/hooks'
 import { ANALYTICS_PROTOCOL_RUN_ACTION } from '../../../redux/analytics'
 import { getLocalRobot } from '../../../redux/discovery'
 import { CancelingRunModal } from './CancelingRunModal'
 
-import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../../molecules/OddModal/types'
 
 interface ConfirmCancelRunModalProps {
   runId: string
@@ -68,7 +68,7 @@ export function ConfirmCancelRunModal({
   const navigate = useNavigate()
   const [isCanceling, setIsCanceling] = React.useState(false)
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('cancel_run_modal_heading'),
     hasExitIcon: false,
     iconName: 'ot-alert',
@@ -105,7 +105,7 @@ export function ConfirmCancelRunModal({
   return isCanceling || isDismissing ? (
     <CancelingRunModal />
   ) : (
-    <Modal
+    <OddModal
       modalSize="medium"
       header={modalHeader}
       onOutsideClick={() => {
@@ -146,6 +146,6 @@ export function ConfirmCancelRunModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
index c4db8a35360..d87f4030695 100644
--- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
+++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
@@ -17,10 +17,10 @@ import {
 import { useStopRunMutation } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../../atoms/buttons'
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
 import type { RunError } from '@opentrons/api-client'
+import type { OddModalHeaderBaseProps } from '../../../molecules/OddModal/types'
 
 interface RunFailedModalProps {
   runId: string
@@ -39,7 +39,7 @@ export function RunFailedModal({
   const [isCanceling, setIsCanceling] = React.useState(false)
 
   if (errors == null || errors.length === 0) return null
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('run_failed_modal_title'),
   }
 
@@ -61,7 +61,7 @@ export function RunFailedModal({
     })
   }
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       onOutsideClick={() => {
         setShowRunFailedModal(false)
@@ -119,7 +119,7 @@ export function RunFailedModal({
           disabled={isCanceling}
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
diff --git a/app/src/organisms/OpenDoorAlertModal/index.tsx b/app/src/organisms/OpenDoorAlertModal/index.tsx
index e8771b5ef9e..fad1ee54143 100644
--- a/app/src/organisms/OpenDoorAlertModal/index.tsx
+++ b/app/src/organisms/OpenDoorAlertModal/index.tsx
@@ -14,12 +14,12 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../App/portal'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
 export function OpenDoorAlertModal(): JSX.Element {
   const { t } = useTranslation('run_details')
   return createPortal(
-    <Modal>
+    <OddModal>
       <Flex
         backgroundColor={COLORS.grey35}
         borderRadius={BORDERS.borderRadius12}
@@ -49,7 +49,7 @@ export function OpenDoorAlertModal(): JSX.Element {
           </LegacyStyledText>
         </Flex>
       </Flex>
-    </Modal>,
+    </OddModal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
index 9dd937ed1d4..a31076bea9d 100644
--- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
+++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx
@@ -23,6 +23,7 @@ import {
   RESPONSIVENESS,
   SPACING,
   TYPOGRAPHY,
+  ModalShell,
 } from '@opentrons/components'
 import {
   EIGHT_CHANNEL,
@@ -35,7 +36,6 @@ import { i18n } from '../../i18n'
 import { getIsOnDevice } from '../../redux/config'
 import { getTopPortalEl } from '../../App/portal'
 import { SmallButton } from '../../atoms/buttons'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { ModalContentOneColSimpleButtons } from '../../molecules/InterventionModal'
 import singleChannelAndEightChannel from '../../assets/images/change-pip/1_and_8_channel.png'
@@ -151,7 +151,7 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => {
   )
   return createPortal(
     isOnDevice ? (
-      <LegacyModalShell height="100%" header={wizardHeader}>
+      <ModalShell height="100%" header={wizardHeader}>
         <Flex
           flexDirection={DIRECTION_COLUMN}
           width="100%"
@@ -200,13 +200,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => {
             </Flex>
           )}
         </Flex>
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
-      <LegacyModalShell
-        width="47rem"
-        height="min-content"
-        header={wizardHeader}
-      >
+      <ModalShell width="47rem" height="min-content" header={wizardHeader}>
         {showExitConfirmation ? (
           <ExitModal
             goBack={() => {
@@ -275,7 +271,7 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => {
             </PrimaryButton>
           </Flex>
         )}
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/PipetteWizardFlows/index.tsx b/app/src/organisms/PipetteWizardFlows/index.tsx
index e3d6758ffcb..b94c5d03c6a 100644
--- a/app/src/organisms/PipetteWizardFlows/index.tsx
+++ b/app/src/organisms/PipetteWizardFlows/index.tsx
@@ -4,7 +4,11 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import NiceModal, { useModal } from '@ebay/nice-modal-react'
 
-import { useConditionalConfirm, COLORS } from '@opentrons/components'
+import {
+  useConditionalConfirm,
+  COLORS,
+  ModalShell,
+} from '@opentrons/components'
 import { LEFT, NINETY_SIX_CHANNEL, RIGHT } from '@opentrons/shared-data'
 import {
   useHost,
@@ -17,7 +21,6 @@ import {
   useChainMaintenanceCommands,
 } from '../../resources/runs'
 import { useNotifyCurrentMaintenanceRun } from '../../resources/maintenance_runs'
-import { LegacyModalShell } from '../../molecules/LegacyModal'
 import { getTopPortalEl } from '../../App/portal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { FirmwareUpdateModal } from '../FirmwareUpdateModal'
@@ -418,12 +421,12 @@ export const PipetteWizardFlows = (
 
   return createPortal(
     isOnDevice ? (
-      <LegacyModalShell>
+      <ModalShell>
         {wizardHeader}
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
-      <LegacyModalShell
+      <ModalShell
         width="47rem"
         height={
           //  changing modal height for now on BeforeBeginning 96 channel attach flow
@@ -437,7 +440,7 @@ export const PipetteWizardFlows = (
         header={wizardHeader}
       >
         {modalContent}
-      </LegacyModalShell>
+      </ModalShell>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/ProtocolAnalysisFailure/index.tsx b/app/src/organisms/ProtocolAnalysisFailure/index.tsx
index 0552db6b8bf..d04faeeb156 100644
--- a/app/src/organisms/ProtocolAnalysisFailure/index.tsx
+++ b/app/src/organisms/ProtocolAnalysisFailure/index.tsx
@@ -8,6 +8,7 @@ import {
   Btn,
   Flex,
   JUSTIFY_FLEX_END,
+  Modal,
   JUSTIFY_SPACE_BETWEEN,
   PrimaryButton,
   SPACING,
@@ -19,7 +20,6 @@ import {
 import { analyzeProtocol } from '../../redux/protocol-storage'
 import { Banner } from '../../atoms/Banner'
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 import type { Dispatch } from '../../redux/types'
 interface ProtocolAnalysisFailureProps {
@@ -90,7 +90,7 @@ export function ProtocolAnalysisFailure(
       </Flex>
       {showErrorDetails
         ? createPortal(
-            <LegacyModal
+            <Modal
               type="error"
               title={t('protocol_analysis_failure')}
               onClose={handleClickHideDetails}
@@ -109,7 +109,7 @@ export function ProtocolAnalysisFailure(
                   {t('shared:close')}
                 </PrimaryButton>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
index f88e017d0f1..7d68ba67ec1 100644
--- a/app/src/organisms/ProtocolDetails/index.tsx
+++ b/app/src/organisms/ProtocolDetails/index.tsx
@@ -31,6 +31,7 @@ import {
   Tabs,
   SIZE_1,
   SIZE_5,
+  Modal,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -51,7 +52,6 @@ import {
 
 import { getTopPortalEl } from '../../App/portal'
 import { Divider } from '../../atoms/structure'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import {
   useTrackEvent,
   ANALYTICS_PROTOCOL_PROCEED_TO_RUN,
@@ -389,14 +389,14 @@ export function ProtocolDetails(
     <>
       {showDeckViewModal
         ? createPortal(
-            <LegacyModal
+            <Modal
               title={t('deck_view')}
               onClose={() => {
                 setShowDeckViewModal(false)
               }}
             >
               {deckMap}
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx b/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx
index e985386d461..2c3b5c2f708 100644
--- a/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx
+++ b/app/src/organisms/ProtocolSetupLabware/LabwareMapViewModal.tsx
@@ -8,7 +8,7 @@ import {
   THERMOCYCLER_MODULE_V1,
 } from '@opentrons/shared-data'
 
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { getStandardDeckViewLayerBlockList } from '../Devices/ProtocolRun/utils/getStandardDeckViewLayerBlockList'
 import { getLabwareRenderInfo } from '../Devices/ProtocolRun/utils/getLabwareRenderInfo'
 
@@ -18,7 +18,7 @@ import type {
   LabwareDefinition2,
 } from '@opentrons/shared-data'
 import type { LoadedLabwareByAdapter } from '@opentrons/api-client'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 import type { AttachedProtocolModuleMatch } from '../ProtocolSetupModulesAndDeck/utils'
 
 interface LabwareMapViewModalProps {
@@ -51,7 +51,7 @@ export function LabwareMapViewModal(
       ? getLabwareRenderInfo(mostRecentAnalysis, deckDef)
       : {}
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('map_view'),
     hasExitIcon: true,
   }
@@ -112,7 +112,11 @@ export function LabwareMapViewModal(
   )
 
   return (
-    <Modal header={modalHeader} modalSize="large" onOutsideClick={onCloseClick}>
+    <OddModal
+      header={modalHeader}
+      modalSize="large"
+      onOutsideClick={onCloseClick}
+    >
       <BaseDeck
         deckConfig={deckConfig}
         deckLayerBlocklist={getStandardDeckViewLayerBlockList(FLEX_ROBOT_TYPE)}
@@ -120,6 +124,6 @@ export function LabwareMapViewModal(
         labwareOnDeck={labwareLocations}
         modulesOnDeck={modulesOnDeck}
       />
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
index 9c962f55d7b..9e3db66b466 100644
--- a/app/src/organisms/ProtocolSetupLabware/index.tsx
+++ b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -39,7 +39,7 @@ import {
 import { FloatingActionButton } from '../../atoms/buttons'
 import { ODDBackButton } from '../../molecules/ODDBackButton'
 import { getTopPortalEl } from '../../App/portal'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
 import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import { getLabwareSetupItemGroups } from '../../pages/Protocols/utils'
@@ -215,7 +215,7 @@ export function ProtocolSetupLabware({
             />
           ) : null}
           {showLabwareDetailsModal && selectedLabware != null ? (
-            <Modal
+            <OddModal
               onOutsideClick={() => {
                 setShowLabwareDetailsModal(false)
                 setSelectedLabware(null)
@@ -253,7 +253,7 @@ export function ProtocolSetupLabware({
                   </LegacyStyledText>
                 </Flex>
               </Flex>
-            </Modal>
+            </OddModal>
           ) : null}
         </>,
         getTopPortalEl()
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx
index 13ade7df2d0..fad47a89ccc 100644
--- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx
+++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModulesAndDeckMapViewModal.tsx
@@ -7,12 +7,12 @@ import {
   getSimplestDeckConfigForProtocol,
 } from '@opentrons/shared-data'
 
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { ModuleInfo } from '../Devices/ModuleInfo'
 import { getStandardDeckViewLayerBlockList } from '../Devices/ProtocolRun/utils/getStandardDeckViewLayerBlockList'
 
 import type { CompletedProtocolAnalysis } from '@opentrons/shared-data'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 import type { AttachedProtocolModuleMatch } from './utils'
 
 // Note (kk:10/26/2023) once we are ready for removing ff, we will be able to update props
@@ -31,7 +31,7 @@ export function ModulesAndDeckMapViewModal({
 }: ModulesAndDeckMapViewModalProps): JSX.Element | null {
   const { t } = useTranslation('protocol_setup')
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('map_view'),
     hasExitIcon: true,
   }
@@ -54,7 +54,7 @@ export function ModulesAndDeckMapViewModal({
   }))
 
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       modalSize="large"
       onOutsideClick={() => {
@@ -68,6 +68,6 @@ export function ModulesAndDeckMapViewModal({
         labwareOnDeck={[]}
         modulesOnDeck={modulesOnDeck}
       />
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx
index 7c1880e38f7..569c59f6c72 100644
--- a/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx
+++ b/app/src/organisms/ProtocolSetupModulesAndDeck/SetupInstructionsModal.tsx
@@ -12,9 +12,9 @@ import {
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 import imgSrc from '../../assets/images/on-device-display/setup_instructions_qr_code.png'
 
@@ -27,7 +27,7 @@ export function SetupInstructionsModal({
   setShowSetupInstructionsModal,
 }: SetupInstructionsModalProps): JSX.Element {
   const { i18n, t } = useTranslation(['protocol_setup', 'branded'])
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: i18n.format(t('setup_instructions'), 'capitalize'),
     iconName: 'information',
     iconColor: COLORS.black90,
@@ -35,7 +35,7 @@ export function SetupInstructionsModal({
   }
 
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       onOutsideClick={() => {
         setShowSetupInstructionsModal(false)
@@ -67,6 +67,6 @@ export function SetupInstructionsModal({
           height="178px"
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx
index 3fba85759a6..f450ce2e3cb 100644
--- a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx
+++ b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx
@@ -11,9 +11,9 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface AnalysisFailedModalProps {
   errors: string[]
@@ -28,7 +28,7 @@ export function AnalysisFailedModal({
 }: AnalysisFailedModalProps): JSX.Element {
   const { t } = useTranslation('protocol_setup')
   const navigate = useNavigate()
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('protocol_analysis_failed'),
     iconName: 'information',
     iconColor: COLORS.black90,
@@ -40,7 +40,7 @@ export function AnalysisFailedModal({
   }
 
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       onOutsideClick={() => {
         setShowAnalysisFailedModal(false)
@@ -78,6 +78,6 @@ export function AnalysisFailedModal({
           buttonType="alert"
         />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx
index 6f79a24534b..2ecc6021618 100644
--- a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx
+++ b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx
@@ -12,10 +12,10 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface ResetValuesModalProps {
   runTimeParametersOverrides: RunTimeParameter[]
@@ -30,7 +30,7 @@ export function ResetValuesModal({
 }: ResetValuesModalProps): JSX.Element {
   const { t } = useTranslation(['protocol_setup', 'shared'])
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('reset_parameter_values'),
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -52,7 +52,7 @@ export function ResetValuesModal({
   }
 
   return (
-    <Modal {...modalProps}>
+    <OddModal {...modalProps}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <LegacyStyledText as="p">
           {t('reset_parameter_values_body')}
@@ -75,6 +75,6 @@ export function ResetValuesModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
index c9b7c4bb2b6..81e3dd97b4d 100644
--- a/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
+++ b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx
@@ -9,10 +9,10 @@ import {
   JUSTIFY_FLEX_END,
   Link,
   SPACING,
+  Modal,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 interface ConfirmDeleteProtocolModalProps {
   cancelDeleteProtocol: React.MouseEventHandler<HTMLAnchorElement> | undefined
@@ -24,7 +24,7 @@ export function ConfirmDeleteProtocolModal(
 ): JSX.Element {
   const { t } = useTranslation(['protocol_list', 'shared'])
   return (
-    <LegacyModal
+    <Modal
       type="warning"
       onClose={props.cancelDeleteProtocol}
       title={t('delete_this_protocol')}
@@ -51,6 +51,6 @@ export function ConfirmDeleteProtocolModal(
           </AlertPrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx b/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx
index 4577fb3c5a8..c0b0c46e25f 100644
--- a/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx
+++ b/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx
@@ -8,7 +8,7 @@ import {
   DIRECTION_COLUMN,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { SmallButton } from '../../atoms/buttons'
 
 interface ConfirmExitModalProps {
@@ -20,7 +20,7 @@ export const ConfirmExitModal = (props: ConfirmExitModalProps): JSX.Element => {
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
 
   return (
-    <Modal
+    <OddModal
       header={{
         title: t('exit_quick_transfer'),
         iconName: 'alert-circle',
@@ -49,6 +49,6 @@ export const ConfirmExitModal = (props: ConfirmExitModalProps): JSX.Element => {
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx
index 2ec9d1e8b51..9fd1de9766e 100644
--- a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx
+++ b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx
@@ -8,7 +8,7 @@ import {
   DIRECTION_COLUMN,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { SmallButton } from '../../atoms/buttons'
 import { NameQuickTransfer } from './NameQuickTransfer'
 
@@ -24,7 +24,7 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
   return showNameTransfer ? (
     <NameQuickTransfer onSave={props.onSave} />
   ) : (
-    <Modal
+    <OddModal
       header={{
         title: t('run_quick_transfer_now'),
         iconName: 'alert-circle',
@@ -58,6 +58,6 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx
index 71378fb6eb2..da2119fdd0d 100644
--- a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx
+++ b/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx
@@ -12,13 +12,13 @@ import {
 } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../App/portal'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { ChildNavigation } from '../../organisms/ChildNavigation'
 import { useToaster } from '../../organisms/ToasterOven'
 import { WellSelection } from '../../organisms/WellSelection'
 
 import type { SmallButton } from '../../atoms/buttons'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 import type {
   QuickTransferWizardState,
   QuickTransferWizardAction,
@@ -200,7 +200,7 @@ function NumberWellsSelectedErrorModal({
   selectionUnits: string
 }): JSX.Element {
   const { t } = useTranslation('quick_transfer')
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('well_selection'),
     iconName: 'information',
     iconColor: COLORS.black90,
@@ -211,7 +211,7 @@ function NumberWellsSelectedErrorModal({
   }
 
   return (
-    <Modal
+    <OddModal
       header={modalHeader}
       onOutsideClick={() => {
         setShowNumberWellsSelectedErrorModal(false)
@@ -224,6 +224,6 @@ function NumberWellsSelectedErrorModal({
           selectionUnits,
         })}
       </LegacyStyledText>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx b/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx
index 57dfdb05975..c07cef244ed 100644
--- a/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx
+++ b/app/src/organisms/RobotSettingsCalibration/DeckCalibrationConfirmModal.tsx
@@ -8,11 +8,11 @@ import {
   JUSTIFY_FLEX_END,
   Link,
   PrimaryButton,
+  Modal,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { LegacyModal } from '../../molecules/LegacyModal'
 
 interface DeckCalibrationConfirmModalProps {
   confirm: () => unknown
@@ -26,7 +26,7 @@ export function DeckCalibrationConfirmModal({
   const { t } = useTranslation(['device_settings', 'shared'])
 
   return (
-    <LegacyModal
+    <Modal
       type="warning"
       title={t('deck_calibration_modal_title')}
       onClose={cancel}
@@ -65,6 +65,6 @@ export function DeckCalibrationConfirmModal({
           </PrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>
+    </Modal>
   )
 }
diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
index 0a41d19f07b..6ad9e59987d 100644
--- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
@@ -16,7 +16,7 @@ import {
 } from '@opentrons/components'
 
 import { MediumButton, SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { ChildNavigation } from '../../organisms/ChildNavigation'
 import {
   getResetConfigOptions,
@@ -28,7 +28,7 @@ import { useDispatchApiRequest } from '../../redux/robot-api'
 import type { Dispatch, State } from '../../redux/types'
 import type { ResetConfigRequest } from '../../redux/robot-admin/types'
 import type { SetSettingOption } from '../../pages/RobotSettingsDashboard'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface LabelProps {
   isSelected?: boolean
@@ -326,14 +326,14 @@ export const ConfirmClearDataModal = ({
   confirmClearData,
 }: ConfirmClearDataModalProps): JSX.Element => {
   const { t } = useTranslation(['device_settings', 'shared'])
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('confirm_device_reset_heading'),
     hasExitIcon: false,
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
   }
   return (
-    <Modal
+    <OddModal
       modalSize="medium"
       header={modalHeader}
       onOutsideClick={cancelClearData}
@@ -366,6 +366,6 @@ export const ConfirmClearDataModal = ({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx
index 1433ac39729..980bf9e5991 100644
--- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx
@@ -14,9 +14,9 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { Modal } from '../../../molecules/Modal'
+import { OddModal } from '../../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../../molecules/OddModal/types'
 
 interface NetworkDetailsModalProps {
   setShowNetworkDetailModal: (showNetworkDetailModal: boolean) => void
@@ -37,7 +37,7 @@ export function NetworkDetailsModal({
 }: NetworkDetailsModalProps): JSX.Element {
   const { t } = useTranslation(['device_settings', 'shared'])
   const networkName = ssid != null ? ssid : t('shared:no_data')
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: securityType != null ? networkName : t('ethernet'),
     hasExitIcon: true,
     iconName: securityType != null ? 'wifi' : 'ethernet',
@@ -45,7 +45,7 @@ export function NetworkDetailsModal({
   }
 
   return (
-    <Modal
+    <OddModal
       modalSize="medium"
       header={modalHeader}
       onOutsideClick={() => {
@@ -64,7 +64,7 @@ export function NetworkDetailsModal({
         <ListItem itemName={t('subnet_mask')} itemValue={subnetMask} />
         <ListItem itemName={t('mac_address')} itemValue={macAddress} />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
index 9b6467af878..028ca40b1cc 100644
--- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
+++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersionModal.tsx
@@ -13,9 +13,9 @@ import {
 import { SmallButton } from '../../atoms/buttons'
 import { InlineNotification } from '../../atoms/InlineNotification'
 import { ReleaseNotes } from '../../molecules/ReleaseNotes'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface RobotSystemVersionModalProps {
   version: string
@@ -31,14 +31,14 @@ export function RobotSystemVersionModal({
   const { t } = useTranslation(['device_settings', 'shared'])
   const navigate = useNavigate()
 
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('robot_system_version_available', {
       releaseVersion: version,
     }),
   }
 
   return (
-    <Modal header={modalHeader} modalSize="large">
+    <OddModal header={modalHeader} modalSize="large">
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -74,6 +74,6 @@ export function RobotSystemVersionModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/organisms/RunDetails/ConfirmCancelModal.tsx b/app/src/organisms/RunDetails/ConfirmCancelModal.tsx
index b0627b45eba..8931b815bae 100644
--- a/app/src/organisms/RunDetails/ConfirmCancelModal.tsx
+++ b/app/src/organisms/RunDetails/ConfirmCancelModal.tsx
@@ -10,6 +10,7 @@ import {
   Icon,
   JUSTIFY_FLEX_END,
   Link,
+  Modal,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -21,7 +22,6 @@ import {
 import { useStopRunMutation } from '@opentrons/react-api-client'
 
 import { getTopPortalEl } from '../../App/portal'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { useTrackProtocolRunEvent, useIsFlex } from '../Devices/hooks'
 import { useRunStatus } from '../RunTimeControl/hooks'
 import { ANALYTICS_PROTOCOL_RUN_ACTION } from '../../redux/analytics'
@@ -70,7 +70,7 @@ export function ConfirmCancelModal(
   }, [runStatus, onClose])
 
   return createPortal(
-    <LegacyModal
+    <Modal
       type="warning"
       onClose={isCanceling ? undefined : onClose}
       title={t('cancel_run_modal_heading')}
@@ -107,7 +107,7 @@ export function ConfirmCancelModal(
           </AlertPrimaryButton>
         </Flex>
       </Flex>
-    </LegacyModal>,
+    </Modal>,
     getTopPortalEl()
   )
 }
diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
index f6a6a58aad0..d8cc732d445 100644
--- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx
+++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
@@ -16,9 +16,9 @@ import {
 
 import { getTopPortalEl } from '../../App/portal'
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface TakeoverModalProps {
   title: string
@@ -38,7 +38,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
   } = props
   const { t } = useTranslation(['shared', 'branded'])
 
-  const terminateHeader: ModalHeaderBaseProps = {
+  const terminateHeader: OddModalHeaderBaseProps = {
     title: t('terminate') + '?',
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -47,7 +47,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
   return createPortal(
     showConfirmTerminateModal ? (
       //    confirm terminate modal
-      <Modal header={terminateHeader}>
+      <OddModal header={terminateHeader}>
         <Flex flexDirection={DIRECTION_COLUMN}>
           <LegacyStyledText as="p" marginBottom={SPACING.spacing32}>
             {t('branded:confirm_terminate')}
@@ -71,9 +71,9 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
             />
           </Flex>
         </Flex>
-      </Modal>
+      </OddModal>
     ) : (
-      <Modal>
+      <OddModal>
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing40}
@@ -115,7 +115,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
             {t('terminate')}
           </LegacyStyledText>
         </Flex>
-      </Modal>
+      </OddModal>
     ),
     getTopPortalEl()
   )
diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx
index 431bc144a31..510bf824e75 100644
--- a/app/src/organisms/UpdateAppModal/index.tsx
+++ b/app/src/organisms/UpdateAppModal/index.tsx
@@ -16,6 +16,7 @@ import {
   SecondaryButton,
   SPACING,
   LegacyStyledText,
+  Modal,
 } from '@opentrons/components'
 
 import {
@@ -27,7 +28,6 @@ import {
 
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
 import { ReleaseNotes } from '../../molecules/ReleaseNotes'
-import { LegacyModal } from '../../molecules/LegacyModal'
 import { Banner } from '../../atoms/Banner'
 import { ProgressBar } from '../../atoms/ProgressBar'
 import { useRemoveActiveAppUpdateToast } from '../Alerts'
@@ -148,7 +148,7 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
   return (
     <>
       {error != null ? (
-        <LegacyModal
+        <Modal
           title={UPDATE_ERROR}
           onClose={() => {
             closeModal(true)
@@ -156,10 +156,10 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
           css={LEGACY_MODAL_STYLE}
         >
           <PlaceholderError errorMessage={error.message} />
-        </LegacyModal>
+        </Modal>
       ) : null}
       {(downloading || downloaded) && error == null ? (
-        <LegacyModal
+        <Modal
           title={t('branded:opentrons_app_update')}
           css={LEGACY_MODAL_STYLE}
         >
@@ -176,10 +176,10 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
               outerStyles={UPDATE_PROGRESS_BAR_STYLE}
             />
           </Flex>
-        </LegacyModal>
+        </Modal>
       ) : null}
       {!downloading && !downloaded && error == null ? (
-        <LegacyModal
+        <Modal
           title={t('branded:opentrons_app_update_available')}
           onClose={() => {
             closeModal(true)
@@ -195,7 +195,7 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element {
             </UpdateAppBanner>
             <ReleaseNotes source={releaseNotes} />
           </Flex>
-        </LegacyModal>
+        </Modal>
       ) : null}
     </>
   )
diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateDeck.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateDeck.tsx
index 8007f9edbf9..5a99adc3df8 100644
--- a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateDeck.tsx
+++ b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateDeck.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { ModalShell } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModalShell } from '../../../../molecules/LegacyModal'
 import { WizardHeader } from '../../../../molecules/WizardHeader'
 import { CalibrateDeck } from '../../../../organisms/CalibrateDeck'
 import { LoadingState } from '../../../../organisms/CalibrationPanels'
@@ -106,12 +106,12 @@ export function useDashboardCalibrateDeck(
 
   let Wizard: JSX.Element | null = createPortal(
     startingSession ? (
-      <LegacyModalShell
+      <ModalShell
         width="47rem"
         header={<WizardHeader title={t('deck_calibration')} />}
       >
         <LoadingState />
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
       <CalibrateDeck
         session={deckCalSession}
diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibratePipOffset.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibratePipOffset.tsx
index fd0bdca34d6..6ec2595899f 100644
--- a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibratePipOffset.tsx
+++ b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibratePipOffset.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { ModalShell } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../../App/portal'
-import { LegacyModalShell } from '../../../../molecules/LegacyModal'
 import { WizardHeader } from '../../../../molecules/WizardHeader'
 import { CalibratePipetteOffset } from '../../../../organisms/CalibratePipetteOffset'
 import { LoadingState } from '../../../../organisms/CalibrationPanels'
@@ -163,12 +163,12 @@ export function useDashboardCalibratePipOffset(
 
   let Wizard: JSX.Element | null = createPortal(
     startingSession ? (
-      <LegacyModalShell
+      <ModalShell
         width="47rem"
         header={<WizardHeader title={t('pipette_offset_calibration')} />}
       >
         <LoadingState />
-      </LegacyModalShell>
+      </ModalShell>
     ) : (
       <CalibratePipetteOffset
         session={pipOffsetCalSession}
diff --git a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx
index 86a4eee93b3..8827c617564 100644
--- a/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx
+++ b/app/src/pages/Devices/CalibrationDashboard/hooks/useDashboardCalibrateTipLength.tsx
@@ -2,10 +2,10 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { ModalShell } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../../App/portal'
 import { WizardHeader } from '../../../../molecules/WizardHeader'
-import { LegacyModalShell } from '../../../../molecules/LegacyModal'
 import { CalibrateTipLength } from '../../../../organisms/CalibrateTipLength'
 import { AskForCalibrationBlockModal } from '../../../../organisms/CalibrateTipLength/AskForCalibrationBlockModal'
 import { LoadingState } from '../../../../organisms/CalibrationPanels'
@@ -169,12 +169,12 @@ export function useDashboardCalibrateTipLength(
         />
       ) : null}
       {startingSession ? (
-        <LegacyModalShell
+        <ModalShell
           width="47rem"
           header={<WizardHeader title={t('tip_length_calibration')} />}
         >
           <LoadingState />
-        </LegacyModalShell>
+        </ModalShell>
       ) : null}
       <CalibrateTipLength
         session={tipLengthCalibrationSession}
diff --git a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx
index a453f07935c..05d2e5168dd 100644
--- a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx
+++ b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx
@@ -10,10 +10,10 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  Modal,
 } from '@opentrons/components'
 
 import { getTopPortalEl } from '../../../App/portal'
-import { LegacyModal } from '../../../molecules/LegacyModal'
 import { ExternalLink } from '../../../atoms/Link/ExternalLink'
 
 const NEW_FLEX_SETUP_SUPPORT_ARTICLE_HREF =
@@ -40,7 +40,7 @@ export function NewRobotSetupHelp(): JSX.Element {
       </Link>
       {showNewRobotHelpModal
         ? createPortal(
-            <LegacyModal
+            <Modal
               title={t('how_to_setup_a_robot')}
               onClose={() => {
                 setShowNewRobotHelpModal(false)
@@ -66,7 +66,7 @@ export function NewRobotSetupHelp(): JSX.Element {
                   {t('shared:close')}
                 </PrimaryButton>
               </Flex>
-            </LegacyModal>,
+            </Modal>,
             getTopPortalEl()
           )
         : null}
diff --git a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx
index 7971b9f8237..b9abf223247 100644
--- a/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx
+++ b/app/src/pages/ProtocolDashboard/DeleteProtocolConfirmationModal.tsx
@@ -18,10 +18,10 @@ import {
 import { useHost, useProtocolQuery } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface DeleteProtocolConfirmationModalProps {
   protocolId: string
@@ -35,7 +35,7 @@ export function DeleteProtocolConfirmationModal({
   const { i18n, t } = useTranslation(['protocol_list', 'shared'])
   const { makeSnackbar } = useToaster()
   const [showIcon, setShowIcon] = React.useState<boolean>(false)
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('delete_this_protocol'),
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -86,7 +86,7 @@ export function DeleteProtocolConfirmationModal({
     }
   }
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -116,7 +116,7 @@ export function DeleteProtocolConfirmationModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
diff --git a/app/src/pages/ProtocolDashboard/LongPressModal.tsx b/app/src/pages/ProtocolDashboard/LongPressModal.tsx
index 535b754259e..8a64bd5db09 100644
--- a/app/src/pages/ProtocolDashboard/LongPressModal.tsx
+++ b/app/src/pages/ProtocolDashboard/LongPressModal.tsx
@@ -8,7 +8,7 @@ import { useCreateRunMutation } from '@opentrons/react-api-client'
 import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants'
 import { MenuList } from '../../atoms/MenuList'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
-import { SmallModalChildren } from '../../molecules/Modal'
+import { SmallModalChildren } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 import { getPinnedProtocolIds, updateConfigValue } from '../../redux/config'
 
diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
index ed29d904895..64aff2cac97 100644
--- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
@@ -30,13 +30,13 @@ import {
 import { deleteProtocol, deleteRun, getProtocol } from '@opentrons/api-client'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '../../resources/runs'
 
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 const REFETCH_INTERVAL = 5000
 
@@ -135,7 +135,7 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
     setIsRequiredCSV,
   ])
 
-  const failedAnalysisHeader: ModalHeaderBaseProps = {
+  const failedAnalysisHeader: OddModalHeaderBaseProps = {
     title: i18n.format(t('protocol_analysis_failed'), 'capitalize'),
     hasExitIcon: true,
     onClick: () => {
@@ -266,7 +266,7 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
         )}
         {(showFailedAnalysisModal ||
           (isFailedAnalysis && longpress.isLongPressed)) && (
-          <Modal
+          <OddModal
             header={failedAnalysisHeader}
             onOutsideClick={() => {
               setShowFailedAnalysisModal(false)
@@ -317,7 +317,7 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
                 disabled={showIcon}
               />
             </Flex>
-          </Modal>
+          </OddModal>
         )}
       </Flex>
     </Flex>
diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx
index d474328840f..73f9a5bd590 100644
--- a/app/src/pages/ProtocolDetails/index.tsx
+++ b/app/src/pages/ProtocolDetails/index.tsx
@@ -39,7 +39,7 @@ import {
   ProtocolDetailsSectionContentSkeleton,
 } from '../../organisms/OnDeviceDisplay/ProtocolDetails'
 import { useHardwareStatusText } from '../../organisms/OnDeviceDisplay/RobotDashboard/hooks'
-import { Modal, SmallModalChildren } from '../../molecules/Modal'
+import { OddModal, SmallModalChildren } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 import {
   getApplyHistoricOffsets,
@@ -60,7 +60,7 @@ import { Liquids } from './Liquids'
 import { formatTimeWithUtcLabel } from '../../resources/runs'
 
 import type { Protocol } from '@opentrons/api-client'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 import type { Dispatch } from '../../redux/types'
 import type { OnDeviceRouteParams } from '../../App/types'
 
@@ -445,7 +445,7 @@ export function ProtocolDetails(): JSX.Element | null {
         protocolRecord?.data.files[0].name
       : null
 
-  const deleteModalHeader: ModalHeaderBaseProps = {
+  const deleteModalHeader: OddModalHeaderBaseProps = {
     title: 'Delete this protocol?',
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -462,7 +462,7 @@ export function ProtocolDetails(): JSX.Element | null {
       {showConfirmDeleteProtocol ? (
         <Flex alignItems={ALIGN_CENTER}>
           {!isProtocolFetching ? (
-            <Modal
+            <OddModal
               modalSize="medium"
               onOutsideClick={() => {
                 setShowConfirmationDeleteProtocol(false)
@@ -493,7 +493,7 @@ export function ProtocolDetails(): JSX.Element | null {
                   />
                 </Flex>
               </Flex>
-            </Modal>
+            </OddModal>
           ) : null}
         </Flex>
       ) : null}
diff --git a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx
index 2ce3f4f7c2f..bf39d517cca 100644
--- a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx
+++ b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx
@@ -9,9 +9,9 @@ import {
 } from '@opentrons/components'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface ConfirmAttachedModalProps {
   onCloseClick: () => void
@@ -25,7 +25,7 @@ export function ConfirmAttachedModal({
   onConfirmClick,
 }: ConfirmAttachedModalProps): JSX.Element {
   const { i18n, t } = useTranslation(['protocol_setup', 'shared'])
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('confirm_heater_shaker_module_modal_title'),
     hasExitIcon: true,
   }
@@ -36,7 +36,7 @@ export function ConfirmAttachedModal({
   }
 
   return (
-    <Modal header={modalHeader} onOutsideClick={onCloseClick}>
+    <OddModal header={modalHeader} onOutsideClick={onCloseClick}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <LegacyStyledText as="p">
           {t('confirm_heater_shaker_module_modal_description')}
@@ -58,6 +58,6 @@ export function ConfirmAttachedModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx b/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx
index 3bf006598b1..8b81936b7b6 100644
--- a/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx
+++ b/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx
@@ -20,10 +20,10 @@ import {
 import { useHost, useProtocolQuery } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 interface DeleteTransferConfirmationModalProps {
   transferId: string
@@ -38,7 +38,7 @@ export function DeleteTransferConfirmationModal({
   const navigate = useNavigate()
   const { makeSnackbar } = useToaster()
   const [showIcon, setShowIcon] = React.useState<boolean>(false)
-  const modalHeader: ModalHeaderBaseProps = {
+  const modalHeader: OddModalHeaderBaseProps = {
     title: t('delete_this_transfer'),
     iconName: 'ot-alert',
     iconColor: COLORS.yellow50,
@@ -91,7 +91,7 @@ export function DeleteTransferConfirmationModal({
     }
   }
   return (
-    <Modal header={modalHeader}>
+    <OddModal header={modalHeader}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
@@ -121,7 +121,7 @@ export function DeleteTransferConfirmationModal({
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
 
diff --git a/app/src/pages/QuickTransferDashboard/IntroductoryModal.tsx b/app/src/pages/QuickTransferDashboard/IntroductoryModal.tsx
index 560ceac280a..4d42324958a 100644
--- a/app/src/pages/QuickTransferDashboard/IntroductoryModal.tsx
+++ b/app/src/pages/QuickTransferDashboard/IntroductoryModal.tsx
@@ -8,7 +8,7 @@ import {
   ALIGN_CENTER,
   TEXT_ALIGN_CENTER,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { SmallButton } from '../../atoms/buttons'
 
 import imgSrc from '../../assets/images/on-device-display/odd-abstract-6.png'
@@ -23,7 +23,7 @@ export const IntroductoryModal = (
   const { t } = useTranslation(['quick_transfer', 'shared'])
 
   return (
-    <Modal modalSize="small">
+    <OddModal modalSize="small">
       <Flex
         flexDirection={DIRECTION_COLUMN}
         alignItems={ALIGN_CENTER}
@@ -51,6 +51,6 @@ export const IntroductoryModal = (
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/pages/QuickTransferDashboard/LongPressModal.tsx b/app/src/pages/QuickTransferDashboard/LongPressModal.tsx
index b856d1296cf..5490cd9e1de 100644
--- a/app/src/pages/QuickTransferDashboard/LongPressModal.tsx
+++ b/app/src/pages/QuickTransferDashboard/LongPressModal.tsx
@@ -8,7 +8,7 @@ import { useCreateRunMutation } from '@opentrons/react-api-client'
 import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants'
 import { MenuList } from '../../atoms/MenuList'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
-import { SmallModalChildren } from '../../molecules/Modal'
+import { SmallModalChildren } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 import {
   getPinnedQuickTransferIds,
diff --git a/app/src/pages/QuickTransferDashboard/PipetteNotAttachedErrorModal.tsx b/app/src/pages/QuickTransferDashboard/PipetteNotAttachedErrorModal.tsx
index a738a728139..ac1142364c4 100644
--- a/app/src/pages/QuickTransferDashboard/PipetteNotAttachedErrorModal.tsx
+++ b/app/src/pages/QuickTransferDashboard/PipetteNotAttachedErrorModal.tsx
@@ -8,7 +8,7 @@ import {
   DIRECTION_COLUMN,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { SmallButton } from '../../atoms/buttons'
 
 interface PipetteNotAttachedErrorModalProps {
@@ -22,7 +22,7 @@ export const PipetteNotAttachedErrorModal = (
   const { i18n, t } = useTranslation(['quick_transfer', 'shared', 'branded'])
 
   return (
-    <Modal
+    <OddModal
       header={{
         title: t('branded:attach_a_pipette'),
         iconName: 'alert-circle',
@@ -51,6 +51,6 @@ export const PipetteNotAttachedErrorModal = (
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/pages/QuickTransferDashboard/QuickTransferCard.tsx b/app/src/pages/QuickTransferDashboard/QuickTransferCard.tsx
index 7f273f30658..9044d228cb0 100644
--- a/app/src/pages/QuickTransferDashboard/QuickTransferCard.tsx
+++ b/app/src/pages/QuickTransferDashboard/QuickTransferCard.tsx
@@ -31,13 +31,13 @@ import {
 import { deleteProtocol } from '@opentrons/api-client'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { LongPressModal } from './LongPressModal'
 import { formatTimeWithUtcLabel } from '../../resources/runs'
 
 import type { UseLongPressResult } from '@opentrons/components'
 import type { ProtocolResource } from '@opentrons/shared-data'
-import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
+import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 
 const REFETCH_INTERVAL = 5000
 
@@ -124,7 +124,7 @@ export function QuickTransferCard(props: {
     setTargetTransferId,
   ])
 
-  const failedAnalysisHeader: ModalHeaderBaseProps = {
+  const failedAnalysisHeader: OddModalHeaderBaseProps = {
     title: i18n.format(t('transfer_analysis_failed'), 'capitalize'),
     hasExitIcon: true,
     onClick: () => {
@@ -235,7 +235,7 @@ export function QuickTransferCard(props: {
         )}
         {(showFailedAnalysisModal ||
           (isFailedAnalysis && longpress.isLongPressed)) && (
-          <Modal
+          <OddModal
             header={failedAnalysisHeader}
             onOutsideClick={() => {
               setShowFailedAnalysisModal(false)
@@ -286,7 +286,7 @@ export function QuickTransferCard(props: {
                 disabled={showIcon}
               />
             </Flex>
-          </Modal>
+          </OddModal>
         )}
       </Flex>
     </Flex>
diff --git a/app/src/pages/QuickTransferDashboard/StorageLimitReachedErrorModal.tsx b/app/src/pages/QuickTransferDashboard/StorageLimitReachedErrorModal.tsx
index d4c8a562306..ed663b57b73 100644
--- a/app/src/pages/QuickTransferDashboard/StorageLimitReachedErrorModal.tsx
+++ b/app/src/pages/QuickTransferDashboard/StorageLimitReachedErrorModal.tsx
@@ -8,7 +8,7 @@ import {
   DIRECTION_COLUMN,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 import { SmallButton } from '../../atoms/buttons'
 
 interface StorageLimitReachedErrorModalProps {
@@ -21,7 +21,7 @@ export const StorageLimitReachedErrorModal = (
   const { i18n, t } = useTranslation(['quick_transfer', 'shared', 'branded'])
 
   return (
-    <Modal
+    <OddModal
       header={{
         title: t('storage_limit_reached'),
         iconName: 'alert-circle',
@@ -44,6 +44,6 @@ export const StorageLimitReachedErrorModal = (
           />
         </Flex>
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/app/src/pages/QuickTransferDetails/index.tsx b/app/src/pages/QuickTransferDetails/index.tsx
index 6742277aa95..1423ff109aa 100644
--- a/app/src/pages/QuickTransferDetails/index.tsx
+++ b/app/src/pages/QuickTransferDetails/index.tsx
@@ -38,7 +38,7 @@ import {
   ProtocolDetailsSectionContentSkeleton,
 } from '../../organisms/OnDeviceDisplay/ProtocolDetails'
 import { useHardwareStatusText } from '../../organisms/OnDeviceDisplay/RobotDashboard/hooks'
-import { SmallModalChildren } from '../../molecules/Modal'
+import { SmallModalChildren } from '../../molecules/OddModal'
 import { useToaster } from '../../organisms/ToasterOven'
 import {
   getApplyHistoricOffsets,
diff --git a/app/src/pages/RobotDashboard/WelcomeModal.tsx b/app/src/pages/RobotDashboard/WelcomeModal.tsx
index d8caef25f9a..736b83bf3e4 100644
--- a/app/src/pages/RobotDashboard/WelcomeModal.tsx
+++ b/app/src/pages/RobotDashboard/WelcomeModal.tsx
@@ -13,7 +13,7 @@ import {
 import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
 
 import { SmallButton } from '../../atoms/buttons'
-import { Modal } from '../../molecules/Modal'
+import { OddModal } from '../../molecules/OddModal'
 
 import welcomeModalImage from '../../assets/images/on-device-display/welcome_dashboard_modal.png'
 
@@ -50,7 +50,7 @@ export function WelcomeModal({
   React.useEffect(startDiscoAnimation, [])
 
   return (
-    <Modal modalSize="small" onOutsideClick={handleCloseModal}>
+    <OddModal modalSize="small" onOutsideClick={handleCloseModal}>
       <Flex
         flexDirection={DIRECTION_COLUMN}
         justifyContent={JUSTIFY_CENTER}
@@ -82,6 +82,6 @@ export function WelcomeModal({
         </Flex>
         <SmallButton buttonText={t('shared:next')} onClick={handleCloseModal} />
       </Flex>
-    </Modal>
+    </OddModal>
   )
 }
diff --git a/components/src/modals/AlertModal.tsx b/components/src/modals/AlertModal.tsx
index 7f8bf7fedea..199d8bcf44a 100644
--- a/components/src/modals/AlertModal.tsx
+++ b/components/src/modals/AlertModal.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames'
 
 import { OutlineButton } from '../buttons'
 import { Icon } from '../icons'
-import { Modal } from './Modal'
+import { LegacyModal } from './LegacyModal'
 import styles from './modals.module.css'
 
 import type { ButtonProps } from '../buttons'
@@ -31,6 +31,7 @@ export interface AlertModalProps {
 }
 
 /**
+ * @deprecated use Modal instead
  * Generic alert modal with a heading and a set of buttons at the bottom
  */
 export function AlertModal(props: AlertModalProps): JSX.Element {
@@ -52,7 +53,7 @@ export function AlertModal(props: AlertModalProps): JSX.Element {
   )
 
   return (
-    <Modal
+    <LegacyModal
       className={className}
       contentsClassName={wrapperStyle}
       onCloseClick={onCloseClick}
@@ -83,6 +84,6 @@ export function AlertModal(props: AlertModalProps): JSX.Element {
           ))}
         </div>
       )}
-    </Modal>
+    </LegacyModal>
   )
 }
diff --git a/components/src/modals/BaseModal.tsx b/components/src/modals/BaseModal.tsx
deleted file mode 100644
index 6f680934686..00000000000
--- a/components/src/modals/BaseModal.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as React from 'react'
-
-import * as Styles from '../styles'
-import { Box, Flex } from '../primitives'
-import { SPACING } from '../ui-style-constants'
-import { COLORS } from '../helix-design-system'
-import { POSITION_FIXED } from '../styles'
-import type { StyleProps } from '../primitives'
-
-const BASE_STYLE = {
-  position: Styles.POSITION_ABSOLUTE,
-  alignItems: Styles.ALIGN_CENTER,
-  justifyContent: Styles.JUSTIFY_CENTER,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  padding: `${SPACING.spacing16}, ${SPACING.spacing24}`,
-} as const
-
-const MODAL_STYLE = {
-  backgroundColor: Styles.C_WHITE,
-  position: Styles.POSITION_RELATIVE,
-  overflowY: Styles.OVERFLOW_AUTO,
-  maxHeight: '100%',
-  width: '100%',
-} as const
-
-const HEADER_STYLE = {
-  backgroundColor: Styles.C_LIGHT_GRAY,
-  position: Styles.POSITION_STICKY,
-  padding: SPACING.spacing16,
-  top: 0,
-} as const
-
-const FOOTER_STYLE = {
-  backgroundColor: Styles.C_WHITE,
-  position: Styles.POSITION_STICKY,
-  padding: SPACING.spacing16,
-  bottom: 0,
-} as const
-
-const CONTENT_STYLE = {
-  paddingTop: SPACING.spacing16,
-  paddingX: SPACING.spacing24,
-  paddingBottom: SPACING.spacing24,
-} as const
-
-export interface BaseModalProps extends StyleProps {
-  /** Overlay color, defaults to `OVERLAY_GRAY_90` */
-  overlayColor?: string
-  /** Optional close on outside click **/
-  onOutsideClick?: React.MouseEventHandler
-  /** Optional sticky header */
-  header?: React.ReactNode
-  /** Option to turn off headerStyles */
-  noHeaderStyles?: boolean
-  /** Optional sticky footer */
-  footer?: React.ReactNode
-  /** Modal content */
-  children?: React.ReactNode
-}
-
-/**
- * A BaseModal is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay, customizable with the `overlayColor` prop
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- */
-export function BaseModal(props: BaseModalProps): JSX.Element {
-  const {
-    overlayColor = `${COLORS.black90}${COLORS.opacity40HexCode}`,
-    onOutsideClick,
-    zIndex = 10,
-    header,
-    footer,
-    children,
-    noHeaderStyles,
-    ...styleProps
-  } = props
-
-  const headerStyle = props.noHeaderStyles === true ? null : HEADER_STYLE
-
-  return (
-    <Flex
-      position={POSITION_FIXED}
-      left="0"
-      right="0"
-      top="0"
-      bottom="0"
-      zIndex="1"
-      backgroundColor={overlayColor}
-      cursor="default"
-      onClick={(e: React.MouseEvent) => {
-        e.stopPropagation()
-        if (onOutsideClick) onOutsideClick(e)
-      }}
-    >
-      <Flex {...BASE_STYLE} zIndex={zIndex}>
-        <Box
-          {...MODAL_STYLE}
-          {...styleProps}
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation()
-          }}
-        >
-          {header != null ? <Box {...headerStyle}>{header}</Box> : null}
-          <Box {...CONTENT_STYLE}>{children}</Box>
-          {footer != null ? <Box {...FOOTER_STYLE}>{footer}</Box> : null}
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}
diff --git a/components/src/modals/ContinueModal.tsx b/components/src/modals/ContinueModal.tsx
index 265f8fec921..fd0eb7a172d 100644
--- a/components/src/modals/ContinueModal.tsx
+++ b/components/src/modals/ContinueModal.tsx
@@ -13,6 +13,7 @@ const CANCEL = 'Cancel'
 const CONTINUE = 'Continue'
 
 /**
+ * * @deprecated use Modal instead
  * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
  */
 export function ContinueModal(props: ContinueModalProps): JSX.Element {
diff --git a/components/src/modals/LegacyModal.tsx b/components/src/modals/LegacyModal.tsx
new file mode 100644
index 00000000000..310cc1a8c3a
--- /dev/null
+++ b/components/src/modals/LegacyModal.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { RemoveScroll } from 'react-remove-scroll'
+
+import { Overlay } from './Overlay'
+import styles from './modals.module.css'
+
+export interface LegacyModalProps {
+  /** handler to close the modal (attached to `Overlay` onClick) */
+  onCloseClick?: React.MouseEventHandler
+  /** Optional styled heading **/
+  heading?: string
+  /** modal contents */
+  children: React.ReactNode
+  /** classes to apply */
+  className?: string
+  /** classes to apply to the contents box */
+  contentsClassName?: string
+  /** lightens overlay (alert modal over existing modal) */
+  alertOverlay?: boolean
+  /** restricts scroll outside of Modal when open, true by default */
+  restrictOuterScroll?: boolean
+  innerRef?: React.Ref<HTMLDivElement>
+}
+
+/**
+ * @deprecated use Modal instead
+ * Base modal component that fills its nearest `display:relative` ancestor
+ * with a dark overlay and displays `children` as its contents in a white box
+ */
+export function LegacyModal(props: LegacyModalProps): JSX.Element {
+  const {
+    contentsClassName,
+    alertOverlay,
+    onCloseClick,
+    heading,
+    innerRef,
+    restrictOuterScroll = true,
+  } = props
+  const Wrapper = restrictOuterScroll ? RemoveScroll : React.Fragment
+  return (
+    <Wrapper>
+      <div
+        className={cx(styles.modal, props.className, {
+          [styles.alert_modal]: alertOverlay,
+        })}
+      >
+        <Overlay onClick={onCloseClick} alertOverlay={alertOverlay} />
+        <div
+          ref={innerRef}
+          className={cx(styles.modal_contents, contentsClassName)}
+        >
+          {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
+          {props.children}
+        </div>
+      </div>
+    </Wrapper>
+  )
+}
diff --git a/components/src/modals/Modal.stories.tsx b/components/src/modals/Modal.stories.tsx
index 28fcb35bd36..827cead477f 100644
--- a/components/src/modals/Modal.stories.tsx
+++ b/components/src/modals/Modal.stories.tsx
@@ -1,112 +1,52 @@
 import * as React from 'react'
-import {
-  AlertModal,
-  BaseModal,
-  ContinueModal,
-  Overlay,
-  SpinnerModal,
-  SpinnerModalPage,
-} from './'
-import {
-  Box,
-  Text,
-  Flex,
-  SecondaryBtn,
-  Icon,
-  JUSTIFY_FLEX_END,
-  DISPLAY_FLEX,
-  ALIGN_CENTER,
-  FONT_SIZE_HEADER,
-  FONT_WEIGHT_REGULAR,
-  SPACING_2,
-} from '@opentrons/components'
+
+import { LegacyStyledText } from '../atoms'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { PrimaryBtn } from '../primitives'
+import { COLORS } from '../helix-design-system'
+import { Modal } from './Modal'
 
 import type { Story, Meta } from '@storybook/react'
 
 export default {
-  title: 'Library/Molecules/Modal',
-  decorators: [
-    Story => (
-      <Box width="32rem" height="16rem">
-        <Story />
-      </Box>
-    ),
-  ],
+  title: 'Library/Molecules/modals/Modal',
+  component: Modal,
 } as Meta
 
-const BaseTemplate: Story<React.ComponentProps<typeof BaseModal>> = args => (
-  <BaseModal {...args} />
+const Template: Story<React.ComponentProps<typeof Modal>> = args => (
+  <Modal {...args} />
 )
-export const Base = BaseTemplate.bind({})
-Base.args = {
-  header: (
-    <Text
-      as="h2"
-      display={DISPLAY_FLEX}
-      alignItems={ALIGN_CENTER}
-      fontSize={FONT_SIZE_HEADER}
-      fontWeight={FONT_WEIGHT_REGULAR}
+
+const Children = (
+  <>
+    <LegacyStyledText
+      fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+      fontSize={TYPOGRAPHY.fontSizeP}
+      paddingTop={SPACING.spacing4}
     >
-      <Icon name="alert" width="1em" marginRight={SPACING_2} />
-      Attention
-    </Text>
-  ),
-  children: (
-    <>
-      <Text marginBottom={SPACING_2}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </Text>
-      <Text marginBottom={SPACING_2}>
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-        ut aliquip ex ea commodo consequat.
-      </Text>
-      <Text>
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-        dolore eu fugiat nulla pariatur
-      </Text>
-    </>
-  ),
-  footer: (
-    <Flex justifyContent={JUSTIFY_FLEX_END}>
-      <SecondaryBtn>OK</SecondaryBtn>
-    </Flex>
-  ),
-}
+      {'Modal body goes here'}
+    </LegacyStyledText>
 
-const AlertTemplate: Story<React.ComponentProps<typeof AlertModal>> = args => (
-  <AlertModal {...args} />
+    <PrimaryBtn
+      backgroundColor={COLORS.blue50}
+      marginTop="28rem"
+      textTransform={TYPOGRAPHY.textTransformNone}
+    >
+      <LegacyStyledText
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        fontSize={TYPOGRAPHY.fontSizeP}
+      >
+        {'btn text'}
+      </LegacyStyledText>
+    </PrimaryBtn>
+  </>
 )
-export const Alert = AlertTemplate.bind({})
-Alert.args = {
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  heading: 'heading',
-  alertOverlay: true,
-  buttons: [{ children: 'foo' }],
-}
 
-const ContinueTemplate: Story<
-  React.ComponentProps<typeof ContinueModal>
-> = args => <ContinueModal {...args} />
-export const Continue = ContinueTemplate.bind({})
-Continue.args = {
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  heading: 'heading',
+export const Primary = Template.bind({})
+Primary.args = {
+  type: 'info',
+  onClose: () => {},
+  closeOnOutsideClick: false,
+  title: 'Modal Title',
+  children: Children,
 }
-
-const SpinnerTemplate: Story<
-  React.ComponentProps<typeof SpinnerModal>
-> = args => <SpinnerModal {...args} />
-export const Spinner = SpinnerTemplate.bind({})
-
-const SpinnerPageTemplate: Story<
-  React.ComponentProps<typeof SpinnerModalPage>
-> = args => <SpinnerModalPage {...args} />
-export const SpinnerPage = SpinnerPageTemplate.bind({})
-
-const OverlayTemplate: Story<React.ComponentProps<typeof Overlay>> = args => (
-  <Overlay {...args} />
-)
-export const JustOverlay = OverlayTemplate.bind({})
diff --git a/components/src/modals/Modal.tsx b/components/src/modals/Modal.tsx
index 452aa046fae..e8b651d40fd 100644
--- a/components/src/modals/Modal.tsx
+++ b/components/src/modals/Modal.tsx
@@ -1,58 +1,81 @@
 import * as React from 'react'
-import cx from 'classnames'
-import { RemoveScroll } from 'react-remove-scroll'
+import { Box } from '../primitives'
+import { SPACING } from '../ui-style-constants'
+import { COLORS } from '../helix-design-system'
+import { ModalHeader } from './ModalHeader'
+import { ModalShell } from './ModalShell'
+import type { IconProps } from '../icons'
+import type { StyleProps } from '../primitives'
 
-import { Overlay } from './Overlay'
-import styles from './modals.module.css'
+type ModalType = 'info' | 'warning' | 'error'
 
-export interface ModalProps {
-  /** handler to close the modal (attached to `Overlay` onClick) */
-  onCloseClick?: React.MouseEventHandler
-  /** Optional styled heading **/
-  heading?: string
-  /** modal contents */
-  children: React.ReactNode
-  /** classes to apply */
-  className?: string
-  /** classes to apply to the contents box */
-  contentsClassName?: string
-  /** lightens overlay (alert modal over existing modal) */
-  alertOverlay?: boolean
-  /** restricts scroll outside of Modal when open, true by default */
-  restrictOuterScroll?: boolean
-  innerRef?: React.Ref<HTMLDivElement>
+export interface ModalProps extends StyleProps {
+  type?: ModalType
+  onClose?: React.MouseEventHandler
+  closeOnOutsideClick?: boolean
+  title?: React.ReactNode
+  fullPage?: boolean
+  childrenPadding?: string | number
+  children?: React.ReactNode
+  footer?: React.ReactNode
 }
 
 /**
- * Base modal component that fills its nearest `display:relative` ancestor
- * with a dark overlay and displays `children` as its contents in a white box
+ * For Desktop app and Helix (which includes Protocol Designer) use only.
  */
-export function Modal(props: ModalProps): JSX.Element {
+export const Modal = (props: ModalProps): JSX.Element => {
   const {
-    contentsClassName,
-    alertOverlay,
-    onCloseClick,
-    heading,
-    innerRef,
-    restrictOuterScroll = true,
+    type = 'info',
+    onClose,
+    closeOnOutsideClick,
+    title,
+    childrenPadding = `${SPACING.spacing16} ${SPACING.spacing24} ${SPACING.spacing24}`,
+    children,
+    footer,
+    ...styleProps
   } = props
-  const Wrapper = restrictOuterScroll ? RemoveScroll : React.Fragment
+
+  const iconColor = (type: ModalType): string => {
+    let iconColor: string = ''
+    switch (type) {
+      case 'warning':
+        iconColor = COLORS.yellow50
+        break
+      case 'error':
+        iconColor = COLORS.red50
+        break
+    }
+    return iconColor
+  }
+
+  const modalIcon: IconProps = {
+    name: 'ot-alert',
+    color: iconColor(type),
+    size: '1.25rem',
+    marginRight: SPACING.spacing8,
+  }
+
+  const modalHeader = (
+    <ModalHeader
+      onClose={onClose}
+      title={title}
+      icon={['error', 'warning'].includes(type) ? modalIcon : undefined}
+      color={COLORS.black90}
+      backgroundColor={COLORS.white}
+    />
+  )
+
   return (
-    <Wrapper>
-      <div
-        className={cx(styles.modal, props.className, {
-          [styles.alert_modal]: alertOverlay,
-        })}
-      >
-        <Overlay onClick={onCloseClick} alertOverlay={alertOverlay} />
-        <div
-          ref={innerRef}
-          className={cx(styles.modal_contents, contentsClassName)}
-        >
-          {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
-          {props.children}
-        </div>
-      </div>
-    </Wrapper>
+    <ModalShell
+      width={styleProps.width ?? '31.25rem'}
+      header={modalHeader}
+      onOutsideClick={closeOnOutsideClick ?? false ? onClose : undefined}
+      // center within viewport aside from nav
+      marginLeft={styleProps.marginLeft ?? '5.656rem'}
+      {...styleProps}
+      footer={footer}
+    >
+      <Box padding={childrenPadding}>{children}</Box>
+    </ModalShell>
   )
 }
diff --git a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx b/components/src/modals/ModalHeader.tsx
similarity index 74%
rename from app/src/molecules/LegacyModal/LegacyModalHeader.tsx
rename to components/src/modals/ModalHeader.tsx
index 725df7c0c4b..6cb84d546fd 100644
--- a/app/src/molecules/LegacyModal/LegacyModalHeader.tsx
+++ b/components/src/modals/ModalHeader.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react'
 import { css } from 'styled-components'
-import {
-  ALIGN_CENTER,
-  Btn,
-  COLORS,
-  Flex,
-  Icon,
-  JUSTIFY_CENTER,
-  JUSTIFY_SPACE_BETWEEN,
-  SPACING,
-  LegacyStyledText,
-  TYPOGRAPHY,
-} from '@opentrons/components'
 
-import { Divider } from '../../atoms/structure'
-import type { IconProps } from '@opentrons/components'
+import { Icon } from '../icons'
+import { Box, Btn, Flex } from '../primitives'
+import { LegacyStyledText } from '../atoms'
+import { ALIGN_CENTER, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN } from '../styles'
+import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
+import { COLORS } from '../helix-design-system'
+import type { IconProps } from '../icons'
 
-export interface LegacyModalHeaderProps {
-  onClose?: React.MouseEventHandler
+export interface ModalHeaderProps {
   title: React.ReactNode
+  onClose?: React.MouseEventHandler
   backgroundColor?: string
   color?: string
   icon?: IconProps
@@ -41,9 +34,7 @@ const closeIconStyles = css`
   }
 `
 
-export const LegacyModalHeader = (
-  props: LegacyModalHeaderProps
-): JSX.Element => {
+export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
   const { icon, onClose, title, backgroundColor, color, closeButton } = props
   return (
     <>
@@ -84,7 +75,12 @@ export const LegacyModalHeader = (
               </Btn>
             )}
       </Flex>
-      <Divider width="100%" marginY="0" />
+      <Box
+        borderBottom={`1px solid ${COLORS.grey30}`}
+        marginY="0"
+        width="100%"
+        data-testid="divider"
+      />
     </>
   )
 }
diff --git a/components/src/modals/ModalPage.tsx b/components/src/modals/ModalPage.tsx
deleted file mode 100644
index 4e38e0970d0..00000000000
--- a/components/src/modals/ModalPage.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// titled modal page component
-import * as React from 'react'
-import cx from 'classnames'
-
-import { Box } from '../primitives'
-import { TitleBar } from '../structure'
-import { Overlay } from './Overlay'
-import styles from './modals.module.css'
-
-import type { TitleBarProps } from '../structure'
-
-export interface ModalPageProps {
-  /** Props for title bar at top of modal page */
-  titleBar: TitleBarProps
-  contentsClassName?: string
-  heading?: React.ReactNode
-  children?: React.ReactNode
-  innerProps?: React.ComponentProps<typeof Box>
-  outerProps?: React.ComponentProps<typeof Box>
-}
-
-/**
- * @deprecated Use `Interstitial` instead
- */
-
-export function ModalPage(props: ModalPageProps): JSX.Element {
-  const { titleBar, heading, innerProps = {}, outerProps = {} } = props
-
-  return (
-    <Box className={styles.modal_page} {...outerProps}>
-      <Overlay />
-      <TitleBar {...titleBar} className={styles.title_bar} />
-      <Box
-        className={cx(styles.modal_page_contents, props.contentsClassName)}
-        {...innerProps}
-      >
-        {heading && <h3 className={styles.modal_heading}>{heading}</h3>}
-        {props.children}
-      </Box>
-    </Box>
-  )
-}
diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx
index 98fe207571e..a1a10035be5 100644
--- a/components/src/modals/ModalShell.tsx
+++ b/components/src/modals/ModalShell.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { SPACING } from '../ui-style-constants'
-import { BORDERS, COLORS } from '../helix-design-system'
-import { styleProps } from '../primitives'
 import {
-  POSITION_FIXED,
-  POSITION_ABSOLUTE,
-  POSITION_RELATIVE,
-  POSITION_STICKY,
   ALIGN_CENTER,
   JUSTIFY_CENTER,
   OVERFLOW_AUTO,
+  POSITION_ABSOLUTE,
+  POSITION_RELATIVE,
+  POSITION_STICKY,
 } from '../styles'
+import { BORDERS, COLORS } from '../helix-design-system'
+import { RESPONSIVENESS, SPACING } from '../ui-style-constants'
+import { styleProps } from '../primitives'
 
 import type { StyleProps } from '../primitives'
+
 export interface ModalShellProps extends StyleProps {
   /** Modal content */
   children: React.ReactNode
@@ -51,15 +51,16 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
   return (
     <Overlay
       aria-label="BackgroundOverlay_ModalShell"
-      onClick={e => {
+      onClick={(e: React.MouseEvent) => {
         e.stopPropagation()
         if (onOutsideClick != null) onOutsideClick(e)
       }}
     >
       <ContentArea zIndex={zIndex}>
         <ModalArea
+          aria-label="ModalShell_ModalArea"
           isFullPage={fullPage}
-          onClick={e => {
+          onClick={(e: React.MouseEvent) => {
             e.stopPropagation()
           }}
           {...styleProps}
@@ -74,16 +75,15 @@ export function ModalShell(props: ModalShellProps): JSX.Element {
 }
 
 const Overlay = styled.div`
-  position: ${POSITION_FIXED};
+  position: ${POSITION_ABSOLUTE};
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 1;
-  background-color: ${COLORS.black90}${COLORS.opacity60HexCode};
+  background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
   cursor: default;
 `
-
 const ContentArea = styled.div<{ zIndex: string | number }>`
   display: flex;
   position: ${POSITION_ABSOLUTE};
@@ -110,6 +110,9 @@ const ModalArea = styled.div<
   box-shadow: ${BORDERS.smallDropShadow};
   height: ${({ isFullPage }) => (isFullPage ? '100%' : 'auto')};
   background-color: ${COLORS.white};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius16};
+  }
   ${styleProps};
 `
 
diff --git a/components/src/modals/SpinnerModal.tsx b/components/src/modals/SpinnerModal.tsx
index a5eb780bbb3..2405259892a 100644
--- a/components/src/modals/SpinnerModal.tsx
+++ b/components/src/modals/SpinnerModal.tsx
@@ -15,7 +15,10 @@ export interface SpinnerModalProps {
   alertOverlay?: boolean
 }
 
+// TODO(ja, 8/2/24): this modal and SpinnerModalPage are only used in utils
+// that are no longer in use, investigate deleting them
 /**
+ * @deprecated use Modal instead
  * Spinner Modal with no background and optional message
  */
 export function SpinnerModal(props: SpinnerModalProps): JSX.Element {
diff --git a/components/src/modals/SpinnerModalPage.tsx b/components/src/modals/SpinnerModalPage.tsx
index bbe2277e329..da61784eb04 100644
--- a/components/src/modals/SpinnerModalPage.tsx
+++ b/components/src/modals/SpinnerModalPage.tsx
@@ -15,6 +15,7 @@ export interface SpinnerModalPageProps
 }
 
 /**
+ * @deprecated use Modal instead
  * Spinner Modal variant with TitleBar
  */
 export function SpinnerModalPage(props: SpinnerModalPageProps): JSX.Element {
diff --git a/components/src/modals/__tests__/BaseModal.test.tsx b/components/src/modals/__tests__/BaseModal.test.tsx
deleted file mode 100644
index 449c71325a9..00000000000
--- a/components/src/modals/__tests__/BaseModal.test.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { describe, it } from 'vitest'
-describe('BaseModal', () => {
-  it.todo('replace deprecated enzyme test')
-})
diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx b/components/src/modals/__tests__/Modal.test.tsx
similarity index 83%
rename from app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
rename to components/src/modals/__tests__/Modal.test.tsx
index a2928181e03..c6aec42c89c 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModal.test.tsx
+++ b/components/src/modals/__tests__/Modal.test.tsx
@@ -3,16 +3,16 @@ import * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
-import { COLORS } from '@opentrons/components'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { LegacyModal } from '..'
+import { renderWithProviders } from '../../testing/utils'
+import { COLORS } from '../../helix-design-system'
+import { Modal } from '../Modal'
 
-const render = (props: React.ComponentProps<typeof LegacyModal>) => {
-  return renderWithProviders(<LegacyModal {...props} />)
+const render = (props: React.ComponentProps<typeof Modal>) => {
+  return renderWithProviders(<Modal {...props} />)
 }
 
-describe('LegacyModal', () => {
-  let props: React.ComponentProps<typeof LegacyModal>
+describe('Modal', () => {
+  let props: React.ComponentProps<typeof Modal>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx b/components/src/modals/__tests__/ModalHeader.test.tsx
similarity index 80%
rename from app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
rename to components/src/modals/__tests__/ModalHeader.test.tsx
index 37606384cc6..8ae3bc9708c 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModalHeader.test.tsx
+++ b/components/src/modals/__tests__/ModalHeader.test.tsx
@@ -2,25 +2,21 @@ import * as React from 'react'
 import { screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../__testing-utils__'
 
-import {
-  ALIGN_CENTER,
-  COLORS,
-  JUSTIFY_CENTER,
-  SPACING,
-} from '@opentrons/components'
-
-import { LegacyModalHeader } from '../LegacyModalHeader'
+import { renderWithProviders } from '../../testing/utils'
+import { ModalHeader } from '../ModalHeader'
+import { COLORS } from '../../helix-design-system'
+import { SPACING } from '../../ui-style-constants'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
 
 const mockClose = vi.fn()
 
-const render = (props: React.ComponentProps<typeof LegacyModalHeader>) => {
-  return renderWithProviders(<LegacyModalHeader {...props} />)
+const render = (props: React.ComponentProps<typeof ModalHeader>) => {
+  return renderWithProviders(<ModalHeader {...props} />)
 }
 
-describe('LegacyModalHeader', () => {
-  let props: React.ComponentProps<typeof LegacyModalHeader>
+describe('ModalHeader', () => {
+  let props: React.ComponentProps<typeof ModalHeader>
 
   beforeEach(() => {
     props = {
diff --git a/app/src/molecules/LegacyModal/__tests__/LegacyModalShell.test.tsx b/components/src/modals/__tests__/ModalShell.test.tsx
similarity index 72%
rename from app/src/molecules/LegacyModal/__tests__/LegacyModalShell.test.tsx
rename to components/src/modals/__tests__/ModalShell.test.tsx
index b8d8f9e46e6..f106d00841c 100644
--- a/app/src/molecules/LegacyModal/__tests__/LegacyModalShell.test.tsx
+++ b/components/src/modals/__tests__/ModalShell.test.tsx
@@ -2,16 +2,15 @@ import * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
 import { describe, it, expect, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { renderWithProviders } from '../../testing/utils'
+import { ModalShell } from '../ModalShell'
 
-import { LegacyModalShell } from '../LegacyModalShell'
-
-const render = (props: React.ComponentProps<typeof LegacyModalShell>) => {
-  return renderWithProviders(<LegacyModalShell {...props} />)
+const render = (props: React.ComponentProps<typeof ModalShell>) => {
+  return renderWithProviders(<ModalShell {...props} />)
 }
 
-describe('LegacyModalShell', () => {
-  let props: React.ComponentProps<typeof LegacyModalShell>
+describe('ModalShell', () => {
+  let props: React.ComponentProps<typeof ModalShell>
 
   beforeEach(() => {
     props = {
diff --git a/components/src/modals/index.ts b/components/src/modals/index.ts
index 9468cc6af03..bf8ffb09759 100644
--- a/components/src/modals/index.ts
+++ b/components/src/modals/index.ts
@@ -1,11 +1,10 @@
 // modal components
-
-export * from './Modal'
 export * from './AlertModal'
 export * from './ContinueModal'
-export * from './SpinnerModal'
-export * from './ModalPage'
+export * from './LegacyModal'
+export * from './Modal'
+export * from './ModalHeader'
 export * from './ModalShell'
-export * from './SpinnerModalPage'
-export * from './BaseModal'
 export * from './Overlay'
+export * from './SpinnerModal'
+export * from './SpinnerModalPage'
diff --git a/components/src/structure/TitleBar.tsx b/components/src/structure/TitleBar.tsx
index bdc8d9e28be..f4890406e5c 100644
--- a/components/src/structure/TitleBar.tsx
+++ b/components/src/structure/TitleBar.tsx
@@ -23,7 +23,7 @@ export interface TitleBarProps {
 }
 
 /**
- * @deprecated Use `InterstitialTitleBar` instead
+ * @deprecated Use 'ModalHeader' instead
  */
 
 export function TitleBar(props: TitleBarProps): JSX.Element {
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrderField/WellOrderModal.tsx b/protocol-designer/src/components/StepEditForm/fields/WellOrderField/WellOrderModal.tsx
index 9e07a25dca0..0051be0ebb2 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellOrderField/WellOrderModal.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/WellOrderField/WellOrderModal.tsx
@@ -4,7 +4,7 @@ import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { getMainPagePortalEl } from '../../../portals/MainPageModalPortal'
 import {
-  Modal,
+  LegacyModal,
   OutlineButton,
   DeprecatedPrimaryButton,
   FormGroup,
@@ -186,7 +186,7 @@ export const WellOrderModal = (
   if (!isOpen) return null
 
   return createPortal(
-    <Modal
+    <LegacyModal
       className={modalStyles.modal}
       contentsClassName={cx(modalStyles.modal_contents)}
       onCloseClick={handleCancel}
@@ -238,7 +238,7 @@ export const WellOrderModal = (
           <DoneButton onClick={handleDone} />
         </div>
       </div>
-    </Modal>,
+    </LegacyModal>,
     getMainPagePortalEl()
   )
 }
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx
index 26556511116..b091bcb98c6 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionModal.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import omit from 'lodash/omit'
 
 import {
-  Modal,
+  LegacyModal,
   OutlineButton,
   LabeledValue,
   WELL_LABEL_OPTIONS,
@@ -74,7 +74,7 @@ const WellSelectionModalComponent = (
   const liquidDisplayColors = useSelector(selectors.getLiquidDisplayColors)
 
   return (
-    <Modal
+    <LegacyModal
       className={modalStyles.modal}
       contentsClassName={cx(
         modalStyles.modal_contents,
@@ -115,7 +115,7 @@ const WellSelectionModalComponent = (
       ) : null}
 
       <WellSelectionInstructions />
-    </Modal>
+    </LegacyModal>
   )
 }
 
diff --git a/protocol-designer/src/components/labware/BrowseLabwareModal.tsx b/protocol-designer/src/components/labware/BrowseLabwareModal.tsx
index f07a09f6acd..792d2564396 100644
--- a/protocol-designer/src/components/labware/BrowseLabwareModal.tsx
+++ b/protocol-designer/src/components/labware/BrowseLabwareModal.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { Modal } from '@opentrons/components'
+import { LegacyModal } from '@opentrons/components'
 
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
 import { selectors } from '../../labware-ingred/selectors'
@@ -34,7 +34,7 @@ export const BrowseLabwareModal = (): JSX.Element | null => {
   }
 
   return (
-    <Modal
+    <LegacyModal
       className={modalStyles.modal}
       contentsClassName={cx(
         modalStyles.modal_contents,
@@ -50,6 +50,6 @@ export const BrowseLabwareModal = (): JSX.Element | null => {
       <div className={styles.modal_instructions}>
         {t('browse_labware.instructions')}
       </div>
-    </Modal>
+    </LegacyModal>
   )
 }
diff --git a/protocol-designer/src/components/modals/AnnouncementModal/index.tsx b/protocol-designer/src/components/modals/AnnouncementModal/index.tsx
index 7d2fa14a6aa..4f461e9749e 100644
--- a/protocol-designer/src/components/modals/AnnouncementModal/index.tsx
+++ b/protocol-designer/src/components/modals/AnnouncementModal/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
-import { Modal, OutlineButton } from '@opentrons/components'
+import { LegacyModal, OutlineButton } from '@opentrons/components'
 import {
   setLocalStorageItem,
   getLocalStorageItem,
@@ -35,7 +35,7 @@ export const AnnouncementModal = (): JSX.Element => {
   return (
     <>
       {showAnnouncementModal && (
-        <Modal
+        <LegacyModal
           className={cx(modalStyles.modal, styles.announcement_modal)}
           contentsClassName={styles.modal_contents}
           onCloseClick={handleClick}
@@ -57,7 +57,7 @@ export const AnnouncementModal = (): JSX.Element => {
               </OutlineButton>
             </div>
           </div>
-        </Modal>
+        </LegacyModal>
       )}
     </>
   )
diff --git a/protocol-designer/src/components/modals/FilePipettesModal/index.tsx b/protocol-designer/src/components/modals/FilePipettesModal/index.tsx
index 97bbcd68e15..1d6bf141e29 100644
--- a/protocol-designer/src/components/modals/FilePipettesModal/index.tsx
+++ b/protocol-designer/src/components/modals/FilePipettesModal/index.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
 import * as Yup from 'yup'
 
-import { Modal, OutlineButton } from '@opentrons/components'
+import { LegacyModal, OutlineButton } from '@opentrons/components'
 import {
   MAGNETIC_MODULE_TYPE,
   TEMPERATURE_MODULE_TYPE,
@@ -482,7 +482,7 @@ export const FilePipettesModal = (props: Props): JSX.Element => {
     crashablePipetteSelected && hasCrashableMagnetModuleSelected
 
   return (
-    <Modal
+    <LegacyModal
       contentsClassName={cx(
         styles.new_file_modal_contents,
         modalStyles.scrollable_modal_wrapper
@@ -544,6 +544,6 @@ export const FilePipettesModal = (props: Props): JSX.Element => {
           ) : null}
         </div>
       </div>
-    </Modal>
+    </LegacyModal>
   )
 }
diff --git a/protocol-designer/src/components/modals/MoreOptionsModal.tsx b/protocol-designer/src/components/modals/MoreOptionsModal.tsx
index 88b0cee0ff4..bb48984953f 100644
--- a/protocol-designer/src/components/modals/MoreOptionsModal.tsx
+++ b/protocol-designer/src/components/modals/MoreOptionsModal.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   FormGroup,
   InputField,
-  Modal,
+  LegacyModal,
   OutlineButton,
 } from '@opentrons/components'
 import { actions as steplistActions } from '../../steplist'
@@ -44,7 +44,7 @@ export function MoreOptionsModal(props: Props): JSX.Element {
   }
 
   return (
-    <Modal
+    <LegacyModal
       heading={t('step_notes.title')}
       className={modalStyles.modal}
       contentsClassName={styles.modal_contents}
@@ -77,6 +77,6 @@ export function MoreOptionsModal(props: Props): JSX.Element {
           <OutlineButton onClick={handleSave}>{t('button:save')}</OutlineButton>
         </div>
       </div>
-    </Modal>
+    </LegacyModal>
   )
 }