diff --git a/integrationTests/cypress/integration/02-apd/01-apd-basics.spec.js b/integrationTests/cypress/integration/02-apd/01-apd-basics.spec.js
index 6fafc80167..370f6c25c7 100644
--- a/integrationTests/cypress/integration/02-apd/01-apd-basics.spec.js
+++ b/integrationTests/cypress/integration/02-apd/01-apd-basics.spec.js
@@ -581,7 +581,10 @@ describe('APD Basics', { tags: ['@apd', '@default'] }, () => {
 
         cy.get(`.ds-c-field--day`).click().type(element.dateDay);
 
-        cy.get(`.ds-c-field--year`).click().type(element.dateYear);
+        cy.get(`.ds-c-field--year`)
+          .click()
+          .type(element.dateYear)
+          .blur();
 
         cy.findByRole('button', { name: /Save/i }).click();
 
diff --git a/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.js b/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.js
index 516b6d116b..416b0aeb4d 100644
--- a/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.js
+++ b/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.js
@@ -1,59 +1,87 @@
 import { TextField } from '@cmsgov/design-system';
 import PropTypes from 'prop-types';
-import React, { useReducer, forwardRef } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import { connect } from 'react-redux';
 
+import { useForm, Controller } from 'react-hook-form';
+import { joiResolver } from '@hookform/resolvers/joi';
+
 import DateField from '../../../../../components/DateField';
 
+import milestonesSchema from '../../../../../static/schemas/milestones';
+
 import { saveMilestone as actualSaveMilestone } from '../../../../../redux/actions/editActivity';
 
 const MilestoneForm = forwardRef(
-  ({ activityIndex, index, item, saveMilestone }, ref) => {
+  ({ activityIndex, index, item, saveMilestone, setFormValid }, ref) => {
     MilestoneForm.displayName = 'MilestoneForm';
 
-    function reducer(state, action) {
-      switch (action.type) {
-        case 'updateField':
-          return {
-            ...state,
-            [action.field]: action.value
-          };
-        default:
-          throw new Error(
-            'Unrecognized action type provided to OutcomesAndMetricForm reducer'
-          );
-      }
-    }
-
-    const [state, dispatch] = useReducer(reducer, item);
-
-    const changeDate = (_, dateStr) =>
-      dispatch({ type: 'updateField', field: 'endDate', value: dateStr });
+    const {
+      control,
+      formState: { errors, isValid },
+      getFieldState,
+      trigger,
+      getValues
+    } = useForm({
+      defaultValues: {
+        ...item
+      },
+      mode: 'onBlur',
+      reValidateMode: 'onBlur',
+      resolver: joiResolver(milestonesSchema)
+    });
 
-    const changeName = ({ target: { value } }) =>
-      dispatch({ type: 'updateField', field: 'milestone', value });
+    useEffect(() => {
+      console.log("something changed")
+      setFormValid(isValid);
+    }, [isValid, errors]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const handleSubmit = e => {
+    const onSubmit = e => {
       e.preventDefault();
-      saveMilestone(activityIndex, index, state);
+      saveMilestone(activityIndex, index, getValues());
     };
 
     return (
-      <form index={index} onSubmit={handleSubmit}>
+      <form index={index} onSubmit={onSubmit}>
         <h6 className="ds-h4">Milestone {index + 1}:</h6>
-        <TextField
-          data-cy={`milestone-${index}`}
-          label="Name"
-          name="name"
-          value={state.milestone}
-          className="remove-clearfix textfield__container"
-          onChange={changeName}
+        <Controller
+          control={control}
+          name="milestone"
+          render={({ field: { value, ...props } }) => (
+            <TextField
+              {...props}
+              data-cy={`milestone-${index}`}
+              label="Name"
+              name="milestone"
+              value={value}
+              className="remove-clearfix textfield__container"
+              errorMessage={errors?.milestone?.message}
+              errorPlacement="bottom"
+            />
+          )} 
         />
-        <DateField
-          label="Target completion date"
-          hint=""
-          value={state.endDate}
-          onChange={changeDate}
+        <Controller
+          name="endDate"
+          control={control}
+          render={({
+            field: { onChange, onBlur, ...props },
+            formState: { isTouched }
+          }) => (
+            <DateField
+              {...props}
+              isTouched={isTouched}
+              label="Target completion date"
+              onChange={(e, dateStr) => onChange(dateStr)}
+              onComponentBlur={() => {
+                onBlur();
+                if (getFieldState('end').isTouched) {
+                  trigger('end');
+                }
+              }}
+              errorMessage={errors?.endDate?.message}
+              errorPlacement="bottom"
+            />
+          )}
         />
         <input
           className="ds-u-visibility--hidden"
@@ -73,7 +101,8 @@ MilestoneForm.propTypes = {
     endDate: PropTypes.string.isRequired,
     milestone: PropTypes.string.isRequired
   }).isRequired,
-  saveMilestone: PropTypes.func.isRequired
+  saveMilestone: PropTypes.func.isRequired,
+  setFormValid: PropTypes.func.isRequired
 };
 
 const mapDispatchToProps = {
@@ -84,4 +113,4 @@ export default connect(null, mapDispatchToProps, null, { forwardRef: true })(
   MilestoneForm
 );
 
-export { MilestoneForm as plain, mapDispatchToProps };
+export { MilestoneForm as plain, mapDispatchToProps };
\ No newline at end of file
diff --git a/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.test.js b/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.test.js
index 68f62c7e40..fbf1fcaa01 100644
--- a/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.test.js
+++ b/web/src/pages/apd/activities/oms/Milestone/MilestoneForm.test.js
@@ -1,46 +1,107 @@
-import { mount } from 'enzyme';
 import React from 'react';
+import {
+  renderWithConnection,
+  act,
+  screen,
+  within,
+  waitFor
+} from 'apd-testing-library';
+import userEvent from '@testing-library/user-event';
 
-import { plain as MilestoneForm, mapDispatchToProps } from './MilestoneForm';
+import { plain as MilestoneForm } from './MilestoneForm';
 
-import { saveMilestone as actualSaveMilestone } from '../../../../../redux/actions/editActivity';
+const defaultProps = {
+  activityIndex: 42,
+  index: 1,
+  item: {
+    // On 1 September 1939, Germany invaded Poland after having staged 
+    // several false flag border incidents as a pretext to initiate the 
+    // invasion.
+    endDate: '1939-9-01',
+    milestone: 'Milestone name'
+  },
+  saveMilestone: jest.fn(),
+  setFormValid: jest.fn()
+};
 
-describe('the MilestoneForm component', () => {
-  const saveMilestone = jest.fn();
+const setup = async (props = {}) => {
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  const renderUtils = await act(async () => {
+    renderWithConnection(<MilestoneForm {...defaultProps} {...props} />);
+  });
+  return renderUtils;
+};
 
-  const component = mount(
-    <MilestoneForm
-      activityIndex={225}
-      index={3252}
-      item={{
-        // Operation Torch, the Allied invasion of North Africa, is launched
-        // to relieve pressure on Egypt and provide an invasion route into
-        // southern Europe,
-        endDate: '1942-8-16',
-        milestone: 'Milestone name'
-      }}
-      saveMilestone={saveMilestone}
-    />
-  );
+const verifyDateField = (text, expectValue) => {
+  const fieldset = within(screen.getByText(text).closest('fieldset')); // eslint-disable-line testing-library/no-node-access
+  expect(fieldset.getByLabelText('Month')).toHaveValue(expectValue.month);
+  expect(fieldset.getByLabelText('Day')).toHaveValue(expectValue.day);
+  expect(fieldset.getByLabelText('Year')).toHaveValue(expectValue.year);
+};
 
+describe('the ContractorResourceForm component', () => {
   beforeEach(() => {
-    saveMilestone.mockClear();
+    jest.resetAllMocks();
   });
-
-  test('renders correctly', () => {
-    expect(component).toMatchSnapshot();
+  
+  test('renders correctly with default props', async () => {
+    await setup();
+    expect(screen.getByLabelText(/Name/i)).toHaveValue(defaultProps.item.milestone);
+    verifyDateField('Target completion date', {
+       month: '9',
+       day: '1',
+       year: '1939'
+     });
   });
-
-  describe('events', () => {
-    test('handles saving the milestone', () => {
-      component.find('form').simulate('submit');
-      expect(saveMilestone).toHaveBeenCalled();
+  
+  test('renders error when no name is provided', async () => {
+    await setup({});
+    
+    const input = screen.getByLabelText(/Name/i);
+    
+    userEvent.clear(input);
+    await waitFor(() => {
+      expect(input).toHaveFocus();
     });
+    userEvent.tab();
+    
+    expect(defaultProps.setFormValid).toHaveBeenLastCalledWith(false);
+    
+    const error = await screen.findByText(
+      /Milestone is required./i
+    );
+    expect(error).toBeInTheDocument();
   });
-
-  it('maps dispatch actions to props', () => {
-    expect(mapDispatchToProps).toEqual({
-      saveMilestone: actualSaveMilestone
+  
+  test('renders error when no date is provided', async () => {
+    await setup({});
+    
+    // start date - month, day, year
+    const endFieldset = within(
+     // eslint-disable-next-line testing-library/no-node-access
+     screen.getByText(/Target completion date/i).closest('fieldset')
+    );
+    
+    // first tab to skip over the name
+    userEvent.tab();
+    
+    userEvent.tab();
+    await waitFor(() => {
+     expect(endFieldset.getByLabelText('Month')).toHaveFocus();
+    });
+    userEvent.tab();
+    await waitFor(() => {
+     expect(endFieldset.getByLabelText('Day')).toHaveFocus();
+    });
+    userEvent.tab();
+    await waitFor(() => {
+     expect(endFieldset.getByLabelText('Year')).toHaveFocus();
     });
+    userEvent.tab();
+    
+    expect(defaultProps.setFormValid).toHaveBeenLastCalledWith(false);
+    
+    const error = await screen.findByRole('alert', 'Provide a completion date.');
+    expect(error).toBeInTheDocument();
   });
-});
+});
\ No newline at end of file
diff --git a/web/src/pages/apd/activities/oms/Milestone/__snapshots__/MilestoneForm.test.js.snap b/web/src/pages/apd/activities/oms/Milestone/__snapshots__/MilestoneForm.test.js.snap
deleted file mode 100644
index ae6eff68b3..0000000000
--- a/web/src/pages/apd/activities/oms/Milestone/__snapshots__/MilestoneForm.test.js.snap
+++ /dev/null
@@ -1,427 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`the MilestoneForm component renders correctly 1`] = `
-<MilestoneForm
-  activityIndex={225}
-  index={3252}
-  item={
-    Object {
-      "endDate": "1942-8-16",
-      "milestone": "Milestone name",
-    }
-  }
-  saveMilestone={[MockFunction]}
->
-  <form
-    index={3252}
-    onSubmit={[Function]}
-  >
-    <h6
-      className="ds-h4"
-    >
-      Milestone 
-      3253
-      :
-    </h6>
-    <TextField
-      className="remove-clearfix textfield__container"
-      data-cy="milestone-3252"
-      label="Name"
-      name="name"
-      onChange={[Function]}
-      type="text"
-      value="Milestone name"
-    >
-      <FormControl
-        className="ds-u-clearfix remove-clearfix textfield__container"
-        component="div"
-        label="Name"
-        labelComponent="label"
-        render={[Function]}
-      >
-        <div
-          className="ds-u-clearfix remove-clearfix textfield__container"
-        >
-          <FormLabel
-            component="label"
-            errorId="field_1-error"
-            fieldId="field_1"
-            id="field_1-label"
-          >
-            <label
-              className="ds-c-label"
-              htmlFor="field_1"
-              id="field_1-label"
-            >
-              <span
-                className=""
-              >
-                Name
-              </span>
-            </label>
-          </FormLabel>
-          <TextInput
-            data-cy="milestone-3252"
-            errorId="field_1-error"
-            errorPlacement="top"
-            id="field_1"
-            name="name"
-            onChange={[Function]}
-            setRef={[Function]}
-            type="text"
-            value="Milestone name"
-          >
-            <input
-              aria-invalid={false}
-              className="ds-c-field"
-              data-cy="milestone-3252"
-              id="field_1"
-              name="name"
-              onChange={[Function]}
-              type="text"
-              value="Milestone name"
-            />
-          </TextInput>
-        </div>
-      </FormControl>
-    </TextField>
-    <DateField
-      errorMessage=""
-      hint=""
-      label="Target completion date"
-      onChange={[Function]}
-      onComponentBlur={[Function]}
-      value="1942-8-16"
-    >
-      <DateField
-        dateFormatter={[Function]}
-        dayInvalid={false}
-        dayLabel="Day"
-        dayName="day"
-        dayValue={16}
-        errorMessage=""
-        errorPlacement="bottom"
-        hint=""
-        label="Target completion date"
-        monthInvalid={false}
-        monthLabel="Month"
-        monthName="month"
-        monthValue={8}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onComponentBlur={[Function]}
-        yearInvalid={false}
-        yearLabel="Year"
-        yearName="year"
-        yearValue={1942}
-      >
-        <FormControl
-          component="fieldset"
-          errorMessage=""
-          errorPlacement="bottom"
-          hint=""
-          label="Target completion date"
-          labelComponent="legend"
-          render={[Function]}
-        >
-          <fieldset
-            className="ds-c-fieldset"
-          >
-            <FormLabel
-              component="legend"
-              errorId="field_2-error"
-              errorMessage=""
-              hint=""
-              id="field_2-label"
-            >
-              <legend
-                className="ds-c-label"
-                id="field_2-label"
-              >
-                <span
-                  className=""
-                >
-                  Target completion date
-                </span>
-              </legend>
-            </FormLabel>
-            <DateInput
-              dateFormatter={[Function]}
-              dayInvalid={false}
-              dayLabel="Day"
-              dayName="day"
-              dayValue={16}
-              labelId="field_2-label"
-              monthInvalid={false}
-              monthLabel="Month"
-              monthName="month"
-              monthValue={8}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onComponentBlur={[Function]}
-              yearInvalid={false}
-              yearLabel="Year"
-              yearName="year"
-              yearValue={1942}
-            >
-              <div
-                className="ds-c-datefield__container ds-l-form-row"
-              >
-                <TextField
-                  aria-describedby="field_2-label"
-                  aria-invalid={false}
-                  className="ds-l-col--auto"
-                  fieldClassName="ds-c-field--month"
-                  inputRef={[Function]}
-                  label="Month"
-                  labelClassName="ds-c-datefield__label"
-                  name="month"
-                  numeric={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  type="text"
-                  value={8}
-                >
-                  <FormControl
-                    className="ds-u-clearfix ds-l-col--auto"
-                    component="div"
-                    inputRef={[Function]}
-                    label="Month"
-                    labelClassName="ds-c-datefield__label"
-                    labelComponent="label"
-                    render={[Function]}
-                  >
-                    <div
-                      className="ds-u-clearfix ds-l-col--auto"
-                    >
-                      <FormLabel
-                        className="ds-c-datefield__label"
-                        component="label"
-                        errorId="field_3-error"
-                        fieldId="field_3"
-                        id="field_3-label"
-                      >
-                        <label
-                          className="ds-c-label ds-c-datefield__label"
-                          htmlFor="field_3"
-                          id="field_3-label"
-                        >
-                          <span
-                            className=""
-                          >
-                            Month
-                          </span>
-                        </label>
-                      </FormLabel>
-                      <TextInput
-                        aria-describedby="field_2-label"
-                        aria-invalid={false}
-                        errorId="field_3-error"
-                        errorPlacement="top"
-                        fieldClassName="ds-c-field--month"
-                        id="field_3"
-                        name="month"
-                        numeric={true}
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        setRef={[Function]}
-                        type="text"
-                        value={8}
-                      >
-                        <input
-                          aria-describedby="field_2-label"
-                          aria-invalid={false}
-                          className="ds-c-field ds-c-field--month"
-                          id="field_3"
-                          inputMode="numeric"
-                          name="month"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          pattern="[0-9]*"
-                          type="text"
-                          value={8}
-                        />
-                      </TextInput>
-                    </div>
-                  </FormControl>
-                </TextField>
-                <span
-                  className="ds-c-datefield__separator"
-                >
-                  /
-                </span>
-                <TextField
-                  aria-describedby="field_2-label"
-                  aria-invalid={false}
-                  className="ds-l-col--auto"
-                  fieldClassName="ds-c-field--day"
-                  inputRef={[Function]}
-                  label="Day"
-                  labelClassName="ds-c-datefield__label"
-                  name="day"
-                  numeric={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  type="text"
-                  value={16}
-                >
-                  <FormControl
-                    className="ds-u-clearfix ds-l-col--auto"
-                    component="div"
-                    inputRef={[Function]}
-                    label="Day"
-                    labelClassName="ds-c-datefield__label"
-                    labelComponent="label"
-                    render={[Function]}
-                  >
-                    <div
-                      className="ds-u-clearfix ds-l-col--auto"
-                    >
-                      <FormLabel
-                        className="ds-c-datefield__label"
-                        component="label"
-                        errorId="field_4-error"
-                        fieldId="field_4"
-                        id="field_4-label"
-                      >
-                        <label
-                          className="ds-c-label ds-c-datefield__label"
-                          htmlFor="field_4"
-                          id="field_4-label"
-                        >
-                          <span
-                            className=""
-                          >
-                            Day
-                          </span>
-                        </label>
-                      </FormLabel>
-                      <TextInput
-                        aria-describedby="field_2-label"
-                        aria-invalid={false}
-                        errorId="field_4-error"
-                        errorPlacement="top"
-                        fieldClassName="ds-c-field--day"
-                        id="field_4"
-                        name="day"
-                        numeric={true}
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        setRef={[Function]}
-                        type="text"
-                        value={16}
-                      >
-                        <input
-                          aria-describedby="field_2-label"
-                          aria-invalid={false}
-                          className="ds-c-field ds-c-field--day"
-                          id="field_4"
-                          inputMode="numeric"
-                          name="day"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          pattern="[0-9]*"
-                          type="text"
-                          value={16}
-                        />
-                      </TextInput>
-                    </div>
-                  </FormControl>
-                </TextField>
-                <span
-                  className="ds-c-datefield__separator"
-                >
-                  /
-                </span>
-                <TextField
-                  aria-describedby="field_2-label"
-                  aria-invalid={false}
-                  className="ds-l-col--auto"
-                  fieldClassName="ds-c-field--year"
-                  inputRef={[Function]}
-                  label="Year"
-                  labelClassName="ds-c-datefield__label"
-                  name="year"
-                  numeric={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  type="text"
-                  value={1942}
-                >
-                  <FormControl
-                    className="ds-u-clearfix ds-l-col--auto"
-                    component="div"
-                    inputRef={[Function]}
-                    label="Year"
-                    labelClassName="ds-c-datefield__label"
-                    labelComponent="label"
-                    render={[Function]}
-                  >
-                    <div
-                      className="ds-u-clearfix ds-l-col--auto"
-                    >
-                      <FormLabel
-                        className="ds-c-datefield__label"
-                        component="label"
-                        errorId="field_5-error"
-                        fieldId="field_5"
-                        id="field_5-label"
-                      >
-                        <label
-                          className="ds-c-label ds-c-datefield__label"
-                          htmlFor="field_5"
-                          id="field_5-label"
-                        >
-                          <span
-                            className=""
-                          >
-                            Year
-                          </span>
-                        </label>
-                      </FormLabel>
-                      <TextInput
-                        aria-describedby="field_2-label"
-                        aria-invalid={false}
-                        errorId="field_5-error"
-                        errorPlacement="top"
-                        fieldClassName="ds-c-field--year"
-                        id="field_5"
-                        name="year"
-                        numeric={true}
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        setRef={[Function]}
-                        type="text"
-                        value={1942}
-                      >
-                        <input
-                          aria-describedby="field_2-label"
-                          aria-invalid={false}
-                          className="ds-c-field ds-c-field--year"
-                          id="field_5"
-                          inputMode="numeric"
-                          name="year"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          pattern="[0-9]*"
-                          type="text"
-                          value={1942}
-                        />
-                      </TextInput>
-                    </div>
-                  </FormControl>
-                </TextField>
-              </div>
-            </DateInput>
-          </fieldset>
-        </FormControl>
-      </DateField>
-    </DateField>
-    <input
-      className="ds-u-visibility--hidden"
-      hidden={true}
-      type="submit"
-    />
-  </form>
-</MilestoneForm>
-`;
diff --git a/web/src/pages/apd/activities/oms/__snapshots__/Milestones.test.js.snap b/web/src/pages/apd/activities/oms/__snapshots__/Milestones.test.js.snap
index 71d457734c..b304d1466d 100644
--- a/web/src/pages/apd/activities/oms/__snapshots__/Milestones.test.js.snap
+++ b/web/src/pages/apd/activities/oms/__snapshots__/Milestones.test.js.snap
@@ -28,6 +28,7 @@ exports[`the Milestones component renders correctly 1`] = `
               "index": [Function],
               "item": [Function],
               "saveMilestone": [Function],
+              "setFormValid": [Function],
             },
             "render": [Function],
           },
diff --git a/web/src/static/schemas/milestones.js b/web/src/static/schemas/milestones.js
new file mode 100644
index 0000000000..abae8f0aca
--- /dev/null
+++ b/web/src/static/schemas/milestones.js
@@ -0,0 +1,21 @@
+const Joi = require('joi').extend(require('@joi/date'));
+
+const milestonesSchema = Joi.object({
+  key: Joi.any(),
+  milestone: Joi.string().required().messages({
+    'string.base': 'Milestone is required.',
+    'string.empty': 'Milestone is required.'
+  }),
+  endDate: Joi.date()
+    .format('YYYY-MM-DD')
+    .iso()
+    .required()
+    .messages({
+      'date.required': 'Provide a completion date.',
+      'date.base': 'Provide a completion date.',
+      'date.empty': 'Provide a completion date.',
+      'date.format': 'Provide a completion date.'
+    })
+});
+
+export default milestonesSchema;
\ No newline at end of file