diff --git a/frontend/src/components/Navigator/__tests__/index.js b/frontend/src/components/Navigator/__tests__/index.js
index a11f34e5f7..8c6d6066b8 100644
--- a/frontend/src/components/Navigator/__tests__/index.js
+++ b/frontend/src/components/Navigator/__tests__/index.js
@@ -5,22 +5,31 @@ import {
   render, screen, waitFor, within,
 } from '@testing-library/react';
 
+import { useFormContext } from 'react-hook-form';
 import Navigator from '../index';
 import { NOT_STARTED } from '../constants';
 
+// eslint-disable-next-line react/prop-types
+const Input = ({ name }) => {
+  const { register } = useFormContext();
+  return (
+    <input
+      type="radio"
+      data-testid={name}
+      name={name}
+      ref={register}
+    />
+  );
+};
+
 const pages = [
   {
     position: 1,
     path: 'first',
     label: 'first page',
     review: false,
-    render: (hookForm) => (
-      <input
-        type="radio"
-        data-testid="first"
-        ref={hookForm.register}
-        name="first"
-      />
+    render: () => (
+      <Input name="first" />
     ),
   },
   {
@@ -28,13 +37,8 @@ const pages = [
     path: 'second',
     label: 'second page',
     review: false,
-    render: (hookForm) => (
-      <input
-        type="radio"
-        data-testid="second"
-        ref={hookForm.register}
-        name="second"
-      />
+    render: () => (
+      <Input name="second" />
     ),
   },
   {
@@ -42,7 +46,7 @@ const pages = [
     label: 'review page',
     path: 'review',
     review: true,
-    render: (hookForm, allComplete, formData, onSubmit) => (
+    render: (allComplete, formData, onSubmit) => (
       <div>
         <button type="button" data-testid="review" onClick={onSubmit}>Continue</button>
       </div>
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 004a177cfe..67ac22cd75 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /*
   The navigator is a component used to show multiple form pages. It displays a stickied nav window
   on the left hand side with each page of the form listed. Clicking on an item in the nav list will
@@ -6,7 +7,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { Form, Button, Grid } from '@trussworks/react-uswds';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useInterval from '@use-it/interval';
@@ -125,10 +126,10 @@ function Navigator({
         />
       </Grid>
       <Grid col={12} tablet={{ col: 6 }} desktop={{ col: 8 }}>
-        <div id="navigator-form">
-          {page.review
+        <FormProvider {...hookForm}>
+          <div id="navigator-form">
+            {page.review
             && page.render(
-              hookForm,
               allComplete,
               formData,
               onFormSubmit,
@@ -137,7 +138,7 @@ function Navigator({
               approvingManager,
               reportId,
             )}
-          {!page.review
+            {!page.review
             && (
               <Container skipTopPadding>
                 <NavigatorHeader
@@ -147,12 +148,13 @@ function Navigator({
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
-                  {page.render(hookForm, additionalData, formData, reportId)}
+                  {page.render(additionalData, formData, reportId)}
                   <Button type="submit" disabled={!isValid}>Continue</Button>
                 </Form>
               </Container>
             )}
-        </div>
+          </div>
+        </FormProvider>
       </Grid>
     </Grid>
   );
diff --git a/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js b/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
index 68a9974ff8..d0e7fd6d7e 100644
--- a/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
+++ b/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
@@ -4,6 +4,7 @@ import {
   Alert, Accordion,
 } from '@trussworks/react-uswds';
 import { Helmet } from 'react-helmet';
+import { useFormContext } from 'react-hook-form';
 
 import Container from '../../../components/Container';
 import SubmitterReviewPage from './SubmitterReviewPage';
@@ -11,7 +12,6 @@ import ApproverReviewPage from './ApproverReviewPage';
 import './ReviewSubmit.css';
 
 const ReviewSubmit = ({
-  hookForm,
   allComplete,
   onSubmit,
   onReview,
@@ -20,7 +20,7 @@ const ReviewSubmit = ({
   approvingManager,
   initialData,
 }) => {
-  const { handleSubmit, register, formState } = hookForm;
+  const { handleSubmit, register, formState } = useFormContext();
   const { additionalNotes } = initialData;
   const { isValid } = formState;
   const valid = allComplete && isValid;
@@ -108,7 +108,6 @@ ReviewSubmit.propTypes = {
     additionalNotes: PropTypes.string,
   }).isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  hookForm: PropTypes.object.isRequired,
   reviewItems: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
diff --git a/frontend/src/pages/ActivityReport/Pages/__tests__/ReviewSubmit.js b/frontend/src/pages/ActivityReport/Pages/__tests__/ReviewSubmit.js
index 5e0a31baaf..2ca6eb2dd6 100644
--- a/frontend/src/pages/ActivityReport/Pages/__tests__/ReviewSubmit.js
+++ b/frontend/src/pages/ActivityReport/Pages/__tests__/ReviewSubmit.js
@@ -1,8 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import ReviewSubmit from '../ReviewSubmit';
 
@@ -20,16 +21,17 @@ const RenderReview = ({
     defaultValues: { ...initialData, approvingManagerId },
   });
   return (
-    <ReviewSubmit
-      allComplete={allComplete}
-      onSubmit={onSubmit}
-      reviewItems={[]}
-      approvers={approvers}
-      hookForm={hookForm}
-      initialData={initialData}
-      onReview={onReview}
-      approvingManager={approvingManager}
-    />
+    <FormProvider {...hookForm}>
+      <ReviewSubmit
+        allComplete={allComplete}
+        onSubmit={onSubmit}
+        reviewItems={[]}
+        approvers={approvers}
+        initialData={initialData}
+        onReview={onReview}
+        approvingManager={approvingManager}
+      />
+    </FormProvider>
   );
 };
 
diff --git a/frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js b/frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js
index 6b615b6e53..d7cce51120 100644
--- a/frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js
+++ b/frontend/src/pages/ActivityReport/Pages/__tests__/goalsObjectives.js
@@ -1,8 +1,9 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import React from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import join from 'url-join';
 
 import goalsObjectives from '../goalsObjectives';
@@ -21,9 +22,9 @@ const RenderGoalsObjectives = ({
   const activityRecipients = grantIds.map((id) => ({ activityRecipientId: id }));
   const data = { ...initialData, activityRecipientType, activityRecipients };
   return (
-    <>
-      {goalsObjectives.render(hookForm, {}, data)}
-    </>
+    <FormProvider {...hookForm}>
+      {goalsObjectives.render({}, data)}
+    </FormProvider>
   );
 };
 
diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
index 3dccf181e4..8189f24828 100644
--- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js
+++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { useFormContext } from 'react-hook-form';
 
 import {
   Fieldset, Radio, Label, Grid, TextInput, Checkbox,
@@ -17,14 +18,16 @@ import {
 } from '../constants';
 
 const ActivitySummary = ({
-  register,
-  watch,
-  setValue,
-  control,
-  getValues,
   recipients,
   collaborators,
 }) => {
+  const {
+    register,
+    watch,
+    setValue,
+    control,
+    getValues,
+  } = useFormContext();
   const activityRecipientType = watch('activityRecipientType');
   const startDate = watch('startDate');
   const endDate = watch('endDate');
@@ -274,10 +277,6 @@ const ActivitySummary = ({
 };
 
 ActivitySummary.propTypes = {
-  register: PropTypes.func.isRequired,
-  watch: PropTypes.func.isRequired,
-  setValue: PropTypes.func.isRequired,
-  getValues: PropTypes.func.isRequired,
   collaborators: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -303,8 +302,6 @@ ActivitySummary.propTypes = {
       }),
     ),
   }).isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  control: PropTypes.object.isRequired,
 };
 
 const sections = [
@@ -361,19 +358,11 @@ export default {
   path: 'activity-summary',
   sections,
   review: false,
-  render: (hookForm, additionalData) => {
-    const {
-      register, watch, setValue, getValues, control,
-    } = hookForm;
+  render: (additionalData) => {
     const { recipients, collaborators } = additionalData;
     return (
       <ActivitySummary
-        register={register}
-        watch={watch}
         recipients={recipients}
-        setValue={setValue}
-        getValues={getValues}
-        control={control}
         collaborators={collaborators}
       />
     );
diff --git a/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js b/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js
index bd213fd797..a1fec8776a 100644
--- a/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js
+++ b/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js
@@ -5,13 +5,20 @@ import {
   Fieldset, Label, Textarea,
 } from '@trussworks/react-uswds';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useFormContext } from 'react-hook-form';
 
 import GoalPicker from './components/GoalPicker';
 import { getGoals } from '../../../fetchers/activityReports';
 
 const GoalsObjectives = ({
-  control, grantIds, register, watch, setValue, activityRecipientType,
+  grantIds, activityRecipientType,
 }) => {
+  const {
+    control,
+    register,
+    watch,
+    setValue,
+  } = useFormContext();
   const [availableGoals, updateAvailableGoals] = useState([]);
   const [loading, updateLoading] = useState(true);
   const goals = watch('goals');
@@ -62,12 +69,7 @@ const GoalsObjectives = ({
 };
 
 GoalsObjectives.propTypes = {
-  register: PropTypes.func.isRequired,
-  setValue: PropTypes.func.isRequired,
   grantIds: PropTypes.arrayOf(PropTypes.number).isRequired,
-  watch: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  control: PropTypes.object.isRequired,
   activityRecipientType: PropTypes.string.isRequired,
 };
 
@@ -94,10 +96,7 @@ export default {
   path: 'goals-objectives',
   review: false,
   sections,
-  render: (hookForm, additionalData, formData) => {
-    const {
-      register, watch, control, setValue,
-    } = hookForm;
+  render: (additionalData, formData) => {
     const recipients = formData.activityRecipients || [];
     const { activityRecipientType } = formData;
     const grantIds = recipients.map((r) => r.activityRecipientId);
@@ -105,11 +104,6 @@ export default {
       <GoalsObjectives
         activityRecipientType={activityRecipientType}
         grantIds={grantIds}
-        formData={formData}
-        setValue={setValue}
-        watch={watch}
-        register={register}
-        control={control}
       />
     );
   },
diff --git a/frontend/src/pages/ActivityReport/Pages/index.js b/frontend/src/pages/ActivityReport/Pages/index.js
index b8907e27c6..6f75e0d6ce 100644
--- a/frontend/src/pages/ActivityReport/Pages/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/index.js
@@ -28,7 +28,6 @@ const reviewPage = {
   path: 'review',
   render:
     (
-      hookForm,
       allComplete,
       formData,
       onSubmit,
@@ -41,7 +40,6 @@ const reviewPage = {
         allComplete={allComplete}
         onSubmit={onSubmit}
         onReview={onReview}
-        hookForm={hookForm}
         approvingManager={approvingManager}
         reviewItems={
           pages.map((p) => reviewItem(p.path, p.label, p.sections, formData))
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index cb555a8edf..9b657d2d75 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Controller } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { Helmet } from 'react-helmet';
 
 import {
@@ -13,74 +13,72 @@ import FileUploader from '../../../components/FileUploader';
 import { topics } from '../constants';
 
 const TopicsResources = ({
-  register,
-  control,
   reportId,
-}) => (
-  <>
-    <Helmet>
-      <title>Topics and resources</title>
-    </Helmet>
-    <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"
-          label="Topic(s) covered. You may choose more than one."
-          control={control}
-          placeholder="Select a topic..."
-          options={
-              topics.map((topic) => ({ value: topic, label: topic }))
-            }
-        />
-      </div>
-    </Fieldset>
-    <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Resources">
-      <div id="resources" />
-      <div className="smart-hub--form-section">
-        <Label htmlFor="resourcesUsed">
-          Resources from OHS / ECLKC
-          <br />
-          Enter the URL for OHS resource(s) used. https://eclkc.ohs.acf.hhs.gov/
-        </Label>
-        <TextInput
-          id="resourcesUsed"
-          name="resourcesUsed"
-          type="text"
-          inputRef={register({ required: true })}
-        />
-      </div>
-      <div className="smart-hub--form-section">
-        <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
+}) => {
+  const { register, control } = useFormContext();
+  return (
+    <>
+      <Helmet>
+        <title>Topics and resources</title>
+      </Helmet>
+      <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"
+            label="Topic(s) covered. You may choose more than one."
+            control={control}
+            placeholder="Select a topic..."
+            options={
+                topics.map((topic) => ({ value: topic, label: topic }))
+              }
+          />
+        </div>
+      </Fieldset>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Resources">
+        <div id="resources" />
+        <div className="smart-hub--form-section">
+          <Label htmlFor="resourcesUsed">
+            Resources from OHS / ECLKC
+            <br />
+            Enter the URL for OHS resource(s) used. https://eclkc.ohs.acf.hhs.gov/
+          </Label>
+          <TextInput
+            id="resourcesUsed"
+            name="resourcesUsed"
+            type="text"
+            inputRef={register({ required: true })}
+          />
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
+          <Controller
+            name="otherResources"
+            defaultValue={[]}
+            control={control}
+            render={({ onChange, value }) => (
+              <FileUploader files={value} onChange={onChange} reportId={reportId} id="otherResources" />
+            )}
+          />
+        </div>
+      </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>
         <Controller
-          name="otherResources"
+          name="attachments"
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} id="otherResources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
           )}
         />
-      </div>
-    </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>
-      <Controller
-        name="attachments"
-        defaultValue={[]}
-        control={control}
-        render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
-        )}
-      />
-    </Fieldset>
-  </>
-);
+      </Fieldset>
+    </>
+  );
+};
 
 TopicsResources.propTypes = {
-  register: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  control: PropTypes.object.isRequired,
   reportId: PropTypes.node.isRequired,
 };
 
@@ -115,14 +113,9 @@ export default {
   path: 'topics-resources',
   sections,
   review: false,
-  render: (hookForm, additionalData, formData, reportId) => {
-    const { control, register } = hookForm;
-    return (
-      <TopicsResources
-        register={register}
-        control={control}
-        reportId={reportId}
-      />
-    );
-  },
+  render: (additionalData, formData, reportId) => (
+    <TopicsResources
+      reportId={reportId}
+    />
+  ),
 };