diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
index 8bfad8971f2..aaa000a1668 100644
--- a/protocol-designer/src/assets/localization/en/form.json
+++ b/protocol-designer/src/assets/localization/en/form.json
@@ -186,8 +186,9 @@
         "add_cycle_step": "Add a cycle step",
         "add_step": "Add step",
         "add_step_button": "+ Step",
+        "cycle": "cycle",
         "cycle_step": "cycle step",
-        "cycles": "Cycles {{repetitions}}",
+        "cycles": "Cycles {{repetitions}}x",
         "delete": "delete",
         "edit": "Edit Thermocycler profile steps",
         "lid_closed": "Closed",
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 1d268ea0549..b3236eb1e0e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -90,7 +90,13 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     getTimelineWarningsForSelectedStep
   )
   const timeline = useSelector(getRobotStateTimeline)
-  const [toolboxStep, setToolboxStep] = useState<number>(0)
+  const [toolboxStep, setToolboxStep] = useState<number>(
+    // progress to step 2 if thermocycler form is populated
+    formData.thermocyclerFormType === 'thermocyclerProfile' ||
+      formData.thermocyclerFormType === 'thermocyclerState'
+      ? 1
+      : 0
+  )
   const icon = stepIconsByType[formData.stepType]
 
   const ToolsComponent: typeof STEP_FORM_MAP[keyof typeof STEP_FORM_MAP] = get(
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
new file mode 100644
index 00000000000..4e2ac9962d2
--- /dev/null
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerCycle.tsx
@@ -0,0 +1,548 @@
+import { css } from 'styled-components'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_END,
+  BORDERS,
+  Btn,
+  COLORS,
+  CURSOR_POINTER,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  InputField,
+  JUSTIFY_SPACE_BETWEEN,
+  NO_WRAP,
+  PrimaryButton,
+  SPACING,
+  StyledText,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+import {
+  isTimeFormatMinutesSeconds,
+  temperatureRangeFieldValue,
+} from '../../../../../../steplist/fieldLevel/errors'
+import {
+  maskToFloat,
+  maskToInteger,
+  maskToTime,
+} from '../../../../../../steplist/fieldLevel/processing'
+import { uuid } from '../../../../../../utils'
+import { getTimeFromString, getStepIndex } from './utils'
+
+import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
+import type { ThermocyclerStepType } from './ThermocyclerStep'
+
+export interface ThermocyclerCycleType {
+  id: string
+  title: string
+  steps: ThermocyclerStepType[]
+  type: 'profileCycle'
+  repetitions: string
+}
+
+interface CycleStepValues {
+  value: string | null
+  error: string | null
+  wasAccessed?: boolean
+}
+interface CycleStepType {
+  name: CycleStepValues
+  temp: CycleStepValues
+  time: CycleStepValues
+}
+
+interface ThermocyclerCycleProps {
+  steps: ThermocyclerStepTypeGeneral[]
+  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewCycle: React.Dispatch<React.SetStateAction<boolean>>
+  step?: ThermocyclerCycleType
+  backgroundColor?: string
+  readOnly?: boolean
+  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export function ThermocyclerCycle(props: ThermocyclerCycleProps): JSX.Element {
+  const {
+    setShowCreateNewCycle,
+    step,
+    steps,
+    setSteps,
+    backgroundColor = COLORS.grey30,
+    setIsInEdit,
+    readOnly = true,
+  } = props
+  const { i18n, t } = useTranslation(['application', 'form'])
+  const [hover, setHover] = useState<boolean>(false)
+  const [showEdit, setShowEditCurrentCycle] = useState<boolean>(!readOnly)
+
+  const [orderedCycleStepIds, setOrderedCycleStepIds] = useState<string[]>(
+    step?.steps.map(cycleStep => cycleStep.id) ?? []
+  )
+  const [cycleStepsById, setCycleStepsById] = useState(
+    step?.steps.reduce<Record<string, CycleStepType>>(
+      (acc, { id, title, temperature, durationMinutes, durationSeconds }) => {
+        return {
+          ...acc,
+          [id]: {
+            name: { value: title ?? null, error: null },
+            temp: {
+              value: temperature ?? null,
+              error: null,
+              wasAccessed: false,
+            },
+            time: {
+              value:
+                durationMinutes != null && durationSeconds != null
+                  ? `${durationMinutes}:${durationSeconds}`
+                  : null,
+              error: null,
+              wasAccessed: false,
+            },
+          },
+        }
+      },
+      {}
+    ) ?? {}
+  )
+  const [repetitions, setRepetitions] = useState<string | undefined>(
+    step?.repetitions
+  )
+
+  const cycleId = step?.id ?? null
+  const isStepStateError =
+    Object.values(cycleStepsById).some(cycleStep =>
+      Object.values(cycleStep).some(
+        ({ value, error }) => value == null || value === '' || error != null
+      )
+    ) ||
+    repetitions == null ||
+    repetitions === ''
+
+  const blankStep: CycleStepType = {
+    name: {
+      value: null,
+      error: null,
+    },
+    temp: {
+      value: null,
+      error: null,
+    },
+    time: {
+      value: null,
+      error: null,
+    },
+  }
+
+  useEffect(() => {
+    if (orderedCycleStepIds.length === 0) {
+      // prepopulate with blank step on mount if not editing
+      handleAddCycleStep()
+      setIsInEdit(true)
+    }
+  }, [])
+
+  const handleAddCycleStep = (): void => {
+    const newStepId = uuid()
+    setOrderedCycleStepIds([...orderedCycleStepIds, newStepId])
+    setCycleStepsById({ ...cycleStepsById, [newStepId]: blankStep })
+  }
+
+  const handleDeleteStep = (stepId: string): void => {
+    const filteredOrdredCycleStepIds = orderedCycleStepIds.filter(
+      id => id !== stepId
+    )
+    setOrderedCycleStepIds(filteredOrdredCycleStepIds)
+    setCycleStepsById(
+      filteredOrdredCycleStepIds.reduce((acc, id) => {
+        return id !== stepId
+          ? {
+              ...acc,
+              [id]: cycleStepsById[id],
+            }
+          : acc
+      }, {})
+    )
+  }
+  const handleDeleteCycle = (): void => {
+    if (cycleId != null) {
+      setSteps(
+        steps.filter((s: any) => {
+          return s.id !== cycleId
+        })
+      )
+    } else {
+      setShowCreateNewCycle(false)
+    }
+    setIsInEdit(false)
+  }
+  const handleValueUpdate = (
+    stepId: string,
+    field: 'name' | 'temp' | 'time',
+    value: string,
+    errorCheck?: (value: any) => string | null
+  ): void => {
+    setCycleStepsById({
+      ...cycleStepsById,
+      [stepId]: {
+        ...cycleStepsById[stepId],
+        [field]: {
+          value,
+          error: errorCheck?.(value) ?? null,
+        },
+      },
+    })
+  }
+  const handleSaveCycle = (): void => {
+    const orderedCycleSteps = orderedCycleStepIds.map(cycleStepId => {
+      const step = cycleStepsById[cycleStepId]
+      const { minutes, seconds } = getTimeFromString(step.time.value ?? '')
+      const cycleStepData: ThermocyclerStepType = {
+        durationMinutes: minutes,
+        durationSeconds: seconds,
+        id: cycleStepId,
+        temperature: step.temp.value ?? '',
+        title: step.name.value ?? '',
+        type: 'profileStep',
+      }
+      return cycleStepData
+    })
+    const cycleData: ThermocyclerCycleType = {
+      id: cycleId ?? uuid(),
+      title: '',
+      steps: orderedCycleSteps,
+      type: 'profileCycle',
+      repetitions: repetitions ?? '',
+    }
+    const existingCycleIndex = steps.findIndex(step => step.id === cycleId)
+    if (existingCycleIndex >= 0) {
+      // editing a cycle that was already created
+      setSteps([
+        ...steps.slice(0, existingCycleIndex),
+        cycleData,
+        ...steps.slice(existingCycleIndex + 1),
+      ])
+    } else {
+      // append to end of steps
+      setSteps([...steps, cycleData])
+    }
+    setShowCreateNewCycle(false)
+    setShowEditCurrentCycle(false)
+    setIsInEdit(false)
+  }
+
+  const header = showEdit ? (
+    <Flex
+      padding={`${SPACING.spacing12} ${SPACING.spacing16}`}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width="100%"
+    >
+      <Flex gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER}>
+        <StyledText
+          desktopStyle="bodyDefaultRegular"
+          borderRadius={BORDERS.borderRadius4}
+          backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
+          padding={`${SPACING.spacing2} ${SPACING.spacing8}`}
+        >
+          {cycleId != null ? getStepIndex(steps, cycleId) : steps.length + 1}
+        </StyledText>
+        <StyledText desktopStyle="bodyDefaultRegular">
+          {i18n.format(
+            t('form:step_edit_form.field.thermocyclerProfile.cycle'),
+            'capitalize'
+          )}
+        </StyledText>
+      </Flex>
+      <Flex gridGap={SPACING.spacing8}>
+        <Btn
+          onClick={handleDeleteCycle}
+          whiteSpace={NO_WRAP}
+          textDecoration={TYPOGRAPHY.textDecorationUnderline}
+        >
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {i18n.format(
+              t('form:step_edit_form.field.thermocyclerProfile.delete'),
+              'capitalize'
+            )}
+          </StyledText>
+        </Btn>
+        <PrimaryButton onClick={handleSaveCycle} disabled={isStepStateError}>
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {i18n.format(t('save'), 'capitalize')}
+          </StyledText>
+        </PrimaryButton>
+      </Flex>
+    </Flex>
+  ) : (
+    <Flex
+      padding={`${SPACING.spacing12} ${SPACING.spacing16}`}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width="100%"
+      backgroundColor={backgroundColor}
+      borderRadius={BORDERS.borderRadius4}
+      onMouseEnter={() => {
+        setHover(true)
+      }}
+      onMouseLeave={() => {
+        setHover(false)
+      }}
+    >
+      <Flex gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER}>
+        <StyledText
+          desktopStyle="bodyDefaultRegular"
+          borderRadius={BORDERS.borderRadius4}
+          backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
+          padding={`${SPACING.spacing2} ${SPACING.spacing8}`}
+        >
+          {getStepIndex(steps, cycleId ?? '')}
+        </StyledText>
+        <StyledText desktopStyle="bodyDefaultRegular">
+          {i18n.format(
+            t('form:step_edit_form.field.thermocyclerProfile.cycles', {
+              repetitions,
+            }),
+            'capitalize'
+          )}
+        </StyledText>
+      </Flex>
+      <Flex gridGap={SPACING.spacing8}>
+        {hover ? (
+          <Btn
+            whiteSpace={NO_WRAP}
+            textDecoration={TYPOGRAPHY.textDecorationUnderline}
+            onClick={() => {
+              setShowEditCurrentCycle(true)
+              setIsInEdit(true)
+            }}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {i18n.format(t('edit'), 'capitalize')}
+            </StyledText>
+          </Btn>
+        ) : null}
+        <Flex
+          css={css`
+            &:hover {
+              background-color: ${COLORS.grey40};
+            }
+          `}
+          borderRadius={BORDERS.borderRadius4}
+          cursor={CURSOR_POINTER}
+          onClick={handleDeleteCycle}
+        >
+          <Icon name="close" size="1.5rem" />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+  const bodyContent = (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing8}
+      alignItems={ALIGN_FLEX_END}
+      padding={SPACING.spacing12}
+      onMouseEnter={() => {
+        setHover(true)
+      }}
+      onMouseLeave={() => {
+        setHover(false)
+      }}
+    >
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        width="100%"
+      >
+        {orderedCycleStepIds.map((cycleStepId, cycleStepIndex) => {
+          const stepState = cycleStepsById[cycleStepId]
+          return showEdit ? (
+            <Flex
+              key={cycleStepId}
+              gridGap={SPACING.spacing24}
+              backgroundColor={COLORS.grey10}
+              padding={SPACING.spacing12}
+              borderRadius={BORDERS.borderRadius4}
+            >
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={SPACING.spacing4}
+                width="33%"
+              >
+                <InputField
+                  title={i18n.format(
+                    t('form:step_edit_form.field.thermocyclerProfile.name'),
+                    'capitalize'
+                  )}
+                  value={stepState.name.value}
+                  onChange={(e: React.ChangeEvent<any>) => {
+                    handleValueUpdate(
+                      cycleStepId,
+                      'name',
+                      e.target.value as string
+                    )
+                  }}
+                />
+              </Flex>
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={SPACING.spacing4}
+                width="33%"
+              >
+                <InputField
+                  title={i18n.format(
+                    t(
+                      'form:step_edit_form.field.thermocyclerState.block.temperature'
+                    ),
+                    'capitalize'
+                  )}
+                  units={t('units.degrees')}
+                  value={stepState.temp.value}
+                  onChange={(e: React.ChangeEvent<any>) => {
+                    handleValueUpdate(
+                      cycleStepId,
+                      'temp',
+                      maskToFloat(e.target.value),
+                      temperatureRangeFieldValue(4, 96)
+                    )
+                  }}
+                  onBlur={() => {
+                    setCycleStepsById({
+                      ...cycleStepsById,
+                      [cycleStepId]: {
+                        ...stepState,
+                        temp: {
+                          ...stepState.temp,
+                          wasAccessed: true,
+                        },
+                      },
+                    })
+                  }}
+                  error={
+                    stepState.temp.wasAccessed ? stepState.temp.error : null
+                  }
+                />
+              </Flex>
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={SPACING.spacing4}
+                width="33%"
+              >
+                <InputField
+                  title={i18n.format(
+                    t('form:step_edit_form.field.thermocyclerProfile.time'),
+                    'capitalize'
+                  )}
+                  units={t('units.time')}
+                  value={stepState.time.value}
+                  onChange={(e: React.ChangeEvent<any>) => {
+                    handleValueUpdate(
+                      cycleStepId,
+                      'time',
+                      maskToTime(e.target.value),
+                      isTimeFormatMinutesSeconds
+                    )
+                  }}
+                  onBlur={() => {
+                    setCycleStepsById({
+                      ...cycleStepsById,
+                      [cycleStepId]: {
+                        ...stepState,
+                        time: {
+                          ...stepState.time,
+                          wasAccessed: true,
+                        },
+                      },
+                    })
+                  }}
+                  error={
+                    stepState.time.wasAccessed ? stepState.time.error : null
+                  }
+                />
+              </Flex>
+              <Flex
+                css={css`
+                  &:hover {
+                    background-color: ${COLORS.grey40};
+                  }
+                `}
+                borderRadius={BORDERS.borderRadius4}
+                cursor={CURSOR_POINTER}
+                onClick={() => {
+                  handleDeleteStep(cycleStepId)
+                }}
+                alignSelf={ALIGN_CENTER}
+              >
+                <Icon name="close" size="1.5rem" />
+              </Flex>
+            </Flex>
+          ) : (
+            <Flex
+              key={cycleStepId}
+              gridGap={SPACING.spacing24}
+              backgroundColor={COLORS.grey10}
+              padding={SPACING.spacing12}
+              borderRadius={BORDERS.borderRadius4}
+            >
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                backgroundColor={COLORS.grey40}
+                padding={`${SPACING.spacing2} ${SPACING.spacing8} `}
+                borderRadius={BORDERS.borderRadius4}
+              >{`${getStepIndex(steps, cycleId ?? '')}.${
+                cycleStepIndex + 1
+              }`}</StyledText>
+              <StyledText desktopStyle="bodyDefaultRegular">{`${
+                stepState.name.value
+              }, ${stepState.temp.value}${t('units.degrees')}, ${
+                stepState.time.value
+              }, `}</StyledText>
+            </Flex>
+          )
+        })}
+      </Flex>
+      {showEdit ? (
+        <>
+          <Btn
+            onClick={handleAddCycleStep}
+            whiteSpace={NO_WRAP}
+            textDecoration={TYPOGRAPHY.textDecorationUnderline}
+          >
+            <StyledText desktopStyle="bodyDefaultRegular">
+              {i18n.format(
+                t(
+                  'form:step_edit_form.field.thermocyclerProfile.add_cycle_step'
+                ),
+                'capitalize'
+              )}
+            </StyledText>
+          </Btn>
+          <InputField
+            title={i18n.format(
+              t(
+                'form:step_edit_form.field.thermocyclerProfile.number_of_cycles'
+              ),
+              'capitalize'
+            )}
+            value={repetitions}
+            onChange={e => {
+              setRepetitions(maskToInteger(e.target.value))
+            }}
+          />
+        </>
+      ) : null}
+    </Flex>
+  )
+
+  return (
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      backgroundColor={backgroundColor}
+      borderRadius={BORDERS.borderRadius4}
+    >
+      {header}
+      {bodyContent}
+    </Flex>
+  )
+}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
index 328125317e2..cb816041010 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx
@@ -13,12 +13,18 @@ import {
   StyledText,
 } from '@opentrons/components'
 
+import { ThermocyclerCycle } from './ThermocyclerCycle'
 import { ThermocyclerStep } from './ThermocyclerStep'
 
 import type { FormData } from '../../../../../../form-types'
 import type { FieldPropsByName } from '../../types'
+import type { ThermocyclerCycleType } from './ThermocyclerCycle'
 import type { ThermocyclerStepType } from './ThermocyclerStep'
 
+export type ThermocyclerStepTypeGeneral =
+  | ThermocyclerCycleType
+  | ThermocyclerStepType
+
 interface ThermocyclerModalProps {
   formData: FormData
   propsForFields: FieldPropsByName
@@ -33,10 +39,11 @@ export function ThermocyclerProfileModal(
 
   const [showCreateNewStep, setShowCreateNewStep] = useState<boolean>(false)
   const [showCreateNewCycle, setShowCreateNewCycle] = useState<boolean>(false)
-  const [steps, setSteps] = useState<ThermocyclerStepType[]>(
+  const [isInEdit, setIsInEdit] = useState<boolean>(false)
+  const [steps, setSteps] = useState<ThermocyclerStepTypeGeneral[]>(
     formData.orderedProfileItems.map(
       (id: string) => formData.profileItemsById[id]
-    ) as ThermocyclerStepType[]
+    ) as ThermocyclerStepTypeGeneral[]
   )
   const canAddStepOrProfile = !(showCreateNewCycle || showCreateNewStep)
 
@@ -71,7 +78,10 @@ export function ThermocyclerProfileModal(
               {i18n.format(t('cancel'), 'capitalize')}
             </StyledText>
           </SecondaryButton>
-          <PrimaryButton onClick={handleSaveModal} disabled={showCreateNewStep}>
+          <PrimaryButton
+            onClick={handleSaveModal}
+            disabled={isInEdit || showCreateNewCycle || showCreateNewStep}
+          >
             <StyledText desktopStyle="bodyDefaultRegular">
               {i18n.format(t('save'), 'capitalize')}
             </StyledText>
@@ -111,24 +121,43 @@ export function ThermocyclerProfileModal(
                 <ThermocyclerStep
                   key={step.id}
                   step={step}
-                  setShowCreateNewStep={setShowCreateNewStep}
                   steps={steps}
                   setSteps={setSteps}
+                  setShowCreateNewStep={setShowCreateNewStep}
+                  setIsInEdit={setIsInEdit}
+                  readOnly
                 />
               ) : (
                 // TODO (nd: 10/1/2024): add add profile cycle component
-                <>TODO: wire up cycle</>
+                <ThermocyclerCycle
+                  key={step.id}
+                  step={step}
+                  steps={steps}
+                  setSteps={setSteps}
+                  setShowCreateNewCycle={setShowCreateNewCycle}
+                  setIsInEdit={setIsInEdit}
+                  readOnly
+                />
               )
             })}
             {showCreateNewStep ? (
               <ThermocyclerStep
+                steps={steps}
+                setSteps={setSteps}
                 setShowCreateNewStep={setShowCreateNewStep}
+                setIsInEdit={setIsInEdit}
+                readOnly={false}
+              />
+            ) : null}
+            {showCreateNewCycle ? (
+              <ThermocyclerCycle
                 steps={steps}
                 setSteps={setSteps}
+                setShowCreateNewCycle={setShowCreateNewCycle}
+                setIsInEdit={setIsInEdit}
                 readOnly={false}
               />
             ) : null}
-            {showCreateNewCycle ? <>TODO: wire up cycle</> : null}
           </Flex>
         ) : (
           <InfoScreen
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
index b34c2313677..3ab5405d13d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerStep.tsx
@@ -29,6 +29,8 @@ import {
 import { uuid } from '../../../../../../utils'
 import { getTimeFromString, getStepIndex } from './utils'
 
+import type { ThermocyclerStepTypeGeneral } from './ThermocyclerProfileModal'
+
 export interface ThermocyclerStepType {
   durationMinutes: string
   durationSeconds: string
@@ -39,12 +41,12 @@ export interface ThermocyclerStepType {
 }
 
 interface ThermocyclerStepProps {
-  steps: ThermocyclerStepType[]
-  setSteps: React.Dispatch<React.SetStateAction<any[]>>
-  setShowCreateNewStep: (_: boolean) => void
+  steps: ThermocyclerStepTypeGeneral[]
+  setSteps: React.Dispatch<React.SetStateAction<ThermocyclerStepTypeGeneral[]>>
+  setShowCreateNewStep: React.Dispatch<React.SetStateAction<boolean>>
+  setIsInEdit: React.Dispatch<React.SetStateAction<boolean>>
   step?: ThermocyclerStepType
   backgroundColor?: string
-  showHeader?: boolean
   readOnly?: boolean
 }
 export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
@@ -54,21 +56,22 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
     steps,
     setSteps,
     backgroundColor = COLORS.grey30,
-    showHeader = true,
     readOnly = true,
+    setIsInEdit,
   } = props
   const { i18n, t } = useTranslation(['application', 'form'])
   const [hover, setHover] = useState<boolean>(false)
   const [showEdit, setShowEditCurrentStep] = useState<boolean>(!readOnly)
   const [stepState, setStepState] = useState({
     name: { value: step?.title, error: null },
-    temp: { value: step?.temperature, error: null },
+    temp: { value: step?.temperature, error: null, wasAccessed: false },
     time: {
       value:
         step?.durationMinutes != null && step?.durationSeconds != null
           ? `${step.durationMinutes}:${step.durationSeconds}`
           : undefined,
       error: null,
+      wasAccessed: false,
     },
   })
   const id = step?.id ?? null
@@ -86,6 +89,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
     } else {
       setShowCreateNewStep(false)
     }
+    setIsInEdit(false)
   }
   const handleValueUpdate = (
     field: 'name' | 'temp' | 'time',
@@ -101,14 +105,13 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
     })
   }
   const handleSaveStep = (): void => {
-    const stepId = uuid()
     const { minutes, seconds } = getTimeFromString(stepState.time.value ?? '')
-    const stepBaseData = {
+    const stepBaseData: ThermocyclerStepType = {
       durationMinutes: minutes,
       durationSeconds: seconds,
-      id: stepId,
-      temperature: stepState.temp.value,
-      title: stepState.name.value,
+      id: id ?? '',
+      temperature: stepState.temp.value ?? '',
+      title: stepState.name.value ?? '',
       type: 'profileStep',
     }
 
@@ -117,14 +120,15 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
       // editing a step already in steps
       setSteps([
         ...steps.slice(0, existingStepIndex),
-        { ...stepBaseData, id },
+        { ...stepBaseData, id: id ?? uuid() },
         ...steps.slice(existingStepIndex + 1),
       ])
     } else {
-      setSteps([...steps, { ...stepBaseData, id: stepId }])
+      setSteps([...steps, { ...stepBaseData, id: uuid() }])
     }
     setShowCreateNewStep(false)
     setShowEditCurrentStep(false)
+    setIsInEdit(false)
   }
 
   const header = showEdit ? (
@@ -207,6 +211,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
             onClick={() => {
               setShowEditCurrentStep(true)
+              setIsInEdit(true)
             }}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
@@ -269,7 +274,13 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
               temperatureRangeFieldValue(4, 96)
             )
           }}
-          error={stepState.temp.error}
+          onBlur={() => {
+            setStepState({
+              ...stepState,
+              temp: { ...stepState.temp, wasAccessed: true },
+            })
+          }}
+          error={stepState.temp.wasAccessed ? stepState.temp.error : null}
         />
       </Flex>
       <Flex
@@ -291,7 +302,13 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
               isTimeFormatMinutesSeconds
             )
           }}
-          error={stepState.time.error}
+          onBlur={() => {
+            setStepState({
+              ...stepState,
+              time: { ...stepState.time, wasAccessed: true },
+            })
+          }}
+          error={stepState.time.wasAccessed ? stepState.time.error : null}
         />
       </Flex>
     </Flex>
@@ -303,7 +320,7 @@ export function ThermocyclerStep(props: ThermocyclerStepProps): JSX.Element {
       backgroundColor={backgroundColor}
       borderRadius={BORDERS.borderRadius4}
     >
-      {showHeader ? header : null}
+      {header}
       {showEdit ? editContent : null}
     </Flex>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
index 071006c4d3f..834306b7b76 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/index.tsx
@@ -15,18 +15,13 @@ import { ThermocyclerState } from './ThermocyclerState'
 
 import type { StepFormProps } from '../../types'
 
-type ThermocyclerContentType =
-  | 'thermocyclerState'
-  | 'thermocyclerProfile'
-  | null
+type ThermocyclerContentType = 'thermocyclerState' | 'thermocyclerProfile'
 
 export function ThermocyclerTools(props: StepFormProps): JSX.Element {
   const { propsForFields, formData, toolboxStep } = props
   const { t } = useTranslation('form')
 
-  console.log(formData)
   const [contentType, setContentType] = useState<ThermocyclerContentType>(
-    // (formData.thermocyclerFormType ?? null) as ThermocyclerContentType
     (formData.thermocyclerFormType as ThermocyclerContentType) ??
       'thermocyclerState'
   )