diff --git a/app/src/components/dialog/EditDialog.test.tsx b/app/src/components/dialog/EditDialog.test.tsx
new file mode 100644
index 0000000000..453b2017ce
--- /dev/null
+++ b/app/src/components/dialog/EditDialog.test.tsx
@@ -0,0 +1,68 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import EditDialog from 'components/dialog/EditDialog';
+import { useFormikContext } from 'formik';
+import { TextField } from '@material-ui/core';
+import yup from 'utils/YupSchema';
+
+export interface ISampleFormikForm {
+  testField: string;
+}
+
+export const SampleFormikFormInitialValues: ISampleFormikForm = {
+  testField: ''
+};
+
+export const SampleFormikFormYupSchema = yup.object().shape({
+  testField: yup
+    .string()
+    .max(3000, 'Cannot exceed 3000 characters')
+    .required('You must provide a test field for the project')
+});
+
+const SampleFormikForm = () => {
+  const formikProps = useFormikContext<ISampleFormikForm>();
+
+  const { values, handleChange, handleSubmit } = formikProps;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <TextField
+        id="testField"
+        name="testField"
+        label="Test Field"
+        multiline
+        required={true}
+        rows={4}
+        fullWidth
+        variant="outlined"
+        value={values.testField}
+        onChange={handleChange}
+      />
+    </form>
+  );
+};
+
+describe('EditDialog', () => {
+  it('matches the snapshot with no error message', () => {
+    const { baseElement } = render(
+      <div id="root">
+        <EditDialog
+          dialogTitle="This is dialog title"
+          dialogText="This is dialog text"
+          open={true}
+          component={{
+            element: <SampleFormikForm />,
+            initialValues: SampleFormikFormInitialValues,
+            validationSchema: SampleFormikFormYupSchema
+          }}
+          onClose={() => jest.fn()}
+          onCancel={() => jest.fn()}
+          onSave={() => jest.fn()}
+        />
+      </div>
+    );
+
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/app/src/components/dialog/EditDialog.tsx b/app/src/components/dialog/EditDialog.tsx
new file mode 100644
index 0000000000..8f44725bb9
--- /dev/null
+++ b/app/src/components/dialog/EditDialog.tsx
@@ -0,0 +1,104 @@
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import React from 'react';
+import { Formik } from 'formik';
+
+export interface IEditDialogComponentProps {
+  element: any;
+  initialValues: any;
+  validationSchema: any;
+}
+
+export interface IEditDialogProps {
+  /**
+   * The dialog window title text.
+   *
+   * @type {string}
+   * @memberof IEditDialogProps
+   */
+  dialogTitle: string;
+  /**
+   * The dialog window body text.
+   *
+   * @type {string}
+   * @memberof IEditDialogProps
+   */
+  dialogText: string;
+  /**
+   * Set to `true` to open the dialog, `false` to close the dialog.
+   *
+   * @type {boolean}
+   * @memberof IEditDialogProps
+   */
+  open: boolean;
+
+  /**
+   * @type {IEditDialogComponentProps}
+   * @memberof IEditDialogProps
+   */
+  component: IEditDialogComponentProps;
+
+  /**
+   * Callback fired if the dialog is closed.
+   *
+   * @memberof IEditDialogProps
+   */
+  onClose: () => void;
+  /**
+   * Callback fired if the 'No' button is clicked.
+   *
+   * @memberof IEditDialogProps
+   */
+  onCancel: () => void;
+  /**
+   * Callback fired if the 'Yes' button is clicked.
+   *
+   * @memberof IEditDialogProps
+   */
+  onSave: (values: any) => void;
+}
+
+/**
+ * A dialog for displaying a component for editing purposes and giving the user the option to say
+ * `Yes`(Save) or `No`.
+ *
+ * @param {*} props
+ * @return {*}
+ */
+export const EditDialog: React.FC<IEditDialogProps> = (props) => {
+  return (
+    <Box>
+      <Formik
+        initialValues={props.component.initialValues}
+        validationSchema={props.component.validationSchema}
+        validateOnBlur={true}
+        validateOnChange={false}
+        onSubmit={(values) => {
+          props.onSave(values);
+        }}>
+        {(formikProps) => (
+          <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="edit-dialog-title"
+            aria-describedby="edit-dialog-description">
+            <DialogTitle id="edit-dialog-title">{props.dialogTitle}</DialogTitle>
+            <DialogContent>
+              {props?.component?.element}
+              <DialogContentText id="edit-dialog-description">{props.dialogText}</DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={props.onCancel} color="primary">
+                No
+              </Button>
+              <Button onClick={formikProps.submitForm} color="primary" autoFocus>
+                Yes
+              </Button>
+            </DialogActions>
+          </Dialog>
+        )}
+      </Formik>
+    </Box>
+  );
+};
+
+export default EditDialog;
diff --git a/app/src/components/dialog/__snapshots__/EditDialog.test.tsx.snap b/app/src/components/dialog/__snapshots__/EditDialog.test.tsx.snap
new file mode 100644
index 0000000000..ce018d9c1b
--- /dev/null
+++ b/app/src/components/dialog/__snapshots__/EditDialog.test.tsx.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditDialog matches the snapshot with no error message 1`] = `
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  >
+    <div
+      id="root"
+    >
+      <div
+        class="MuiBox-root MuiBox-root-1"
+      />
+    </div>
+  </div>
+  <div
+    class="MuiDialog-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div
+        aria-describedby="edit-dialog-description"
+        aria-labelledby="edit-dialog-title"
+        class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
+      >
+        <div
+          class="MuiDialogTitle-root"
+          id="edit-dialog-title"
+        >
+          <h2
+            class="MuiTypography-root MuiTypography-h6"
+          >
+            This is dialog title
+          </h2>
+        </div>
+        <div
+          class="MuiDialogContent-root"
+        >
+          <form>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                data-shrink="false"
+                for="testField"
+                id="testField-label"
+              >
+                Test Field
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
+              >
+                <textarea
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
+                  id="testField"
+                  name="testField"
+                  required=""
+                  rows="4"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-4"
+                  >
+                    <span>
+                      Test Field
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+          </form>
+          <p
+            class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiTypography-colorTextSecondary"
+            id="edit-dialog-description"
+          >
+            This is dialog text
+          </p>
+        </div>
+        <div
+          class="MuiDialogActions-root MuiDialogActions-spacing"
+        >
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              No
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary Mui-focusVisible Mui-focusVisible"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Yes
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            >
+              <span
+                class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
+                style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
+              >
+                <span
+                  class="MuiTouchRipple-child MuiTouchRipple-childPulsate"
+                />
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/app/src/constants/i18n.ts b/app/src/constants/i18n.ts
index 879c1bb329..7a8bc6d703 100644
--- a/app/src/constants/i18n.ts
+++ b/app/src/constants/i18n.ts
@@ -13,3 +13,11 @@ export const UploadProjectArtifactsI18N = {
   uploadErrorText:
     'An error has occurred while attempting to upload project artifacts, please try again. If the error persists, please contact your system administrator.'
 };
+
+export const EditObjectivesI18N = {
+  editTitle: 'Edit Project Objectives',
+  editText: 'Are you sure you want to save?',
+  createErrorTitle: 'Error Editing Project Objectives',
+  createErrorText:
+    'An error has occurred while attempting to edit your project objectives, please try again. If the error persists, please contact your system administrator.'
+};
diff --git a/app/src/features/projects/view/ProjectDetails.test.tsx b/app/src/features/projects/view/ProjectDetails.test.tsx
index 91b7481538..8af59f2cf8 100644
--- a/app/src/features/projects/view/ProjectDetails.test.tsx
+++ b/app/src/features/projects/view/ProjectDetails.test.tsx
@@ -1,8 +1,12 @@
 import { render } from '@testing-library/react';
-import { codes } from 'test-helpers/code-helpers';
+import { createMemoryHistory } from 'history';
 import React from 'react';
-import ProjectDetails from './ProjectDetails';
+import { Router } from 'react-router';
+import { codes } from 'test-helpers/code-helpers';
 import { getProjectForViewResponse } from 'test-helpers/project-helpers';
+import ProjectDetails from './ProjectDetails';
+
+const history = createMemoryHistory();
 
 describe('ProjectDetails', () => {
   it('renders correctly', () => {
@@ -18,7 +22,11 @@ describe('ProjectDetails', () => {
       }
     });
 
-    const { asFragment } = render(<ProjectDetails projectForViewData={getProjectForViewResponse} codes={codes} />);
+    const { asFragment } = render(
+      <Router history={history}>
+        <ProjectDetails projectForViewData={getProjectForViewResponse} codes={codes} />
+      </Router>
+    );
 
     expect(asFragment()).toMatchSnapshot();
   });
diff --git a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
index 8e5471ff63..d247e98c6c 100644
--- a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
+++ b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
@@ -19,6 +19,9 @@ exports[`ProjectDetails renders correctly 1`] = `
     >
       <div
         class="MuiBox-root MuiBox-root-3"
+      />
+      <div
+        class="MuiBox-root MuiBox-root-4"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -77,10 +80,10 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
             >
               <div
-                class="MuiBox-root MuiBox-root-4"
+                class="MuiBox-root MuiBox-root-5"
               >
                 <div
-                  class="MuiBox-root MuiBox-root-5"
+                  class="MuiBox-root MuiBox-root-6"
                 >
                   <p
                     class="MuiTypography-root MuiTypography-body1"
@@ -112,10 +115,10 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
             >
               <div
-                class="MuiBox-root MuiBox-root-6"
+                class="MuiBox-root MuiBox-root-7"
               >
                 <div
-                  class="MuiBox-root MuiBox-root-7"
+                  class="MuiBox-root MuiBox-root-8"
                 >
                   <p
                     class="MuiTypography-root MuiTypography-body1"
@@ -132,13 +135,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-8"
+    class="MuiBox-root MuiBox-root-9"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-9"
+        class="MuiBox-root MuiBox-root-10"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -197,7 +200,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-10"
+                class="MuiBox-root MuiBox-root-11"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -206,7 +209,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-11"
+                class="MuiBox-root MuiBox-root-12"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -219,7 +222,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-12"
+                class="MuiBox-root MuiBox-root-13"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -228,7 +231,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-13"
+                class="MuiBox-root MuiBox-root-14"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -241,7 +244,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-14"
+                class="MuiBox-root MuiBox-root-15"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -250,7 +253,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-15"
+                class="MuiBox-root MuiBox-root-16"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -263,7 +266,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-16"
+                class="MuiBox-root MuiBox-root-17"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -272,7 +275,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-17"
+                class="MuiBox-root MuiBox-root-18"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -285,7 +288,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-18"
+                class="MuiBox-root MuiBox-root-19"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -294,7 +297,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-19"
+                class="MuiBox-root MuiBox-root-20"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -309,13 +312,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-20"
+    class="MuiBox-root MuiBox-root-21"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-21"
+        class="MuiBox-root MuiBox-root-22"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -374,7 +377,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-22"
+                class="MuiBox-root MuiBox-root-23"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -383,7 +386,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-23"
+                class="MuiBox-root MuiBox-root-24"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -396,7 +399,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-24"
+                class="MuiBox-root MuiBox-root-25"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -405,7 +408,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-25"
+                class="MuiBox-root MuiBox-root-26"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -418,7 +421,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
             >
               <div
-                class="MuiBox-root MuiBox-root-26"
+                class="MuiBox-root MuiBox-root-27"
               >
                 <div
                   class="leaflet-container leaflet-grab leaflet-touch-drag"
@@ -593,7 +596,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                     </div>
                   </div>
                   <div
-                    class="MuiBox-root MuiBox-root-66"
+                    class="MuiBox-root MuiBox-root-67"
                   />
                 </div>
               </div>
@@ -604,13 +607,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-27"
+    class="MuiBox-root MuiBox-root-28"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-28"
+        class="MuiBox-root MuiBox-root-29"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -682,7 +685,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                       class="MuiTableRow-root MuiTableRow-head"
                     >
                       <th
-                        class="MuiTableCell-root MuiTableCell-head makeStyles-tableHeading-30"
+                        class="MuiTableCell-root MuiTableCell-head makeStyles-tableHeading-31"
                         scope="col"
                       >
                         Focal Species
@@ -705,7 +708,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                       class="MuiTableRow-root"
                     >
                       <td
-                        class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-29"
+                        class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-30"
                       >
                         species 2
                       </td>
@@ -731,7 +734,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                       class="MuiTableRow-root MuiTableRow-head"
                     >
                       <th
-                        class="MuiTableCell-root MuiTableCell-head makeStyles-tableHeading-30"
+                        class="MuiTableCell-root MuiTableCell-head makeStyles-tableHeading-31"
                         scope="col"
                       >
                         Ancillary Species
@@ -754,7 +757,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                       class="MuiTableRow-root"
                     >
                       <td
-                        class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-29"
+                        class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-30"
                       >
                         species 4
                       </td>
@@ -769,13 +772,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-31"
+    class="MuiBox-root MuiBox-root-32"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-32"
+        class="MuiBox-root MuiBox-root-33"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -834,7 +837,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-33"
+                class="MuiBox-root MuiBox-root-34"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -843,7 +846,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-34"
+                class="MuiBox-root MuiBox-root-35"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -857,7 +860,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-35"
+                class="MuiBox-root MuiBox-root-36"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -866,7 +869,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-36"
+                class="MuiBox-root MuiBox-root-37"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -880,7 +883,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-37"
+                class="MuiBox-root MuiBox-root-38"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -889,7 +892,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-38"
+                class="MuiBox-root MuiBox-root-39"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -905,13 +908,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-39"
+    class="MuiBox-root MuiBox-root-40"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-40"
+        class="MuiBox-root MuiBox-root-41"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -933,7 +936,7 @@ exports[`ProjectDetails renders correctly 1`] = `
             >
               <label
                 aria-disabled="false"
-                class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-heading-44 MuiButton-outlinedPrimary"
+                class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-heading-45 MuiButton-outlinedPrimary"
                 role="button"
                 tabindex="0"
               >
@@ -956,7 +959,7 @@ exports[`ProjectDetails renders correctly 1`] = `
             >
               <table
                 aria-label="iucn-classification-table"
-                class="MuiTable-root makeStyles-table-41"
+                class="MuiTable-root makeStyles-table-42"
               >
                 <thead
                   class="MuiTableHead-root"
@@ -965,19 +968,19 @@ exports[`ProjectDetails renders correctly 1`] = `
                     class="MuiTableRow-root MuiTableRow-head"
                   >
                     <th
-                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-44"
+                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-45"
                       scope="col"
                     >
                       Classification
                     </th>
                     <th
-                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-44"
+                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-45"
                       scope="col"
                     >
                       Sub-classification
                     </th>
                     <th
-                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-44"
+                      class="MuiTableCell-root MuiTableCell-head makeStyles-heading-45"
                       scope="col"
                     >
                       Sub-classification
@@ -991,22 +994,22 @@ exports[`ProjectDetails renders correctly 1`] = `
                     class="MuiTableRow-root"
                   >
                     <td
-                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-43"
+                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-44"
                     >
                       classification
                     </td>
                     <td
-                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-43"
+                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-44"
                     >
                       sub classification 1
                     </td>
                     <td
-                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-43"
+                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-44"
                     >
                       sub classification 2
                     </td>
                     <td
-                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-43"
+                      class="MuiTableCell-root MuiTableCell-body makeStyles-tableCellBorderBottom-44"
                     >
                       <button
                         aria-label="delete"
@@ -1043,13 +1046,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-46"
+    class="MuiBox-root MuiBox-root-47"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-47"
+        class="MuiBox-root MuiBox-root-48"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -1071,7 +1074,7 @@ exports[`ProjectDetails renders correctly 1`] = `
             >
               <label
                 aria-disabled="false"
-                class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-heading-48 MuiButton-outlinedPrimary"
+                class="MuiButtonBase-root MuiButton-root MuiButton-outlined makeStyles-heading-49 MuiButton-outlinedPrimary"
                 role="button"
                 tabindex="0"
               >
@@ -1090,7 +1093,7 @@ exports[`ProjectDetails renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-item"
           >
             <hr
-              class="MuiDivider-root makeStyles-topBorder-50"
+              class="MuiDivider-root makeStyles-topBorder-51"
             />
           </div>
           <div
@@ -1100,10 +1103,10 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-51"
+                class="MuiBox-root MuiBox-root-52"
               >
                 <p
-                  class="MuiTypography-root makeStyles-heading-48 MuiTypography-body1"
+                  class="MuiTypography-root makeStyles-heading-49 MuiTypography-body1"
                 >
                   agency name
                 </p>
@@ -1151,7 +1154,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-52"
+                class="MuiBox-root MuiBox-root-53"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1160,7 +1163,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-53"
+                class="MuiBox-root MuiBox-root-54"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -1174,7 +1177,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-54"
+                class="MuiBox-root MuiBox-root-55"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1183,7 +1186,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-55"
+                class="MuiBox-root MuiBox-root-56"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -1197,7 +1200,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-56"
+                class="MuiBox-root MuiBox-root-57"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1206,7 +1209,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-57"
+                class="MuiBox-root MuiBox-root-58"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -1220,7 +1223,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-58"
+                class="MuiBox-root MuiBox-root-59"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1229,7 +1232,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-59"
+                class="MuiBox-root MuiBox-root-60"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -1245,13 +1248,13 @@ exports[`ProjectDetails renders correctly 1`] = `
     </div>
   </div>
   <div
-    class="MuiBox-root MuiBox-root-60"
+    class="MuiBox-root MuiBox-root-61"
   >
     <div
       class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
     >
       <div
-        class="MuiBox-root MuiBox-root-61"
+        class="MuiBox-root MuiBox-root-62"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -1310,7 +1313,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-62"
+                class="MuiBox-root MuiBox-root-63"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1319,7 +1322,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-63"
+                class="MuiBox-root MuiBox-root-64"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
@@ -1332,7 +1335,7 @@ exports[`ProjectDetails renders correctly 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4"
             >
               <div
-                class="MuiBox-root MuiBox-root-64"
+                class="MuiBox-root MuiBox-root-65"
               >
                 <span
                   class="MuiTypography-root MuiTypography-caption"
@@ -1341,7 +1344,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root MuiBox-root-65"
+                class="MuiBox-root MuiBox-root-66"
               >
                 <h6
                   class="MuiTypography-root MuiTypography-subtitle1"
diff --git a/app/src/features/projects/view/components/ProjectObjectives.test.tsx b/app/src/features/projects/view/components/ProjectObjectives.test.tsx
index 3caf947518..76003576cf 100644
--- a/app/src/features/projects/view/components/ProjectObjectives.test.tsx
+++ b/app/src/features/projects/view/components/ProjectObjectives.test.tsx
@@ -2,6 +2,10 @@ import { render, fireEvent, getAllByText } from '@testing-library/react';
 import { getProjectForViewResponse } from 'test-helpers/project-helpers';
 import React from 'react';
 import ProjectObjectives from './ProjectObjectives';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+
+const history = createMemoryHistory();
 
 describe('ProjectObjectives', () => {
   const longData =
@@ -18,19 +22,25 @@ describe('ProjectObjectives', () => {
     'sit amet adipiscing sem neque sed ipsum. N\n\n';
 
   it('renders correctly when objectives length is <= 850 characters', () => {
-    const { asFragment } = render(<ProjectObjectives projectForViewData={getProjectForViewResponse} />);
+    const { asFragment } = render(
+      <Router history={history}>
+        <ProjectObjectives projectForViewData={getProjectForViewResponse} />
+      </Router>
+    );
 
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders correctly when objectives length is > 850 characters and caveats is empty', () => {
     const { asFragment } = render(
-      <ProjectObjectives
-        projectForViewData={{
-          ...getProjectForViewResponse,
-          objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: '' }
-        }}
-      />
+      <Router history={history}>
+        <ProjectObjectives
+          projectForViewData={{
+            ...getProjectForViewResponse,
+            objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: '' }
+          }}
+        />
+      </Router>
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -38,12 +48,14 @@ describe('ProjectObjectives', () => {
 
   it('renders correctly when both objectives and caveats have length is > 850 characters', () => {
     const { asFragment } = render(
-      <ProjectObjectives
-        projectForViewData={{
-          ...getProjectForViewResponse,
-          objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: longData }
-        }}
-      />
+      <Router history={history}>
+        <ProjectObjectives
+          projectForViewData={{
+            ...getProjectForViewResponse,
+            objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: longData }
+          }}
+        />
+      </Router>
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -54,16 +66,18 @@ describe('ProjectObjectives', () => {
     const multilineCaveats = 'Paragraph1\nParagraph2\n\nParagraph3';
 
     const { asFragment } = render(
-      <ProjectObjectives
-        projectForViewData={{
-          ...getProjectForViewResponse,
-          objectives: {
-            ...getProjectForViewResponse.objectives,
-            objectives: multilineObjectives,
-            caveats: multilineCaveats
-          }
-        }}
-      />
+      <Router history={history}>
+        <ProjectObjectives
+          projectForViewData={{
+            ...getProjectForViewResponse,
+            objectives: {
+              ...getProjectForViewResponse.objectives,
+              objectives: multilineObjectives,
+              caveats: multilineCaveats
+            }
+          }}
+        />
+      </Router>
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -71,16 +85,18 @@ describe('ProjectObjectives', () => {
 
   it('renders correctly when objectives and caveats are long and in multiple paragraphs', () => {
     const { asFragment } = render(
-      <ProjectObjectives
-        projectForViewData={{
-          ...getProjectForViewResponse,
-          objectives: {
-            ...getProjectForViewResponse.objectives,
-            objectives: longData,
-            caveats: longData
-          }
-        }}
-      />
+      <Router history={history}>
+        <ProjectObjectives
+          projectForViewData={{
+            ...getProjectForViewResponse,
+            objectives: {
+              ...getProjectForViewResponse.objectives,
+              objectives: longData,
+              caveats: longData
+            }
+          }}
+        />
+      </Router>
     );
 
     expect(asFragment()).toMatchSnapshot();
@@ -88,12 +104,14 @@ describe('ProjectObjectives', () => {
 
   it('functions as expected with the read more and read less buttons', () => {
     const { container } = render(
-      <ProjectObjectives
-        projectForViewData={{
-          ...getProjectForViewResponse,
-          objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: longData }
-        }}
-      />
+      <Router history={history}>
+        <ProjectObjectives
+          projectForViewData={{
+            ...getProjectForViewResponse,
+            objectives: { ...getProjectForViewResponse.objectives, objectives: longData, caveats: longData }
+          }}
+        />
+      </Router>
     );
 
     // for finding 'project objectives'
diff --git a/app/src/features/projects/view/components/ProjectObjectives.tsx b/app/src/features/projects/view/components/ProjectObjectives.tsx
index ec71842ddb..09b6f9744e 100644
--- a/app/src/features/projects/view/components/ProjectObjectives.tsx
+++ b/app/src/features/projects/view/components/ProjectObjectives.tsx
@@ -1,8 +1,15 @@
 import { Box, Grid, IconButton, Typography } from '@material-ui/core';
 import { Edit } from '@material-ui/icons';
+import EditDialog from 'components/dialog/EditDialog';
 import ReadMoreField from 'components/fields/ReadMoreField';
+import { EditObjectivesI18N } from 'constants/i18n';
+import ProjectObjectivesForm, {
+  IProjectObjectivesForm,
+  ProjectObjectivesFormYupSchema
+} from 'features/projects/components/ProjectObjectivesForm';
 import { IGetProjectForViewResponse } from 'interfaces/useProjectApi.interface';
-import React from 'react';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 
 export interface IProjectObjectivesProps {
   projectForViewData: IGetProjectForViewResponse;
@@ -15,11 +22,47 @@ export interface IProjectObjectivesProps {
  */
 const ProjectObjectives: React.FC<IProjectObjectivesProps> = (props) => {
   const {
-    projectForViewData: { objectives }
+    projectForViewData: { objectives, projectId }
   } = props;
 
+  const history = useHistory();
+
+  const openModalEdit = () => {
+    setOpenEditDialog(true);
+  };
+
+  const handleEditDialogClose = () => {
+    setOpenEditDialog(false);
+  };
+
+  const handleDialogNo = () => {
+    setOpenEditDialog(false);
+  };
+
+  const handleDialogEdit = (values: IProjectObjectivesForm) => {
+    //make put request from here
+    setOpenEditDialog(false);
+    alert(JSON.stringify({ values: values, id: projectId }));
+    history.push(`/projects/${projectId}/details`);
+  };
+
+  const [openEditDialog, setOpenEditDialog] = useState(false);
+
   return (
     <>
+      <EditDialog
+        dialogTitle={EditObjectivesI18N.editTitle}
+        dialogText={EditObjectivesI18N.editText}
+        open={openEditDialog}
+        component={{
+          element: <ProjectObjectivesForm />,
+          initialValues: objectives,
+          validationSchema: ProjectObjectivesFormYupSchema
+        }}
+        onClose={handleEditDialogClose}
+        onCancel={handleDialogNo}
+        onSave={handleDialogEdit}
+      />
       <Box m={3}>
         <Grid container spacing={3}>
           <Grid container item xs={12} spacing={3} justify="space-between" alignItems="center">
@@ -27,7 +70,10 @@ const ProjectObjectives: React.FC<IProjectObjectivesProps> = (props) => {
               <Typography variant="h3">Project Objectives</Typography>
             </Grid>
             <Grid item>
-              <IconButton title="Edit Objectives Information" aria-label="Edit Objectives Information">
+              <IconButton
+                onClick={openModalEdit}
+                title="Edit Objectives Information"
+                aria-label="Edit Objectives Information">
                 <Typography variant="caption">
                   <Edit fontSize="inherit" /> EDIT
                 </Typography>
diff --git a/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap b/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap
index 8cbccc39f6..b48514c5fd 100644
--- a/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap
+++ b/app/src/features/projects/view/components/__snapshots__/ProjectObjectives.test.tsx.snap
@@ -3,7 +3,10 @@
 exports[`ProjectObjectives renders correctly when both objectives and caveats have length is > 850 characters 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-11"
+    class="MuiBox-root MuiBox-root-13"
+  />
+  <div
+    class="MuiBox-root MuiBox-root-14"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -62,10 +65,10 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats ha
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-12"
+            class="MuiBox-root MuiBox-root-15"
           >
             <div
-              class="MuiBox-root MuiBox-root-13"
+              class="MuiBox-root MuiBox-root-16"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -162,10 +165,10 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats ha
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-14"
+            class="MuiBox-root MuiBox-root-17"
           >
             <div
-              class="MuiBox-root MuiBox-root-15"
+              class="MuiBox-root MuiBox-root-18"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -250,7 +253,10 @@ exports[`ProjectObjectives renders correctly when both objectives and caveats ha
 exports[`ProjectObjectives renders correctly when objectives and caveats are < 850 characters and in multiple paragraphs 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-16"
+    class="MuiBox-root MuiBox-root-19"
+  />
+  <div
+    class="MuiBox-root MuiBox-root-20"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -309,10 +315,10 @@ exports[`ProjectObjectives renders correctly when objectives and caveats are < 8
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-17"
+            class="MuiBox-root MuiBox-root-21"
           >
             <div
-              class="MuiBox-root MuiBox-root-18"
+              class="MuiBox-root MuiBox-root-22"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -357,10 +363,10 @@ exports[`ProjectObjectives renders correctly when objectives and caveats are < 8
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-19"
+            class="MuiBox-root MuiBox-root-23"
           >
             <div
-              class="MuiBox-root MuiBox-root-20"
+              class="MuiBox-root MuiBox-root-24"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -393,7 +399,10 @@ exports[`ProjectObjectives renders correctly when objectives and caveats are < 8
 exports[`ProjectObjectives renders correctly when objectives and caveats are long and in multiple paragraphs 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-21"
+    class="MuiBox-root MuiBox-root-25"
+  />
+  <div
+    class="MuiBox-root MuiBox-root-26"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -452,10 +461,10 @@ exports[`ProjectObjectives renders correctly when objectives and caveats are lon
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-22"
+            class="MuiBox-root MuiBox-root-27"
           >
             <div
-              class="MuiBox-root MuiBox-root-23"
+              class="MuiBox-root MuiBox-root-28"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -552,10 +561,10 @@ exports[`ProjectObjectives renders correctly when objectives and caveats are lon
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-24"
+            class="MuiBox-root MuiBox-root-29"
           >
             <div
-              class="MuiBox-root MuiBox-root-25"
+              class="MuiBox-root MuiBox-root-30"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -641,6 +650,9 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch
 <DocumentFragment>
   <div
     class="MuiBox-root MuiBox-root-1"
+  />
+  <div
+    class="MuiBox-root MuiBox-root-2"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -699,10 +711,10 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-2"
+            class="MuiBox-root MuiBox-root-3"
           >
             <div
-              class="MuiBox-root MuiBox-root-3"
+              class="MuiBox-root MuiBox-root-4"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -734,10 +746,10 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-4"
+            class="MuiBox-root MuiBox-root-5"
           >
             <div
-              class="MuiBox-root MuiBox-root-5"
+              class="MuiBox-root MuiBox-root-6"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -757,7 +769,10 @@ exports[`ProjectObjectives renders correctly when objectives length is <= 850 ch
 exports[`ProjectObjectives renders correctly when objectives length is > 850 characters and caveats is empty 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-6"
+    class="MuiBox-root MuiBox-root-7"
+  />
+  <div
+    class="MuiBox-root MuiBox-root-8"
   >
     <div
       class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3"
@@ -816,10 +831,10 @@ exports[`ProjectObjectives renders correctly when objectives length is > 850 cha
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-7"
+            class="MuiBox-root MuiBox-root-9"
           >
             <div
-              class="MuiBox-root MuiBox-root-8"
+              class="MuiBox-root MuiBox-root-10"
             >
               <p
                 class="MuiTypography-root MuiTypography-body1"
@@ -916,10 +931,10 @@ exports[`ProjectObjectives renders correctly when objectives length is > 850 cha
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
         >
           <div
-            class="MuiBox-root MuiBox-root-9"
+            class="MuiBox-root MuiBox-root-11"
           >
             <div
-              class="MuiBox-root MuiBox-root-10"
+              class="MuiBox-root MuiBox-root-12"
             >
               <p />
             </div>