diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
index 98a1e328809..f6dcb7d5e37 100644
--- a/protocol-designer/src/assets/localization/en/form.json
+++ b/protocol-designer/src/assets/localization/en/form.json
@@ -23,7 +23,11 @@
   "liquid_placement": {
     "liquid": "Liquid",
     "volume": "Volume",
-    "volume_exceeded": "Warning: exceeded max volume per well: {{volume}}µL"
+    "errors": {
+      "liquid_required": "Define a liquid",
+      "volume_exceeded": "Warning: exceeded max volume per well: {{volume}}µL",
+      "volume_required": "Define a volume"
+    }
   },
   "pipette_mount_label": {
     "left": "(L)",
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx
index 4f33b968db4..215e1575060 100644
--- a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx
+++ b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx
@@ -12,7 +12,7 @@ import {
   Flex,
   Icon,
   LiquidIcon,
-  ListItem,
+  ListButton,
   SPACING,
   StyledText,
   TEXT_DECORATION_UNDERLINE,
@@ -98,7 +98,15 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
   }
 
   return (
-    <ListItem type="noActive" flexDirection={DIRECTION_COLUMN} key={name}>
+    <ListButton
+      type="noActive"
+      flexDirection={DIRECTION_COLUMN}
+      key={name}
+      onClick={() => {
+        setIsExpanded(prev => !prev)
+      }}
+      padding="0"
+    >
       <Flex
         flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing12}
@@ -133,12 +141,7 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
                 : null}
             </StyledText>
           </Flex>
-          <Flex
-            cursor={CURSOR_POINTER}
-            onClick={() => {
-              setIsExpanded(prev => !prev)
-            }}
-          >
+          <Flex cursor={CURSOR_POINTER}>
             <Icon
               name={isExpanded ? 'chevron-up' : 'chevron-down'}
               size="2rem"
@@ -162,42 +165,47 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
         </Btn>
       </Flex>
       {isExpanded ? (
-        <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16}>
-          <Flex gridGap={SPACING.spacing4} color={COLORS.grey60}>
-            <StyledText width="50%" desktopStyle="bodyDefaultRegular">
-              {t('well')}
-            </StyledText>
-            <Flex width="50%">
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {t('microliters')}
+        <>
+          <Divider borderBottom={`1px solid ${COLORS.grey40}`} />
+          <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16}>
+            <Flex gridGap={SPACING.spacing4} color={COLORS.grey60}>
+              <StyledText width="50%" desktopStyle="bodyDefaultRegular">
+                {t('well')}
               </StyledText>
+              <Flex width="50%">
+                <StyledText desktopStyle="bodyDefaultRegular">
+                  {t('microliters')}
+                </StyledText>
+              </Flex>
             </Flex>
-          </Flex>
-          <Divider borderColor={COLORS.grey35} />
-          {info.liquidIndex != null
-            ? fullWellsByLiquid[info.liquidIndex]
-                .sort((a, b) =>
-                  orderedWells.indexOf(b) > orderedWells.indexOf(a) ? -1 : 1
-                )
-                .map((wellName, wellliquidIndex) => {
-                  const volume =
-                    wellContents != null
-                      ? wellContents[wellName].ingreds[liquidIndex].volume
-                      : 0
-                  return (
-                    <>
-                      <WellContents wellName={wellName} volume={volume} />
-                      {wellliquidIndex <
-                      fullWellsByLiquid[liquidIndex].length - 1 ? (
-                        <Divider borderColor={COLORS.grey35} />
-                      ) : null}
-                    </>
+            <Divider borderBottom={`1px solid ${COLORS.grey40}`} />
+            {info.liquidIndex != null
+              ? fullWellsByLiquid[info.liquidIndex]
+                  .sort((a, b) =>
+                    orderedWells.indexOf(b) > orderedWells.indexOf(a) ? -1 : 1
                   )
-                })
-            : null}
-        </Flex>
+                  .map((wellName, wellliquidIndex) => {
+                    const volume =
+                      wellContents != null
+                        ? wellContents[wellName].ingreds[liquidIndex].volume
+                        : 0
+                    return (
+                      <>
+                        <WellContents wellName={wellName} volume={volume} />
+                        {wellliquidIndex <
+                        fullWellsByLiquid[liquidIndex].length - 1 ? (
+                          <Divider
+                            borderBottom={`1px solid ${COLORS.grey40}`}
+                          />
+                        ) : null}
+                      </>
+                    )
+                  })
+              : null}
+          </Flex>
+        </>
       ) : null}
-    </ListItem>
+    </ListButton>
   )
 }
 
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
index 269d78d5c05..5ec1618e72c 100644
--- a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
+++ b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
@@ -106,11 +106,12 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
     control,
     setValue,
     reset,
-    formState: { touchedFields },
+    formState,
   } = useForm<ToolboxFormValues>({
     defaultValues: getInitialValues(),
   })
 
+  const { errors } = formState
   const selectedLiquidId = watch('selectedLiquidId')
   const volume = watch('volume')
 
@@ -184,15 +185,22 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
     reset()
   }
 
-  let volumeErrors: string | null = null
-  if (Boolean(touchedFields.volume)) {
-    if (volume == null || volume === '0') {
-      volumeErrors = t('generic.error.more_than_zero')
-    } else if (parseInt(volume) > selectedWellsMaxVolume) {
-      volumeErrors = t('form:liquid_placement.volume_exceeded', {
+  const validateVolume = (
+    volume: string | null | undefined
+  ): string | undefined => {
+    if (volume == null || volume === '') {
+      return t('form:liquid_placement.errors.volume_required')
+    }
+    const volumeNumber = parseFloat(volume)
+    if (volumeNumber === 0) {
+      return t('form:generic.error.more_than_zero')
+    }
+    if (volumeNumber > selectedWellsMaxVolume) {
+      return t('form:liquid_placement.errors.volume_exceeded', {
         volume: selectedWellsMaxVolume,
       })
     }
+    return undefined
   }
 
   let wellContents: ContentsByWell | null = null
@@ -301,7 +309,12 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
                         name="selectedLiquidId"
                         control={control}
                         rules={{
-                          required: true,
+                          required: {
+                            value: true,
+                            message: t(
+                              'form:liquid_placement.errors.liquid_required'
+                            ),
+                          },
                         }}
                         render={({ field }) => {
                           const fullOptions: DropdownOption[] = liquidSelectionOptions.map(
@@ -337,6 +350,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
                               }}
                               onClick={field.onChange}
                               menuPlacement="bottom"
+                              error={errors.selectedLiquidId?.message}
                             />
                           )
                         }}
@@ -354,14 +368,14 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
                         name="volume"
                         control={control}
                         rules={{
-                          required: true,
+                          validate: validateVolume,
                         }}
                         render={({ field }) => (
                           <InputField
                             name="volume"
                             units={t('application:units.microliter')}
                             value={volume}
-                            error={volumeErrors}
+                            error={errors.volume?.message}
                             onBlur={field.onBlur}
                             onChange={handleChangeVolume}
                           />
@@ -377,18 +391,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
                           {t('shared:cancel')}
                         </StyledText>
                       </Btn>
-                      <PrimaryButton
-                        disabled={
-                          volumeErrors != null ||
-                          volume == null ||
-                          volume === '' ||
-                          selectedLiquidId == null ||
-                          selectedLiquidId === ''
-                        }
-                        type="submit"
-                      >
-                        {t('save')}
-                      </PrimaryButton>
+                      <PrimaryButton type="submit">{t('save')}</PrimaryButton>
                     </Flex>
                   </Flex>
                 </ListItem>