diff --git a/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js b/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js
index da479710a6..8aecefc140 100644
--- a/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js
+++ b/packages/admin-panel/src/VizBuilderApp/api/queries/useReportPreview.js
@@ -2,6 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
  */
+import moment from 'moment';
 import { useQuery } from 'react-query';
 import { post } from '../api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../constants';
@@ -21,12 +22,14 @@ export const useReportPreview = ({
   useQuery(
     ['fetchReportPreviewData', visualisation],
     async () => {
+      const today = moment().format('YYYY-MM-DD');
+      const endDateToUse = endDate ?? today; // default to today if no end date is provided, so that we are getting data in the user's timezone, not UTC
       const response = await post('fetchReportPreviewData', {
         params: {
           entityCode: location,
           hierarchy: project,
           startDate,
-          endDate,
+          endDate: endDateToUse,
           dashboardItemOrMapOverlay,
           previewMode,
           permissionGroup: visualisation.permissionGroup || visualisation.reportPermissionGroup,
diff --git a/packages/admin-panel/src/VizBuilderApp/components/DashboardItem/DashboardItemMetadataForm.jsx b/packages/admin-panel/src/VizBuilderApp/components/DashboardItem/DashboardItemMetadataForm.jsx
index bfd93c9238..881f8e4e6a 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/DashboardItem/DashboardItemMetadataForm.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/DashboardItem/DashboardItemMetadataForm.jsx
@@ -4,19 +4,23 @@
  */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { Autocomplete, TextField } from '@tupaia/ui-components';
 import { useSearchPermissionGroups } from '../../api/queries';
 import { useVizConfigContext } from '../../context';
 import { useDebounce } from '../../../utilities';
 import { DASHBOARD_ITEM_VIZ_TYPES } from '../../constants';
+import { REQUIRED_FIELD_ERROR } from '../../../editor/validation';
 
 export const DashboardItemMetadataForm = ({ Header, Body, Footer, onSubmit }) => {
   const vizTypeOptions = Object.entries(DASHBOARD_ITEM_VIZ_TYPES).map(([vizType, { name }]) => ({
     value: vizType,
     label: name,
   }));
-  const { handleSubmit, register, errors } = useForm();
+  const { handleSubmit, register, errors, control } = useForm({
+    mode: 'onChange',
+  });
+
   const [
     { visualisation, vizType },
     { setVisualisationValue, setVizType, setPresentation, setPresentationValue },
@@ -35,11 +39,10 @@ export const DashboardItemMetadataForm = ({ Header, Body, Footer, onSubmit }) =>
   const doSubmit = data => {
     setVisualisationValue('code', data.code);
     setVisualisationValue('permissionGroup', data.permissionGroup);
-    const selectedVizType = vizTypeOptions.find(({ label }) => label === data.vizType).value;
-    setVizType(selectedVizType);
+    setVizType(data.vizType.value);
     if (Object.keys(presentation).length === 0) {
       // If no presentation config exists, set the initial config by vizType
-      setPresentation(DASHBOARD_ITEM_VIZ_TYPES[selectedVizType].initialConfig);
+      setPresentation(DASHBOARD_ITEM_VIZ_TYPES[data.vizType.value].initialConfig);
     }
     setPresentationValue('name', data.name);
     onSubmit();
@@ -54,53 +57,82 @@ export const DashboardItemMetadataForm = ({ Header, Body, Footer, onSubmit }) =>
           label="Code"
           defaultValue={code}
           error={!!errors.code}
+          required
           helperText={errors.code && errors.code.message}
           inputRef={register({
-            required: 'Required',
+            required: REQUIRED_FIELD_ERROR,
           })}
         />
         <TextField
           name="name"
           label="Name"
+          required
           defaultValue={presentation.name}
           error={!!errors.name}
           helperText={errors.name && errors.name.message}
           inputRef={register({
-            required: 'Required',
+            required: REQUIRED_FIELD_ERROR,
           })}
         />
-        <Autocomplete
-          id="permissionGroup"
+        <Controller
           name="permissionGroup"
-          label="Permission Group"
-          placeholder="Select Permission Group"
+          control={control}
+          required
           defaultValue={permissionGroup}
-          options={permissionGroups.map(p => p.name)}
-          disabled={isLoadingPermissionGroups}
-          error={!!errors.permissionGroup}
-          helperText={errors.permissionGroup && errors.permissionGroup.message}
-          inputRef={register({
-            required: 'Required',
-          })}
-          value={permissionGroupSearchInput}
-          onInputChange={(event, newValue) => {
-            setPermissionGroupSearchInput(newValue);
+          rules={{ required: REQUIRED_FIELD_ERROR }}
+          render={({ onChange, value, ref, name }) => {
+            return (
+              <Autocomplete
+                id={name}
+                name={name}
+                label="Permission group"
+                required
+                placeholder="Select permission group"
+                defaultValue={permissionGroup}
+                options={permissionGroups.map(p => p.name)}
+                disabled={isLoadingPermissionGroups}
+                error={!!errors.permissionGroup}
+                helperText={errors.permissionGroup && errors.permissionGroup.message}
+                inputRef={ref}
+                inputValue={permissionGroupSearchInput}
+                onInputChange={(event, newValue) => {
+                  setPermissionGroupSearchInput(newValue);
+                }}
+                onChange={(event, newValue) => {
+                  onChange(newValue);
+                }}
+                value={value}
+              />
+            );
           }}
         />
-        <Autocomplete
-          id="vizType"
+        <Controller
           name="vizType"
-          label="Visualisation Type"
-          placeholder="Select Visualisation Type"
-          defaultValue={vizTypeOptions.find(({ value }) => value === vizType)}
-          options={vizTypeOptions}
-          getOptionLabel={option => option.label}
-          getOptionSelected={option => option.value}
-          error={!!errors.vizType}
-          helperText={errors.vizType && errors.vizType.message}
-          inputRef={register({
-            required: 'Required',
-          })}
+          control={control}
+          required
+          defaultValue={vizTypeOptions.find(({ value: optionValue }) => optionValue === vizType)}
+          rules={{ required: REQUIRED_FIELD_ERROR }}
+          render={({ onChange, value, ref, name }) => (
+            <Autocomplete
+              id={name}
+              name={name}
+              required
+              label="Visualisation type"
+              placeholder="Select visualisation type"
+              options={vizTypeOptions}
+              getOptionLabel={option => option.label}
+              getOptionSelected={option => {
+                return option.value === value;
+              }}
+              error={!!errors.vizType}
+              helperText={errors.vizType && errors.vizType.message}
+              inputRef={ref}
+              onChange={(event, newValue) => {
+                onChange(newValue);
+              }}
+              value={value}
+            />
+          )}
         />
       </Body>
       <Footer />
diff --git a/packages/admin-panel/src/VizBuilderApp/components/MapOverlay/MapOverlayMetadataForm.jsx b/packages/admin-panel/src/VizBuilderApp/components/MapOverlay/MapOverlayMetadataForm.jsx
index 286f3ff716..b784ab7da3 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/MapOverlay/MapOverlayMetadataForm.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/MapOverlay/MapOverlayMetadataForm.jsx
@@ -4,13 +4,14 @@
  */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { Autocomplete, TextField } from '@tupaia/ui-components';
 import Chip from '@material-ui/core/Chip';
 import { useCountries, useProjects, useSearchPermissionGroups } from '../../api/queries';
 import { useVizConfigContext } from '../../context';
 import { useDebounce } from '../../../utilities';
 import { MAP_OVERLAY_VIZ_TYPES } from '../../constants';
+import { REQUIRED_FIELD_ERROR } from '../../../editor';
 
 export const MapOverlayMetadataForm = ({ Header, Body, Footer, onSubmit }) => {
   const vizTypeOptions = Object.entries(MAP_OVERLAY_VIZ_TYPES).map(([vizType, { name }]) => ({
@@ -18,7 +19,6 @@ export const MapOverlayMetadataForm = ({ Header, Body, Footer, onSubmit }) => {
     label: name,
   }));
 
-  const { handleSubmit, register, errors } = useForm();
   const [{ visualisation, vizType }, { setVisualisationValue, setVizType, setPresentation }] =
     useVizConfigContext();
   const { data: allProjects = [], isLoading: isLoadingAllProjects } = useProjects();
@@ -34,25 +34,26 @@ export const MapOverlayMetadataForm = ({ Header, Body, Footer, onSubmit }) => {
     countryCodes: inputCountryCodes,
     presentation,
   } = defaults;
+
+  const { handleSubmit, register, errors, control } = useForm({
+    mode: 'onChange',
+  });
   const [searchInput, setSearchInput] = useState(mapOverlayPermissionGroup || '');
   const debouncedSearchInput = useDebounce(searchInput, 200);
   const { data: permissionGroups = [], isLoading: isLoadingPermissionGroups } =
     useSearchPermissionGroups({ search: debouncedSearchInput });
-  const [projectCodes, setProjectCodes] = useState(inputProjectCodes);
-  const [countryCodes, setCountryCodes] = useState(inputCountryCodes);
 
   const doSubmit = data => {
     setVisualisationValue('code', data.code);
     setVisualisationValue('name', data.name);
     setVisualisationValue('mapOverlayPermissionGroup', data.mapOverlayPermissionGroup);
     setVisualisationValue('reportPermissionGroup', data.mapOverlayPermissionGroup);
-    setVisualisationValue('projectCodes', projectCodes);
-    setVisualisationValue('countryCodes', countryCodes);
-    const selectedVizType = vizTypeOptions.find(({ label }) => label === data.vizType).value;
-    setVizType(selectedVizType);
+    setVisualisationValue('projectCodes', data.projectCodes);
+    setVisualisationValue('countryCodes', data.countryCodes);
+    setVizType(data.vizType.value);
     if (Object.keys(presentation).length === 0) {
       // If no presentation config exists, set the initial config by vizType
-      setPresentation(MAP_OVERLAY_VIZ_TYPES[selectedVizType].initialConfig);
+      setPresentation(MAP_OVERLAY_VIZ_TYPES[data.vizType.value].initialConfig);
     }
     onSubmit();
   };
@@ -64,99 +65,146 @@ export const MapOverlayMetadataForm = ({ Header, Body, Footer, onSubmit }) => {
         <TextField
           name="code"
           label="Code"
+          required
           defaultValue={code}
           error={!!errors.code}
           helperText={errors.code && errors.code.message}
           inputRef={register({
-            required: 'Required',
+            required: REQUIRED_FIELD_ERROR,
           })}
         />
         <TextField
           name="name"
           label="Name"
+          required
           defaultValue={name}
           error={!!errors.name}
           helperText={errors.name && errors.name.message}
           inputRef={register({
-            required: 'Required',
+            required: REQUIRED_FIELD_ERROR,
           })}
         />
-        <Autocomplete
-          id="mapOverlayPermissionGroup"
+        <Controller
+          control={control}
           name="mapOverlayPermissionGroup"
-          label="Permission Group"
-          placeholder="Select Permission Group"
           defaultValue={mapOverlayPermissionGroup}
-          options={permissionGroups.map(p => p.name)}
-          disabled={isLoadingPermissionGroups}
-          error={!!errors.mapOverlayPermissionGroup}
-          helperText={errors.mapOverlayPermissionGroup && errors.mapOverlayPermissionGroup.message}
-          inputRef={register({
-            required: 'Required',
-          })}
-          value={searchInput}
-          onInputChange={(event, newValue) => {
-            setSearchInput(newValue);
-          }}
+          rules={{ required: REQUIRED_FIELD_ERROR }}
+          render={({ onChange, value, ref, name: inputName }) => (
+            <Autocomplete
+              id={inputName}
+              name={inputName}
+              label="Permission group"
+              required
+              placeholder="Select permission group"
+              defaultValue={mapOverlayPermissionGroup}
+              options={permissionGroups.map(p => p.name)}
+              disabled={isLoadingPermissionGroups}
+              error={!!errors.mapOverlayPermissionGroup}
+              helperText={
+                errors.mapOverlayPermissionGroup && errors.mapOverlayPermissionGroup.message
+              }
+              inputRef={ref}
+              value={value}
+              onInputChange={(event, newValue) => {
+                setSearchInput(newValue);
+              }}
+              onChange={(event, newValue) => {
+                onChange(newValue);
+              }}
+            />
+          )}
         />
-        <Autocomplete
-          id="projectCodes"
+        <Controller
+          control={control}
           name="projectCodes"
-          label="Project Codes"
-          defaultValue={projectCodes ?? []}
-          options={allProjects.map(p => p['project.code'])}
-          disabled={isLoadingAllProjects}
-          error={!!errors.projectCodes}
-          helperText={errors.projectCodes && errors.projectCodes.message}
-          muiProps={{
-            freeSolo: true,
-            multiple: true,
-            selectOnFocus: true,
-            clearOnBlur: true,
-            handleHomeEndKeys: true,
-            renderTags: (selected, getTagProps) =>
-              selected.map((option, index) => (
-                <Chip color="primary" label={option} {...getTagProps({ index })} />
-              )),
-          }}
-          onChange={(thing, selected) => setProjectCodes(selected)}
+          defaultValue={inputProjectCodes ?? []}
+          render={({ onChange, value, ref, name: inputName }) => (
+            <Autocomplete
+              id={inputName}
+              label="Project codes"
+              options={allProjects.map(p => p['project.code'])}
+              disabled={isLoadingAllProjects}
+              error={!!errors.projectCodes}
+              helperText={errors.projectCodes && errors.projectCodes.message}
+              muiProps={{
+                freeSolo: true,
+                multiple: true,
+                selectOnFocus: true,
+                clearOnBlur: true,
+                handleHomeEndKeys: true,
+                renderTags: (selected, getTagProps) =>
+                  selected.map((option, index) => (
+                    <Chip color="primary" label={option} {...getTagProps({ index })} />
+                  )),
+              }}
+              onChange={(thing, selected) => onChange(selected)}
+              value={value}
+              inputRef={ref}
+              name={inputName}
+            />
+          )}
         />
-        <Autocomplete
-          id="countryCodes"
+        <Controller
+          control={control}
           name="countryCodes"
-          label="Country Codes"
-          defaultValue={countryCodes ?? []}
-          options={allCountries.map(c => c.code)}
-          disabled={isLoadingAllCountries}
-          error={!!errors.countryCodes}
-          helperText={errors.countryCodes && errors.countryCodes.message}
-          muiProps={{
-            freeSolo: true,
-            multiple: true,
-            selectOnFocus: true,
-            clearOnBlur: true,
-            handleHomeEndKeys: true,
-            renderTags: (selected, getTagProps) =>
-              selected.map((option, index) => (
-                <Chip color="primary" label={option} {...getTagProps({ index })} />
-              )),
+          defaultValue={inputCountryCodes ?? []}
+          render={({ onChange, value, ref, name: inputName }) => {
+            return (
+              <Autocomplete
+                id={inputName}
+                name={inputName}
+                label="Country codes"
+                options={allCountries.map(c => c.code)}
+                disabled={isLoadingAllCountries}
+                error={!!errors.countryCodes}
+                helperText={errors.countryCodes && errors.countryCodes.message}
+                muiProps={{
+                  freeSolo: true,
+                  multiple: true,
+                  selectOnFocus: true,
+                  clearOnBlur: true,
+                  handleHomeEndKeys: true,
+                  renderTags: (selected, getTagProps) =>
+                    selected.map((option, index) => (
+                      <Chip color="primary" label={option} {...getTagProps({ index })} />
+                    )),
+                }}
+                onChange={(thing, selected) => onChange(selected)}
+                value={value}
+                inputRef={ref}
+              />
+            );
           }}
-          onChange={(thing, selected) => setCountryCodes(selected)}
         />
-        <Autocomplete
-          id="vizType"
+
+        <Controller
+          control={control}
           name="vizType"
-          label="Visualisation Type"
-          placeholder="Select Visualisation Type"
-          defaultValue={vizTypeOptions.find(({ value }) => value === vizType)}
-          options={vizTypeOptions}
-          getOptionLabel={option => option.label}
-          getOptionSelected={option => option.value}
-          error={!!errors.vizType}
-          helperText={errors.vizType && errors.vizType.message}
-          inputRef={register({
-            required: 'Required',
-          })}
+          rules={{ required: REQUIRED_FIELD_ERROR }}
+          defaultValue={vizTypeOptions.find(option => option.value === vizType)}
+          render={({ onChange, value, ref, name: inputName }) => {
+            return (
+              <Autocomplete
+                id={inputName}
+                name={inputName}
+                label="Visualisation type"
+                required
+                placeholder="Select visualisation type"
+                options={vizTypeOptions}
+                getOptionLabel={option => option.label}
+                getOptionSelected={option => {
+                  return option.value === value;
+                }}
+                error={!!errors.vizType}
+                helperText={errors.vizType && errors.vizType.message}
+                inputRef={ref}
+                onChange={(event, newValue) => {
+                  onChange(newValue);
+                }}
+                value={value}
+              />
+            );
+          }}
         />
       </Body>
       <Footer />
diff --git a/packages/admin-panel/src/VizBuilderApp/components/PreviewOptions/LocationField.jsx b/packages/admin-panel/src/VizBuilderApp/components/PreviewOptions/LocationField.jsx
index 948523eb37..87246547b3 100644
--- a/packages/admin-panel/src/VizBuilderApp/components/PreviewOptions/LocationField.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/components/PreviewOptions/LocationField.jsx
@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { Autocomplete } from './Autocomplete';
 import { useVizConfigContext } from '../../context';
 import { useEntityByCode, useLocations } from '../../api';
+import { EntityOptionLabel } from '../../../widgets';
 
 export const LocationField = () => {
   const [locationSearch, setLocationSearch] = useState('');
@@ -39,7 +40,9 @@ export const LocationField = () => {
         setLocationSearch(newValue);
       }}
       getOptionLabel={option => option.name}
-      renderOption={option => <span>{option.name}</span>}
+      renderOption={option => {
+        return <EntityOptionLabel {...option} />;
+      }}
       onChange={(_, newLocation) => {
         setLocation(newLocation);
       }}
diff --git a/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx b/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
index 7f33217cd9..6ca23b4224 100644
--- a/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
+++ b/packages/admin-panel/src/VizBuilderApp/views/CreateNew.jsx
@@ -76,7 +76,7 @@ export const CreateNew = () => {
           onSubmit={handleCreate}
           Header={() => (
             <Header>
-              <Heading>Create new Visualisation</Heading>
+              <Heading>Create new visualisation</Heading>
             </Header>
           )}
           Body={Body}
diff --git a/packages/admin-panel/src/autocomplete/Autocomplete.jsx b/packages/admin-panel/src/autocomplete/Autocomplete.jsx
index 0afd6f7db4..a5bad958aa 100644
--- a/packages/admin-panel/src/autocomplete/Autocomplete.jsx
+++ b/packages/admin-panel/src/autocomplete/Autocomplete.jsx
@@ -38,7 +38,9 @@ export const Autocomplete = props => {
     canCreateNewOptions,
     allowMultipleValues,
     optionLabelKey,
+    renderOption,
     muiProps,
+    error,
     tooltip,
     required,
   } = props;
@@ -109,6 +111,7 @@ export const Autocomplete = props => {
       options={options}
       getOptionSelected={getOptionSelected}
       getOptionLabel={getOptionLabel}
+      renderOption={renderOption}
       loading={isLoading}
       onChange={onChangeSelection}
       onInputChange={(event, newValue) => {
@@ -119,6 +122,7 @@ export const Autocomplete = props => {
       placeholder={placeholder}
       helperText={helperText}
       muiProps={extraMuiProps}
+      error={error}
       tooltip={tooltip}
       required={required}
     />
@@ -132,6 +136,7 @@ Autocomplete.propTypes = {
   options: PropTypes.array.isRequired,
   getOptionSelected: PropTypes.func.isRequired,
   getOptionLabel: PropTypes.func.isRequired,
+  renderOption: PropTypes.func,
   isLoading: PropTypes.bool,
   onChangeSelection: PropTypes.func.isRequired,
   onChangeSearchTerm: PropTypes.func,
@@ -142,6 +147,7 @@ Autocomplete.propTypes = {
   allowMultipleValues: PropTypes.bool,
   optionLabelKey: PropTypes.string,
   muiProps: PropTypes.object,
+  error: PropTypes.bool,
   tooltip: PropTypes.string,
   required: PropTypes.bool,
 };
@@ -158,6 +164,7 @@ Autocomplete.defaultProps = {
   muiProps: {},
   optionLabelKey: null,
   onChangeSearchTerm: () => {},
+  error: false,
   tooltip: null,
   required: false,
 };
diff --git a/packages/admin-panel/src/autocomplete/ReduxAutocomplete.jsx b/packages/admin-panel/src/autocomplete/ReduxAutocomplete.jsx
index 373f8a2095..f254dd8594 100644
--- a/packages/admin-panel/src/autocomplete/ReduxAutocomplete.jsx
+++ b/packages/admin-panel/src/autocomplete/ReduxAutocomplete.jsx
@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { getAutocompleteState } from './selectors';
 import { changeSelection, changeSearchTerm, clearState } from './actions';
 import { Autocomplete } from './Autocomplete';
+import { EntityOptionLabel } from '../widgets';
 
 const getPlaceholder = (placeholder, selection) => {
   if (selection && selection.length) {
@@ -38,7 +39,11 @@ const ReduxAutocompleteComponent = ({
   placeholder,
   helperText,
   required,
+  error,
+  tooltip,
   optionValueKey,
+  renderOption,
+  optionFields,
 }) => {
   const [hasUpdated, setHasUpdated] = React.useState(false);
   React.useEffect(() => {
@@ -67,6 +72,12 @@ const ReduxAutocompleteComponent = ({
     selectedValue = [];
   }
 
+  const getOptionRendered = option => {
+    if (renderOption) return renderOption(option);
+    if (!option || !option[optionLabelKey]) return '';
+    return option[optionLabelKey];
+  };
+
   return (
     <Autocomplete
       value={selectedValue}
@@ -84,6 +95,9 @@ const ReduxAutocompleteComponent = ({
       allowMultipleValues={allowMultipleValues}
       optionLabelKey={optionLabelKey}
       required={required}
+      error={error}
+      tooltip={tooltip}
+      renderOption={getOptionRendered}
     />
   );
 };
@@ -105,7 +119,9 @@ ReduxAutocompleteComponent.propTypes = {
   selection: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   initialValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   required: PropTypes.bool,
+  error: PropTypes.bool,
   optionValueKey: PropTypes.string.isRequired,
+  renderOption: PropTypes.func,
 };
 
 ReduxAutocompleteComponent.defaultProps = {
@@ -119,6 +135,7 @@ ReduxAutocompleteComponent.defaultProps = {
   label: null,
   helperText: null,
   required: false,
+  error: false,
 };
 
 const mapStateToProps = (state, { reduxId }) => {
@@ -143,6 +160,7 @@ const mapDispatchToProps = (
     baseFilter,
     pageSize,
     distinct,
+    optionFields,
   },
 ) => ({
   programaticallyChangeSelection: initialValue => {
@@ -193,6 +211,7 @@ const mapDispatchToProps = (
         baseFilter,
         pageSize,
         distinct,
+        optionFields,
       ),
     ),
   onClearState: () => dispatch(clearState(reduxId)),
diff --git a/packages/admin-panel/src/autocomplete/actions.js b/packages/admin-panel/src/autocomplete/actions.js
index f0f157d996..0ce39e4439 100644
--- a/packages/admin-panel/src/autocomplete/actions.js
+++ b/packages/admin-panel/src/autocomplete/actions.js
@@ -31,6 +31,7 @@ export const changeSearchTerm =
     baseFilter = {},
     pageSize = MAX_AUTOCOMPLETE_RESULTS,
     distinct = null,
+    columns = null,
   ) =>
   async (dispatch, getState, { api }) => {
     const fetchId = generateId();
@@ -46,7 +47,7 @@ export const changeSearchTerm =
         filter: JSON.stringify(filter),
         pageSize,
         sort: JSON.stringify([`${labelColumn} ASC`]),
-        columns: JSON.stringify([labelColumn, valueColumn]),
+        columns: JSON.stringify(columns ? columns : [labelColumn, valueColumn]),
         distinct,
       });
       dispatch({
diff --git a/packages/admin-panel/src/common.jsx b/packages/admin-panel/src/common.jsx
index 21547a4046..351691f969 100644
--- a/packages/admin-panel/src/common.jsx
+++ b/packages/admin-panel/src/common.jsx
@@ -49,6 +49,7 @@ export const DATA_ELEMENT_FIELD_EDIT_CONFIG = {
       optionsEndpoint: 'dhisInstances',
       optionLabelKey: 'dhisInstances.code',
       optionValueKey: 'dhisInstances.code',
+      required: true,
       visibilityCriteria: { service_type: 'dhis' },
     },
     {
@@ -64,11 +65,13 @@ export const DATA_ELEMENT_FIELD_EDIT_CONFIG = {
     {
       label: 'Superset Instance',
       fieldName: 'supersetInstanceCode',
+      required: true,
       visibilityCriteria: { service_type: 'superset' },
     },
     {
       label: 'Superset Chart ID',
       fieldName: 'supersetChartId',
+      required: true,
       visibilityCriteria: { service_type: 'superset' },
     },
     {
@@ -109,10 +112,12 @@ export const DATA_SOURCE_FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Data Service',
     source: 'service_type',
+    required: true,
     editConfig: { default: 'dhis', options: SERVICE_TYPE_OPTIONS },
   },
 ];
@@ -149,6 +154,7 @@ export const DATA_ELEMENT_FIELDS = [
   {
     Header: 'Permission Groups',
     source: 'permission_groups',
+    required: true,
     editConfig: {
       optionsEndpoint: 'permissionGroups',
       optionLabelKey: 'name',
diff --git a/packages/admin-panel/src/dataTables/DataTableEditFields.jsx b/packages/admin-panel/src/dataTables/DataTableEditFields.jsx
index 773ada241a..7d873faf05 100644
--- a/packages/admin-panel/src/dataTables/DataTableEditFields.jsx
+++ b/packages/admin-panel/src/dataTables/DataTableEditFields.jsx
@@ -6,8 +6,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import {
-  Select,
-  TextField,
   FetchLoader,
   Autocomplete as ExternalDatabaseConnectionAutocomplete,
   DataGrid,
@@ -17,25 +15,29 @@ import PropTypes from 'prop-types';
 import { Accordion, AccordionDetails, AccordionSummary } from '@material-ui/core';
 import { DataTableType } from '@tupaia/types';
 import { PreviewFilters } from './components/PreviewFilters';
-import { ReduxAutocomplete } from '../autocomplete';
 import { SqlDataTableConfigEditFields } from './config';
 import { useParams } from './useParams';
 import { useDataTablePreview, useExternalDatabaseConnections } from './query';
-import { getColumns, getRows } from '../utilities';
+import { getColumns, getRows, labelToId } from '../utilities';
 import { PlayButton } from './PlayButton';
-
-const FieldWrapper = styled.div`
-  padding: 7.5px;
-`;
+import { onInputChange } from '../editor/FieldsEditor';
+import { EditorInputField } from '../editor';
 
 const StyledGrid = styled(Grid)`
   height: 400px;
 `;
 
-const dataTableTypeOptions = Object.values(DataTableType).map(type => ({
-  label: type,
-  value: type,
-}));
+const InputRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  > div {
+    width: 100%;
+    &:not(:last-child) {
+      margin-inline-end: 1rem;
+    }
+  }
+`;
 
 const NoConfig = () => <>This Data Table type has no configuration options</>;
 
@@ -46,13 +48,12 @@ const typeFieldsMap = {
 
 export const DataTableEditFields = React.memo(
   props => {
-    const { onEditField, recordData, isLoading: isDataLoading } = props;
+    const { onEditField, recordData, isLoading: isDataLoading, fields } = props;
     if (isDataLoading) {
       return <div />;
     }
 
     const [fetchDisabled, setFetchDisabled] = useState(false);
-    const [haveTriedToFetch, setHaveTriedToFetch] = useState(false); // prevent to show error when entering the page
     const { data: externalDatabaseConnections = [] } = useExternalDatabaseConnections();
     const {
       builtInParams,
@@ -87,11 +88,6 @@ export const DataTableEditFields = React.memo(
       },
     });
 
-    const fetchPreviewData = () => {
-      setHaveTriedToFetch(true);
-      refetch();
-    };
-
     const columns = useMemo(() => getColumns(reportData), [reportData]);
     const rows = useMemo(() => getRows(reportData), [reportData]);
 
@@ -119,60 +115,42 @@ export const DataTableEditFields = React.memo(
       }
     };
 
+    const getFieldBySource = source => fields.find(field => field.source === source);
+
+    const sources = ['code', 'description', 'permission_groups', 'type'];
+
+    const onChangeField = (inputKey, inputValue, editConfig) => {
+      if (inputKey === 'type') {
+        onChangeType(inputValue);
+      } else onInputChange(inputKey, inputValue, editConfig, recordData, onEditField);
+    };
+
     return (
       <div>
         <Accordion defaultExpanded>
           <AccordionSummary>Data Table</AccordionSummary>
           <AccordionDetails>
-            <FieldWrapper>
-              <TextField
-                label="Code"
-                name="code"
-                value={recordData?.code}
-                required
-                error={haveTriedToFetch && !recordData.code}
-                helperText={haveTriedToFetch && !recordData.code && 'should not be empty'}
-                onChange={event => onEditField('code', event.target.value.trim())}
-              />
-            </FieldWrapper>
-            <FieldWrapper>
-              <TextField
-                label="Description"
-                name="description"
-                value={recordData?.description}
-                required
-                error={haveTriedToFetch && !recordData.description}
-                helperText={haveTriedToFetch && !recordData.description && 'should not be empty'}
-                onChange={event => onEditField('description', event.target.value)}
-              />
-            </FieldWrapper>
-            <FieldWrapper>
-              <ReduxAutocomplete
-                allowMultipleValues
-                key="permission_groups"
-                inputKey="permission_groups"
-                label="Permission Groups"
-                onChange={selectedValues => onEditField('permission_groups', selectedValues)}
-                placeholder={recordData.permission_groups}
-                id="inputField-permission_groups"
-                reduxId="dataTableEditFields-permission_groups"
-                endpoint="permissionGroups"
-                optionLabelKey="name"
-                optionValueKey="name"
-              />
-            </FieldWrapper>
-            <FieldWrapper>
-              <Select
-                id="data-table-edit-type"
-                label="Type"
-                name="type"
-                required
-                options={dataTableTypeOptions}
-                onChange={event => onChangeType(event.target.value)}
-                value={recordData?.type}
-              />
-            </FieldWrapper>
-            <FieldWrapper>
+            <InputRow>
+              {sources.map(source => {
+                const field = getFieldBySource(source);
+                const { Header, editConfig = {}, required, editable = true } = field;
+
+                return (
+                  <EditorInputField
+                    key={source}
+                    inputKey={source}
+                    label={Header}
+                    onChange={(key, inputValue) => onChangeField(key, inputValue, editConfig)}
+                    value={recordData?.[source]}
+                    disabled={!editable}
+                    recordData={recordData}
+                    id={`inputField-${labelToId(source)}`}
+                    required={required}
+                    editKey={source}
+                    {...editConfig}
+                  />
+                );
+              })}
               {recordData?.type === DataTableType.sql && (
                 <ExternalDatabaseConnectionAutocomplete // Provide options directly to base Autocomplete
                   options={externalDatabaseConnections}
@@ -191,7 +169,7 @@ export const DataTableEditFields = React.memo(
                   }
                 />
               )}
-            </FieldWrapper>
+            </InputRow>
           </AccordionDetails>
         </Accordion>
 
@@ -220,7 +198,7 @@ export const DataTableEditFields = React.memo(
                   onChange={upsertRuntimeParam}
                   runtimeParams={runtimeParams}
                 />
-                <PlayButton disabled={fetchDisabled} fetchPreviewData={fetchPreviewData} />
+                <PlayButton disabled={fetchDisabled} fetchPreviewData={refetch} />
               </div>
               <StyledGrid item xs={12}>
                 <FetchLoader
@@ -248,4 +226,5 @@ DataTableEditFields.propTypes = {
   onEditField: PropTypes.func.isRequired,
   recordData: PropTypes.object.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  fields: PropTypes.array.isRequired,
 };
diff --git a/packages/admin-panel/src/editor/EditModal.jsx b/packages/admin-panel/src/editor/EditModal.jsx
index 55456c1fa9..6e38bdd9ea 100644
--- a/packages/admin-panel/src/editor/EditModal.jsx
+++ b/packages/admin-panel/src/editor/EditModal.jsx
@@ -12,85 +12,115 @@ import { Modal } from '../widgets';
 import { useEditFiles } from './useEditFiles';
 import { FieldsEditor } from './FieldsEditor';
 import { withConnectedEditor } from './withConnectedEditor';
+import { useValidationScroll } from './useValidationScroll';
 
-export const EditModalComponent = withConnectedEditor(
-  ({
-    errorMessage,
-    isOpen,
-    isLoading,
-    onDismiss,
-    onEditField,
-    onSave,
-    recordData,
-    title,
-    fields,
-    FieldsComponent,
-    isUnchanged,
-    displayUsedBy,
-    usedByConfig,
-    dismissButtonText,
-    cancelButtonText,
-    saveButtonText,
-    extraDialogProps,
-    resourceName,
-    isNew,
-  }) => {
-    const { files, handleSetFormFile } = useEditFiles(fields, onEditField);
+export const EditModalComponent = ({
+  error,
+  isOpen,
+  isLoading,
+  onDismiss,
+  onEditField,
+  onSave,
+  recordData,
+  title,
+  fields,
+  FieldsComponent,
+  isUnchanged,
+  displayUsedBy,
+  usedByConfig,
+  dismissButtonText,
+  cancelButtonText,
+  saveButtonText,
+  extraDialogProps,
+  validationErrors,
+  resourceName,
+  isNew,
+}) => {
+  const { files, handleSetFormFile } = useEditFiles(fields, onEditField);
+
+  const FieldsComponentResolved = FieldsComponent ?? FieldsEditor;
+
+  const handleSave = () => {
+    onSave(files, onDismiss);
+  };
 
-    const FieldsComponentResolved = FieldsComponent ?? FieldsEditor;
+  const { onEditWithTouched, onSaveWithTouched } = useValidationScroll(
+    handleSave,
+    onEditField,
+    validationErrors,
+  );
 
-    const buttons = [
+  const getButtons = () => {
+    if (error) {
+      return [
+        {
+          onClick: onDismiss,
+          text: dismissButtonText,
+          disabled: isLoading,
+          variant: 'contained',
+          id: 'form-button-cancel',
+        },
+      ];
+    }
+    return [
       {
         onClick: onDismiss,
-        text: errorMessage ? dismissButtonText : cancelButtonText,
+        text: cancelButtonText,
         disabled: isLoading,
         variant: 'outlined',
         id: 'form-button-cancel',
       },
       {
-        onClick: () => onSave(files, onDismiss),
+        onClick: onSaveWithTouched,
         id: 'form-button-save',
         text: saveButtonText,
-        disabled: !!errorMessage || isLoading || isUnchanged,
+        disabled: !!error || isLoading || isUnchanged,
       },
     ];
+  };
+
+  const buttons = getButtons();
 
-    const generateModalTitle = () => {
-      if (title) return title;
-      if (isLoading) return '';
-      if (!resourceName) return isNew ? 'Add' : 'Edit';
-      if (isNew) return `Add ${resourceName}`;
-      return `Edit ${resourceName}`;
-    };
+  const generateModalTitle = () => {
+    if (title) return title;
+    if (!resourceName) return isNew ? 'Add' : 'Edit';
+    if (error) {
+      const capitalisedResourceName = `${resourceName.charAt(0).toUpperCase()}${resourceName.slice(
+        1,
+      )}`;
+      return `${capitalisedResourceName} error`;
+    }
+    if (isNew) return `Add ${resourceName}`;
+    return `Edit ${resourceName}`;
+  };
 
-    const modalTitle = generateModalTitle();
+  const modalTitle = generateModalTitle();
 
-    return (
-      <Modal
-        errorMessage={errorMessage}
+  return (
+    <Modal
+      error={error}
+      isLoading={isLoading}
+      onClose={onDismiss}
+      isOpen={isOpen}
+      disableBackdropClick
+      title={modalTitle}
+      buttons={buttons}
+      {...extraDialogProps}
+    >
+      <FieldsComponentResolved
+        fields={fields}
         isLoading={isLoading}
-        onClose={onDismiss}
-        isOpen={isOpen}
-        disableBackdropClick
-        title={modalTitle}
-        buttons={buttons}
-        {...extraDialogProps}
-      >
-        <FieldsComponentResolved
-          fields={fields}
-          isLoading={isLoading}
-          recordData={recordData}
-          onEditField={onEditField}
-          onSetFormFile={handleSetFormFile}
-        />
-        {displayUsedBy && <UsedBy {...usedByConfig} />}
-      </Modal>
-    );
-  },
-);
+        recordData={recordData}
+        onEditField={onEditWithTouched}
+        onSetFormFile={handleSetFormFile}
+      />
+      {displayUsedBy && <UsedBy {...usedByConfig} />}
+    </Modal>
+  );
+};
 
 EditModalComponent.propTypes = {
-  errorMessage: PropTypes.string,
+  error: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   onDismiss: PropTypes.func.isRequired,
@@ -107,23 +137,29 @@ EditModalComponent.propTypes = {
   cancelButtonText: PropTypes.string,
   saveButtonText: PropTypes.string,
   extraDialogProps: PropTypes.object,
+  validationErrors: PropTypes.object,
+  resourceName: PropTypes.string,
+  isNew: PropTypes.bool.isRequired,
 };
 
 EditModalComponent.defaultProps = {
-  errorMessage: null,
+  error: null,
   recordData: null,
   FieldsComponent: null,
   isUnchanged: false,
   displayUsedBy: false,
   usedByConfig: {},
-  dismissButtonText: 'Dismiss',
+  dismissButtonText: 'Close',
   cancelButtonText: 'Cancel',
   saveButtonText: 'Save',
   extraDialogProps: null,
+  validationErrors: {},
+  title: null,
+  resourceName: null,
 };
 
 const mapDispatchToProps = dispatch => ({
   onDismiss: () => dispatch(dismissEditor()),
 });
 
-export const EditModal = connect(null, mapDispatchToProps)(EditModalComponent);
+export const EditModal = withConnectedEditor(connect(null, mapDispatchToProps)(EditModalComponent));
diff --git a/packages/admin-panel/src/editor/EditorInputField.js b/packages/admin-panel/src/editor/EditorInputField.js
new file mode 100644
index 0000000000..d4a70154f3
--- /dev/null
+++ b/packages/admin-panel/src/editor/EditorInputField.js
@@ -0,0 +1,22 @@
+/**
+ * Tupaia MediTrak
+ * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+ */
+
+import { connect } from 'react-redux';
+import { getEditorState } from './selectors';
+import { InputField } from '../widgets/InputField/InputField';
+
+/**
+ * A wrapper around the InputField component that connects it to the editor state to get errors
+ */
+const mapStateToProps = (state, { editKey, inputKey }) => {
+  const editorState = getEditorState(state);
+  const { validationErrors } = editorState;
+  const error = validationErrors[editKey ?? inputKey];
+  return {
+    error,
+  };
+};
+
+export const EditorInputField = connect(mapStateToProps)(InputField);
diff --git a/packages/admin-panel/src/editor/FieldsEditor.jsx b/packages/admin-panel/src/editor/FieldsEditor.jsx
index c60d0c5ba8..831a2aecbc 100644
--- a/packages/admin-panel/src/editor/FieldsEditor.jsx
+++ b/packages/admin-panel/src/editor/FieldsEditor.jsx
@@ -7,11 +7,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { InputGroup } from '@tupaia/ui-components';
-import { InputField } from '../widgets';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
 import { SECTION_FIELD_TYPE } from './constants';
+import { EditorInputField } from './EditorInputField';
+import { getFieldEditKey } from './utils';
 
-const EditorWrapper = styled.div`
+const EditorWrapper = styled.form`
   .file_upload_label {
     font-size: 0.9375rem;
     text-transform: initial;
@@ -26,22 +27,28 @@ const EditorWrapper = styled.div`
   }
 `;
 
+export const onInputChange = async (
+  inputKey,
+  inputValue,
+  editConfig = {},
+  recordData,
+  onEditField,
+) => {
+  const { setFieldsOnChange } = editConfig;
+  if (setFieldsOnChange) {
+    const newFields = setFieldsOnChange(inputValue, recordData);
+    Object.entries(newFields).forEach(([fieldKey, fieldValue]) => {
+      onEditField(fieldKey, fieldValue);
+    });
+  }
+  onEditField(inputKey, inputValue);
+};
+
 export const FieldsEditor = ({ fields, recordData, onEditField, onSetFormFile }) => {
   if (!fields || fields.length === 0) {
     return false;
   }
 
-  const onInputChange = async (inputKey, inputValue, editConfig = {}) => {
-    const { setFieldsOnChange } = editConfig;
-    if (setFieldsOnChange) {
-      const newFields = setFieldsOnChange(inputValue, recordData);
-      Object.entries(newFields).forEach(([fieldKey, fieldValue]) => {
-        onEditField(fieldKey, fieldValue);
-      });
-    }
-    onEditField(inputKey, inputValue);
-  };
-
   const selectValue = (editConfig, accessor, source) => {
     if (editConfig.accessor) {
       return editConfig.accessor(recordData);
@@ -83,6 +90,7 @@ export const FieldsEditor = ({ fields, recordData, onEditField, onSetFormFile })
       accessor,
       type,
       WrapperComponent,
+      required,
     } = field;
     if (type === SECTION_FIELD_TYPE) {
       return (
@@ -94,17 +102,22 @@ export const FieldsEditor = ({ fields, recordData, onEditField, onSetFormFile })
         />
       );
     }
+    const editKey = getFieldEditKey(field);
     return (
-      <InputField
+      <EditorInputField
         key={source}
         inputKey={source}
         label={Header}
-        onChange={(inputKey, inputValue) => onInputChange(inputKey, inputValue, editConfig)}
+        onChange={(inputKey, value) =>
+          onInputChange(inputKey, value, editConfig, recordData, onEditField)
+        }
         onSetFormFile={onSetFormFile}
         value={selectValue(editConfig, accessor, source)}
         disabled={!editable}
         recordData={recordData}
         id={`inputField-${labelToId(source)}`}
+        required={required}
+        editKey={editKey}
         {...editConfig}
       />
     );
diff --git a/packages/admin-panel/src/editor/actions.js b/packages/admin-panel/src/editor/actions.js
index 4731b5e165..72db34cf3b 100644
--- a/packages/admin-panel/src/editor/actions.js
+++ b/packages/admin-panel/src/editor/actions.js
@@ -10,6 +10,7 @@ import {
   EDITOR_DISMISS,
   EDITOR_ERROR,
   EDITOR_FIELD_EDIT,
+  SET_VALIDATION_ERRORS,
   LOAD_EDITOR,
   OPEN_EDIT_MODAL,
   RESET_EDITS,
@@ -19,22 +20,10 @@ import {
   getExplodedFields,
   makeSubstitutionsInString,
 } from '../utilities';
+import { getEditorState } from './selectors';
+import { getValidationErrors } from './validation';
 import { fetchUsedBy } from '../usedBy';
-
-const getFieldSourceToEdit = field => {
-  const { source, editConfig = {} } = field;
-  if (editConfig.optionsEndpoint) {
-    if (editConfig.sourceKey) {
-      return editConfig.sourceKey;
-    }
-    const sourceComponents = source.split('.');
-    if (sourceComponents.length > 1) {
-      const [resource] = sourceComponents;
-      return `${resource}_id`;
-    }
-  }
-  return source;
-};
+import { getFieldEditKey } from './utils';
 
 const STATIC_FIELD_TYPES = ['link'];
 
@@ -158,6 +147,7 @@ export const loadEditor =
               .map(field => field.source),
           ), // Fetch fields based on their source
         });
+
         dispatch({
           type: EDITOR_DATA_FETCH_SUCCESS,
           recordData: response.body,
@@ -191,21 +181,40 @@ export const editField = (fieldSource, newValue) => (dispatch, getState) => {
   const { fields } = getState().editor;
   const field = getExplodedFields(fields).find(f => f.source === fieldSource);
   if (!field) return;
-  const fieldSourceToEdit = getFieldSourceToEdit(field);
+  const editKey = getFieldEditKey(field); // this needs to be here, because there are several places that use this action, and they all need to edit the correct field.
+
+  const otherValidationErrorsToClear =
+    field.editConfig?.type === 'json' ? Object.keys(newValue) : [];
+
+  // Edit key will be different in cases where we are editing a saved record, because the value that comes back from the server is not always keyed the same as the field source we have configured
   dispatch({
     type: EDITOR_FIELD_EDIT,
-    fieldKey: fieldSourceToEdit,
-    newValue,
+    fieldKey: editKey,
+    newValue: newValue === '' ? null : newValue,
+    otherValidationErrorsToClear,
   });
 };
 
 export const saveEdits =
-  (endpoint, editedFields, isNew, filesByFieldKey = {}, onSuccess) =>
+  (endpoint, editedFields, isNew, filesByFieldKey = {}, onSuccess, onError) =>
   async (dispatch, getState, { api }) => {
-    dispatch({
-      type: EDITOR_DATA_EDIT_BEGIN,
-    });
     try {
+      const { recordData, fields } = getEditorState(getState());
+
+      const validationErrors = getValidationErrors(fields, recordData, editedFields, isNew);
+
+      if (Object.keys(validationErrors).length > 0) {
+        dispatch({
+          type: SET_VALIDATION_ERRORS,
+          payload: validationErrors,
+        });
+        return;
+      }
+
+      dispatch({
+        type: EDITOR_DATA_EDIT_BEGIN,
+      });
+
       if (filesByFieldKey && Object.keys(filesByFieldKey).length > 0) {
         if (isNew) {
           await api.multipartPost({
@@ -236,8 +245,11 @@ export const saveEdits =
     } catch (error) {
       dispatch({
         type: EDITOR_ERROR,
-        errorMessage: error.message,
+        error,
       });
+      if (onError) {
+        onError(error);
+      }
     }
   };
 
diff --git a/packages/admin-panel/src/editor/constants.js b/packages/admin-panel/src/editor/constants.js
index 0fc0506dba..244286c8ae 100644
--- a/packages/admin-panel/src/editor/constants.js
+++ b/packages/admin-panel/src/editor/constants.js
@@ -19,5 +19,6 @@ export const DATA_CHANGE_ACTIONS = {
 };
 
 export const SECTION_FIELD_TYPE = 'section';
+export const SET_VALIDATION_ERRORS = 'SET_VALIDATION_ERRORS';
 export const OPEN_EDIT_MODAL = 'OPEN_EDIT_MODAL';
 export const RESET_EDITS = 'RESET_EDITS';
diff --git a/packages/admin-panel/src/editor/index.js b/packages/admin-panel/src/editor/index.js
index e51912b466..1f459f9bbd 100644
--- a/packages/admin-panel/src/editor/index.js
+++ b/packages/admin-panel/src/editor/index.js
@@ -11,3 +11,6 @@ export { EditModal } from './EditModal';
 export { reducer } from './reducer';
 export { CreateActionButton, ActionButton } from './ActionButton';
 export { withConnectedEditor } from './withConnectedEditor';
+export { EditorInputField } from './EditorInputField';
+export { useValidationScroll } from './useValidationScroll';
+export { REQUIRED_FIELD_ERROR } from './validation';
diff --git a/packages/admin-panel/src/editor/reducer.js b/packages/admin-panel/src/editor/reducer.js
index 16028062f1..77eaa4ac44 100644
--- a/packages/admin-panel/src/editor/reducer.js
+++ b/packages/admin-panel/src/editor/reducer.js
@@ -12,13 +12,14 @@ import {
   EDITOR_DISMISS,
   EDITOR_ERROR,
   EDITOR_FIELD_EDIT,
+  SET_VALIDATION_ERRORS,
   LOAD_EDITOR,
   OPEN_EDIT_MODAL,
   RESET_EDITS,
 } from './constants';
 
 const defaultState = {
-  errorMessage: '',
+  error: null,
   isOpen: false,
   isLoading: false,
   endpoint: null,
@@ -29,6 +30,7 @@ const defaultState = {
   title: 'Edit',
   editedFields: {},
   extraDialogProps: {},
+  validationErrors: {},
 };
 
 const stateChanges = {
@@ -40,7 +42,7 @@ const stateChanges = {
   },
   [EDITOR_DATA_EDIT_BEGIN]: payload => ({
     isLoading: true,
-    errorMessage: '',
+    error: null,
     ...payload,
   }),
   [EDITOR_DATA_FETCH_SUCCESS]: payload => ({
@@ -55,23 +57,38 @@ const stateChanges = {
     isLoading: false,
     ...payload,
   }),
-  [EDITOR_DISMISS]: (payload, { errorMessage }) => {
-    if (errorMessage) {
-      return { errorMessage: defaultState.errorMessage }; // If there is an error, dismiss it
+  [EDITOR_DISMISS]: (payload, { error }) => {
+    if (error) {
+      return { error: defaultState.error }; // If there is an error, dismiss it
     }
     return defaultState; // If no error, dismiss the whole modal and clear its state
   },
   [LOAD_EDITOR]: payload => {
-    return { ...payload, errorMessage: '' };
+    return { ...payload, error: null };
   },
   [OPEN_EDIT_MODAL]: ({ recordId }) => ({ recordId, isOpen: true }),
-  [EDITOR_FIELD_EDIT]: ({ fieldKey, newValue }, { editedFields }) => ({
+  [EDITOR_FIELD_EDIT]: (
+    { fieldKey, newValue, otherValidationErrorsToClear = [] },
+    { editedFields, validationErrors },
+  ) => ({
     editedFields: {
       ...editedFields,
       [fieldKey]: newValue,
     },
+    validationErrors: {
+      ...validationErrors,
+      [fieldKey]: null, // Clear the validation error for this field as the user has made a change
+      // clear nested validation errors when editing a field
+      ...otherValidationErrorsToClear.reduce((acc, key) => {
+        acc[key] = null;
+        return acc;
+      }, {}),
+    },
+  }),
+  [SET_VALIDATION_ERRORS]: payload => ({
+    validationErrors: payload,
   }),
-  [RESET_EDITS]: () => ({ editedFields: {}, errorMessage: '' }),
+  [RESET_EDITS]: () => ({ editedFields: {}, error: null }),
 };
 
 export const reducer = createReducer(defaultState, stateChanges);
diff --git a/packages/admin-panel/src/editor/useValidationScroll.js b/packages/admin-panel/src/editor/useValidationScroll.js
new file mode 100644
index 0000000000..c721ab617e
--- /dev/null
+++ b/packages/admin-panel/src/editor/useValidationScroll.js
@@ -0,0 +1,38 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { useEffect, useState } from 'react';
+
+const scrollToValidationError = () => {
+  const firstError = document.querySelector('.Mui-error');
+  if (!firstError) return;
+  firstError.focus();
+  firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+};
+
+export const useValidationScroll = (onSave, onEdit, validationErrors) => {
+  const [hasTouched, setHasTouched] = useState(false);
+
+  const onEditWithTouched = (fieldKey, newValue) => {
+    onEdit(fieldKey, newValue);
+    setHasTouched(true);
+  };
+
+  const onSaveWithTouched = () => {
+    onSave();
+    setHasTouched(false);
+  };
+
+  useEffect(() => {
+    if (hasTouched) return;
+    scrollToValidationError();
+  }, [validationErrors, hasTouched]);
+
+  return {
+    hasTouched,
+    onEditWithTouched,
+    onSaveWithTouched,
+  };
+};
diff --git a/packages/admin-panel/src/editor/utils.js b/packages/admin-panel/src/editor/utils.js
new file mode 100644
index 0000000000..f312aa59d3
--- /dev/null
+++ b/packages/admin-panel/src/editor/utils.js
@@ -0,0 +1,22 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+/**
+ * This is a utility function that returns the key to use when editing a field. This is useful because sometimes if the data is pre-filled from the api, the key of the data is different from the key that should be used when editing the field.
+ */
+export const getFieldEditKey = field => {
+  const { source, editConfig = {} } = field;
+  if (editConfig.optionsEndpoint) {
+    if (editConfig.sourceKey) {
+      return editConfig.sourceKey;
+    }
+    const sourceComponents = source.split('.');
+    if (sourceComponents.length > 1) {
+      const [resource] = sourceComponents;
+      return `${resource}_id`;
+    }
+  }
+  return source;
+};
diff --git a/packages/admin-panel/src/editor/validation.js b/packages/admin-panel/src/editor/validation.js
new file mode 100644
index 0000000000..6b44782e6e
--- /dev/null
+++ b/packages/admin-panel/src/editor/validation.js
@@ -0,0 +1,119 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { getExplodedFields } from '../utilities';
+import { getFieldEditKey } from './utils';
+
+export const REQUIRED_FIELD_ERROR = '* Required';
+
+const getIsFieldVisible = (field, recordData) => {
+  const { visibilityCriteria } = field;
+  if (!visibilityCriteria) {
+    return true;
+  }
+  return Object.entries(visibilityCriteria).every(
+    ([source, value]) => recordData[source] === value,
+  );
+};
+
+const validateData = (fields, data) => {
+  return fields.reduce((errors, field) => {
+    // get the key to check in the data - this is not always the same as what is returned from the endpoint
+
+    const { editConfig = {} } = field;
+    const fieldInfo = {
+      ...field,
+      ...editConfig,
+    };
+
+    const editKey = getFieldEditKey(fieldInfo);
+
+    // if the field is a json array, explode it and validate each field
+    if (fieldInfo.type === 'json') {
+      const { getJsonFieldSchema } = fieldInfo;
+      const jsonFieldSchema = getJsonFieldSchema(null, { recordData: data });
+      const jsonFields = jsonFieldSchema.map(jsonField => {
+        const { fieldName } = jsonField;
+        return {
+          ...jsonField,
+          source: fieldName,
+        };
+      });
+
+      // parse the parent field value, so we can validate the nested fields
+      const parseValue = () => {
+        if (!data[editKey]) return {};
+        if (typeof data[editKey] === 'string') {
+          return JSON.parse(data[editKey]);
+        }
+        return data[editKey];
+      };
+      const parsedValue = parseValue();
+      return {
+        ...errors,
+        ...validateData(jsonFields, {
+          ...data,
+          ...parsedValue,
+        }),
+      };
+    }
+
+    const isFieldVisible = getIsFieldVisible(fieldInfo, data);
+    if (!isFieldVisible) return errors;
+    if (!fieldInfo.required) return errors;
+
+    const value = data[editKey];
+    if (
+      value === undefined ||
+      value === null ||
+      value === '' ||
+      (Array.isArray(value) && value.length === 0)
+    ) {
+      return {
+        ...errors,
+        [editKey]: REQUIRED_FIELD_ERROR,
+      };
+    }
+
+    return errors;
+  }, {});
+};
+
+const extractData = (editedFields, recordData, explodedFields) => {
+  // if is a bulk edit, editedFields is an array of records, but we just need to grab the first one to validate
+  const editedValues = Array.isArray(editedFields) ? editedFields[0] : editedFields;
+  const savedData = Array.isArray(recordData) ? recordData[0] : recordData;
+
+  const combinedData = {
+    ...savedData,
+    ...editedValues,
+  };
+
+  // Map the data to the correct field key - this is useful in cases where we might be editing a saved record, and the field key from the endpoint is different to the source key we have configured
+  return explodedFields.reduce((result, field) => {
+    const editKey = getFieldEditKey(field);
+    const { source } = field;
+    if (combinedData.hasOwnProperty(editKey)) {
+      return {
+        ...result,
+        [editKey]: combinedData[editKey],
+      };
+    }
+    return {
+      ...result,
+      [editKey]: combinedData[source],
+    };
+  }, {});
+};
+
+export const getValidationErrors = (fields, recordData, editedFields) => {
+  // explode fields that are nested in sections
+  const explodedFields = getExplodedFields(fields);
+  // extract the data to validate - this handles arrays of records
+  const extractedData = extractData(editedFields, recordData, explodedFields);
+
+  // extract the required fields
+  return validateData(explodedFields, extractedData);
+};
diff --git a/packages/admin-panel/src/editor/withConnectedEditor.js b/packages/admin-panel/src/editor/withConnectedEditor.js
index 13128b1597..173b6be4b6 100644
--- a/packages/admin-panel/src/editor/withConnectedEditor.js
+++ b/packages/admin-panel/src/editor/withConnectedEditor.js
@@ -61,13 +61,13 @@ const mergeProps = (
       ...editedFields,
     }, // Include edits in visible record data
     isNew,
-    onSave: (files, onSuccess) => {
+    onSave: (files, onSuccess, onError) => {
       // If there is no record data, this is a new record
       let fieldValuesToSave = isNew ? { ...initialValues, ...editedFields } : { ...editedFields };
       if (onProcessDataForSave) {
         fieldValuesToSave = onProcessDataForSave(fieldValuesToSave, recordData);
       }
-      dispatch(saveEdits(endpoint, fieldValuesToSave, isNew, files, onSuccess));
+      dispatch(saveEdits(endpoint, fieldValuesToSave, isNew, files, onSuccess, onError));
     },
     usedByConfig,
   };
diff --git a/packages/admin-panel/src/importExport/ExportModal.jsx b/packages/admin-panel/src/importExport/ExportModal.jsx
index f660e22943..1c7a2c3803 100644
--- a/packages/admin-panel/src/importExport/ExportModal.jsx
+++ b/packages/admin-panel/src/importExport/ExportModal.jsx
@@ -30,25 +30,25 @@ export const ExportModal = React.memo(
   }) => {
     const api = useApiContext();
     const [status, setStatus] = useState(STATUS.IDLE);
-    const [errorMessage, setErrorMessage] = useState(null);
+    const [error, setError] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
 
     const handleOpen = () => setIsOpen(true);
 
     const handleDismiss = () => {
       setStatus(STATUS.IDLE);
-      setErrorMessage(null);
+      setError(null);
     };
 
     const handleClose = () => {
       setStatus(STATUS.IDLE);
-      setErrorMessage(null);
+      setError(null);
       setIsOpen(false);
     };
 
     const handleSubmit = async event => {
       event.preventDefault();
-      setErrorMessage(null);
+      setError(null);
       setStatus(STATUS.LOADING);
 
       try {
@@ -63,9 +63,9 @@ export const ExportModal = React.memo(
         } else {
           handleClose();
         }
-      } catch (error) {
+      } catch (e) {
         setStatus(STATUS.ERROR);
-        setErrorMessage(error.message);
+        setError(e);
       }
     };
 
@@ -120,8 +120,8 @@ export const ExportModal = React.memo(
           onClose={handleClose}
           isOpen={isOpen}
           disableBackdropClick
-          title={errorMessage ? 'Error' : title}
-          errorMessage={errorMessage}
+          title={error ? 'Error' : title}
+          error={error}
           isLoading={status === STATUS.LOADING}
           buttons={buttons}
         >
diff --git a/packages/admin-panel/src/importExport/ImportModal.jsx b/packages/admin-panel/src/importExport/ImportModal.jsx
index b05be99f58..4346a40ca1 100644
--- a/packages/admin-panel/src/importExport/ImportModal.jsx
+++ b/packages/admin-panel/src/importExport/ImportModal.jsx
@@ -1,17 +1,18 @@
-/**
- * Tupaia MediTrak
- * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FileUploadField } from '@tupaia/ui-components';
-import { InputField, Modal } from '../widgets';
+import { Modal } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 import { DATA_CHANGE_ERROR, DATA_CHANGE_REQUEST, DATA_CHANGE_SUCCESS } from '../table/constants';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
 import { ActionButton } from '../editor';
+import { InputField } from '../widgets/InputField/InputField';
 import { ImportIcon } from '../icons';
 
 const STATUS = {
@@ -36,16 +37,14 @@ export const ImportModalComponent = React.memo(
     getFinishedMessage,
     confirmButtonText,
     cancelButtonText,
-    uploadButtonText,
   }) => {
     const api = useApiContext();
     const [status, setStatus] = useState(STATUS.IDLE);
     const [finishedMessage, setFinishedMessage] = useState(null);
-    const [errorMessage, setErrorMessage] = useState(null);
+    const [error, setError] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     const [values, setValues] = useState({});
     const [files, setFiles] = useState([]);
-    const [fileName, setFileName] = useState(null);
 
     const handleOpen = () => setIsOpen(true);
 
@@ -58,25 +57,23 @@ export const ImportModalComponent = React.memo(
 
     const handleDismiss = () => {
       setStatus(STATUS.IDLE);
-      setErrorMessage(null);
+      setError(null);
       setFinishedMessage(null);
       setFiles([]);
-      setFileName(null);
     };
 
     const handleClose = () => {
       setStatus(STATUS.IDLE);
-      setErrorMessage(null);
+      setError(null);
       setFinishedMessage(null);
       setIsOpen(false);
       setValues({});
       setFiles([]);
-      setFileName(null);
     };
 
     const handleSubmit = async event => {
       event.preventDefault();
-      setErrorMessage(null);
+      setError(null);
       setFinishedMessage(null);
       setStatus(STATUS.LOADING);
       changeRequest();
@@ -99,21 +96,23 @@ export const ImportModalComponent = React.memo(
           setFinishedMessage(getFinishedMessage(response));
         }
         changeSuccess();
-      } catch (error) {
+      } catch (e) {
+        // Print a more descriptive network timeout error
+        // TODO: Remove this after https://github.com/beyondessential/tupaia-backlog/issues/1009 is fixed
+        const errorMessage =
+          e.message === 'Network request timed out'
+            ? 'Request timed out, but may have still succeeded. Please wait 2 minutes and check to see if the data has changed'
+            : e.message;
         setStatus(STATUS.ERROR);
         setFinishedMessage(null);
-        setErrorMessage(error.message);
+        setError({
+          ...e,
+          message: errorMessage,
+        });
         changeError();
       }
     };
 
-    // Print a more descriptive network timeout error
-    // TODO: Remove this after https://github.com/beyondessential/tupaia-backlog/issues/1009 is fixed
-    const fileErrorMessage =
-      errorMessage === 'Network request timed out'
-        ? 'Request timed out, but may have still succeeded. Please wait 2 minutes and check to see if the data has changed'
-        : errorMessage;
-
     const getButtons = () => {
       switch (status) {
         case STATUS.TIMEOUT:
@@ -127,13 +126,9 @@ export const ImportModalComponent = React.memo(
         case STATUS.ERROR:
           return [
             {
-              text: 'Dismiss',
+              text: 'Close',
               onClick: handleDismiss,
-              variant: 'outlined',
-            },
-            {
-              text: confirmButtonText,
-              disabled: true,
+              variant: 'contained',
             },
           ];
         default:
@@ -158,23 +153,14 @@ export const ImportModalComponent = React.memo(
 
     const buttons = getButtons();
 
-    const onChangeFile = (event, newName) => {
-      setFileName(newName);
-      if (event?.target?.files?.length > 0) {
-        setFiles(Array.from(event.target.files));
-      } else {
-        setFiles([]);
-      }
-    };
-
     return (
       <>
         <Modal
           onClose={handleClose}
           isOpen={isOpen}
           disableBackdropClick
-          title={fileErrorMessage ? 'Error' : title}
-          errorMessage={fileErrorMessage}
+          title={error ? 'Error' : title}
+          error={error}
           isLoading={status === STATUS.LOADING}
           buttons={buttons}
         >
@@ -202,11 +188,9 @@ export const ImportModalComponent = React.memo(
                     );
                   })}
                 <FileUploadField
-                  onChange={onChangeFile}
+                  onChange={newFiles => setFiles(newFiles ?? [])}
                   name="file-upload"
-                  fileName={fileName}
                   multiple={actionConfig.multiple}
-                  textOnButton={uploadButtonText}
                 />
               </>
             )}
diff --git a/packages/admin-panel/src/importExport/SurveyResponsesExportModal.jsx b/packages/admin-panel/src/importExport/SurveyResponsesExportModal.jsx
index 6454df7372..ed044696b6 100644
--- a/packages/admin-panel/src/importExport/SurveyResponsesExportModal.jsx
+++ b/packages/admin-panel/src/importExport/SurveyResponsesExportModal.jsx
@@ -9,6 +9,7 @@ import { DateTimePicker, RadioGroup } from '@tupaia/ui-components';
 import { stripTimezoneFromDate } from '@tupaia/utils';
 import { ReduxAutocomplete } from '../autocomplete';
 import { ExportModal } from './ExportModal';
+import { EntityOptionLabel } from '../widgets';
 
 const MODES = {
   COUNTRY: { value: 'country', formInput: 'countryCode' },
@@ -92,6 +93,8 @@ export const SurveyResponsesExportModal = () => {
           endpoint="entities"
           optionLabelKey="name"
           optionValueKey="id"
+          renderOption={option => <EntityOptionLabel {...option} />}
+          optionFields={['id', 'code', 'name']}
           allowMultipleValues
         />
       )}
diff --git a/packages/admin-panel/src/logsTable/LogsModal.jsx b/packages/admin-panel/src/logsTable/LogsModal.jsx
index 26aa31c849..366b313fef 100644
--- a/packages/admin-panel/src/logsTable/LogsModal.jsx
+++ b/packages/admin-panel/src/logsTable/LogsModal.jsx
@@ -11,7 +11,7 @@ import { Modal } from '../widgets';
 import { LogsTable } from './LogsTable';
 
 export const LogsModalComponent = ({
-  errorMessage,
+  error,
   logs,
   logsCount,
   page,
@@ -29,14 +29,14 @@ export const LogsModalComponent = ({
       disableBackdropClick
       maxWidth="xl"
       title={title}
-      errorMessage={errorMessage}
+      error={error}
       isLoading={isLoading}
       buttons={[
         {
           disabled: isLoading,
           variant: 'outlined',
           onClick: onDismiss,
-          text: errorMessage ? 'Dismiss' : 'Cancel',
+          text: error ? 'Dismiss' : 'Cancel',
         },
       ]}
     >
@@ -52,7 +52,7 @@ export const LogsModalComponent = ({
 };
 
 LogsModalComponent.propTypes = {
-  errorMessage: PropTypes.string,
+  error: PropTypes.object,
   isLoading: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
   onDismiss: PropTypes.func.isRequired,
@@ -66,7 +66,7 @@ LogsModalComponent.propTypes = {
 
 LogsModalComponent.defaultProps = {
   isLoading: false,
-  errorMessage: null,
+  error: null,
   logsCount: null,
   title: 'Logs',
 };
diff --git a/packages/admin-panel/src/logsTable/reducer.js b/packages/admin-panel/src/logsTable/reducer.js
index 7e07b2f764..c467efa3d8 100644
--- a/packages/admin-panel/src/logsTable/reducer.js
+++ b/packages/admin-panel/src/logsTable/reducer.js
@@ -13,7 +13,7 @@ import {
 } from './constants';
 
 const defaultState = {
-  errorMessage: '',
+  error: null,
   isLoading: false,
   isOpen: false,
   logs: [],
@@ -36,9 +36,9 @@ const stateChanges = {
   [LOGS_DISMISS]: () => ({
     ...defaultState,
   }),
-  [LOGS_ERROR]: (payload, { errorMessage }) => {
-    if (errorMessage) {
-      return { errorMessage: defaultState.errorMessage }; // If there is an error, dismiss it
+  [LOGS_ERROR]: (payload, { error }) => {
+    if (error) {
+      return { error: defaultState.error }; // If there is an error, dismiss it
     }
     return defaultState; // If no error, dismiss the whole modal and clear its state
   },
diff --git a/packages/admin-panel/src/pages/resources/editSurvey/EditSurveyPage.jsx b/packages/admin-panel/src/pages/resources/editSurvey/EditSurveyPage.jsx
index dcaf88b329..bce2bbc0ea 100644
--- a/packages/admin-panel/src/pages/resources/editSurvey/EditSurveyPage.jsx
+++ b/packages/admin-panel/src/pages/resources/editSurvey/EditSurveyPage.jsx
@@ -2,21 +2,22 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import keyBy from 'lodash.keyby';
 import { connect } from 'react-redux';
 import { useNavigate, useParams } from 'react-router';
 import styled from 'styled-components';
-import { Alert, Button, SpinningLoader } from '@tupaia/ui-components';
+import { Button, SpinningLoader } from '@tupaia/ui-components';
 import { Breadcrumbs } from '../../../layout';
 import { useItemDetails } from '../../../api/queries/useResourceDetails';
-import { withConnectedEditor } from '../../../editor';
+import { useValidationScroll, withConnectedEditor } from '../../../editor';
 import { useEditFiles } from '../../../editor/useEditFiles';
 import { FileUploadField } from '../../../widgets/InputField/FileUploadField';
 import { FieldsEditor } from '../../../editor/FieldsEditor';
 import { dismissEditor, loadEditor, resetEdits } from '../../../editor/actions';
-import { useLinkToPreviousSearchState, useLinkWithSearchState } from '../../../utilities';
+import { Modal } from '../../../widgets';
+import { useLinkToPreviousSearchState } from '../../../utilities';
 
 const Wrapper = styled.div`
   overflow: hidden;
@@ -71,7 +72,7 @@ const SectionBlock = styled.div`
 const RowSection = styled(SectionBlock)`
   > div {
     display: flex;
-    > fieldset:last-child {
+    > div:last-child {
       margin-left: 1.2rem;
     }
   }
@@ -82,14 +83,10 @@ const StickyFooter = styled.div`
   padding: 1.25rem;
 `;
 
-const ErrorAlert = styled(Alert)`
-  display: ${({ $show }) => ($show ? 'flex' : 'none')};
-`;
-
 const EditSurveyPageComponent = withConnectedEditor(
   ({
     parent,
-    errorMessage,
+    error,
     displayProperty,
     getDisplayValue,
     fields,
@@ -100,8 +97,9 @@ const EditSurveyPageComponent = withConnectedEditor(
     onSave,
     isLoading,
     resetEditorToDefaultState,
+    validationErrors,
   }) => {
-    const errorAlertRef = useRef(null);
+    const [errorModalOpen, setErrorModalOpen] = useState(false);
     const navigate = useNavigate();
     const { '*': unusedParam, locale, ...params } = useParams();
     const { data: details } = useItemDetails(params, parent);
@@ -114,6 +112,28 @@ const EditSurveyPageComponent = withConnectedEditor(
 
     const { files, handleSetFormFile } = useEditFiles(fields, onEditField);
 
+    // need to explicity state the path here because using '../../' doesn't apply the search state
+    const { to, newState } = useLinkToPreviousSearchState('/surveys');
+
+    const openErrorModal = () => setErrorModalOpen(true);
+
+    const navigateBack = () => {
+      navigate(to, {
+        state: newState,
+      });
+      resetEditorToDefaultState();
+    };
+    const handleSave = () => {
+      onSave(files, navigateBack, openErrorModal);
+    };
+
+    const { onEditWithTouched, onSaveWithTouched } = useValidationScroll(
+      handleSave,
+      onEditField,
+      validationErrors,
+      files,
+    );
+
     const fieldsBySource = keyBy(fields, 'source');
 
     const {
@@ -156,30 +176,10 @@ const EditSurveyPageComponent = withConnectedEditor(
           ]
         : [];
 
-    // need to explicity state the path here because using '../../' doesn't apply the search state
-    const { to, newState } = useLinkToPreviousSearchState('/surveys');
-
-    const navigateBack = () => {
-      navigate(to, {
-        state: newState,
-      });
-      resetEditorToDefaultState();
-    };
-    const handleSave = () => {
-      onSave(files, navigateBack);
-    };
-
     const initialFileName = Array.isArray(recordData?.surveyQuestions)
       ? null
       : recordData?.surveyQuestions;
 
-    // on error, scroll to the error alert
-    useEffect(() => {
-      if (errorMessage && errorAlertRef.current) {
-        errorAlertRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
-    }, [errorMessage]);
-
     return (
       <Wrapper>
         <Breadcrumbs
@@ -193,14 +193,7 @@ const EditSurveyPageComponent = withConnectedEditor(
 
         <Form $isLoading={isLoading}>
           {isLoading && <SpinningLoader />}
-          <ErrorAlert
-            severity="error"
-            ref={errorAlertRef}
-            $show={!!errorMessage}
-            aria-hidden={!!errorMessage}
-          >
-            {errorMessage}
-          </ErrorAlert>
+
           <Section>
             <FileUploadField
               id="survey-questions"
@@ -208,16 +201,21 @@ const EditSurveyPageComponent = withConnectedEditor(
               onChange={({ fileName, file }) =>
                 handleSetFormFile('surveyQuestions', { fileName, file })
               }
-              accept=".xlsx,.xls,.csv"
-              initialFileName={initialFileName}
+              accept={{
+                'application/vnd.ms-excel': ['.xls'],
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+                'text/csv': ['.csv'],
+              }}
+              fileName={initialFileName}
               label="Survey questions"
             />
           </Section>
+
           <Section>
             <FieldsEditor
               fields={orderedFields}
               recordData={recordData}
-              onEditField={onEditField}
+              onEditField={onEditWithTouched}
             />
           </Section>
         </Form>
@@ -228,11 +226,23 @@ const EditSurveyPageComponent = withConnectedEditor(
             variant="contained"
             color="primary"
             disabled={isUnchanged || isLoading}
-            onClick={handleSave}
+            onClick={onSaveWithTouched}
           >
             Save changes
           </Button>
         </StickyFooter>
+        <Modal
+          open={errorModalOpen}
+          onClose={() => setErrorModalOpen(false)}
+          error={error}
+          title="Survey error"
+          buttons={[
+            {
+              text: 'Close',
+              onClick: () => setErrorModalOpen(false),
+            },
+          ]}
+        />
       </Wrapper>
     );
   },
diff --git a/packages/admin-panel/src/routes/entities/countries.js b/packages/admin-panel/src/routes/entities/countries.js
index 56b558fa51..973e79996b 100644
--- a/packages/admin-panel/src/routes/entities/countries.js
+++ b/packages/admin-panel/src/routes/entities/countries.js
@@ -12,10 +12,12 @@ const FIELDS = [
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
 ];
 
diff --git a/packages/admin-panel/src/routes/entities/entities.js b/packages/admin-panel/src/routes/entities/entities.js
index 1b4c0252e7..5c66a1f06f 100644
--- a/packages/admin-panel/src/routes/entities/entities.js
+++ b/packages/admin-panel/src/routes/entities/entities.js
@@ -15,14 +15,17 @@ export const FIELDS = {
   code: {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   name: {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   type: {
     Header: 'Type',
     source: 'type',
+    required: true,
   },
   attributes: {
     Header: 'Attributes',
diff --git a/packages/admin-panel/src/routes/externalData/dhisInstances.js b/packages/admin-panel/src/routes/externalData/dhisInstances.js
index 96d909486e..dafb0591f1 100644
--- a/packages/admin-panel/src/routes/externalData/dhisInstances.js
+++ b/packages/admin-panel/src/routes/externalData/dhisInstances.js
@@ -9,11 +9,13 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Readonly',
     source: 'readonly',
     type: 'boolean',
+    required: true,
     editConfig: {
       type: 'boolean',
     },
@@ -21,10 +23,12 @@ const FIELDS = [
   {
     Header: 'Config',
     source: 'config',
+    required: true,
     type: 'jsonTooltip',
     editConfig: {
       type: 'jsonEditor',
       default: '{}',
+      required: true,
     },
   },
 ];
diff --git a/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
index 6cc4dd5918..86d9e0755f 100644
--- a/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
+++ b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
@@ -14,10 +14,12 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   {
     Header: 'Description',
diff --git a/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
index 552924a9a6..35cffd3765 100644
--- a/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
+++ b/packages/admin-panel/src/routes/externalData/msupplySupersetInstances.js
@@ -9,11 +9,13 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Config',
     source: 'config',
     type: 'jsonTooltip',
+    required: true,
     editConfig: {
       type: 'jsonEditor',
       default: '{}',
diff --git a/packages/admin-panel/src/routes/projects/landingPages.jsx b/packages/admin-panel/src/routes/projects/landingPages.jsx
index c1d6b34980..3f6259f832 100644
--- a/packages/admin-panel/src/routes/projects/landingPages.jsx
+++ b/packages/admin-panel/src/routes/projects/landingPages.jsx
@@ -23,6 +23,7 @@ const FIELDS = {
   NAME: {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   NAME_HEADER: {
     Header: 'Add name to header title (optional)',
@@ -38,6 +39,7 @@ const FIELDS = {
   URL_SEGMENT: {
     Header: 'Custom link',
     source: 'url_segment',
+    required: true,
     // format the value to include the URL prefix in the table, and display as a clickable link
     // eslint-disable-next-line react/prop-types
     Cell: ({ value }) => (
@@ -139,6 +141,7 @@ const FIELDS = {
   PROJECTS: {
     Header: 'Project code(s)',
     source: 'project_codes',
+    required: true,
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {
diff --git a/packages/admin-panel/src/routes/projects/projects.js b/packages/admin-panel/src/routes/projects/projects.js
index 827144f03c..84a79cb96f 100644
--- a/packages/admin-panel/src/routes/projects/projects.js
+++ b/packages/admin-panel/src/routes/projects/projects.js
@@ -14,10 +14,12 @@ const DEFAULT_FIELDS = [
   {
     Header: 'Description',
     source: 'description',
+    required: true,
   },
   {
     Header: 'Dashboard',
     source: 'dashboard_group_name',
+    required: true,
     editConfig: {
       optionsEndpoint: 'dashboards',
       optionLabelKey: 'name',
@@ -29,6 +31,7 @@ const DEFAULT_FIELDS = [
   {
     Header: 'Map overlay code',
     source: 'default_measure',
+    required: true,
     editConfig: {
       optionsEndpoint: 'mapOverlays',
       optionLabelKey: 'code',
@@ -40,6 +43,7 @@ const DEFAULT_FIELDS = [
     Header: 'Permission group',
     source: 'permission_groups',
     type: 'jsonTooltip',
+    required: true,
     editConfig: {
       optionsEndpoint: 'permissionGroups',
       optionLabelKey: 'name',
@@ -51,11 +55,12 @@ const DEFAULT_FIELDS = [
   {
     Header: 'Image',
     source: 'image_url',
+    required: true,
     editConfig: {
       type: 'image',
       name: 'image_url',
       avatarVariant: 'square',
-      secondaryLabel: 'Recommended size: 480 × 240 px',
+      labelTooltip: 'Recommended size: 480 × 240 px',
       maxHeight: 240,
       maxWidth: 480,
     },
@@ -63,11 +68,12 @@ const DEFAULT_FIELDS = [
   {
     Header: 'Logo',
     source: 'logo_url',
+    required: true,
     editConfig: {
       type: 'image',
       name: 'logo_url',
       avatarVariant: 'square',
-      secondaryLabel: 'Recommended size: 480 × 240 px',
+      labelTooltip: 'Recommended size: 480 × 240 px',
       maxHeight: 240,
       maxWidth: 480,
     },
@@ -78,8 +84,8 @@ const DEFAULT_FIELDS = [
     type: 'jsonTooltip',
     editConfig: {
       type: 'jsonEditor',
+      labelTooltip: 'eg. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
     },
-    secondaryLabel: 'e.g. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
   },
   {
     Header: 'Sort',
@@ -92,6 +98,7 @@ const CREATE_FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   ...DEFAULT_FIELDS,
 ];
@@ -101,6 +108,7 @@ const EDIT_FIELDS = [
     Header: 'Code',
     source: 'code',
     editable: false,
+    required: true,
   },
   ...DEFAULT_FIELDS,
 ];
@@ -109,6 +117,7 @@ const NEW_PROJECT_COLUMNS = [
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   ...CREATE_FIELDS,
   {
@@ -116,6 +125,7 @@ const NEW_PROJECT_COLUMNS = [
     source: 'country.code',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
+    required: true,
     editConfig: {
       optionsEndpoint: 'countries',
       optionLabelKey: 'country.name',
diff --git a/packages/admin-panel/src/routes/surveys/dataGroups.js b/packages/admin-panel/src/routes/surveys/dataGroups.js
index bc5acbb281..b92dce0126 100644
--- a/packages/admin-panel/src/routes/surveys/dataGroups.js
+++ b/packages/admin-panel/src/routes/surveys/dataGroups.js
@@ -27,6 +27,7 @@ const DATA_GROUP_FIELDS = [
           optionsEndpoint: 'dhisInstances',
           optionLabelKey: 'dhisInstances.code',
           optionValueKey: 'dhisInstances.code',
+          required: true,
           visibilityCriteria: { service_type: 'dhis' },
         },
       ],
diff --git a/packages/admin-panel/src/routes/surveys/dataMapping.js b/packages/admin-panel/src/routes/surveys/dataMapping.js
index 6e908d485f..41ba5dd1c3 100644
--- a/packages/admin-panel/src/routes/surveys/dataMapping.js
+++ b/packages/admin-panel/src/routes/surveys/dataMapping.js
@@ -15,14 +15,17 @@ const FIELDS = [
   {
     Header: 'Data element',
     source: 'data_element_code',
+    required: true,
   },
   {
     Header: 'Country code',
     source: 'country_code',
+    required: true,
   },
   {
     Header: 'Service type',
     source: 'service_type',
+    required: true,
     editConfig: {
       options: SERVICE_TYPE_OPTIONS,
     },
diff --git a/packages/admin-panel/src/routes/surveys/optionSets.js b/packages/admin-panel/src/routes/surveys/optionSets.js
index bd087a43fe..a058490d12 100644
--- a/packages/admin-panel/src/routes/surveys/optionSets.js
+++ b/packages/admin-panel/src/routes/surveys/optionSets.js
@@ -11,6 +11,7 @@ const OPTION_SET_FIELDS = [
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
 ];
 
@@ -36,10 +37,11 @@ const OPTION_SET_COLUMNS = [
   },
 ];
 
-const OPTION_FIELDS = [
+export const BASE_OPTION_FIELDS = [
   {
     Header: 'Value',
     source: 'value',
+    required: true,
   },
   {
     Header: 'Label',
@@ -49,6 +51,10 @@ const OPTION_FIELDS = [
     Header: 'Sort order',
     source: 'sort_order',
   },
+];
+
+const OPTION_FIELDS = [
+  ...BASE_OPTION_FIELDS,
   {
     Header: 'Attributes',
     source: 'attributes',
@@ -78,7 +84,7 @@ const IMPORT_CONFIG = {
   queryParameters: [
     {
       label: `${capitalizeFirst(RESOURCE_NAME.singular)} names`,
-      secondaryLabel: `Please enter the names of the ${getPluralForm(
+      labelTooltip: `Please enter the names of the ${getPluralForm(
         RESOURCE_NAME,
       )} to be imported. These should match the tab names in the file.`,
       parameterKey: 'optionSetNames',
diff --git a/packages/admin-panel/src/routes/surveys/questions.js b/packages/admin-panel/src/routes/surveys/questions.js
index a95195dfae..9885ed7a2e 100644
--- a/packages/admin-panel/src/routes/surveys/questions.js
+++ b/packages/admin-panel/src/routes/surveys/questions.js
@@ -3,9 +3,11 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { BASE_OPTION_FIELDS } from './optionSets';
+
 const RESOURCE_NAME = { singular: 'question' };
 
-const QUESTION_FIELDS = [
+export const QUESTION_FIELDS = [
   {
     Header: 'Code',
     source: 'code',
@@ -14,6 +16,7 @@ const QUESTION_FIELDS = [
   {
     Header: 'Type',
     source: 'type',
+    required: true,
   },
   {
     Header: 'Name',
@@ -22,6 +25,7 @@ const QUESTION_FIELDS = [
   {
     Header: 'Question',
     source: 'text',
+    required: true,
   },
   {
     Header: 'Legacy options',
@@ -61,30 +65,15 @@ const QUESTION_COLUMNS = [
   },
 ];
 
-const OPTION_FIELDS = [
-  {
-    Header: 'Value',
-    source: 'value',
-  },
-  {
-    Header: 'Label',
-    source: 'label',
-  },
-  {
-    Header: 'Sort order',
-    source: 'sort_order',
-  },
-];
-
 const OPTION_COLUMNS = [
-  ...OPTION_FIELDS,
+  ...BASE_OPTION_FIELDS,
   {
     Header: 'Edit',
     type: 'edit',
     source: 'id',
     actionConfig: {
       editEndpoint: 'options',
-      fields: OPTION_FIELDS,
+      fields: BASE_OPTION_FIELDS,
     },
   },
 ];
diff --git a/packages/admin-panel/src/routes/surveys/surveyResponses.js b/packages/admin-panel/src/routes/surveys/surveyResponses.js
index 6c84fae093..7399838e89 100644
--- a/packages/admin-panel/src/routes/surveys/surveyResponses.js
+++ b/packages/admin-panel/src/routes/surveys/surveyResponses.js
@@ -120,6 +120,15 @@ export const ANSWER_COLUMNS = [
   {
     Header: 'Answer',
     source: 'text',
+    type: 'tooltip',
+    accessor: row => {
+      return row['entity.code'] || row.text;
+    },
+  },
+  {
+    Header: 'EntityName',
+    show: false,
+    source: 'entity.code',
   },
 ];
 
@@ -135,7 +144,7 @@ const IMPORT_CONFIG = {
   queryParameters: [
     {
       label: 'Surveys',
-      secondaryLabel:
+      labelTooltip:
         'Please enter the surveys for the responses to be imported against. Each tab in the file should be a matching survey code. Leave blank to import all tabs.',
       parameterKey: 'surveyCodes',
       optionsEndpoint: 'surveys',
diff --git a/packages/admin-panel/src/routes/surveys/surveys.js b/packages/admin-panel/src/routes/surveys/surveys.js
index e3d8b50b0c..d486eb286f 100644
--- a/packages/admin-panel/src/routes/surveys/surveys.js
+++ b/packages/admin-panel/src/routes/surveys/surveys.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import { SurveyEditFields } from '../../surveys/SurveyEditFields';
+import { QUESTION_FIELDS as BASE_QUESTION_FIELDS } from './questions';
 import { EditSurveyPage } from '../../pages/resources';
 
 const RESOURCE_NAME = { singular: 'survey' };
@@ -24,6 +25,7 @@ const SURVEY_FIELDS = {
   project: {
     Header: 'Project',
     source: 'project.code',
+    required: true,
     editConfig: {
       sourceKey: 'project.code',
       optionsEndpoint: 'projects',
@@ -37,15 +39,16 @@ const SURVEY_FIELDS = {
   name: {
     Header: 'Name',
     source: 'name',
+    required: true,
     editConfig: {
       maxLength: 50,
-      secondaryLabel: 'Max 50 characters',
       required: true,
     },
   },
   code: {
     Header: 'Code',
     source: 'code',
+    required: true,
     editConfig: {
       labelTooltip: 'A short unique code. Suggestions appear when you enter a name.',
       required: true,
@@ -68,6 +71,7 @@ const SURVEY_FIELDS = {
   permission_group_id: {
     Header: 'Permission group',
     source: 'permission_group.name', // TODO: cleanup as part of RN-910
+    required: true,
     editConfig: {
       sourceKey: 'permission_group.name',
       optionsEndpoint: 'permissionGroups',
@@ -149,6 +153,7 @@ const SURVEY_FIELDS = {
                 optionsEndpoint: 'dhisInstances',
                 optionLabelKey: 'code',
                 optionValueKey: 'code',
+                required: true,
               },
             ]
           : [],
@@ -240,37 +245,10 @@ const CREATE_CONFIG = {
   },
 };
 
-const QUESTION_FIELDS = [
-  {
-    Header: 'Code',
-    source: 'question.code',
-    editable: false,
-  },
-  {
-    Header: 'Type',
-    source: 'question.type',
-  },
-  {
-    Header: 'Name',
-    source: 'question.name',
-  },
-  {
-    Header: 'Question',
-    source: 'question.text',
-  },
-  {
-    Header: 'Detail',
-    source: 'question.detail',
-  },
-  {
-    Header: 'Question label',
-    source: 'question_label',
-  },
-  {
-    Header: 'Detail label',
-    source: 'detail_label',
-  },
-];
+const QUESTION_FIELDS = BASE_QUESTION_FIELDS.map(field => ({
+  ...field,
+  source: `question.${field.source}`,
+}));
 
 const QUESTION_COLUMNS = [
   ...QUESTION_FIELDS,
diff --git a/packages/admin-panel/src/routes/surveys/syncGroups.js b/packages/admin-panel/src/routes/surveys/syncGroups.js
index a2f8b3bace..c054fc58d3 100644
--- a/packages/admin-panel/src/routes/surveys/syncGroups.js
+++ b/packages/admin-panel/src/routes/surveys/syncGroups.js
@@ -11,14 +11,17 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Survey code',
     source: 'data_group_code',
+    required: true,
   },
   {
     Header: 'Service type',
     source: 'service_type',
+    required: true,
     editConfig: {
       options: SERVICE_TYPES,
     },
@@ -26,6 +29,7 @@ const FIELDS = [
   {
     Header: 'Config',
     source: 'config',
+    required: true,
     type: 'jsonTooltip',
     editConfig: {
       type: 'jsonEditor',
diff --git a/packages/admin-panel/src/routes/users/accessRequests.js b/packages/admin-panel/src/routes/users/accessRequests.js
index 3dca7819d3..b8f6fb7094 100644
--- a/packages/admin-panel/src/routes/users/accessRequests.js
+++ b/packages/admin-panel/src/routes/users/accessRequests.js
@@ -59,6 +59,7 @@ const ACCESS_REQUEST_FIELDS = [
   {
     Header: 'Permission group',
     source: 'permission_group.name',
+    required: true,
     editConfig: {
       optionsEndpoint: 'permissionGroups',
       secondaryLabel:
@@ -105,6 +106,7 @@ const USER_COLUMNS = [
         {
           Header: 'Permission group',
           source: 'permission_group.name',
+          required: true,
           editConfig: {
             optionsEndpoint: 'permissionGroups',
             secondaryLabel:
@@ -115,6 +117,7 @@ const USER_COLUMNS = [
           Header: 'Approved',
           source: 'approved',
           type: 'boolean',
+          required: true,
           editConfig: {
             type: 'boolean',
           },
@@ -143,6 +146,8 @@ const DETAILS_COLUMNS = [
         {
           Header: 'Approved',
           source: 'approved',
+          required: true,
+          alwaysValidate: true,
           type: 'boolean',
           editConfig: {
             type: 'boolean',
diff --git a/packages/admin-panel/src/routes/users/permissionGroups.jsx b/packages/admin-panel/src/routes/users/permissionGroups.jsx
index 1a80251d61..1ca47c5f76 100644
--- a/packages/admin-panel/src/routes/users/permissionGroups.jsx
+++ b/packages/admin-panel/src/routes/users/permissionGroups.jsx
@@ -32,10 +32,12 @@ const CREATE_CONFIG = {
       {
         Header: 'Name',
         source: 'name',
+        required: true,
       },
       {
         Header: 'Parent',
         source: 'parent_id',
+        required: true,
         editConfig: {
           optionsEndpoint: 'permissionGroups',
           optionLabelKey: 'name',
diff --git a/packages/admin-panel/src/routes/users/permissions.js b/packages/admin-panel/src/routes/users/permissions.js
index 5358aefb4f..159d62339e 100644
--- a/packages/admin-panel/src/routes/users/permissions.js
+++ b/packages/admin-panel/src/routes/users/permissions.js
@@ -10,6 +10,7 @@ const RESOURCE_NAME = { singular: 'permission' };
 const EntityField = {
   Header: 'Entity',
   source: 'entity.name',
+  required: true,
   editConfig: {
     optionsEndpoint: 'entities',
     type: 'checkboxList',
@@ -27,6 +28,7 @@ export const PERMISSIONS_COLUMNS = [
   {
     Header: 'Entity',
     source: 'entity.name',
+    required: true,
     editConfig: {
       optionsEndpoint: 'entities',
       baseFilter: { type: 'country' },
@@ -35,6 +37,7 @@ export const PERMISSIONS_COLUMNS = [
   {
     Header: 'Permission group',
     source: 'permission_group.name',
+    required: true,
     editConfig: {
       optionsEndpoint: 'permissionGroups',
     },
@@ -86,6 +89,7 @@ const CREATE_CONFIG = {
       {
         Header: 'User email',
         source: 'user.email',
+        required: true,
         editConfig: {
           optionsEndpoint: 'users',
           optionLabelKey: 'email',
@@ -96,6 +100,7 @@ const CREATE_CONFIG = {
       {
         Header: 'Permission group',
         source: 'permission_group.name',
+        required: true,
         editConfig: {
           optionsEndpoint: 'permissionGroups',
           allowMultipleValues: true,
diff --git a/packages/admin-panel/src/routes/users/users.jsx b/packages/admin-panel/src/routes/users/users.jsx
index 20e5da65d7..71d80d137e 100644
--- a/packages/admin-panel/src/routes/users/users.jsx
+++ b/packages/admin-panel/src/routes/users/users.jsx
@@ -26,32 +26,35 @@ const VerifiedCell = ({ value }) => {
   );
 };
 
-const EDIT_FIELDS = [
-  {
+const FIELDS = {
+  first_name: {
     Header: 'First Name',
     source: 'first_name',
+    required: true,
   },
-  {
+  last_name: {
     Header: 'Last Name',
     source: 'last_name',
+    required: true,
   },
-  {
+  email: {
     Header: 'Email address',
     source: 'email',
+    required: true,
   },
-  {
+  phone: {
     Header: 'Phone number',
     source: 'mobile_number',
   },
-  {
+  position: {
     Header: 'Position',
     source: 'position',
   },
-  {
+  employer: {
     Header: 'Employer',
     source: 'employer',
   },
-  {
+  verified: {
     Header: 'Verified',
     source: 'verified_email',
     editConfig: {
@@ -67,7 +70,7 @@ const EDIT_FIELDS = [
       ],
     },
   },
-  {
+  password: {
     Header: 'Password',
     source: 'password',
     hideValue: true,
@@ -75,6 +78,63 @@ const EDIT_FIELDS = [
       type: 'password',
     },
   },
+};
+
+const EDIT_FIELDS = [
+  FIELDS.first_name,
+  FIELDS.last_name,
+  FIELDS.email,
+  FIELDS.phone,
+  FIELDS.position,
+  FIELDS.employer,
+  FIELDS.verified,
+  FIELDS.password,
+];
+
+const CREATE_FIELDS = [
+  FIELDS.first_name,
+  FIELDS.last_name,
+  FIELDS.email,
+  FIELDS.phone,
+  FIELDS.position,
+  FIELDS.employer,
+  FIELDS.verified,
+  {
+    ...FIELDS.password,
+    required: true,
+  },
+  {
+    Header: 'Country',
+    source: 'countryName',
+    required: true,
+    editConfig: {
+      sourceKey: 'countryName',
+      optionsEndpoint: 'countries',
+      optionLabelKey: 'name',
+      optionValueKey: 'name',
+      labelTooltip: 'Select the country to grant this user access to',
+    },
+  },
+  {
+    Header: 'Permission group',
+    source: 'permissionGroupName',
+    required: true,
+    editConfig: {
+      sourceKey: 'permissionGroupName',
+      optionsEndpoint: 'permissionGroups',
+      optionLabelKey: 'name',
+      optionValueKey: 'name',
+      labelTooltip: 'Select the permission group to grant this user access to',
+    },
+  },
+  {
+    Header: 'API Client (not required for most users, see README of admin-panel for usage)',
+    source: 'is_api_client',
+    type: 'boolean',
+    editConfig: {
+      type: 'boolean',
+    },
+  },
 ];
 
 const COLUMNS = [
@@ -124,39 +184,7 @@ const IMPORT_CONFIG = {
 const CREATE_CONFIG = {
   actionConfig: {
     editEndpoint: 'users',
-    fields: [
-      ...EDIT_FIELDS,
-      {
-        Header: 'Country',
-        source: 'countryName',
-        editConfig: {
-          sourceKey: 'countryName',
-          optionsEndpoint: 'countries',
-          optionLabelKey: 'name',
-          optionValueKey: 'name',
-          secondaryLabel: 'Select the country to grant this user access to',
-        },
-      },
-      {
-        Header: 'Permission group',
-        source: 'permissionGroupName',
-        editConfig: {
-          sourceKey: 'permissionGroupName',
-          optionsEndpoint: 'permissionGroups',
-          optionLabelKey: 'name',
-          optionValueKey: 'name',
-          secondaryLabel: 'Select the permission group to grant this user access to',
-        },
-      },
-      {
-        Header: 'API Client (not required for most users, see README of admin-panel for usage)',
-        source: 'is_api_client',
-        type: 'boolean',
-        editConfig: {
-          type: 'boolean',
-        },
-      },
-    ],
+    fields: CREATE_FIELDS,
   },
 };
 
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
index 6636988650..1687caf5b1 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
+++ b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
@@ -15,10 +15,12 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Report code',
     source: 'report_code',
+    required: true,
   },
   {
     Header: 'Config',
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.jsx
similarity index 86%
rename from packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
rename to packages/admin-panel/src/routes/visualisations/dashboardMailingLists.jsx
index 02904df3a0..6e87f4a124 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.jsx
@@ -3,8 +3,10 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import React from 'react';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
 import { prettyArray } from '../../utilities';
+import { EntityOptionLabel } from '../../widgets';
 
 const RESOURCE_NAME = { singular: 'dashboard mailing list' };
 
@@ -12,24 +14,26 @@ const DASHBOARD_MAILING_LIST_FIELDS = {
   project: {
     Header: 'Project',
     source: 'project.code',
+    required: true,
     editConfig: {
       sourceKey: 'project_id',
       optionsEndpoint: 'projects',
       optionLabelKey: 'code',
       optionValueKey: 'id',
       allowMultipleValues: false,
-      secondaryLabel: 'Select the project this dashboard mailing list should be available in',
+      labelTooltip: 'Select the project this dashboard mailing list should be available in',
     },
   },
   dashboard_code: {
     Header: 'Dashboard code',
     source: 'dashboard.code',
+    required: true,
     editConfig: {
       sourceKey: 'dashboard_id',
       optionsEndpoint: 'dashboards',
       optionLabelKey: 'code',
       optionValueKey: 'id',
-      secondaryLabel: 'Select the dashboard this mailing list should be for',
+      labelTooltip: 'Select the dashboard this mailing list should be for',
     },
   },
   dashboard_name: {
@@ -43,12 +47,15 @@ const DASHBOARD_MAILING_LIST_FIELDS = {
   entity_name: {
     Header: 'Entity name',
     source: 'entity.name',
+    required: true,
     editConfig: {
       sourceKey: 'entity_id',
       optionsEndpoint: 'entities',
       optionLabelKey: 'name',
       optionValueKey: 'id',
-      secondaryLabel: 'Select the entity this dashboard mailing list should be for',
+      labelTooltip: 'Select the entity this dashboard mailing list should be for',
+      renderOption: option => <EntityOptionLabel {...option} />,
+      optionFields: ['id', 'code', 'name'],
     },
   },
   admin_permission_groups: {
@@ -62,7 +69,7 @@ const DASHBOARD_MAILING_LIST_FIELDS = {
       optionValueKey: 'name',
       sourceKey: 'admin_permission_groups',
       allowMultipleValues: true,
-      secondaryLabel:
+      labelTooltip:
         'Users with any of these permissions can send out the dashboard to the mailing list',
     },
   },
@@ -110,11 +117,13 @@ const ENTRY_FIELDS = [
   {
     Header: 'Email',
     source: 'dashboard_mailing_list_entry.email',
+    required: true,
   },
   {
     Header: 'Subscribed',
     source: 'dashboard_mailing_list_entry.subscribed',
     type: 'boolean',
+    required: true,
     editConfig: { type: 'boolean' },
   },
 ];
diff --git a/packages/admin-panel/src/routes/visualisations/dashboardRelations.js b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
index d92835d207..4a7e617375 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboardRelations.js
@@ -14,6 +14,7 @@ export const FIELDS = {
   DASHBOARD_CODE: {
     Header: 'Dashboard code',
     source: 'dashboard.code',
+    required: true,
     editConfig: {
       optionsEndpoint: 'dashboards',
       optionLabelKey: 'dashboard.code',
@@ -24,6 +25,7 @@ export const FIELDS = {
   DASHBOARD_ITEM_CODE: {
     Header: 'Dashboard item code',
     source: 'dashboard_item.code',
+    required: true,
     editConfig: {
       optionsEndpoint: 'dashboardItems',
       optionLabelKey: 'dashboard_item.code',
@@ -35,6 +37,7 @@ export const FIELDS = {
     Header: 'Permission groups',
     source: 'permission_groups',
     Filter: ArrayFilter,
+    required: true,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {
       optionsEndpoint: 'permissionGroups',
@@ -48,6 +51,7 @@ export const FIELDS = {
     Header: 'Entity types',
     source: 'entity_types',
     Filter: ArrayFilter,
+    required: true,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {
       type: 'autocomplete',
@@ -55,7 +59,7 @@ export const FIELDS = {
       canCreateNewOptions: true,
       optionLabelKey: 'entityTypes',
       optionValueKey: 'entityTypes',
-      secondaryLabel: 'Input the entity types you want. e.g: ‘country’, ‘sub_district’',
+      labelTooltip: "Input the entity types you want. Eg: 'country', 'sub_district'",
     },
   },
   ATTRIBUTES_FILTER: {
@@ -68,6 +72,7 @@ export const FIELDS = {
     Header: 'Project codes',
     source: 'project_codes',
     Filter: ArrayFilter,
+    required: true,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {
       optionsEndpoint: 'projects',
@@ -83,7 +88,7 @@ export const FIELDS = {
   },
 };
 
-export const DASHBOARD_RELATION_COLUMNS = [
+const DASHBOARD_RELATION_FIELDS = [
   FIELDS.DASHBOARD_CODE,
   FIELDS.DASHBOARD_ITEM_CODE,
   FIELDS.PERMISSION_GROUPS,
@@ -94,7 +99,7 @@ export const DASHBOARD_RELATION_COLUMNS = [
 ];
 
 const COLUMNS = [
-  ...DASHBOARD_RELATION_COLUMNS,
+  ...DASHBOARD_RELATION_FIELDS,
   {
     Header: 'Edit',
     type: 'edit',
@@ -102,7 +107,7 @@ const COLUMNS = [
     actionConfig: {
       title: `Edit ${RESOURCE_NAME.singular}`,
       editEndpoint: DASHBOARD_RELATION_ENDPOINT,
-      fields: DASHBOARD_RELATION_COLUMNS,
+      fields: DASHBOARD_RELATION_FIELDS,
     },
   },
   {
@@ -118,7 +123,14 @@ const CREATE_CONFIG = {
   actionConfig: {
     title: 'Add relation between dashboard and dashboard item',
     editEndpoint: DASHBOARD_RELATION_ENDPOINT,
-    fields: DASHBOARD_RELATION_COLUMNS,
+    fields: [
+      FIELDS.DASHBOARD_CODE,
+      FIELDS.DASHBOARD_ITEM_CODE,
+      FIELDS.PERMISSION_GROUPS,
+      FIELDS.ENTITY_TYPES,
+      FIELDS.PROJECT_CODES,
+      FIELDS.SORT_ORDER,
+    ],
   },
 };
 
diff --git a/packages/admin-panel/src/routes/visualisations/dashboards.js b/packages/admin-panel/src/routes/visualisations/dashboards.js
index 6c8a00dc85..8bd303ce8b 100644
--- a/packages/admin-panel/src/routes/visualisations/dashboards.js
+++ b/packages/admin-panel/src/routes/visualisations/dashboards.js
@@ -17,14 +17,17 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
   {
     Header: 'Organisation unit code',
     source: 'root_entity_code',
+    required: true,
     editConfig: {
       optionsEndpoint: 'entities',
       optionLabelKey: 'code',
diff --git a/packages/admin-panel/src/routes/visualisations/dataTables.js b/packages/admin-panel/src/routes/visualisations/dataTables.js
index 9428dc929b..3f2f8bae6f 100644
--- a/packages/admin-panel/src/routes/visualisations/dataTables.js
+++ b/packages/admin-panel/src/routes/visualisations/dataTables.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
+import { DataTableType } from '@tupaia/types';
 import { DataTableEditFields } from '../../dataTables/DataTableEditFields';
 import { onProcessDataForSave } from '../../dataTables/onProcessDataForSave';
 import { ArrayFilter } from '../../table/columnTypes/columnFilters';
@@ -12,32 +13,49 @@ const RESOURCE_NAME = { singular: 'data table' };
 
 const DATA_TABLES_ENDPOINT = 'dataTables';
 
+const dataTableTypeOptions = Object.values(DataTableType).map(type => ({
+  label: type,
+  value: type,
+}));
+
 const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Description',
     source: 'description',
+    required: true,
   },
   {
     Header: 'Type',
     source: 'type',
+    required: true,
+    editConfig: {
+      options: dataTableTypeOptions,
+    },
   },
   {
     Header: 'Config',
     source: 'config',
     type: 'jsonTooltip',
+    required: true,
     editConfig: { type: 'jsonEditor' },
   },
   {
     Header: 'Permission groups',
     source: 'permission_groups',
+    required: true,
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {
-      type: 'jsonArray',
+      optionsEndpoint: 'permissionGroups',
+      optionLabelKey: 'name',
+      optionValueKey: 'name',
+      sourceKey: 'permission_groups',
+      allowMultipleValues: true,
     },
   },
 ];
diff --git a/packages/admin-panel/src/routes/visualisations/indicators.js b/packages/admin-panel/src/routes/visualisations/indicators.js
index f3a867471a..18d1ee2934 100644
--- a/packages/admin-panel/src/routes/visualisations/indicators.js
+++ b/packages/admin-panel/src/routes/visualisations/indicators.js
@@ -9,12 +9,12 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    width: 300,
+    required: true,
   },
   {
     Header: 'Builder',
     source: 'builder',
-    width: 170,
+    required: true,
     editConfig: {
       optionsEndpoint: 'indicators',
       optionLabelKey: 'builder',
diff --git a/packages/admin-panel/src/routes/visualisations/legacyReports.js b/packages/admin-panel/src/routes/visualisations/legacyReports.js
index 02b634a8ac..33a781da8e 100644
--- a/packages/admin-panel/src/routes/visualisations/legacyReports.js
+++ b/packages/admin-panel/src/routes/visualisations/legacyReports.js
@@ -9,16 +9,19 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Data builder',
     source: 'data_builder',
+    required: true,
   },
   {
     Header: 'Data builder config',
     source: 'data_builder_config',
     type: 'jsonTooltip',
     editConfig: { type: 'jsonEditor' },
+    required: true,
   },
   {
     Header: 'Data services',
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
index 4a4c730436..034640333e 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
@@ -11,6 +11,7 @@ export const FIELDS = {
   MAP_OVERLAY_GROUP_CODE: {
     Header: 'Map overlay group code',
     source: 'map_overlay_group.code',
+    required: true,
     editConfig: {
       optionsEndpoint: 'mapOverlayGroups',
       optionLabelKey: 'map_overlay_group.code',
@@ -20,6 +21,7 @@ export const FIELDS = {
   },
   CHILD_TYPE: {
     Header: 'Child type',
+    required: true,
     source: 'child_type',
     editConfig: {
       options: [
@@ -42,6 +44,7 @@ export const FIELDS = {
     Header: 'Child map overlay code',
     id: 'child_map_overlay_code',
     source: 'child_code',
+    required: true,
     editConfig: {
       optionsEndpoint: 'mapOverlays',
       optionLabelKey: 'mapOverlay.code',
@@ -53,6 +56,7 @@ export const FIELDS = {
   CHILD_MAP_OVERLAY_GROUP_CODE: {
     Header: 'Child map overlay group code',
     id: 'child_map_overlay_group_code',
+    required: true,
     source: 'child_code',
     editConfig: {
       optionsEndpoint: 'mapOverlayGroups',
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
index f28661ef5c..4d1d5227dd 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
@@ -18,10 +18,12 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Name',
     source: 'name',
+    required: true,
   },
 ];
 
diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
index 3bd59b3648..157cc49575 100644
--- a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
+++ b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
@@ -18,11 +18,13 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
+    required: true,
   },
   {
     Header: 'Name',
     source: 'name',
     width: 140,
+    required: true,
   },
   {
     Header: 'Permission group',
@@ -102,7 +104,7 @@ const extraEditFields = [
     source: 'entity_attributes_filter',
     editConfig: {
       type: 'jsonEditor',
-      secondaryLabel: (
+      labelTooltip: (
         <>
           Case-sensitive. This field will be used to filter the entities that this map overlay will
           have data for. It is an extension of <code>config.measureLevel</code>. e.g.&nbsp;
diff --git a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
index 144ed1e11f..6659212388 100644
--- a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
+++ b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
@@ -36,7 +36,6 @@ const FIELDS = [
   {
     Header: 'Creation date',
     source: 'creation_date',
-
     accessor: row => moment(row.creation_date).local().toString(),
     editConfig: {
       type: 'datetime-local',
@@ -51,6 +50,7 @@ const FIELDS = [
         {
           label: 'Title',
           fieldName: 'title',
+          required: true,
         },
         {
           label: 'Image',
diff --git a/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx b/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
index fb45400577..eaec92dbab 100644
--- a/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
+++ b/packages/admin-panel/src/routes/visualisations/visualisationsTabRoutes.jsx
@@ -26,12 +26,12 @@ export const visualisationsTabRoutes = {
     dashboards,
     dashboardRelations,
     dashboardMailingLists,
+    dataTables,
     legacyReports,
     mapOverlays,
     mapOverlayGroups,
     mapOverlayGroupRelations,
     indicators,
-    dataTables,
     socialFeed,
   ],
 };
diff --git a/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx b/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
index 043ea5755a..fa845cc082 100644
--- a/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
+++ b/packages/admin-panel/src/surveyResponse/FileQuestionField.jsx
@@ -80,6 +80,7 @@ const AttachModal = ({ isOpen, onClose, maxSizeInBytes, onAttachFile, title }) =
         label="Select a file"
         showFileSize
         maxSizeInBytes={maxSizeInBytes}
+        name="file-question-field"
         onChange={handleSelectFile}
       />
     </Modal>
@@ -121,7 +122,7 @@ export const FileQuestionField = ({ value: uniqueFileName, onChange, label, maxS
 
   const api = useApiContext();
   const downloadFile = async () => {
-    await api.download(`downloadFiles`, { uniqueFileNames: uniqueFileName }, fileName);
+    await api.download('downloadFiles', { uniqueFileNames: uniqueFileName }, fileName);
   };
 
   return (
diff --git a/packages/admin-panel/src/surveyResponse/Form.jsx b/packages/admin-panel/src/surveyResponse/Form.jsx
index 31d55c8f74..435bda8b32 100644
--- a/packages/admin-panel/src/surveyResponse/Form.jsx
+++ b/packages/admin-panel/src/surveyResponse/Form.jsx
@@ -34,7 +34,6 @@ export const Form = ({ surveyResponseId, onDismiss, onAfterMutate }) => {
   } = useResubmitSurveyResponse(surveyResponseId, surveyResubmission);
 
   const { data, isLoading: isFetching, error: fetchError } = useGetExistingData(surveyResponseId);
-  const fetchErrorMessage = fetchError?.message;
 
   const existingAndNewFields = { ...data?.surveyResponse, ...surveyResubmission };
 
@@ -109,8 +108,8 @@ export const Form = ({ surveyResponseId, onDismiss, onAfterMutate }) => {
   return (
     <>
       <ModalContentProvider
-        isLoading={isFetching || isLoading}
-        errorMessage={fetchErrorMessage || resubmitError?.message}
+        isLoading={isFetching || isResubmitting}
+        error={fetchError || resubmitError}
       >
         {!isFetching && !isSuccess && (
           <ResponseFields
diff --git a/packages/admin-panel/src/surveyResponse/ResponseFields.jsx b/packages/admin-panel/src/surveyResponse/ResponseFields.jsx
index bbc6c9ffe6..ab593f8047 100644
--- a/packages/admin-panel/src/surveyResponse/ResponseFields.jsx
+++ b/packages/admin-panel/src/surveyResponse/ResponseFields.jsx
@@ -13,6 +13,7 @@ import { format } from 'date-fns';
 import { Autocomplete } from '../autocomplete';
 import { useDebounce } from '../utilities';
 import { useEntities } from '../VizBuilderApp/api';
+import { EntityOptionLabel } from '../widgets';
 
 const InputSection = styled.div`
   margin-block-start: 1.25rem;
@@ -108,6 +109,9 @@ export const ResponseFields = ({
             return option.id === selected.id;
           }}
           getOptionLabel={option => option?.name || ''}
+          renderOption={option => {
+            return <EntityOptionLabel {...option} />;
+          }}
           isLoading={entityIsLoading}
           onChangeSelection={(event, selectedValue) => {
             if (!selectedValue) {
diff --git a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
index 016a4b2e28..8ad76ee700 100644
--- a/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
+++ b/packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx
@@ -109,6 +109,7 @@ const DataFetchingTableComponent = memo(
     actionLabel,
     defaultFilters,
     editorState,
+    defaultSorting,
   }) => {
     const formattedColumns = useMemo(() => {
       const cols = columns.map(column => formatColumnForReactTable(column));
@@ -159,24 +160,40 @@ const DataFetchingTableComponent = memo(
       return [...nonButtonColumns, singleButtonColumn];
     }, [JSON.stringify(columns)]);
 
+    const getSortingToUse = () => {
+      // If there is no sorting, return the default sorting, if it exists, otherwise return an empty array
+      if (!sorting) return defaultSorting ?? [];
+      return sorting;
+    };
+
+    const sortingToUse = getSortingToUse();
+
     // Listen for changes in filters in the URL and refresh the data accordingly
     const { filters, onChangeFilters } = useColumnFilters(defaultFilters);
 
     useEffect(() => {
       // if the page index is already 0, we can just refresh the data
       if (pageIndex === 0) {
-        onRefreshData(filters, sorting, pageIndex, pageSize);
+        onRefreshData(filters, sortingToUse, pageIndex, pageSize);
         // if the page index is not 0, we need to reset it to 0, which will trigger a refresh
       } else onPageChange(0);
-    }, [JSON.stringify(filters), JSON.stringify(sorting)]);
+    }, [JSON.stringify(filters), JSON.stringify(sortingToUse)]);
 
     useEffect(() => {
-      onRefreshData(filters, sorting, pageIndex, pageSize);
+      onRefreshData(filters, sortingToUse, pageIndex, pageSize);
     }, [pageSize, pageIndex]);
 
+    // when a delete is successful, the confirmActionMessage will be set to null. Refresh the data here
+    useEffect(() => {
+      // Don't refresh data if there is a confirmActionMessage or errorMessage, or if data is being changed on the server
+      if (confirmActionMessage || errorMessage || isChangingDataOnServer) return;
+
+      onRefreshData(filters, sortingToUse, pageIndex, pageSize);
+    }, [confirmActionMessage, errorMessage, isChangingDataOnServer]);
+
     useEffect(() => {
       if (editorState?.isOpen) return;
-      onRefreshData(filters, sorting, pageIndex, pageSize);
+      onRefreshData(filters, sortingToUse, pageIndex, pageSize);
     }, [editorState?.isOpen]);
 
     const isLoading = isFetchingData || isChangingDataOnServer;
@@ -203,7 +220,7 @@ const DataFetchingTableComponent = memo(
           isLoading={isChangingDataOnServer}
           pageIndex={pageIndex}
           pageSize={pageSize}
-          sorting={sorting}
+          sorting={sortingToUse}
           numberOfPages={numberOfPages}
           onChangeFilters={onChangeFilters}
           filters={filters}
@@ -263,6 +280,7 @@ DataFetchingTableComponent.propTypes = {
   actionLabel: PropTypes.string,
   defaultFilters: PropTypes.array,
   editorState: PropTypes.object,
+  defaultSorting: PropTypes.array,
 };
 
 DataFetchingTableComponent.defaultProps = {
@@ -280,6 +298,7 @@ DataFetchingTableComponent.defaultProps = {
   actionLabel: 'Action',
   defaultFilters: [],
   editorState: {},
+  defaultSorting: [],
 };
 
 const mapStateToProps = (state, { reduxId, ...ownProps }) => ({
diff --git a/packages/admin-panel/src/table/constants.js b/packages/admin-panel/src/table/constants.js
index 3d42f9597b..214c65b58b 100644
--- a/packages/admin-panel/src/table/constants.js
+++ b/packages/admin-panel/src/table/constants.js
@@ -34,5 +34,5 @@ export const DEFAULT_TABLE_STATE = {
   fetchId: null,
   pageIndex: 0,
   pageSize: 20,
-  sorting: [],
+  sorting: null,
 };
diff --git a/packages/admin-panel/src/theme/colors.js b/packages/admin-panel/src/theme/colors.js
index 2051402cf3..6129e052e9 100644
--- a/packages/admin-panel/src/theme/colors.js
+++ b/packages/admin-panel/src/theme/colors.js
@@ -21,16 +21,17 @@ export const DARK_BLUE = '#328DE5';
 export const DARK_GREEN = '#00972E';
 
 export const LIGHT_BLUE = '#99D6FF';
-export const LIGHT_RED = '#FEE2E2';
+export const LIGHT_RED = '#F76853';
 export const LIGHT_ORANGE = '#FFECE1';
 
 // Greys (based on first 2 letters of hex code)
 export const GREY_72 = '#727D84';
 export const GREY_9F = '#9FA6AA';
+export const GREY_B8 = '#B8B8B8';
+export const GREY_DE = '#DEDEDE';
 export const GREY_E2 = '#E2E2E2';
 export const GREY_F1 = '#F1F1F1';
 export const GREY_FB = '#FBF9F9';
-export const GREY_DE = '#DEDEDE';
 
 // Blues
 export const BLUE_BF = '#BFD5E4';
diff --git a/packages/admin-panel/src/theme/theme.js b/packages/admin-panel/src/theme/theme.js
index 2e9f25a92c..d9dd5f4ca4 100644
--- a/packages/admin-panel/src/theme/theme.js
+++ b/packages/admin-panel/src/theme/theme.js
@@ -20,7 +20,7 @@ const palette = {
   },
   error: {
     main: COLORS.RED,
-    light: COLORS.LIGHT_RED,
+    light: `${COLORS.LIGHT_RED}1A`, // 10% opacity
   },
   warning: {
     main: COLORS.RED,
@@ -136,6 +136,12 @@ const overrides = {
       fontSize: '0.875rem',
       fontWeight: 500,
       color: palette.text.primary,
+      '&.Mui-error': {
+        color: palette.text.primary,
+      },
+    },
+    asterisk: {
+      color: palette.error.main,
     },
     asterisk: {
       color: palette.error.main,
@@ -176,6 +182,21 @@ const overrides = {
       },
     },
   },
+  MuiAlert: {
+    standardError: {
+      border: `1px solid ${COLORS.LIGHT_RED}`,
+      color: palette.text.primary,
+      paddingBlock: '0',
+      '& > .MuiAlert-icon > .MuiSvgIcon-root': {
+        padding: 0,
+        fontSize: '1rem',
+        marginBlockEnd: 0,
+      },
+    },
+    message: {
+      paddingBlock: '0.5rem',
+    },
+  },
   MuiCssBaseline: {
     '@global': {
       label: {
diff --git a/packages/admin-panel/src/widgets/EntityOptionLabel.jsx b/packages/admin-panel/src/widgets/EntityOptionLabel.jsx
new file mode 100644
index 0000000000..a3840a6112
--- /dev/null
+++ b/packages/admin-panel/src/widgets/EntityOptionLabel.jsx
@@ -0,0 +1,31 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledEntityOptionLabel = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Name = styled.span`
+  font-style: ${props => props.theme.typography.fontWeightBold};
+  color: ${props => props.theme.palette.text.primary};
+`;
+
+const Code = styled.span`
+  margin-top: 0.25rem;
+  color: ${props => props.theme.palette.text.secondary};
+`;
+
+export const EntityOptionLabel = ({ name, code }) => {
+  return (
+    <StyledEntityOptionLabel>
+      <Name>{name}</Name>
+      <Code>{code}</Code>
+    </StyledEntityOptionLabel>
+  );
+};
diff --git a/packages/admin-panel/src/widgets/InputField/CheckboxListField.jsx b/packages/admin-panel/src/widgets/InputField/CheckboxListField.jsx
index 882116b822..7c2fd144b5 100644
--- a/packages/admin-panel/src/widgets/InputField/CheckboxListField.jsx
+++ b/packages/admin-panel/src/widgets/InputField/CheckboxListField.jsx
@@ -52,12 +52,14 @@ const Container = styled.div`
   height: 100%;
   max-height: 15rem;
   overflow-y: auto;
-  border: 1px solid ${({ theme }) => theme.palette.grey['400']};
+  border: 1px solid
+    ${({ theme, $invalid }) => {
+      return $invalid ? theme.palette.error.main : theme.palette.grey['400'];
+    }};
   padding-inline: 1rem;
   padding-block-start: 0.2rem;
   border-radius: 4px;
   margin-block-start: 0.5rem;
-  margin-block-end: 1.2rem;
 `;
 
 const FormGroup = styled(MuiFormGroup)`
@@ -179,18 +181,10 @@ export const CheckboxListField = ({
   return (
     <FormControl component="fieldset" required={required} error={error}>
       <LegendWrapper>
-        <InputLabel
-          label={label}
-          as={Legend}
-          tooltip={tooltip}
-          labelProps={{
-            error,
-            required,
-          }}
-        />
+        <InputLabel label={label} as={Legend} tooltip={tooltip} error={error} required={required} />
       </LegendWrapper>
 
-      <Container>
+      <Container $invalid={error}>
         <SearchField value={searchTerm} onChange={event => setSearchTerm(event.target.value)} />
         <FormGroup>
           {isLoading && <div>Loading...</div>}
diff --git a/packages/admin-panel/src/widgets/InputField/FileUploadField.jsx b/packages/admin-panel/src/widgets/InputField/FileUploadField.jsx
index 31086b4cdc..34241c0151 100644
--- a/packages/admin-panel/src/widgets/InputField/FileUploadField.jsx
+++ b/packages/admin-panel/src/widgets/InputField/FileUploadField.jsx
@@ -1,48 +1,26 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { FileUploadField as BaseFileUploadField } from '@tupaia/ui-components';
 
 export const FileUploadField = ({
+  accept,
   onChange,
   name,
   label,
   helperText,
-  textOnButton,
-  showFileSize,
+  fileName,
   maxSizeInBytes,
-  initialFileName = null,
-  accept = '*',
 }) => {
-  const [fileName, setFileName] = useState(initialFileName);
-
-  const handleChange = async (event, newFileName, files) => {
-    setFileName(newFileName);
-
+  const handleChange = async files => {
     const [file] = files || [];
-    if (!file) {
-      onChange({
-        fileName: null,
-        file: null,
-      });
-      return;
-    }
-
-    onChange({
-      fileName: newFileName,
-      file,
-    });
+    onChange(file ? { fileName: file.name, file } : { fileName: null, file: null });
   };
 
-  // Allows programmatic setting of the file name
-  useEffect(() => {
-    setFileName(initialFileName);
-  }, [initialFileName]);
-
   return (
     <BaseFileUploadField
       onChange={handleChange}
@@ -50,8 +28,6 @@ export const FileUploadField = ({
       fileName={fileName}
       label={label}
       helperText={helperText}
-      textOnButton={textOnButton}
-      showFileSize={showFileSize}
       maxSizeInBytes={maxSizeInBytes}
       accept={accept}
     />
@@ -63,20 +39,16 @@ FileUploadField.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
   helperText: PropTypes.string,
-  textOnButton: PropTypes.string,
-  showFileSize: PropTypes.bool,
   maxSizeInBytes: PropTypes.number,
-  initialFileName: PropTypes.string,
-  accept: PropTypes.string,
+  fileName: PropTypes.string,
+  accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
 };
 
 FileUploadField.defaultProps = {
   onChange: () => {},
   label: null,
   helperText: null,
-  textOnButton: null,
-  showFileSize: false,
   maxSizeInBytes: null,
-  initialFileName: null,
-  accept: '*',
+  fileName: null,
+  accept: null,
 };
diff --git a/packages/admin-panel/src/widgets/InputField/InputField.jsx b/packages/admin-panel/src/widgets/InputField/InputField.jsx
index 0f25efd201..aad491796b 100644
--- a/packages/admin-panel/src/widgets/InputField/InputField.jsx
+++ b/packages/admin-panel/src/widgets/InputField/InputField.jsx
@@ -5,11 +5,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { InputWrapper } from './InputWrapper';
 
-const InputFieldComponents = {};
+const InputFields = {};
 
 export const registerInputField = (type, Component) => {
-  InputFieldComponents[type] = Component;
+  InputFields[type] = Component;
 };
 
 const getInputType = ({ options, optionsEndpoint, type }) => {
@@ -22,12 +23,47 @@ const getInputType = ({ options, optionsEndpoint, type }) => {
   return type;
 };
 
-export const InputField = ({ type, ...inputProps }) => {
+export const InputField = ({
+  type,
+  maxLength,
+  minLength,
+  secondaryLabel,
+  error,
+  ...inputProps
+}) => {
   const { options, optionsEndpoint } = inputProps;
   const inputType = getInputType({ options, optionsEndpoint, type });
-  const InputComponent = InputFieldComponents[inputType];
+  const InputComponent = InputFields[inputType];
 
-  return <InputComponent {...inputProps} />;
+  const generateHelperText = () => {
+    if (secondaryLabel) return secondaryLabel;
+    if (maxLength && minLength !== undefined && minLength !== null) {
+      return `Must be between ${minLength} and ${maxLength} characters`;
+    }
+
+    if (maxLength) {
+      return `Max ${maxLength} characters`;
+    }
+
+    if (minLength !== undefined && minLength !== null) {
+      return `Min ${minLength} characters`;
+    }
+  };
+
+  const helperText = generateHelperText();
+
+  return (
+    <InputWrapper errorText={error} helperText={helperText}>
+      {InputComponent && (
+        <InputComponent
+          {...inputProps}
+          error={!!error}
+          maxLength={maxLength}
+          minLength={minLength}
+        />
+      )}
+    </InputWrapper>
+  );
 };
 
 export const inputFieldPropTypes = {
@@ -55,6 +91,10 @@ export const inputFieldPropTypes = {
   parentRecord: PropTypes.object,
   secondaryLabel: PropTypes.string,
   variant: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.string,
+  maxLength: PropTypes.number,
+  minLength: PropTypes.number,
 };
 
 export const inputFieldDefaultProps = {
@@ -73,6 +113,10 @@ export const inputFieldDefaultProps = {
   parentRecord: {},
   secondaryLabel: null,
   variant: null,
+  required: false,
+  error: null,
+  maxLength: null,
+  minLength: null,
 };
 
 InputField.propTypes = inputFieldPropTypes;
diff --git a/packages/admin-panel/src/widgets/InputField/InputWrapper.jsx b/packages/admin-panel/src/widgets/InputField/InputWrapper.jsx
new file mode 100644
index 0000000000..33ef3daa63
--- /dev/null
+++ b/packages/admin-panel/src/widgets/InputField/InputWrapper.jsx
@@ -0,0 +1,66 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { Typography } from '@material-ui/core';
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  width: auto;
+  .MuiFormControl-root {
+    // override the default margin-bottom from ui-components
+    margin-bottom: 0;
+  }
+`;
+const MessageWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: 0.2rem;
+  height: 1.5rem;
+`;
+
+const MessageTextWrapper = styled.div`
+  width: 100%;
+`;
+
+const HelperTextWrapper = styled(MessageTextWrapper)`
+  max-width: 75%;
+  margin-inline-start: 0.5rem;
+  text-align: right;
+`;
+
+const Message = styled(Typography)`
+  font-size: 0.75rem;
+`;
+
+export const InputWrapper = ({ errorText, helperText, children }) => (
+  <Wrapper>
+    {children}
+    <MessageWrapper>
+      {errorText && (
+        <MessageTextWrapper>
+          <Message color="error">{errorText}</Message>
+        </MessageTextWrapper>
+      )}
+      {helperText && (
+        <HelperTextWrapper>
+          <Message color="textSecondary">{helperText}</Message>
+        </HelperTextWrapper>
+      )}
+    </MessageWrapper>
+  </Wrapper>
+);
+
+InputWrapper.propTypes = {
+  errorText: PropTypes.string,
+  helperText: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+InputWrapper.defaultProps = {
+  errorText: null,
+  helperText: null,
+};
diff --git a/packages/admin-panel/src/widgets/InputField/JsonEditor.jsx b/packages/admin-panel/src/widgets/InputField/JsonEditor.jsx
index 5e364a36af..956d1966d6 100644
--- a/packages/admin-panel/src/widgets/InputField/JsonEditor.jsx
+++ b/packages/admin-panel/src/widgets/InputField/JsonEditor.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Typography from '@material-ui/core/Typography';
+import { InputLabel } from '@tupaia/ui-components';
 import { JsonEditor as Editor } from '../JsonEditor';
 
 const Container = styled.div`
@@ -15,34 +15,29 @@ const Container = styled.div`
   min-height: 300px;
   margin-bottom: 20px;
 
-  > div {
+  .jsoneditor-parent {
     display: flex;
     flex: 1;
   }
 
   .jsoneditor {
     height: auto;
+    border-color: ${({ theme, $invalid }) => {
+      return $invalid ? theme.palette.error.main : theme.palette.text.primary;
+    }};
   }
 `;
 
-const Label = styled(Typography)`
-  color: ${props => props.theme.palette.text.secondary};
-  font-size: 0.9rem;
-  line-height: 1.1rem;
-`;
-
-const HelperText = styled(Typography)`
-  color: ${props => props.theme.palette.text.secondary};
-  font-size: 0.75rem;
-  margin-top: 3px;
-  line-height: 1.66;
-`;
-
-export const JsonEditor = ({ inputKey, label, helperText, value, onChange, stringify }) => {
-  if (!value) {
-    return null;
-  }
-
+export const JsonEditor = ({
+  inputKey,
+  label,
+  value,
+  onChange,
+  stringify,
+  error,
+  required,
+  tooltip,
+}) => {
   let editorValue = value;
 
   if (typeof value === 'string') {
@@ -50,17 +45,27 @@ export const JsonEditor = ({ inputKey, label, helperText, value, onChange, strin
   }
 
   return (
-    <Container>
-      <Label gutterBottom>{label}</Label>
+    <Container $invalid={error}>
+      <InputLabel
+        label={label}
+        labelProps={{
+          required,
+          error,
+        }}
+        tooltip={tooltip}
+        applyWrapper
+      />
       {/* Use json editor plugin. For configuration options @see https://github.com/vankop/jsoneditor-react */}
       <Editor
         mainMenuBar={false}
         statusBar={false}
         mode="code"
-        onChange={json => onChange(inputKey, stringify ? JSON.stringify(json) : json)}
+        onChange={json => onChange(inputKey, stringify ? JSON.stringify(json ?? {}) : json)}
         value={editorValue}
+        htmlElementProps={{
+          className: 'jsoneditor-parent',
+        }}
       />
-      {helperText && <HelperText>{helperText}</HelperText>}
     </Container>
   );
 };
@@ -70,12 +75,16 @@ JsonEditor.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array]),
   onChange: PropTypes.func.isRequired,
-  helperText: PropTypes.string,
   stringify: PropTypes.bool,
+  error: PropTypes.bool,
+  required: PropTypes.bool,
+  tooltip: PropTypes.string,
 };
 
 JsonEditor.defaultProps = {
-  helperText: null,
   value: null,
   stringify: true,
+  error: false,
+  required: false,
+  tooltip: null,
 };
diff --git a/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx b/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
index 551422dd7a..71dd20ebf1 100644
--- a/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
+++ b/packages/admin-panel/src/widgets/InputField/JsonInputField.jsx
@@ -10,8 +10,8 @@ import Card from '@material-ui/core/Card';
 import { FormLabel } from '@material-ui/core';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
-import { InputField } from './InputField';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../../utilities';
+import { EditorInputField } from '../../editor';
 
 const getJsonFieldValues = value => {
   if (value) {
@@ -32,14 +32,12 @@ const DEFAULT_FIELD_TYPE = 'text';
 
 const GreyCard = styled(Card)`
   background: #f9f9f9;
-  margin-bottom: 20px;
 `;
 
 const Container = styled.fieldset`
   position: relative;
-  margin-bottom: 20px;
   border: none;
-  padding: 0;
+  padding: 0px;
 `;
 
 const CardLabel = styled(FormLabel).attrs({
@@ -61,6 +59,8 @@ export const JsonInputField = props => {
     secondaryLabel,
     variant,
     recordData,
+    required,
+    error,
   } = props;
   const jsonFieldValues = getJsonFieldValues(value);
   const jsonFieldSchema = getJsonFieldSchema(value, props);
@@ -73,7 +73,9 @@ export const JsonInputField = props => {
 
   return (
     <Container>
-      <CardLabel gutterBottom>{label}</CardLabel>
+      <CardLabel gutterBottom required={required} error={error}>
+        {label}
+      </CardLabel>
       {secondaryLabel && <Typography gutterBottom>{secondaryLabel}</Typography>}
       <CardVariant variant="outlined">
         <CardContent>
@@ -84,19 +86,21 @@ export const JsonInputField = props => {
               }
               return true;
             })
-            .map(
-              ({
+            .map(field => {
+              const {
                 label: fieldLabel,
                 fieldName,
                 secondaryLabel: fieldSecondaryLabel,
                 type = DEFAULT_FIELD_TYPE,
                 csv,
                 ...inputFieldProps
-              }) => (
-                <InputField
+              } = field;
+              return (
+                <EditorInputField
                   id={`inputField-${labelToId(fieldName)}`}
                   key={fieldName}
                   label={fieldLabel}
+                  source={fieldName}
                   secondaryLabel={fieldSecondaryLabel}
                   value={jsonFieldValues[fieldName]}
                   inputKey={fieldName}
@@ -104,9 +108,10 @@ export const JsonInputField = props => {
                   disabled={disabled}
                   type={type}
                   {...inputFieldProps}
+                  editKey={fieldName}
                 />
-              ),
-            )}
+              );
+            })}
         </CardContent>
       </CardVariant>
     </Container>
@@ -122,6 +127,8 @@ JsonInputField.propTypes = {
   secondaryLabel: PropTypes.string,
   variant: PropTypes.string,
   recordData: PropTypes.object,
+  required: PropTypes.bool,
+  error: PropTypes.bool,
 };
 
 JsonInputField.defaultProps = {
@@ -130,4 +137,6 @@ JsonInputField.defaultProps = {
   secondaryLabel: null,
   variant: null,
   recordData: {},
+  required: false,
+  error: false,
 };
diff --git a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
index 764ba2a5f1..a35b037847 100644
--- a/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
+++ b/packages/admin-panel/src/widgets/InputField/registerInputFields.jsx
@@ -46,10 +46,6 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const StyledFileInputWrapper = styled.div`
-  margin-bottom: 1.2rem;
-`;
-
 // Handle styling of the checkbox for just the admin-panel so as not to overwrite styles of the checkbox used elsewhere
 export const StyledCheckboxWrapper = styled.div`
   .MuiFormControlLabel-label {
@@ -77,10 +73,11 @@ export const registerInputFields = () => {
       placeholder={props.value}
       initialValue={props.value}
       label={props.label}
-      helperText={props.secondaryLabel}
       endpoint={props.optionsEndpoint}
       optionLabelKey={props.optionLabelKey}
       optionValueKey={props.optionValueKey}
+      optionFields={props.optionFields}
+      renderOption={props.renderOption}
       reduxId={props.inputKey}
       onChange={inputValue => props.onChange(props.inputKey, inputValue)}
       canCreateNewOptions={props.canCreateNewOptions}
@@ -92,6 +89,7 @@ export const registerInputFields = () => {
       tooltip={props.labelTooltip}
       distinct={props.distinct}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('checkboxList', props => (
@@ -111,13 +109,14 @@ export const registerInputFields = () => {
       pageSize={props.pageSize}
       tooltip={props.labelTooltip}
       distinct={props.distinct}
+      required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('json', props => (
     <JsonInputField
       id={props.id}
       label={props.label}
-      helperText={props.secondaryLabel}
       value={props.value}
       recordData={props.recordData}
       onChange={inputValue => props.onChange(props.inputKey, inputValue)}
@@ -125,6 +124,7 @@ export const registerInputFields = () => {
       getJsonFieldSchema={props.getJsonFieldSchema}
       variant={props.variant}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('enum', props => (
@@ -132,13 +132,13 @@ export const registerInputFields = () => {
       id={props.id}
       label={props.label}
       placeholder={props.placeholder}
-      helperText={props.secondaryLabel}
       value={props.value || ''}
       options={props.options}
       onChange={event => props.onChange(props.inputKey, event.target.value)}
       disabled={props.disabled}
       tooltip={props.labelTooltip}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('jsonEditor', props => (
@@ -147,8 +147,9 @@ export const registerInputFields = () => {
       inputKey={props.inputKey}
       value={props.value}
       onChange={props.onChange}
-      helperText={props.secondaryLabel}
       required={props.required}
+      error={props.error}
+      tooltip={props.labelTooltip}
     />
   ));
   registerInputField('jsonArray', props => (
@@ -157,7 +158,6 @@ export const registerInputFields = () => {
       inputKey={props.inputKey}
       value={props.value}
       onChange={props.onChange}
-      helperText={props.secondaryLabel}
       stringify={false}
       required={props.required}
     />
@@ -181,28 +181,27 @@ export const registerInputFields = () => {
       ]}
       value={props.value}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       tooltip={props.labelTooltip}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('date', props => (
     <DatePicker
       id={props.id}
       label={props.label}
-      helperText={props.secondaryLabel}
       value={props.moment(props.value).isValid() ? moment(props.value) : null}
       onChange={date => props.onChange(props.inputKey, date.toISOString())}
       disabled={props.disabled}
       tooltip={props.labelTooltip}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('datetime-local', props => (
     <DateTimePicker
       id={props.id}
       label={props.label}
-      helperText={props.secondaryLabel}
       format="yyyy-MM-dd HH:mm"
       value={
         props.value && moment(props.value).isValid
@@ -217,13 +216,13 @@ export const registerInputFields = () => {
       disabled={props.disabled}
       tooltip={props.labelTooltip}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('datetime-utc', props => (
     <DateTimePicker
       id={props.id}
       label={props.label}
-      helperText={props.secondaryLabel}
       format="yyyy-MM-dd HH:mm"
       value={
         props.value && moment(props.value).isValid
@@ -237,6 +236,7 @@ export const registerInputFields = () => {
       }}
       disabled={props.disabled}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('link', props => {
@@ -263,7 +263,6 @@ export const registerInputFields = () => {
       value={props.value || ''}
       onChange={event => props.onChange(props.inputKey, event.target.value)}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       multiline
       type="textarea"
       rows="4"
@@ -275,6 +274,7 @@ export const registerInputFields = () => {
         maxLength: props.maxLength,
         required: props.required,
       }}
+      error={props.error}
     />
   ));
   registerInputField('text', props => (
@@ -284,7 +284,6 @@ export const registerInputFields = () => {
       value={props.value === undefined || props.value === null ? '' : props.value} // we still want to show 0 value
       onChange={event => props.onChange(props.inputKey, event.target.value)}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       type={props.type}
       tooltip={props.labelTooltip}
       placeholder={props.placeholder}
@@ -300,6 +299,7 @@ export const registerInputFields = () => {
         maxLength: props.maxLength,
       }}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('password', props => (
@@ -309,30 +309,30 @@ export const registerInputFields = () => {
       value={props.value === undefined || props.value === null ? '' : props.value} // we still want to show 0 value
       onChange={event => props.onChange(props.inputKey, event.target.value)}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       type="password"
       tooltip={props.labelTooltip}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('image', props => (
-    <StyledFileInputWrapper>
-      <ImageUploadField
-        name={props.name}
-        imageSrc={props.value}
-        onDelete={() => props.onChange(props.inputKey, null)}
-        onChange={image => props.onChange(props.inputKey, image)}
-        label={props.label}
-        buttonLabel={props.buttonLabel}
-        avatarVariant={props.avatarVariant}
-        maxWidth={props.maxWidth}
-        maxHeight={props.maxHeight}
-        minWidth={props.minWidth}
-        minHeight={props.minHeight}
-        secondaryLabel={props.secondaryLabel}
-        tooltip={props.labelTooltip}
-      />
-    </StyledFileInputWrapper>
+    <ImageUploadField
+      name={props.name}
+      imageSrc={props.value}
+      onDelete={() => props.onChange(props.inputKey, null)}
+      onChange={image => props.onChange(props.inputKey, image)}
+      label={props.label}
+      buttonLabel={props.buttonLabel}
+      avatarVariant={props.avatarVariant}
+      maxWidth={props.maxWidth}
+      maxHeight={props.maxHeight}
+      minWidth={props.minWidth}
+      minHeight={props.minHeight}
+      secondaryLabel={props.secondaryLabel}
+      tooltip={props.labelTooltip}
+      required={props.required}
+      error={props.error}
+    />
   ));
   registerInputField('hexcode', props => (
     <HexcodeField
@@ -341,9 +341,10 @@ export const registerInputFields = () => {
       value={props.value}
       onChange={value => props.onChange(props.inputKey, value)}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       tooltip={props.labelTooltip}
       placeholder={props.placeholder}
+      required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('checkbox', props => (
@@ -355,7 +356,6 @@ export const registerInputFields = () => {
         value={props.optionValue}
         onChange={e => props.onChange(props.inputKey, e.target.checked ? props.optionValue : null)}
         disabled={props.disabled}
-        helperText={props.secondaryLabel}
         tooltip={props.labelTooltip}
         required={props.required}
         icon={<CheckboxUncheckedIcon />}
@@ -371,17 +371,16 @@ export const registerInputFields = () => {
       options={props.options}
       value={props.value}
       disabled={props.disabled}
-      helperText={props.secondaryLabel}
       tooltip={props.labelTooltip}
       name={props.name}
       required={props.required}
+      error={props.error}
     />
   ));
   registerInputField('file', props => (
     <FileUploadField
       name={props.name}
       label={props.label}
-      helperText={props.secondaryLabel}
       required={props.required}
       onChange={({ fileName, file }) => props.onSetFormFile(props.inputKey, { fileName, file })}
     />
diff --git a/packages/admin-panel/src/widgets/Modal/Modal.jsx b/packages/admin-panel/src/widgets/Modal/Modal.jsx
index 59b48c8982..9a0eed83e2 100644
--- a/packages/admin-panel/src/widgets/Modal/Modal.jsx
+++ b/packages/admin-panel/src/widgets/Modal/Modal.jsx
@@ -22,14 +22,22 @@ export const Modal = ({
   onClose,
   title,
   isLoading,
-  errorMessage,
+  error,
   buttons,
   ...muiDialogProps
 }) => {
+  const getModalTitle = () => {
+    if (error) {
+      return title || 'Error';
+    }
+    return title;
+  };
+
+  const modalTitle = getModalTitle();
   return (
     <Dialog onClose={onClose} open={isOpen} fullWidth {...muiDialogProps}>
-      <ModalHeader onClose={onClose} title={title} />
-      <ModalContentProvider errorMessage={errorMessage} isLoading={isLoading}>
+      <ModalHeader onClose={onClose} title={modalTitle} />
+      <ModalContentProvider error={error} isLoading={isLoading}>
         {children}
       </ModalContentProvider>
       {buttons?.length > 0 && (
@@ -72,7 +80,7 @@ Modal.propTypes = {
   onClose: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
-  errorMessage: PropTypes.string,
+  error: PropTypes.object,
   buttons: PropTypes.arrayOf(
     PropTypes.shape({
       onClick: PropTypes.func.isRequired,
@@ -90,6 +98,6 @@ Modal.propTypes = {
 
 Modal.defaultProps = {
   buttons: [],
-  errorMessage: '',
+  error: null,
   isLoading: false,
 };
diff --git a/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx b/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
index 9539a2677d..f4c2e6fe6e 100644
--- a/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
+++ b/packages/admin-panel/src/widgets/Modal/ModalContentProvider.jsx
@@ -5,10 +5,12 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { SmallAlert } from '@tupaia/ui-components';
+import { SmallAlert, TooltipIconButton } from '@tupaia/ui-components';
 import Typography from '@material-ui/core/Typography';
+import HelpOutline from '@material-ui/icons/HelpOutline';
 import PropTypes from 'prop-types';
 import { DialogContent } from '@material-ui/core';
+import * as COLORS from '../../theme/colors';
 
 const Content = styled(DialogContent)`
   text-align: left;
@@ -23,34 +25,106 @@ const Content = styled(DialogContent)`
 `;
 
 const Heading = styled(Typography)`
-  margin-bottom: 18px;
+  margin-bottom: 1.1rem;
+  font-size: ${props => props.theme.typography.body1.fontSize};
 `;
 
-export const ModalContentProvider = ({ isLoading, errorMessage, children }) => {
+const Alert = styled(SmallAlert).attrs({
+  severity: 'error',
+  variant: 'standard',
+})`
+  width: 100%;
+`;
+
+const AlertWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  & + & {
+    margin-block-start: 0.5rem;
+  }
+
+  .MuiSvgIcon-root {
+    color: ${COLORS.LIGHT_RED};
+    margin-block-end: 0.3rem;
+  }
+  .tooltip-icon:hover {
+    svg {
+      fill: ${COLORS.RED};
+    }
+  }
+`;
+
+const ErrorsWrapper = styled.div`
+  max-width: 25rem;
+  margin: 0 auto;
+`;
+
+const Error = ({ message, details }) => {
+  return (
+    <AlertWrapper>
+      {details && <TooltipIconButton tooltip={details} Icon={HelpOutline} />}
+      <Alert>{message}</Alert>
+    </AlertWrapper>
+  );
+};
+
+Error.propTypes = {
+  message: PropTypes.string.isRequired,
+  details: PropTypes.string,
+};
+
+Error.defaultProps = {
+  details: null,
+};
+
+export const ModalContentProvider = ({ isLoading, error, children }) => {
+  const getHeading = () => {
+    if (!error) return null;
+    const { extraFields } = error;
+    if (
+      !extraFields?.errorDetails?.errors?.length ||
+      extraFields?.errorDetails?.errors?.length === 1
+    )
+      return 'The below error has occurred:';
+    return 'The below errors have occurred:';
+  };
+
+  const heading = getHeading();
+
+  const getErrorsToDisplay = () => {
+    if (!error) return [];
+    const { message, extraFields } = error;
+    if (!extraFields?.errorDetails?.errors?.length) return [{ message }];
+    return extraFields.errorDetails.errors;
+  };
+
+  const errors = getErrorsToDisplay();
   return (
     <Content>
       {isLoading && 'Please be patient, this can take some time...'}
-      {!!errorMessage && (
-        <>
-          <Heading variant="h6">An error has occurred.</Heading>
-          <SmallAlert severity="error" variant="standard">
-            {errorMessage}
-          </SmallAlert>
-        </>
+      {error?.message && (
+        <ErrorsWrapper>
+          <Heading>{heading}</Heading>
+          {errors.map(({ message, extraFields }) => (
+            <Error key={message} message={message} details={extraFields?.details} />
+          ))}
+        </ErrorsWrapper>
       )}
       {/* If loading or error message, don't show children */}
-      {!isLoading && !errorMessage && children}
+      {!isLoading && !error && children}
     </Content>
   );
 };
 
 ModalContentProvider.propTypes = {
   isLoading: PropTypes.bool.isRequired,
-  errorMessage: PropTypes.string,
+  error: PropTypes.object,
   children: PropTypes.node,
 };
 
 ModalContentProvider.defaultProps = {
-  errorMessage: null,
+  error: null,
   children: null,
 };
diff --git a/packages/admin-panel/src/widgets/index.js b/packages/admin-panel/src/widgets/index.js
index 9a011f25cc..b9f573ca30 100644
--- a/packages/admin-panel/src/widgets/index.js
+++ b/packages/admin-panel/src/widgets/index.js
@@ -18,3 +18,4 @@ export {
 export { JsonEditor, JsonTreeEditor } from './JsonEditor';
 export { SecondaryNavbar } from '../layout/navigation/SecondaryNavbar';
 export { ConfirmDeleteModal } from './ConfirmDeleteModal';
+export { EntityOptionLabel } from './EntityOptionLabel';
diff --git a/packages/central-server/src/apiV2/GETHandler/helpers.js b/packages/central-server/src/apiV2/GETHandler/helpers.js
index 09e9000e50..cd8b38b9ac 100644
--- a/packages/central-server/src/apiV2/GETHandler/helpers.js
+++ b/packages/central-server/src/apiV2/GETHandler/helpers.js
@@ -97,7 +97,7 @@ const constructJoinCondition = (recordType, baseRecordType, customJoinConditions
     joinType,
   };
   if (join?.through) {
-    if ('nearTableKey' in join !== true || 'farTableKey' in join !== true) {
+    if (!('nearTableKey' in join) || !('farTableKey' in join)) {
       throw new ValidationError(`Incorrect format for customJoinConditions: ${recordType}`);
     }
     const nearTable = join.nearTableKey.split('.');
diff --git a/packages/central-server/src/apiV2/answers/assertAnswerPermissions.js b/packages/central-server/src/apiV2/answers/assertAnswerPermissions.js
index 20919c23c7..5b3d1420e8 100644
--- a/packages/central-server/src/apiV2/answers/assertAnswerPermissions.js
+++ b/packages/central-server/src/apiV2/answers/assertAnswerPermissions.js
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
  */
 
-import { QUERY_CONJUNCTIONS, RECORDS } from '@tupaia/database';
+import { JOIN_TYPES, QUERY_CONJUNCTIONS, RECORDS } from '@tupaia/database';
 import { hasBESAdminAccess } from '../../permissions';
 import { fetchCountryCodesByPermissionGroupId, mergeMultiJoin } from '../utilities';
 import { assertSurveyResponsePermissions } from '../surveyResponses';
@@ -102,6 +102,11 @@ export const createAnswerViaSurveyResponseDBFilter = async (
         joinWith: RECORDS.SURVEY_RESPONSE,
         joinCondition: [`${RECORDS.SURVEY_RESPONSE}.id`, `${RECORDS.ANSWER}.survey_response_id`],
       },
+      {
+        joinWith: RECORDS.ENTITY,
+        joinCondition: [`${RECORDS.ENTITY}.id`, `${RECORDS.ANSWER}.text`],
+        joinType: JOIN_TYPES.LEFT,
+      },
       {
         joinWith: RECORDS.SURVEY_SCREEN,
         joinCondition: [
diff --git a/packages/central-server/src/apiV2/export/download/DownloadHandler.js b/packages/central-server/src/apiV2/export/DownloadHandler.js
similarity index 81%
rename from packages/central-server/src/apiV2/export/download/DownloadHandler.js
rename to packages/central-server/src/apiV2/export/DownloadHandler.js
index a979569fc7..8da3f0e86e 100644
--- a/packages/central-server/src/apiV2/export/download/DownloadHandler.js
+++ b/packages/central-server/src/apiV2/export/DownloadHandler.js
@@ -4,9 +4,9 @@
  */
 import fs from 'fs';
 import { respondWithDownload, ValidationError } from '@tupaia/utils';
-import { RouteHandler } from '../../RouteHandler';
-import { assertAdminPanelAccess } from '../../../permissions';
-import { getExportPathForUser } from '../getExportPathForUser';
+import { getExportPathForUser } from './getExportPathForUser';
+import { RouteHandler } from '../RouteHandler';
+import { assertAdminPanelAccess } from '../../permissions';
 
 export class DownloadHandler extends RouteHandler {
   async assertUserHasAccess() {
diff --git a/packages/central-server/src/apiV2/export/download/createDownloadLink.js b/packages/central-server/src/apiV2/export/download/createDownloadLink.js
deleted file mode 100644
index f9f9c99b63..0000000000
--- a/packages/central-server/src/apiV2/export/download/createDownloadLink.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
- */
-
-import path from 'path';
-
-export const createDownloadLink = filePath => {
-  const fileName = path.basename(filePath);
-  return `${process.env.ADMIN_PANEL_SERVER_URL}/v1/export/download/${encodeURIComponent(fileName)}`;
-};
diff --git a/packages/central-server/src/apiV2/export/download/index.js b/packages/central-server/src/apiV2/export/download/index.js
deleted file mode 100644
index 71e4bb35a8..0000000000
--- a/packages/central-server/src/apiV2/export/download/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { createDownloadLink } from './createDownloadLink';
-export { DownloadHandler } from './DownloadHandler';
diff --git a/packages/central-server/src/apiV2/export/index.js b/packages/central-server/src/apiV2/export/index.js
index 646fcb9601..9d1177711f 100644
--- a/packages/central-server/src/apiV2/export/index.js
+++ b/packages/central-server/src/apiV2/export/index.js
@@ -8,7 +8,7 @@ import { emailAfterTimeout } from '@tupaia/server-boilerplate';
 import { constructExportEmail } from '@tupaia/server-utils';
 import { catchAsyncErrors } from '../middleware';
 import { useRouteHandler } from '../RouteHandler';
-import { DownloadHandler } from './download';
+import { DownloadHandler } from './DownloadHandler';
 import { exportOptionSet } from './exportOptionSet';
 import { exportSurveyResponses } from './exportSurveyResponses';
 import { exportSurveys } from './exportSurveys';
diff --git a/packages/central-server/src/apiV2/import/importSurveys/ConfigImporter/ConfigImporter.js b/packages/central-server/src/apiV2/import/importSurveys/ConfigImporter/ConfigImporter.js
index 7573e2d408..44fb3a209e 100644
--- a/packages/central-server/src/apiV2/import/importSurveys/ConfigImporter/ConfigImporter.js
+++ b/packages/central-server/src/apiV2/import/importSurveys/ConfigImporter/ConfigImporter.js
@@ -12,14 +12,8 @@ import { processConditionConfig } from './processConditionConfig';
 import { processAutocompleteConfig } from './processAutocompleteConfig';
 import { processEntityConfig } from './processEntityConfig';
 
-const {
-  CODE_GENERATOR,
-  ARITHMETIC,
-  CONDITION,
-  AUTOCOMPLETE,
-  ENTITY,
-  PRIMARY_ENTITY,
-} = ANSWER_TYPES;
+const { CODE_GENERATOR, ARITHMETIC, CONDITION, AUTOCOMPLETE, ENTITY, PRIMARY_ENTITY } =
+  ANSWER_TYPES;
 
 export class ConfigImporter {
   parse = convertCellToJson;
@@ -38,10 +32,11 @@ export class ConfigImporter {
    *
    * @param {number} rowIndex
    * @param {string} componentId
+   * @param {function} constructError
    * @throws {Error}
    */
-  async add(rowIndex, componentId) {
-    await this.validator.validate(rowIndex);
+  async add(rowIndex, componentId, constructError) {
+    await this.validator.validate(rowIndex, constructError);
     this.rowIndexToComponentId[rowIndex] = componentId;
   }
 
diff --git a/packages/central-server/src/apiV2/import/importSurveys/Validator/ConfigValidator/ConfigValidator.js b/packages/central-server/src/apiV2/import/importSurveys/Validator/ConfigValidator/ConfigValidator.js
index b4df26ec72..4f18cfcb8d 100644
--- a/packages/central-server/src/apiV2/import/importSurveys/Validator/ConfigValidator/ConfigValidator.js
+++ b/packages/central-server/src/apiV2/import/importSurveys/Validator/ConfigValidator/ConfigValidator.js
@@ -19,11 +19,11 @@ export class ConfigValidator extends BaseValidator {
     this.constructorArgs = constructorArgs;
   }
 
-  async validate(rowIndex) {
+  async validate(rowIndex, constructError) {
     const questionType = this.getQuestion(rowIndex).type;
     const Validator = this.getValidator(questionType);
 
-    return new Validator(...this.constructorArgs).validate(rowIndex);
+    return new Validator(...this.constructorArgs).validate(rowIndex, constructError);
   }
 
   getValidator = questionType => {
diff --git a/packages/central-server/src/apiV2/import/importSurveys/Validator/JsonFieldValidator.js b/packages/central-server/src/apiV2/import/importSurveys/Validator/JsonFieldValidator.js
index a1dc706bca..aed4d19165 100644
--- a/packages/central-server/src/apiV2/import/importSurveys/Validator/JsonFieldValidator.js
+++ b/packages/central-server/src/apiV2/import/importSurveys/Validator/JsonFieldValidator.js
@@ -7,13 +7,17 @@ export class JsonFieldValidator extends BaseValidator {
 
   /**
    * @param {number} rowIndex
+   * @param {function} constructError
    */
-  async validate(rowIndex) {
+  async validate(rowIndex, constructError) {
     const config = this.getConfig(rowIndex);
 
     const fieldValidators = this.getFieldValidators(rowIndex);
     const otherFieldValidators = this.getOtherFieldValidators();
-    await new ObjectValidator(fieldValidators, otherFieldValidators).validate(config);
+    await new ObjectValidator(fieldValidators, otherFieldValidators).validate(
+      config,
+      constructError,
+    );
 
     return true;
   }
diff --git a/packages/central-server/src/apiV2/import/importSurveys/importSurveyQuestions.js b/packages/central-server/src/apiV2/import/importSurveys/importSurveyQuestions.js
index 9c70756c1c..2226d31ef3 100644
--- a/packages/central-server/src/apiV2/import/importSurveys/importSurveyQuestions.js
+++ b/packages/central-server/src/apiV2/import/importSurveys/importSurveyQuestions.js
@@ -5,7 +5,13 @@
 
 import xlsx from 'xlsx';
 
-import { DatabaseError, UploadError, ImportValidationError, ObjectValidator } from '@tupaia/utils';
+import {
+  DatabaseError,
+  UploadError,
+  ImportValidationError,
+  ObjectValidator,
+  MultiValidationError,
+} from '@tupaia/utils';
 import { deleteScreensForSurvey, deleteOrphanQuestions } from '../../../dataAccessors';
 import { ANSWER_TYPES, NON_DATA_ELEMENT_ANSWER_TYPES } from '../../../database/models/Answer';
 import { splitStringOnComma, splitOnNewLinesOrCommas } from '../../utilities';
@@ -103,169 +109,183 @@ export async function importSurveysQuestions({ models, file, survey, dataGroup,
   let currentScreen;
   let currentSurveyScreenComponent;
   let hasSeenDateOfDataQuestion = false;
+  const errors = []; // An array to hold all errors, allowing multiple errors to be thrown at once
   const questionCodes = []; // An array to hold all question codes, allowing duplicate checking
   const configImporter = new ConfigImporter(models, rows);
   const objectValidator = new ObjectValidator(constructQuestionValidators(models));
   let hasPrimaryEntityQuestion = false;
   for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-    const row = rows[rowIndex];
-    const constructImportValidationError = (message, field) =>
-      new ImportValidationError(message, excelRowNumber, field);
+    // Validate rows
+    try {
+      const row = rows[rowIndex];
 
-    if (row.type === SURVEY_METADATA) {
-      await validateSurveyMetadataRow(rows, rowIndex, constructImportValidationError);
-      await processSurveyMetadataRow(models, rows, rowIndex, survey.id);
-      continue;
-    }
+      const questionObject = row;
+      const excelRowNumber = rowIndex + 2; // +2 to make up for header and 0 index
 
-    const questionObject = row;
-    const excelRowNumber = rowIndex + 2; // +2 to make up for header and 0 index
+      const constructImportValidationError = (message, field, { details }) => {
+        return new ImportValidationError(message, excelRowNumber, field, undefined, details);
+      };
 
-    // Validate rows
-    await objectValidator.validate(questionObject, constructImportValidationError);
-    // Validate no duplicate codes
-    if (
-      questionObject.code &&
-      questionObject.code.length > 0 &&
-      questionCodes.includes(questionObject.code)
-    ) {
-      throw new ImportValidationError('Question code is not unique', excelRowNumber);
-    }
-    // Validate no second primary entity question
-    if (questionObject.type === ANSWER_TYPES.PRIMARY_ENTITY) {
-      if (hasPrimaryEntityQuestion) {
-        throw new ImportValidationError(
-          `Only one ${ANSWER_TYPES.PRIMARY_ENTITY} question allowed`,
-          excelRowNumber,
-        );
+      if (row.type === SURVEY_METADATA) {
+        await validateSurveyMetadataRow(rows, rowIndex, constructImportValidationError);
+        await processSurveyMetadataRow(models, rows, rowIndex, survey.id);
+        continue;
       }
-      hasPrimaryEntityQuestion = true;
-    }
-    questionCodes.push(questionObject.code);
-
-    // Validate max one date of data/submission date question
-    if (questionObject.type === 'DateOfData' || questionObject.type === 'SubmissionDate') {
-      if (hasSeenDateOfDataQuestion) {
-        // Previously had another submission date question
-        throw new ImportValidationError(
-          'Only one DateOfData/SubmissionDate question allowed',
-          excelRowNumber,
+
+      await objectValidator.validate(questionObject, constructImportValidationError);
+
+      // Validate no duplicate codes
+      if (
+        questionObject.code &&
+        questionObject.code.length > 0 &&
+        questionCodes.includes(questionObject.code)
+      ) {
+        throw new ImportValidationError('Question code is not unique', excelRowNumber);
+      }
+      // Validate no second primary entity question
+      if (questionObject.type === ANSWER_TYPES.PRIMARY_ENTITY) {
+        if (hasPrimaryEntityQuestion) {
+          throw new ImportValidationError(
+            `Only one ${ANSWER_TYPES.PRIMARY_ENTITY} question allowed`,
+            excelRowNumber,
+          );
+        }
+        hasPrimaryEntityQuestion = true;
+      }
+      questionCodes.push(questionObject.code);
+
+      // Validate max one date of data/submission date question
+      if (questionObject.type === 'DateOfData' || questionObject.type === 'SubmissionDate') {
+        if (hasSeenDateOfDataQuestion) {
+          // Previously had another submission date question
+          throw new ImportValidationError(
+            'Only one DateOfData/SubmissionDate question allowed',
+            excelRowNumber,
+          );
+        }
+        hasSeenDateOfDataQuestion = true;
+      }
+
+      // Extract question details from spreadsheet row
+      const {
+        code,
+        type,
+        name,
+        text,
+        questionLabel,
+        detail,
+        detailLabel,
+        options,
+        optionLabels,
+        optionColors,
+        newScreen,
+        visibilityCriteria,
+        validationCriteria,
+        optionSet,
+        hook,
+      } = questionObject;
+
+      let dataElement;
+      if (!NON_DATA_ELEMENT_ANSWER_TYPES.includes(type)) {
+        dataElement = await updateOrCreateDataElementInGroup(
+          models,
+          code,
+          dataGroup,
+          permissionGroup,
         );
       }
-      hasSeenDateOfDataQuestion = true;
-    }
 
-    // Extract question details from spreadsheet row
-    const {
-      code,
-      type,
-      name,
-      text,
-      questionLabel,
-      detail,
-      detailLabel,
-      options,
-      optionLabels,
-      optionColors,
-      newScreen,
-      visibilityCriteria,
-      validationCriteria,
-      optionSet,
-      hook,
-    } = questionObject;
-
-    let dataElement;
-    if (!NON_DATA_ELEMENT_ANSWER_TYPES.includes(type)) {
-      dataElement = await updateOrCreateDataElementInGroup(
-        models,
+      // Compose question based on details from spreadsheet
+      const questionToUpsert = {
         code,
-        dataGroup,
-        permissionGroup,
-      );
-    }
+        type,
+        name,
+        text,
+        detail,
+        hook,
+        options: processOptions(options, optionLabels, optionColors, type),
+        option_set_id: await processOptionSetName(models, optionSet, excelRowNumber, tabName),
+        data_element_id: dataElement && dataElement.id,
+      };
 
-    // Compose question based on details from spreadsheet
-    const questionToUpsert = {
-      code,
-      type,
-      name,
-      text,
-      detail,
-      hook,
-      options: processOptions(options, optionLabels, optionColors, type),
-      option_set_id: await processOptionSetName(models, optionSet, excelRowNumber, tabName),
-      data_element_id: dataElement && dataElement.id,
-    };
-
-    // Either create or update the question depending on if there exists a matching code
-    let question;
-    if (code) {
-      question = await models.question.updateOrCreate({ code }, questionToUpsert);
-    } else {
-      // No code in spreadsheet, can't match so just create a new question
-      question = await models.question.create(questionToUpsert);
-    }
+      // Either create or update the question depending on if there exists a matching code
+      let question;
+      if (code) {
+        question = await models.question.updateOrCreate({ code }, questionToUpsert);
+      } else {
+        // No code in spreadsheet, can't match so just create a new question
+        question = await models.question.create(questionToUpsert);
+      }
 
-    // Generate the screen and screen component
-    const shouldStartNewScreen = caseAndSpaceInsensitiveEquals(newScreen, 'yes');
-    if (!currentScreen || shouldStartNewScreen) {
-      // Spreadsheet indicates this question starts a new screen
-      // Create a new survey screen
-      currentScreen = await models.surveyScreen.create({
-        survey_id: survey.id,
-        screen_number: currentScreen ? currentScreen.screen_number + 1 : 1, // Next screen
-      });
-      // Clear existing survey screen component
-      currentSurveyScreenComponent = undefined;
-    }
+      // Generate the screen and screen component
+      const shouldStartNewScreen = caseAndSpaceInsensitiveEquals(newScreen, 'yes');
+      if (!currentScreen || shouldStartNewScreen) {
+        // Spreadsheet indicates this question starts a new screen
+        // Create a new survey screen
+        currentScreen = await models.surveyScreen.create({
+          survey_id: survey.id,
+          screen_number: currentScreen ? currentScreen.screen_number + 1 : 1, // Next screen
+        });
+        // Clear existing survey screen component
+        currentSurveyScreenComponent = undefined;
+      }
 
-    // Create a new survey screen component to display this question
-    const visibilityCriteriaObject = await convertCellToJson(
-      visibilityCriteria,
-      splitStringOnComma,
-    );
-    const processedVisibilityCriteria = {};
-    await Promise.all(
-      Object.entries(visibilityCriteriaObject).map(async ([questionCode, answers]) => {
-        if (questionCode === VIS_CRITERIA_CONJUNCTION) {
-          // This is the special _conjunction key, extract the 'and' or the 'or' from answers,
-          // i.e. { conjunction: ['and'] } -> { conjunction: 'and' }
-          const [conjunctionType] = answers;
-          processedVisibilityCriteria[VIS_CRITERIA_CONJUNCTION] = conjunctionType;
-        } else if (questionCode === 'hidden') {
-          processedVisibilityCriteria.hidden = answers[0] === 'true';
-        } else {
-          const { id: questionId } = await models.question.findOne({
-            code: questionCode,
-          });
-          processedVisibilityCriteria[questionId] = answers;
-        }
-      }),
-    );
+      // Create a new survey screen component to display this question
+      const visibilityCriteriaObject = await convertCellToJson(
+        visibilityCriteria,
+        splitStringOnComma,
+      );
+      const processedVisibilityCriteria = {};
+      await Promise.all(
+        Object.entries(visibilityCriteriaObject).map(async ([questionCode, answers]) => {
+          if (questionCode === VIS_CRITERIA_CONJUNCTION) {
+            // This is the special _conjunction key, extract the 'and' or the 'or' from answers,
+            // i.e. { conjunction: ['and'] } -> { conjunction: 'and' }
+            const [conjunctionType] = answers;
+            processedVisibilityCriteria[VIS_CRITERIA_CONJUNCTION] = conjunctionType;
+          } else if (questionCode === 'hidden') {
+            processedVisibilityCriteria.hidden = answers[0] === 'true';
+          } else {
+            const { id: questionId } = await models.question.findOne({
+              code: questionCode,
+            });
+            processedVisibilityCriteria[questionId] = answers;
+          }
+        }),
+      );
 
-    currentSurveyScreenComponent = await models.surveyScreenComponent.create({
-      screen_id: currentScreen.id,
-      question_id: question.id,
-      component_number: currentSurveyScreenComponent
-        ? currentSurveyScreenComponent.component_number + 1
-        : 1,
-      visibility_criteria: JSON.stringify(processedVisibilityCriteria),
-      validation_criteria: JSON.stringify(
-        convertCellToJson(validationCriteria, processValidationCriteriaValue),
-      ),
-      question_label: questionLabel,
-      detail_label: detailLabel,
-    });
+      currentSurveyScreenComponent = await models.surveyScreenComponent.create({
+        screen_id: currentScreen.id,
+        question_id: question.id,
+        component_number: currentSurveyScreenComponent
+          ? currentSurveyScreenComponent.component_number + 1
+          : 1,
+        visibility_criteria: JSON.stringify(processedVisibilityCriteria),
+        validation_criteria: JSON.stringify(
+          convertCellToJson(validationCriteria, processValidationCriteriaValue),
+        ),
+        question_label: questionLabel,
+        detail_label: detailLabel,
+      });
 
-    try {
       const componentId = currentSurveyScreenComponent.id;
-      await configImporter.add(rowIndex, componentId);
-    } catch (error) {
-      const validationError = constructImportValidationError(error.message, 'config');
-      throw validationError;
+      await configImporter.add(rowIndex, componentId, constructImportValidationError);
+    } catch (e) {
+      errors.push(e);
+      continue;
     }
   }
 
+  if (errors.length > 0) {
+    throw new MultiValidationError(
+      'Errors occurred while importing questions',
+      errors.map(({ message, extraFields }) => ({
+        message,
+        extraFields,
+      })),
+    );
+  }
+
   await configImporter.import();
 
   // Clear  any orphaned questions (i.e. questions no longer included in a survey)
diff --git a/packages/central-server/src/apiV2/projects/CreateProject.js b/packages/central-server/src/apiV2/projects/CreateProject.js
index f3949c8325..ffb621a99b 100644
--- a/packages/central-server/src/apiV2/projects/CreateProject.js
+++ b/packages/central-server/src/apiV2/projects/CreateProject.js
@@ -33,7 +33,7 @@ export class CreateProject extends BESAdminCreateHandler {
       code: rawProjectCode,
       name,
       description,
-      sort_order: sortOrder,
+      sort_order: sortOrder = null,
       permission_groups: permissionGroups,
       countries,
       entityTypes,
@@ -74,7 +74,7 @@ export class CreateProject extends BESAdminCreateHandler {
       const newProject = await transactingModels.project.create({
         code: projectCode,
         description,
-        sort_order: sortOrder,
+        sort_order: sortOrder === '' ? null : sortOrder,
         image_url: '',
         logo_url: '',
         permission_groups: [projectPermissionGroup.name, ...permissionGroups],
diff --git a/packages/central-server/src/apiV2/projects/EditProject.js b/packages/central-server/src/apiV2/projects/EditProject.js
index 10e39a2319..8217399478 100644
--- a/packages/central-server/src/apiV2/projects/EditProject.js
+++ b/packages/central-server/src/apiV2/projects/EditProject.js
@@ -47,6 +47,7 @@ export class EditProject extends EditHandler {
       image_url: encodedBackgroundImage,
       logo_url: encodedLogoImage,
       code: updatedCode,
+      sort_order: updatedSortOrder,
     } = this.updatedFields;
     const updatedFields = { ...this.updatedFields };
 
@@ -76,6 +77,10 @@ export class EditProject extends EditHandler {
         existingLogoImage,
       );
     }
+    // If the sort_order is an empty string, we want to set the sort_order to null, as the sort_order field is an integer and an empty string will cause an error
+    if (updatedSortOrder === '') {
+      updatedFields.sort_order = null;
+    }
     await this.models.project.updateById(this.recordId, updatedFields);
   }
 }
diff --git a/packages/central-server/src/tests/apiV2/projects/EditProject.test.js b/packages/central-server/src/tests/apiV2/projects/EditProject.test.js
index d5f5d97076..e46d1bda03 100644
--- a/packages/central-server/src/tests/apiV2/projects/EditProject.test.js
+++ b/packages/central-server/src/tests/apiV2/projects/EditProject.test.js
@@ -35,6 +35,7 @@ describe('Editing a project', async () => {
     logo_url: 'www.image.com',
     description: 'old description',
     code: 'test_existing_project',
+    sort_order: 1,
   };
   const ENCODED_IMAGE =
     'data:image/gif;base64,R0lGODdh4AHwANUAAKqqqgAAAO7u7ru7u+Xl5czMzN3d3cPDw7KystTU1H9/fxcXF1VVVXJych0dHRkZGS4uLo+Pjzc3N5SUlMHBwSwsLGpqahUVFSoqKklJScjIyBgYGLm5uTk5OW9vbzAwMKurqxYWFqWlpaOjoxwcHEJCQp+fn3d3d0ZGRhoaGpubm4WFhV1dXVlZWT8/P4qKimFhYTMzM25ubtDQ0ExMTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAA4AHwAAAG/kCAcEgsGo/IpHLJbDqf0Kh0Sq1ar9isdsvter/gsHhMLpvP6LR6zW673/C4fE6v2+/4vH7P7/v/gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKly5cwY8qcSbOmzZs4c+rcybOn/s+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsyYmIIAQyxcCIBBAREFky9YmKIAQ4AADJA8HoI5gObGlhZABmAhgwYBFCBsBjBhAQgBIAJYjoJCxowZNGYXUS2k9u3cu1FHYtDAgZANHBAAQEBhg5ASDQYAGHAChZQEBRAgSGC9CHPnALBr5+5dOSQFDwqs7uBhiIcOQlJIF4IghREXySngQhITkFAEfPLlt990/rn3CAQRALBadQxMwMAHFAgRwIIq/qxGRAIQTEAbBAkk4UFoREAooYYceujgIgxIcMCK04HwQAgBiLCfiwi4OIQIFUxQQYZJQEdEjDOuxqOPLx4ywQNErqbAAhoQUNtsAYg4BJPbvRDACwsawQADCz4ZpYZaatjkIhV85uZntkl3AAjlObDCEBOgZwQMLWSQBHwcENHmm5/Ziaeeax5igACMChAAowGMMMQIBgLAAAtDtIDigTEkYEFyRBgX5qKNPirApZlumugiqwkp4gQlgCCECboBAKgRtWVYQIhGVBCBdkmsRqtlt67KyGoHiIBjCCYAO0BtAcRpRAkR7CdCCUV49iYSqz2rmrTGLiLAEAMQIAABwMAKcYC56B6RwIxCDFAiEaQ2isS46rKbbrj89uvvvwAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRhnrPHGHHfs8ccghyzyyCSXbPLJKKes8sost+zyyzDHLPPMNNds880456zzzjz37PPPQAct9NBEF2300UgnrfTSTDft9NNQRy311FRXbfXVWGet9dZcd+3112CHLfbYZJdt9tlop6322my37fbbcMct99x012333XjnrffefPft98pBAAA7';
@@ -77,6 +78,23 @@ describe('Editing a project', async () => {
       expect(result[0].description).to.equal('the updated description');
     });
 
+    it('updates sort_order to be null if an empty string is passed in', async () => {
+      await app.grantAccess(BES_ADMIN_POLICY);
+
+      await app.put(`projects/${TEST_PROJECT_INPUT.id}`, {
+        body: {
+          ...TEST_PROJECT_INPUT,
+          sort_order: '',
+        },
+      });
+
+      const result = await models.project.find({
+        id: TEST_PROJECT_INPUT.id,
+      });
+      expect(result.length).to.equal(1);
+      expect(result[0].sort_order).to.equal(null);
+    });
+
     it('uploads the value of image_url if it has changed', async () => {
       await app.grantAccess(BES_ADMIN_POLICY);
 
diff --git a/packages/data-table-server/src/dataTableService/services/SurveyResponseDataTableService.ts b/packages/data-table-server/src/dataTableService/services/SurveyResponseDataTableService.ts
index 7e3ef23fd6..0e4dace195 100644
--- a/packages/data-table-server/src/dataTableService/services/SurveyResponseDataTableService.ts
+++ b/packages/data-table-server/src/dataTableService/services/SurveyResponseDataTableService.ts
@@ -99,16 +99,20 @@ export class SurveyResponseDataTableService extends DataTableService<
     }, {} as Record<string, any>);
 
     if (params.startDate && !params.endDate) {
+      // set the start date to the beginning of the day to include all responses on that day
+      const startDate = new Date(params.startDate).setHours(0, 0, 0, 0);
       filter['survey_response.data_time'] = {
         comparator: '>=',
-        comparisonValue: new Date(params.startDate),
+        comparisonValue: new Date(startDate),
       };
     }
 
     if (!params.startDate && params.endDate) {
+      // set the end date to the end of the day so that it includes all responses on that day - this is because the endDate comes through as just the date, not the time, and so gets automatically set to midnight at the start of the day, so won't include responses from the full day if the date selected is in the period where UTC is behind the local time
+      const endDate = new Date(params.endDate).setHours(23, 59, 59, 999);
       filter['survey_response.data_time'] = {
         comparator: '<=',
-        comparisonValue: new Date(params.endDate),
+        comparisonValue: new Date(endDate),
       };
     }
 
diff --git a/packages/datatrak-web-server/src/__tests__/processSurveyResponse.test.ts b/packages/datatrak-web-server/src/__tests__/processSurveyResponse.test.ts
index f9b61c3acb..0ef34a55b8 100644
--- a/packages/datatrak-web-server/src/__tests__/processSurveyResponse.test.ts
+++ b/packages/datatrak-web-server/src/__tests__/processSurveyResponse.test.ts
@@ -450,13 +450,13 @@ describe('processSurveyResponse', () => {
     });
   });
 
-  it('should not add to recent_entities when type is entity question is not filled in', async () => {
+  it('should not add to recent_entities when type is entity question and is not filled in', async () => {
     const result = await processSurveyResponse(mockModels, {
       ...responseData,
       questions: [
         {
           questionId: 'question1',
-          type: QuestionType.PrimaryEntity,
+          type: QuestionType.Entity,
           componentNumber: 1,
           text: 'question1',
           screenId: 'screen1',
@@ -469,6 +469,27 @@ describe('processSurveyResponse', () => {
     expect(result.recent_entities).toEqual([]);
   });
 
+  it('throw an error when type is primary entity question and is not filled in', async () => {
+    try {
+      const result = await processSurveyResponse(mockModels, {
+        ...responseData,
+        questions: [
+          {
+            questionId: 'question1',
+            type: QuestionType.PrimaryEntity,
+            componentNumber: 1,
+            text: 'question1',
+            screenId: 'screen1',
+            config: {},
+          },
+        ],
+        answers: {},
+      });
+    } catch (error: any) {
+      expect(error.message).toBe('Primary Entity Question is a required field');
+    }
+  });
+
   it('should use the country id for new entities if parent id is not filled in', async () => {
     const result = await processSurveyResponse(mockModels, {
       ...responseData,
diff --git a/packages/datatrak-web-server/src/routes/SubmitSurveyReponse/processSurveyResponse.ts b/packages/datatrak-web-server/src/routes/SubmitSurveyReponse/processSurveyResponse.ts
index 91862f0822..27ad68033b 100644
--- a/packages/datatrak-web-server/src/routes/SubmitSurveyReponse/processSurveyResponse.ts
+++ b/packages/datatrak-web-server/src/routes/SubmitSurveyReponse/processSurveyResponse.ts
@@ -88,6 +88,9 @@ export const processSurveyResponse = async (
           surveyResponse.qr_codes_to_create?.push(entityObj);
         }
       }
+      if (type === QuestionType.PrimaryEntity && !answer) {
+        throw new Error(`Primary Entity Question is a required field`);
+      }
       if (answer) {
         if (typeof answer !== 'string') {
           throw new Error(
diff --git a/packages/datatrak-web/src/components/Autocomplete.tsx b/packages/datatrak-web/src/components/Autocomplete.tsx
index c9c2e4f26e..db45ece660 100644
--- a/packages/datatrak-web/src/components/Autocomplete.tsx
+++ b/packages/datatrak-web/src/components/Autocomplete.tsx
@@ -39,10 +39,8 @@ const SelectedOption = styled(OptionWrapper)`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-left: 0.425rem;
-  padding-right: 0.425rem;
-  margin-left: 0.45rem;
-  margin-right: 0.45rem;
+  padding-inline: 0.425rem;
+  margin-inline: 0.45rem;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.palette.primary.main};
   .MuiSvgIcon-root {
@@ -50,9 +48,30 @@ const SelectedOption = styled(OptionWrapper)`
   }
 `;
 
+const Label = styled.span`
+  font-style: ${props => props.theme.typography.fontWeightBold};
+  color: ${props => props.theme.palette.text.primary};
+`;
+
+const Code = styled.span`
+  margin-inline: 0.45rem;
+  padding-left: 0.45rem;
+  border-left: 1px solid ${props => props.theme.palette.text.secondary};
+  color: ${props => props.theme.palette.text.secondary};
+  flex: 1;
+`;
+
 const DisplayOption = ({ option, state }) => {
   const { selected } = state;
-  const label = typeof option === 'string' ? option : option.label || option.value;
+  const label =
+    typeof option === 'string' ? (
+      option
+    ) : (
+      <>
+        <Label>{option.label || option.value}</Label>
+        {option.secondaryLabel ? <Code>{option.secondaryLabel}</Code> : null}
+      </>
+    );
 
   if (selected)
     return (
@@ -66,9 +85,9 @@ const DisplayOption = ({ option, state }) => {
 
 export const Autocomplete = styled(BaseAutocomplete).attrs(props => ({
   muiProps: {
-    ...(props.muiProps || {}),
     renderOption: (option, state) => <DisplayOption option={option} state={state} />,
     PaperComponent: StyledPaper,
+    ...(props.muiProps || {}),
   },
 }))`
   width: 100%;
diff --git a/packages/datatrak-web/src/features/Questions/FileQuestion.tsx b/packages/datatrak-web/src/features/Questions/FileQuestion.tsx
index 54b25e4e7b..12d8ff263f 100644
--- a/packages/datatrak-web/src/features/Questions/FileQuestion.tsx
+++ b/packages/datatrak-web/src/features/Questions/FileQuestion.tsx
@@ -1,6 +1,6 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React from 'react';
@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import { FileUploadField } from '@tupaia/ui-components';
 import { SurveyQuestionInputProps } from '../../types';
 import { InputHelperText } from '../../components';
+import { useSurveyForm } from '../Survey';
 
 const MAX_FILE_SIZE_BYTES = 20 * 1024 * 1024; // 20 MB
 
@@ -31,8 +32,13 @@ export const FileQuestion = ({
   detailLabel,
   controllerProps: { onChange, value: selectedFile, name },
 }: SurveyQuestionInputProps) => {
-  const handleChange = (_e, _name, files) => {
-    if (!files || files.length === 0) return onChange(null);
+  const { isResponseScreen, isReviewScreen } = useSurveyForm();
+
+  const handleChange = async (files: File[] | FileList | null) => {
+    if (!files || files.length === 0) {
+      onChange(null);
+      return;
+    }
     const file = files[0];
     onChange({
       name: file.name,
@@ -49,9 +55,9 @@ export const FileQuestion = ({
         label={label!}
         helperText={detailLabel!}
         maxSizeInBytes={MAX_FILE_SIZE_BYTES}
-        showFileSize
         FormHelperTextComponent={InputHelperText}
         required={required}
+        disabled={isResponseScreen || isReviewScreen}
       />
     </Wrapper>
   );
diff --git a/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx b/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
index a10b05e751..c9924ef582 100644
--- a/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
+++ b/packages/datatrak-web/src/features/Questions/PhotoQuestion.tsx
@@ -52,7 +52,7 @@ export const PhotoQuestion = ({
         required={required}
         avatarVariant="square"
         FormHelperTextComponent={InputHelperText}
-        invalid={invalid}
+        error={invalid}
       />
     </Wrapper>
   );
diff --git a/packages/datatrak-web/src/features/Reports/Inputs/EntitySelectorInput.tsx b/packages/datatrak-web/src/features/Reports/Inputs/EntitySelectorInput.tsx
index a89db6d4dc..f6c57e8621 100644
--- a/packages/datatrak-web/src/features/Reports/Inputs/EntitySelectorInput.tsx
+++ b/packages/datatrak-web/src/features/Reports/Inputs/EntitySelectorInput.tsx
@@ -62,10 +62,10 @@ export const EntitySelectorInput = ({ selectedEntityLevel }: EntitySelectorInput
             id={selectedEntityLevel}
             getOptionSelected={(option, selected) => option.value === selected.value}
             options={
-              entities?.map(({ name: entityName, id, code, type: entityType }) => ({
+              entities?.map(({ name: entityName, id, code: secondaryLabel, type: entityType }) => ({
                 label: entityName,
                 value: id,
-                code,
+                secondaryLabel,
                 type: entityType,
               })) ?? []
             }
diff --git a/packages/datatrak-web/src/features/Survey/Components/SurveyQuestion.tsx b/packages/datatrak-web/src/features/Survey/Components/SurveyQuestion.tsx
index 70e5fc380d..6b239884c8 100644
--- a/packages/datatrak-web/src/features/Survey/Components/SurveyQuestion.tsx
+++ b/packages/datatrak-web/src/features/Survey/Components/SurveyQuestion.tsx
@@ -96,12 +96,13 @@ export const SurveyQuestion = ({
 
   const defaultValue = getDefaultValue();
 
-  // display the entity error in it's own component because otherwise it will end up at the bottom of the big list of entities
-  const displayError = errors[name] && errors[name].message && !type.includes('Entity');
-  // Use a Controller so that the fields that require change handlers, values, etc work with react-hook-form, which is uncontrolled by default
+  // Display the entity error in its own component because otherwise it will end up at the bottom of the big list of entities
+  const displayError = errors[name]?.message && !type.includes('Entity');
 
   return (
     <QuestionWrapper>
+      {/* Use a Controller so that the fields that require change handlers, values, etc. work with
+          react-hook-form, which is uncontrolled by default */}
       <Controller
         name={name}
         control={control}
diff --git a/packages/datatrak-web/src/features/Survey/Components/SurveyQuestionGroup.tsx b/packages/datatrak-web/src/features/Survey/Components/SurveyQuestionGroup.tsx
index 8e4a60b544..a1e35670b6 100644
--- a/packages/datatrak-web/src/features/Survey/Components/SurveyQuestionGroup.tsx
+++ b/packages/datatrak-web/src/features/Survey/Components/SurveyQuestionGroup.tsx
@@ -46,8 +46,8 @@ export const SurveyQuestionGroup = ({ questions }: { questions: SurveyScreenComp
           focus: () => void;
         };
       };
-      if (firstError && firstError?.ref) {
-        firstError?.ref?.focus();
+      if (firstError?.ref) {
+        firstError.ref.focus();
       }
     }
   }, [JSON.stringify(errors)]);
diff --git a/packages/datatrak-web/src/features/Survey/Screens/SurveyReviewScreen.tsx b/packages/datatrak-web/src/features/Survey/Screens/SurveyReviewScreen.tsx
index 5890f86ec9..cefcb9dcc2 100644
--- a/packages/datatrak-web/src/features/Survey/Screens/SurveyReviewScreen.tsx
+++ b/packages/datatrak-web/src/features/Survey/Screens/SurveyReviewScreen.tsx
@@ -1,6 +1,6 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
 import { Typography } from '@material-ui/core';
@@ -41,7 +41,7 @@ export const SurveyReviewScreen = () => {
         <PageHeading>Review and submit</PageHeading>
         <PageDescription>
           Please review your survey answers below. To edit any answers, please navigate back using
-          the 'Back' button below. Once submitted, your survey answers will be uploaded to Tupaia.{' '}
+          the ‘Back’ button below. Once submitted, your survey answers will be uploaded to Tupaia.
         </PageDescription>
       </Header>
       <ScrollableBody>
diff --git a/packages/datatrak-web/src/features/Survey/utils.ts b/packages/datatrak-web/src/features/Survey/utils.ts
index 08b9036119..3d8896aeb2 100644
--- a/packages/datatrak-web/src/features/Survey/utils.ts
+++ b/packages/datatrak-web/src/features/Survey/utils.ts
@@ -2,8 +2,16 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { QuestionType } from "@tupaia/types";
-import { SurveyScreen } from "../../types";
+import { QuestionType } from '@tupaia/types';
+import { SurveyScreen } from '../../types';
+
+const validateSurveyComponent = component => {
+  if (component.type === QuestionType.PrimaryEntity && !component.config?.entity?.createNew) {
+    component.validationCriteria = component.validationCriteria ?? {};
+    component.validationCriteria.mandatory = true;
+  }
+  return component;
+};
 
 export const READ_ONLY_QUESTION_TYPES = [
   QuestionType.Condition,
@@ -11,22 +19,19 @@ export const READ_ONLY_QUESTION_TYPES = [
   QuestionType.Instruction,
   QuestionType.CodeGenerator,
 ];
+
 export const getSurveyScreenNumber = (screens, screen) => {
   if (!screen) return null;
   const { surveyScreenComponents, id } = screen;
   const nonInstructionScreens =
-    screens?.filter((screen) =>
-      screen.surveyScreenComponents.some(
-        (component) => component.type !== QuestionType.Instruction
-      )
+    screens?.filter(screen =>
+      screen.surveyScreenComponents.some(component => component.type !== QuestionType.Instruction),
     ) ?? [];
 
   const screenNumber = surveyScreenComponents.some(
-    (component) => component.type !== QuestionType.Instruction
+    component => component.type !== QuestionType.Instruction,
   )
-    ? nonInstructionScreens.findIndex(
-        (nonInstructionScreen) => nonInstructionScreen.id === id
-      ) + 1
+    ? nonInstructionScreens.findIndex(nonInstructionScreen => nonInstructionScreen.id === id) + 1
     : null;
 
   return screenNumber;
@@ -35,22 +40,19 @@ export const getSurveyScreenNumber = (screens, screen) => {
 export const getAllSurveyComponents = (surveyScreens?: SurveyScreen[]) => {
   return (
     surveyScreens
-      ?.map(({ surveyScreenComponents }) => surveyScreenComponents)
-      ?.flat() ?? []
+      ?.flatMap(({ surveyScreenComponents }) => surveyScreenComponents)
+      .map(validateSurveyComponent) ?? []
   );
 };
 
 export const getErrorsByScreen = (
   errors: Record<string, Record<string, string>>,
-  visibleScreens?: SurveyScreen[]
+  visibleScreens?: SurveyScreen[],
 ) => {
   return (
     Object.entries(errors).reduce((acc, [questionName, error]) => {
-      const screenIndex = visibleScreens?.findIndex(
-        ({ surveyScreenComponents }) =>
-          surveyScreenComponents.find(
-            (question) => question.questionId === questionName
-          )
+      const screenIndex = visibleScreens?.findIndex(({ surveyScreenComponents }) =>
+        surveyScreenComponents.find(question => question.questionId === questionName),
       );
 
       if (screenIndex === undefined || screenIndex === -1) return acc;
diff --git a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
index 1b7c51f31f..676c53e15c 100644
--- a/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
+++ b/packages/lesmis/src/views/AdminPanel/components/RejectButton.jsx
@@ -25,12 +25,12 @@ const ConfirmModalHeading = styled(Typography).attrs({
   margin-bottom: 0.5rem;
 `;
 
-const RejectConfirmModal = ({ isOpen, onClose, onConfirm, errorMessage, translate, isLoading }) => (
+const RejectConfirmModal = ({ isOpen, onClose, onConfirm, error, translate, isLoading }) => (
   <Modal
     onClose={onClose}
     isOpen={isOpen}
     isLoading={isLoading}
-    errorMessage={errorMessage}
+    error={error}
     buttons={[
       {
         text: translate('admin.cancel'),
@@ -63,13 +63,13 @@ RejectConfirmModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onConfirm: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string,
+  error: PropTypes.object,
   translate: PropTypes.func.isRequired,
   isLoading: PropTypes.bool.isRequired,
 };
 
 RejectConfirmModal.defaultProps = {
-  errorMessage: null,
+  error: null,
 };
 
 export const getRejectButton = translate => {
@@ -105,7 +105,7 @@ export const getRejectButton = translate => {
               isOpen={isOpen}
               onClose={() => setIsOpen(false)}
               onConfirm={() => handleClickReject(props)}
-              errorMessage={error?.message}
+              error={error}
               translate={translate}
               isLoading={isLoading}
             />
diff --git a/packages/server-utils/src/constructExportEmail.ts b/packages/server-utils/src/constructExportEmail.ts
index 811ce5cbf3..2733c81510 100644
--- a/packages/server-utils/src/constructExportEmail.ts
+++ b/packages/server-utils/src/constructExportEmail.ts
@@ -26,12 +26,14 @@ type ResponseBody = {
   filePath?: string;
 };
 
-type ReqBody = {
-  emailExportFileMode?: EmailExportFileModes;
+type Req = {
+  query: {
+    emailExportFileMode?: EmailExportFileModes;
+  };
 };
 
-export const constructExportEmail = async (responseBody: ResponseBody, reqBody: ReqBody) => {
-  const { emailExportFileMode = EmailExportFileModes.ATTACHMENT } = reqBody;
+export const constructExportEmail = async (responseBody: ResponseBody, req: Req) => {
+  const { emailExportFileMode = EmailExportFileModes.DOWNLOAD_LINK } = req.query;
   const { error, filePath } = responseBody;
   const subject = 'Your export from Tupaia';
   if (error) {
diff --git a/packages/server-utils/src/downloadPageAsPDF.ts b/packages/server-utils/src/downloadPageAsPDF.ts
index e427182713..97c7a42faf 100644
--- a/packages/server-utils/src/downloadPageAsPDF.ts
+++ b/packages/server-utils/src/downloadPageAsPDF.ts
@@ -42,6 +42,7 @@ export const downloadPageAsPDF = async (
   pdfPageUrl: string,
   userCookie = '',
   cookieDomain: string | undefined,
+  landscape = false,
 ) => {
   let browser;
   let buffer;
@@ -55,6 +56,7 @@ export const downloadPageAsPDF = async (
     buffer = await page.pdf({
       format: 'a4',
       printBackground: true,
+      landscape,
     });
   } catch (e) {
     throw new Error(`puppeteer error: ${(e as Error).message}`);
diff --git a/packages/tupaia-web-server/src/app/createApp.ts b/packages/tupaia-web-server/src/app/createApp.ts
index 3222b4e3ce..aa6cbd3dc7 100644
--- a/packages/tupaia-web-server/src/app/createApp.ts
+++ b/packages/tupaia-web-server/src/app/createApp.ts
@@ -51,6 +51,10 @@ export async function createApp(db: TupaiaDatabase = new TupaiaDatabase()) {
       'dashboards/:projectCode/:entityCode/:dashboardCode/export',
       handleWith(routes.ExportDashboardRoute),
     )
+    .post<routes.ExportMapOverlayRequest>(
+      'mapOverlays/:projectCode/:entityCode/:mapOverlayCode/export',
+      handleWith(routes.ExportMapOverlayRoute),
+    )
     .post<routes.EmailDashboardRequest>(
       'dashboards/:projectCode/:entityCode/:dashboardCode/email',
       handleWith(routes.EmailDashboardRoute),
diff --git a/packages/tupaia-web-server/src/routes/ExportMapOverlayRoute.ts b/packages/tupaia-web-server/src/routes/ExportMapOverlayRoute.ts
new file mode 100644
index 0000000000..1aa7490b89
--- /dev/null
+++ b/packages/tupaia-web-server/src/routes/ExportMapOverlayRoute.ts
@@ -0,0 +1,77 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ *
+ */
+
+import { Request } from 'express';
+import { Route } from '@tupaia/server-boilerplate';
+import { TupaiaWebExportMapOverlayRequest } from '@tupaia/types';
+import { stringifyQuery } from '@tupaia/utils';
+import { downloadPageAsPDF } from '@tupaia/server-utils';
+
+export type ExportMapOverlayRequest = Request<
+  TupaiaWebExportMapOverlayRequest.Params,
+  TupaiaWebExportMapOverlayRequest.ResBody,
+  TupaiaWebExportMapOverlayRequest.ReqBody,
+  TupaiaWebExportMapOverlayRequest.ReqQuery
+>;
+
+const downloadMapOverlayAsPdf = (
+  projectCode: string,
+  entityCode: string,
+  mapOverlayCode: string,
+  baseUrl: TupaiaWebExportMapOverlayRequest.ReqBody['baseUrl'],
+  cookie: string,
+  cookieDomain: TupaiaWebExportMapOverlayRequest.ReqBody['cookieDomain'],
+  zoom: TupaiaWebExportMapOverlayRequest.ReqBody['zoom'],
+  center: TupaiaWebExportMapOverlayRequest.ReqBody['center'],
+  tileset: TupaiaWebExportMapOverlayRequest.ReqBody['tileset'],
+  hiddenValues: TupaiaWebExportMapOverlayRequest.ReqBody['hiddenValues'],
+  mapOverlayPeriod?: TupaiaWebExportMapOverlayRequest.ReqBody['mapOverlayPeriod'],
+  locale?: TupaiaWebExportMapOverlayRequest.ReqBody['locale'],
+) => {
+  const endpoint = `${projectCode}/${entityCode}/map-overlay-pdf-export`;
+  const pdfPageUrl = stringifyQuery(baseUrl, endpoint, {
+    zoom,
+    center,
+    tileset,
+    hiddenValues,
+    overlay: mapOverlayCode,
+    overlayPeriod: mapOverlayPeriod,
+    locale,
+  });
+
+  return downloadPageAsPDF(pdfPageUrl, cookie, cookieDomain, true);
+};
+
+export class ExportMapOverlayRoute extends Route<ExportMapOverlayRequest> {
+  protected type = 'download' as const;
+
+  public async buildResponse() {
+    const { projectCode, entityCode, mapOverlayCode } = this.req.params;
+    const { baseUrl, cookieDomain, zoom, center, tileset, hiddenValues, mapOverlayPeriod, locale } =
+      this.req.body;
+    const { cookie } = this.req.headers;
+
+    if (!cookie) {
+      throw new Error(`Must have a valid session to export a map overlay`);
+    }
+
+    const buffer = await downloadMapOverlayAsPdf(
+      projectCode,
+      entityCode,
+      mapOverlayCode,
+      baseUrl,
+      cookie,
+      cookieDomain,
+      zoom,
+      center,
+      tileset,
+      hiddenValues,
+      mapOverlayPeriod,
+      locale,
+    );
+    return { contents: buffer, type: 'application/pdf' };
+  }
+}
diff --git a/packages/tupaia-web-server/src/routes/SubscribeDashboardRoute.ts b/packages/tupaia-web-server/src/routes/SubscribeDashboardRoute.ts
index 9166e3d69a..00c06d940a 100644
--- a/packages/tupaia-web-server/src/routes/SubscribeDashboardRoute.ts
+++ b/packages/tupaia-web-server/src/routes/SubscribeDashboardRoute.ts
@@ -82,7 +82,7 @@ export class SubscribeDashboardRoute extends Route<SubscribeDashboardRequest> {
       );
     }
 
-    const [upsertedEntry] = await await ctx.services.central.fetchResources(
+    const [upsertedEntry] = await ctx.services.central.fetchResources(
       'dashboardMailingListEntries',
       {
         filter: {
diff --git a/packages/tupaia-web-server/src/routes/index.ts b/packages/tupaia-web-server/src/routes/index.ts
index a64ea79379..9b90788b87 100644
--- a/packages/tupaia-web-server/src/routes/index.ts
+++ b/packages/tupaia-web-server/src/routes/index.ts
@@ -36,3 +36,5 @@ export {
   UnsubscribeDashboardMailingListRoute,
   UnsubscribeDashboardMailingListRequest,
 } from './UnsubscribeDashboardMailingListRoute';
+
+export { ExportMapOverlayRequest, ExportMapOverlayRoute } from './ExportMapOverlayRoute';
diff --git a/packages/tupaia-web-server/src/utils/downloadDashboardAsPdf.ts b/packages/tupaia-web-server/src/utils/downloadDashboardAsPdf.ts
index 48f520f832..b915a28ce1 100644
--- a/packages/tupaia-web-server/src/utils/downloadDashboardAsPdf.ts
+++ b/packages/tupaia-web-server/src/utils/downloadDashboardAsPdf.ts
@@ -20,7 +20,7 @@ export const downloadDashboardAsPdf = (
     exportWithTable: false,
   },
 ) => {
-  const endpoint = `${projectCode}/${entityCode}/${dashboardName}/pdf-export`;
+  const endpoint = `${projectCode}/${entityCode}/${dashboardName}/dashboard-pdf-export`;
   const pdfPageUrl = stringifyQuery(baseUrl, endpoint, {
     selectedDashboardItems: selectedDashboardItems?.join(','),
     settings: JSON.stringify(settings),
diff --git a/packages/tupaia-web-server/src/utils/generateFrontendExcludedFilter.ts b/packages/tupaia-web-server/src/utils/generateFrontendExcludedFilter.ts
index 25ab251da8..61a767e214 100644
--- a/packages/tupaia-web-server/src/utils/generateFrontendExcludedFilter.ts
+++ b/packages/tupaia-web-server/src/utils/generateFrontendExcludedFilter.ts
@@ -21,7 +21,7 @@ export const getTypesToExclude = async (
 
   if (config?.frontendExcluded) {
     const typesFilter = [];
-    for (const excludedConfig of config?.frontendExcluded) {
+    for (const excludedConfig of config.frontendExcluded) {
       const { types, exceptions } = excludedConfig;
 
       const exceptedPermissionGroups = exceptions?.permissionGroups ?? [];
diff --git a/packages/tupaia-web/package.json b/packages/tupaia-web/package.json
index 619eef6131..6189e31a59 100644
--- a/packages/tupaia-web/package.json
+++ b/packages/tupaia-web/package.json
@@ -39,6 +39,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.15.1",
+    "react-leaflet": "^3.2.1",
     "react-query": "^3.39.3",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
diff --git a/packages/tupaia-web/src/Routes.tsx b/packages/tupaia-web/src/Routes.tsx
index 05fbb7af29..9365bd2a1c 100644
--- a/packages/tupaia-web/src/Routes.tsx
+++ b/packages/tupaia-web/src/Routes.tsx
@@ -4,9 +4,15 @@
  */
 import React from 'react';
 import { Navigate, Route, Routes as RouterRoutes, useLocation } from 'react-router-dom';
-import { LandingPage, PDFExport, ProjectPage, Unsubscribe } from './views';
+import {
+  DashboardPDFExport,
+  LandingPage,
+  MapOverlayPDFExport,
+  ProjectPage,
+  Unsubscribe,
+} from './views';
 import { Dashboard } from './features';
-import { MODAL_ROUTES, DEFAULT_URL, ROUTE_STRUCTURE } from './constants';
+import { MODAL_ROUTES, DEFAULT_URL, ROUTE_STRUCTURE, MAP_OVERLAY_EXPORT_ROUTE } from './constants';
 import { useUser } from './api/queries';
 import { MainLayout } from './layout';
 import { LoadingScreen } from './components';
@@ -63,7 +69,11 @@ export const Routes = () => {
 
   return (
     <RouterRoutes>
-      <Route path="/:projectCode/:entityCode/:dashboardName/pdf-export" element={<PDFExport />} />
+      <Route
+        path="/:projectCode/:entityCode/:dashboardName/dashboard-pdf-export"
+        element={<DashboardPDFExport />}
+      />
+      <Route path={MAP_OVERLAY_EXPORT_ROUTE} element={<MapOverlayPDFExport />} />
       <Route path="/unsubscribe" element={<Unsubscribe />} />
       <Route element={<MainLayout />}>
         <Route path="/:landingPageUrlSegment" element={<LandingPage />} />
diff --git a/packages/tupaia-web/src/api/mutations/index.ts b/packages/tupaia-web/src/api/mutations/index.ts
index 61105bf695..fe31873a1b 100644
--- a/packages/tupaia-web/src/api/mutations/index.ts
+++ b/packages/tupaia-web/src/api/mutations/index.ts
@@ -20,3 +20,4 @@ export { useSubscribeDashboard } from './useSubscribeDashboard';
 export { useUnsubscribeDashboard } from './useUnsubscribeDashboard';
 export { useUnsubscribeDashboardMailingList } from './useUnsubscribeDashboardMailingList';
 export { useEmailDashboard } from './useEmailDashboard';
+export { useExportMapOverlay } from './useExportMapOverlay';
diff --git a/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts b/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts
index 2353d21c32..c9e4ef7f5d 100644
--- a/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts
+++ b/packages/tupaia-web/src/api/mutations/useDownloadFiles.ts
@@ -1,7 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
+
 import { useMutation } from 'react-query';
 import downloadJs from 'downloadjs';
 import { getUniqueFileNameParts } from '@tupaia/utils';
@@ -28,7 +29,7 @@ export const useDownloadFiles = () => {
       }),
     {
       onSuccess: async (data: any, uniqueFileNames: string[]) => {
-        let fileName =
+        const fileName =
           uniqueFileNames.length === 1
             ? getUniqueFileNameParts(uniqueFileNames[0]).fileName
             : getMultiFileDownloadFileName();
diff --git a/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx b/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx
index 7a7359e9fe..550b452b96 100644
--- a/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx
+++ b/packages/tupaia-web/src/api/mutations/useExportDashboard.tsx
@@ -6,6 +6,7 @@ import { useMutation } from 'react-query';
 import { TupaiaWebExportDashboardRequest } from '@tupaia/types';
 import { API_URL, post } from '../api';
 import { DashboardName, EntityCode, ProjectCode } from '../../types';
+import { downloadPDF } from '../../utils';
 
 type ExportDashboardBody = {
   projectCode?: ProjectCode;
@@ -16,7 +17,7 @@ type ExportDashboardBody = {
 };
 
 // Requests a dashboard PDF export from the server, and returns the response
-export const useExportDashboard = ({ onSuccess }: { onSuccess?: (data: Blob) => void }) => {
+export const useExportDashboard = (fileName: string) => {
   return useMutation<any, Error, ExportDashboardBody, unknown>(
     ({
       projectCode,
@@ -41,7 +42,9 @@ export const useExportDashboard = ({ onSuccess }: { onSuccess?: (data: Blob) =>
       });
     },
     {
-      onSuccess,
+      onSuccess: data => {
+        downloadPDF(data, fileName);
+      },
     },
   );
 };
diff --git a/packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts b/packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts
new file mode 100644
index 0000000000..3abefa0d4c
--- /dev/null
+++ b/packages/tupaia-web/src/api/mutations/useExportMapOverlay.ts
@@ -0,0 +1,60 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import { useMutation } from 'react-query';
+import { LatLng } from 'leaflet';
+import { MapOverlay } from '@tupaia/types';
+import { LegendProps } from '@tupaia/ui-map-components';
+import { EntityCode, ProjectCode } from '../../types';
+import { API_URL, post } from '../api';
+import { downloadPDF } from '../../utils';
+
+type ExportDashboardBody = {
+  projectCode?: ProjectCode;
+  entityCode?: EntityCode;
+  mapOverlayCode?: MapOverlay['code'];
+  zoom: number;
+  center: LatLng;
+  hiddenValues: LegendProps['hiddenValues'];
+  tileset: string;
+  mapOverlayPeriod?: string;
+};
+
+// Requests a map overlay PDF export from the server, and returns the response
+export const useExportMapOverlay = (fileName: string) => {
+  return useMutation<any, Error, ExportDashboardBody, unknown>(
+    ({
+      projectCode,
+      entityCode,
+      mapOverlayCode,
+      zoom,
+      center,
+      hiddenValues,
+      tileset,
+      mapOverlayPeriod,
+    }: ExportDashboardBody) => {
+      // Auth cookies are saved against this domain. Pass this to server, so that when it pretends to be us, it can do the same.
+      const cookieDomain = new URL(API_URL).hostname;
+
+      return post(`mapOverlays/${projectCode}/${entityCode}/${mapOverlayCode}/export`, {
+        responseType: 'blob',
+        data: {
+          cookieDomain,
+          baseUrl: window.location.origin,
+          zoom,
+          center: JSON.stringify(center),
+          hiddenValues: JSON.stringify(hiddenValues),
+          tileset,
+          mapOverlayPeriod,
+          locale: window.navigator?.language || 'en-AU',
+        },
+      });
+    },
+    {
+      onSuccess: data => {
+        downloadPDF(data, fileName);
+      },
+    },
+  );
+};
diff --git a/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts b/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts
index d039369cee..90ff37a873 100644
--- a/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts
+++ b/packages/tupaia-web/src/api/queries/useMapOverlayReport.ts
@@ -2,6 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+import moment, { Moment } from 'moment';
 import { useQuery } from 'react-query';
 import { momentToDateString } from '@tupaia/utils';
 import { TupaiaWebMapOverlaysRequest } from '@tupaia/types';
@@ -13,7 +14,6 @@ import {
 } from '@tupaia/ui-map-components';
 import { get } from '../api';
 import { EntityCode, ProjectCode } from '../../types';
-import { Moment } from 'moment';
 
 type SingleMapOverlayItem = TupaiaWebMapOverlaysRequest.TranslatedMapOverlay;
 
@@ -63,6 +63,8 @@ const formatMapOverlayData = (data: any) => {
   };
 };
 
+const DEFAULT_START_DATE = '2015-01-01';
+
 export const useMapOverlayReport = (
   projectCode?: ProjectCode,
   entityCode?: EntityCode,
@@ -73,9 +75,14 @@ export const useMapOverlayReport = (
   },
   keepPreviousData?: boolean,
 ) => {
+  const today = moment();
+  const startDateToUse = params?.startDate ?? moment(DEFAULT_START_DATE); // default to 2015-01-01 if no start date is provided
+  const endDateToUse = params?.endDate ?? today; // default to today if no end date is provided, so that the default end date is always in the user's timezone, not UTC
+
   // convert moment dates to date strings for the endpoint to use
-  const startDate = params?.startDate ? momentToDateString(params.startDate) : undefined;
-  const endDate = params?.startDate ? momentToDateString(params.endDate) : undefined;
+  const endDate = momentToDateString(endDateToUse);
+
+  const startDate = momentToDateString(startDateToUse);
   const mapOverlayCode = mapOverlay?.code;
   const isLegacy = mapOverlay?.legacy ? 'true' : 'false';
 
diff --git a/packages/tupaia-web/src/api/queries/useReport.ts b/packages/tupaia-web/src/api/queries/useReport.ts
index 03a1227efa..48319bc5f6 100644
--- a/packages/tupaia-web/src/api/queries/useReport.ts
+++ b/packages/tupaia-web/src/api/queries/useReport.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  *
  */
-import { Moment } from 'moment';
+import moment, { Moment } from 'moment';
 import { useQuery } from 'react-query';
 import { formatDateForApi, getBrowserTimeZone } from '@tupaia/utils';
 import { TupaiaWebReportRequest } from '@tupaia/types';
@@ -27,9 +27,11 @@ export const useReport = (
 ) => {
   const { dashboardCode, projectCode, entityCode, itemCode, startDate, endDate, legacy, ...rest } =
     params;
+  const today = moment();
+  const endDateToUse = endDate ?? today; // default to today if no end date is provided, so that the default end date is always in the user's timezone, not UTC
   const timeZone = getBrowserTimeZone();
   const formattedStartDate = formatDateForApi(startDate, null);
-  const formattedEndDate = formatDateForApi(endDate, null);
+  const formattedEndDate = formatDateForApi(endDateToUse, null);
   const endPoint = legacy ? 'legacyDashboardReport' : 'report';
   return useQuery(
     [
diff --git a/packages/tupaia-web/src/constants/url.ts b/packages/tupaia-web/src/constants/url.ts
index 1236da1a50..d643f53eb5 100644
--- a/packages/tupaia-web/src/constants/url.ts
+++ b/packages/tupaia-web/src/constants/url.ts
@@ -36,3 +36,5 @@ export const DEFAULT_PERIOD_PARAM_STRING = 'DEFAULT_PERIOD';
 export const DEFAULT_MAP_OVERLAY_ID = '126'; // 'Operational Facilities'
 
 export const ROUTE_STRUCTURE = '/:projectCode/:entityCode/:dashboardName';
+
+export const MAP_OVERLAY_EXPORT_ROUTE = '/:projectCode/:entityCode/map-overlay-pdf-export';
diff --git a/packages/tupaia-web/src/features/Dashboard/ExportDashboard/ExportConfig.tsx b/packages/tupaia-web/src/features/Dashboard/ExportDashboard/ExportConfig.tsx
index 6c1df10ccd..0de00fbd73 100644
--- a/packages/tupaia-web/src/features/Dashboard/ExportDashboard/ExportConfig.tsx
+++ b/packages/tupaia-web/src/features/Dashboard/ExportDashboard/ExportConfig.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useParams } from 'react-router';
-import downloadJs from 'downloadjs';
 import { Button, LoadingContainer } from '@tupaia/ui-components';
 import { useEntity, useProject } from '../../../api/queries';
 import { useExportDashboard } from '../../../api/mutations';
@@ -112,21 +111,10 @@ export const ExportConfig = ({ onClose, selectedDashboardItems }: ExportDashboar
   const { activeDashboard } = useDashboard();
   const { exportWithLabels, exportWithTable } = useExportSettings();
 
-  const handleExportSuccess = (data: Blob) => {
-    downloadJs(data, `${exportFileName}.pdf`);
-  };
-
-  const {
-    mutate: requestPdfExport,
-    error,
-    isLoading,
-    reset,
-  } = useExportDashboard({
-    onSuccess: handleExportSuccess,
-  });
-
   const exportFileName = `${project?.name}-${entity?.name}-${dashboardName}-dashboard-export`;
 
+  const { mutate: requestPdfExport, error, isLoading, reset } = useExportDashboard(exportFileName);
+
   const handleExport = () =>
     requestPdfExport({
       projectCode,
diff --git a/packages/tupaia-web/src/features/Dashboard/ExportDashboard/Preview.tsx b/packages/tupaia-web/src/features/Dashboard/ExportDashboard/Preview.tsx
index f92eb6ea21..955c1f0df0 100644
--- a/packages/tupaia-web/src/features/Dashboard/ExportDashboard/Preview.tsx
+++ b/packages/tupaia-web/src/features/Dashboard/ExportDashboard/Preview.tsx
@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Typography } from '@material-ui/core';
 import { Pagination } from '@material-ui/lab';
-import { PDFExport } from '../../../views';
+import { DashboardPDFExport } from '../../../views';
 import { MOBILE_BREAKPOINT } from '../../../constants';
 
 const PreviewPanelContainer = styled.div`
@@ -74,7 +74,7 @@ export const Preview = ({ selectedDashboardItems }: { selectedDashboardItems: st
         />
       </PreviewHeaderContainer>
       <PreviewContainer>
-        <PDFExport selectedDashboardItems={[visualisationToPreview]} isPreview={true} />
+        <DashboardPDFExport selectedDashboardItems={[visualisationToPreview]} isPreview={true} />
       </PreviewContainer>
     </PreviewPanelContainer>
   );
diff --git a/packages/tupaia-web/src/features/Map/Map.tsx b/packages/tupaia-web/src/features/Map/Map.tsx
index 17f3e3cc22..10a37cf709 100644
--- a/packages/tupaia-web/src/features/Map/Map.tsx
+++ b/packages/tupaia-web/src/features/Map/Map.tsx
@@ -3,26 +3,24 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
-import {
-  TileLayer,
-  LeafletMap,
-  ZoomControl,
-  TilePicker,
-  getAutoTileSet,
-  DEFAULT_TILESETS,
-} from '@tupaia/ui-map-components';
+import { TileLayer, LeafletMap, ZoomControl, TilePicker } from '@tupaia/ui-map-components';
 import { ErrorBoundary } from '@tupaia/ui-components';
-import { useProject } from '../../api/queries';
-import { useGAEffect } from '../../utils';
-import { CUSTOM_TILE_SETS, MOBILE_BREAKPOINT } from '../../constants';
+import { MOBILE_BREAKPOINT } from '../../constants';
 import { MapWatermark } from './MapWatermark';
 import { MapLegend } from './MapLegend';
 import { MapOverlaySelector } from './MapOverlaySelector';
 import { MapOverlaysLayer } from './MapOverlaysLayer';
-import { useHiddenMapValues, useDefaultMapOverlay, useMapOverlayMapData } from './utils';
+import {
+  useHiddenMapValues,
+  useDefaultMapOverlay,
+  useMapOverlayMapData,
+  MapContextProvider,
+  useMapContext,
+  useTilesets,
+} from './utils';
 import { DemoLand } from './DemoLand';
 
 const MapContainer = styled.div`
@@ -108,46 +106,39 @@ const MapControlColumn = styled.div`
   }
 `;
 
-const useTileSets = () => {
-  const { projectCode } = useParams();
-  const { data: project } = useProject(projectCode);
-  const initialTileSet = getAutoTileSet();
-  const [activeTileSet, setActiveTileSet] = useState(initialTileSet);
-  const { tileSets = '' } = project?.config || {};
-  const customTilesetNames = tileSets?.split(',') || [];
-  const customTileSets = customTilesetNames
-    .map(
-      tileset =>
-        CUSTOM_TILE_SETS.find(({ key }) => key === tileset) as (typeof CUSTOM_TILE_SETS)[0],
-    )
-    .filter(item => item);
-  const defaultTileSets = [DEFAULT_TILESETS.osm, DEFAULT_TILESETS.satellite];
-  const availableTileSets = [...defaultTileSets, ...customTileSets];
-
-  useGAEffect('Map', 'Change Tile Set', activeTileSet?.label);
-
-  const onTileSetChange = (tileSetKey: string) => {
-    const newActiveTileSet = availableTileSets.find(
-      ({ key }) => key === tileSetKey,
-    ) as (typeof CUSTOM_TILE_SETS)[0];
-    setActiveTileSet(newActiveTileSet);
-  };
-
-  useEffect(() => {
-    if (
-      activeTileSet &&
-      availableTileSets.length &&
-      !availableTileSets.some(({ key }) => key === activeTileSet.key)
-    ) {
-      setActiveTileSet(initialTileSet);
-    }
-  }, [JSON.stringify(availableTileSets)]);
+// Separate the map component from the context provider so that we can set the map on creation using the context
+const MapInner = () => {
+  const { setMap } = useMapContext();
+  // Setup legend hidden values
+  const { serieses } = useMapOverlayMapData();
+  const { hiddenValues, setValueHidden } = useHiddenMapValues(serieses);
 
-  return {
-    availableTileSets,
-    activeTileSet,
-    onTileSetChange,
-  };
+  const { availableTileSets, activeTileSet, onTileSetChange } = useTilesets();
+  return (
+    <ErrorBoundary>
+      <StyledMap shouldSnapToPosition whenCreated={setMap}>
+        <TileLayer tileSetUrl={activeTileSet.url} showAttribution={false} />
+        <MapOverlaysLayer hiddenValues={hiddenValues} />
+        <DemoLand />
+        <ZoomControl position="bottomright" />
+        <MapWatermark />
+      </StyledMap>
+      {/* Map Controls need to be outside the map so that the mouse events on controls don't interfere with the map */}
+      <MapControlWrapper>
+        <MapControlColumn>
+          <MapOverlaySelector hiddenValues={hiddenValues} activeTileSet={activeTileSet} />
+          <MapLegend hiddenValues={hiddenValues} setValueHidden={setValueHidden} />
+        </MapControlColumn>
+        <TilePickerWrapper>
+          <TilePicker
+            tileSets={availableTileSets}
+            activeTileSet={activeTileSet}
+            onChange={onTileSetChange}
+          />
+        </TilePickerWrapper>
+      </MapControlWrapper>
+    </ErrorBoundary>
+  );
 };
 
 export const Map = () => {
@@ -155,37 +146,11 @@ export const Map = () => {
 
   useDefaultMapOverlay(projectCode, entityCode);
 
-  // Setup legend hidden values
-  const { serieses } = useMapOverlayMapData();
-  const { hiddenValues, setValueHidden } = useHiddenMapValues(serieses);
-
-  const { availableTileSets, activeTileSet, onTileSetChange } = useTileSets();
-
   return (
     <MapContainer>
-      <ErrorBoundary>
-        <StyledMap shouldSnapToPosition>
-          <TileLayer tileSetUrl={activeTileSet.url} showAttribution={false} />
-          <MapOverlaysLayer hiddenValues={hiddenValues} />
-          <DemoLand />
-          <ZoomControl position="bottomright" />
-          <MapWatermark />
-        </StyledMap>
-        {/* Map Controls need to be outside the map so that the mouse events on controls don't interfere with the map */}
-        <MapControlWrapper>
-          <MapControlColumn>
-            <MapOverlaySelector />
-            <MapLegend hiddenValues={hiddenValues} setValueHidden={setValueHidden} />
-          </MapControlColumn>
-          <TilePickerWrapper>
-            <TilePicker
-              tileSets={availableTileSets}
-              activeTileSet={activeTileSet}
-              onChange={onTileSetChange}
-            />
-          </TilePickerWrapper>
-        </MapControlWrapper>
-      </ErrorBoundary>
+      <MapContextProvider>
+        <MapInner />
+      </MapContextProvider>
     </MapContainer>
   );
 };
diff --git a/packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx b/packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx
index de8320be47..b68b323685 100644
--- a/packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx
+++ b/packages/tupaia-web/src/features/Map/MapLegend/MapLegend.tsx
@@ -4,13 +4,13 @@
  */
 
 import React from 'react';
-import { Legend, LegendProps } from '@tupaia/ui-map-components';
-import { MobileMapLegend } from './MobileMapLegend';
 import { useSearchParams } from 'react-router-dom';
-import { MOBILE_BREAKPOINT, URL_SEARCH_PARAMS } from '../../../constants';
-import { useMapOverlayMapData } from '../utils';
 import styled from 'styled-components';
 import { ErrorBoundary } from '@tupaia/ui-components';
+import { Legend as LegendComponent, LegendProps } from '@tupaia/ui-map-components';
+import { MOBILE_BREAKPOINT, URL_SEARCH_PARAMS } from '../../../constants';
+import { useMapOverlayMapData } from '../utils';
+import { MobileMapLegend } from './MobileMapLegend';
 
 const DesktopWrapper = styled.div`
   pointer-events: auto;
@@ -35,7 +35,7 @@ const SeriesDivider = styled.div`
   }
 `;
 
-export const MapLegend = ({ hiddenValues, setValueHidden }: LegendProps) => {
+export const Legend = ({ hiddenValues, setValueHidden, isExport }: LegendProps) => {
   const [urlSearchParams] = useSearchParams();
   const selectedOverlay = urlSearchParams.get(URL_SEARCH_PARAMS.MAP_OVERLAY);
   const { isLoading, isFetched, ...overlayReportData } = useMapOverlayMapData();
@@ -43,25 +43,27 @@ export const MapLegend = ({ hiddenValues, setValueHidden }: LegendProps) => {
   if (!selectedOverlay || !overlayReportData || isLoading) {
     return null;
   }
-
-  const LegendComponent = () => (
-    <Legend
+  return (
+    <LegendComponent
       measureInfo={{ [selectedOverlay]: overlayReportData }}
       setValueHidden={setValueHidden}
       hiddenValues={hiddenValues}
       currentMapOverlayCodes={[selectedOverlay]}
       displayedMapOverlayCodes={[selectedOverlay]}
-      SeriesDivider={SeriesDivider}
+      SeriesDivider={isExport ? undefined : SeriesDivider}
+      isExport={isExport}
     />
   );
+};
 
+export const MapLegend = ({ hiddenValues, setValueHidden }: LegendProps) => {
   return (
     <ErrorBoundary>
       <MobileMapLegend>
-        <LegendComponent />
+        <Legend hiddenValues={hiddenValues} setValueHidden={setValueHidden} />
       </MobileMapLegend>
       <DesktopWrapper>
-        <LegendComponent />
+        <Legend hiddenValues={hiddenValues} setValueHidden={setValueHidden} />
       </DesktopWrapper>
     </ErrorBoundary>
   );
diff --git a/packages/tupaia-web/src/features/Map/MapLegend/index.ts b/packages/tupaia-web/src/features/Map/MapLegend/index.ts
index 968a46071c..83621ce3d2 100644
--- a/packages/tupaia-web/src/features/Map/MapLegend/index.ts
+++ b/packages/tupaia-web/src/features/Map/MapLegend/index.ts
@@ -3,4 +3,4 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-export { MapLegend } from './MapLegend';
+export { MapLegend, Legend } from './MapLegend';
diff --git a/packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx b/packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx
index 9559b6650a..813f5cc0f5 100644
--- a/packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx
+++ b/packages/tupaia-web/src/features/Map/MapOverlaySelector/DesktopMapOverlaySelector.tsx
@@ -4,27 +4,40 @@
  */
 
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import moment from 'moment';
 import styled from 'styled-components';
-import { useParams } from 'react-router';
-import { periodToMoment } from '@tupaia/utils';
-import { Tooltip } from '@tupaia/ui-components';
-import { IconButton } from '@tupaia/ui-components';
-import { ArrowDropDown, Layers, Assignment } from '@material-ui/icons';
-import { Accordion, Typography, AccordionSummary, AccordionDetails } from '@material-ui/core';
-import { useMapOverlayMapData } from '../utils';
+import { GRANULARITY_CONFIG, periodToMoment } from '@tupaia/utils';
+import { Tooltip, IconButton, SmallAlert } from '@tupaia/ui-components';
+import { LegendProps } from '@tupaia/ui-map-components';
+import { ArrowDropDown, Layers, Assignment, GetApp, Close } from '@material-ui/icons';
+import {
+  Accordion,
+  Typography,
+  AccordionSummary,
+  AccordionDetails,
+  CircularProgress,
+} from '@material-ui/core';
+import { useMapOverlayMapData, useMapContext } from '../utils';
 import { Entity } from '../../../types';
-import { useMapOverlays } from '../../../api/queries';
-import { MOBILE_BREAKPOINT } from '../../../constants';
-import { useGAEffect } from '../../../utils';
+import { useExportMapOverlay } from '../../../api/mutations';
+import { useEntity, useMapOverlays, useProject, useUser } from '../../../api/queries';
+import { MOBILE_BREAKPOINT, URL_SEARCH_PARAMS } from '../../../constants';
+import { convertDateRangeToUrlPeriodString, useDateRanges, useGAEffect } from '../../../utils';
 import { MapTableModal } from './MapTableModal';
 import { MapOverlayList } from './MapOverlayList';
 import { MapOverlayDatePicker } from './MapOverlayDatePicker';
 import { MapOverlaySelectorTitle } from './MapOverlaySelectorTitle';
 
-const MapTableButton = styled(IconButton)`
-  margin: -0.625rem -0.625rem -0.625rem 0;
-  padding: 0.5rem 0.325rem 0.5rem 0.75rem;
-  color: white;
+const MapButton = styled(IconButton)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  padding: 0.1rem;
+  & + & {
+    margin-inline-start: 0.5rem;
+  }
+  .MuiSvgIcon-root {
+    font-size: 1.3rem;
+  }
 `;
 
 const MaxHeightContainer = styled.div`
@@ -47,7 +60,7 @@ const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.9rem 1rem;
+  padding: 0.8rem 1rem;
   background-color: ${({ theme }) => theme.palette.secondary.main};
   border-radius: 5px 5px 0 0;
   pointer-events: auto;
@@ -61,12 +74,6 @@ const Heading = styled(Typography).attrs({
   font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
 `;
 
-const TableAssignmentIcon = styled(Assignment)`
-  margin-right: 0.5rem;
-  width: 1.2rem;
-  cursor: pointer;
-`;
-
 const Container = styled(MaxHeightContainer)`
   border-radius: 0 0 5px 5px;
   // Set pointer events on the container rather than higher up so that it only applies to the open menu
@@ -153,19 +160,69 @@ const LatestDataText = styled(Typography)`
   line-height: 1.3;
 `;
 
+const LoadingSpinner = styled(CircularProgress).attrs({
+  size: 16,
+})`
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+
+const ErrorAlert = styled(SmallAlert)`
+  padding-inline-end: 0.5rem;
+  .MuiAlert-message {
+    display: flex;
+    position: relative;
+    span {
+      width: 85%;
+    }
+  }
+`;
+
+const ErrorCloseButton = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.2rem;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+
 interface DesktopMapOverlaySelectorProps {
   entityName?: Entity['name'];
   overlayLibraryOpen: boolean;
   toggleOverlayLibrary: () => void;
+  hiddenValues: LegendProps['hiddenValues'];
+  activeTileSet: {
+    key: string;
+    label: string;
+    thumbnail: string;
+    url: string;
+  };
 }
 
 export const DesktopMapOverlaySelector = ({
   overlayLibraryOpen,
   toggleOverlayLibrary,
+  hiddenValues,
+  activeTileSet,
 }: DesktopMapOverlaySelectorProps) => {
   const { projectCode, entityCode } = useParams();
   const { hasMapOverlays, selectedOverlay } = useMapOverlays(projectCode, entityCode);
+  const { data: project } = useProject(projectCode);
+  const { data: entity } = useEntity(projectCode, entityCode);
   const { period } = useMapOverlayMapData();
+  const { map } = useMapContext();
+  const { isLoggedIn } = useUser();
+  const exportFileName = `${project?.name}-${entity?.name}-${selectedOverlay?.code}-map-overlay-export`;
+  const {
+    mutate: exportMapOverlay,
+    isLoading: isExporting,
+    error,
+    reset,
+  } = useExportMapOverlay(exportFileName);
+  const { startDate, endDate } = useDateRanges(
+    URL_SEARCH_PARAMS.MAP_OVERLAY_PERIOD,
+    selectedOverlay,
+  );
+
   const [mapModalOpen, setMapModalOpen] = useState(false);
   // This only fires when the selected overlay changes. Because this is always rendered, as is the mobile overlay selector, we only need this in one place
   useGAEffect('MapOverlays', 'Change', selectedOverlay?.name);
@@ -173,6 +230,47 @@ export const DesktopMapOverlaySelector = ({
     setMapModalOpen(!mapModalOpen);
   };
 
+  // Pass the explicit date range to the export function, because the server may not have the correct time zone when the default date range is used
+  const getMapOverlayPeriodForExport = (): string | undefined => {
+    const periodGranularity = GRANULARITY_CONFIG[
+      selectedOverlay?.periodGranularity as keyof typeof GRANULARITY_CONFIG
+    ]?.momentUnit as moment.unitOfTime.StartOf;
+    // if the overlay has no period granularity, return undefined
+    if (!periodGranularity) return undefined;
+    const periodStartDate = moment(startDate).startOf(periodGranularity);
+    const periodEndDate = moment(endDate).endOf(periodGranularity);
+    const urlPeriodString = convertDateRangeToUrlPeriodString({
+      startDate: periodStartDate,
+      endDate: periodEndDate,
+    });
+    return urlPeriodString;
+  };
+
+  const onExportMapOverlay = () => {
+    if (!map) throw new Error('Map is not ready');
+    const urlPeriodString = getMapOverlayPeriodForExport();
+    exportMapOverlay({
+      projectCode,
+      entityCode,
+      mapOverlayCode: selectedOverlay?.code,
+      center: map.getCenter(),
+      zoom: map.getZoom(),
+      hiddenValues,
+      tileset: activeTileSet.url,
+      mapOverlayPeriod: urlPeriodString,
+    });
+  };
+
+  const getExportTooltip = () => {
+    if (isExporting) {
+      return '';
+    }
+
+    return 'Export map overlay as PDF';
+  };
+
+  const exportTooltip = getExportTooltip();
+
   return (
     <>
       {mapModalOpen && <MapTableModal onClose={toggleMapTableModal} />}
@@ -180,15 +278,36 @@ export const DesktopMapOverlaySelector = ({
         <Header>
           <Heading>Map Overlays</Heading>
           {selectedOverlay && (
-            <Tooltip arrow interactive placement="top" title="Generate Report">
-              <MapTableButton onClick={toggleMapTableModal}>
-                <TableAssignmentIcon />
-              </MapTableButton>
-            </Tooltip>
+            <div>
+              {isLoggedIn && (
+                <MapButton onClick={onExportMapOverlay} disabled={isExporting || !map}>
+                  {isExporting ? (
+                    <LoadingSpinner />
+                  ) : (
+                    <Tooltip arrow placement="top" title={exportTooltip}>
+                      <GetApp />
+                    </Tooltip>
+                  )}
+                </MapButton>
+              )}
+              <Tooltip arrow interactive placement="top" title="Generate report">
+                <MapButton onClick={toggleMapTableModal}>
+                  <Assignment />
+                </MapButton>
+              </Tooltip>
+            </div>
           )}
         </Header>
         <Container>
           <TitleWrapper>
+            {error && (
+              <ErrorAlert severity="error">
+                <span>{error.message}</span>
+                <ErrorCloseButton onClick={reset} title="Clear error">
+                  <Close />
+                </ErrorCloseButton>
+              </ErrorAlert>
+            )}
             <MapOverlaySelectorTitle />
             <MapOverlayDatePicker />
           </TitleWrapper>
diff --git a/packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx b/packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx
index 51c58290b9..6b41b65e6a 100644
--- a/packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx
+++ b/packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelector.tsx
@@ -5,10 +5,22 @@
 
 import React, { useState } from 'react';
 import { ErrorBoundary } from '@tupaia/ui-components';
+import { LegendProps } from '@tupaia/ui-map-components';
 import { DesktopMapOverlaySelector } from './DesktopMapOverlaySelector';
 import { MobileMapOverlaySelector } from './MobileMapOverlaySelector';
 
-export const MapOverlaySelector = () => {
+export const MapOverlaySelector = ({
+  hiddenValues,
+  activeTileSet,
+}: {
+  hiddenValues: LegendProps['hiddenValues'];
+  activeTileSet: {
+    key: string;
+    label: string;
+    thumbnail: string;
+    url: string;
+  };
+}) => {
   const [overlayLibraryOpen, setOverlayLibraryOpen] = useState(false);
 
   const toggleOverlayLibrary = () => {
@@ -24,6 +36,8 @@ export const MapOverlaySelector = () => {
       <DesktopMapOverlaySelector
         overlayLibraryOpen={overlayLibraryOpen}
         toggleOverlayLibrary={toggleOverlayLibrary}
+        hiddenValues={hiddenValues}
+        activeTileSet={activeTileSet}
       />
     </ErrorBoundary>
   );
diff --git a/packages/tupaia-web/src/features/Map/MapOverlaysLayer/MapOverlaysLayer.tsx b/packages/tupaia-web/src/features/Map/MapOverlaysLayer/MapOverlaysLayer.tsx
index ea8433f892..8982db5802 100644
--- a/packages/tupaia-web/src/features/Map/MapOverlaysLayer/MapOverlaysLayer.tsx
+++ b/packages/tupaia-web/src/features/Map/MapOverlaysLayer/MapOverlaysLayer.tsx
@@ -4,10 +4,11 @@
  */
 
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router';
+import { useMatch, useParams } from 'react-router';
 import { useMap } from 'react-leaflet';
 import { LegendProps } from '@tupaia/ui-map-components';
 import { useEntity } from '../../../api/queries';
+import { MAP_OVERLAY_EXPORT_ROUTE } from '../../../constants';
 import { useMapOverlayMapData } from '../utils';
 import { PolygonLayer } from './PolygonLayer';
 import { MarkerLayer } from './MarkerLayer';
@@ -20,9 +21,11 @@ const useZoomToEntity = () => {
   const { data: entity } = useEntity(projectCode, entityCode);
   const map = useMap();
 
+  const isExport = !!useMatch(MAP_OVERLAY_EXPORT_ROUTE);
+
   // This is a replacement for the map positioning being handled in the ui-map-components LeafletMap file. We are doing this because we need access to the user's current zoom level, and are also slowly moving away from class based components to use hooks instead.
   useEffect(() => {
-    if (!entity || !map || (!entity.point && !entity.bounds && !entity.region)) return;
+    if (!entity || !map || (!entity.point && !entity.bounds && !entity.region) || isExport) return;
 
     if (entity.bounds) {
       map.flyToBounds(entity.bounds, {
diff --git a/packages/tupaia-web/src/features/Map/index.ts b/packages/tupaia-web/src/features/Map/index.ts
index b7d03570cf..8cfd6e227e 100644
--- a/packages/tupaia-web/src/features/Map/index.ts
+++ b/packages/tupaia-web/src/features/Map/index.ts
@@ -4,3 +4,6 @@
  */
 
 export { Map } from './Map';
+export { MapOverlaysLayer } from './MapOverlaysLayer';
+export { Legend } from './MapLegend';
+export { useMapOverlayMapData } from './utils';
diff --git a/packages/tupaia-web/src/features/Map/utils/index.ts b/packages/tupaia-web/src/features/Map/utils/index.ts
index 27c66e9edf..c315723182 100644
--- a/packages/tupaia-web/src/features/Map/utils/index.ts
+++ b/packages/tupaia-web/src/features/Map/utils/index.ts
@@ -8,3 +8,5 @@ export { useHiddenMapValues } from './useHiddenMapValues';
 export { useMapOverlayTableData } from './useMapOverlayTableData';
 export { useMapOverlayMapData } from './useMapOverlayMapData';
 export { useNavigateToEntity } from './useNavigateToEntity';
+export { useMapContext, MapContextProvider } from './mapContext';
+export { useTilesets } from './useTilesets';
diff --git a/packages/tupaia-web/src/features/Map/utils/mapContext.tsx b/packages/tupaia-web/src/features/Map/utils/mapContext.tsx
new file mode 100644
index 0000000000..148d37b4d9
--- /dev/null
+++ b/packages/tupaia-web/src/features/Map/utils/mapContext.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode, useContext } from 'react';
+import { Map } from 'leaflet';
+import { createContext, useState } from 'react';
+
+const defaultMapContext = {
+  map: null,
+  setMap: () => {},
+} as {
+  map: Map | null;
+  setMap: (map: Map | null) => void;
+};
+
+const MapContext = createContext(defaultMapContext);
+
+/**
+ * This is a context for the leaflet map. It is a workaround for the fact that we can't use react-leaflet's `useMap` inside the map overlay selector because the selector needs to be rendered outside of the map component to avoid interfering with the map's mouse events.
+ */
+export const MapContextProvider = ({ children }: { children: ReactNode }) => {
+  const [map, setMap] = useState<Map | null>(null);
+
+  return <MapContext.Provider value={{ map, setMap }}>{children}</MapContext.Provider>;
+};
+
+export const useMapContext = () => useContext(MapContext);
diff --git a/packages/tupaia-web/src/features/Map/utils/useTilesets.tsx b/packages/tupaia-web/src/features/Map/utils/useTilesets.tsx
new file mode 100644
index 0000000000..f74e9eb00a
--- /dev/null
+++ b/packages/tupaia-web/src/features/Map/utils/useTilesets.tsx
@@ -0,0 +1,53 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
+import { DEFAULT_TILESETS, getAutoTileSet } from '@tupaia/ui-map-components';
+import { CUSTOM_TILE_SETS } from '../../../constants';
+import { useProject } from '../../../api/queries';
+import { useGAEffect } from '../../../utils';
+
+export const useTilesets = () => {
+  const { projectCode } = useParams();
+  const { data: project } = useProject(projectCode);
+  const initialTileSet = getAutoTileSet();
+  const [activeTileSet, setActiveTileSet] = useState(initialTileSet);
+  const { tileSets = '' } = project?.config || {};
+  const customTilesetNames = tileSets.split(',');
+  const customTileSets = customTilesetNames
+    .map(
+      tileset =>
+        CUSTOM_TILE_SETS.find(({ key }) => key === tileset) as (typeof CUSTOM_TILE_SETS)[0],
+    )
+    .filter(item => item);
+  const defaultTileSets = [DEFAULT_TILESETS.osm, DEFAULT_TILESETS.satellite];
+  const availableTileSets = [...defaultTileSets, ...customTileSets];
+
+  useGAEffect('Map', 'Change Tile Set', activeTileSet?.label);
+
+  const onTileSetChange = (tileSetKey: string) => {
+    const newActiveTileSet = availableTileSets.find(
+      ({ key }) => key === tileSetKey,
+    ) as (typeof CUSTOM_TILE_SETS)[0];
+    setActiveTileSet(newActiveTileSet);
+  };
+
+  useEffect(() => {
+    if (
+      activeTileSet &&
+      availableTileSets.length > 0 &&
+      !availableTileSets.some(({ key }) => key === activeTileSet.key)
+    ) {
+      setActiveTileSet(initialTileSet);
+    }
+  }, [JSON.stringify(availableTileSets)]);
+
+  return {
+    availableTileSets,
+    activeTileSet,
+    onTileSetChange,
+  };
+};
diff --git a/packages/tupaia-web/src/utils/downloadPDF.ts b/packages/tupaia-web/src/utils/downloadPDF.ts
new file mode 100644
index 0000000000..8d8d3c80d2
--- /dev/null
+++ b/packages/tupaia-web/src/utils/downloadPDF.ts
@@ -0,0 +1,5 @@
+import downloadJs from 'downloadjs';
+
+export const downloadPDF = (data: Blob, exportFileName: string) => {
+  downloadJs(data, `${exportFileName}.pdf`);
+};
diff --git a/packages/tupaia-web/src/utils/index.ts b/packages/tupaia-web/src/utils/index.ts
index d9fbef417c..095192f6d4 100644
--- a/packages/tupaia-web/src/utils/index.ts
+++ b/packages/tupaia-web/src/utils/index.ts
@@ -7,7 +7,7 @@ export { getProjectAccessType } from './getProjectAccessType';
 export { removeUrlSearchParams } from './removeUrlSearchParams';
 export { useModal } from './useModal';
 export { useEntityLink } from './useEntityLink';
-export { useDateRanges } from './useDateRanges';
+export { useDateRanges, convertDateRangeToUrlPeriodString } from './useDateRanges';
 export { gaEvent } from './ga';
 export { transformDownloadLink } from './transformDownloadLink';
 export { useDebounce } from './useDebounce';
@@ -15,3 +15,4 @@ export { getDefaultDashboard } from './getDefaultDashboard';
 export { useGAEffect } from './useGAEffect';
 export { useUrlLoginToken } from './useUrlLoginToken';
 export { getTopBarHeight, getMobileTopBarHeight } from './getTopBarHeight';
+export { downloadPDF } from './downloadPDF';
diff --git a/packages/tupaia-web/src/utils/useDateRanges.ts b/packages/tupaia-web/src/utils/useDateRanges.ts
index 466806bdc8..f1f7f1c2e6 100644
--- a/packages/tupaia-web/src/utils/useDateRanges.ts
+++ b/packages/tupaia-web/src/utils/useDateRanges.ts
@@ -15,7 +15,7 @@ import { DEFAULT_PERIOD_PARAM_STRING } from '../constants';
 type SelectableMapOverlay = TupaiaWebMapOverlaysRequest.TranslatedMapOverlay;
 
 // converts the date range to a URL period string
-const convertDateRangeToUrlPeriodString = (
+export const convertDateRangeToUrlPeriodString = (
   {
     startDate,
     endDate,
diff --git a/packages/tupaia-web/src/views/PDFExport.tsx b/packages/tupaia-web/src/views/DashboardPDFExport.tsx
similarity index 96%
rename from packages/tupaia-web/src/views/PDFExport.tsx
rename to packages/tupaia-web/src/views/DashboardPDFExport.tsx
index e88266a1ca..92a761f6de 100644
--- a/packages/tupaia-web/src/views/PDFExport.tsx
+++ b/packages/tupaia-web/src/views/DashboardPDFExport.tsx
@@ -19,7 +19,7 @@ const Parent = styled.div<{ $isPreview?: boolean }>`
   ${({ $isPreview }) => ($isPreview ? `aspect-ratio: ${A4_RATIO};` : '')};
 `;
 
-interface PDFExportProps {
+interface DashboardPDFExportProps {
   selectedDashboardItems?: TupaiaWebExportDashboardRequest.ReqBody['selectedDashboardItems'];
   isPreview?: boolean;
 }
@@ -27,10 +27,10 @@ interface PDFExportProps {
 /**
  * This is the view that gets hit by puppeteer when generating a PDF.
  */
-export const PDFExport = ({
+export const DashboardPDFExport = ({
   selectedDashboardItems: propsSelectedDashboardItems,
   isPreview = false,
-}: PDFExportProps) => {
+}: DashboardPDFExportProps) => {
   // Hacky way to change default background color without touching root css. Only apply when generating the pdf, not when in preview mode as it changes the display
   if (!isPreview) {
     document.body.style.backgroundColor = 'white';
diff --git a/packages/tupaia-web/src/views/MapOverlayPDFExport.tsx b/packages/tupaia-web/src/views/MapOverlayPDFExport.tsx
new file mode 100644
index 0000000000..3e943c24a5
--- /dev/null
+++ b/packages/tupaia-web/src/views/MapOverlayPDFExport.tsx
@@ -0,0 +1,183 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+import { useParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
+import { Typography } from '@material-ui/core';
+import { LeafletMap, TileLayer, getAutoTileSet } from '@tupaia/ui-map-components';
+import { A4_PAGE_HEIGHT_PX, A4_PAGE_WIDTH_PX } from '@tupaia/ui-components';
+import { MapOverlaysLayer, Legend } from '../features/Map';
+import { useMapOverlays, useProject } from '../api/queries';
+import { DEFAULT_PERIOD_PARAM_STRING, URL_SEARCH_PARAMS } from '../constants';
+import { useDateRanges } from '../utils';
+
+const Parent = styled.div`
+  // reverse the width and height to make the map landscape
+  height: ${A4_PAGE_WIDTH_PX - 2}px;
+  width: ${A4_PAGE_HEIGHT_PX}px;
+  position: relative;
+  overflow: hidden;
+`;
+
+const MapContainer = styled.div`
+  height: 100%;
+  transition: width 0.5s ease;
+  width: 100%;
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .leaflet-container {
+    min-height: 15rem;
+    // This is to compensate for the pdf resolution scaling the map down to look smaller than what the screen was displaying. We cannot always do this via map zoom, because the map zoom is limited to the tile set zoom levels.
+    zoom: 1.5;
+  }
+`;
+
+const StyledMap = styled(LeafletMap)`
+  height: 100%;
+  width: 100%;
+  flex: 1;
+
+  .leaflet-pane {
+    // Set z-index of map pane to 0 so that it doesn't overlap with the sidebar and the map controls
+    z-index: 0;
+  }
+
+  .leaflet-bottom {
+    // Set the z-index to 1 so it doesn't overlap dashboard controls on mobile
+    z-index: 1;
+  }
+`;
+
+const LegendWrapper = styled.div`
+  position: absolute;
+  bottom: 2.8rem;
+  left: 2.8rem;
+`;
+
+const MapOverlayInfoContainer = styled.div`
+  position: absolute;
+  top: 1.3rem;
+  left: 2.1rem;
+  background-color: white;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  max-width: 27rem;
+  min-width: 20rem;
+  padding-inline: 1.3rem;
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
+`;
+
+const MapOverlayInfoText = styled(Typography)`
+  font-size: 0.875rem;
+  font-weight: 500;
+`;
+
+const MapOverlayName = styled(MapOverlayInfoText).attrs({
+  variant: 'h2',
+})`
+  color: black;
+  font-size: 1rem;
+`;
+
+const LatestDataText = styled(MapOverlayInfoText)`
+  color: ${({ theme }) => theme.palette.divider};
+  margin-block-start: 0.4rem;
+`;
+
+const LogoWrapper = styled.div`
+  width: 5rem;
+  height: 5rem;
+  border-right: 1px solid ${({ theme }) => theme.palette.divider};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline-end: 0.8rem;
+`;
+const ProjectLogo = styled.img`
+  max-width: 100%;
+  height: auto;
+`;
+
+const TextWrapper = styled.div`
+  margin-inline-start: 0.8rem;
+  width: calc(100% - 5rem);
+`;
+
+const useExportParams = () => {
+  const [urlSearchParams] = useSearchParams();
+
+  const initialTileSet = getAutoTileSet();
+  const tileset = urlSearchParams.get('tileset') ?? initialTileSet.url;
+  const urlCenter = urlSearchParams.get('center');
+  const urlZoom = urlSearchParams.get('zoom');
+  const zoom = urlZoom ? parseInt(urlZoom) : 5;
+  const center = urlCenter ? JSON.parse(urlCenter) : undefined;
+  const urlHiddenValues = urlSearchParams.get('hiddenValues');
+  const hiddenValues = urlHiddenValues ? JSON.parse(urlHiddenValues) : undefined;
+  const period =
+    urlSearchParams.get(URL_SEARCH_PARAMS.MAP_OVERLAY_PERIOD) ?? DEFAULT_PERIOD_PARAM_STRING;
+
+  const locale = urlSearchParams.get('locale') ?? 'en-AU';
+
+  return { tileset, zoom, center, hiddenValues, period, locale };
+};
+
+/**
+ * This is the view that gets hit by puppeteer when generating a map overlay PDF.
+ */
+export const MapOverlayPDFExport = () => {
+  const { projectCode, entityCode } = useParams();
+
+  const { data: project } = useProject(projectCode);
+
+  const { selectedOverlay } = useMapOverlays(projectCode, entityCode);
+  const { tileset, zoom, center, hiddenValues, locale } = useExportParams();
+
+  const { startDate, endDate } = useDateRanges(
+    URL_SEARCH_PARAMS.MAP_OVERLAY_PERIOD,
+    selectedOverlay,
+  );
+
+  const getDateRangeString = () => {
+    if (startDate && endDate) {
+      const startDateString = moment(startDate).toDate().toLocaleDateString(locale);
+      const endDateString = moment(endDate).toDate().toLocaleDateString(locale);
+      return `${startDateString} - ${endDateString}`;
+    }
+    return '';
+  };
+
+  const dateRangeString = getDateRangeString();
+
+  return (
+    <Parent>
+      <MapContainer>
+        <StyledMap shouldSnapToPosition center={center} zoom={zoom}>
+          <TileLayer tileSetUrl={tileset} showAttribution={false} />
+          <MapOverlaysLayer hiddenValues={hiddenValues} />
+        </StyledMap>
+      </MapContainer>
+      <MapOverlayInfoContainer>
+        <LogoWrapper>
+          <ProjectLogo src={project?.logoUrl || '/tupaia-logo-dark.svg'} alt={project?.name} />
+        </LogoWrapper>
+        <TextWrapper>
+          <MapOverlayName>{selectedOverlay?.name}</MapOverlayName>
+          {dateRangeString && <LatestDataText>Date of data: {dateRangeString}</LatestDataText>}
+        </TextWrapper>
+      </MapOverlayInfoContainer>
+      <LegendWrapper>
+        <Legend hiddenValues={hiddenValues} setValueHidden={() => {}} isExport />
+      </LegendWrapper>
+    </Parent>
+  );
+};
diff --git a/packages/tupaia-web/src/views/index.ts b/packages/tupaia-web/src/views/index.ts
index 72f790f818..c1b6549b68 100644
--- a/packages/tupaia-web/src/views/index.ts
+++ b/packages/tupaia-web/src/views/index.ts
@@ -12,5 +12,6 @@ export { RequestProjectAccessModal } from './RequestProjectAccessModal';
 export { ForgotPasswordModal } from './ForgotPasswordModal';
 export { EmailVerificationModal } from './EmailVerificationModal';
 export { VerifyEmailResendModal } from './VerifyEmailResendModal';
-export { PDFExport } from './PDFExport';
+export { DashboardPDFExport } from './DashboardPDFExport';
 export { Unsubscribe } from './Unsubscribe';
+export { MapOverlayPDFExport } from './MapOverlayPDFExport';
diff --git a/packages/types/generate-schemas.ts b/packages/types/generate-schemas.ts
index 48766f46c4..97b0f9e06c 100644
--- a/packages/types/generate-schemas.ts
+++ b/packages/types/generate-schemas.ts
@@ -16,12 +16,10 @@ const settings: TJS.PartialArgs = {
 
 function getTsFiles(dir: string): string[] {
   const dirContents = fs.readdirSync(dir);
-  const files = dirContents
-    .map(dirItem => {
-      const res = resolve(dir, dirItem);
-      return fs.statSync(res).isDirectory() ? getTsFiles(res) : res;
-    })
-    .flat();
+  const files = dirContents.flatMap(dirItem => {
+    const res = resolve(dir, dirItem);
+    return fs.statSync(res).isDirectory() ? getTsFiles(res) : res;
+  });
 
   return files.filter(fileName => fileName.endsWith('.ts'));
 }
diff --git a/packages/types/src/types/requests/index.ts b/packages/types/src/types/requests/index.ts
index 5b2fb86552..8a82756dbc 100644
--- a/packages/types/src/types/requests/index.ts
+++ b/packages/types/src/types/requests/index.ts
@@ -38,6 +38,7 @@ export {
   TupaiaWebSubscribeDashboardRequest,
   TupaiaWebUnsubscribeDashboardRequest,
   TupaiaWebUnsubscribeDashboardMailingListRequest,
+  TupaiaWebExportMapOverlayRequest,
   TupaiaWebExportSurveyDataRequest,
 } from './tupaia-web-server';
 export { ProjectResponse, WebServerEntityRequest, WebServerProjectRequest } from './web-server';
diff --git a/packages/types/src/types/requests/tupaia-web-server/ExportMapOverlayRequest.ts b/packages/types/src/types/requests/tupaia-web-server/ExportMapOverlayRequest.ts
new file mode 100644
index 0000000000..0f3bb23e8e
--- /dev/null
+++ b/packages/types/src/types/requests/tupaia-web-server/ExportMapOverlayRequest.ts
@@ -0,0 +1,28 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { MapOverlay } from '../../models';
+
+export interface Params {
+  projectCode: string;
+  entityCode: string;
+  mapOverlayCode: MapOverlay['code'];
+}
+export interface ResBody {
+  contents: Buffer;
+  filePath?: string;
+  type: string;
+}
+export type ReqBody = {
+  cookieDomain: string;
+  baseUrl: string;
+  center: string;
+  zoom: number;
+  tileset: string;
+  hiddenValues: string;
+  mapOverlayPeriod?: string;
+  locale?: string;
+};
+export type ReqQuery = Record<string, string>;
diff --git a/packages/types/src/types/requests/tupaia-web-server/index.ts b/packages/types/src/types/requests/tupaia-web-server/index.ts
index ec851bfcda..2cc345915d 100644
--- a/packages/types/src/types/requests/tupaia-web-server/index.ts
+++ b/packages/types/src/types/requests/tupaia-web-server/index.ts
@@ -20,4 +20,5 @@ export * as TupaiaWebUserRequest from './UserRequest';
 export * as TupaiaWebSubscribeDashboardRequest from './SubscribeDashboardRequest';
 export * as TupaiaWebUnsubscribeDashboardRequest from './UnsubscribeDashboardRequest';
 export * as TupaiaWebUnsubscribeDashboardMailingListRequest from './UnsubscribeDashboardMailingListRequest';
+export * as TupaiaWebExportMapOverlayRequest from './ExportMapOverlayRequest';
 export * as TupaiaWebExportSurveyDataRequest from './ExportSurveyDataRequest';
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 2cf0f58778..4002fce439 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -44,6 +44,7 @@
     "react": "^16.13.1",
     "react-ace": "^10.1.0",
     "react-dom": "^16.13.1",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^6.15.1",
     "react-router-dom": "^5.1.2",
     "react-router-dom-v6": "npm:react-router-dom@6.3.0",
diff --git a/packages/ui-components/src/components/Alert.tsx b/packages/ui-components/src/components/Alert.tsx
index 6a3aa56a32..6ace97a69f 100644
--- a/packages/ui-components/src/components/Alert.tsx
+++ b/packages/ui-components/src/components/Alert.tsx
@@ -7,6 +7,7 @@ import React, { forwardRef } from 'react';
 import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
 import styled from 'styled-components';
 import { CheckCircle, Warning } from '@material-ui/icons';
+import { Error } from './Icons';
 
 const StyledAlert = styled(MuiAlert)`
   border-radius: 0;
@@ -22,7 +23,6 @@ const StyledAlert = styled(MuiAlert)`
 
   &.MuiAlert-standardError {
     background: ${props => props.theme.palette.error.light};
-    color: ${props => props.theme.palette.error.main};
   }
 `;
 
@@ -33,7 +33,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       severity = 'success',
       iconMapping = {
         success: <CheckCircle />,
-        error: <Warning />,
+        error: <Error />,
         warning: <Warning />,
       },
       ...props
@@ -53,7 +53,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
 const StyledSmallAlert = styled(StyledAlert)`
   font-size: 0.875rem;
   border-radius: 3px;
-  padding: 0.5rem 1.25rem 0.5rem 1rem;
+  padding-block: 0;
+  padding-inline: 1rem;
   box-shadow: none;
 
   .MuiAlert-icon {
@@ -69,7 +70,7 @@ export const SmallAlert = ({
 
   iconMapping = {
     success: <CheckCircle fontSize="inherit" />,
-    error: <Warning fontSize="inherit" />,
+    error: <Error fontSize="inherit" />,
     warning: <Warning fontSize="inherit" />,
   },
 
diff --git a/packages/ui-components/src/components/FilterableTable/FilterableTable.tsx b/packages/ui-components/src/components/FilterableTable/FilterableTable.tsx
index 901cef2cfc..7c2ceae9d0 100644
--- a/packages/ui-components/src/components/FilterableTable/FilterableTable.tsx
+++ b/packages/ui-components/src/components/FilterableTable/FilterableTable.tsx
@@ -108,20 +108,17 @@ export const FilterableTable = ({
 
   const displayFilterRow = visibleColumns.some(column => column.filterable !== false);
 
-  const updateSorting = (id: string) => {
+  const updateSorting = (id: string, isDesc?: boolean) => {
     const currentSorting = sorting.find(sort => sort.id === id);
-    const getNewSorting = () => {
-      // if the column is not sorted, add it to the sorting array, ascending first
-      if (!currentSorting) return [...sorting, { id, desc: false }];
-      // If the column is sorted descending, remove it from the sorting array, so it can have an 'off' state
-      if (currentSorting.desc) return sorting.filter(sort => sort.id !== id);
-      // If the column is sorted ascending, toggle it to descending
-      return sorting.map(sort => (sort.id === id ? { ...sort, desc: !sort.desc } : sort));
-    };
+    if (!currentSorting) {
+      return onChangeSorting([{ id, desc: false }]);
+    }
 
-    const newSorting = getNewSorting();
+    if (isDesc) {
+      return onChangeSorting([]);
+    }
 
-    onChangeSorting(newSorting);
+    return onChangeSorting([{ id, desc: true }]);
   };
 
   const getSortedConfig = (id: string) => {
@@ -161,7 +158,7 @@ export const FilterableTable = ({
                             active={!!sortedConfig}
                             direction={sortedConfig?.desc ? 'asc' : 'desc'}
                             IconComponent={KeyboardArrowDown}
-                            onClick={() => updateSorting(id)}
+                            onClick={() => updateSorting(id, sortedConfig?.desc)}
                           />
                         )}
                       </HeaderDisplayCell>
diff --git a/packages/ui-components/src/components/Icons/Error.tsx b/packages/ui-components/src/components/Icons/Error.tsx
new file mode 100644
index 0000000000..71cf56c5c9
--- /dev/null
+++ b/packages/ui-components/src/components/Icons/Error.tsx
@@ -0,0 +1,30 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@material-ui/core';
+
+export const Error = (props: SvgIconProps) => (
+  <SvgIcon
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    fill="none"
+  >
+    <path
+      d="M8.88702 0.789801C8.74645 0.549671 8.54427 0.350265 8.3008 0.211626C8.05732 0.0729875 7.78114 0 7.5 0C7.21886 0 6.94268 0.0729875 6.6992 0.211626C6.45573 0.350265 6.25355 0.549671 6.11298 0.789801L0.214565 10.866C0.0739992 11.1061 -2.04831e-06 11.3785 0 11.6558C2.04839e-06 11.933 0.0740072 12.2054 0.214577 12.4455C0.355147 12.6857 0.557328 12.8851 0.800799 13.0237C1.04427 13.1623 1.32045 13.2353 1.60159 13.2353H13.3984C13.6795 13.2353 13.9557 13.1623 14.1992 13.0237C14.4427 12.8851 14.6449 12.6857 14.7854 12.4455C14.926 12.2054 15 11.933 15 11.6558C15 11.3785 14.926 11.1061 14.7854 10.866L8.88702 0.789801ZM13.9192 11.9522C13.8673 12.0431 13.7915 12.1186 13.6999 12.1708C13.6083 12.223 13.5042 12.2499 13.3984 12.2488H1.60159C1.49603 12.2488 1.39234 12.2214 1.30092 12.1694C1.20951 12.1173 1.1336 12.0424 1.08082 11.9523C1.02804 11.8621 1.00025 11.7599 1.00025 11.6558C1.00025 11.5516 1.02803 11.4494 1.0808 11.3592L6.97922 1.28304C7.03199 1.19288 7.10791 1.11801 7.19932 1.06595C7.29074 1.01389 7.39444 0.986487 7.5 0.986487C7.60556 0.986487 7.70926 1.01389 7.80068 1.06595C7.89209 1.11801 7.96801 1.19288 8.02078 1.28304L13.9192 11.3592C13.973 11.449 14.0014 11.5514 14.0014 11.6557C14.0014 11.76 13.973 11.8625 13.9192 11.9522Z"
+      fill="#F76853"
+    />
+    <path
+      d="M7.50011 8.9007C7.63274 8.90069 7.75994 8.84872 7.85373 8.75623C7.94752 8.66373 8.00021 8.53827 8.00022 8.40746V4.05722C8.00022 3.9264 7.94753 3.80094 7.85374 3.70844C7.75995 3.61594 7.63275 3.56397 7.50011 3.56397C7.36747 3.56397 7.24027 3.61594 7.14648 3.70844C7.05269 3.80094 7 3.9264 7 4.05722V8.40746C7.00001 8.53827 7.0527 8.66373 7.14649 8.75623C7.24027 8.84872 7.36747 8.90069 7.50011 8.9007Z"
+      fill="#F76853"
+    />
+    <path
+      d="M7.49999 9.89267C7.39531 9.89267 7.29297 9.92329 7.20593 9.98065C7.11889 10.038 7.05105 10.1195 7.01099 10.2149C6.97093 10.3103 6.96045 10.4153 6.98087 10.5165C7.0013 10.6178 7.05171 10.7108 7.12573 10.7838C7.19976 10.8568 7.29407 10.9066 7.39674 10.9267C7.49942 10.9468 7.60584 10.9365 7.70255 10.897C7.79927 10.8575 7.88193 10.7906 7.94009 10.7047C7.99825 10.6189 8.02929 10.5179 8.02929 10.4147C8.02929 10.3461 8.0156 10.2783 7.989 10.2149C7.9624 10.1516 7.92341 10.094 7.87426 10.0456C7.82511 9.99709 7.76676 9.95864 7.70255 9.93241C7.63833 9.90617 7.5695 9.89267 7.49999 9.89267Z"
+      fill="#F76853"
+    />
+  </SvgIcon>
+);
diff --git a/packages/ui-components/src/components/Icons/index.ts b/packages/ui-components/src/components/Icons/index.ts
index f1013ab2f8..afbf19d396 100644
--- a/packages/ui-components/src/components/Icons/index.ts
+++ b/packages/ui-components/src/components/Icons/index.ts
@@ -12,4 +12,5 @@ export * from './WarningCloud';
 export * from './Virus';
 export * from './TupaiaIcon';
 export * from './ExportIcon';
+export * from './Error';
 export * from './FilePicker';
diff --git a/packages/ui-components/src/components/Inputs/Autocomplete.tsx b/packages/ui-components/src/components/Inputs/Autocomplete.tsx
index 9bcc63869d..3850b23224 100644
--- a/packages/ui-components/src/components/Inputs/Autocomplete.tsx
+++ b/packages/ui-components/src/components/Inputs/Autocomplete.tsx
@@ -56,6 +56,7 @@ export interface BaseAutocompleteProps {
   onChange?: (event: Event, newValue: any) => void;
   getOptionSelected?: (option: any, value: any) => boolean;
   getOptionLabel?: (option: any) => string;
+  renderOption?: (option: any) => JSX.Element;
   placeholder?: string;
   muiProps?: any;
 }
@@ -79,6 +80,7 @@ export const Autocomplete = ({
   label = '',
   getOptionSelected,
   getOptionLabel,
+  renderOption,
   value,
   onChange,
   loading = false,
@@ -111,6 +113,7 @@ export const Autocomplete = ({
     inputValue={inputValue}
     getOptionSelected={getOptionSelected}
     getOptionLabel={getOptionLabel}
+    renderOption={renderOption}
     popupIcon={<KeyboardArrowDown />}
     PaperComponent={StyledPaper}
     renderInput={params => (
diff --git a/packages/ui-components/src/components/Inputs/FileUploadField.tsx b/packages/ui-components/src/components/Inputs/FileUploadField.tsx
index ef4d078a5c..a1cf6d9d99 100644
--- a/packages/ui-components/src/components/Inputs/FileUploadField.tsx
+++ b/packages/ui-components/src/components/Inputs/FileUploadField.tsx
@@ -1,172 +1,290 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React, { useRef, useState } from 'react';
-import { FormLabel } from '@material-ui/core';
-import styled from 'styled-components';
-import MuiFormHelperText from '@material-ui/core/FormHelperText';
+import React, { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { FormHelperText, useTheme } from '@material-ui/core';
+import { useDropzone } from 'react-dropzone';
+import { FilePicker as FilePickerIcon } from '../Icons';
 import { Button } from '../Button';
-import { FlexStart } from '../Layout';
-import { FilePicker } from '../Icons';
 import { InputLabel } from './InputLabel';
 
-const HiddenFileInput = styled.input`
-  display: none; // Hide the input element without applying other styles - setting it to be small and position absolute causes the form to crash when the input is clicked
+const LabelAndTooltip = styled.div`
+  align-items: center;
+  display: flex;
+  margin-block-end: 0.25rem;
 `;
 
-const FileNameAndFileSize = styled.span`
-  font-size: ${props => props.theme.typography.body2.fontSize};
+const Uploader = styled.div`
+  border-radius: 0.1875rem;
+  border: 0.0625rem dashed ${({ theme }) => theme.palette.grey['400']};
+  > * {
+    padding-block: 0.875rem;
+    padding-inline: 1.1rem;
+  }
+`;
+
+const Dropzone = styled.div<{ $isDragActive: boolean; $isDragReject: boolean }>`
+  cursor: pointer;
+  flex-direction: column;
+  inline-size: 100%;
+  padding-block-start: 1.25rem;
+  text-align: center;
+  transition: background-color 100ms ease;
+
+  :hover,
+  :active,
+  :focus-visible {
+    background-color: #f4f9ff;
+  }
+
+  ${({ $isDragActive }) => {
+    if ($isDragActive)
+      return css`
+        background-color: #f4f9ff;
+      `;
+  }}
+`;
+
+const PrimaryLabel = styled.p`
+  font-size: ${({ theme }) => theme.typography.body2.fontSize};
+  font-weight: 500;
+`;
+
+const SecondaryLabel = styled.p`
+  color: ${({ theme }) => theme.palette.grey['600']};
+  font-size: 0.6875rem;
+  font-weight: 400;
+  letter-spacing: 0.03333em;
+`;
+
+const ChooseFileButton = styled.span`
+  color: ${({ theme }) => theme.palette.primary.main};
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const SelectedFileList = styled.ul<{ $doesNeedBorder: boolean }>`
+  list-style-type: none;
+  margin: 0;
+
+  /*
+   * Workaround for accessibility issue with VoiceOver.
+   * See https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
+   */
+  li::before {
+    content: '\\200B'; /* zero-width space */
+  }
+
+  // If top border is always shown, it collides with the top-border of the parent when file
+  // dropzone is hidden
+  ${({ $doesNeedBorder }) =>
+    $doesNeedBorder &&
+    css`
+      border-block-start: 0.0625rem dashed ${({ theme }) => theme.palette.grey['400']};
+    `}
 `;
 
-const FileUploadContainer = styled(FlexStart)`
-  margin-top: 1rem;
+const SelectedFileListItem = styled.li`
+  font-size: ${({ theme }) => theme.typography.body2.fontSize};
+  line-height: 1.2rem; // Match .MuiInputBase-input
 `;
 
 const RemoveButton = styled(Button).attrs({
   variant: 'text',
   color: 'default',
 })`
+  display: inline-block;
   font-weight: 400;
-  text-decoration: underline;
-  padding: 0;
-  margin-left: 0.8rem;
+  margin-block: 0;
+  padding-block: 0;
+  padding-inline: 1.1rem;
+  transition: color 100ms ease;
   .MuiButton-label {
-    font-size: 0.7rem;
+    text-decoration: underline;
+    font-size: 0.6875rem;
+  }
+  &:hover {
+    background-color: transparent;
+    color: ${({ theme }) => theme.palette.primary.main};
   }
 `;
 
 const humanFileSize = (sizeInBytes: number) => {
   const i = sizeInBytes === 0 ? 0 : Math.floor(Math.log(sizeInBytes) / Math.log(1024));
-  return `${(sizeInBytes / 1024 ** i).toFixed(2)} ${['B', 'kB', 'MB', 'GB', 'TB'][i]}`;
+  const valueAsFloat = (sizeInBytes / 1024 ** i).toFixed(2);
+  const unit = ['B', 'kB', 'MB', 'GB', 'TB'][i];
+  const value = unit === 'B' ? sizeInBytes : valueAsFloat;
+
+  return (
+    <>
+      {value}&nbsp;{unit}
+    </>
+  );
 };
 
-interface FileUploadFieldProps {
-  onChange: (
-    event: React.ChangeEvent<HTMLInputElement> | null,
-    fileName?: string,
-    files?: FileList | null | undefined,
-  ) => void;
+export interface FileUploadFieldProps {
+  /**
+   * The parent of {@link FileUploadField} manages state for which files are staged to be uploaded.
+   * This change handler propagates state changes in the {@link FileUploadField} to its parent.
+   */
+  onChange: (files: File[] | FileList | null) => void;
   name: string;
-  fileName: string;
+  /**
+   * In some places, such as DataTrak’s survey review screen, we use a read-only (disabled) version
+   * of the {@link FileUploadField} with a “pre-selected“ file. Since `<input>`’s value cannot be
+   * programmatically set (except to ''), we simply show a filename so it appears as if a file is
+   * selected.
+   */
+  fileName?: string;
   multiple?: boolean;
-  textOnButton?: string;
   label?: string;
   tooltip?: string;
   helperText?: string;
-  showFileSize?: boolean;
   maxSizeInBytes?: number;
   FormHelperTextComponent?: React.ElementType;
   required?: boolean;
-  buttonVariant?: 'text' | 'outlined' | 'contained';
-  accept?: string;
+  accept?: Record<string, string[]>;
+  /**
+   * Puts this component in a read-only mode. This hides the dropzone entirely. Use this prop in
+   * tandem with the `fileName` prop to programmatically show a `FileUploadField` that looks like it
+   * has a file selected.
+   */
+  disabled?: boolean;
 }
 
 export const FileUploadField = ({
-  onChange = () => {},
-  name,
-  fileName,
-  multiple = false,
-  textOnButton,
-  label,
-  tooltip,
+  onChange,
+  FormHelperTextComponent = 'p',
+  accept,
   helperText,
-  showFileSize = false,
+  label,
   maxSizeInBytes,
-  FormHelperTextComponent = 'p',
-  required,
-  buttonVariant = 'contained',
-  accept = '*',
+  multiple = false,
+  name,
+  required = false,
+  tooltip,
+  disabled = false,
+  fileName,
 }: FileUploadFieldProps) => {
-  const inputEl = useRef<HTMLInputElement | null>(null);
-  const text = textOnButton || `Choose file${multiple ? 's' : ''}`;
-
-  const [error, setError] = useState<string | null>(null);
-  const [sizeInBytes, setSizeInBytes] = useState<number | null>(null);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let newName;
-    const input = inputEl.current;
-
-    if (!input || !input.files) return;
-
-    if (input.files.length > 1) {
-      newName = `${input.files.length} files selected`;
-    } else {
-      newName = event.target.value.split('\\').pop();
-    }
-
-    if (maxSizeInBytes) {
-      for (const file of Array.from(input.files)) {
-        const { size: newSizeInBytes } = file;
-        if (newSizeInBytes > maxSizeInBytes) {
-          setSizeInBytes(null);
-          setError(
-            `Error: file is too large: ${humanFileSize(
-              newSizeInBytes,
-            )}. Max file size: ${humanFileSize(maxSizeInBytes)}`,
-          );
-          onChange(event, undefined, null);
-          return;
-        }
-      }
-    }
-
-    if (multiple) {
-      onChange(event, newName, input.files);
-      // We don't support file size label if multiple
-    } else {
-      const [file] = Array.from(input.files);
-      setSizeInBytes(file.size);
-      onChange(event, newName, input.files);
-    }
-    setError(null);
+  if (disabled)
+    return (
+      <Uploader>
+        <SelectedFileList $doesNeedBorder={false}>
+          <SelectedFileListItem>
+            {fileName ?? <em>File uploader disabled</em>}
+            <RemoveButton disabled>Remove</RemoveButton>
+          </SelectedFileListItem>
+        </SelectedFileList>
+      </Uploader>
+    );
+
+  /**
+   * `useDropzone` can provide an `acceptedFiles` array, but it provides no way to programmatically
+   * add/remove elements. We manage file selection state manually for some custom behaviour:
+   *
+   *   1. dropping files ADDS to the selection (rather than replacing it); and
+   *   2. files may be removed individually from the selection.
+   *
+   * This array uses set semantics. See {@link onDropAccepted}.
+   */
+  const [files, setFiles] = useState<File[]>([]);
+  const hasFileSelected = files.length > 0;
+
+  /**
+   * Unions the newly selected files with the existing selection.
+   *
+   * @privateRemarks Cannot rely on `file.name` as a unique identifier, because it is only the
+   * basename. The user may select two files with the same basename from different folders.
+   * Duplicate detection in this function stringifies the whole `File` object because it is unlikely
+   * that two different files will have the same name, size AND last-modified date.
+   *
+   * @param acceptedFiles The newly selected files, provided by `react-dropzone`
+   */
+  const onDropAccepted = (acceptedFiles: File[]) => {
+    const deduped = acceptedFiles.filter(
+      acceptedFile =>
+        !files.map(file => JSON.stringify(file)).includes(JSON.stringify(acceptedFile)),
+    );
+    const newFiles = files.concat(deduped);
+    setFiles(newFiles);
   };
 
-  const removeFile = () => {
-    const input = inputEl.current;
-    if (input) {
-      input.value = '';
-      onChange(null);
-      setSizeInBytes(null);
-    }
+  const removeFile = (fileToRemove: File) => {
+    const newFiles = files.filter(file => JSON.stringify(file) !== JSON.stringify(fileToRemove));
+    setFiles(newFiles);
   };
 
+  /** Propagates file selection changes to parent */
+  useEffect(() => {
+    onChange(files);
+  }, [files]);
+
+  const { fileRejections, getInputProps, getRootProps, isDragActive } = useDropzone({
+    // Explicitly fall back to undefined, because null causes TypeError in Chromium
+    accept: accept ?? undefined,
+    disabled,
+    maxSize: maxSizeInBytes,
+    multiple,
+    onDropAccepted,
+  });
+
+  const { palette } = useTheme();
+
+  const fileOrFiles = multiple ? 'files' : 'file';
+  const getDropzoneLabel = () => {
+    if (isDragActive) return `Drop ${fileOrFiles} here`;
+    return (
+      <>
+        Drag & drop or <ChooseFileButton>choose {fileOrFiles}</ChooseFileButton> to upload
+      </>
+    );
+  };
+
+  const acceptedFileExtensions = accept
+    ? Object.values(accept)
+        .flat()
+        .map(str => str.trim())
+    : null;
+  const acceptedFileTypesLabel = acceptedFileExtensions?.join(' ') ?? 'any';
+
   return (
     <>
-      <FormLabel htmlFor={name}>
-        <InputLabel label={label} tooltip={tooltip} as="span" />
-        <FileUploadContainer>
-          <HiddenFileInput
-            ref={inputEl}
-            id={name}
-            name={name}
-            type="file"
-            onChange={handleChange}
-            value=""
-            multiple={multiple}
-            required={required}
-            accept={accept}
-          />
-
-          {!fileName && (
-            <Button component="span" startIcon={<FilePicker />} variant={buttonVariant}>
-              {text}
-            </Button>
-          )}
-        </FileUploadContainer>
-
-        {error && <MuiFormHelperText error>{error}</MuiFormHelperText>}
-        {helperText && (
-          <MuiFormHelperText component={FormHelperTextComponent}>{helperText}</MuiFormHelperText>
+      <LabelAndTooltip>
+        <InputLabel label={label} tooltip={tooltip} />
+      </LabelAndTooltip>
+      <Uploader>
+        {(!hasFileSelected || multiple) && (
+          <Dropzone {...getRootProps()} $isDragActive={isDragActive}>
+            <input {...getInputProps()} id={name} name={name} required={required} />
+            <FilePickerIcon color={palette.primary.main} />
+            <PrimaryLabel>{getDropzoneLabel()}</PrimaryLabel>
+            <SecondaryLabel>Supported file types: {acceptedFileTypesLabel}</SecondaryLabel>
+          </Dropzone>
         )}
-      </FormLabel>
-      {fileName && (
-        <FileNameAndFileSize>
-          {fileName} {showFileSize && sizeInBytes && `(${humanFileSize(sizeInBytes)})`}
-          <RemoveButton onClick={removeFile}>Remove</RemoveButton>
-        </FileNameAndFileSize>
+        {hasFileSelected && (
+          <SelectedFileList $doesNeedBorder={multiple}>
+            {files.map(file => (
+              <SelectedFileListItem key={file.name}>
+                {file.name} ({humanFileSize(file.size)})
+                <RemoveButton onClick={() => removeFile(file)}>Remove</RemoveButton>
+              </SelectedFileListItem>
+            ))}
+          </SelectedFileList>
+        )}
+      </Uploader>
+      {fileRejections.map(({ file, errors }) =>
+        errors.map(error => (
+          <FormHelperText error key={`${file.name}-${error.code}`}>
+            ‘{file.name}’ not allowed &ndash; {error.message}
+          </FormHelperText>
+        )),
+      )}
+      {helperText && (
+        <FormHelperText component={FormHelperTextComponent}>{helperText}</FormHelperText>
       )}
     </>
   );
diff --git a/packages/ui-components/src/components/Inputs/HexcodeField.tsx b/packages/ui-components/src/components/Inputs/HexcodeField.tsx
index e74c4a0966..ece6fb8042 100644
--- a/packages/ui-components/src/components/Inputs/HexcodeField.tsx
+++ b/packages/ui-components/src/components/Inputs/HexcodeField.tsx
@@ -3,10 +3,6 @@ import { FormHelperText } from '@material-ui/core';
 import styled from 'styled-components';
 import { TextField } from './TextField';
 
-const HexcodeFieldWrapper = styled.div`
-  margin-bottom: 1em;
-`;
-
 const HexcodeFieldContainer = styled.div`
   display: flex;
   align-items: flex-end;
@@ -39,6 +35,8 @@ interface HexcodeFieldProps {
   disabled?: boolean;
   tooltip?: string;
   placeholder?: string;
+  required?: boolean;
+  error?: boolean;
 }
 
 export const HexcodeField = ({
@@ -50,6 +48,8 @@ export const HexcodeField = ({
   disabled,
   tooltip,
   placeholder,
+  required,
+  error,
 }: HexcodeFieldProps) => {
   const handleChangeValue = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value);
@@ -57,7 +57,7 @@ export const HexcodeField = ({
 
   const isValidHexCode = value ? value.match(HEXCODE_PATTERN) : false;
   return (
-    <HexcodeFieldWrapper>
+    <div>
       <HexcodeFieldContainer>
         <HexInput
           label={label}
@@ -71,12 +71,14 @@ export const HexcodeField = ({
             pattern: HEXCODE_PATTERN,
           }}
           placeholder={placeholder}
+          required={required}
+          error={error}
         />
         {isValidHexCode && (
           <HexcodePreview backgroundColor={value} aria-label={`Colour preview for ${label}`} />
         )}
       </HexcodeFieldContainer>
       {helperText && <FormHelperText id={`${id}-helper-text`}>{helperText}</FormHelperText>}
-    </HexcodeFieldWrapper>
+    </div>
   );
 };
diff --git a/packages/ui-components/src/components/Inputs/ImageUploadField.tsx b/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
index 132a79d6f7..90ce4c7120 100644
--- a/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
+++ b/packages/ui-components/src/components/Inputs/ImageUploadField.tsx
@@ -5,9 +5,9 @@
 
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
-import { AvatarProps, Box, Fab, FormHelperText } from '@material-ui/core';
+import { AvatarProps, Box, Fab, FormHelperText, FormLabel } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { FlexStart } from '../Layout';
+import { FlexCenter, FlexStart } from '../Layout';
 import { GreyOutlinedButton } from '../Button';
 import { Avatar } from '../Avatar';
 import { InputLabel } from './InputLabel';
@@ -22,7 +22,6 @@ const HiddenFileInput = styled.input`
 `;
 
 const Wrapper = styled(FlexStart)`
-  margin-bottom: 1.6rem;
   align-items: flex-start;
 `;
 
@@ -54,12 +53,13 @@ const DeleteButton = styled(Fab)`
   }
 `;
 
-const TextLabel = styled.span`
+const TextLabel = styled(FormLabel).attrs({
+  component: 'span',
+})`
   font-size: 0.68rem;
   line-height: 0.8rem;
   text-transform: uppercase;
   color: ${props => props.theme.palette.text.tertiary};
-  margin-bottom: 0.6rem;
 `;
 
 const ErrorMessage = styled(FormHelperText)`
@@ -94,7 +94,7 @@ interface ImageUploadFieldProps {
   tooltip?: string;
   required?: boolean;
   FormHelperTextComponent?: React.ElementType;
-  invalid?: boolean;
+  error?: boolean;
 }
 
 const createBase64Image = (fileObject: File): Promise<Base64> => {
@@ -129,7 +129,7 @@ export const ImageUploadField = React.memo(
     tooltip,
     required,
     FormHelperTextComponent,
-    invalid,
+    error,
   }: ImageUploadFieldProps) => {
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const inputEl = useRef<HTMLInputElement | null>(null);
@@ -201,6 +201,11 @@ export const ImageUploadField = React.memo(
             label={label}
             tooltip={tooltip}
             as={TextLabel}
+            labelProps={{
+              required,
+              error: error || !!errorMessage,
+            }}
+            applyWrapper
           />
           {secondaryLabel && (
             <FormHelperText component={FormHelperTextComponent || 'p'} id={`${name}-description`}>
@@ -214,7 +219,7 @@ export const ImageUploadField = React.memo(
             type="file"
             onChange={handleFileUpload}
             aria-describedby={secondaryLabel ? `${name}-description` : ''}
-            aria-invalid={!!errorMessage || invalid}
+            aria-invalid={!!errorMessage || error}
             required={required}
           />
           <GreyOutlinedButton component="span">{buttonLabel}</GreyOutlinedButton>
diff --git a/packages/ui-components/src/components/Inputs/InputLabel.tsx b/packages/ui-components/src/components/Inputs/InputLabel.tsx
index 3904faf2c1..05eacd6fa5 100644
--- a/packages/ui-components/src/components/Inputs/InputLabel.tsx
+++ b/packages/ui-components/src/components/Inputs/InputLabel.tsx
@@ -1,18 +1,17 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { ComponentType } from 'react';
 import { HelpOutline } from '@material-ui/icons';
+import { FormLabel } from '@material-ui/core';
 import styled from 'styled-components';
 import { Tooltip as BaseTooltip } from '../Tooltip';
+import { FlexCenter } from '../Layout';
 
 /** Styled label for inputs. Handles tooltips for labels if present. */
-const LabelWrapper = styled.span`
-  display: flex;
-  align-items: center;
-`;
+const Label = styled.span``;
 
 const TooltipWrapper = styled.span`
   pointer-events: auto;
@@ -48,33 +47,46 @@ const Tooltip = styled(BaseTooltip)`
   }
 `;
 
+const LabelWrapper = styled(FlexCenter)`
+  margin-block-end: 0.25rem;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 interface InputLabelProps {
-  label?: string | React.ReactNode;
+  label?: React.ReactNode;
   tooltip?: string;
   as?: string | ComponentType<any>;
   className?: string;
   htmlFor?: string;
   TooltipIcon?: ComponentType<any>;
-  labelProps?: Record<string, any>;
+  applyWrapper?: boolean;
+  labelProps?: Record<string, unknown>;
 }
 
 export const InputLabel = ({
   label,
   tooltip,
-  as = 'label',
+  as = FormLabel,
   className,
   htmlFor,
-  TooltipIcon = HelpOutline,
   labelProps = {},
+  TooltipIcon = HelpOutline,
+  applyWrapper = false,
 }: InputLabelProps) => {
   // If no label, don't render anything, so there isn't an empty label tag in the DOM
   if (!label) return null;
+
+  // Wrapper won’t work correctly when using TextField, so we need to conditionally apply it
+  const Wrapper = applyWrapper ? LabelWrapper : React.Fragment;
   return (
-    // allows us to pass in a custom element to render as, e.g. a span if it is going to be contained in a label element, for example when using MUI's TextField component. Otherwise defaults to a label element so that it can be a standalone label
-    <>
-      <LabelWrapper as={as} className={className} htmlFor={htmlFor} {...labelProps}>
+    // Allows us to pass in a custom element to render as, e.g. a span if it is going to be
+    // contained in a label element, for example when using MUI's TextField component. Otherwise
+    // defaults to a label element so that it can be a standalone label
+    <Wrapper>
+      <Label as={as} className={className} htmlFor={htmlFor} {...labelProps}>
         {label}
-      </LabelWrapper>
+      </Label>
       {tooltip && (
         <Tooltip title={tooltip} placement="top">
           <TooltipWrapper tabIndex={0}>
@@ -82,6 +94,6 @@ export const InputLabel = ({
           </TooltipWrapper>
         </Tooltip>
       )}
-    </>
+    </Wrapper>
   );
 };
diff --git a/packages/ui-components/src/components/Inputs/RadioGroup.tsx b/packages/ui-components/src/components/Inputs/RadioGroup.tsx
index 80893dde9e..fbd01588a5 100644
--- a/packages/ui-components/src/components/Inputs/RadioGroup.tsx
+++ b/packages/ui-components/src/components/Inputs/RadioGroup.tsx
@@ -4,8 +4,8 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import MuiRadio, { RadioProps } from '@material-ui/core/Radio';
 import { FormLabel } from '@material-ui/core';
+import MuiRadio, { RadioProps } from '@material-ui/core/Radio';
 import MuiRadioGroup, { RadioGroupProps as MuiRadioGroupProps } from '@material-ui/core/RadioGroup';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import MuiFormControlLabel from '@material-ui/core/FormControlLabel';
@@ -13,11 +13,6 @@ import MuiFormControl, { FormControlProps } from '@material-ui/core/FormControl'
 import { OverrideableComponentProps } from '../../types';
 import { InputLabel } from './InputLabel';
 
-const LegendWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-`;
 const FormControl = styled(MuiFormControl)<OverrideableComponentProps<FormControlProps>>`
   display: block;
   margin-bottom: 1.2rem;
@@ -57,6 +52,9 @@ const FormControlLabel = styled(MuiFormControlLabel)`
   & + & {
     margin-left: 0.625rem;
   }
+  &.error {
+    border-color: ${props => props.theme.palette.error.main};
+  }
 `;
 
 const Radio = styled(MuiRadio)<
@@ -73,6 +71,9 @@ const Radio = styled(MuiRadio)<
   .MuiSvgIcon-root {
     font-size: 1rem;
   }
+  .error & {
+    color: ${props => props.theme.palette.error.main};
+  }
 `;
 
 interface RadioGroupProps {
@@ -92,6 +93,7 @@ interface RadioGroupProps {
   inputProps?: React.HTMLAttributes<HTMLInputElement>;
   required?: boolean;
   radioGroupProps?: MuiRadioGroupProps;
+  error?: boolean;
 }
 
 export const RadioGroup = ({
@@ -110,31 +112,50 @@ export const RadioGroup = ({
   inputRef,
   inputProps,
   required,
+  error,
   radioGroupProps,
-}: RadioGroupProps) => (
-  <FormControl component="fieldset" className={className} color="primary" id={id}>
-    <LegendWrapper>
-      <InputLabel label={<Legend required={required}>{label}</Legend>} tooltip={tooltip} />
-    </LegendWrapper>
-    {helperText && <FormHelperText id={`${name}-helperText`}>{helperText}</FormHelperText>}
-    <StyledRadioGroup name={name} value={value} onChange={onChange} {...radioGroupProps}>
-      {options.map((option, i) => (
-        <FormControlLabel
-          control={
-            <Radio
-              inputRef={inputRef}
-              inputProps={{
-                'aria-describedby': helperText ? `${name}-helperText` : undefined,
-                ...(inputProps || {}),
-                required: required && i === 0, // only the first radio button is required for a radio group if it is required
-              }}
-            />
-          }
-          key={option[valueKey].toString()}
-          value={option[valueKey]}
-          label={<InputLabel label={option[labelKey]} tooltip={option[tooltipKey]} as="span" />}
-        />
-      ))}
-    </StyledRadioGroup>
-  </FormControl>
-);
+}: RadioGroupProps) => {
+  return (
+    <FormControl
+      component="fieldset"
+      className={className}
+      color="primary"
+      id={id}
+      required={required}
+      error={error}
+    >
+      <InputLabel
+        label={label}
+        as={Legend}
+        tooltip={tooltip}
+        labelProps={{
+          error,
+          required,
+        }}
+        applyWrapper
+      />
+
+      {helperText && <FormHelperText id={`${name}-helperText`}>{helperText}</FormHelperText>}
+      <StyledRadioGroup name={name} value={value} onChange={onChange} {...radioGroupProps}>
+        {options.map((option, i) => (
+          <FormControlLabel
+            control={
+              <Radio
+                inputRef={inputRef}
+                inputProps={{
+                  'aria-describedby': helperText ? `${name}-helperText` : undefined,
+                  ...(inputProps || {}),
+                  required: required && i === 0, // only the first radio button is required for a radio group if it is required
+                }}
+              />
+            }
+            key={option[valueKey].toString()}
+            value={option[valueKey]}
+            label={<InputLabel label={option[labelKey]} tooltip={option[tooltipKey]} as="span" />}
+            className={error ? 'error' : undefined}
+          />
+        ))}
+      </StyledRadioGroup>
+    </FormControl>
+  );
+};
diff --git a/packages/ui-components/src/components/Inputs/TextField.tsx b/packages/ui-components/src/components/Inputs/TextField.tsx
index 647d45bf69..153213a16a 100644
--- a/packages/ui-components/src/components/Inputs/TextField.tsx
+++ b/packages/ui-components/src/components/Inputs/TextField.tsx
@@ -25,11 +25,6 @@ const StyledTextField = styled(MuiTextField)<TextFieldProps>`
     border-radius: 3px;
   }
 
-  // Error state
-  .MuiInputBase-root.Mui-error {
-    background: ${props => props.theme.palette.error.light};
-  }
-
   // helper text
   .MuiFormHelperText-root {
     margin-left: 0;
@@ -122,6 +117,8 @@ const StyledTextField = styled(MuiTextField)<TextFieldProps>`
 export const TextField = ({
   label = '',
   tooltip,
+  error,
+  required,
   ...props
 }: Partial<TextFieldProps> & {
   tooltip?: string;
@@ -130,6 +127,20 @@ export const TextField = ({
     fullWidth
     {...props}
     variant="outlined"
-    label={label ? <InputLabel label={label} tooltip={tooltip} as="span" /> : null}
+    error={error}
+    required={required}
+    label={
+      label ? (
+        <InputLabel
+          label={label}
+          tooltip={tooltip}
+          as="span"
+          labelProps={{
+            required,
+            error,
+          }}
+        />
+      ) : null
+    }
   />
 );
diff --git a/packages/ui-components/src/components/Modal/ImportModal.jsx b/packages/ui-components/src/components/Modal/ImportModal.jsx
index 287bfc8243..e390e56091 100644
--- a/packages/ui-components/src/components/Modal/ImportModal.jsx
+++ b/packages/ui-components/src/components/Modal/ImportModal.jsx
@@ -1,11 +1,11 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
-import React, { useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import { SmallAlert } from '../Alert';
@@ -21,8 +21,6 @@ const STATUS = {
   ERROR: 'error',
 };
 
-const NO_FILE_MESSAGE = 'No file chosen';
-
 const Content = styled(DialogContent)`
   text-align: left;
   min-height: 220px;
@@ -47,7 +45,6 @@ export const ImportModal = ({
   const [errorMessage, setErrorMessage] = useState(null);
   const [successMessage, setSuccessMessage] = useState(null);
   const [file, setFile] = useState(null);
-  const [fileName, setFileName] = useState(NO_FILE_MESSAGE);
 
   const handleSubmit = async event => {
     event.preventDefault();
@@ -75,7 +72,6 @@ export const ImportModal = ({
     setErrorMessage(null);
     setSuccessMessage(null);
     setFile(null);
-    setFileName(NO_FILE_MESSAGE);
   };
 
   const handleDismiss = () => {
@@ -85,7 +81,6 @@ export const ImportModal = ({
     // Deselect file when dismissing an error, this avoids an error when editing selected files
     // @see https://github.com/beyondessential/tupaia-backlog/issues/1211
     setFile(null);
-    setFileName(NO_FILE_MESSAGE);
   };
 
   const ContentContainer = showLoadingContainer
@@ -94,7 +89,7 @@ export const ImportModal = ({
           {children}
         </LoadingContainer>
       )
-    : ({ children }) => <>{children}</>;
+    : React.Fragment;
 
   const renderContent = useCallback(() => {
     switch (status) {
@@ -114,19 +109,12 @@ export const ImportModal = ({
           <>
             <p>{subtitle}</p>
             <form>
-              <FileUploadField
-                onChange={({ target }, newName) => {
-                  setFileName(newName);
-                  setFile(target.files[0]);
-                }}
-                name="file-upload"
-                fileName={fileName}
-              />
+              <FileUploadField onChange={files => setFile(files[0])} name="file-upload" />
             </form>
           </>
         );
     }
-  }, [status, successMessage, errorMessage, subtitle, fileName]);
+  }, [status, successMessage, errorMessage, subtitle]);
 
   const renderButtons = useCallback(() => {
     switch (status) {
diff --git a/packages/ui-components/src/components/PDFExportComponent.tsx b/packages/ui-components/src/components/PDFExportComponent.tsx
index 767133b5b7..b7f470a57a 100644
--- a/packages/ui-components/src/components/PDFExportComponent.tsx
+++ b/packages/ui-components/src/components/PDFExportComponent.tsx
@@ -14,7 +14,7 @@ export const A4_PAGE_HEIGHT_MM = 297;
  * use absolute length units (like cm and pt) and remove these constants at some point.
  */
 export const A4_PAGE_WIDTH_PX = 1191; // at 144ppi
-export const A4_PAGE_HEIGHT_PX = 1684; // at 144ppi
+export const A4_PAGE_HEIGHT_PX = 1683; // at 144ppi
 
 export const A4Page = styled.div`
   width: ${A4_PAGE_WIDTH_PX}px;
diff --git a/packages/ui-components/src/components/TooltipIconButton.tsx b/packages/ui-components/src/components/TooltipIconButton.tsx
new file mode 100644
index 0000000000..3d119498da
--- /dev/null
+++ b/packages/ui-components/src/components/TooltipIconButton.tsx
@@ -0,0 +1,57 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { ComponentType } from 'react';
+import { InfoOutlined } from '@material-ui/icons';
+import styled from 'styled-components';
+import { Tooltip as BaseTooltip } from './Tooltip';
+
+const TooltipWrapper = styled.span`
+  pointer-events: auto;
+  cursor: pointer;
+  margin-left: 0.4em;
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 1rem;
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+  &:hover,
+  &:focus {
+    svg {
+      fill: ${props => props.theme.palette.primary.main};
+    }
+  }
+`;
+
+const Tooltip = styled(BaseTooltip)`
+  & .MuiTooltip-tooltip {
+    background-color: ${props => props.theme.palette.text.primary};
+    border-radius: 3px;
+    font-weight: ${props => props.theme.typography.fontWeightRegular};
+    font-size: 0.69rem;
+    .MuiTooltip-arrow {
+      color: ${props => props.theme.palette.text.primary};
+    }
+  }
+`;
+
+interface TooltipIconButtonProps {
+  tooltip: string;
+  Icon?: ComponentType<any>;
+}
+
+export const TooltipIconButton = ({ tooltip, Icon = InfoOutlined }: TooltipIconButtonProps) => {
+  return (
+    <Tooltip title={tooltip} placement="top">
+      <TooltipWrapper tabIndex={0} className="tooltip-icon">
+        <Icon />
+      </TooltipWrapper>
+    </Tooltip>
+  );
+};
diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts
index a325f03fb1..c3a5dfd092 100644
--- a/packages/ui-components/src/components/index.ts
+++ b/packages/ui-components/src/components/index.ts
@@ -46,4 +46,5 @@ export * from './Toast';
 export * from './Toolbar';
 export * from './Tooltip';
 export * from './UserMessage';
+export * from './TooltipIconButton';
 export * from './Pagination';
diff --git a/packages/ui-components/stories/inputs/fileUploadField.stories.js b/packages/ui-components/stories/inputs/fileUploadField.stories.js
index e35c0c0179..61265927cb 100644
--- a/packages/ui-components/stories/inputs/fileUploadField.stories.js
+++ b/packages/ui-components/stories/inputs/fileUploadField.stories.js
@@ -6,7 +6,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import MuiBox from '@material-ui/core/Box';
-import { FileUploadField } from '../../src/components';
+import { FileUploadField } from '../../src';
 
 export default {
   title: 'Inputs/FileUploadField',
@@ -19,15 +19,12 @@ const Container = styled(MuiBox)`
 `;
 
 export const Simple = () => {
-  const [fileName, setFileName] = useState('No File chosen');
+  const [files, setFiles] = useState([]);
   return (
     <Container>
       <FileUploadField
-        onChange={(event, newName) => {
-          setFileName(newName);
-        }}
+        onChange={newFiles => setFiles(newFiles)}
         name="file-upload"
-        fileName={fileName}
         label="File Upload"
       />
     </Container>
@@ -35,48 +32,41 @@ export const Simple = () => {
 };
 
 export const SimpleWithTooltip = () => {
-  const [fileName, setFileName] = useState('No File chosen');
+  const [files, setFiles] = useState([]);
   return (
     <Container>
       <FileUploadField
-        onChange={(event, newName) => {
-          setFileName(newName);
+        accept={{
+          'application/vnd.ms-excel': ['.xls'],
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+          'image/jpeg': ['.jpeg', '.jpg'],
+          'image/png': ['.png'],
         }}
+        onChange={newFiles => setFiles(newFiles)}
         name="file-upload"
-        fileName={fileName}
         label="File Upload"
-        tooltip=".png and .jpg files only"
+        tooltip="Excel, JPEG & PNG files only"
       />
     </Container>
   );
 };
 
 export const Multiple = () => {
-  const [fileName, setFileName] = useState('No File chosen');
+  const [files, setFiles] = useState([]);
   return (
     <Container>
-      <FileUploadField
-        onChange={(event, newName) => {
-          setFileName(newName);
-        }}
-        name="file-upload"
-        fileName={fileName}
-        multiple
-      />
+      <FileUploadField onChange={newFiles => setFiles(newFiles)} name="file-upload" multiple />
     </Container>
   );
 };
 
 export const WithLabel = () => {
-  const [fileName, setFileName] = useState('No File chosen');
+  const [files, setFiles] = useState([]);
   return (
     <Container>
       <FileUploadField
-        onChange={(event, newName) => {
-          setFileName(newName);
-        }}
+        onChange={newFiles => setFiles(newFiles)}
         name="file-upload"
-        fileName={fileName}
         label="Profile Image"
         helperText="Select an image to use as your profile pic"
       />
@@ -85,18 +75,16 @@ export const WithLabel = () => {
 };
 
 export const WithMaxFileSize = () => {
-  const [fileName, setFileName] = useState('No File chosen');
+  const [files, setFiles] = useState([]);
   return (
     <Container>
       <FileUploadField
-        onChange={(event, newName) => {
-          setFileName(newName);
-        }}
+        onChange={newFiles => setFiles(newFiles)}
         name="file-upload"
-        fileName={fileName}
         label="File Upload"
-        maxSizeInBytes={1024 * 10} /* 10 KB */
+        tooltip="Max. file size 10 KiB"
+        maxSizeInBytes={1024 * 10} /* 10 KiB */
       />
     </Container>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/ui-map-components/src/components/Legend/Legend.tsx b/packages/ui-map-components/src/components/Legend/Legend.tsx
index 2fb2ecad43..1b9a99a217 100644
--- a/packages/ui-map-components/src/components/Legend/Legend.tsx
+++ b/packages/ui-map-components/src/components/Legend/Legend.tsx
@@ -14,6 +14,7 @@ type MeasureTypeLiteral = `${MeasureType}` | 'popup-only';
 
 const LegendFrame = styled.div<{
   isDisplayed: boolean;
+  $isExport?: boolean;
 }>`
   display: flex;
   width: fit-content;
@@ -26,9 +27,12 @@ const LegendFrame = styled.div<{
   opacity: ${props => (props.isDisplayed ? '100%' : '20%')};
   margin: 0.6rem auto;
 
-  ${p => p.theme.breakpoints.down('sm')} {
-    margin: 0.6rem 0.6rem 0.6rem 0;
-  }
+  ${({ $isExport, theme }) =>
+    !$isExport &&
+    ` 
+    ${theme.breakpoints.down('sm')} {
+      margin: 0.6rem 0.6rem 0.6rem 0;
+    }`}
 `;
 
 const LegendName = styled.div`
@@ -50,7 +54,7 @@ interface LegendProps extends BaseLegendProps {
   displayedMapOverlayCodes?: string[];
   seriesesKey?: string;
   SeriesContainer?: React.ComponentType<any>;
-  SeriesDivider?: React.ComponentType<any>;
+  SeriesDivider?: React.ComponentType<any> | null;
 }
 
 export const Legend = React.memo(
@@ -64,6 +68,7 @@ export const Legend = React.memo(
     seriesesKey = 'serieses',
     SeriesContainer = LegendFrame,
     SeriesDivider,
+    isExport,
   }: LegendProps) => {
     if (Object.keys(baseMeasureInfo).length === 0) {
       return null;
@@ -124,7 +129,12 @@ export const Legend = React.memo(
             .sort(a => (a.type === MeasureType.COLOR ? -1 : 1)) // color series should sit at the top
             .map((series, index) => {
               return (
-                <SeriesContainer className={className} isDisplayed={isDisplayed} key={series.key}>
+                <SeriesContainer
+                  className={className}
+                  isDisplayed={isDisplayed}
+                  key={series.key}
+                  $isExport={isExport}
+                >
                   {legendsHaveSameType && <LegendName>{`${series.name}: `}</LegendName>}
                   <LegendComponent
                     series={series}
@@ -133,6 +143,7 @@ export const Legend = React.memo(
                     hasRadiusLayer={hasRadiusLayer}
                     setValueHidden={setValueHidden}
                     hiddenValues={hiddenValues}
+                    isExport={isExport}
                   />
                   {index < serieses.length - 1 && SeriesDivider && <SeriesDivider />}
                 </SeriesContainer>
@@ -151,6 +162,7 @@ type LegendComponentProps = {
   hasRadiusLayer: boolean;
   hiddenValues: LegendProps['hiddenValues'];
   setValueHidden: LegendProps['setValueHidden'];
+  isExport?: LegendProps['isExport'];
 };
 
 /**
@@ -163,6 +175,7 @@ const LegendComponent = ({
   hasRadiusLayer,
   hiddenValues,
   setValueHidden,
+  isExport,
 }: LegendComponentProps) => {
   const { type } = series;
   switch (type) {
@@ -186,6 +199,7 @@ const LegendComponent = ({
           series={series}
           setValueHidden={setValueHidden}
           hiddenValues={hiddenValues}
+          isExport={isExport}
         />
       );
   }
diff --git a/packages/ui-map-components/src/components/Legend/MarkerLegend.tsx b/packages/ui-map-components/src/components/Legend/MarkerLegend.tsx
index d96e4d1a63..be8fc7f895 100644
--- a/packages/ui-map-components/src/components/Legend/MarkerLegend.tsx
+++ b/packages/ui-map-components/src/components/Legend/MarkerLegend.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useTheme } from '@material-ui/core/styles';
 import MuiBox from '@material-ui/core/Box';
 import { IconKey } from '@tupaia/types';
@@ -27,16 +27,22 @@ import {
 } from '../../utils';
 import { LegendEntry } from './LegendEntry';
 
-const Container = styled(MuiBox)`
+const Container = styled(MuiBox)<{
+  $isExport?: boolean;
+}>`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
 
-  ${p => p.theme.breakpoints.down('sm')} {
-    flex-direction: column;
-    align-items: flex-start;
-  }
+  ${({ $isExport, theme }) =>
+    !$isExport &&
+    css`
+      ${theme.breakpoints.down('sm')} {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    `}
 `;
 
 /**
@@ -117,6 +123,7 @@ export const MarkerLegend = React.memo(
     hasIconLayer,
     hasRadiusLayer,
     hasColorLayer,
+    isExport,
   }: MarkerLegendProps) => {
     const { type, values, key: dataKey, valueMapping } = series;
     const icon = 'icon' in series ? series.icon : null;
@@ -181,7 +188,7 @@ export const MarkerLegend = React.memo(
     }
 
     return (
-      <Container>
+      <Container $isExport={isExport}>
         {keys}
         {nullKey}
       </Container>
diff --git a/packages/ui-map-components/src/types/legend.ts b/packages/ui-map-components/src/types/legend.ts
index f66285ea98..544bcea97d 100644
--- a/packages/ui-map-components/src/types/legend.ts
+++ b/packages/ui-map-components/src/types/legend.ts
@@ -8,6 +8,7 @@ import { MarkerSeries, SeriesValue, SpectrumSeries } from './series';
 export type LegendProps = {
   setValueHidden: (dataKey: string, value: SeriesValue['value'], hidden: boolean) => void;
   hiddenValues: Record<string, Record<string, boolean>>;
+  isExport?: boolean;
 };
 
 export type MarkerLegendProps = LegendProps & {
diff --git a/packages/utils/src/errors.js b/packages/utils/src/errors.js
index b54fdeed98..91649da2e2 100644
--- a/packages/utils/src/errors.js
+++ b/packages/utils/src/errors.js
@@ -34,7 +34,11 @@ export class HttpError extends Error {
 
 export class DatabaseError extends RespondingError {
   constructor(message, originalError) {
-    super(`Database error: ${message}${originalError ? ` - ${originalError.message}` : ''}`, 500);
+    super(
+      `Database error: ${message}${originalError ? ` - ${originalError.message}` : ''}`,
+      500,
+      originalError.extraFields,
+    );
   }
 }
 
@@ -128,8 +132,9 @@ export class UploadError extends RespondingError {
 }
 
 export class ValidationError extends RespondingError {
-  constructor(message) {
-    super(message, 400);
+  constructor(message, details = null) {
+    const extraFields = details ? { details } : null;
+    super(message, 400, extraFields);
   }
 }
 
@@ -154,14 +159,15 @@ export class TypeValidationError extends ValidationError {
 }
 
 export class ImportValidationError extends ValidationError {
-  constructor(message, rowNumber = undefined, field = undefined, tabName = undefined) {
-    const errorMessage =
-      'Import failed' +
-      `${tabName !== undefined ? ` in tab ${tabName}` : ''}` +
-      `${rowNumber !== undefined ? ` at row ${rowNumber}` : ''}` +
-      `${field !== undefined ? ` on the field '${field}'` : ''}` +
-      ` with the message '${message}'`;
-    super(errorMessage);
+  constructor(message, rowNumber = undefined, field = undefined, tabName = undefined, details) {
+    const tabError = tabName !== undefined ? `Tab ${tabName}` : '';
+    const rowError = rowNumber !== undefined ? `Row ${rowNumber}` : '';
+    const fieldError = field !== undefined ? `field '${field}'` : '';
+
+    const errors = [tabError, rowError, fieldError].filter(e => e).join(', ');
+
+    const errorMessage = `${errors}. ${message}`;
+    super(errorMessage, details);
   }
 }
 
@@ -191,10 +197,10 @@ export class CustomError extends RespondingError {
       ...jsonFields,
       ...extraJsonFields,
     };
-    const { responseText, responseStatus, description } = json;
+    const { responseText, responseStatus, description, ...restOfJson } = json;
     const { status, details } = responseText;
     const errorMessage = status || responseText;
-    super(errorMessage, responseStatus, { description, status, details });
+    super(errorMessage, responseStatus, { description, status, details, ...restOfJson });
   }
 }
 
diff --git a/packages/utils/src/request.js b/packages/utils/src/request.js
index 6246a19c64..b34cb3eeb7 100644
--- a/packages/utils/src/request.js
+++ b/packages/utils/src/request.js
@@ -92,12 +92,15 @@ export const asynchronouslyFetchValuesForObject = async objectSpecification => {
   return returnObject;
 };
 
-const throwCustomError = (status, errorMessage) => {
+const throwCustomError = (status, errorMessage, errorDetails) => {
   const statusCode = status || 500;
-  throw new CustomError({
-    responseStatus: statusCode,
-    responseText: errorMessage,
-  });
+  throw new CustomError(
+    {
+      responseStatus: statusCode,
+      responseText: errorMessage,
+    },
+    { errorDetails },
+  );
 };
 
 export const verifyResponseStatus = async response => {
@@ -116,7 +119,8 @@ export const verifyResponseStatus = async response => {
       throwCustomError(response.status, responseJson.message);
     }
     if (responseJson.error) {
-      throwCustomError(response.status, responseJson.error);
+      const { error: errorMessage, ...restOfError } = responseJson;
+      throwCustomError(response.status, errorMessage, restOfError);
     }
   }
 };
diff --git a/packages/utils/src/validation/ObjectValidator.js b/packages/utils/src/validation/ObjectValidator.js
index 548fa99eba..d0d9d4d8d3 100644
--- a/packages/utils/src/validation/ObjectValidator.js
+++ b/packages/utils/src/validation/ObjectValidator.js
@@ -68,7 +68,7 @@ async function runValidators(validators, object, fieldKey, constructError) {
       await validators[j](object[fieldKey], object, fieldKey);
     } catch (error) {
       throw constructError
-        ? constructError(error.message, fieldKey)
+        ? constructError(error.message, fieldKey, error.extraFields || {})
         : new ValidationError(
             `Invalid content for field "${fieldKey}" causing message "${error.message}"`,
           );
@@ -82,7 +82,7 @@ function runValidatorsSync(validators, object, fieldKey, constructError) {
       validators[j](object[fieldKey], object, fieldKey);
     } catch (error) {
       throw constructError
-        ? constructError(error.message, fieldKey)
+        ? constructError(error.message, fieldKey, error.details)
         : new ValidationError(
             `Invalid content for field "${fieldKey}" causing message "${error.message}"`,
           );
diff --git a/packages/utils/src/validation/validatorFunctions.js b/packages/utils/src/validation/validatorFunctions.js
index 1e1e782feb..965a86871a 100644
--- a/packages/utils/src/validation/validatorFunctions.js
+++ b/packages/utils/src/validation/validatorFunctions.js
@@ -157,7 +157,8 @@ export const isValidPassword = password => {
 export const constructIsOneOf = options => value => {
   if (!options.includes(value)) {
     throw new ValidationError(
-      `${value} is not an accepted value. Accepted values: "${options.join('", "')}"`,
+      `${value} is not an accepted value.`,
+      `Accepted values: "${options.join('", "')}"`,
     );
   }
 };
diff --git a/packages/web-config-server/src/apiV1/measureData.js b/packages/web-config-server/src/apiV1/measureData.js
index d9119b334e..e543e0e725 100644
--- a/packages/web-config-server/src/apiV1/measureData.js
+++ b/packages/web-config-server/src/apiV1/measureData.js
@@ -266,7 +266,11 @@ export default class extends DataAggregatingRouteHandler {
 
     const { periodGranularity } = measureBuilderConfig || {};
     const { startDate, endDate } = this.query;
-    const dates = periodGranularity ? getDateRange(periodGranularity, startDate, endDate) : {};
+    let dates = periodGranularity ? getDateRange(periodGranularity, startDate, endDate) : {};
+
+    if (startDate && endDate && !periodGranularity) {
+      dates = getDateRange('day', startDate, endDate);
+    }
 
     const baseOptions = {
       ...restOfPresentationConfig,
diff --git a/yarn.lock b/yarn.lock
index 14f03334a6..ad60ef123d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12590,6 +12590,7 @@ __metadata:
     react: ^16.13.1
     react-dom: ^16.13.1
     react-hook-form: ^6.15.1
+    react-leaflet: ^3.2.1
     react-query: ^3.39.3
     react-router: 6.3.0
     react-router-dom: 6.3.0
@@ -12679,6 +12680,7 @@ __metadata:
     react-ace: ^10.1.0
     react-docgen-typescript-plugin: ^1.0.5
     react-dom: ^16.13.1
+    react-dropzone: ^14.2.3
     react-hook-form: ^6.15.1
     react-password-strength-bar: ^0.3.3
     react-router-dom: ^5.1.2
@@ -16105,6 +16107,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"attr-accept@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "attr-accept@npm:2.2.2"
+  checksum: 496f7249354ab53e522510c1dc8f67a1887382187adde4dc205507d2f014836a247073b05e9d9ea51e2e9c7f71b0d2aa21730af80efa9af2d68303e5f0565c4d
+  languageName: node
+  linkType: hard
+
 "authentication-utilities@npm:^0.1.4":
   version: 0.1.4
   resolution: "authentication-utilities@npm:0.1.4"
@@ -23784,6 +23793,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-selector@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "file-selector@npm:0.6.0"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: 7d051b6e5d793f3c6e2ab287ba5e7c2c6a0971bccc9d56e044c8047ba483e18f60fc0b5771c951dc707c0d15f4f36ccb4f1f1aaf385d21ec8f7700dadf8325ba
+  languageName: node
+  linkType: hard
+
 "file-system-cache@npm:2.3.0":
   version: 2.3.0
   resolution: "file-system-cache@npm:2.3.0"
@@ -36010,6 +36028,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dropzone@npm:^14.2.3":
+  version: 14.2.3
+  resolution: "react-dropzone@npm:14.2.3"
+  dependencies:
+    attr-accept: ^2.2.2
+    file-selector: ^0.6.0
+    prop-types: ^15.8.1
+  peerDependencies:
+    react: ">= 16.8 || 18.0.0"
+  checksum: 174b744d5ca898cf3d84ec1aeb6cef5211c446697e45dc8ece8287a03d291f8d07253206d5a1247ef156fd385d65e7de666d4d5c2986020b8543b8f2434e8b40
+  languageName: node
+  linkType: hard
+
 "react-element-to-jsx-string@npm:^14.3.2":
   version: 14.3.4
   resolution: "react-element-to-jsx-string@npm:14.3.4"