diff --git a/.circleci/config.yml b/.circleci/config.yml
index b912533503..4bc7b6d8ca 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -133,7 +133,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "js-117-selection-of-goals"
+    default: "js-6-frontend-validations"
     type: string
 jobs:
   build_and_lint:
diff --git a/frontend/package.json b/frontend/package.json
index 9e746df00d..422e0b5e12 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@hookform/error-message": "^0.0.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@trussworks/react-uswds": "^1.9.1",
     "@use-it/interval": "^1.0.0",
@@ -21,7 +22,7 @@
     "react-dom": "^16.14.0",
     "react-dropzone": "^11.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.9.0",
+    "react-hook-form": "^6.15.0",
     "react-idle-timer": "^4.4.2",
     "react-input-autosize": "^3.0.0",
     "react-responsive": "^8.1.1",
diff --git a/frontend/src/components/DatePicker.css b/frontend/src/components/DatePicker.css
index 6539117efa..1586359b58 100644
--- a/frontend/src/components/DatePicker.css
+++ b/frontend/src/components/DatePicker.css
@@ -14,3 +14,9 @@
 .DateInput {
   width: fit-content;
 }
+
+.usa-hint {
+  font-size: 14px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
index beab959f6c..1863257cac 100644
--- a/frontend/src/components/DatePicker.js
+++ b/frontend/src/components/DatePicker.js
@@ -10,10 +10,8 @@
    2. react-dates had easily readable documentation and conveniences such as `maxDate`
       and `minDate`. I couldn't find great docs using the USWDS datepicker javascript
 */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Label } from '@trussworks/react-uswds';
 import { SingleDatePicker } from 'react-dates';
 import { OPEN_UP, OPEN_DOWN } from 'react-dates/constants';
 import { Controller } from 'react-hook-form';
@@ -24,9 +22,8 @@ import './DatePicker.css';
 const dateFmt = 'MM/DD/YYYY';
 
 const DateInput = ({
-  control, label, minDate, name, disabled, maxDate, openUp, required,
+  control, minDate, name, disabled, maxDate, openUp, required,
 }) => {
-  const labelId = `${name}-id`;
   const hintId = `${name}-hint`;
   const [isFocused, updateFocus] = useState(false);
   const openDirection = openUp ? OPEN_UP : OPEN_DOWN;
@@ -40,8 +37,7 @@ const DateInput = ({
 
   return (
     <>
-      <Label id={labelId} htmlFor={name}>{label}</Label>
-      <div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
+      <div className="usa-hint font-body-2xs" id={hintId}>mm/dd/yyyy</div>
       <Controller
         render={({ onChange, value, ref }) => {
           const date = value ? moment(value, dateFmt) : null;
@@ -57,7 +53,10 @@ const DateInput = ({
                 numberOfMonths={1}
                 openDirection={openDirection}
                 disabled={disabled}
-                onDateChange={(d) => { onChange(d.format(dateFmt)); }}
+                onDateChange={(d) => {
+                  const newDate = d ? d.format(dateFmt) : d;
+                  onChange(newDate);
+                }}
                 onFocusChange={({ focused }) => updateFocus(focused)}
               />
             </div>
@@ -68,7 +67,7 @@ const DateInput = ({
         disabled={disabled}
         defaultValue={null}
         rules={{
-          required,
+          required: required ? 'Please select a date' : false,
         }}
       />
     </>
@@ -80,7 +79,6 @@ DateInput.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   control: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
   minDate: PropTypes.string,
   maxDate: PropTypes.string,
   openUp: PropTypes.bool,
diff --git a/frontend/src/components/FormItem.css b/frontend/src/components/FormItem.css
new file mode 100644
index 0000000000..f2ddc3bd1e
--- /dev/null
+++ b/frontend/src/components/FormItem.css
@@ -0,0 +1,5 @@
+.smart-hub--form-required {
+  font-family: SourceSansPro;
+  font-size: 16px;
+  color: #d42240;
+}
diff --git a/frontend/src/components/FormItem.js b/frontend/src/components/FormItem.js
new file mode 100644
index 0000000000..672d74268a
--- /dev/null
+++ b/frontend/src/components/FormItem.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFormContext } from 'react-hook-form';
+import { ErrorMessage as ReactHookFormError } from '@hookform/error-message';
+import {
+  Label, FormGroup, ErrorMessage, Fieldset,
+} from '@trussworks/react-uswds';
+
+import './FormItem.css';
+
+const labelPropTypes = {
+  label: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function Checkbox({ label, children }) {
+  return (
+    <Fieldset unstyled>
+      <legend>{label}</legend>
+      {children}
+    </Fieldset>
+  );
+}
+
+Checkbox.propTypes = labelPropTypes;
+
+function Field({ label, children }) {
+  return (
+    <Label>
+      {label}
+      {children}
+    </Label>
+  );
+}
+
+Field.propTypes = labelPropTypes;
+
+function FormItem({
+  label, children, required, name, isCheckbox,
+}) {
+  const { formState: { errors } } = useFormContext();
+  const fieldErrors = errors[name];
+  const labelWithRequiredTag = (
+    <>
+      {label}
+      {required && (<span className="smart-hub--form-required"> (Required)</span>)}
+    </>
+  );
+
+  const LabelType = isCheckbox ? Checkbox : Field;
+
+  return (
+    <FormGroup error={fieldErrors}>
+      <LabelType label={labelWithRequiredTag}>
+        <ReactHookFormError
+          errors={errors}
+          name={name}
+          render={({ message }) => <ErrorMessage>{message}</ErrorMessage>}
+        />
+        {children}
+      </LabelType>
+    </FormGroup>
+  );
+}
+
+FormItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
+  isCheckbox: PropTypes.bool,
+  required: PropTypes.bool,
+};
+
+FormItem.defaultProps = {
+  required: true,
+  isCheckbox: false,
+};
+
+export default FormItem;
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
index 68c79d3717..ce008e2c47 100644
--- a/frontend/src/components/MultiSelect.js
+++ b/frontend/src/components/MultiSelect.js
@@ -23,7 +23,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
-import { Label } from '@trussworks/react-uswds';
 import { Controller } from 'react-hook-form';
 
 import arrowBoth from '../images/arrow-both.svg';
@@ -73,7 +72,6 @@ const styles = {
 };
 
 function MultiSelect({
-  label,
   name,
   options,
   disabled,
@@ -117,44 +115,45 @@ function MultiSelect({
   };
 
   return (
-    <Label>
-      {label}
-      <Controller
-        render={({ onChange: controllerOnChange, value }) => {
-          const values = value ? getValues(value) : value;
-          return (
-            <Select
-              className="margin-top-1"
-              id={name}
-              value={values}
-              onChange={(event) => {
-                if (event) {
-                  onChange(event, controllerOnChange);
-                } else {
-                  controllerOnChange([]);
-                }
-              }}
-              styles={styles}
-              components={{ ...componentReplacements, DropdownIndicator }}
-              options={options}
-              isDisabled={disabled}
-              isClearable={multiSelectOptions.isClearable}
-              closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect}
-              controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
-              hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
-              placeholder=""
-              isMulti
-            />
-          );
-        }}
-        control={control}
-        defaultValue={[]}
-        rules={{
-          required,
-        }}
-        name={name}
-      />
-    </Label>
+    <Controller
+      render={({ onChange: controllerOnChange, value }) => {
+        const values = value ? getValues(value) : value;
+        return (
+          <Select
+            className="margin-top-1"
+            id={name}
+            value={values}
+            onChange={(event) => {
+              if (event) {
+                onChange(event, controllerOnChange);
+              } else {
+                controllerOnChange([]);
+              }
+            }}
+            styles={styles}
+            components={{ ...componentReplacements, DropdownIndicator }}
+            options={options}
+            isDisabled={disabled}
+            isClearable={multiSelectOptions.isClearable}
+            closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect}
+            controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
+            hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
+            placeholder=""
+            isMulti
+          />
+        );
+      }}
+      control={control}
+      rules={{
+        validate: (value) => {
+          if (required && (!value || value.length === 0)) {
+            return required;
+          }
+          return true;
+        },
+      }}
+      name={name}
+    />
   );
 }
 
@@ -164,7 +163,6 @@ const value = PropTypes.oneOfType([
 ]);
 
 MultiSelect.propTypes = {
-  label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   labelProperty: PropTypes.string,
   valueProperty: PropTypes.string,
@@ -191,12 +189,12 @@ MultiSelect.propTypes = {
     hideSelectedOptions: PropTypes.bool,
   }),
   disabled: PropTypes.bool,
-  required: PropTypes.bool,
+  required: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };
 
 MultiSelect.defaultProps = {
   disabled: false,
-  required: true,
+  required: 'Please select at least one item',
   simple: true,
   labelProperty: 'label',
   valueProperty: 'value',
diff --git a/frontend/src/components/Navigator/__tests__/index.js b/frontend/src/components/Navigator/__tests__/index.js
index 58365a0530..7213f5d423 100644
--- a/frontend/src/components/Navigator/__tests__/index.js
+++ b/frontend/src/components/Navigator/__tests__/index.js
@@ -10,14 +10,14 @@ import Navigator from '../index';
 import { NOT_STARTED } from '../constants';
 
 // eslint-disable-next-line react/prop-types
-const Input = ({ name }) => {
+const Input = ({ name, required }) => {
   const { register } = useFormContext();
   return (
     <input
       type="radio"
       data-testid={name}
       name={name}
-      ref={register}
+      ref={register({ required })}
     />
   );
 };
@@ -43,12 +43,21 @@ const pages = [
   },
   {
     position: 3,
+    path: 'third',
+    label: 'third page',
+    review: false,
+    render: () => (
+      <Input name="third" required />
+    ),
+  },
+  {
+    position: 4,
     label: 'review page',
     path: 'review',
     review: true,
-    render: (allComplete, formData, onSubmit) => (
+    render: (formData, onFormSubmit) => (
       <div>
-        <button type="button" data-testid="review" onClick={onSubmit}>Continue</button>
+        <button type="button" data-testid="review" onClick={onFormSubmit}>Continue</button>
       </div>
     ),
   },
@@ -88,7 +97,7 @@ describe('Navigator', () => {
     const onSave = jest.fn();
     renderNavigator('second', () => {}, onSave);
     userEvent.click(screen.getByRole('button', { name: 'Continue' }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ pageState: { ...initialData.pageState, 2: 'Complete' }, second: '' }, 3));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ pageState: { ...initialData.pageState, 2: 'Complete' }, second: null }, 3));
   });
 
   it('submits data when "continuing" from the review page', async () => {
@@ -98,10 +107,17 @@ describe('Navigator', () => {
     await waitFor(() => expect(onSubmit).toHaveBeenCalled());
   });
 
+  it('shows an error message if the form is not valid', async () => {
+    renderNavigator('third');
+    const button = await screen.findByRole('button', { name: 'Continue' });
+    userEvent.click(button);
+    expect(await screen.findByTestId('alert')).toHaveTextContent('Please complete all required fields before submitting this report.');
+  });
+
   it('calls onSave on navigation', async () => {
     const onSave = jest.fn();
     renderNavigator('second', () => {}, onSave);
     userEvent.click(screen.getByRole('button', { name: 'first page' }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ ...initialData, second: '' }, 1));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ ...initialData, second: null }, 1));
   });
 });
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index b3ead09932..3976982b7e 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -6,9 +6,13 @@
 */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import { FormProvider, useForm } from 'react-hook-form';
-import { Form, Button, Grid } from '@trussworks/react-uswds';
+import {
+  Form,
+  Button,
+  Grid,
+  Alert,
+} from '@trussworks/react-uswds';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useInterval from '@use-it/interval';
 import moment from 'moment';
@@ -39,9 +43,7 @@ function Navigator({
   const [errorMessage, updateErrorMessage] = useState();
   const [lastSaveTime, updateLastSaveTime] = useState(initialLastUpdated);
   const { pageState } = formData;
-
   const page = pages.find((p) => p.path === currentPage);
-  const allComplete = _.every(pageState, (state) => state === COMPLETE);
 
   const hookForm = useForm({
     mode: 'onChange',
@@ -55,7 +57,9 @@ function Navigator({
     reset,
   } = hookForm;
 
-  const { isDirty, isValid } = formState;
+  const { isDirty, errors } = formState;
+
+  const hasErrors = Object.keys(errors).length > 0;
 
   const newNavigatorState = (completed) => {
     if (page.review) {
@@ -72,7 +76,8 @@ function Navigator({
   };
 
   const onSaveForm = async (completed, index) => {
-    const data = { ...formData, ...getValues(), pageState: newNavigatorState(completed) };
+    const { status, ...values } = getValues();
+    const data = { ...formData, ...values, pageState: newNavigatorState(completed) };
     const newIndex = index === page.position ? null : index;
     try {
       updateFormData(data);
@@ -111,6 +116,7 @@ function Navigator({
       onNavigation: () => onSaveForm(false, p.position),
       state,
       current,
+      review: p.review,
     };
   });
 
@@ -130,12 +136,12 @@ function Navigator({
           <div id="navigator-form">
             {page.review
             && page.render(
-              allComplete,
               formData,
               onFormSubmit,
               additionalData,
               onReview,
               approvingManager,
+              navigatorPages,
               reportCreator,
             )}
             {!page.review
@@ -144,12 +150,18 @@ function Navigator({
                 <NavigatorHeader
                   label={page.label}
                 />
+                {hasErrors
+                && (
+                  <Alert type="error" slim>
+                    Please complete all required fields before submitting this report.
+                  </Alert>
+                )}
                 <Form
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
                   {page.render(additionalData, formData, reportId)}
-                  <Button type="submit" disabled={!isValid}>Continue</Button>
+                  <Button type="submit">Continue</Button>
                 </Form>
               </Container>
             )}
diff --git a/frontend/src/components/__tests__/MutliSelect.js b/frontend/src/components/__tests__/MutliSelect.js
index 7118968706..f08786654e 100644
--- a/frontend/src/components/__tests__/MutliSelect.js
+++ b/frontend/src/components/__tests__/MutliSelect.js
@@ -5,6 +5,7 @@ import selectEvent from 'react-select-event';
 import { act } from 'react-dom/test-utils';
 import { useForm } from 'react-hook-form';
 import userEvent from '@testing-library/user-event';
+import { Label } from '@trussworks/react-uswds';
 
 import MultiSelect from '../MultiSelect';
 
@@ -27,14 +28,16 @@ describe('MultiSelect', () => {
 
     return (
       <form onSubmit={handleSubmit(submit)}>
-        <MultiSelect
-          control={control}
-          label="label"
-          name="name"
-          options={options}
-          required={false}
-        />
-        <button data-testid="submit" type="submit">submit</button>
+        <Label>
+          label
+          <MultiSelect
+            control={control}
+            name="name"
+            options={options}
+            required={false}
+          />
+          <button data-testid="submit" type="submit">submit</button>
+        </Label>
       </form>
     );
   };
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
index 8965eced6e..3ed908fc00 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
@@ -7,11 +7,11 @@ import {
 } from '@trussworks/react-uswds';
 
 import { managerReportStatuses } from '../../../../../Constants';
+import FormItem from '../../../../../components/FormItem';
 
 const Review = ({
   reviewed,
   additionalNotes,
-  valid,
   onFormReview,
 }) => {
   const { handleSubmit, register, watch } = useFormContext();
@@ -42,14 +42,18 @@ const Review = ({
           <Label htmlFor="managerNotes">Manager notes</Label>
           <Textarea inputRef={register} id="managerNotes" name="managerNotes" className={textAreaClass} />
         </Fieldset>
-        <Label htmlFor="status">Choose report status</Label>
-        <Dropdown id="status" name="status" defaultValue="" inputRef={register({ required: true })}>
-          <option name="default" value="" disabled hidden>- Select -</option>
-          {managerReportStatuses.map((status) => (
-            <option key={status} value={status}>{_.startCase(status)}</option>
-          ))}
-        </Dropdown>
-        <Button type="submit" disabled={!valid}>Submit</Button>
+        <FormItem
+          name="status"
+          label="Choose report status"
+        >
+          <Dropdown id="status" name="status" defaultValue="" inputRef={register({ required: true })}>
+            <option name="default" value="" disabled hidden>- Select -</option>
+            {managerReportStatuses.map((status) => (
+              <option key={status} value={status}>{_.startCase(status)}</option>
+            ))}
+          </Dropdown>
+        </FormItem>
+        <Button type="submit">Submit</Button>
       </Form>
     </>
   );
@@ -58,7 +62,6 @@ const Review = ({
 Review.propTypes = {
   reviewed: PropTypes.bool.isRequired,
   additionalNotes: PropTypes.string.isRequired,
-  valid: PropTypes.bool.isRequired,
   onFormReview: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
index 2a109b2e9d..a65b23cb5f 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
@@ -3,8 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
-
+import { FormProvider, useForm } from 'react-hook-form';
 import Approver from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';
 
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
index 1703a76912..7acf3dc12d 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
@@ -9,7 +9,6 @@ const Approver = ({
   onFormReview,
   reviewed,
   formData,
-  valid,
 }) => {
   const { managerNotes, additionalNotes, status } = formData;
   const review = status === REPORT_STATUSES.SUBMITTED || status === REPORT_STATUSES.NEEDS_ACTION;
@@ -20,7 +19,6 @@ const Approver = ({
       {review
       && (
       <Review
-        valid={valid}
         reviewed={reviewed}
         additionalNotes={additionalNotes}
         onFormReview={onFormReview}
@@ -40,7 +38,6 @@ const Approver = ({
 Approver.propTypes = {
   onFormReview: PropTypes.func.isRequired,
   reviewed: PropTypes.bool.isRequired,
-  valid: PropTypes.bool.isRequired,
   formData: PropTypes.shape({
     approvingManager: PropTypes.shape({
       name: PropTypes.string,
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
index b096767a19..1f056d21d5 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
@@ -2,18 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
 import {
-  Dropdown, Form, Label, Fieldset, Textarea, Alert, Button,
+  Dropdown, Form, Fieldset, Textarea, Alert, Button,
 } from '@trussworks/react-uswds';
 
+import IncompletePages from './IncompletePages';
 import { DECIMAL_BASE } from '../../../../../Constants';
+import FormItem from '../../../../../components/FormItem';
 
 const Draft = ({
   submitted,
-  allComplete,
   approvers,
-  valid,
   onFormSubmit,
+  incompletePages,
 }) => {
+  const { watch, register, handleSubmit } = useFormContext();
+  const hasIncompletePages = incompletePages.length > 0;
+
   const setValue = (e) => {
     if (e === '') {
       return null;
@@ -21,7 +25,11 @@ const Draft = ({
     return parseInt(e, DECIMAL_BASE);
   };
 
-  const { handleSubmit, register, watch } = useFormContext();
+  const onSubmit = (e) => {
+    if (!hasIncompletePages) {
+      onFormSubmit(e);
+    }
+  };
   const watchTextValue = watch('additionalNotes');
   const textAreaClass = watchTextValue !== '' ? 'yes-print' : 'no-print';
 
@@ -35,19 +43,16 @@ const Draft = ({
         This report was successfully submitted for approval
       </Alert>
       )}
-      {!allComplete
-      && (
-      <Alert noIcon className="margin-y-4" type="error">
-        <b>Incomplete report</b>
-        <br />
-        This report cannot be submitted until all sections are complete
-      </Alert>
-      )}
       <h2>Submit Report</h2>
-      <Form className="smart-hub--form-large" onSubmit={handleSubmit(onFormSubmit)}>
+      <Form className="smart-hub--form-large" onSubmit={handleSubmit(onSubmit)}>
         <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Additional Notes">
-          <Label htmlFor="additionalNotes">Creator notes</Label>
-          <Textarea inputRef={register} id="additionalNotes" name="additionalNotes" className={textAreaClass} />
+          <FormItem
+            label="Creator notes"
+            name="additionalNotes"
+            required={false}
+          >
+            <Textarea inputRef={register} id="additionalNotes" name="additionalNotes" className={textAreaClass} />
+          </FormItem>
         </Fieldset>
         <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Review and submit report">
           <p className="margin-top-4">
@@ -55,15 +60,20 @@ const Draft = ({
             mode. Please review all information in each section before submitting to your
             manager for approval.
           </p>
-          <Label htmlFor="approvingManagerId">Approving manager</Label>
-          <Dropdown id="approvingManagerId" name="approvingManagerId" inputRef={register({ setValueAs: setValue, required: true })}>
-            <option name="default" value="" disabled hidden>Select a Manager...</option>
-            {approvers.map((approver) => (
-              <option key={approver.id} value={approver.id}>{approver.name}</option>
-            ))}
-          </Dropdown>
+          <FormItem
+            label="Approving manager"
+            name="approvingManagerId"
+          >
+            <Dropdown id="approvingManagerId" name="approvingManagerId" inputRef={register({ setValueAs: setValue, required: 'A manager must be assigned to the report before submitting' })}>
+              <option name="default" value="" disabled hidden>- Select -</option>
+              {approvers.map((approver) => (
+                <option key={approver.id} value={approver.id}>{approver.name}</option>
+              ))}
+            </Dropdown>
+          </FormItem>
         </Fieldset>
-        <Button type="submit" disabled={!valid}>Submit for approval</Button>
+        {hasIncompletePages && <IncompletePages incompletePages={incompletePages} />}
+        <Button type="submit">Submit for approval</Button>
       </Form>
     </>
   );
@@ -71,13 +81,12 @@ const Draft = ({
 
 Draft.propTypes = {
   submitted: PropTypes.bool.isRequired,
-  allComplete: PropTypes.bool.isRequired,
   approvers: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })).isRequired,
-  valid: PropTypes.bool.isRequired,
   onFormSubmit: PropTypes.func.isRequired,
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default Draft;
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css
new file mode 100644
index 0000000000..169cc5862a
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css
@@ -0,0 +1,3 @@
+.smart-hub--incomplete-notice .usa-alert__body {
+  padding-left: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js
new file mode 100644
index 0000000000..918a1acda1
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@trussworks/react-uswds';
+
+import './IncompletePages.css';
+
+const IncompletePages = ({
+  incompletePages,
+}) => (
+  <Alert className="smart-hub--incomplete-notice" validation noIcon slim type="error">
+    <b>Incomplete report</b>
+    <br />
+    This report cannot be submitted until all sections are complete.
+    Please review the following sections:
+    <ul>
+      {incompletePages.map((page) => (
+        <li key={page}>
+          {page}
+        </li>
+      ))}
+    </ul>
+  </Alert>
+);
+
+IncompletePages.propTypes = {
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default IncompletePages;
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
index e7da7eeb78..187a180584 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
@@ -4,15 +4,21 @@ import { Alert, Button } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
+import IncompletePages from './IncompletePages';
+
 const NeedsAction = ({
   additionalNotes,
   managerNotes,
   onSubmit,
   approvingManager,
-  valid,
+  incompletePages,
 }) => {
+  const hasIncompletePages = incompletePages.length > 0;
+
   const submit = async () => {
-    await onSubmit({ approvingManagerId: approvingManager.id, additionalNotes });
+    if (!hasIncompletePages) {
+      await onSubmit({ approvingManagerId: approvingManager.id, additionalNotes });
+    }
   };
 
   return (
@@ -56,8 +62,9 @@ const NeedsAction = ({
           { approvingManager.name || 'No manager notes' }
         </div>
       </div>
+      {hasIncompletePages && <IncompletePages incompletePages={incompletePages} />}
       <div className="margin-top-3">
-        <Button disabled={!valid} onClick={submit}>Re-submit for Approval</Button>
+        <Button onClick={submit}>Re-submit for Approval</Button>
       </div>
     </>
   );
@@ -67,7 +74,7 @@ NeedsAction.propTypes = {
   additionalNotes: PropTypes.string,
   managerNotes: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
-  valid: PropTypes.bool.isRequired,
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
   approvingManager: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
index b7abd7258f..f1da0ed3b1 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
@@ -10,7 +10,7 @@ import { REPORT_STATUSES } from '../../../../../../Constants';
 
 const RenderSubmitter = ({
   // eslint-disable-next-line react/prop-types
-  submitted, allComplete, onFormSubmit, formData, valid,
+  submitted, onFormSubmit, formData, pages,
 }) => {
   const hookForm = useForm({
     mode: 'onChange',
@@ -21,31 +21,42 @@ const RenderSubmitter = ({
     <FormProvider {...hookForm}>
       <Submitter
         submitted={submitted}
-        allComplete={allComplete}
         onFormSubmit={onFormSubmit}
-        valid={valid}
         approvers={[{ name: 'test', id: 1 }]}
         formData={formData}
+        pages={pages}
       />
     </FormProvider>
   );
 };
 
-const renderReview = (status, submitted, allComplete, onFormSubmit) => {
+const completePages = [{
+  label: 'label',
+  state: 'Complete',
+  review: false,
+}];
+
+const incompletePages = [{
+  label: 'incomplete',
+  state: 'In progress',
+  review: false,
+}];
+
+const renderReview = (status, submitted, onFormSubmit, complete = true) => {
   const formData = {
     approvingManager: { name: 'name' },
     approvingManagerId: 1,
     status,
   };
 
+  const pages = complete ? completePages : incompletePages;
+
   render(
     <RenderSubmitter
-      status={status}
       submitted={submitted}
-      allComplete={allComplete}
       onFormSubmit={onFormSubmit}
       formData={formData}
-      valid
+      pages={pages}
     />,
   );
 };
@@ -53,26 +64,40 @@ const renderReview = (status, submitted, allComplete, onFormSubmit) => {
 describe('Submitter review page', () => {
   describe('when the report is a draft', () => {
     it('displays the draft review component', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, false, true, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {});
       expect(await screen.findByText('Submit Report')).toBeVisible();
     });
 
     it('allows the author to submit for review', async () => {
       const mockSubmit = jest.fn();
-      renderReview(REPORT_STATUSES.DRAFT, false, true, mockSubmit);
+      renderReview(REPORT_STATUSES.DRAFT, false, mockSubmit);
       const button = await screen.findByRole('button');
       userEvent.click(button);
       await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
     });
 
     it('displays an error if the report is not complete', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, false, false, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {}, false);
       const alert = await screen.findByTestId('alert');
       expect(alert.textContent).toContain('Incomplete report');
     });
 
+    it('shows pages that are not completed', async () => {
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {}, false);
+      const alert = await screen.findByText('Incomplete report');
+      expect(alert).toBeVisible();
+    });
+
+    it('fails to submit if there are pages that have not been completed', async () => {
+      const mockSubmit = jest.fn();
+      renderReview(REPORT_STATUSES.DRAFT, false, mockSubmit, false);
+      const button = await screen.findByRole('button');
+      userEvent.click(button);
+      await waitFor(() => expect(mockSubmit).not.toHaveBeenCalled());
+    });
+
     it('displays success if the report has been submitted', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, true, true, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, true, () => {});
       const alert = await screen.findByTestId('alert');
       expect(alert.textContent).toContain('Success');
     });
@@ -80,20 +105,34 @@ describe('Submitter review page', () => {
 
   describe('when the report is approved', () => {
     it('displays the approved component', async () => {
-      renderReview(REPORT_STATUSES.APPROVED, false, true, () => {});
+      renderReview(REPORT_STATUSES.APPROVED, false, () => {});
       expect(await screen.findByText('Report approved')).toBeVisible();
     });
   });
 
   describe('when the report needs action', () => {
     it('displays the needs action component', async () => {
-      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, true, () => {});
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, () => {});
       expect(await screen.findByText('Review and re-submit report')).toBeVisible();
     });
 
+    it('shows pages that are not completed', async () => {
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, () => {}, false);
+      const alert = await screen.findByText('Incomplete report');
+      expect(alert).toBeVisible();
+    });
+
+    it('fails to re-submit if there are pages that have not been completed', async () => {
+      const mockSubmit = jest.fn();
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, mockSubmit, false);
+      const button = await screen.findByRole('button');
+      userEvent.click(button);
+      await waitFor(() => expect(mockSubmit).not.toHaveBeenCalled());
+    });
+
     it('allows the user to resubmit the report', async () => {
       const mockSubmit = jest.fn();
-      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, true, mockSubmit);
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, mockSubmit);
       const button = await screen.findByRole('button');
       userEvent.click(button);
       await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
index 62b3938b06..4550c9a2ab 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
@@ -9,11 +9,10 @@ import { REPORT_STATUSES } from '../../../../../Constants';
 
 const Submitter = ({
   submitted,
-  allComplete,
   approvers,
-  valid,
   onFormSubmit,
   formData,
+  pages,
 }) => {
   const {
     approvingManager,
@@ -25,16 +24,18 @@ const Submitter = ({
   const needsAction = status === REPORT_STATUSES.NEEDS_ACTION;
   const approved = status === REPORT_STATUSES.APPROVED;
 
+  const filtered = pages.filter((p) => !(p.state === 'Complete' || p.review));
+  const incompletePages = filtered.map((f) => f.label);
+
   return (
     <>
       {notReviewed
       && (
       <DraftReview
         submitted={submitted}
-        allComplete={allComplete}
         approvers={approvers}
-        valid={valid}
         onFormSubmit={onFormSubmit}
+        incompletePages={incompletePages}
       />
       )}
       {needsAction
@@ -44,7 +45,7 @@ const Submitter = ({
         managerNotes={managerNotes}
         onSubmit={onFormSubmit}
         approvingManager={approvingManager}
-        valid={valid}
+        incompletePages={incompletePages}
       />
       )}
       {approved
@@ -60,12 +61,15 @@ const Submitter = ({
 
 Submitter.propTypes = {
   submitted: PropTypes.bool.isRequired,
-  allComplete: PropTypes.bool.isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    state: PropTypes.string,
+    review: PropTypes.bool,
+    label: PropTypes.string,
+  })).isRequired,
   approvers: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })).isRequired,
-  valid: PropTypes.bool.isRequired,
   onFormSubmit: PropTypes.func.isRequired,
   formData: PropTypes.shape({
     approvingManager: PropTypes.shape({
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
index f36584275d..32b6f64151 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
@@ -20,7 +20,7 @@ const reportCreator = {
 
 const RenderReview = ({
   // eslint-disable-next-line react/prop-types
-  allComplete, formData, onSubmit, onReview, approvingManagerId, approvingManager,
+  allComplete, formData, onSubmit, onReview, approvingManagerId, approvingManager, pages,
 }) => {
   const hookForm = useForm({
     mode: 'onChange',
@@ -37,12 +37,25 @@ const RenderReview = ({
         formData={formData}
         onReview={onReview}
         approvingManager={approvingManager}
+        pages={pages}
         reportCreator={reportCreator}
       />
     </FormProvider>
   );
 };
 
+const completePages = [{
+  label: 'label',
+  state: 'Complete',
+  review: false,
+}];
+
+const incompletePages = [{
+  label: 'incomplete',
+  state: 'In progress',
+  review: false,
+}];
+
 const renderReview = (
   allComplete,
   approvingManager = false,
@@ -51,7 +64,10 @@ const renderReview = (
   onSubmit = () => {},
   onReview = () => {},
   approvingManagerId = null,
+  complete = true,
 ) => {
+  const pages = complete ? completePages : incompletePages;
+
   render(
     <RenderReview
       allComplete={allComplete}
@@ -60,11 +76,12 @@ const renderReview = (
       approvingManager={approvingManager}
       onReview={onReview}
       approvingManagerId={approvingManagerId}
+      pages={pages}
     />,
   );
 };
 
-const selectLabel = 'Approving manager';
+const selectLabel = 'Approving manager (Required)';
 
 describe('ReviewSubmit', () => {
   describe('when the user is the approving manager', () => {
@@ -99,18 +116,12 @@ describe('ReviewSubmit', () => {
   });
 
   describe('when the form is not complete', () => {
-    it('an error alert is shown', async () => {
-      renderReview(false, false);
-      const alert = await screen.findByTestId('alert');
-      expect(alert).toHaveClass('usa-alert--error');
-      await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
-    });
-
-    it('the submit button is disabled', async () => {
+    it('an error message is shown when the report is submitted', async () => {
       renderReview(false, false);
       const button = await screen.findByRole('button');
-      expect(button).toBeDisabled();
-      await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
+      userEvent.click(button);
+      const error = await screen.findByTestId('errorMessage');
+      expect(error).toBeVisible();
     });
   });
 
@@ -122,14 +133,6 @@ describe('ReviewSubmit', () => {
       await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
     });
 
-    it('the submit button is disabled until one approver is selected', async () => {
-      renderReview(true, false);
-      const button = await screen.findByRole('button');
-      expect(button).toBeDisabled();
-      userEvent.selectOptions(screen.getByTestId('dropdown'), ['1']);
-      expect(await screen.findByRole('button')).toBeEnabled();
-    });
-
     it('the submit button calls onSubmit', async () => {
       const onSubmit = jest.fn();
       renderReview(true, false, REPORT_STATUSES.DRAFT, {}, onSubmit, () => {}, 1);
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/index.js b/frontend/src/pages/ActivityReport/Pages/Review/index.js
index 6a87f44dd1..9bf91aa1d3 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/index.js
@@ -4,7 +4,6 @@ import {
   Alert, Accordion,
 } from '@trussworks/react-uswds';
 import { Helmet } from 'react-helmet';
-import { useFormContext } from 'react-hook-form';
 
 import Container from '../../../../components/Container';
 import Submitter from './Submitter';
@@ -14,7 +13,6 @@ import './index.css';
 import { REPORT_STATUSES } from '../../../../Constants';
 
 const ReviewSubmit = ({
-  allComplete,
   onSubmit,
   onReview,
   reviewItems,
@@ -22,11 +20,9 @@ const ReviewSubmit = ({
   approvingManager,
   reportCreator,
   formData,
+  pages,
 }) => {
-  const { formState } = useFormContext();
   const { additionalNotes, status } = formData;
-  const { isValid } = formState;
-  const valid = allComplete && isValid;
 
   const [submitted, updateSubmitted] = useState(status === REPORT_STATUSES.SUBMITTED);
   const [reviewed, updateReviewed] = useState(false);
@@ -74,9 +70,8 @@ const ReviewSubmit = ({
         <Submitter
           status={status}
           submitted={submitted}
-          allComplete={allComplete}
           approvers={approvers}
-          valid={valid}
+          pages={pages}
           onFormSubmit={onFormSubmit}
           formData={formData}
         />
@@ -87,7 +82,6 @@ const ReviewSubmit = ({
           status={status}
           reviewed={reviewed}
           additionalNotes={additionalNotes}
-          valid={valid}
           onFormReview={onFormReview}
           formData={formData}
         />
@@ -104,7 +98,6 @@ ReviewSubmit.propTypes = {
       name: PropTypes.string.isRequired,
     }),
   ).isRequired,
-  allComplete: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onReview: PropTypes.func.isRequired,
   approvingManager: PropTypes.bool.isRequired,
@@ -124,6 +117,11 @@ ReviewSubmit.propTypes = {
       content: PropTypes.node.isRequired,
     }),
   ).isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    review: PropTypes.bool,
+    state: PropTypes.string,
+    label: PropTypes.string,
+  })).isRequired,
 };
 
 export default ReviewSubmit;
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js b/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
index 73689c475c..0954c3509a 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
@@ -92,7 +92,7 @@ const Item = ({ label, value, path }) => {
       <Grid col={6}>
         {values.map((v, index) => (
           <Grid aria-label={`${label} ${index + 1}`} key={`${label}${v}`} col={12} className="flex-align-end display-flex flex-column flex-justify-center">
-            {v}
+            {Number.isNaN(v) ? '' : v}
           </Grid>
         ))}
       </Grid>
diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
index 8189f24828..2cd68f1d85 100644
--- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js
+++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { useFormContext } from 'react-hook-form';
 
 import {
-  Fieldset, Radio, Label, Grid, TextInput, Checkbox,
+  Fieldset, Radio, Grid, TextInput, Checkbox,
 } from '@trussworks/react-uswds';
 
 import DatePicker from '../../../components/DatePicker';
@@ -16,6 +16,7 @@ import {
   programTypes,
   targetPopulations,
 } from '../constants';
+import FormItem from '../../../components/FormItem';
 
 const ActivitySummary = ({
   recipients,
@@ -64,7 +65,7 @@ const ActivitySummary = ({
     }
   }, [activityRecipientType, setValue]);
 
-  const renderCheckbox = (name, value, label) => (
+  const renderCheckbox = (name, value, label, requiredMessage) => (
     <Checkbox
       id={value}
       label={label}
@@ -73,7 +74,7 @@ const ActivitySummary = ({
       className="smart-hub--report-checkbox"
       inputRef={register({
         validate: () => (
-          getValues(name).length ? true : `${name} is required`
+          getValues(name).length ? true : requiredMessage
         ),
       })}
     />
@@ -87,84 +88,110 @@ const ActivitySummary = ({
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Who was the activity for?">
         <div id="activity-for" />
         <div className="smart-hub--form-section">
-          <Radio
-            id="category-grantee"
+          <FormItem
+            label="Was this activity for a grantee or non-grantee?"
             name="activityRecipientType"
-            label="Grantee"
-            value="grantee"
-            className="smart-hub--report-checkbox"
-            inputRef={register({ required: true })}
-          />
-          <Radio
-            id="category-non-grantee"
-            name="activityRecipientType"
-            label="Non-Grantee"
-            value="non-grantee"
-            className="smart-hub--report-checkbox"
-            inputRef={register({ required: true })}
-          />
+            isCheckbox
+          >
+            <Radio
+              id="category-grantee"
+              name="activityRecipientType"
+              label="Grantee"
+              value="grantee"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify grantee or non-grantee' })}
+            />
+            <Radio
+              id="category-non-grantee"
+              name="activityRecipientType"
+              label="Non-Grantee"
+              value="non-grantee"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify grantee or non-grantee' })}
+            />
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="activityRecipients"
+          <FormItem
             label={recipientLabel}
-            disabled={disableRecipients}
-            control={control}
-            valueProperty="activityRecipientId"
-            labelProperty="name"
-            simple={false}
-            options={selectedRecipients}
-          />
+            name="activityRecipients"
+          >
+            <MultiSelect
+              name="activityRecipients"
+              disabled={disableRecipients}
+              control={control}
+              valueProperty="activityRecipientId"
+              labelProperty="name"
+              simple={false}
+              required="Please select at least one grantee or non-grantee"
+              options={selectedRecipients}
+            />
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="collaborators"
+          <FormItem
             label="Collaborating Specialists"
-            control={control}
+            name="collaborators"
             required={false}
-            valueProperty="id"
-            labelProperty="name"
-            simple={false}
-            options={collaborators.map((user) => ({ value: user.id, label: user.name }))}
-          />
+          >
+            <MultiSelect
+              name="collaborators"
+              control={control}
+              required={false}
+              valueProperty="id"
+              labelProperty="name"
+              simple={false}
+              options={collaborators.map((user) => ({ value: user.id, label: user.name }))}
+            />
+          </FormItem>
         </div>
         {granteeSelected
         && (
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="programTypes"
+          <FormItem
             label="Program type(s)"
-            control={control}
-            required
-            options={programTypes.map((pt) => ({ value: pt, label: pt }))}
-          />
+            name="programTypes"
+          >
+            <MultiSelect
+              name="programTypes"
+              label="Program type(s)"
+              control={control}
+              required="Please select at least one program type"
+              options={programTypes.map((pt) => ({ value: pt, label: pt }))}
+            />
+          </FormItem>
         </div>
         )}
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="targetPopulations"
+          <FormItem
             label="Target Populations addressed. You may choose more than one."
-            control={control}
-            required
-            options={targetPopulations.map((tp) => ({ value: tp, label: tp }))}
-          />
+            name="targetPopulations"
+            required={false}
+          >
+            <MultiSelect
+              name="targetPopulations"
+              control={control}
+              required="Please select at least one target population"
+              options={targetPopulations.map((tp) => ({ value: tp, label: tp }))}
+            />
+          </FormItem>
         </div>
       </Fieldset>
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Reason for Activity">
         <div id="reasons" />
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>
-              Who requested this activity?
-              Use &quot;Regional Office&quot; for TTA not requested by grantee
-            </legend>
+          <FormItem
+            label="Who requested this activity? Use &quot;Regional Office&quot; for TTA not requested by grantee."
+            name="requester"
+            isCheckbox
+          >
             <Radio
               id="granteeRequest"
               name="requester"
               label="Grantee"
               value="grantee"
               className="smart-hub--report-checkbox"
-              inputRef={register({ required: true })}
+              inputRef={register({ required: 'Please specify grantee or regional office' })}
             />
             <Radio
               id="requestorRegionalOffice"
@@ -172,47 +199,73 @@ const ActivitySummary = ({
               label="Regional Office"
               value="regionalOffice"
               className="smart-hub--report-checkbox"
-              inputRef={register({ required: true })}
+              inputRef={register({ required: 'Please specify grantee or regional office' })}
             />
-          </Fieldset>
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
+          <FormItem
+            label="Reason(s). You may choose more than one."
             name="reason"
-            label="What was the reason for this activity?"
-            control={control}
-            options={reasons.map((reason) => ({ value: reason, label: reason }))}
-          />
+          >
+            <MultiSelect
+              name="reason"
+              control={control}
+              options={reasons.map((reason) => ({ value: reason, label: reason }))}
+            />
+          </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Date and Duration">
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Activity date">
         <div id="date" />
-        <div className="smart-hub--form-section">
+        <div>
           <Grid row gap>
             <Grid col={6}>
-              <DatePicker
-                control={control}
-                maxDate={endDate}
-                name="startDate"
+              <FormItem
                 label="Start Date"
-                register={register}
-                openUp
-              />
+                name="startDate"
+              >
+                <DatePicker
+                  control={control}
+                  maxDate={endDate}
+                  name="startDate"
+                  openUp
+                />
+              </FormItem>
             </Grid>
             <Grid col={6}>
-              <DatePicker
-                control={control}
-                minDate={startDate}
-                disabled={!startDate}
-                name="endDate"
+              <FormItem
                 label="End Date"
-                register={register}
-                openUp
-              />
+                name="endDate"
+              >
+                <DatePicker
+                  control={control}
+                  minDate={startDate}
+                  disabled={!startDate}
+                  name="endDate"
+                  openUp
+                />
+              </FormItem>
             </Grid>
             <Grid col={5}>
-              <Label htmlFor="duration">Duration (round to the nearest half hour)</Label>
-              <TextInput id="duration" name="duration" type="number" inputRef={register({ required: true, valueAsNumber: true })} />
+              <FormItem
+                label="Duration"
+                name="duration"
+              >
+                <TextInput
+                  id="duration"
+                  name="duration"
+                  type="number"
+                  min={0}
+                  inputRef={
+                    register({
+                      required: 'Please enter the duration of the activity',
+                      valueAsNumber: true,
+                      min: { value: 0, message: 'Duration can not be negative' },
+                    })
+                  }
+                />
+              </FormItem>
             </Grid>
           </Grid>
         </div>
@@ -220,56 +273,82 @@ const ActivitySummary = ({
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Training or Technical Assistance">
         <div id="tta" />
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>What TTA was provided?</legend>
-            {renderCheckbox('ttaType', 'training', 'Training')}
-            {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance')}
-          </Fieldset>
+          <FormItem
+            label="What TTA was provided"
+            name="ttaType"
+            isCheckbox
+          >
+            {renderCheckbox('ttaType', 'training', 'Training', 'Please specify the type of TTA provided')}
+            {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance', 'Please specify the type of TTA provided')}
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>How was this activity conducted? (select at least one)</legend>
-            <div className="smart-hub--form-section">
-              <Radio
-                id="delivery-method-virtual"
-                name="deliveryMethod"
-                label="Virtual"
-                value="virtual"
-                className="smart-hub--report-checkbox"
-                inputRef={register({ required: true })}
-              />
-              <Radio
-                id="delivery-method-in-person"
-                name="deliveryMethod"
-                label="In Person"
-                value="in-person"
-                className="smart-hub--report-checkbox"
-                inputRef={register({ required: true })}
-              />
-            </div>
-          </Fieldset>
+          <FormItem
+            label="How was the activity conducted?"
+            name="deliveryMethod"
+            isCheckbox
+          >
+            <Radio
+              id="delivery-method-virtual"
+              name="deliveryMethod"
+              label="Virtual"
+              value="virtual"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify how the activity was conducted' })}
+            />
+            <Radio
+              id="delivery-method-in-person"
+              name="deliveryMethod"
+              label="In Person"
+              value="in-person"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify how the activity was conducted' })}
+            />
+          </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Other participants">
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Participants">
         <div id="other-participants" />
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="participants"
+          <FormItem
             label={participantsLabel}
-            control={control}
-            options={
+            name="participants"
+          >
+            <MultiSelect
+              name="participants"
+              control={control}
+              options={
               participants.map((participant) => ({ value: participant, label: participant }))
             }
-          />
+            />
+          </FormItem>
         </div>
-        <div className="smart-hub--form-section">
-          <Label htmlFor="numberOfParticipants">Number of grantee participants involved</Label>
-          <TextInput
-            id="numberOfParticipants"
+        <div>
+          <FormItem
+            label="Number of participants involved"
             name="numberOfParticipants"
-            type="number"
-            inputRef={register({ required: true, valueAsNumber: true })}
-          />
+          >
+            <Grid row gap>
+              <Grid col={5}>
+                <TextInput
+                  id="numberOfParticipants"
+                  name="numberOfParticipants"
+                  type="number"
+                  min={1}
+                  inputRef={
+                    register({
+                      required: 'Please enter the number of participants involved in the activity',
+                      valueAsNumber: true,
+                      min: {
+                        value: 1,
+                        message: 'Number of participants can not be zero or negative',
+                      },
+                    })
+                  }
+                />
+              </Grid>
+            </Grid>
+          </FormItem>
         </div>
       </Fieldset>
     </>
diff --git a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
index a0a76b1719..4806250cb3 100644
--- a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
+++ b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
@@ -30,6 +30,7 @@ const GoalPicker = ({
           valueProperty="id"
           labelProperty="name"
           simple={false}
+          required={false}
           components={components}
           options={availableGoals.map((goal) => ({ value: goal.id, label: goal.name }))}
           multiSelectOptions={{
diff --git a/frontend/src/pages/ActivityReport/Pages/index.js b/frontend/src/pages/ActivityReport/Pages/index.js
index b6ecec9ecf..d1e1c99b26 100644
--- a/frontend/src/pages/ActivityReport/Pages/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/index.js
@@ -28,17 +28,16 @@ const reviewPage = {
   path: 'review',
   render:
     (
-      allComplete,
       formData,
       onSubmit,
       additionalData,
       onReview,
       approvingManager,
+      allPages,
       reportCreator,
     ) => (
       <ReviewSubmit
         approvers={additionalData.approvers}
-        allComplete={allComplete}
         onSubmit={onSubmit}
         onReview={onReview}
         approvingManager={approvingManager}
@@ -46,6 +45,7 @@ const reviewPage = {
           pages.map((p) => reviewItem(p.path, p.label, p.sections, formData))
         }
         formData={formData}
+        pages={allPages}
         reportCreator={reportCreator}
       />
     ),
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 9b657d2d75..6f3ff4aa52 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -10,6 +10,7 @@ import {
 
 import MultiSelect from '../../../components/MultiSelect';
 import FileUploader from '../../../components/FileUploader';
+import FormItem from '../../../components/FormItem';
 import { topics } from '../constants';
 
 const TopicsResources = ({
@@ -24,18 +25,24 @@ const TopicsResources = ({
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Topics Covered">
         <div id="topics-covered" />
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="topics"
+          <FormItem
             label="Topic(s) covered. You may choose more than one."
-            control={control}
-            placeholder="Select a topic..."
-            options={
-                topics.map((topic) => ({ value: topic, label: topic }))
-              }
-          />
+            name="topics"
+          >
+            <MultiSelect
+              name="topics"
+              label="Topic(s) covered. You may choose more than one."
+              control={control}
+              placeholder="Select a topic..."
+              required="Please select at least one topic"
+              options={
+              topics.map((topic) => ({ value: topic, label: topic }))
+            }
+            />
+          </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Resources">
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="OHS / ECLKC resources">
         <div id="resources" />
         <div className="smart-hub--form-section">
           <Label htmlFor="resourcesUsed">
@@ -47,9 +54,11 @@ const TopicsResources = ({
             id="resourcesUsed"
             name="resourcesUsed"
             type="text"
-            inputRef={register({ required: true })}
+            inputRef={register()}
           />
         </div>
+      </Fieldset>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Upload resources">
         <div className="smart-hub--form-section">
           <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
           <Controller
@@ -64,7 +73,7 @@ const TopicsResources = ({
       </Fieldset>
       <Fieldset legend="Attachments" className="smart-hub--report-legend smart-hub--form-section">
         <div id="attachments" />
-        <Label htmlFor="attachments">Upload any resources used that are not available through ECLKC</Label>
+        <Label htmlFor="attachments">Agendas, service plans, sign-in sheets, etc.</Label>
         <Controller
           name="attachments"
           defaultValue={[]}
diff --git a/frontend/src/pages/ActivityReport/__tests__/index.js b/frontend/src/pages/ActivityReport/__tests__/index.js
index bdf2bc4498..1ddd99ae8c 100644
--- a/frontend/src/pages/ActivityReport/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/__tests__/index.js
@@ -67,6 +67,13 @@ describe('ActivityReport', () => {
     fetchMock.get('/api/activity-reports/approvers?region=1', []);
   });
 
+  it('handles failures to download a report', async () => {
+    fetchMock.get('/api/activity-reports/1', () => { throw new Error('unable to download report'); });
+    renderActivityReport('1', 'activity-summary', true);
+    const alert = await screen.findByTestId('alert');
+    expect(alert).toHaveTextContent('Unable to load activity report');
+  });
+
   describe('last saved time', () => {
     it('is shown if history.state.showLastUpdatedTime is true', async () => {
       const data = formData();
@@ -91,7 +98,7 @@ describe('ActivityReport', () => {
     await waitFor(() => expect(screen.queryByLabelText('Program type(s)')).toBeNull());
     const nonGrantee = within(information).getByLabelText('Grantee');
     fireEvent.click(nonGrantee);
-    await waitFor(() => expect(screen.queryByLabelText('Program type(s)')).toBeVisible());
+    await waitFor(() => expect(screen.queryByLabelText('Program type(s) (Required)')).toBeVisible());
   });
 
   it('defaults to activity summary if no page is in the url', async () => {
@@ -115,7 +122,7 @@ describe('ActivityReport', () => {
       const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
       const grantee = within(information).getByLabelText('Grantee');
       fireEvent.click(grantee);
-      const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       await reactSelectEvent.select(granteeSelectbox, ['grant']);
 
       const button = await screen.findByRole('button', { name: 'Topics and resources' });
@@ -141,7 +148,7 @@ describe('ActivityReport', () => {
         const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
         const grantee = within(information).getByLabelText('Grantee');
         fireEvent.click(grantee);
-        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
         reactSelectEvent.openMenu(granteeSelectbox);
         expect(await screen.findByText(withText('grant'))).toBeVisible();
       });
@@ -151,7 +158,7 @@ describe('ActivityReport', () => {
         const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
         const nonGrantee = within(information).getByLabelText('Non-Grantee');
         fireEvent.click(nonGrantee);
-        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
         reactSelectEvent.openMenu(granteeSelectbox);
         expect(await screen.findByText(withText('nonGrantee'))).toBeVisible();
       });
@@ -159,41 +166,13 @@ describe('ActivityReport', () => {
 
     it('clears selection when non-grantee is selected', async () => {
       renderActivityReport('new');
-      const enabled = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const enabled = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       expect(enabled).toBeDisabled();
       const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
       const grantee = within(information).getByLabelText('Grantee');
       fireEvent.click(grantee);
-      const disabled = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const disabled = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       expect(disabled).not.toBeDisabled();
     });
   });
-
-  describe('method checkboxes', () => {
-    it('require a single selection for the form to be valid', async () => {
-      const data = formData();
-      delete data.deliveryMethod;
-      fetchMock.get('/api/activity-reports/1', data);
-
-      renderActivityReport(1);
-      expect(await screen.findByText('Continue')).toBeDisabled();
-      const box = await screen.findByLabelText('Virtual');
-      fireEvent.click(box);
-      await waitFor(() => expect(screen.getByText('Continue')).not.toBeDisabled());
-    });
-  });
-
-  describe('tta checkboxes', () => {
-    it('requires a single selection for the form to be valid', async () => {
-      const data = formData();
-      delete data.ttaType;
-      fetchMock.get('/api/activity-reports/1', data);
-
-      renderActivityReport(1);
-      expect(await screen.findByText('Continue')).toBeDisabled();
-      const box = await screen.findByLabelText('Training');
-      fireEvent.click(box);
-      await waitFor(() => expect(screen.getByText('Continue')).not.toBeDisabled());
-    });
-  });
 });
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 0c26d8a6e8..136297fd7c 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -40,6 +40,8 @@ const fakeGoals = [
 
 const defaultValues = {
   deliveryMethod: [],
+  activityRecipientType: '',
+  activityRecipients: [],
   activityType: [],
   attachments: [],
   context: '',
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c84e8d1b84..f0a0fcb7b4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1288,6 +1288,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@hookform/error-message@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@hookform/error-message/-/error-message-0.0.5.tgz#606912b506513669980c440f383ff6c78a7aca3a"
+  integrity sha512-es7eLLFA3SXNYAT8aUjvf7Gok1eMHK+9DMILtJA7ZEwYZlCCCPifhpoZmY+5SOopEtF7e+qxFOjX+MJnI3jOcg==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -9622,10 +9627,10 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6.9.0:
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.13.1.tgz#b9c0aa61f746db8169ed5e1050de21cacb1947d6"
-  integrity sha512-Q0N7MYcbA8SigYufb02h9z97ZKCpIbe62rywOTPsK4Ntvh6fRTGDXSuzWuRhLHhArLoWbGrWYSNSS4tlb+OFXg==
+react-hook-form@^6.15.0:
+  version "6.15.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.1.tgz#57d887ec4dac5a6c0099902171aa39cc893f7bca"
+  integrity sha512-bL0LQuQ3OlM3JYfbacKtBPLOHhmgYz8Lj6ivMrvu2M6e1wnt4sbGRtPEPYCc/8z3WDbjrMwfAfLX92OsB65pFA==
 
 react-idle-timer@^4.4.2:
   version "4.5.0"