diff --git a/components/src/slotmap/SlotMap.tsx b/components/src/slotmap/SlotMap.tsx
index 7f6ffd2738d..3c50f67bc91 100644
--- a/components/src/slotmap/SlotMap.tsx
+++ b/components/src/slotmap/SlotMap.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import cx from 'classnames'
 import { Icon } from '../icons'
 import styles from './styles.css'
+import { OT3_STANDARD_MODEL } from '@opentrons/shared-data'
 
 // TODO(bc, 2021-03-29): this component is only used in PD
 // reconsider whether it belongs in components library
@@ -13,6 +14,8 @@ export interface SlotMapProps {
   collisionSlots?: string[]
   /** Optional error styling */
   isError?: boolean
+  /** Optional robot type for OT-3 Robot */
+  robotType?: string
 }
 
 const SLOT_MAP_SLOTS = [
@@ -22,6 +25,13 @@ const SLOT_MAP_SLOTS = [
   ['1', '2', '3'],
 ]
 
+const SLOT_MAP_FLEX_SLOTS = [
+  ['10', '11', '12'],
+  ['7', '8', '9'],
+  ['4', '5', '6'],
+  ['1', '2', '3'],
+]
+
 const slotWidth = 33
 const slotHeight = 23
 const iconSize = 20
@@ -29,12 +39,14 @@ const numRows = 4
 const numCols = 3
 
 export function SlotMap(props: SlotMapProps): JSX.Element {
-  const { collisionSlots, occupiedSlots, isError } = props
+  const { collisionSlots, occupiedSlots, isError, robotType } = props
+  const slot_map =
+    robotType === OT3_STANDARD_MODEL ? SLOT_MAP_FLEX_SLOTS : SLOT_MAP_SLOTS
   return (
     <svg
       viewBox={`-1,-1,${slotWidth * numCols + 2}, ${slotHeight * numRows + 2}`}
     >
-      {SLOT_MAP_SLOTS.flatMap((row, rowIndex) =>
+      {slot_map.flatMap((row, rowIndex) =>
         row.map((slot, colIndex) => {
           const isCollisionSlot =
             collisionSlots && collisionSlots.includes(slot)
diff --git a/protocol-designer/cypress/integration/batchEdit.spec.js b/protocol-designer/cypress/integration/batchEdit.spec.js
index 7343f7f5552..53d9b6ff708 100644
--- a/protocol-designer/cypress/integration/batchEdit.spec.js
+++ b/protocol-designer/cypress/integration/batchEdit.spec.js
@@ -1,6 +1,7 @@
 describe('Batch Edit Transform', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/customTipRacks.spec.js b/protocol-designer/cypress/integration/customTipRacks.spec.js
index f202c867b4f..33ab2ae33e5 100644
--- a/protocol-designer/cypress/integration/customTipRacks.spec.js
+++ b/protocol-designer/cypress/integration/customTipRacks.spec.js
@@ -13,7 +13,6 @@ const slotThree = 'foreignObject[x="265"][y="0"]'
 describe('Custom Tip Racks', () => {
   before(() => {
     cy.visit('/')
-    cy.closeAnnouncementModal()
   })
 
   const testCases = [
@@ -46,6 +45,8 @@ describe('Custom Tip Racks', () => {
 
   describe('build a new protocol with a custom tip rack', () => {
     it('sets up pipettes', () => {
+      cy.get('button').contains('Create new OT-2 protocol').click()
+      cy.closeAnnouncementModal()
       cy.get('button').contains('Create New').click()
       cy.get("input[placeholder='Untitled']").type(protocolTitle)
       cy.choosePipettes(pipette, pipette)
diff --git a/protocol-designer/cypress/integration/migrations.spec.js b/protocol-designer/cypress/integration/migrations.spec.js
index dd901a7a04f..e790b65a472 100644
--- a/protocol-designer/cypress/integration/migrations.spec.js
+++ b/protocol-designer/cypress/integration/migrations.spec.js
@@ -8,6 +8,7 @@ const semver = require('semver')
 describe('Protocol fixtures migrate and match snapshots', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/mixSettings.spec.js b/protocol-designer/cypress/integration/mixSettings.spec.js
index 2b9d5da1a0c..9dd9329df27 100644
--- a/protocol-designer/cypress/integration/mixSettings.spec.js
+++ b/protocol-designer/cypress/integration/mixSettings.spec.js
@@ -42,6 +42,7 @@ function enterBatchEdit() {
 describe('Advanced Settings for Mix Form', () => {
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
     importProtocol()
     openDesignTab()
diff --git a/protocol-designer/cypress/integration/newProtocol.spec.js b/protocol-designer/cypress/integration/newProtocol.spec.js
index 00bb0c163b7..46ecac01adb 100644
--- a/protocol-designer/cypress/integration/newProtocol.spec.js
+++ b/protocol-designer/cypress/integration/newProtocol.spec.js
@@ -1,6 +1,7 @@
 describe('Desktop Navigation', () => {
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/newProtocolWithModules.spec.js b/protocol-designer/cypress/integration/newProtocolWithModules.spec.js
index 0b04baccf1e..18c48d0718f 100644
--- a/protocol-designer/cypress/integration/newProtocolWithModules.spec.js
+++ b/protocol-designer/cypress/integration/newProtocolWithModules.spec.js
@@ -20,6 +20,7 @@ const magenticDeckWellWithExtraSpace = 'Mag Deck Well '
 describe('Protocols with Modules', () => {
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/newProtocolWithTC.spec.js b/protocol-designer/cypress/integration/newProtocolWithTC.spec.js
index a32e994bd7a..e7011a2efe6 100644
--- a/protocol-designer/cypress/integration/newProtocolWithTC.spec.js
+++ b/protocol-designer/cypress/integration/newProtocolWithTC.spec.js
@@ -31,6 +31,7 @@ const thermocyclerWellBlockWithExtraSpace = 'TC Well ' // Note: reason this is n
 describe('Protocols with Modules', () => {
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/home.spec.js b/protocol-designer/cypress/integration/ot2Home.spec.js
similarity index 87%
rename from protocol-designer/cypress/integration/home.spec.js
rename to protocol-designer/cypress/integration/ot2Home.spec.js
index cdbe5911de7..d649896d878 100644
--- a/protocol-designer/cypress/integration/home.spec.js
+++ b/protocol-designer/cypress/integration/ot2Home.spec.js
@@ -1,6 +1,7 @@
-describe('The Home Page', () => {
+describe('The OT-2 Home Page', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/settings.spec.js b/protocol-designer/cypress/integration/settings.spec.js
index 79be0dd400e..6c381d1f45f 100644
--- a/protocol-designer/cypress/integration/settings.spec.js
+++ b/protocol-designer/cypress/integration/settings.spec.js
@@ -3,6 +3,7 @@ describe('The Settings Page', () => {
 
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
   })
 
   it('displays the announcement modal and clicks "GOT IT!" to close it', () => {
diff --git a/protocol-designer/cypress/integration/sidebar.spec.js b/protocol-designer/cypress/integration/sidebar.spec.js
index 75fc193f78f..1511dbc9941 100644
--- a/protocol-designer/cypress/integration/sidebar.spec.js
+++ b/protocol-designer/cypress/integration/sidebar.spec.js
@@ -1,6 +1,7 @@
 describe('Desktop Navigation', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
   })
 
diff --git a/protocol-designer/cypress/integration/transferSettings.spec.js b/protocol-designer/cypress/integration/transferSettings.spec.js
index 6d341888b7b..cf5c7d92dba 100644
--- a/protocol-designer/cypress/integration/transferSettings.spec.js
+++ b/protocol-designer/cypress/integration/transferSettings.spec.js
@@ -44,6 +44,7 @@ function enterBatchEdit() {
 describe('Advanced Settings for Transfer Form', () => {
   before(() => {
     cy.visit('/')
+    cy.get('button').contains('Create new OT-2 protocol').click()
     cy.closeAnnouncementModal()
     importProtocol()
     openDesignTab()
diff --git a/protocol-designer/src/components/App.tsx b/protocol-designer/src/components/App.tsx
index a72cd1162fd..8236770eb0e 100644
--- a/protocol-designer/src/components/App.tsx
+++ b/protocol-designer/src/components/App.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { ProtocolEditor } from './ProtocolEditor'
-
 import '../css/reset.css'
+import { ProtocolEditor } from './ProtocolEditor'
 
 export function App(): JSX.Element {
   return (
diff --git a/protocol-designer/src/components/FlexProtocolEditor/CreateFlexFileForm.tsx b/protocol-designer/src/components/FlexProtocolEditor/CreateFlexFileForm.tsx
new file mode 100644
index 00000000000..17017c67f53
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/CreateFlexFileForm.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { i18n } from '../../localization'
+import { FlexProtocolEditorComponent } from './FlexProtocolEditor'
+import { StyledText } from './StyledText'
+import styles from './FlexComponents.css'
+import { UpdateConfirmation } from './FlexUpdateConfirmation'
+import { actions as navActions } from '../../navigation'
+import { useDispatch } from 'react-redux'
+import { FlexHeadingButtonGroup } from './FlexFileDetails'
+
+function FlexFormComponent(): JSX.Element {
+  const dispatch = useDispatch()
+  const [showConfirmation, setShowConfirmation] = useState(false)
+
+  const handleCancelClick = (): void => {
+    setShowConfirmation(false)
+  }
+
+  const handleConfirmClick = (): void => {
+    // handle the update action here
+    dispatch(navActions.navigateToPage('landing-page'))
+    setShowConfirmation(false)
+  }
+
+  function protocolCancelClick(): void {
+    setShowConfirmation(true)
+  }
+
+  return (
+    <>
+      {Boolean(showConfirmation) && (
+        <>
+          <UpdateConfirmation
+            confirmationTitle={i18n.t(
+              'flex.cancel_create_protocol.confirmation_title'
+            )}
+            confirmationMessage={i18n.t(
+              'flex.cancel_create_protocol.confirmation_message'
+            )}
+            cancelButtonName={i18n.t(
+              'flex.cancel_create_protocol.cancel_button_name'
+            )}
+            continueButtonName={i18n.t(
+              'flex.cancel_create_protocol.continue_button_name'
+            )}
+            handleCancelClick={handleCancelClick}
+            handleConfirmClick={handleConfirmClick}
+          />
+        </>
+      )}
+      <div className={styles.flex_header}>
+        <div className={styles.flex_title}>
+          <StyledText as="h1">{i18n.t('flex.header.title')}</StyledText>
+          <FlexHeadingButtonGroup
+            protocolCancelClickProps={protocolCancelClick}
+          />
+        </div>
+        <StyledText as="h5" className={styles.right_end}>
+          {i18n.t('flex.header.required_fields')}
+        </StyledText>
+        <FlexProtocolEditorComponent
+          FlexFileDetails={{
+            isEditValue: false,
+            tabIdValue: undefined,
+            formProps: undefined,
+          }}
+        />
+      </div>
+    </>
+  )
+}
+
+export const CreateFlexFileForm = FlexFormComponent
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexComponents.css b/protocol-designer/src/components/FlexProtocolEditor/FlexComponents.css
new file mode 100644
index 00000000000..8a5718ed2a8
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexComponents.css
@@ -0,0 +1,238 @@
+@import '@opentrons/components';
+
+.pd_landing_page {
+  width: 655px;
+  text-align: center;
+  margin: 114px auto auto;
+}
+
+.ot_flex_logo {
+  width: 160px;
+  height: 160px;
+  margin: 50px auto;
+}
+
+.flex_landing_buttons_wrapper {
+  width: 367px;
+  margin: auto;
+}
+
+.flex_landing_button {
+  margin: 0.5rem 0;
+  height: 2rem;
+  width: 100%;
+}
+
+.flex_landing_button input {
+  position: fixed;
+  clip: rect(1px 1px 1px 1px);
+}
+
+.flex_header {
+  position: relative;
+  margin: 1.5rem auto auto;
+}
+
+.flex_header > * {
+  margin: 1rem 2.5rem;
+}
+
+.flex_title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cancel_button {
+  width: 109px;
+  height: 25px;
+  padding: 0 !important;
+}
+
+.right_end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.editor_form {
+  margin: 1rem;
+}
+
+.flex_round_tabs_button_wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.flex_round_tabs_button_100p {
+  width: 100%;
+  margin: 1rem;
+}
+
+.flex_round_tabs_button_50p {
+  width: 50%;
+  margin: 1rem;
+}
+
+.flex_sub_heading {
+  margin-top: 27px;
+}
+
+.textarea_input {
+  resize: none;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--c-light-gray);
+  border-radius: var(--bd-radius-form-field);
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  border: none;
+}
+
+.textarea_input:focus {
+  outline: none;
+}
+
+.textarea_input::placeholder {
+  color: var(--c-med-gray);
+}
+
+.textarea_input:focus-within {
+  background-color: var(--c-white);
+  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
+}
+
+.form_group {
+  width: 329px;
+  margin-top: 12px;
+  margin-bottom: 1rem;
+}
+
+.form_group > * {
+  margin-bottom: 5px;
+}
+
+/* Pipette Selection Module */
+.pipette_slection_mount {
+  display: flex;
+}
+
+.custom_tiprack_upload_file {
+  margin: 5px 0;
+  width: auto;
+}
+
+.custom_tiprack_upload_file input {
+  position: fixed;
+  clip: rect(1px 1px 1px 1px);
+}
+
+.disable_mount_option {
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Custom Tip Rack Selection */
+.filter_data {
+  display: flex;
+  flex-direction: column;
+  margin-left: 17%;
+  margin-top: -3%;
+}
+
+.custom_tiprack {
+  background: #d9e9fe;
+  width: fit-content;
+  padding: 5px;
+  margin: 2px 0;
+}
+
+.remove_button {
+  display: flex;
+  align-items: center;
+  color: #5181ff;
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.module_section {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.module_section > * {
+  margin-right: 3rem;
+  height: 7rem;
+}
+
+.mini_card {
+  width: 16.1rem;
+  min-width: 16.1rem;
+}
+
+.model_options {
+  flex: 1;
+}
+
+.line_separator {
+  border-bottom: 1px solid var(--c-light-gray);
+  margin: 1rem 0 1rem;
+  width: 100%;
+}
+
+.error_text {
+  color: var(--c-red);
+}
+
+.ptb_10 {
+  padding: 5px 0;
+}
+
+.pb_10 {
+  padding-bottom: 10px;
+}
+
+/* overlay styles */
+.confirmation_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+/* confirmation model styles */
+.confirmation_model {
+  width: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.confirmation_model_x_button {
+  margin: 0 !important;
+  padding: 0 !important;
+  color: #000 !important;
+}
+
+.confirmation_model button {
+  margin: 0 10px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  color: white;
+}
+
+.confirmation_model_cancel_button {
+  background: #6c757d;
+}
+
+.confirmation_model_proceed_button {
+  background: #0d6efd;
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.css b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.css
new file mode 100644
index 00000000000..51331690915
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.css
@@ -0,0 +1,84 @@
+@import '@opentrons/components';
+
+.pd_fd_header {
+  position: relative;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1.3rem;
+  font-weight: 900;
+  line-height: 1rem;
+}
+
+.pd_fd_sub_header {
+  font-size: 0.813rem;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.container {
+  margin: 1.5rem 3rem 1.5rem;
+}
+
+.bold_text {
+  font-weight: bold !important;
+}
+
+.heading_container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left_button {
+  order: 1;
+}
+
+.right_buttons {
+  order: 2;
+}
+
+.close_protocol_button {
+  margin-left: 5px;
+  color: red !important;
+}
+
+.line_separator {
+  border-bottom: 1px solid var(--c-light-gray);
+  margin: 30px 0 30px;
+  width: 100%;
+}
+
+.margin_bottom {
+  margin-bottom: 10px !important;
+}
+
+.margin_right {
+  margin-right: 5px;
+}
+
+.name_margin {
+  margin-left: 64px;
+}
+
+.desc_margin {
+  margin-left: 26px;
+}
+
+.other_margin {
+  margin-left: 11px;
+}
+
+.created_margin {
+  margin-left: 15px;
+}
+
+.author_margin {
+  margin-left: 57px;
+}
+
+.card_width {
+  width: 21rem;
+}
+
+.card_content {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.tsx
new file mode 100644
index 00000000000..a06c31dc4ca
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/FlexFileDetails.tsx
@@ -0,0 +1,431 @@
+import {
+  Card,
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  SecondaryButton,
+} from '@opentrons/components'
+import cx from 'classnames'
+import { format } from 'date-fns'
+import { Formik, FormikProps } from 'formik'
+import { mapValues } from 'lodash'
+import React, { useState } from 'react'
+import { connect, useDispatch } from 'react-redux'
+import { INITIAL_DECK_SETUP_STEP_ID } from '../../../constants'
+import {
+  FileMetadataFields,
+  selectors as fileSelectors,
+} from '../../../file-data'
+import { i18n } from '../../../localization'
+import {
+  InitialDeckSetup,
+  ModulesForEditModulesCard,
+  selectors as stepFormSelectors,
+} from '../../../step-forms'
+import { actions as steplistActions } from '../../../steplist'
+import { BaseState, ThunkDispatch } from '../../../types'
+import { ModuleDiagram } from '../../modules'
+import { StyledText } from '../StyledText'
+
+import flexStyles from '../FlexComponents.css'
+import styles from '../FlexFileDetails/FlexFileDetails.css'
+import { InstrumentGroup } from '../FlexInstrument/InstrumentGroup'
+import { FlexProtocolEditorComponent } from '../FlexProtocolEditor'
+import { actions as navActions } from '../../../navigation'
+import { UpdateConfirmation } from '../FlexUpdateConfirmation'
+export interface Props {
+  formValues: FileMetadataFields
+  instruments: React.ComponentProps<typeof InstrumentGroup>
+  swapPipettes: () => unknown
+  modules: ModulesForEditModulesCard
+}
+
+type PropsData = React.ComponentProps<typeof FlexFileDetailsComponent>
+interface SP {
+  instruments: PropsData['instruments']
+  formValues: PropsData['formValues']
+  _initialDeckSetup: InitialDeckSetup
+  modules: PropsData['modules']
+}
+
+// TODO(mc, 2020-02-28): explore l10n for these dates
+const DATE_ONLY_FORMAT = 'MMM dd, yyyy'
+const DATETIME_FORMAT = 'MMM dd, yyyy | h:mm a'
+
+export function FlexFileDetailsComponent(props: any): JSX.Element {
+  const [isEdit, setEdit] = useState(false)
+  const [selectedTabId, setTabId] = useState<number>(0)
+
+  if (isEdit) {
+    return (
+      <FlexProtocolEditorComponent
+        FlexFileDetails={{
+          isEditValue: isEdit,
+          tabIdValue: selectedTabId,
+          formProps: props,
+        }}
+      />
+    )
+  } else {
+    return (
+      <div>
+        {!Boolean(props.formValues) ? (
+          <NoFileSelection />
+        ) : (
+          <div className={flexStyles.wrapper}>
+            <div className={flexStyles.main_page_wrapper}>
+              <Formik
+                enableReinitialize
+                initialValues={props.formValues}
+                onSubmit={props.handleSubmit}
+              >
+                {({
+                  handleSubmit,
+                  values,
+                }: FormikProps<FileMetadataFields>) => (
+                  <form onSubmit={handleSubmit}>
+                    <div className={styles.container}>
+                      <FileProtocolInformation />
+                      <div className={styles.line_separator} />
+                      <div
+                        className={`${styles.heading_container} ${styles.margin_bottom}`}
+                      >
+                        <FileProtocolNameAndDescription
+                          nameDescriptionData={values}
+                        />
+                        <Flex>
+                          <EditButton
+                            editProps={setEdit}
+                            setTab={0}
+                            setTabId={setTabId}
+                          />
+                        </Flex>
+                      </div>
+                      <div className={styles.line_separator} />
+                      <div
+                        className={`${styles.heading_container} ${styles.margin_bottom}`}
+                      >
+                        <StyledText as="h3">
+                          {i18n.t('flex.file_tab.pipette')}
+                        </StyledText>
+                        <Flex>
+                          {Object.keys(props.instruments).length !== 1 && (
+                            <SecondaryButton
+                              onClick={e => {
+                                e.preventDefault()
+                                props.swapPipettes()
+                              }}
+                              className={styles.margin_right}
+                            >
+                              {i18n.t('flex.file_tab.swap_pipette')}
+                            </SecondaryButton>
+                          )}
+                          <EditButton
+                            editProps={setEdit}
+                            setTab={1}
+                            setTabId={setTabId}
+                          />
+                        </Flex>
+                      </div>
+                      <div>
+                        <InstrumentGroup {...props.instruments} />
+                      </div>
+                      <div className={styles.line_separator} />
+
+                      <div
+                        className={`${styles.heading_container} ${styles.margin_bottom}`}
+                      >
+                        <StyledText as="h3" className={styles.margin_bottom}>
+                          {i18n.t('flex.file_tab.modules')}
+                        </StyledText>
+                        <Flex>
+                          <EditButton
+                            editProps={setEdit}
+                            setTab={2}
+                            setTabId={setTabId}
+                          />
+                        </Flex>
+                      </div>
+                      <SelectedModules propsData={props} />
+                      <EditButton
+                        editProps={setEdit}
+                        setTab={2}
+                        setTabId={setTabId}
+                        addItems={true}
+                      />
+                    </div>
+                  </form>
+                )}
+              </Formik>
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+const FileProtocolInformation = (): JSX.Element => {
+  const dispatch = useDispatch()
+  const [showConfirmation, setShowConfirmation] = useState(false)
+
+  const handleCancelClick = (): any => {
+    setShowConfirmation(false)
+  }
+  const handleConfirmClick = (): any => {
+    // handle the update action here
+    dispatch(navActions.navigateToPage('landing-page'))
+    setShowConfirmation(false)
+  }
+
+  function protocolCancelClick(e: { preventDefault: () => void }): any {
+    e.preventDefault()
+    setShowConfirmation(true)
+  }
+  return (
+    <>
+      {Boolean(showConfirmation) && (
+        <>
+          <UpdateConfirmation
+            confirmationTitle={i18n.t(
+              'flex.cancel_create_protocol.confirmation_title'
+            )}
+            confirmationMessage={i18n.t(
+              'flex.cancel_create_protocol.confirmation_message'
+            )}
+            cancelButtonName={i18n.t(
+              'flex.cancel_create_protocol.cancel_button_name'
+            )}
+            continueButtonName={i18n.t(
+              'flex.cancel_create_protocol.continue_button_name'
+            )}
+            handleCancelClick={handleCancelClick}
+            handleConfirmClick={handleConfirmClick}
+          />
+        </>
+      )}
+      <div className={styles.heading_container}>
+        <div className={styles.pd_fd_header}>
+          <StyledText as="h2">{i18n.t('flex.file_tab.heading')}</StyledText>
+          <StyledText as="h5" className={styles.pd_fd_sub_header}>
+            {i18n.t('flex.file_tab.subheading')}
+          </StyledText>
+        </div>
+        <FlexHeadingButtonGroup
+          protocolCancelClickProps={protocolCancelClick}
+        />
+      </div>
+    </>
+  )
+}
+
+export const FlexHeadingButtonGroup = (props: {
+  protocolCancelClickProps: any
+}): JSX.Element => {
+  const { protocolCancelClickProps } = props
+  return (
+    <div className={styles.right_buttons}>
+      <SecondaryButton>{i18n.t('flex.file_tab.export')}</SecondaryButton>
+      <SecondaryButton
+        className={styles.close_protocol_button}
+        onClick={e => protocolCancelClickProps(e)}
+      >
+        {i18n.t('flex.file_tab.close_export')}
+      </SecondaryButton>
+    </div>
+  )
+}
+
+const NoFileSelection = (): JSX.Element => {
+  return (
+    <div className={flexStyles.wrapper}>
+      <div className={styles.container}>
+        <StyledText as="h2">{i18n.t('flex.file_tab.heading')}</StyledText>
+        <StyledText as="h5" className={styles.pd_fd_sub_header}>
+          {i18n.t('flex.file_tab.subheading')}
+        </StyledText>
+        <div className={styles.line_separator} />
+        <div>
+          <StyledText as="h4" className={styles.bold_text}>
+            {i18n.t('flex.file_tab.invalid_json')}
+          </StyledText>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// File related information name and description etc.
+const FileProtocolNameAndDescription = (props: {
+  nameDescriptionData: any
+}): JSX.Element => {
+  const { nameDescriptionData } = props
+  return (
+    <div>
+      <Flex className={cx(styles.heading_container, styles.margin_bottom)}>
+        <StyledText as="h3" className={styles.margin_bottom}>
+          {i18n.t('flex.file_tab.name_desc_title')}
+        </StyledText>
+      </Flex>
+      <Flex className={styles.margin_bottom}>
+        <StyledText as="h4" className={styles.bold_text}>
+          {i18n.t('flex.file_tab.name')}
+        </StyledText>
+        <StyledText as="h5" className={styles.name_margin}>
+          {nameDescriptionData.protocolName}
+        </StyledText>
+      </Flex>
+      <Flex className={styles.margin_bottom}>
+        <StyledText as="h4" className={styles.bold_text}>
+          {i18n.t('flex.file_tab.author')}
+        </StyledText>
+        <StyledText as="h5" className={styles.author_margin}>
+          {nameDescriptionData.author}
+        </StyledText>
+      </Flex>
+      <Flex className={styles.margin_bottom}>
+        <StyledText as="h4" className={styles.bold_text}>
+          {i18n.t('flex.file_tab.description')}
+        </StyledText>
+        <StyledText as="h5" className={styles.desc_margin}>
+          {nameDescriptionData.description}
+        </StyledText>
+      </Flex>
+      <Flex className={styles.margin_bottom}>
+        <StyledText as="h4" className={styles.bold_text}>
+          {i18n.t('flex.file_tab.date_created')}
+        </StyledText>
+        <StyledText as="h5" className={styles.created_margin}>
+          {nameDescriptionData.created &&
+            format(nameDescriptionData.created, DATE_ONLY_FORMAT)}
+        </StyledText>
+      </Flex>
+      <Flex className={styles.margin_bottom}>
+        <StyledText as="h4" className={styles.bold_text}>
+          {i18n.t('flex.file_tab.last_exported')}
+        </StyledText>
+        <StyledText as="h5" className={styles.other_margin}>
+          {nameDescriptionData.lastModified &&
+            format(nameDescriptionData.lastModified, DATETIME_FORMAT)}
+        </StyledText>
+      </Flex>
+    </div>
+  )
+}
+
+const EditButton = ({
+  editProps,
+  setTab,
+  setTabId,
+  addItems,
+}: any): JSX.Element => {
+  return (
+    <SecondaryButton
+      style={{ height: 'max-content' }}
+      onClick={e => {
+        e.preventDefault()
+        editProps(true)
+        setTabId(setTab)
+      }}
+    >
+      {addItems
+        ? i18n.t('flex.file_tab.add_items')
+        : i18n.t('flex.file_tab.edit')}
+    </SecondaryButton>
+  )
+}
+
+const SelectedModules = (props: { propsData: any }): JSX.Element => {
+  const { propsData } = props
+  const existingModules = getModuleData(propsData.modules)
+  return (
+    <>
+      {existingModules?.length > 0 ? (
+        existingModules.map((moduleType: any, i: number) => (
+          <div
+            className={` ${styles.card_width} ${styles.margin_bottom}`}
+            key={i}
+          >
+            <Card>
+              <div className={styles.card_content}>
+                <Flex>
+                  <ModuleDiagram
+                    type={moduleType.type}
+                    model={moduleType.model}
+                  />
+                  <Flex
+                    flexDirection={DIRECTION_COLUMN}
+                    marginLeft={SPACING.spacing4}
+                    marginTop={SPACING.spacing4}
+                    marginBottom={SPACING.spacing4}
+                  >
+                    <StyledText as="h4">
+                      {i18n.t(
+                        `modules.module_display_names.${moduleType.type}`
+                      )}
+                      - Slot {moduleType.slot}
+                    </StyledText>
+                  </Flex>
+                </Flex>
+              </div>
+            </Card>
+          </div>
+        ))
+      ) : (
+        <StyledText as="h4">
+          {i18n.t('flex.file_tab.no_modules_found')}
+        </StyledText>
+      )}
+    </>
+  )
+}
+
+export function getModuleData(modules: any): any {
+  const moduleData = []
+  for (const obj in modules) {
+    if (modules[obj] != null) moduleData.push(modules[obj])
+  }
+  return moduleData
+}
+
+const mapStateToProps = (state: BaseState): SP => {
+  return {
+    formValues: fileSelectors.getFileMetadata(state),
+    instruments: stepFormSelectors.getPipettesForInstrumentGroup(state),
+    modules: stepFormSelectors.getModulesForEditModulesCard(state),
+    _initialDeckSetup: stepFormSelectors.getInitialDeckSetup(state),
+  }
+}
+
+function mergeProps(
+  stateProps: SP,
+  dispatchProps: {
+    dispatch: ThunkDispatch<any>
+  }
+): Props {
+  const { _initialDeckSetup, ...passThruProps } = stateProps
+  const { dispatch } = dispatchProps
+  const swapPipetteUpdate = mapValues(_initialDeckSetup.pipettes, pipette => {
+    if (!pipette.mount) return pipette.mount
+    return pipette.mount === 'left' ? 'right' : 'left'
+  })
+  return {
+    ...passThruProps,
+    swapPipettes: () =>
+      dispatch(
+        steplistActions.changeSavedStepForm({
+          stepId: INITIAL_DECK_SETUP_STEP_ID,
+          update: {
+            pipetteLocationUpdate: swapPipetteUpdate,
+          },
+        })
+      ),
+  }
+}
+
+export const FlexFileDetails = connect(
+  mapStateToProps,
+  // @ts-expect-error(sa, 2021-6-21): TODO: refactor to use hooks api
+  null,
+  mergeProps
+)(FlexFileDetailsComponent)
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/index.ts b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/index.ts
new file mode 100644
index 00000000000..8006bf0f030
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexFileDetails/index.ts
@@ -0,0 +1 @@
+export * from './FlexFileDetails'
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InfoItem.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InfoItem.tsx
new file mode 100644
index 00000000000..299372efc31
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InfoItem.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import styles from './instrument.css'
+
+export interface InfoItemProps {
+  title: string
+  value: string
+  className?: string
+}
+
+/**
+ * Used by `InstrumentInfo` for its titled values.
+ * But if you're using this, you probably want `LabeledValue` instead.
+ */
+export function InfoItem(props: InfoItemProps): JSX.Element {
+  const { title, value, className } = props
+
+  return (
+    <div className={className}>
+      <h2 className={styles.title}>{title}</h2>
+      <span className={styles.value}>{value}</span>
+    </div>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentDiagram.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentDiagram.tsx
new file mode 100644
index 00000000000..7251d49148a
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentDiagram.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import cx from 'classnames'
+import singleSrc from '@opentrons/components/src/instrument/single_channel_GEN1_800px.png'
+import multiSrc from '@opentrons/components/src/instrument/multi-channel_GEN1_800px.png'
+import singleGEN2Src from '@opentrons/components/src/instrument/single-channel_GEN2_800px.png'
+import multiGEN2Src from '@opentrons/components/src/instrument/multi-channel_GEN2_800px.png'
+import styles from './instrument.css'
+
+import type { PipetteNameSpecs } from '@opentrons/shared-data'
+
+import type { StyleProps } from '@opentrons/components'
+import { Mount } from '@opentrons/components/src/robot-types'
+import { Box } from '@opentrons/components'
+
+export interface InstrumentDiagramProps extends StyleProps {
+  pipetteSpecs?: Pick<PipetteNameSpecs, 'displayCategory' | 'channels'> | null
+  className?: string
+  mount: Mount
+}
+
+export function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element {
+  const { pipetteSpecs, mount, className, ...styleProps } = props
+  const { displayCategory, channels } = pipetteSpecs || {}
+  let imgSrc
+  switch (displayCategory) {
+    case 'GEN2': {
+      imgSrc = channels === 1 ? singleGEN2Src : multiGEN2Src
+      break
+    }
+    case 'GEN1':
+    default: {
+      imgSrc = channels === 1 ? singleSrc : multiSrc
+    }
+  }
+  return (
+    <Box className={className} {...styleProps} style={{ minWidth: 'auto' }}>
+      <img
+        className={cx({ [styles.flipped_image]: mount === 'right' })}
+        src={imgSrc}
+      />
+    </Box>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentGroup.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentGroup.tsx
new file mode 100644
index 00000000000..a29a785213e
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentGroup.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react'
+
+import { InstrumentInfo } from './InstrumentInfo'
+import styles from './instrument.css'
+
+import type { InstrumentInfoProps } from './InstrumentInfo'
+import { SecondaryButton } from '@opentrons/components'
+import { i18n } from '../../../localization'
+
+export interface InstrumentGroupProps {
+  showMountLabel?: boolean | null | undefined
+  left?: InstrumentInfoProps | null | undefined
+  right?: InstrumentInfoProps | null | undefined
+}
+
+const EMPTY_INSTRUMENT_PROPS = {
+  description: 'None',
+  tiprackModel: 'N/A',
+  isDisabled: false,
+}
+
+/**
+ * Renders a left and right pipette diagram & info.
+ * Takes child `InstrumentInfo` props in `right` and `left` props.
+ */
+export function InstrumentGroup(props: InstrumentGroupProps): JSX.Element {
+  const { left, right } = props
+  const Hide96CH = props.left?.description.includes('Flex 96-Channel 1000 μL')
+
+  const leftProps = left || { ...EMPTY_INSTRUMENT_PROPS, mount: 'left' }
+  const rightProps = right || { ...EMPTY_INSTRUMENT_PROPS, mount: 'right' }
+  return (
+    <section className={styles.pipette_group}>
+      {/* {props.left && ( */}
+      <InstrumentInfo
+        {...leftProps}
+        showMountLabel={Object.keys(props).length !== 1}
+      />
+      {/* )} */}
+      {props.right ? (
+        <InstrumentInfo
+          {...rightProps}
+          showMountLabel={Object.keys(props).length !== 1}
+        />
+      ) : (
+        Hide96CH && (
+          <SecondaryButton
+            onClick={e => {
+              e.preventDefault()
+            }}
+          >
+            {i18n.t('flex.file_tab.add_pipette')}
+          </SecondaryButton>
+        )
+      )}
+    </section>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentInfo.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentInfo.tsx
new file mode 100644
index 00000000000..3869631fa8d
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/InstrumentInfo.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import cx from 'classnames'
+
+import { InfoItem } from './InfoItem'
+import { InstrumentDiagram } from './InstrumentDiagram'
+import styles from './instrument.css'
+
+import type { InstrumentDiagramProps } from './InstrumentDiagram'
+import { Mount } from '@opentrons/components/src/robot-types'
+import { Card } from '@opentrons/components'
+
+export interface InstrumentInfoProps {
+  /** 'left' or 'right' */
+  mount: Mount
+  /** if true, show labels 'LEFT PIPETTE' / 'RIGHT PIPETTE' */
+  showMountLabel?: boolean | null
+  /** human-readable description, eg 'p300 Single-channel' */
+  description: string
+  /** paired tiprack model */
+  tiprackModel?: string
+  /** if disabled, pipette & its info are grayed out */
+  isDisabled: boolean
+  /** specs of mounted pipette */
+  pipetteSpecs?: InstrumentDiagramProps['pipetteSpecs'] | null
+  /** classes to apply */
+  className?: string
+  /** classes to apply to the info group child */
+  infoClassName?: string
+  /** children to display under the info */
+  children?: React.ReactNode
+}
+
+export function InstrumentInfo(props: InstrumentInfoProps): JSX.Element {
+  const className = cx(
+    styles.pipette,
+    styles[props.mount],
+    { [styles.disabled]: props.isDisabled },
+    props.className
+  )
+  return (
+    <div style={{ marginBottom: 10 }}>
+      <Card>
+        <div className={className}>
+          <InstrumentDiagram
+            pipetteSpecs={props.pipetteSpecs}
+            className={styles.pipette_icon}
+            mount={props.mount}
+          />
+
+          <div className={cx(styles.pipette_info, props.infoClassName)}>
+            <InfoItem
+              title={
+                props.showMountLabel ? `${props.mount} pipette` : `pipette`
+              }
+              value={props.description}
+            />
+            {props.tiprackModel && (
+              <InfoItem title={'tip rack'} value={props.tiprackModel} />
+            )}
+            {props.children}
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/index.ts b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/index.ts
new file mode 100644
index 00000000000..73d553d04c4
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/index.ts
@@ -0,0 +1,4 @@
+export * from './InfoItem'
+export * from './InstrumentDiagram'
+export * from './InstrumentGroup'
+export * from './InstrumentInfo'
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/instrument.css b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/instrument.css
new file mode 100644
index 00000000000..a3db4f2e0e0
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexInstrument/instrument.css
@@ -0,0 +1,57 @@
+@import '@opentrons/components';
+
+.pipette_group {
+  padding-bottom: 2rem;
+  display: grid;
+  width: 21rem;
+}
+
+.pipette {
+  display: flex;
+  vertical-align: top;
+}
+
+.left {
+  grid-area: left;
+  grid-template-columns: 80% 20%;
+  grid-template-areas: 'info img';
+  margin-right: 3rem;
+}
+
+.right {
+  grid-area: right;
+  grid-template-columns: 40% 80%;
+  grid-template-areas: 'img info';
+}
+
+.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.pipette_info {
+  grid-area: info;
+  min-height: 8rem;
+}
+
+.flipped_image {
+  transform: scaleX(-1);
+  filter: FlipH;
+}
+
+.pipette_icon {
+  grid-area: img;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-semibold);
+  color: var(--c-font-dark);
+  text-transform: capitalize;
+  margin: 2rem 0 0.25rem;
+}
+
+.value {
+  @apply --font-body-2-dark;
+}
\ No newline at end of file
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleData.ts b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleData.ts
new file mode 100644
index 00000000000..c37032c26aa
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleData.ts
@@ -0,0 +1,180 @@
+import {
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  HEATERSHAKER_MODULE_TYPE,
+  ModuleType,
+  MAGNETIC_BLOCK_TYPE,
+} from '@opentrons/shared-data'
+import { DropdownOption } from '@opentrons/components'
+import { SPAN7_8_10_11_SLOT } from '../../../constants'
+export const SUPPORTED_MODULE_TYPES: ModuleType[] = [
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+]
+
+type SupportedSlotMap = Record<ModuleType, DropdownOption[]>
+
+export const SUPPORTED_MODULE_SLOTS: SupportedSlotMap = {
+  [MAGNETIC_BLOCK_TYPE]: [
+    {
+      name: 'Slot C1 (default)',
+      value: '4',
+    },
+  ],
+  [TEMPERATURE_MODULE_TYPE]: [
+    {
+      name: 'Slot D3 (default)',
+      value: '3',
+    },
+  ],
+  [THERMOCYCLER_MODULE_TYPE]: [
+    {
+      name: 'Thermocycler slots',
+      value: SPAN7_8_10_11_SLOT,
+    },
+  ],
+  [HEATERSHAKER_MODULE_TYPE]: [
+    {
+      name: 'Slot D1 (default)',
+      value: '1',
+    },
+  ],
+  [MAGNETIC_MODULE_TYPE]: [],
+}
+
+const ALL_MODULE_SLOTS: DropdownOption[] = [
+  {
+    name: 'Slot A1',
+    value: '10',
+  },
+  {
+    name: 'Slot A2',
+    value: '11',
+  },
+  {
+    name: 'Slot A3',
+    value: '12',
+  },
+  {
+    name: 'Slot B1',
+    value: '7',
+  },
+  {
+    name: 'Slot B2',
+    value: '8',
+  },
+  {
+    name: 'Slot B3',
+    value: '9',
+  },
+  {
+    name: 'Slot C1',
+    value: '4',
+  },
+  {
+    name: 'Slot C2',
+    value: '5',
+  },
+  {
+    name: 'Slot C3',
+    value: '6',
+  },
+  {
+    name: 'Slot D1',
+    value: '1',
+  },
+  {
+    name: 'Slot D2',
+    value: '2',
+  },
+]
+
+const HEATER_SHAKER_SLOTS: DropdownOption[] = [
+  {
+    name: 'Slot A1',
+    value: '10',
+  },
+  {
+    name: 'Slot B1',
+    value: '7',
+  },
+  {
+    name: 'Slot C1',
+    value: '4',
+  },
+  {
+    name: 'Slot C3',
+    value: '6',
+  },
+  {
+    name: 'Slot D1',
+    value: '1',
+  },
+  {
+    name: 'Slot D3',
+    value: '3',
+  },
+]
+
+const TEMPERATURE_MODULE_SLOTS: DropdownOption[] = [
+  {
+    name: 'Slot A1',
+    value: '10',
+  },
+  {
+    name: 'Slot B1',
+    value: '7',
+  },
+  {
+    name: 'Slot B3',
+    value: '9',
+  },
+  {
+    name: 'Slot C1',
+    value: '4',
+  },
+  {
+    name: 'Slot C3',
+    value: '6',
+  },
+  {
+    name: 'Slot D1',
+    value: '1',
+  },
+  {
+    name: 'Slot D3',
+    value: '3',
+  },
+]
+
+export function getAllFlexModuleSlotsByType(
+  moduleType: ModuleType
+): DropdownOption[] {
+  const supportedSlotOption = SUPPORTED_MODULE_SLOTS[moduleType]
+
+  if (moduleType === THERMOCYCLER_MODULE_TYPE) {
+    return supportedSlotOption
+  }
+
+  if (moduleType === HEATERSHAKER_MODULE_TYPE) {
+    return supportedSlotOption.concat(
+      HEATER_SHAKER_SLOTS.filter(s => s.value !== supportedSlotOption[0].value)
+    )
+  }
+
+  if (moduleType === TEMPERATURE_MODULE_TYPE) {
+    return supportedSlotOption.concat(
+      TEMPERATURE_MODULE_SLOTS.filter(
+        s => s.value !== supportedSlotOption[0].value
+      )
+    )
+  }
+
+  const allOtherSlots = ALL_MODULE_SLOTS.filter(
+    s => s.value !== supportedSlotOption[0].value
+  )
+  return supportedSlotOption.concat(allOtherSlots)
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleDiagram.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleDiagram.tsx
new file mode 100644
index 00000000000..8c5cdba09de
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/FlexModuleDiagram.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react'
+import styles from '../../modules/styles.css'
+import {
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  ModuleType,
+  MAGNETIC_MODULE_V1,
+  MAGNETIC_MODULE_V2,
+  TEMPERATURE_MODULE_V1,
+  TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_V1,
+  ModuleModel,
+  HEATERSHAKER_MODULE_TYPE,
+  HEATERSHAKER_MODULE_V1,
+  THERMOCYCLER_MODULE_V2,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_BLOCK_V1,
+} from '@opentrons/shared-data'
+
+interface Props {
+  type: ModuleType
+  model: ModuleModel
+}
+
+type ModuleImg = {
+  [type in ModuleType]: {
+    [model in ModuleModel]?: string
+  }
+}
+
+const MODULE_IMG_BY_TYPE: ModuleImg = {
+  [MAGNETIC_MODULE_TYPE]: {
+    [MAGNETIC_MODULE_V1]: require('../../../images/modules/magdeck_gen1.png'),
+    [MAGNETIC_MODULE_V2]: require('../../../images/modules/magdeck_gen2.png'),
+  },
+  [TEMPERATURE_MODULE_TYPE]: {
+    [TEMPERATURE_MODULE_V1]: require('../../../images/modules/tempdeck_gen1.png'),
+    [TEMPERATURE_MODULE_V2]: require('../../../images/modules/tempdeck_gen2.png'),
+  },
+  [THERMOCYCLER_MODULE_TYPE]: {
+    [THERMOCYCLER_MODULE_V1]: require('../../../images/modules/thermocycler.jpg'),
+    [THERMOCYCLER_MODULE_V2]: require('../../../images/modules/thermocycler_gen2.png'),
+  },
+  [HEATERSHAKER_MODULE_TYPE]: {
+    [HEATERSHAKER_MODULE_V1]: require('../../../images/modules/heatershaker.png'),
+  },
+  [MAGNETIC_BLOCK_TYPE]: {
+    [MAGNETIC_BLOCK_V1]: require('../../../images/modules/mag_block.png'),
+  },
+}
+
+export function FlexSupportedModuleDiagram(props: Props): JSX.Element {
+  const model = MODULE_IMG_BY_TYPE[props.type][props.model]
+  return <img className={styles.module_diagram} src={model} alt={props.type} />
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexModules/MiniCard.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/MiniCard.tsx
new file mode 100644
index 00000000000..1458383fcce
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/MiniCard.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+import { SPACING, Flex, COLORS, BORDERS } from '@opentrons/components'
+
+import type { StyleProps } from '@opentrons/components'
+
+interface MiniCardProps extends StyleProps {
+  onClick: (event: React.MouseEvent<HTMLDivElement>) => void
+  isSelected: boolean
+  children: React.ReactNode
+  isError?: boolean
+  value: string
+}
+const unselectedOptionStyles = css`
+  background-color: ${COLORS.white};
+  border: 1px solid ${COLORS.medGreyEnabled};
+  border-radius: ${BORDERS.radiusSoftCorners};
+  padding: ${SPACING.spacing4};
+  width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${COLORS.medGreyHover};
+  }
+`
+const selectedOptionStyles = css`
+  ${unselectedOptionStyles}
+  border: 1px solid ${COLORS.blueEnabled};
+  background-color: ${COLORS.lightBlue};
+
+  &:hover {
+    border: 1px solid ${COLORS.blueEnabled};
+    background-color: ${COLORS.lightBlue};
+  }
+`
+
+const errorOptionStyles = css`
+  ${selectedOptionStyles}
+  border: 1px solid ${COLORS.errorEnabled};
+  background-color: ${COLORS.errorBackgroundLight};
+
+  &:hover {
+    border: 1px solid ${COLORS.errorEnabled};
+    background-color: ${COLORS.errorBackgroundLight};
+  }
+`
+
+export function MiniCard(props: MiniCardProps): JSX.Element {
+  const { children, onClick, isSelected, isError = false } = props
+
+  const selectedWrapperStyles = isError
+    ? errorOptionStyles
+    : selectedOptionStyles
+  const wrapperStyles = isSelected
+    ? selectedWrapperStyles
+    : unselectedOptionStyles
+
+  return (
+    <Flex onClick={onClick} css={wrapperStyles}>
+      {children}
+    </Flex>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexModules/index.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/index.tsx
new file mode 100644
index 00000000000..5e3a91edd22
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexModules/index.tsx
@@ -0,0 +1,191 @@
+import React, { useState } from 'react'
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  SPACING,
+  FormGroup,
+  DropdownField,
+  useHoverTooltip,
+} from '@opentrons/components'
+import { i18n } from '../../../localization'
+import { StyledText } from '../StyledText'
+import styles from '../FlexComponents.css'
+import {
+  ModuleType,
+  ModuleModel,
+  OT3_STANDARD_MODEL,
+  MAGNETIC_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
+} from '@opentrons/shared-data'
+import {
+  DEFAULT_MODEL_FOR_MODULE_TYPE,
+  MODELS_FOR_MODULE_TYPE,
+} from '../../../constants'
+import { MiniCard } from './MiniCard'
+import { ConnectedSlotMap } from '../../modals/EditModulesModal/ConnectedSlotMap'
+import { getAllFlexModuleSlotsByType } from './FlexModuleData'
+import { PDAlert } from '../../alerts/PDAlert'
+import { ModuleOnDeck } from '../../../step-forms'
+import { ModelModuleInfo } from '../../EditModules'
+import { useFormikContext } from 'formik'
+import { FlexSupportedModuleDiagram } from './FlexModuleDiagram'
+
+export interface EditModulesModalProps {
+  moduleType: ModuleType
+  moduleOnDeck: ModuleOnDeck | null
+  onCloseClick: () => unknown
+  editModuleModel: (model: ModuleModel) => unknown
+  editModuleSlot: (slot: string) => unknown
+  displayModuleWarning: (module: ModelModuleInfo) => unknown
+}
+
+export interface EditModulesFormValues {
+  selectedModel: ModuleModel | null
+  selectedSlot: string
+}
+
+interface FormValues {
+  modulesByType: any
+  selectedSlot: string
+}
+
+interface SupportedSlots {
+  [key: string]: string
+}
+
+function FlexModulesComponent(): JSX.Element {
+  const {
+    values: { modulesByType },
+    handleChange,
+    handleBlur,
+    setFieldValue,
+    errors,
+  } = useFormikContext<FormValues>()
+  // @ts-expect-error(sa, 2021-6-21): Object.keys not smart enough to take the keys of FormModulesByType
+  const modules: ModuleType[] = Object.keys(modulesByType)
+
+  const supportedSlots: SupportedSlots = {
+    [MAGNETIC_MODULE_TYPE]: 'GEN1',
+    [TEMPERATURE_MODULE_TYPE]: 'GEN2',
+    [THERMOCYCLER_MODULE_TYPE]: 'GEN2',
+    [HEATERSHAKER_MODULE_TYPE]: 'GEN1',
+    [MAGNETIC_BLOCK_TYPE]: 'GEN1',
+  }
+
+  const [selectedModules, setSelectedModules] = useState<string[]>([])
+  const toggleModuleSelection = (moduleType: string): void => {
+    setSelectedModules([...selectedModules, moduleType])
+    if (selectedModules.includes(moduleType)) {
+      setSelectedModules(
+        selectedModules.filter((name: string) => name !== moduleType)
+      )
+      setFieldValue(`modulesByType.${moduleType}.onDeck`, false)
+    } else {
+      setSelectedModules([...selectedModules, moduleType])
+      setFieldValue(`modulesByType.${moduleType}.onDeck`, true)
+    }
+  }
+
+  const slotIssue =
+    errors?.selectedSlot && errors.selectedSlot.includes('occupied')
+
+  const [targetProps] = useHoverTooltip({
+    placement: 'top',
+  })
+
+  return (
+    <>
+      <StyledText as="h2">
+        {i18n.t('flex.modules_selection.heading')}
+      </StyledText>
+
+      {slotIssue && (
+        <PDAlert
+          alertType="warning"
+          title={i18n.t('alert.module_placement.SLOT_OCCUPIED.title')}
+          description={''}
+        />
+      )}
+
+      <div className={styles.flex_sub_heading}>
+        <>
+          {modules.map((moduleType, i) => {
+            const label = i18n.t(`modules.module_display_names.${moduleType}`)
+            const defaultModel = DEFAULT_MODEL_FOR_MODULE_TYPE[moduleType]
+            const selectedModel = modulesByType[moduleType].model
+            const moduleTypeAccessor = `modulesByType.${moduleType}`
+            return (
+              <div className={styles.module_section} key={i}>
+                <div className={styles.mini_card}>
+                  <div>
+                    <MiniCard
+                      isSelected={selectedModules.includes(moduleType)}
+                      isError={false}
+                      value={moduleType}
+                      onClick={() => toggleModuleSelection(moduleType)}
+                    >
+                      <FlexSupportedModuleDiagram
+                        type={moduleType}
+                        model={selectedModel ?? defaultModel}
+                      />
+                      <Flex
+                        flexDirection={DIRECTION_COLUMN}
+                        marginLeft={SPACING.spacing4}
+                        marginTop={SPACING.spacing4}
+                        marginBottom={SPACING.spacing4}
+                      >
+                        <StyledText as="h4">{label}</StyledText>
+                      </Flex>
+                    </MiniCard>
+                  </div>
+                </div>
+
+                {/* Deck Map Selecetion */}
+                {modulesByType[moduleType].onDeck && (
+                  <>
+                    <FormGroup label="Model" className={styles.model_options}>
+                      <DropdownField
+                        tabIndex={i}
+                        name={`${moduleTypeAccessor}.model`}
+                        options={MODELS_FOR_MODULE_TYPE[moduleType].filter(
+                          ({ name }) => name === supportedSlots[moduleType]
+                        )}
+                        value={selectedModel}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                      />
+                    </FormGroup>
+
+                    <FormGroup
+                      label="Position"
+                      {...targetProps}
+                      className={styles.model_options}
+                    >
+                      <DropdownField
+                        tabIndex={1}
+                        name={`modulesByType.${moduleType}.slot`}
+                        options={getAllFlexModuleSlotsByType(moduleType)}
+                        value={modulesByType[moduleType].slot}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                      />
+                    </FormGroup>
+                    <ConnectedSlotMap
+                      fieldName={`modulesByType.${moduleType}.slot`}
+                      robotType={OT3_STANDARD_MODEL}
+                    />
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </>
+      </div>
+    </>
+  )
+}
+
+export const FlexModules = FlexModulesComponent
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/FlexProtocolName.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/FlexProtocolName.tsx
new file mode 100644
index 00000000000..be40138b616
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/FlexProtocolName.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { FormGroup, InputField } from '@opentrons/components'
+import { i18n } from '../../../localization'
+import { StyledText } from '../StyledText'
+import styles from '../FlexComponents.css'
+import { useFormikContext } from 'formik'
+
+interface flexProtocolName {
+  fields: { name: string; author: string; description: string }
+  handleChange: () => void
+  handleBlur: () => void
+}
+
+function FlexProtocolNameComponent(): JSX.Element {
+  const {
+    values,
+    errors,
+    touched,
+    handleChange,
+    handleBlur,
+  } = useFormikContext<flexProtocolName>()
+
+  return (
+    <>
+      <StyledText as="h2">
+        {i18n.t('flex.name_and_description.heading')}
+      </StyledText>
+      <div className={styles.flex_sub_heading}>
+        <StyledText as="h5">
+          {i18n.t('flex.name_and_description.choose_name')}
+        </StyledText>
+      </div>
+
+      <FormGroup className={styles.form_group}>
+        <StyledText as="p">
+          {i18n.t('flex.name_and_description.protocol_name')}
+        </StyledText>
+        <InputField
+          autoFocus
+          tabIndex={1}
+          type="text"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.fields.name}
+          name="fields.name"
+        />
+        {Boolean(errors?.fields?.name) && touched?.fields?.name && (
+          <StyledText as="label" className={styles.error_text}>
+            {errors?.fields?.name}
+          </StyledText>
+        )}
+      </FormGroup>
+
+      <div className={styles.flex_sub_heading}>
+        <StyledText as="h5">
+          {i18n.t('flex.name_and_description.add_more_information')}
+        </StyledText>
+      </div>
+
+      <FormGroup className={styles.form_group}>
+        <StyledText as="p">
+          {i18n.t('flex.name_and_description.organization_author')}
+        </StyledText>
+        <InputField
+          tabIndex={2}
+          type="text"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.fields.author}
+          name="fields.author"
+        />
+      </FormGroup>
+
+      <FormGroup className={styles.form_group}>
+        <StyledText as="p">
+          {i18n.t('flex.name_and_description.protocol_description')}
+        </StyledText>
+        <textarea
+          tabIndex={3}
+          className={styles.textarea_input}
+          rows={4}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.fields.description}
+          name="fields.description"
+        />
+      </FormGroup>
+    </>
+  )
+}
+
+export const FlexProtocolName = FlexProtocolNameComponent
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/RadioSelect.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/RadioSelect.tsx
new file mode 100644
index 00000000000..f8db555a321
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/RadioSelect.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react'
+import groupBy from 'lodash/groupBy'
+import {
+  getAllPipetteNames,
+  getPipetteNameSpecs,
+  GEN1,
+  GEN3,
+} from '@opentrons/shared-data'
+import type { PipetteNameSpecs } from '@opentrons/shared-data'
+import { RadioGroup } from '@opentrons/components'
+import { pipetteNameBlocklist, pipetteSlot } from '../constant'
+import { useFormikContext } from 'formik'
+import type { ActionMeta } from 'react-select'
+
+export interface PipetteSelectProps {
+  /** currently selected value, optional in case selecting triggers immediate action */
+  pipetteName?: string | null
+  /** react-select change handler */
+  onPipetteChange: (
+    pipetteName: string | null,
+    e: ActionMeta<SelectOption>
+  ) => void
+  /** list of pipette names to omit */
+  nameBlocklist?: string[]
+  /** whether or not "None" shows up as the default option */
+  enableNoneOption?: boolean
+  /** input tabIndex */
+  tabIndex?: string | number
+  /** classes to apply to the top-level component */
+  className?: string
+  /** custom id to be applied. likely to be used as a data test id for e2e testing */
+  id?: string
+}
+
+const PIPETTE_SORT = ['maxVolume', 'channels'] as const
+// @ts-expect-error(mc, 2021-04-27): use TS type guard for filter
+const allPipetteNameSpecs: PipetteNameSpecs[] = getAllPipetteNames(
+  ...PIPETTE_SORT
+)
+  .map(getPipetteNameSpecs)
+  .filter(Boolean)
+
+const specsByCategory = groupBy(allPipetteNameSpecs, 'displayCategory')
+
+const specToOption = ({
+  name,
+  displayName,
+}: PipetteNameSpecs): { value: string; name: string } => ({
+  value: name,
+  name: displayName,
+})
+
+export interface SelectOption {
+  value: string
+  label?: string
+  isDisabled?: boolean
+}
+
+export const RadioSelect = ({ pipetteName, pipetteType }: any): JSX.Element => {
+  const { handleChange, handleBlur } = useFormikContext<any>()
+  const allowlist = ({ value }: SelectOption): boolean => {
+    return !pipetteNameBlocklist.some(n => n === value)
+  }
+  const gen3Options = specsByCategory[GEN3].map(specToOption).filter(allowlist)
+  const gen1Options = specsByCategory[GEN1].map(specToOption).filter(allowlist)
+  const groupedOptions = [
+    ...(gen3Options.length > 0 ? gen3Options : []),
+    ...(gen1Options.length > 0 ? gen1Options : []),
+  ]
+
+  const emptyMount = [
+    { value: 'LEAVE_SECOND_EMPTY', name: 'Leave Second Mount Empty' },
+  ]
+
+  const filteredGroupOptions = groupedOptions.filter(
+    groupedOption => groupedOption.value !== 'p1000_96'
+  )
+  const newGroupedOptions =
+    pipetteName.split('.')[1] === pipetteSlot.right
+      ? [...filteredGroupOptions, ...emptyMount]
+      : groupedOptions
+
+  return (
+    <RadioGroup
+      name={pipetteName}
+      value={pipetteType}
+      options={newGroupedOptions}
+      onChange={handleChange}
+      onBlur={handleBlur}
+    />
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/SelectPipette.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/SelectPipette.tsx
new file mode 100644
index 00000000000..563a514ebcd
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/SelectPipette.tsx
@@ -0,0 +1,158 @@
+import React from 'react'
+import cx from 'classnames'
+import { Flex, RadioGroup } from '@opentrons/components'
+import { blockMount, pipetteSlot } from '../constant'
+import { StyledText } from '../StyledText'
+import { RadioSelect } from './RadioSelect'
+import { i18n } from '../../../localization'
+import styles from '../FlexComponents.css'
+import { useFormikContext } from 'formik'
+import { TipRackOptions } from './TipRackList'
+
+interface SelectPipetteOptionProps {
+  pipetteName: string
+  changeIs96Selected: (arg: boolean) => unknown
+  isLeft96ChannelSelected: boolean
+}
+
+interface formikContextProps {
+  pipettesByMount: {
+    [key: string]: {
+      pipetteName: string
+    }
+  }
+  pipette: any
+}
+
+export const SelectPipetteOption: React.FC<SelectPipetteOptionProps> = ({
+  pipetteName,
+  changeIs96Selected,
+  isLeft96ChannelSelected,
+}) => {
+  const { values, errors } = useFormikContext<formikContextProps>()
+  const { pipettesByMount } = values
+  const { pipettesByMount: pipettesByMountError = {} } = errors
+  const is96ChannelSelected = checkSelectedPipette(
+    pipettesByMount[pipetteName].pipetteName
+  )
+
+  pipetteSlot.left === pipetteName && changeIs96Selected(is96ChannelSelected)
+  const className = cx({ disable_mount_option: is96ChannelSelected })
+
+  const pipetteHeaderText =
+    pipetteSlot.left === pipetteName
+      ? i18n.t('flex.pipette_selection.choose_first_pipette')
+      : i18n.t('flex.pipette_selection.choose_second_pipette')
+  return (
+    <div>
+      <Flex className={styles.pb_10}>
+        <StyledText as={'h2'}>{pipetteHeaderText}</StyledText>
+      </Flex>
+      {
+        <>
+          <StyledText as={'p'} className={styles.pb_10}>
+            {i18n.t('flex.pipette_selection.pipette_96_selection_note')}
+          </StyledText>
+          {/* Pipette Selection here */}
+          <Flex
+            className={
+              pipetteName === pipetteSlot.left
+                ? styles.pb_10
+                : !isLeft96ChannelSelected
+                ? styles.pb_10
+                : styles.disable_mount_option
+            }
+          >
+            <RadioSelect
+              pipetteName={`pipettesByMount.${pipetteName}.pipetteName`}
+              pipetteType={pipettesByMount[pipetteName].pipetteName}
+            />
+          </Flex>
+          {pipetteName === pipetteSlot.left && (
+            <StyledText as="label" className={styles.error_text}>
+              {pipettesByMountError.left?.pipetteName &&
+                pipettesByMountError.left.pipetteName}
+            </StyledText>
+          )}
+          {/* Pipette Mount Selection here */}
+          <hr />
+          {!is96ChannelSelected ? (
+            <>
+              <Flex className={cx(styles[className], styles.ptb_10)}>
+                <SelectPipetteMount
+                  pipetteName={pipetteName}
+                  is96ChannelSelected={isLeft96ChannelSelected}
+                />
+              </Flex>
+            </>
+          ) : (
+            <>{channel96SelectionNote(is96ChannelSelected)}</>
+          )}
+
+          <hr />
+          <div className={styles.pb_10}>
+            <TipRackOptions
+              pipetteName={pipetteName}
+              isLeft96ChannelSelected={isLeft96ChannelSelected}
+            />
+          </div>
+        </>
+      }
+    </div>
+  )
+}
+
+const checkSelectedPipette = (pipetteName: string): boolean => {
+  return blockMount.includes(pipetteName)
+}
+
+const channel96SelectionNote = (
+  is96ChannelSelected: boolean
+): JSX.Element | boolean => {
+  return (
+    is96ChannelSelected && (
+      <StyledText as={'p'} className={styles.ptb_10}>
+        {i18n.t('flex.pipette_selection.pippette_ocuupies_both_mount')}
+      </StyledText>
+    )
+  )
+}
+
+const SelectPipetteMount = (props: {
+  pipetteName: string
+  is96ChannelSelected: boolean
+}): JSX.Element => {
+  const {
+    values: { pipettesByMount, mountSide },
+    handleChange,
+    handleBlur,
+  } = useFormikContext<any>()
+  return (
+    <>
+      {props.pipetteName === 'left' ? (
+        <>
+          <RadioGroup
+            inline
+            name={`pipettesByMount.${props.pipetteName}.mount`}
+            value={pipettesByMount[props.pipetteName].mount}
+            options={mountSide}
+            onChange={handleChange}
+            onBlur={handleBlur}
+          />
+        </>
+      ) : props.is96ChannelSelected ? (
+        <StyledText as={'p'} className={styles.ptb_10}>
+          {i18n.t('flex.pipette_selection.pippette_ocuupies_both_mount')}
+        </StyledText>
+      ) : pipettesByMount[pipetteSlot.left].mount === 'left' ? (
+        <StyledText as={'p'} className={styles.ptb_10}>
+          {i18n.t('flex.pipette_selection.right_pipette_display')}
+        </StyledText>
+      ) : (
+        <StyledText as={'p'} className={styles.ptb_10}>
+          {i18n.t('flex.pipette_selection.left_pipette_display')}
+        </StyledText>
+      )}
+    </>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/TipRackList.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/TipRackList.tsx
new file mode 100644
index 00000000000..418f5a3dea0
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/TipRackList.tsx
@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { getLabwareDefsByURI } from '../../../labware-defs/selectors'
+import { useFormikContext } from 'formik'
+import {
+  blockedTipRackListForFlex,
+  customTiprackOption,
+  fontSize14,
+  pipetteSlot,
+} from '../constant'
+import {
+  CheckboxField,
+  DropdownOption,
+  Flex,
+  OutlineButton,
+} from '@opentrons/components'
+import { i18n } from '../../../localization'
+import { createCustomTiprackDef } from '../../../labware-defs/actions'
+import { StyledText } from '../StyledText'
+import cx from 'classnames'
+
+import styles from '../FlexComponents.css'
+import { reduce } from 'lodash'
+import { getLabwareDefURI, getLabwareDisplayName } from '@opentrons/shared-data'
+
+interface formikContextProps {
+  pipettesByMount: {
+    [key: string]: {
+      pipetteName: string
+      tiprackDefURI: []
+    }
+  }
+  pipette: any
+  isLeft96ChannelSelected: boolean
+}
+
+export const TipRackOptions = ({
+  pipetteName,
+  isLeft96ChannelSelected,
+}: any): JSX.Element => {
+  const dispatch = useDispatch()
+  const allLabware = useSelector(getLabwareDefsByURI)
+  const tiprackOptions = getFlexTiprackOptions(allLabware)
+  const [selected, setSelected] = useState<string[]>([])
+  const [customTipRack, setCustomTipRack] = useState(false)
+  const {
+    values,
+    errors,
+    setFieldValue,
+  } = useFormikContext<formikContextProps>()
+
+  const customTiprackFilteredData = [...tiprackOptions].filter(
+    (i: any) =>
+      i.namespace !== 'opentrons' && i.namespace !== customTiprackOption.value
+  )
+
+  const opentronsFlexTiprackData = [...tiprackOptions].filter(
+    (i: any) => i.namespace === 'opentrons'
+  )
+  opentronsFlexTiprackData.push(customTiprackOption)
+  const handleNameChange = (selected: string[]): any => {
+    setFieldValue(`pipettesByMount.${pipetteName}.tiprackDefURI`, selected[0])
+  }
+  const latestTipRackList = values.pipettesByMount[pipetteName].tiprackDefURI
+  useEffect(() => {
+    setSelected(latestTipRackList)
+  }, [latestTipRackList])
+
+  return (
+    <>
+      <section
+        className={
+          pipetteName === pipetteSlot.left
+            ? styles.pb_10
+            : !isLeft96ChannelSelected
+            ? styles.pb_10
+            : styles.disable_mount_option
+        }
+      >
+        {opentronsFlexTiprackData.map(({ name, value }: any, index: number) => {
+          const isChecked = selected.includes(value)
+          return (
+            <CheckboxField
+              key={index}
+              label={name}
+              name={name}
+              value={isChecked}
+              onChange={(e: any) => {
+                const { name, checked } = e.currentTarget
+                if (checked) {
+                  const tiprackCheckedData = [...selected, ...[value]]
+                  setSelected(tiprackCheckedData)
+                  handleNameChange(tiprackCheckedData)
+                  if (name === customTiprackOption.name) setCustomTipRack(true)
+                } else {
+                  const indexToRemove = selected.indexOf(name)
+                  if (indexToRemove !== -1) {
+                    selected.splice(indexToRemove, 1)
+                  }
+                  setSelected(selected)
+                  handleNameChange(selected)
+                  if (name === customTiprackOption.name) {
+                    setCustomTipRack(false)
+                  }
+                }
+              }}
+            ></CheckboxField>
+          )
+        })}
+      </section>
+
+      {customTiprackFilteredData.length > 0 && (
+        <ShowCustomTiprackList customTipRackProps={customTiprackFilteredData} />
+      )}
+      <Flex>
+        {customTipRack &&
+          customFileUpload(customTipRack, customTiprackFilteredData, dispatch)}
+      </Flex>
+      {pipetteName === pipetteSlot.left && (
+        <StyledText as="label" className={styles.error_text}>
+          {errors?.pipettesByMount?.left?.tiprackDefURI}
+        </StyledText>
+      )}
+    </>
+  )
+}
+
+function customFileUpload(
+  customTipRack: boolean,
+  customTiprackFilteredData: any[],
+  dispatch: any
+): JSX.Element {
+  return (
+    <OutlineButton
+      Component="label"
+      className={styles.custom_tiprack_upload_file}
+    >
+      {customTipRack && customTiprackFilteredData.length === 0
+        ? i18n.t('button.upload_custom_tip_rack')
+        : i18n.t('button.add_another_custom_tiprack')}
+      <input
+        type="file"
+        onChange={e => {
+          dispatch(createCustomTiprackDef(e))
+        }}
+      />
+    </OutlineButton>
+  )
+}
+
+function ShowCustomTiprackList({ customTipRackProps }: any): any {
+  // const [customTipRackPropsUpdated, setCustomTipRackProps] = useState(
+  //   customTipRackProps
+  // )
+  // useEffect(() => {
+  //   setCustomTipRackProps(customTipRackProps)
+  // }, [customTipRackProps])
+
+  const removeCustomTipRackFile = (fileName: string): void => {
+    // const updatedCustomTipRackProps = customTipRackPropsUpdated.filter(
+    //   (obj: { name: string }) => obj.name !== fileName
+    // )
+    // setCustomTipRackProps([...updatedCustomTipRackProps])
+  }
+  return (
+    <Flex className={styles.filter_data}>
+      {customTipRackProps.map(({ name }: any, index: number) => {
+        return (
+          <Flex className={styles.custom_tiprack} key={index}>
+            <StyledText as="p" className={fontSize14}>
+              {name}
+            </StyledText>
+            {'   '}
+            <StyledText
+              as="p"
+              className={cx(styles.remove_button, fontSize14)}
+              onClick={() => removeCustomTipRackFile(name)}
+            >
+              {i18n.t('button.remove_custom_tiprack')}
+            </StyledText>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+const getFlexTiprackOptions = (allLabware: any): any => {
+  type Values<T> = T[keyof T]
+  const tiprackOptions = reduce<typeof allLabware, DropdownOption[]>(
+    allLabware,
+    (acc, def: Values<typeof allLabware>) => {
+      if (def.metadata.displayCategory !== 'tipRack') return acc
+      return [
+        ...acc,
+        {
+          name: getLabwareDisplayName(def),
+          value: getLabwareDefURI(def),
+          namespace: def.namespace,
+        },
+      ]
+    },
+    []
+  )
+  const filteredTiprackOptions = tiprackOptions.filter(
+    ({ name }): any => !blockedTipRackListForFlex.includes(name)
+  )
+  return filteredTiprackOptions
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/index.ts b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/index.ts
new file mode 100644
index 00000000000..17607939a3e
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/index.ts
@@ -0,0 +1,2 @@
+export * from './FlexProtocolName'
+export * from './SelectPipette'
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexProtocolEditor.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexProtocolEditor.tsx
new file mode 100644
index 00000000000..2854d03cc37
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexProtocolEditor.tsx
@@ -0,0 +1,474 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Flex,
+  DIRECTION_COLUMN,
+  Box,
+  COLORS,
+  BORDERS,
+  SPACING,
+  NewPrimaryBtn,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
+} from '@opentrons/components'
+import {
+  HEATERSHAKER_MODULE_V1,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  THERMOCYCLER_MODULE_V1,
+  HEATERSHAKER_MODULE_TYPE,
+  ModuleModel,
+  SPAN7_8_10_11_SLOT,
+  TEMPERATURE_MODULE_V2,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_BLOCK_V1,
+  OT3_STANDARD_MODEL,
+  OT3_STANDARD_DECKID,
+} from '@opentrons/shared-data'
+import { Formik } from 'formik'
+import * as Yup from 'yup'
+import { i18n } from '../../localization'
+import { StyledText } from './StyledText'
+import styles from './FlexComponents.css'
+import { mountSide, navPillTabListLength, pipetteSlot } from './constant'
+import { FlexRoundTab } from './FlexRoundTab'
+import { DeckSlot } from '../../types'
+import { FlexProtocolName, SelectPipetteOption } from './FlexPillForm'
+import { FlexModules } from './FlexModules'
+import { connect, useDispatch } from 'react-redux'
+import { actions as navActions } from '../../navigation'
+import { reduce } from 'lodash'
+import assert from 'assert'
+import {
+  ModuleCreationArgs,
+  PipetteFieldsData,
+} from '../modals/FilePipettesModal'
+import { LabwareDefByDefURI } from '../../labware-defs'
+import { NewProtocolFields } from '../../load-file'
+import {
+  mapDispatchToProps,
+  mapStateToProps as newModalFileMapStateToProps,
+} from '../modals/NewFileModal'
+import { FlexFileDetails } from './FlexFileDetails'
+import { setRobotType } from '../../load-file/actions'
+type Props = React.ComponentProps<typeof FlexProtocolEditor>
+export interface FormModule {
+  onDeck: boolean
+  model: ModuleModel | null
+  slot: DeckSlot
+}
+
+export interface FormPipette {
+  pipetteName: string | null | undefined
+  mount: string | null | undefined
+  tiprackDefURI: any[]
+  isSelected: boolean
+}
+export interface FormPipettesByMount {
+  left: FormPipette
+  right: FormPipette
+}
+export interface InitialValues {
+  fields: { name: string; author: string; description: string }
+  mountSide: string
+  pipettesByMount: FormPipettesByMount
+  modulesByType: {
+    magneticBlockType: FormModule
+    temperatureModuleType: FormModule
+    thermocyclerModuleType: FormModule
+    heaterShakerModuleType: FormModule
+  }
+}
+
+interface FlexProtocolEditorComponentProps {
+  isEditValue: boolean
+  tabIdValue: number
+  formProps: any
+  onSave: (args: {
+    newProtocolFields: NewProtocolFields
+    pipettes: PipetteFieldsData[]
+    modules: ModuleCreationArgs[]
+  }) => void
+}
+
+const validationSchema = Yup.object().shape({
+  mountSide: Yup.string().required('Mount side is required'),
+  pipettesByMount: Yup.object().shape({
+    left: Yup.object().shape({
+      pipetteName: Yup.string().required('First pipette is required'),
+      // tiprackDefURI: Yup.array().min(
+      //   1,
+      //   'Select at least one tip rack for first pipette'
+      // ),
+      tiprackDefURI: Yup.string().required(
+        'Select at least one tip rack for first pipette'
+      ),
+    }),
+  }),
+})
+
+const initialFormValues: InitialValues = {
+  fields: {
+    name: '',
+    author: '',
+    description: '',
+  },
+  mountSide,
+  pipettesByMount: {
+    left: {
+      pipetteName: '',
+      mount: 'left',
+      tiprackDefURI: [],
+      isSelected: false,
+    },
+    right: {
+      pipetteName: '',
+      mount: 'right',
+      tiprackDefURI: [],
+      isSelected: false,
+    },
+  },
+  modulesByType: {
+    [HEATERSHAKER_MODULE_TYPE]: {
+      onDeck: false,
+      model: HEATERSHAKER_MODULE_V1,
+      slot: '1',
+    },
+    [MAGNETIC_BLOCK_TYPE]: {
+      onDeck: false,
+      model: MAGNETIC_BLOCK_V1,
+      slot: '4',
+    },
+    [TEMPERATURE_MODULE_TYPE]: {
+      onDeck: false,
+      model: TEMPERATURE_MODULE_V2,
+      slot: '3',
+    },
+    [THERMOCYCLER_MODULE_TYPE]: {
+      onDeck: false,
+      model: THERMOCYCLER_MODULE_V1, // Default to GEN1 for TC only
+      slot: SPAN7_8_10_11_SLOT,
+    },
+  },
+}
+
+const getInitialValues = (values: any): InitialValues => {
+  if (Boolean(values)) {
+    const { formValues, instruments, modules } = values
+    // Matching the form values
+    initialFormValues.fields = {
+      name: formValues.protocolName,
+      ...formValues,
+    }
+
+    // Matching the pipette values
+    initialFormValues.pipettesByMount.right.pipetteName =
+      instruments.right?.pipetteSpecs.name
+    initialFormValues.pipettesByMount.left.pipetteName =
+      instruments.left?.pipetteSpecs.name
+
+    // Matching the tip rack
+    initialFormValues.pipettesByMount.right.tiprackDefURI = instruments.right
+      ?.tiprackModel
+      ? [instruments.right.tiprackModel]
+      : []
+    initialFormValues.pipettesByMount.left.tiprackDefURI = instruments.left
+      ?.tiprackModel
+      ? [instruments.left.tiprackModel]
+      : []
+
+    // Matching the module values
+    if (modules.heaterShakerModuleType) {
+      initialFormValues.modulesByType[HEATERSHAKER_MODULE_TYPE].onDeck = true
+      initialFormValues.modulesByType[HEATERSHAKER_MODULE_TYPE].model =
+        modules.heaterShakerModuleType.model
+      initialFormValues.modulesByType[HEATERSHAKER_MODULE_TYPE].slot =
+        modules.heaterShakerModuleType.slot
+    }
+
+    if (values.modules.magneticModuleType) {
+      initialFormValues.modulesByType[MAGNETIC_BLOCK_TYPE].onDeck = true
+      initialFormValues.modulesByType[MAGNETIC_BLOCK_TYPE].model =
+        values.modules.magneticModuleType.model
+      initialFormValues.modulesByType[MAGNETIC_BLOCK_TYPE].slot =
+        values.modules.magneticModuleType.slot
+    }
+
+    if (modules.temperatureModuleType) {
+      initialFormValues.modulesByType[TEMPERATURE_MODULE_TYPE].onDeck = true
+      initialFormValues.modulesByType[TEMPERATURE_MODULE_TYPE].model =
+        modules.temperatureModuleType.model
+      initialFormValues.modulesByType[TEMPERATURE_MODULE_TYPE].slot =
+        modules.temperatureModuleType.slot
+    }
+
+    if (modules.thermocyclerModuleType) {
+      initialFormValues.modulesByType[THERMOCYCLER_MODULE_TYPE].onDeck = true
+      initialFormValues.modulesByType[THERMOCYCLER_MODULE_TYPE].model =
+        modules.thermocyclerModuleType.model
+      initialFormValues.modulesByType[THERMOCYCLER_MODULE_TYPE].slot =
+        modules.thermocyclerModuleType.slot
+    }
+
+    return initialFormValues
+  } else {
+    return initialFormValues
+  }
+}
+
+interface selectedTabProps {
+  selectedTab: number
+}
+
+const SelectComponent = (selectedTab: number): JSX.Element | null => {
+  const [is96ChannelSelected, setIs96ChangeSelected] = useState(false)
+  const { left, right } = pipetteSlot
+  switch (selectedTab) {
+    case 0:
+      return <FlexProtocolName />
+    case 1:
+      return (
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+        >
+          <SelectPipetteOption
+            pipetteName={left}
+            changeIs96Selected={setIs96ChangeSelected}
+            isLeft96ChannelSelected={is96ChannelSelected}
+          />
+          <SelectPipetteOption
+            pipetteName={right}
+            changeIs96Selected={setIs96ChangeSelected}
+            isLeft96ChannelSelected={is96ChannelSelected}
+          />
+        </Flex>
+      )
+    case 2:
+      return <FlexModules />
+    default:
+      return null
+  }
+}
+
+function FlexProtocolEditor({
+  isEditValue,
+  tabIdValue,
+  formProps,
+  onSave,
+}: FlexProtocolEditorComponentProps): JSX.Element {
+  const [selectedTab, setTab] = useState<number>(0)
+  const [redirectToDetails, setRedirectToDetails] = useState(false)
+  const dispatch = useDispatch()
+  const [isEdit, setEdit] = useState(false)
+  // On Redirction if page tab edit set to true
+  useEffect(() => {
+    if (isEditValue) {
+      setEdit(isEditValue)
+      setTab(tabIdValue)
+    }
+  }, [isEditValue, tabIdValue])
+
+  // Next button click
+  const handleNext = ({ selectedTab }: selectedTabProps): any => {
+    if (isEdit) {
+      // Redirect back to file details page
+      setRedirectToDetails(true)
+      return <FlexFileDetails />
+    } else {
+      const setTabNumber =
+        selectedTab >= 0 && selectedTab <= navPillTabListLength
+          ? selectedTab + 1
+          : selectedTab
+      setTab(setTabNumber)
+    }
+  }
+
+  // Previous button click
+  const handlePrevious = ({ selectedTab }: selectedTabProps): void => {
+    const setTabNumber =
+      selectedTab > 0 && selectedTab <= navPillTabListLength
+        ? selectedTab - 1
+        : selectedTab
+    setTab(setTabNumber)
+  }
+  const notOnFirstPage = selectedTab !== 0
+
+  const nextButton =
+    selectedTab === navPillTabListLength
+      ? isEdit
+        ? i18n.t('flex.round_tabs.update')
+        : i18n.t('flex.round_tabs.go_to_liquids_page')
+      : isEdit
+      ? i18n.t('flex.round_tabs.update')
+      : i18n.t('flex.round_tabs.next')
+
+  const handleSubmit = ({ values }: any): void => {
+    const newProtocolFields = values.fields
+
+    const pipettes = reduce<FormPipettesByMount, PipetteFieldsData[]>(
+      values.pipettesByMount,
+      (acc, formPipette: FormPipette, mount: string): PipetteFieldsData[] => {
+        assert(mount === 'left' || mount === 'right', `invalid mount: ${mount}`) // this is mostly for flow
+        // @ts-expect-error(sa, 2021-6-21): TODO validate that pipette names coming from the modal are actually valid pipette names on PipetteName type
+        return formPipette &&
+          formPipette.pipetteName &&
+          formPipette.tiprackDefURI &&
+          (mount === 'left' || mount === 'right')
+          ? [
+              ...acc,
+              {
+                mount,
+                name: formPipette.pipetteName,
+                tiprackDefURI: formPipette.tiprackDefURI,
+              },
+            ]
+          : acc
+      },
+      []
+    )
+
+    // NOTE: this is extra-explicit for flow. Reduce fns won't cooperate
+    // with enum-typed key like `{[ModuleType]: ___}`
+    // @ts-expect-error(sa, 2021-6-21): TS not smart enough to take real type from Object.keys
+    const moduleTypes: ModuleType[] = Object.keys(values.modulesByType)
+    const modules: ModuleCreationArgs[] = moduleTypes.reduce<
+      ModuleCreationArgs[]
+    >((acc, moduleType) => {
+      const formModule = values.modulesByType[moduleType]
+      return formModule?.onDeck
+        ? [
+            ...acc,
+            {
+              type: moduleType,
+              model: formModule.model || ('' as ModuleModel), // TODO: we need to validate that module models are of type ModuleModel
+              slot: formModule.slot,
+            },
+          ]
+        : acc
+    }, [])
+
+    onSave({ modules, newProtocolFields, pipettes })
+    dispatch(
+      setRobotType({ model: OT3_STANDARD_MODEL, deckId: OT3_STANDARD_DECKID })
+    )
+    dispatch(navActions.navigateToPage('liquids'))
+  }
+
+  return redirectToDetails ? (
+    <FlexFileDetails />
+  ) : (
+    <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex>
+        <FlexRoundTab
+          setCurrentTab={setTab}
+          currentTab={selectedTab}
+          isEdit={isEditValue}
+        />
+      </Flex>
+      <Box
+        backgroundColor={COLORS.white}
+        border={BORDERS.lineBorder}
+        // remove left upper corner border radius when first tab is active
+        borderRadius={selectedTab === 1 ? '0' : BORDERS.radiusSoftCorners}
+        padding={SPACING.spacing4}
+      >
+        {
+          <Formik
+            enableReinitialize
+            initialValues={getInitialValues(formProps)}
+            validateOnChange={true}
+            validationSchema={notOnFirstPage && validationSchema}
+            onSubmit={values => {
+              selectedTab === 2
+                ? handleSubmit({ values })
+                : handleNext({ selectedTab })
+            }}
+          >
+            {(props: {
+              errors: any
+              isValid: any
+              handleSubmit: () => void
+            }) => (
+              <form onSubmit={props.handleSubmit}>
+                <section className={styles.editor_form}>
+                  {SelectComponent(selectedTab)}
+                </section>
+                <div className={styles.flex_round_tabs_button_wrapper}>
+                  {notOnFirstPage && !isEdit && (
+                    <NewPrimaryBtn
+                      tabIndex={5}
+                      onClick={() => handlePrevious({ selectedTab })}
+                      className={styles.flex_round_tabs_button_50p}
+                    >
+                      <StyledText as="h3">
+                        {i18n.t('flex.round_tabs.previous')}
+                      </StyledText>
+                    </NewPrimaryBtn>
+                  )}
+                  <NewPrimaryBtn
+                    disabled={notOnFirstPage && !props.isValid}
+                    tabIndex={4}
+                    type="submit"
+                    className={
+                      notOnFirstPage
+                        ? styles.flex_round_tabs_button_50p
+                        : styles.flex_round_tabs_button_100p
+                    }
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      width: '50%',
+                    }}
+                  >
+                    <StyledText as="h3">{nextButton}</StyledText>
+                  </NewPrimaryBtn>
+                </div>
+              </form>
+            )}
+          </Formik>
+        }
+      </Box>
+    </Flex>
+  )
+}
+
+interface CreateNewProtocolArgs {
+  customLabware: LabwareDefByDefURI
+  newProtocolFields: NewProtocolFields
+  pipettes: PipetteFieldsData[]
+  modules: ModuleCreationArgs[]
+}
+
+interface SP {
+  _customLabware: LabwareDefByDefURI
+  _hasUnsavedChanges?: boolean | null
+}
+interface DP {
+  onCancel: () => unknown
+  _createNewProtocol: (arg0: CreateNewProtocolArgs) => void
+}
+function mergeProps(stateProps: SP, dispatchProps: DP, ownProps: any): Props {
+  const { isEditValue, tabIdValue, formProps } = ownProps.FlexFileDetails
+  return {
+    isEditValue,
+    tabIdValue,
+    formProps,
+    onSave: fields => {
+      if (
+        !stateProps._hasUnsavedChanges ||
+        window.confirm(i18n.t('alert.window.confirm_create_new'))
+      ) {
+        dispatchProps._createNewProtocol({
+          ...fields,
+          customLabware: stateProps._customLabware,
+        })
+      }
+    },
+  }
+}
+
+export const FlexProtocolEditorComponent = connect(
+  newModalFileMapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(FlexProtocolEditor)
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexRoundTab.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexRoundTab.tsx
new file mode 100644
index 00000000000..107db2bbada
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexRoundTab.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { RoundTab } from '@opentrons/components'
+import { navPillsNameTabList } from './constant'
+import { StyledText } from './StyledText'
+
+interface RoundTabsProps {
+  setCurrentTab: (tabIndex: number) => void
+  currentTab: number
+  isEdit: boolean
+}
+
+export const FlexRoundTab: React.FC<RoundTabsProps> = ({
+  setCurrentTab,
+  currentTab,
+  isEdit,
+}): JSX.Element => {
+  return (
+    <>
+      {navPillsNameTabList.map(({ name, navPillPage }, index) => {
+        return (
+          <RoundTab
+            key={index}
+            isCurrent={navPillPage.includes(currentTab)}
+            onClick={() => {
+              if (!isEdit) setCurrentTab(navPillPage[0])
+            }}
+            disabled={isEdit && !currentTab}
+          >
+            <StyledText as="h4">{name}</StyledText>
+          </RoundTab>
+        )
+      })}
+    </>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/FlexUpdateConfirmation.tsx b/protocol-designer/src/components/FlexProtocolEditor/FlexUpdateConfirmation.tsx
new file mode 100644
index 00000000000..003b88e39cd
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/FlexUpdateConfirmation.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import styles from './FlexComponents.css'
+import { StyledText } from './StyledText'
+
+interface UpdateConfirmationProps {
+  confirmationTitle: string
+  confirmationMessage: string
+  cancelButtonName: string
+  continueButtonName: string
+  handleCancelClick: any
+  handleConfirmClick: any
+}
+
+export const UpdateConfirmation = ({
+  confirmationTitle,
+  confirmationMessage,
+  cancelButtonName,
+  continueButtonName,
+  handleCancelClick,
+  handleConfirmClick,
+}: UpdateConfirmationProps): any => {
+  return (
+    <>
+      <div className={styles.confirmation_overlay}>
+        <div className={styles.confirmation_model}>
+          <div className={styles.flex_title}>
+            <StyledText as="h2">{confirmationTitle}</StyledText>
+            <button
+              className={styles.confirmation_model_x_button}
+              onClick={handleCancelClick}
+            >
+              <StyledText as="h4">X</StyledText>
+            </button>
+          </div>
+          <div className={styles.line_separator} />
+          <StyledText as="h4">{confirmationMessage}</StyledText>
+          <br />
+          <br />
+          <div className={styles.line_separator} />
+          <div className={styles.right_end}>
+            <button
+              className={styles.confirmation_model_cancel_button}
+              onClick={handleCancelClick}
+            >
+              {cancelButtonName}
+            </button>
+            <button
+              className={styles.confirmation_model_proceed_button}
+              onClick={handleConfirmClick}
+            >
+              {continueButtonName}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/protocol-designer/src/components/FlexProtocolEditor/StyledText.tsx b/protocol-designer/src/components/FlexProtocolEditor/StyledText.tsx
new file mode 100644
index 00000000000..1ef5b808819
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/StyledText.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Text } from '@opentrons/components'
+import styled, { FlattenSimpleInterpolation } from 'styled-components'
+import { TYPOGRAPHY } from './constant'
+
+export interface Props extends React.ComponentProps<typeof Text> {
+  children: React.ReactNode
+}
+
+const styleMap: { [tag: string]: FlattenSimpleInterpolation } = {
+  h1: TYPOGRAPHY.h1Default,
+  h2: TYPOGRAPHY.h2SemiBold,
+  h3: TYPOGRAPHY.h3SemiBold,
+  h4: TYPOGRAPHY.h4Regular,
+  h5: TYPOGRAPHY.h5Default,
+  p: TYPOGRAPHY.pRegular,
+  label: TYPOGRAPHY.labelItalic,
+}
+
+export const StyledText = styled(Text)<Props>`
+  ${props =>
+    styleMap[
+      `${String(props.as)}${
+        props.fontWeight === TYPOGRAPHY.fontWeightLevel2Bold ? 'SemiBold' : ''
+      }`
+    ]}
+`
diff --git a/protocol-designer/src/components/FlexProtocolEditor/constant.tsx b/protocol-designer/src/components/FlexProtocolEditor/constant.tsx
new file mode 100644
index 00000000000..c15eb47decd
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/constant.tsx
@@ -0,0 +1,87 @@
+import { i18n } from '../../localization'
+export * from './typography'
+
+interface NavPillTab {
+  name: string
+  navPillPage: number[]
+}
+
+export const navPillsNameTabList: NavPillTab[] = [
+  {
+    name: i18n.t('flex.name_and_description.name'),
+    navPillPage: [0],
+  },
+  {
+    name: i18n.t('flex.instrument_selection.name'),
+    navPillPage: [1],
+  },
+  {
+    name: i18n.t('flex.modules_selection.name'),
+    navPillPage: [2],
+  },
+]
+
+export const navPillTabListLength = navPillsNameTabList.length - 1
+
+// Unsupported tiprack list for the flex robot
+export const blockedTipRackListForFlex: string[] = [
+  '(Retired) Eppendorf epT.I.P.S. 96 Tip Rack 1000 µL',
+  '(Retired) Eppendorf epT.I.P.S. 96 Tip Rack 10 µL',
+  '(Retired) GEB 96 Tip Rack 1000 µL',
+  '(Retired) GEB 96 Tip Rack 10 µL',
+  'Opentrons 96 Filter Tip Rack 10 µL',
+  'Opentrons 96 Filter Tip Rack 20 µL',
+  'Opentrons 96 Tip Rack 1000 µL',
+  'Opentrons 96 Tip Rack 10 µL',
+  'Opentrons 96 Tip Rack 20 µL',
+  'Opentrons 96 Tip Rack 300 µL',
+  '(Retired) TipOne 96 Tip Rack 200 µL',
+  'Opentrons 96 Filter Tip Rack 200 µ',
+  'Opentrons 96 Filter Tip Rack 1000 µL',
+  'Opentrons 96 Filter Tip Rack 200 µL',
+]
+
+// Custom tiprack option object
+export const customTiprackOption: {
+  name: string
+  value: string
+  namespace: string
+} = {
+  name: 'Custom Tiprack',
+  value: 'custom_tiprack',
+  namespace: 'custom_tiprack',
+}
+
+// constant LEFT/RIGHT Mount Side
+export const mountSide: any = [
+  {
+    name: 'Left Mount',
+    value: 'left',
+  },
+  {
+    name: 'Right Mount',
+    value: 'right',
+  },
+]
+
+export const pipetteNameBlocklist: string[] = [
+  'p10_single',
+  'p10_multi',
+  'p50_single',
+  'p50_multi',
+  'p300_single',
+  'p300_multi',
+  'p1000_single',
+]
+
+interface pipetteSlots {
+  left: string
+  right: string
+}
+
+export const pipetteSlot: pipetteSlots = {
+  left: 'left',
+  right: 'right',
+}
+
+export const blockMount: string[] = ['p1000_96']
diff --git a/protocol-designer/src/components/FlexProtocolEditor/index.tsx b/protocol-designer/src/components/FlexProtocolEditor/index.tsx
new file mode 100644
index 00000000000..5838656dee4
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/index.tsx
@@ -0,0 +1 @@
+export * from './CreateFlexFileForm'
diff --git a/protocol-designer/src/components/FlexProtocolEditor/typography.ts b/protocol-designer/src/components/FlexProtocolEditor/typography.ts
new file mode 100644
index 00000000000..529672e630c
--- /dev/null
+++ b/protocol-designer/src/components/FlexProtocolEditor/typography.ts
@@ -0,0 +1,116 @@
+import { css } from 'styled-components'
+
+// Font Sizes
+export const fontSize19 = '1.188rem' // 19px
+export const fontSize16 = '1rem' // 16px
+export const fontSize14 = '0.875rem' // 14px
+export const fontSize13 = '0.813rem' //  13px
+export const fontSize10 = '0.625rem' // 10px
+
+// Font Weights
+export const fontWeightLevel2Bold = 700
+export const fontWeightRegular = 400
+
+// Line Heights
+export const lineHeight16 = '1rem' // 16px
+
+// font styles
+export const fontStyleNormal = 'normal'
+export const fontStyleItalic = 'italic'
+
+// text transforms
+export const textTransformNone = 'none'
+export const textTransformCapitalize = 'capitalize'
+export const textTransformUppercase = 'uppercase'
+export const textTransformLowercase = 'lowercase'
+
+export const textAlignLeft = 'left'
+export const textAlignRight = 'right'
+export const textAlignCenter = 'center'
+export const textAlignJustify = 'justify'
+
+// text decoration
+export const textDecorationUnderline = 'underline'
+
+// Default font styles, color agnostic for first pass
+export const h1Default = css`
+  font-size: ${fontSize19};
+  font-weight: ${fontWeightLevel2Bold};
+  line-height: ${lineHeight16};
+`
+
+export const h2SemiBold = css`
+  font-size: ${fontSize16};
+  font-weight: ${fontWeightLevel2Bold};
+  line-height: ${lineHeight16};
+`
+export const h4Regular = css`
+  font-size: ${fontSize14};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight16};
+`
+
+export const h3SemiBold = css`
+  font-size: ${fontSize14};
+  font-weight: ${fontWeightLevel2Bold};
+  line-height: ${lineHeight16};
+`
+
+export const h5Default = css`
+  font-size: ${fontSize13};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight16};
+`
+
+export const pRegular = css`
+  font-size: ${fontSize10};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight16};
+`
+
+export const labelItalic = css`
+  font-size: ${fontSize10};
+  font-weight: ${fontWeightRegular};
+  line-height: ${lineHeight16};
+  font-style: ${fontStyleItalic};
+`
+
+// export const linkPSemiBold = css`
+//   font-size: ${fontSize10};
+//   font-weight: ${fontWeightRegular};
+//   line-height: ${lineHeight16};
+//   color: ${COLORS.C_BLUE};
+
+//   &:hover {
+//     opacity: 70%;
+//   }
+// `
+
+export const TYPOGRAPHY = {
+  fontSize19,
+  fontSize16,
+  fontSize14,
+  fontSize13,
+  fontSize10,
+  fontWeightLevel2Bold,
+  fontWeightRegular,
+  lineHeight16,
+  fontStyleNormal,
+  fontStyleItalic,
+  textTransformNone,
+  textTransformCapitalize,
+  textTransformUppercase,
+  textTransformLowercase,
+  textAlignLeft,
+  textAlignRight,
+  textAlignCenter,
+  textAlignJustify,
+  textDecorationUnderline,
+  h1Default,
+  h2SemiBold,
+  h4Regular,
+  h3SemiBold,
+  h5Default,
+  pRegular,
+  labelItalic,
+}
diff --git a/protocol-designer/src/components/LandingPage.tsx b/protocol-designer/src/components/LandingPage.tsx
new file mode 100644
index 00000000000..8973c9c3746
--- /dev/null
+++ b/protocol-designer/src/components/LandingPage.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { OutlineButton } from '@opentrons/components'
+import { i18n } from '../localization'
+import styles from './FlexProtocolEditor/FlexComponents.css'
+import { StyledText } from './FlexProtocolEditor/StyledText'
+import { actions as loadFileActions } from '../load-file'
+import { MapDispatchToPropsParam, connect, useDispatch } from 'react-redux'
+import { ThunkDispatch } from '../types'
+import { actions as navActions } from '../navigation'
+import { setRobotType } from '../load-file/actions'
+import {
+  OT2_STANDARD_DECKID,
+  OT2_STANDARD_MODEL,
+  OT3_STANDARD_DECKID,
+  OT3_STANDARD_MODEL,
+} from '@opentrons/shared-data'
+
+type Props = React.ComponentProps<typeof LandingPage>
+export interface PageProps {
+  setPageProps: (type: string) => void
+}
+
+function LandingPage(props: {
+  goToOT3FilePage: () => void
+  goToOT2FilePage: () => void
+}): JSX.Element {
+  const { goToOT3FilePage, goToOT2FilePage } = props
+  const dispatch = useDispatch()
+
+  return (
+    <div className={styles.pd_landing_page}>
+      <StyledText as="h1">{i18n.t('flex.landing_page.welcome')}</StyledText>
+      <img
+        className={styles.ot_flex_logo}
+        src={require('../images/ot_logo.png')}
+      />
+      <div className={styles.flex_landing_buttons_wrapper}>
+        <OutlineButton
+          className={styles.flex_landing_button}
+          onClick={() => goToOT3FilePage()}
+        >
+          <StyledText as="h4">
+            {i18n.t('flex.landing_page.create_flex_protocol')}
+          </StyledText>
+        </OutlineButton>
+        <OutlineButton
+          className={styles.flex_landing_button}
+          onClick={() => goToOT2FilePage()}
+        >
+          <StyledText as="h4">
+            {i18n.t('flex.landing_page.create_ot2_protocol')}
+          </StyledText>
+        </OutlineButton>
+        <OutlineButton Component="label" className={styles.flex_landing_button}>
+          <StyledText as="h4">
+            {i18n.t('flex.landing_page.import_protocol')}
+          </StyledText>
+          <input
+            type="file"
+            onChange={fileChangeEvent => {
+              dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
+            }}
+          />
+        </OutlineButton>
+      </div>
+    </div>
+  )
+}
+
+const mapDispatchToProps: MapDispatchToPropsParam<
+  { dispatch: ThunkDispatch<any> },
+  {}
+> = dispatch => ({
+  dispatch,
+})
+
+function mergeProps(
+  stateProps: any,
+  dispatchProps: {
+    dispatch: ThunkDispatch<any>
+  }
+): Props {
+  const { _initialDeckSetup, ...passThruProps } = stateProps
+  const { dispatch } = dispatchProps
+  return {
+    ...passThruProps,
+    goToOT3FilePage: () => {
+      dispatch(
+        setRobotType({ model: OT3_STANDARD_MODEL, deckId: OT3_STANDARD_DECKID })
+      )
+      dispatch(navActions.navigateToPage('new-flex-file-form'))
+    },
+    goToOT2FilePage: () => {
+      dispatch(
+        setRobotType({ model: OT2_STANDARD_MODEL, deckId: OT2_STANDARD_DECKID })
+      )
+      dispatch(navActions.navigateToPage('file-splash'))
+    },
+  }
+}
+
+export const LandingPageComponent = connect(
+  null,
+  mapDispatchToProps,
+  mergeProps
+)(LandingPage)
diff --git a/protocol-designer/src/components/ProtocolEditor.css b/protocol-designer/src/components/ProtocolEditor.css
index 95bb37c5fd6..773beb5ad39 100644
--- a/protocol-designer/src/components/ProtocolEditor.css
+++ b/protocol-designer/src/components/ProtocolEditor.css
@@ -25,3 +25,10 @@
   width: calc(100% - 22.8125rem);
   overflow-y: scroll;
 }
+
+.flex_main_page_content {
+  top: 10rem;
+  bottom: 0;
+  margin: 0 auto;
+  width: 60rem;
+}
diff --git a/protocol-designer/src/components/ProtocolEditor.tsx b/protocol-designer/src/components/ProtocolEditor.tsx
index aa811760aa5..d7e5a064495 100644
--- a/protocol-designer/src/components/ProtocolEditor.tsx
+++ b/protocol-designer/src/components/ProtocolEditor.tsx
@@ -17,11 +17,33 @@ import { LabwareUploadMessageModal } from './modals/LabwareUploadMessageModal'
 import { GateModal } from './modals/GateModal'
 import { AnnouncementModal } from './modals/AnnouncementModal'
 import styles from './ProtocolEditor.css'
+import { connect } from 'react-redux'
+import { selectors } from '../navigation'
+import { BaseState } from '../types'
+import { RobotDataFields, selectors as fileSelectors } from '../file-data'
+import {
+  OT2_STANDARD_DECKID,
+  OT3_STANDARD_DECKID,
+} from '@opentrons/shared-data'
 
 const showGateModal =
   process.env.NODE_ENV === 'production' || process.env.OT_PD_SHOW_GATE
+export interface Props {
+  children?: React.ReactNode
+  page: string
+  robot: RobotDataFields
+}
 
-function ProtocolEditorComponent(): JSX.Element {
+function ProtocolEditorComponent(props: Props): JSX.Element {
+  const {
+    page,
+    robot: { deckId },
+  } = props
+  const pages = ['landing-page', 'new-flex-file-form', 'file-detail']
+  const conditionalStyle = pages.includes(page)
+    ? cx(styles.flex_main_page_content, MAIN_CONTENT_FORCED_SCROLL_CLASSNAME)
+    : cx(styles.main_page_content, MAIN_CONTENT_FORCED_SCROLL_CLASSNAME)
+  const notLandingPage = page !== 'landing-page'
   return (
     <div>
       <ComputingSpinner />
@@ -29,22 +51,23 @@ function ProtocolEditorComponent(): JSX.Element {
       {showGateModal ? <GateModal /> : null}
       <PrereleaseModeIndicator />
       <div className={styles.wrapper}>
-        <ConnectedNav />
-        <ConnectedSidebar />
+        {notLandingPage && (
+          <>
+            <ConnectedNav />
+            {deckId === OT3_STANDARD_DECKID && page !== 'file-detail' && (
+              <ConnectedSidebar />
+            )}
+            {deckId === OT2_STANDARD_DECKID && <ConnectedSidebar />}
+          </>
+        )}
+
         <div className={styles.main_page_wrapper}>
-          <ConnectedTitleBar />
+          {notLandingPage && <ConnectedTitleBar />}
 
-          <div
-            id="main-page"
-            className={cx(
-              styles.main_page_content,
-              MAIN_CONTENT_FORCED_SCROLL_CLASSNAME
-            )}
-          >
+          <div id="main-page" className={conditionalStyle}>
             <AnnouncementModal />
             <NewFileModal showProtocolFields />
             <FileUploadMessageModal />
-
             <MainPageModalPortalRoot />
             <LabwareUploadMessageModal />
             <ConnectedMainPanel />
@@ -55,6 +78,15 @@ function ProtocolEditorComponent(): JSX.Element {
   )
 }
 
-export const ProtocolEditor = DragDropContext(MouseBackEnd)(
+function mapStateToProps(state: BaseState): Props {
+  return {
+    page: selectors.getCurrentPage(state),
+    robot: fileSelectors.protocolRobotModelName(state),
+  }
+}
+
+export const ProtocolEditorOne = DragDropContext(MouseBackEnd)(
   ProtocolEditorComponent
 )
+
+export const ProtocolEditor = connect(mapStateToProps)(ProtocolEditorOne)
diff --git a/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx b/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx
index 9968ee36005..8d2bf1389c2 100644
--- a/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx
+++ b/protocol-designer/src/components/modals/EditModulesModal/ConnectedSlotMap.tsx
@@ -5,18 +5,20 @@ import styles from './EditModules.css'
 
 interface ConnectedSlotMapProps {
   fieldName: string
+  robotType?: string
 }
 
 export const ConnectedSlotMap = (
   props: ConnectedSlotMapProps
 ): JSX.Element | null => {
-  const { fieldName } = props
+  const { fieldName, robotType } = props
   const [field, meta] = useField(fieldName)
   return field.value ? (
     <div className={styles.slot_map_container}>
       <SlotMap
         occupiedSlots={[`${field.value}`]}
         isError={Boolean(meta.error)}
+        robotType={robotType}
       />
     </div>
   ) : null
diff --git a/protocol-designer/src/components/modals/NewFileModal/index.ts b/protocol-designer/src/components/modals/NewFileModal/index.ts
index 4393f5c25a0..ac60b359f20 100644
--- a/protocol-designer/src/components/modals/NewFileModal/index.ts
+++ b/protocol-designer/src/components/modals/NewFileModal/index.ts
@@ -52,7 +52,7 @@ export const NewFileModal = connect(
   mergeProps
 )(FilePipettesModalComponent)
 
-function mapStateToProps(state: BaseState): SP {
+export function mapStateToProps(state: BaseState): SP {
   return {
     _hasUnsavedChanges: loadFileSelectors.getHasUnsavedChanges(state),
     _customLabware: labwareDefSelectors.getCustomLabwareDefsByURI(state),
@@ -63,7 +63,7 @@ function mapStateToProps(state: BaseState): SP {
   }
 }
 
-function mapDispatchToProps(dispatch: ThunkDispatch<any>): DP {
+export function mapDispatchToProps(dispatch: ThunkDispatch<any>): DP {
   return {
     onCancel: () => dispatch(navigationActions.toggleNewProtocolModal(false)),
     _createNewProtocol: (args: CreateNewProtocolArgs) => {
diff --git a/protocol-designer/src/containers/ConnectedMainPanel.tsx b/protocol-designer/src/containers/ConnectedMainPanel.tsx
index 4a04fbb39f1..90c4fa5a333 100644
--- a/protocol-designer/src/containers/ConnectedMainPanel.tsx
+++ b/protocol-designer/src/containers/ConnectedMainPanel.tsx
@@ -17,24 +17,42 @@ import { getSelectedTerminalItemId } from '../ui/steps'
 import { selectors as labwareIngredSelectors } from '../labware-ingred/selectors'
 import { selectors, Page } from '../navigation'
 import { BaseState } from '../types'
+import { FlexFileDetails } from '../components/FlexProtocolEditor/FlexFileDetails'
+import { LandingPageComponent } from '../components/LandingPage'
+import { CreateFlexFileForm } from '../components/FlexProtocolEditor'
+import { OT2_STANDARD_DECKID } from '@opentrons/shared-data'
+import { selectors as fileSelectors, RobotDataFields } from '../file-data'
 
 interface Props {
   page: Page
   selectedTerminalItemId: TerminalItemId | null | undefined
   ingredSelectionMode: boolean
+  robot: RobotDataFields
 }
 
 function MainPanelComponent(props: Props): JSX.Element {
-  const { page, selectedTerminalItemId, ingredSelectionMode } = props
+  const { page, selectedTerminalItemId, ingredSelectionMode, robot } = props
+  // in OT3 case : undefined while import file
+  // in OT2 case: ot2_standard while import file
+  const fileComponent =
+    !robot || robot.deckId === OT2_STANDARD_DECKID ? (
+      <ConnectedFilePage />
+    ) : (
+      <FlexFileDetails />
+    )
   switch (page) {
     case 'file-splash':
       return <Splash />
     case 'file-detail':
-      return <ConnectedFilePage />
+      return fileComponent
     case 'liquids':
       return <LiquidsPage />
+    case 'landing-page':
+      return <LandingPageComponent />
     case 'settings-app':
       return <SettingsPage />
+    case 'new-flex-file-form':
+      return <CreateFlexFileForm />
     default: {
       const startTerminalItemSelected =
         selectedTerminalItemId === START_TERMINAL_ITEM_ID
@@ -62,6 +80,7 @@ function mapStateToProps(state: BaseState): Props {
     selectedTerminalItemId: getSelectedTerminalItemId(state),
     ingredSelectionMode:
       labwareIngredSelectors.getSelectedLabwareId(state) != null,
+    robot: fileSelectors.protocolRobotModelName(state),
   }
 }
 
diff --git a/protocol-designer/src/containers/ConnectedTitleBar.tsx b/protocol-designer/src/containers/ConnectedTitleBar.tsx
index 00a92496f26..3bf89f73772 100644
--- a/protocol-designer/src/containers/ConnectedTitleBar.tsx
+++ b/protocol-designer/src/containers/ConnectedTitleBar.tsx
@@ -68,6 +68,12 @@ function mapStateToProps(state: BaseState): SP {
   const fileName = fileDataSelectors.protocolName(state)
   const selectedStepInfo = getSelectedStepTitleInfo(state)
   const selectedTerminalId = getSelectedTerminalItemId(state)
+  // const robotModelName = fileDataSelectors.protocolRobotModelName(state)
+  // const labwareNames =
+  //   robotModelName === 'ot3_standard'
+  //     ? uiLabwareSelectors.getLabwareNicknamesByIdForOT3(state)
+  //     : uiLabwareSelectors.getLabwareNicknamesById(state)
+
   const labwareNames = uiLabwareSelectors.getLabwareNicknamesById(state)
   const drilledDownLabwareId = labwareIngredSelectors.getDrillDownLabwareId(
     state
@@ -93,6 +99,12 @@ function mapStateToProps(state: BaseState): SP {
         title: i18n.t([`nav.title.${_page}`, fileName]),
         subtitle: i18n.t([`nav.subtitle.${_page}`, '']),
       }
+    case 'new-flex-file-form':
+      return {
+        _page,
+        title: i18n.t('flex.header.title'),
+        subtitle: i18n.t([`nav.subtitle.${_page}`, '']),
+      }
     case 'file-splash':
     case 'settings-features':
     case 'settings-app':
diff --git a/protocol-designer/src/file-data/reducers/index.ts b/protocol-designer/src/file-data/reducers/index.ts
index 19b7a198612..bf06faf77d0 100644
--- a/protocol-designer/src/file-data/reducers/index.ts
+++ b/protocol-designer/src/file-data/reducers/index.ts
@@ -2,10 +2,16 @@ import { Reducer, combineReducers } from 'redux'
 import { handleActions } from 'redux-actions'
 import { Timeline } from '@opentrons/step-generation'
 import { Action } from '../../types'
-import { FileMetadataFields, SaveFileMetadataAction } from '../types'
+import {
+  FileMetadataFields,
+  RobotDataFields,
+  SaveFileMetadataAction,
+} from '../types'
 import { LoadFileAction, NewProtocolFields } from '../../load-file'
 import { ComputeRobotStateTimelineSuccessAction } from '../actions'
 import { Substeps } from '../../steplist/types'
+import { OT2_STANDARD_DECKID, OT2_STANDARD_MODEL } from '@opentrons/shared-data'
+
 export const timelineIsBeingComputed: Reducer<boolean, any> = handleActions(
   {
     COMPUTE_ROBOT_STATE_TIMELINE_REQUEST: () => true,
@@ -91,12 +97,39 @@ const fileMetadata = handleActions(
   },
   defaultFields
 )
+const robotDataDefaultFields: RobotDataFields = {
+  model: OT2_STANDARD_MODEL,
+  deckId: OT2_STANDARD_DECKID,
+}
+const robot = handleActions(
+  {
+    SET_ROBOT_TYPE: (
+      state: RobotDataFields,
+      action: {
+        payload: RobotDataFields
+      }
+    ): RobotDataFields => {
+      return { ...state, ...action.payload }
+    },
+    LOAD_FILE: (
+      state: RobotDataFields,
+      action: {
+        payload: any
+      }
+    ): RobotDataFields => {
+      const { file } = action.payload
+      return { ...state, ...file.robot }
+    },
+  },
+  robotDataDefaultFields
+)
 export interface RootState {
   computedRobotStateTimeline: Timeline
   computedSubsteps: Substeps
   currentProtocolExists: boolean
   fileMetadata: FileMetadataFields
   timelineIsBeingComputed: boolean
+  robot: RobotDataFields
 }
 const _allReducers = {
   computedRobotStateTimeline,
@@ -104,6 +137,7 @@ const _allReducers = {
   currentProtocolExists,
   fileMetadata,
   timelineIsBeingComputed,
+  robot,
 }
 export const rootReducer: Reducer<RootState, Action> = combineReducers(
   _allReducers
diff --git a/protocol-designer/src/file-data/selectors/fileFields.ts b/protocol-designer/src/file-data/selectors/fileFields.ts
index 57533bf0c89..ed0682b8709 100644
--- a/protocol-designer/src/file-data/selectors/fileFields.ts
+++ b/protocol-designer/src/file-data/selectors/fileFields.ts
@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect'
 import { BaseState, Selector } from '../../types'
 import { RootState } from '../reducers'
-import { FileMetadataFields } from '../types'
+import { FileMetadataFields, RobotDataFields } from '../types'
 export const rootSelector = (state: BaseState): RootState => state.fileData
 export const getCurrentProtocolExists: Selector<boolean> = createSelector(
   rootSelector,
@@ -14,3 +14,7 @@ export const getFileMetadata: Selector<FileMetadataFields> = createSelector(
   rootSelector,
   state => state.fileMetadata
 )
+export const protocolRobotModelName: Selector<RobotDataFields> = createSelector(
+  rootSelector,
+  state => state.robot
+)
diff --git a/protocol-designer/src/file-data/types.ts b/protocol-designer/src/file-data/types.ts
index dc784b51c75..f50850d42d3 100644
--- a/protocol-designer/src/file-data/types.ts
+++ b/protocol-designer/src/file-data/types.ts
@@ -1,5 +1,6 @@
 import type { ProtocolFile } from '@opentrons/shared-data'
 export type FileMetadataFields = ProtocolFile<{}>['metadata']
+export type RobotDataFields = ProtocolFile<{}>['robot']
 export type FileMetadataFieldAccessors = keyof FileMetadataFields
 export interface SaveFileMetadataAction {
   type: 'SAVE_FILE_METADATA'
diff --git a/protocol-designer/src/images/ot_logo.png b/protocol-designer/src/images/ot_logo.png
new file mode 100644
index 00000000000..7a9ee39fb56
Binary files /dev/null and b/protocol-designer/src/images/ot_logo.png differ
diff --git a/protocol-designer/src/labware-defs/selectors.ts b/protocol-designer/src/labware-defs/selectors.ts
index b01a444544a..436597fbdcd 100644
--- a/protocol-designer/src/labware-defs/selectors.ts
+++ b/protocol-designer/src/labware-defs/selectors.ts
@@ -1,5 +1,9 @@
 import { createSelector } from 'reselect'
-import { _getSharedLabware, getAllDefinitions } from './utils'
+import {
+  _getSharedLabware,
+  getAllDefinitions,
+  getOt3AllDefinitions,
+} from './utils'
 import { LabwareDefinition2 } from '@opentrons/shared-data'
 import { BaseState, Selector } from '../types'
 import { LabwareDefByDefURI, LabwareUploadMessage } from './types'
@@ -41,6 +45,15 @@ const _makeAllLabwareDefsObj = (
   return { ...getAllDefinitions(), ..._makeCustomLabwareDefsObj(customDefs) }
 }
 
+const _makeAllLabwareDefsObjOt3 = (
+  customDefs: LabwareDefByDefURI
+): Record<string, LabwareDefinition2> => {
+  return {
+    ...getOt3AllDefinitions(),
+    ..._makeCustomLabwareDefsObj(customDefs),
+  }
+}
+
 export const _getLabwareDefsByIdRootState: (
   arg0: StepFormRootState
 ) => LabwareDefByDefURI = createSelector(
@@ -51,6 +64,10 @@ export const getLabwareDefsByURI: Selector<LabwareDefByDefURI> = createSelector(
   state => rootSelector(state).customDefs,
   _makeAllLabwareDefsObj
 )
+export const getOt3LabwareDefsByURI: Selector<LabwareDefByDefURI> = createSelector(
+  state => rootSelector(state).customDefs,
+  _makeAllLabwareDefsObjOt3
+)
 export const getCustomLabwareDefsByURI: Selector<LabwareDefByDefURI> = createSelector(
   state => rootSelector(state).customDefs,
   _makeCustomLabwareDefsObj
diff --git a/protocol-designer/src/labware-defs/utils.ts b/protocol-designer/src/labware-defs/utils.ts
index 8963bb8a826..c2f017e4fcc 100644
--- a/protocol-designer/src/labware-defs/utils.ts
+++ b/protocol-designer/src/labware-defs/utils.ts
@@ -1,8 +1,8 @@
 import groupBy from 'lodash/groupBy'
 import {
   getLabwareDefURI,
-  PD_DO_NOT_LIST,
   LabwareDefinition2,
+  PD_DO_NOT_LIST_OT3,
 } from '@opentrons/shared-data'
 import { LabwareDefByDefURI } from './types'
 
@@ -15,7 +15,6 @@ const definitionsContext = require.context(
   /\.json$/, // import filter
   'sync' // load every definition into one synchronous chunk
 )
-
 let _definitions: LabwareDefByDefURI | null = null
 export function getAllDefinitions(): LabwareDefByDefURI {
   // NOTE: unlike labware-library, no filtering out trashes here (we need 'em)
@@ -24,7 +23,8 @@ export function getAllDefinitions(): LabwareDefByDefURI {
     _definitions = definitionsContext.keys().reduce((acc, filename) => {
       const def: LabwareDefinition2 = definitionsContext(filename)
       const labwareDefURI = getLabwareDefURI(def)
-      return PD_DO_NOT_LIST.includes(def.parameters.loadName)
+      // Need to handle Ot2 and OT3 supported labware here
+      return PD_DO_NOT_LIST_OT3.includes(def.parameters.loadName)
         ? acc
         : { ...acc, [labwareDefURI]: def }
     }, {})
@@ -32,6 +32,19 @@ export function getAllDefinitions(): LabwareDefByDefURI {
 
   return _definitions
 }
+
+// Please be aware that only labware supported by OT3 should be loaded.
+// separate list to only allow the ot3 tipracks
+export function getOt3AllDefinitions(): LabwareDefByDefURI {
+  _definitions = definitionsContext.keys().reduce((acc, filename) => {
+    const def: LabwareDefinition2 = definitionsContext(filename)
+    const labwareDefURI = getLabwareDefURI(def)
+    return PD_DO_NOT_LIST_OT3.includes(def.parameters.loadName)
+      ? acc
+      : { ...acc, [labwareDefURI]: def }
+  }, {})
+  return _definitions
+}
 // filter out all but the latest version of each labware
 // NOTE: this is similar to labware-library's getOnlyLatestDefs, but this one
 // has the {labwareDefURI: def} shape, instead of an array of labware defs
diff --git a/protocol-designer/src/load-file/actions.ts b/protocol-designer/src/load-file/actions.ts
index 41be3d329e9..92efa0ba3dd 100644
--- a/protocol-designer/src/load-file/actions.ts
+++ b/protocol-designer/src/load-file/actions.ts
@@ -1,5 +1,5 @@
 import { migration } from './migration'
-import { selectors as fileDataSelectors } from '../file-data'
+import { RobotDataFields, selectors as fileDataSelectors } from '../file-data'
 import { saveFile } from './utils'
 import { PDProtocolFile } from '../file-types'
 import { GetState, ThunkAction, ThunkDispatch } from '../types'
@@ -108,3 +108,15 @@ export const saveProtocolFile: () => ThunkAction<SaveProtocolFileAction> = () =>
   const fileName = `${protocolName}.json`
   saveFile(fileData, fileName)
 }
+
+export interface SetRobotTypeAction {
+  type: 'SET_ROBOT_TYPE'
+  payload: RobotDataFields
+}
+
+export const setRobotType = (
+  payload: SetRobotTypeAction['payload']
+): SetRobotTypeAction => ({
+  type: 'SET_ROBOT_TYPE',
+  payload,
+})
diff --git a/protocol-designer/src/localization/en/button.json b/protocol-designer/src/localization/en/button.json
index 28f4ae407c5..e7ce02813a3 100644
--- a/protocol-designer/src/localization/en/button.json
+++ b/protocol-designer/src/localization/en/button.json
@@ -21,5 +21,7 @@
   "yes": "yes",
   "upload_custom_labware": "Upload custom labware",
   "upload_custom_tip_rack": "Upload custom tip rack",
+  "add_another_custom_tiprack": "Add another custom tiprack",
+  "remove_custom_tiprack": "Remove",
   "got_it": "Got It!"
 }
diff --git a/protocol-designer/src/localization/en/flex.json b/protocol-designer/src/localization/en/flex.json
new file mode 100644
index 00000000000..bd43649b21f
--- /dev/null
+++ b/protocol-designer/src/localization/en/flex.json
@@ -0,0 +1,77 @@
+{
+  "landing_page": {
+    "welcome": "Welcome to Protocol Designer",
+    "create_flex_protocol": "Create New Opentrons Flex Protocol",
+    "create_ot2_protocol": "Create new OT-2 protocol",
+    "import_protocol": "Import a protocol"
+  },
+  "header": {
+    "title": "Create New Opentrons Flex Protocol",
+    "cancel_button": "Cancel",
+    "required_fields": "*required fields"
+  },
+  "round_tabs": {
+    "next": "Next",
+    "update": "Update",
+    "previous": "Previous",
+    "go_to_liquids_page": "Create protocol, on to liquids"
+  },
+  "name_and_description": {
+    "name": "Protocol Name and Description",
+    "heading": "Protocol Name and Description",
+    "choose_name": "Choose a name for your protocol.*",
+    "protocol_name": "Protocol Name",
+    "supporting_error_text": "supporting text about any error handling goes here.",
+    "add_more_information": "Add more information, if you like (you can change this later).",
+    "organization_author": "Organization/Author",
+    "protocol_description": "Description"
+  },
+  "instrument_selection": {
+    "name": "Instrument Selection",
+    "heading": "Pipettes"
+  },
+  "modules_selection": {
+    "name": "Module Selection",
+    "heading": "Modules"
+  },
+  "pipette_selection": {
+    "pipette_96_selection_note": "Note: 96-channel take up both mounts and requires a tiprack adapter",
+    "pippette_ocuupies_both_mount": "Note: 96 Channel occupies both the mount.",
+    "choose_first_pipette": "Choose First Pipette",
+    "choose_second_pipette": "Choose Second Pipette",
+    "left_pipette_display": "Left Mount",
+    "right_pipette_display": "Right Mount"
+  },
+  "errors": {
+    "first_pipette_not_selected": "You must select a pipette before proceeding.",
+    "tiprack_not_selected": "You must select a tip rack before proceeding."
+  },
+  "file_tab": {
+    "heading": "Protocol Information",
+    "subheading": "Opentrons Flex Protocol",
+    "export": "Export Protocol",
+    "close_export": "Close Protocol",
+    "invalid_json": "Please select valid JSON file to display",
+    "name_desc_title": "Name and Description",
+    "name": "Name : ",
+    "author": "Author : ",
+    "description": "Description : ",
+    "date_created": "Date Created : ",
+    "last_exported": "Last Exported : ",
+    "pipette": "Pipettes",
+    "swap_pipette": "Swap Pipette",
+    "modules": "Modules",
+    "add_items": "Add Items",
+    "edit": "Edit",
+    "left": "Left mount -",
+    "right": "Right mount -",
+    "add_pipette": "Add Pipette",
+    "no_modules_found": "No modules found."
+  },
+  "cancel_create_protocol": {
+    "confirmation_title": "Cancel Create Protocol?",
+    "confirmation_message": "Are you sure you want to cancel creating a protocol? Progress will be lost, You can't undo this change.",
+    "cancel_button_name": "Go back",
+    "continue_button_name": "Cancel New Protocol"
+  }
+}
diff --git a/protocol-designer/src/localization/en/index.ts b/protocol-designer/src/localization/en/index.ts
index 1821bf163e6..0d07010a7fa 100644
--- a/protocol-designer/src/localization/en/index.ts
+++ b/protocol-designer/src/localization/en/index.ts
@@ -5,6 +5,7 @@ import card from './card.json'
 import context_menu from './context_menu.json'
 import deck from './deck.json'
 import feature_flags from './feature_flags.json'
+import flex from './flex.json'
 import form from './form.json'
 import modal from './modal.json'
 import modules from './modules.json'
@@ -20,6 +21,7 @@ export const en = {
     context_menu,
     deck,
     feature_flags,
+    flex,
     form,
     modal,
     modules,
diff --git a/protocol-designer/src/navigation/reducers/index.ts b/protocol-designer/src/navigation/reducers/index.ts
index e0152629ae2..985c3d72c53 100644
--- a/protocol-designer/src/navigation/reducers/index.ts
+++ b/protocol-designer/src/navigation/reducers/index.ts
@@ -11,7 +11,7 @@ const page: Reducer<Page, any> = handleActions(
     // TODO IMMEDIATELY: refactor this to the old fashioned way if we cannot have type safety: https://github.com/redux-utilities/redux-actions/issues/282#issuecomment-595163081
     NAVIGATE_TO_PAGE: (state, action: NavigateToPageAction) => action.payload,
   },
-  'file-splash'
+  'landing-page'
 )
 // @ts-expect-error(sa, 2021-6-21): TS thinks this will only return false, even though TOGGLE_NEW_PROTOCOL_MODAL might yield true
 const newProtocolModal: Reducer<boolean, any> = handleActions(
diff --git a/protocol-designer/src/navigation/types.ts b/protocol-designer/src/navigation/types.ts
index 68cee17c873..df05464b9ff 100644
--- a/protocol-designer/src/navigation/types.ts
+++ b/protocol-designer/src/navigation/types.ts
@@ -5,3 +5,5 @@ export type Page =
   | 'steplist'
   | 'settings-app'
   | 'settings-features'
+  | 'landing-page'
+  | 'new-flex-file-form'
diff --git a/protocol-designer/src/step-forms/selectors/index.ts b/protocol-designer/src/step-forms/selectors/index.ts
index 11ff1e00e39..133eec0b86e 100644
--- a/protocol-designer/src/step-forms/selectors/index.ts
+++ b/protocol-designer/src/step-forms/selectors/index.ts
@@ -120,6 +120,17 @@ export const getLabwareEntities: Selector<
       _hydrateLabwareEntity(l, id, labwareDefs)
     )
 )
+export const getLabwareEntitiesForOT3: Selector<
+  BaseState,
+  LabwareEntities
+> = createSelector(
+  _getNormalizedLabwareById,
+  labwareDefSelectors.getOt3LabwareDefsByURI,
+  (normalizedLabwareById, labwareDefs) =>
+    mapValues(normalizedLabwareById, (l: NormalizedLabware, id: string) =>
+      _hydrateLabwareEntity(l, id, labwareDefs)
+    )
+)
 // Special version of `getLabwareEntities` selector for use in step-forms reducers
 export const _getLabwareEntitiesRootState: (
   arg0: RootState
diff --git a/protocol-designer/src/ui/labware/selectors.ts b/protocol-designer/src/ui/labware/selectors.ts
index 759fd413d1d..0bfffce154b 100644
--- a/protocol-designer/src/ui/labware/selectors.ts
+++ b/protocol-designer/src/ui/labware/selectors.ts
@@ -26,6 +26,18 @@ export const getLabwareNicknamesById: Selector<
         displayLabware[id]?.nickname || getLabwareDisplayName(labwareEntity.def)
     )
 )
+export const getLabwareNicknamesByIdForOT3: Selector<
+  Record<string, string>
+> = createSelector(
+  stepFormSelectors.getLabwareEntitiesForOT3,
+  labwareIngredSelectors.getLabwareNameInfo,
+  (labwareEntities, displayLabware): Record<string, string> =>
+    mapValues(
+      labwareEntities,
+      (labwareEntity: LabwareEntity, id: string): string =>
+        displayLabware[id]?.nickname || getLabwareDisplayName(labwareEntity.def)
+    )
+)
 export const _sortLabwareDropdownOptions = (options: Options): Options =>
   options.sort((a, b) => {
     // special case for fixed trash (always at the bottom of the list)
diff --git a/shared-data/js/getLabware.ts b/shared-data/js/getLabware.ts
index aa1a780444f..8e342bf3f85 100644
--- a/shared-data/js/getLabware.ts
+++ b/shared-data/js/getLabware.ts
@@ -57,6 +57,19 @@ export const PD_DO_NOT_LIST = [
   'opentrons_ot3_96_tiprack_50ul',
 ]
 
+// NOTE:in PD we do not want to list calibration blocks
+// OT3 Supported labware only
+export const PD_DO_NOT_LIST_OT3 = [
+  'opentrons_calibrationblock_short_side_left',
+  'opentrons_calibrationblock_short_side_right',
+  'opentrons_96_tiprack_20ul',
+  'opentrons_96_tiprack_300ul',
+  'opentrons_96_tiprack_1000ul',
+  'opentrons_96_filtertiprack_20ul',
+  'opentrons_96_filtertiprack_200ul',
+  'opentrons_96_filtertiprack_1000ul',
+]
+
 export function getLabwareV1Def(
   labwareName: string
 ): LabwareDefinition1 | null | undefined {