diff --git a/src/component/ComponentForm.tsx b/src/component/ComponentForm.tsx
index 08d6117..99568da 100644
--- a/src/component/ComponentForm.tsx
+++ b/src/component/ComponentForm.tsx
@@ -699,6 +699,86 @@ export default function ComponentForm(props: Props) {
     );
   };
 
+  const componentMode = () => {
+    const { component, coefficient, offset } = form;
+    return (
+      <React.Fragment>
+              <Grid size={{ xs: 4, sm: 3 }}>
+                <Tooltip
+                  title="Switch to be able to customize the mode of the component"
+                  placement="bottom">
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={component.settings.calibrate}
+                        onChange={toggleCalibrate}
+                        name="mode"
+                        aria-label="mode"
+                        color="secondary"
+                      />
+                    }
+                    label="Mode"
+                    labelPlacement="top"
+                    className={classes.switchControl}
+                    disabled={!canEdit}
+                  />
+                </Tooltip>
+              </Grid>
+              <Grid size={{ xs: 10, sm: 4 }}>
+                {compMode.mode.entryA && (
+                  <TextField
+                    id={compMode.mode.labelA}
+                    label={compMode.mode.labelA}
+                    disabled={!component.settings.calibrate}
+                    error={!isCoefficientValid()}
+                    value={coefficient}
+                    onChange={changeCoefficient}
+                    margin="normal"
+                    fullWidth
+                    select={compMode.mode.entryA === "select"}
+                    type={compMode.mode.entryA}
+                    variant="outlined">
+                    {compMode.mode.entryA === "select" &&
+                      compMode.mode.dictionaryA.map((elem: any) => {
+                        if (!elem.restricted || (elem.restricted && user.hasAdmin())) {
+                          return (
+                            <MenuItem key={elem.key} value={elem.value}>
+                              {elem.key}
+                            </MenuItem>
+                          );
+                        }
+                        return undefined; //TODO-CS: Time permitting re-think the structure of this function so that I don't have to return undefined
+                      })}
+                  </TextField>
+                )}
+              </Grid>
+              <Grid size={{ xs: 10, sm: 5 }}>
+                {compMode.mode.entryB && (
+                  <TextField
+                    id={compMode.mode.labelB}
+                    label={compMode.mode.labelB}
+                    disabled={!component.settings.calibrate}
+                    error={!isOffsetValid(compMode.mode.minB, compMode.mode.maxB)}
+                    value={offset}
+                    onChange={changeOffset}
+                    onFocus={selectText}
+                    margin="normal"
+                    fullWidth
+                    type={compMode.mode.entryB}
+                    variant="outlined">
+                    {compMode.mode.entryB === "select" &&
+                      compMode.mode.dictionaryB.map((elem: any) => (
+                        <MenuItem key={elem.key} value={elem.value}>
+                          {elem.key}
+                        </MenuItem>
+                      ))}
+                  </TextField>
+                )}
+              </Grid>
+            </React.Fragment>
+    )
+  }
+
   const describeSource = (measurementType: quack.MeasurementType): MeasurementDescriber => {
     const { component } = form;
     return describeMeasurement(measurementType, component.type(), component.subType());
@@ -1046,87 +1126,17 @@ export default function ComponentForm(props: Props) {
               </AccordionDetails>
             </Accordion>
           }
-          {!compMode ? (
-            device.featureSupported("individualCalibrations") ? (
-              individualCalibration()
-            ) : (
-              blanketCalibration()
-            )
-          ) : (
+          {device.featureSupported("individualCalibrations") ? (
             <React.Fragment>
-              <Grid size={{ xs: 4, sm: 3 }}>
-                <Tooltip
-                  title="Switch to be able to customize the mode of the component"
-                  placement="bottom">
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        checked={component.settings.calibrate}
-                        onChange={toggleCalibrate}
-                        name="mode"
-                        aria-label="mode"
-                        color="secondary"
-                      />
-                    }
-                    label="Mode"
-                    labelPlacement="top"
-                    className={classes.switchControl}
-                    disabled={!canEdit}
-                  />
-                </Tooltip>
-              </Grid>
-              <Grid size={{ xs: 10, sm: 4 }}>
-                {compMode.mode.entryA && (
-                  <TextField
-                    id={compMode.mode.labelA}
-                    label={compMode.mode.labelA}
-                    disabled={!component.settings.calibrate}
-                    error={!isCoefficientValid()}
-                    value={coefficient}
-                    onChange={changeCoefficient}
-                    margin="normal"
-                    fullWidth
-                    select={compMode.mode.entryA === "select"}
-                    type={compMode.mode.entryA}
-                    variant="outlined">
-                    {compMode.mode.entryA === "select" &&
-                      compMode.mode.dictionaryA.map((elem: any) => {
-                        if (!elem.restricted || (elem.restricted && user.hasAdmin())) {
-                          return (
-                            <MenuItem key={elem.key} value={elem.value}>
-                              {elem.key}
-                            </MenuItem>
-                          );
-                        }
-                        return undefined; //TODO-CS: Time permitting re-think the structure of this function so that I don't have to return undefined
-                      })}
-                  </TextField>
-                )}
-              </Grid>
-              <Grid size={{ xs: 10, sm: 5 }}>
-                {compMode.mode.entryB && (
-                  <TextField
-                    id={compMode.mode.labelB}
-                    label={compMode.mode.labelB}
-                    disabled={!component.settings.calibrate}
-                    error={!isOffsetValid(compMode.mode.minB, compMode.mode.maxB)}
-                    value={offset}
-                    onChange={changeOffset}
-                    onFocus={selectText}
-                    margin="normal"
-                    fullWidth
-                    type={compMode.mode.entryB}
-                    variant="outlined">
-                    {compMode.mode.entryB === "select" &&
-                      compMode.mode.dictionaryB.map((elem: any) => (
-                        <MenuItem key={elem.key} value={elem.value}>
-                          {elem.key}
-                        </MenuItem>
-                      ))}
-                  </TextField>
-                )}
-              </Grid>
+              {compMode && componentMode()}
+              {individualCalibration()}
             </React.Fragment>
+          ) : (
+            !compMode ? (
+              blanketCalibration()
+            ):(
+              componentMode()
+            )
           )}
           <TextField
             id="dataAveraging"