diff --git a/app/src/components/fields/AnimalAutocompleteField.tsx b/app/src/components/fields/AnimalAutocompleteField.tsx
index 5d7cc0ab39..355c8334a9 100644
--- a/app/src/components/fields/AnimalAutocompleteField.tsx
+++ b/app/src/components/fields/AnimalAutocompleteField.tsx
@@ -168,7 +168,7 @@ export const AnimalAutocompleteField = <T extends string | number>(props: IAnima
           error={get(touched, formikFieldName) && Boolean(get(errors, formikFieldName))}
           helperText={get(touched, formikFieldName) && get(errors, formikFieldName)}
           fullWidth
-          placeholder={placeholder || 'Search for an animal in the Survey'}
+          placeholder={placeholder ?? 'Search for an animal in the Survey'}
           InputProps={{
             ...params.InputProps,
             endAdornment: (
diff --git a/app/src/components/fields/DeviceAutocompleteField.tsx b/app/src/components/fields/DeviceAutocompleteField.tsx
index a1ddbc911b..8c40d03b4f 100644
--- a/app/src/components/fields/DeviceAutocompleteField.tsx
+++ b/app/src/components/fields/DeviceAutocompleteField.tsx
@@ -177,7 +177,7 @@ export const DeviceAutocompleteField = <T extends string | number>(props: IDevic
           error={get(touched, formikFieldName) && Boolean(get(errors, formikFieldName))}
           helperText={get(touched, formikFieldName) && get(errors, formikFieldName)}
           fullWidth
-          placeholder={placeholder || 'Search for a device in the Survey'}
+          placeholder={placeholder ?? 'Search for a device in the Survey'}
           InputProps={{
             ...params.InputProps,
             endAdornment: <>{params.InputProps.endAdornment}</>
diff --git a/app/src/components/fields/SystemUserAutocompleteField.tsx b/app/src/components/fields/SystemUserAutocompleteField.tsx
index be2e133998..a39c93b372 100644
--- a/app/src/components/fields/SystemUserAutocompleteField.tsx
+++ b/app/src/components/fields/SystemUserAutocompleteField.tsx
@@ -199,7 +199,7 @@ export const SystemUserAutocompleteField = (props: ISystemUserAutocompleteFieldP
           {...params}
           variant="outlined"
           label={label}
-          placeholder={placeholder || 'Search by user'}
+          placeholder={placeholder ?? 'Search by user'}
           fullWidth
           InputProps={{
             ...params.InputProps,
diff --git a/app/src/components/species/components/SpeciesAutocompleteField.tsx b/app/src/components/species/components/SpeciesAutocompleteField.tsx
index e0d553bc8f..0a4688f4be 100644
--- a/app/src/components/species/components/SpeciesAutocompleteField.tsx
+++ b/app/src/components/species/components/SpeciesAutocompleteField.tsx
@@ -285,7 +285,7 @@ const SpeciesAutocompleteField = (props: ISpeciesAutocompleteFieldProps) => {
           label={label}
           variant="outlined"
           fullWidth
-          placeholder={placeholder || 'Enter a species or taxon'}
+          placeholder={placeholder ?? 'Enter a species or taxon'}
           InputProps={{
             ...params.InputProps,
             startAdornment: showStartAdornment && (
diff --git a/app/src/features/surveys/sampling-information/SamplingRouter.tsx b/app/src/features/surveys/sampling-information/SamplingRouter.tsx
index 1660e4ecb7..968504d3e8 100644
--- a/app/src/features/surveys/sampling-information/SamplingRouter.tsx
+++ b/app/src/features/surveys/sampling-information/SamplingRouter.tsx
@@ -23,10 +23,7 @@ export const SamplingRouter = () => {
         path="/admin/projects/:id/surveys/:survey_id/sampling"
         title={getTitle('Manage Sampling Information')}>
         <ProjectRoleRouteGuard
-          validProjectPermissions={[
-            PROJECT_PERMISSION.COORDINATOR,
-            PROJECT_PERMISSION.COLLABORATOR,
-          ]}
+          validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
           <DialogContextProvider>
             <SamplingSiteManagePage />
diff --git a/app/src/features/surveys/telemetry/TelemetryRouter.tsx b/app/src/features/surveys/telemetry/TelemetryRouter.tsx
index 9632af687b..44ab0cbaa9 100644
--- a/app/src/features/surveys/telemetry/TelemetryRouter.tsx
+++ b/app/src/features/surveys/telemetry/TelemetryRouter.tsx
@@ -30,10 +30,7 @@ export const TelemetryRouter = () => {
         path="/admin/projects/:id/surveys/:survey_id/telemetry/details"
         title={getTitle('Telemetry')}>
         <ProjectRoleRouteGuard
-          validProjectPermissions={[
-            PROJECT_PERMISSION.COORDINATOR,
-            PROJECT_PERMISSION.COLLABORATOR,
-          ]}
+          validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
           validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
           <DialogContextProvider>
             <TelemetryPage />
diff --git a/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentForm.tsx b/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentForm.tsx
index 9a7f14c9de..1c92e15561 100644
--- a/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentForm.tsx
+++ b/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentForm.tsx
@@ -39,7 +39,6 @@ export const DeploymentFormYupSchema =
 
 interface IDeploymentFormProps {
   isSubmitting: boolean;
-  isEdit?: boolean;
 }
 
 /**
diff --git a/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentFormHeader.tsx b/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentFormHeader.tsx
index bb94e2867c..e3bffcc7ea 100644
--- a/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentFormHeader.tsx
+++ b/app/src/features/surveys/telemetry/manage/deployments/form/DeploymentFormHeader.tsx
@@ -35,78 +35,76 @@ export const DeploymentFormHeader = (props: IDeploymentFormHeaderProps) => {
   const { project_id, survey_id, survey_name, project_name, is_submitting, title, breadcrumb } = props;
 
   return (
-    <>
-      <Paper
-        square
-        sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 1002,
-          borderBottom: '1px solid' + grey[300]
-        }}>
-        <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
-          <Breadcrumbs
-            aria-label="breadcrumb"
-            separator=">"
-            sx={{
-              typography: 'body2'
-            }}>
-            <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
-              {project_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
-              underline="none">
-              {survey_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
-              underline="none">
-              Manage Telemetry
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
-              underline="none">
-              Manage Devices and Deployments
-            </Link>
-            <Typography component="span" variant="body2" color="textSecondary">
-              {breadcrumb}
-            </Typography>
-          </Breadcrumbs>
-          <Stack
-            alignItems="flex-start"
-            flexDirection={{ xs: 'column', lg: 'row' }}
-            justifyContent="space-between"
-            gap={3}>
-            <Typography variant="h1" sx={{ ml: '-2px' }}>
-              {title}
-            </Typography>
-            <Stack flexDirection="row" alignItems="center" gap={1}>
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                loading={is_submitting}
-                onClick={() => {
-                  formikProps.submitForm();
-                }}>
-                Save and Exit
-              </LoadingButton>
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => {
-                  history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
-                }}>
-                Cancel
-              </Button>
-            </Stack>
+    <Paper
+      square
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 1002,
+        borderBottom: '1px solid' + grey[300]
+      }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
+        <Breadcrumbs
+          aria-label="breadcrumb"
+          separator=">"
+          sx={{
+            typography: 'body2'
+          }}>
+          <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
+            {project_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
+            underline="none">
+            {survey_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
+            underline="none">
+            Manage Telemetry
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
+            underline="none">
+            Manage Devices and Deployments
+          </Link>
+          <Typography component="span" variant="body2" color="textSecondary">
+            {breadcrumb}
+          </Typography>
+        </Breadcrumbs>
+        <Stack
+          alignItems="flex-start"
+          flexDirection={{ xs: 'column', lg: 'row' }}
+          justifyContent="space-between"
+          gap={3}>
+          <Typography variant="h1" sx={{ ml: '-2px' }}>
+            {title}
+          </Typography>
+          <Stack flexDirection="row" alignItems="center" gap={1}>
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              loading={is_submitting}
+              onClick={() => {
+                formikProps.submitForm();
+              }}>
+              Save and Exit
+            </LoadingButton>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
+              }}>
+              Cancel
+            </Button>
           </Stack>
-        </Container>
-      </Paper>
-    </>
+        </Stack>
+      </Container>
+    </Paper>
   );
 };
diff --git a/app/src/features/surveys/telemetry/manage/deployments/form/deployment-details/DeploymentDetailsForm.tsx b/app/src/features/surveys/telemetry/manage/deployments/form/deployment-details/DeploymentDetailsForm.tsx
index c927845ae9..bbf76ed09b 100644
--- a/app/src/features/surveys/telemetry/manage/deployments/form/deployment-details/DeploymentDetailsForm.tsx
+++ b/app/src/features/surveys/telemetry/manage/deployments/form/deployment-details/DeploymentDetailsForm.tsx
@@ -68,94 +68,92 @@ export const DeploymentDetailsForm = (props: IDeploymentDetailsFormProps) => {
   const surveyContext = useSurveyContext();
 
   return (
-    <>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Typography color="textSecondary">
-            You must&nbsp;
-            <Typography
-              sx={{
-                textDecoration: 'none'
-              }}
-              component={RouterLink}
-              to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/telemetry/manage/device/create`}>
-              add the device
-            </Typography>
-            &nbsp;and&nbsp;
-            <Typography
-              sx={{
-                textDecoration: 'none'
-              }}
-              component={RouterLink}
-              to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/animals/create`}>
-              animal
-            </Typography>
-            &nbsp;to your Survey before associating the two in a deployment.
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <Typography color="textSecondary">
+          You must&nbsp;
+          <Typography
+            sx={{
+              textDecoration: 'none'
+            }}
+            component={RouterLink}
+            to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/telemetry/manage/device/create`}>
+            add the device
+          </Typography>
+          &nbsp;and&nbsp;
+          <Typography
+            sx={{
+              textDecoration: 'none'
+            }}
+            component={RouterLink}
+            to={`/admin/projects/${surveyContext.projectId}/surveys/${surveyContext.surveyId}/animals/create`}>
+            animal
           </Typography>
-        </Grid>
-        <Grid item xs={12}>
-          <DeviceAutocompleteField
-            formikFieldName="device_id"
-            label="Device"
-            options={surveyDevices}
-            defaultDevice={surveyDevices.find((device) => device.device_id === values.device_id)}
-            required
-            clearOnSelect
-            onSelect={(device: TelemetryDevice) => {
-              if (device) {
-                setFieldValue('device_id', device.device_id);
-              }
+          &nbsp;to your Survey before associating the two in a deployment.
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        <DeviceAutocompleteField
+          formikFieldName="device_id"
+          label="Device"
+          options={surveyDevices}
+          defaultDevice={surveyDevices.find((device) => device.device_id === values.device_id)}
+          required
+          clearOnSelect
+          onSelect={(device: TelemetryDevice) => {
+            if (device) {
+              setFieldValue('device_id', device.device_id);
+            }
+          }}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <AnimalAutocompleteField
+          formikFieldName="critter_id"
+          label="Animal"
+          defaultAnimal={surveyAnimals.find((animal) => animal.critter_id === values.critter_id)}
+          required
+          clearOnSelect
+          onSelect={(animal: ICritterSimpleResponse) => {
+            if (animal) {
+              setFieldValue('critter_id', animal.critter_id);
+            }
+          }}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <Stack direction="row" flex={1}>
+          <TextField
+            name="frequency"
+            label="Device frequency"
+            inputProps={{ 'data-testid': 'frequency' }}
+            onChange={(event) => {
+              // Ensure that the formik value is set to null if the input is empty, and not empty-string
+              setFieldValue('frequency', numberOrNull(event.target.value));
+            }}
+            onBlur={handleBlur}
+            variant="outlined"
+            value={get(values, 'frequency') || ''} // Ensure that the value is an empty string if it is null (controlled component)
+            error={get(touched, 'frequency') && Boolean(get(errors, 'frequency'))}
+            helperText={get(touched, 'frequency') && get(errors, 'frequency')}
+            sx={{
+              flex: 0.8,
+              '& .MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
             }}
           />
-        </Grid>
-        <Grid item xs={12}>
-          <AnimalAutocompleteField
-            formikFieldName="critter_id"
-            label="Animal"
-            defaultAnimal={surveyAnimals.find((animal) => animal.critter_id === values.critter_id)}
-            required
-            clearOnSelect
-            onSelect={(animal: ICritterSimpleResponse) => {
-              if (animal) {
-                setFieldValue('critter_id', animal.critter_id);
-              }
+          <AutocompleteField
+            name="frequency_unit_id"
+            id="frequency_unit_id"
+            label={'Unit'}
+            options={frequencyUnits}
+            required={!!(values.frequency || values.frequency_unit_id)}
+            sx={{
+              flex: 0.2,
+              '& .MuiOutlinedInput-root': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
             }}
           />
-        </Grid>
-        <Grid item xs={12}>
-          <Stack direction="row" flex={1}>
-            <TextField
-              name="frequency"
-              label="Device frequency"
-              inputProps={{ 'data-testid': 'frequency' }}
-              onChange={(event) => {
-                // Ensure that the formik value is set to null if the input is empty, and not empty-string
-                setFieldValue('frequency', numberOrNull(event.target.value));
-              }}
-              onBlur={handleBlur}
-              variant="outlined"
-              value={get(values, 'frequency') || ''} // Ensure that the value is an empty string if it is null (controlled component)
-              error={get(touched, 'frequency') && Boolean(get(errors, 'frequency'))}
-              helperText={get(touched, 'frequency') && get(errors, 'frequency')}
-              sx={{
-                flex: 0.8,
-                '& .MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
-              }}
-            />
-            <AutocompleteField
-              name="frequency_unit_id"
-              id="frequency_unit_id"
-              label={'Unit'}
-              options={frequencyUnits}
-              required={!!(values.frequency || values.frequency_unit_id)}
-              sx={{
-                flex: 0.2,
-                '& .MuiOutlinedInput-root': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
-              }}
-            />
-          </Stack>
-        </Grid>
+        </Stack>
       </Grid>
-    </>
+    </Grid>
   );
 };
diff --git a/app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsTable.tsx b/app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsTable.tsx
index 666a16fb06..8611323d7e 100644
--- a/app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsTable.tsx
+++ b/app/src/features/surveys/telemetry/manage/deployments/table/DeploymentsTable.tsx
@@ -189,7 +189,7 @@ export const DeploymentsTable = (props: IDeploymentsTableProps) => {
       renderCell: (params) => {
         const [vendor, serial] = params.row.device_key.split(':');
         return (
-          <Typography variant='body2'>
+          <Typography variant="body2">
             {serial}
             <Typography fontSize="inherit" color="textSecondary">
               {vendor}
@@ -254,7 +254,7 @@ export const DeploymentsTable = (props: IDeploymentsTableProps) => {
           params.row.attachment_end_date &&
           dayjs().isBefore(combineDateTime(params.row.attachment_end_date, params.row.attachment_end_time))
         ) {
-          <ColouredRectangleChip colour={blue} label="Done" />;
+          return <ColouredRectangleChip colour={blue} label="Done" />;
         }
 
         return <ColouredRectangleChip colour={green} label="active" />;
diff --git a/app/src/features/surveys/telemetry/manage/devices/form/DeviceFormHeader.tsx b/app/src/features/surveys/telemetry/manage/devices/form/DeviceFormHeader.tsx
index e2601b2f19..42e6886bfe 100644
--- a/app/src/features/surveys/telemetry/manage/devices/form/DeviceFormHeader.tsx
+++ b/app/src/features/surveys/telemetry/manage/devices/form/DeviceFormHeader.tsx
@@ -35,78 +35,76 @@ export const DeviceFormHeader = (props: IDeviceFormHeaderProps) => {
   const { project_id, survey_id, survey_name, project_name, is_submitting, title, breadcrumb } = props;
 
   return (
-    <>
-      <Paper
-        square
-        sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 1002,
-          borderBottom: '1px solid' + grey[300]
-        }}>
-        <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
-          <Breadcrumbs
-            aria-label="breadcrumb"
-            separator=">"
-            sx={{
-              typography: 'body2'
-            }}>
-            <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
-              {project_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
-              underline="none">
-              {survey_name}
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
-              underline="none">
-              Manage Telemetry
-            </Link>
-            <Link
-              component={RouterLink}
-              to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
-              underline="none">
-              Manage Devices and Deployments
-            </Link>
-            <Typography component="span" variant="body2" color="textSecondary">
-              {breadcrumb}
-            </Typography>
-          </Breadcrumbs>
-          <Stack
-            alignItems="flex-start"
-            flexDirection={{ xs: 'column', lg: 'row' }}
-            justifyContent="space-between"
-            gap={3}>
-            <Typography variant="h1" sx={{ ml: '-2px' }}>
-              {title}
-            </Typography>
-            <Stack flexDirection="row" alignItems="center" gap={1}>
-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                loading={is_submitting}
-                onClick={() => {
-                  formikProps.submitForm();
-                }}>
-                Save and Exit
-              </LoadingButton>
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => {
-                  history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
-                }}>
-                Cancel
-              </Button>
-            </Stack>
+    <Paper
+      square
+      sx={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 1002,
+        borderBottom: '1px solid' + grey[300]
+      }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 2, sm: 3 } }}>
+        <Breadcrumbs
+          aria-label="breadcrumb"
+          separator=">"
+          sx={{
+            typography: 'body2'
+          }}>
+          <Link component={RouterLink} to={`/admin/projects/${project_id}`} underline="none">
+            {project_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/details`}
+            underline="none">
+            {survey_name}
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry`}
+            underline="none">
+            Manage Telemetry
+          </Link>
+          <Link
+            component={RouterLink}
+            to={`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`}
+            underline="none">
+            Manage Devices and Deployments
+          </Link>
+          <Typography component="span" variant="body2" color="textSecondary">
+            {breadcrumb}
+          </Typography>
+        </Breadcrumbs>
+        <Stack
+          alignItems="flex-start"
+          flexDirection={{ xs: 'column', lg: 'row' }}
+          justifyContent="space-between"
+          gap={3}>
+          <Typography variant="h1" sx={{ ml: '-2px' }}>
+            {title}
+          </Typography>
+          <Stack flexDirection="row" alignItems="center" gap={1}>
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              loading={is_submitting}
+              onClick={() => {
+                formikProps.submitForm();
+              }}>
+              Save and Exit
+            </LoadingButton>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => {
+                history.push(`/admin/projects/${project_id}/surveys/${survey_id}/telemetry/manage`);
+              }}>
+              Cancel
+            </Button>
           </Stack>
-        </Container>
-      </Paper>
-    </>
+        </Stack>
+      </Container>
+    </Paper>
   );
 };
diff --git a/app/src/features/surveys/telemetry/manage/devices/form/device-details/DeviceDetailsForm.tsx b/app/src/features/surveys/telemetry/manage/devices/form/device-details/DeviceDetailsForm.tsx
index 6cf48b31a4..9cd128c27a 100644
--- a/app/src/features/surveys/telemetry/manage/devices/form/device-details/DeviceDetailsForm.tsx
+++ b/app/src/features/surveys/telemetry/manage/devices/form/device-details/DeviceDetailsForm.tsx
@@ -31,32 +31,30 @@ export const DeviceDetailsForm = (props: IDeviceDetailsFormProps) => {
   const { deviceMakes } = props;
 
   return (
-    <>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <AutocompleteField
-            name="device_make_id"
-            id="device_make_id"
-            label="Make"
-            options={deviceMakes}
-            required={true}
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <CustomTextField name="serial" label="Serial Number" maxLength={100} other={{ required: true }} />
-        </Grid>
-        <Grid item xs={12}>
-          <CustomTextField name="model" label="Model (optional)" maxLength={100} />
-        </Grid>
-        <Grid item xs={12}>
-          <CustomTextField
-            name="comment"
-            label="Comments (optional)"
-            maxLength={250}
-            other={{ multiline: true, rows: 4 }}
-          />
-        </Grid>
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <AutocompleteField
+          name="device_make_id"
+          id="device_make_id"
+          label="Make"
+          options={deviceMakes}
+          required={true}
+        />
       </Grid>
-    </>
+      <Grid item xs={12}>
+        <CustomTextField name="serial" label="Serial Number" maxLength={100} other={{ required: true }} />
+      </Grid>
+      <Grid item xs={12}>
+        <CustomTextField name="model" label="Model (optional)" maxLength={100} />
+      </Grid>
+      <Grid item xs={12}>
+        <CustomTextField
+          name="comment"
+          label="Comments (optional)"
+          maxLength={250}
+          other={{ multiline: true, rows: 4 }}
+        />
+      </Grid>
+    </Grid>
   );
 };
diff --git a/app/src/features/surveys/view/survey-spatial/SurveySpatialContainer.tsx b/app/src/features/surveys/view/survey-spatial/SurveySpatialContainer.tsx
index 6cec063ce5..e7b6f92c43 100644
--- a/app/src/features/surveys/view/survey-spatial/SurveySpatialContainer.tsx
+++ b/app/src/features/surveys/view/survey-spatial/SurveySpatialContainer.tsx
@@ -9,6 +9,8 @@ import { SurveySpatialTelemetry } from 'features/surveys/view/survey-spatial/com
 import { useObservationsContext, useTaxonomyContext } from 'hooks/useContext';
 import { isEqual } from 'lodash-es';
 import { useEffect, useState } from 'react';
+import SurveyMapTooltip from '../SurveyMapTooltip';
+import { SurveySpatialTelemetryPopup } from './components/telemetry/SurveySpatialTelemetryPopup';
 
 /**
  * Container component for displaying survey spatial data.
@@ -71,7 +73,14 @@ export const SurveySpatialContainer = (): JSX.Element => {
 
       {/* Display the corresponding dataset view based on the selected active view */}
       {isEqual(SurveySpatialDatasetViewEnum.OBSERVATIONS, activeView) && <SurveySpatialObservation />}
-      {isEqual(SurveySpatialDatasetViewEnum.TELEMETRY, activeView) && <SurveySpatialTelemetry />}
+      {isEqual(SurveySpatialDatasetViewEnum.TELEMETRY, activeView) && (
+        <SurveySpatialTelemetry
+          popup={(feature) => {
+            return <SurveySpatialTelemetryPopup feature={feature} />;
+          }}
+          tooltip={(feature) => <SurveyMapTooltip title="Telemetry" key={`telemetry-tooltip-${feature.id}`} />}
+        />
+      )}
       {isEqual(SurveySpatialDatasetViewEnum.ANIMALS, activeView) && <SurveySpatialAnimal />}
     </>
   );
diff --git a/app/src/features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetry.tsx b/app/src/features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetry.tsx
index bfc82c9eb1..728b1fecc1 100644
--- a/app/src/features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetry.tsx
+++ b/app/src/features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetry.tsx
@@ -2,26 +2,31 @@ import Box from '@mui/material/Box';
 import { IStaticLayer, IStaticLayerFeature } from 'components/map/components/StaticLayers';
 import { SURVEY_MAP_LAYER_COLOURS } from 'constants/colours';
 import { SurveySpatialMap } from 'features/surveys/view/survey-spatial/components/map/SurveySpatialMap';
-import { SurveySpatialTelemetryPopup } from 'features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetryPopup';
 import { SurveySpatialTelemetryTable } from 'features/surveys/view/survey-spatial/components/telemetry/SurveySpatialTelemetryTable';
-import SurveyMapTooltip from 'features/surveys/view/SurveyMapTooltip';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import { useSurveyContext } from 'hooks/useContext';
 import useDataLoader from 'hooks/useDataLoader';
 import { useEffect, useMemo } from 'react';
 
+interface ISurveySpatialTelemetryProps {
+  popup: ((feature: IStaticLayerFeature) => React.ReactElement) | undefined;
+  tooltip: ((feature: IStaticLayerFeature) => React.ReactElement) | undefined;
+}
+
 /**
  * Component to display telemetry data on a map and in a table.
  *
- * @returns {JSX.Element} The rendered component.
+ * @returns {*} The rendered component.
  */
-export const SurveySpatialTelemetry = () => {
-  const biohubAPi = useBiohubApi();
+export const SurveySpatialTelemetry = (props: ISurveySpatialTelemetryProps) => {
+  const { tooltip, popup } = props;
+
+  const biohubApi = useBiohubApi();
 
   const surveyContext = useSurveyContext();
 
   const telemetrySpatialDataLoader = useDataLoader((projectId: number, surveyId: number) =>
-    biohubAPi.telemetry.getTelemetrySpatialForSurvey(projectId, surveyId)
+    biohubApi.telemetry.getTelemetrySpatialForSurvey(projectId, surveyId)
   );
 
   useEffect(() => {
@@ -59,10 +64,8 @@ export const SurveySpatialTelemetry = () => {
       opacity: 0.75
     },
     features: points,
-    popup: (feature) => {
-      return <SurveySpatialTelemetryPopup feature={feature} />;
-    },
-    tooltip: (feature) => <SurveyMapTooltip title="Telemetry" key={`telemetry-tooltip-${feature.id}`} />
+    popup,
+    tooltip
   };
 
   return (