diff --git a/api/src/paths/project/{projectId}/update.ts b/api/src/paths/project/{projectId}/update.ts
index 9c45bb8900..279a5f0388 100644
--- a/api/src/paths/project/{projectId}/update.ts
+++ b/api/src/paths/project/{projectId}/update.ts
@@ -247,7 +247,8 @@ GET.apiDoc = {
                           description: 'ISO 8601 date string for the funding end_date'
                         },
                         agency_project_id: {
-                          type: 'string'
+                          type: 'string',
+                          nullable: true
                         },
                         revision_count: {
                           type: 'number'
diff --git a/app/src/components/fields/ReadMoreField.tsx b/app/src/components/fields/ReadMoreField.tsx
index 12642ec04d..a36f35e66a 100644
--- a/app/src/components/fields/ReadMoreField.tsx
+++ b/app/src/components/fields/ReadMoreField.tsx
@@ -1,12 +1,14 @@
+import { Typography, TypographyProps } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import Icon from '@mdi/react';
 import React, { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 export interface IReadMoreFieldProps {
   text: string;
   maxCharLength: number;
+  TypographyProps?: Partial<TypographyProps>;
 }
 
 /**
@@ -15,78 +17,51 @@ export interface IReadMoreFieldProps {
  * @return {*}
  */
 export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
-  const { text, maxCharLength } = props;
+  const { text, maxCharLength, TypographyProps } = props;
+  const [showTruncated, setShowTruncated] = useState(false);
 
-  /*
-    Determines whether or not the given body of text will be truncated based on
-    the max character length.
-  */
-  const willTruncateText = (content: string): boolean => {
-    return content?.trim().length > maxCharLength || false;
-  };
+  if (!text || maxCharLength <= 0) {
+    return <></>;
+  }
 
-  const [isTruncatedText, setIsTruncatedText] = useState(willTruncateText(text));
+  const sanitizedText = String(text).trim();
+  const willTruncateText = sanitizedText.length > maxCharLength;
 
-  const renderParagraph = (paragraph: string) => {
-    if (paragraph) {
-      return (
-        <Typography color="textSecondary" key={uuidv4()}>
-          {paragraph}
-        </Typography>
-      );
-    }
-    return <p key={uuidv4()}></p>;
-  };
+  if (!willTruncateText) {
+    return <span>{sanitizedText}</span>;
+  }
 
-  /*
-    Function that finds a nice index (at a period ending a sentence)
-    to truncate objectives longer than maxCharLength characters
-  */
-  const determineTruncatingLength = () => {
-    const periodIndices = [];
+  let truncationIndex = sanitizedText.slice(0, maxCharLength).lastIndexOf(' ');
+  if (truncationIndex < 0) {
+    truncationIndex = maxCharLength;
+  }
 
-    for (let i = 0; i < text.length; i++) {
-      if (text[i - 1] === '.' && text[i] === ' ') {
-        periodIndices.push(i);
-      }
-    }
-
-    return periodIndices.reduce((prev, curr) => {
-      return Math.abs(curr - maxCharLength) < Math.abs(prev - maxCharLength) ? curr : prev;
-    });
-  };
+  const persistentTextPortion = sanitizedText.slice(0, truncationIndex);
 
   return (
     <Box>
-      {isTruncatedText && (
-        <>
-          {text
-            .slice(0, determineTruncatingLength())
-            .split('\n')
-            .map((paragraph: string) => {
-              return renderParagraph(paragraph);
-            })}
-          <Box mt={0.5} mb={-0.75} ml="-5px">
-            <Button size="small" variant="text" onClick={() => setIsTruncatedText(false)} style={{ color: '#757575' }}>
-              READ MORE...
-            </Button>
-          </Box>
-        </>
-      )}
-      {!isTruncatedText && (
-        <>
-          {text?.split('\n').map((paragraph: string) => {
-            return renderParagraph(paragraph);
-          })}
-          {willTruncateText(text) && (
-            <Box mt={0.5} mb={-0.75} ml="-5px">
-              <Button size="small" variant="text" onClick={() => setIsTruncatedText(true)} style={{ color: '#757575' }}>
-                READ LESS
-              </Button>
-            </Box>
-          )}
-        </>
-      )}
+      <Typography {...TypographyProps}>
+        {showTruncated ? (
+          <span>{sanitizedText}</span>
+        ) : (
+          <>
+            <span>{persistentTextPortion}</span>
+            <span>&hellip;</span>
+          </>
+        )}
+      </Typography>
+      <Box mt={0.5} mb={-0.75} ml="-5px">
+        <Button
+          size="small"
+          variant="text"
+          onClick={() => setShowTruncated(!showTruncated)}
+          style={{ color: '#757575', fontWeight: 600, textTransform: 'uppercase' }}>
+          <>
+            <Icon path={showTruncated ? mdiChevronUp : mdiChevronDown} size={1} />
+            <span>{showTruncated ? 'Read Less' : 'Read More'}</span>
+          </>
+        </Button>
+      </Box>
     </Box>
   );
 };
diff --git a/app/src/features/projects/edit/EditProjectPage.tsx b/app/src/features/projects/edit/EditProjectPage.tsx
index bccedf67d3..6979d6d587 100644
--- a/app/src/features/projects/edit/EditProjectPage.tsx
+++ b/app/src/features/projects/edit/EditProjectPage.tsx
@@ -197,14 +197,7 @@ const EditProjectPage: React.FC = (props) => {
               </Typography>
             </Box>
             <Box flex="0 0 auto" className={classes.pageTitleActions}>
-              <Button
-                color="primary"
-                variant="contained"
-                onClick={() => {
-                  if (formikRef && formikRef.current && formikRef.current.values) {
-                    updateProject(formikRef.current?.values);
-                  }
-                }}>
+              <Button color="primary" variant="contained" onClick={() => formikRef.current?.submitForm()}>
                 Save Project
               </Button>
               <Button color="primary" variant="outlined" onClick={handleCancel}>
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 51b11414f5..c4d6a61f37 100644
--- a/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
+++ b/app/src/features/projects/view/__snapshots__/ProjectDetails.test.tsx.snap
@@ -31,18 +31,12 @@ exports[`ProjectDetails renders correctly 1`] = `
         <hr
           class="MuiDivider-root"
         />
-        <div
-          class="MuiBox-root MuiBox-root-8"
-        >
-          <p
-            class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-          >
-            Et ad et in culpa si
-          </p>
-        </div>
+        <span>
+          Et ad et in culpa si
+        </span>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-9"
+        class="MuiBox-root MuiBox-root-8"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -53,7 +47,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <dl
-          class="MuiBox-root MuiBox-root-10"
+          class="MuiBox-root MuiBox-root-9"
         >
           <div
             class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -104,7 +98,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </dl>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-11"
+        class="MuiBox-root MuiBox-root-10"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -115,7 +109,7 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-12"
+          class="MuiBox-root MuiBox-root-11"
         >
           <div
             class="MuiTypography-root MuiTypography-body1"
@@ -140,7 +134,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-13"
+        class="MuiBox-root MuiBox-root-12"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -157,10 +151,10 @@ exports[`ProjectDetails renders correctly 1`] = `
             class="MuiListItem-root MuiListItem-divider"
           >
             <div
-              class="MuiBox-root MuiBox-root-15"
+              class="MuiBox-root MuiBox-root-14"
             >
               <div
-                class="MuiBox-root MuiBox-root-16"
+                class="MuiBox-root MuiBox-root-15"
               >
                 <span
                   class="MuiTypography-root MuiTypography-body1"
@@ -174,7 +168,7 @@ exports[`ProjectDetails renders correctly 1`] = `
                 </span>
               </div>
               <dl
-                class="MuiBox-root MuiBox-root-17 makeStyles-fundingSourceMeta-14"
+                class="MuiBox-root MuiBox-root-16 makeStyles-fundingSourceMeta-13"
               >
                 <div
                   class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-1"
@@ -228,7 +222,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </ul>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-18"
+        class="MuiBox-root MuiBox-root-17"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
@@ -239,13 +233,13 @@ exports[`ProjectDetails renders correctly 1`] = `
           class="MuiDivider-root"
         />
         <div
-          class="MuiBox-root MuiBox-root-19"
+          class="MuiBox-root MuiBox-root-18"
         >
           <dl
-            class="MuiBox-root MuiBox-root-21"
+            class="MuiBox-root MuiBox-root-20"
           >
             <div
-              class="MuiBox-root MuiBox-root-22"
+              class="MuiBox-root MuiBox-root-21"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
@@ -253,16 +247,16 @@ exports[`ProjectDetails renders correctly 1`] = `
                 Indigenous
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 First nations code
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               />
             </div>
             <div
-              class="MuiBox-root MuiBox-root-23"
+              class="MuiBox-root MuiBox-root-22"
             >
               <dt
                 class="MuiTypography-root MuiTypography-subtitle2 MuiTypography-colorTextSecondary"
@@ -270,12 +264,12 @@ exports[`ProjectDetails renders correctly 1`] = `
                 Other Partnerships
               </dt>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 3
               </dd>
               <dd
-                class="MuiTypography-root makeStyles-projectPartners-20 MuiTypography-body1"
+                class="MuiTypography-root makeStyles-projectPartners-19 MuiTypography-body1"
               >
                 partner 4
               </dd>
@@ -284,7 +278,7 @@ exports[`ProjectDetails renders correctly 1`] = `
         </div>
       </section>
       <section
-        class="MuiBox-root MuiBox-root-24"
+        class="MuiBox-root MuiBox-root-23"
       >
         <h4
           class="MuiTypography-root makeStyles-projectMetaSectionHeader-3 MuiTypography-body1"
diff --git a/app/src/features/projects/view/components/ProjectObjectives.test.tsx b/app/src/features/projects/view/components/ProjectObjectives.test.tsx
index 369f066857..33d86e6c4e 100644
--- a/app/src/features/projects/view/components/ProjectObjectives.test.tsx
+++ b/app/src/features/projects/view/components/ProjectObjectives.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, getAllByText, render } from '@testing-library/react';
+import { cleanup, fireEvent, getAllByText, queryByText, render } from '@testing-library/react';
 import { DialogContextProvider } from 'contexts/dialogContext';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import React from 'react';
@@ -108,7 +108,7 @@ describe('ProjectObjectives', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('functions as expected with the read more and READ LESS buttons', () => {
+  it('toggles as expected with the Read More and Read Less buttons', () => {
     const { container } = render(
       <ProjectObjectives
         projectForViewData={{
@@ -120,20 +120,77 @@ describe('ProjectObjectives', () => {
       />
     );
 
-    // for finding 'project objectives'
     //@ts-ignore
-    expect(getAllByText(container, 'READ MORE...')[0]).toBeInTheDocument();
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
+    //@ts-ignore
+    fireEvent.click(getAllByText(container, 'Read More')[0]);
+    //@ts-ignore
+    expect(getAllByText(container, 'Read Less')[0]).toBeInTheDocument();
+    //@ts-ignore
+    fireEvent.click(getAllByText(container, 'Read Less')[0]);
+    //@ts-ignore
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
+  });
+
+  it('toggles as expected if the text contains no spaces', () => {
+    const { container } = render(
+      <ProjectObjectives
+        projectForViewData={{
+          ...getProjectForViewResponse,
+          objectives: { ...getProjectForViewResponse.objectives, objectives: 'a'.repeat(400) }
+        }}
+        codes={codes}
+        refresh={mockRefresh}
+      />
+    );
 
     //@ts-ignore
-    fireEvent.click(getAllByText(container, 'READ MORE...')[0]);
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
+    //@ts-ignore
+    fireEvent.click(getAllByText(container, 'Read More')[0]);
+    //@ts-ignore
+    expect(getAllByText(container, 'Read Less')[0]).toBeInTheDocument();
+    //@ts-ignore
+    fireEvent.click(getAllByText(container, 'Read Less')[0]);
+    //@ts-ignore
+    expect(getAllByText(container, 'Read More')[0]).toBeInTheDocument();
+  });
+
+  it('does not show the Read More or Read Less buttons if text is not long enough', () => {
+    const { container } = render(
+      <ProjectObjectives
+        projectForViewData={{
+          ...getProjectForViewResponse,
+          objectives: { ...getProjectForViewResponse.objectives, objectives: 'short text' }
+        }}
+        codes={codes}
+        refresh={mockRefresh}
+      />
+    );
 
     //@ts-ignore
-    expect(getAllByText(container, 'READ LESS')[0]).toBeInTheDocument();
+    expect(queryByText(container, 'Read More')).not.toBeInTheDocument();
+
+    //@ts-ignore
+    expect(queryByText(container, 'Read Less')).not.toBeInTheDocument();
+  });
+
+  it('does not show the Read More or Read Less buttons if text is not empty', () => {
+    const { container } = render(
+      <ProjectObjectives
+        projectForViewData={{
+          ...getProjectForViewResponse,
+          objectives: { ...getProjectForViewResponse.objectives, objectives: '' }
+        }}
+        codes={codes}
+        refresh={mockRefresh}
+      />
+    );
 
     //@ts-ignore
-    fireEvent.click(getAllByText(container, 'READ LESS')[0]);
+    expect(queryByText(container, 'Read More')).not.toBeInTheDocument();
 
     //@ts-ignore
-    expect(getAllByText(container, 'READ MORE...')[0]).toBeInTheDocument();
+    expect(queryByText(container, 'Read Less')).not.toBeInTheDocument();
   });
 });
diff --git a/app/src/features/projects/view/components/ProjectObjectives.tsx b/app/src/features/projects/view/components/ProjectObjectives.tsx
index 1cd41a5005..c290f536aa 100644
--- a/app/src/features/projects/view/components/ProjectObjectives.tsx
+++ b/app/src/features/projects/view/components/ProjectObjectives.tsx
@@ -19,7 +19,9 @@ const ProjectObjectives: React.FC<IProjectObjectivesProps> = (props) => {
     projectForViewData: { objectives }
   } = props;
 
-  return <ReadMoreField text={objectives.objectives} maxCharLength={200} />;
+  return (
+    <ReadMoreField text={objectives.objectives} maxCharLength={200} TypographyProps={{ color: 'textSecondary' }} />
+  );
 };
 
 export default ProjectObjectives;
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 1070f4565c..7c0f9918a8 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,26 +3,44 @@
 exports[`ProjectObjectives renders correctly when both objectives and caveats have length is > 850 characters and are in multiple paragraphs 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-4"
+    class="MuiBox-root MuiBox-root-3"
   >
     <p
       class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
     >
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+      <span>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+ Donec
+      </span>
+      <span>
+        …
+      </span>
     </p>
     <div
-      class="MuiBox-root MuiBox-root-5"
+      class="MuiBox-root MuiBox-root-4"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSizeSmall MuiButton-sizeSmall"
-        style="color: rgb(117, 117, 117);"
+        style="color: rgb(117, 117, 117); font-weight: 600; text-transform: uppercase;"
         tabindex="0"
         type="button"
       >
         <span
           class="MuiButton-label"
         >
-          READ MORE...
+          <svg
+            role="presentation"
+            style="width: 1.5rem; height: 1.5rem;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+          <span>
+            Read More
+          </span>
         </span>
         <span
           class="MuiTouchRipple-root"
@@ -35,66 +53,64 @@ 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-6"
-  >
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph1
-    </p>
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph2
-    </p>
-    <p />
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Paragraph3
-    </p>
-  </div>
+  <span>
+    Paragraph1
+Paragraph2
+
+Paragraph3
+  </span>
 </DocumentFragment>
 `;
 
 exports[`ProjectObjectives renders correctly when objectives length is <= 850 characters 1`] = `
 <DocumentFragment>
-  <div
-    class="MuiBox-root MuiBox-root-1"
-  >
-    <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
-    >
-      Et ad et in culpa si
-    </p>
-  </div>
+  <span>
+    Et ad et in culpa si
+  </span>
 </DocumentFragment>
 `;
 
 exports[`ProjectObjectives renders correctly when objectives length is > 850 characters and caveats is empty 1`] = `
 <DocumentFragment>
   <div
-    class="MuiBox-root MuiBox-root-2"
+    class="MuiBox-root MuiBox-root-1"
   >
     <p
       class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary"
     >
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+      <span>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+ Donec
+      </span>
+      <span>
+        …
+      </span>
     </p>
     <div
-      class="MuiBox-root MuiBox-root-3"
+      class="MuiBox-root MuiBox-root-2"
     >
       <button
         class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSizeSmall MuiButton-sizeSmall"
-        style="color: rgb(117, 117, 117);"
+        style="color: rgb(117, 117, 117); font-weight: 600; text-transform: uppercase;"
         tabindex="0"
         type="button"
       >
         <span
           class="MuiButton-label"
         >
-          READ MORE...
+          <svg
+            role="presentation"
+            style="width: 1.5rem; height: 1.5rem;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+              style="fill: currentColor;"
+            />
+          </svg>
+          <span>
+            Read More
+          </span>
         </span>
         <span
           class="MuiTouchRipple-root"