diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
index 633b11c20c..a35e984887 100644
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -136,7 +136,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           title: block.display_name,
           resumeBlock: block.resume_block,
           sequenceIds: block.children || [],
-          optional: block.optional_completion,
+          optionalCompletion: block.optional_completion,
         };
         break;
 
@@ -153,7 +153,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           // link in the outline (even though we ignore the given url and use an internal <Link> to ourselves).
           showLink: !!block.lms_web_url,
           title: block.display_name,
-          optional: block.optional_completion,
+          optionalCompletion: block.optional_completion,
         };
         break;
 
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index 80a45d63c5..a330903a34 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -27,7 +27,7 @@ const Section = ({
     complete,
     sequenceIds,
     title,
-    optional,
+    optionalCompletion,
   } = section;
   const {
     courseBlocks: {
@@ -75,7 +75,7 @@ const Section = ({
       </div>
       <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
         <span className="align-middle">{title}</span>
-        <Badge className="ml-2" variant="light" hidden={!optional}>{intl.formatMessage(messages.optionalCompletion)}</Badge>
+        <Badge className="ml-2" variant="light" hidden={!optionalCompletion}>{intl.formatMessage(messages.optionalCompletion)}</Badge>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>
diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
index 59c28299f2..5be55624a2 100644
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -17,6 +17,7 @@ import { useModel } from '../../generic/model-store';
 import { useScrollTo } from './hooks';
 import messages from './messages';
 import './SequenceLink.scss';
+import { Badge } from '@edx/paragon';
 
 const SequenceLink = ({
   id,
@@ -33,7 +34,7 @@ const SequenceLink = ({
     due,
     showLink,
     title,
-    optional,
+    optionalCompletion,
   } = sequence;
   const {
     userTimezone,
@@ -129,12 +130,15 @@ const SequenceLink = ({
               , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
             </span>
             <EffortEstimate className="ml-3 align-middle" block={sequence} />
+            {
+              optionalCompletion && 
+              <Badge className="ml-2" variant="light">
+                {intl.formatMessage(messages.optionalCompletion)}
+              </Badge>
+            }
           </div>
         </div>
         <div className="row w-100 m-0 ml-3 pl-3">
-          <small className="text-body pl-2 pr-0">
-            {optional ? intl.formatMessage(messages.optionalCompletion) : ''}
-          </small>
           <small className="text-body pl-2">
             {due ? dueDateMessage : noDueDateMessage}
           </small>
diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js
index d3b0ac5e5c..49dd2f97aa 100644
--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -102,7 +102,7 @@ const messages = defineMessages({
   optionalCompletion: {
     id: 'learning.outline.optionalBlock',
     defaultMessage: 'Optional',
-    description: 'Used as a label to indicate that a section, sequence, or unit is optional.',
+    description: 'Used as a label to indicate that a section or sequence is optional.',
   },
   proctoringInfoPanel: {
     id: 'learning.proctoringPanel.header',
diff --git a/src/course-home/progress-tab/ProgressTab.test.jsx b/src/course-home/progress-tab/ProgressTab.test.jsx
index 37cc3c8a1c..0ff0f3c4b5 100644
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -1379,4 +1379,96 @@ describe('Progress Tab', () => {
       expect(screen.getByText('Course progress for otherstudent')).toBeInTheDocument();
     });
   });
+
+  describe('Completion Donut Chart', () => {
+    it('Renders optional completion donut chart', async () => {
+      setTabData({
+        completion_summary: {
+          complete_count: 1,
+          incomplete_count: 1,
+          locked_count: 1,
+        },
+        optional_completion_summary: {
+          complete_count: 1,
+          incomplete_count: 1,
+          locked_count: 0,
+        },
+        verified_mode: {
+          access_expiration_date: '2050-01-01T12:00:00',
+          currency: 'USD',
+          currency_symbol: '$',
+          price: 149,
+          sku: 'ABCD1234',
+          upgrade_url: 'edx.org/upgrade',
+        },
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: false,
+                has_graded_assignment: true,
+                num_points_earned: 8,
+                num_points_possible: 10,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+        ],
+      });
+      await fetchAndRender();
+      expect(screen.getByText('optional')).toBeInTheDocument();
+    });
+    
+    it('Hides optional completion donut chart', async () => {
+      setTabData({
+        completion_summary: {
+          complete_count: 1,
+          incomplete_count: 1,
+          locked_count: 1,
+        },
+        optional_completion_summary: {
+          complete_count: 0,
+          incomplete_count: 0,
+          locked_count: 0,
+        },
+        verified_mode: {
+          access_expiration_date: '2050-01-01T12:00:00',
+          currency: 'USD',
+          currency_symbol: '$',
+          price: 149,
+          sku: 'ABCD1234',
+          upgrade_url: 'edx.org/upgrade',
+        },
+        section_scores: [
+          {
+            display_name: 'First section',
+            subsections: [
+              {
+                assignment_type: 'Homework',
+                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+                display_name: 'First subsection',
+                learner_has_access: false,
+                has_graded_assignment: true,
+                num_points_earned: 8,
+                num_points_possible: 10,
+                percent_graded: 1.0,
+                show_correctness: 'always',
+                show_grades: true,
+                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+              },
+            ],
+          },
+        ],
+      });
+      await fetchAndRender();
+      expect(screen.queryByText('optional')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
index 415f4037a3..cd6dad2659 100644
--- a/src/courseware/course/sequence/Unit.jsx
+++ b/src/courseware/course/sequence/Unit.jsx
@@ -143,7 +143,7 @@ const Unit = ({
   return (
     <div className="unit">
       <h1 className="mb-0 h3">{unit.title}</h1>
-      <Badge className="ml-2" variant="light" hidden={!unit.optional}>{intl.formatMessage(messages.optionalCompletion)}</Badge>
+      <Badge className="ml-2" variant="light" hidden={!unit.optionalCompletion}>{intl.formatMessage(messages.optionalCompletion)}</Badge>
       <h2 className="sr-only">{intl.formatMessage(messages.headerPlaceholder)}</h2>
       <BookmarkButton
         unitId={unit.id}
diff --git a/src/courseware/course/sequence/messages.js b/src/courseware/course/sequence/messages.js
index e050d5222a..34559efe9a 100644
--- a/src/courseware/course/sequence/messages.js
+++ b/src/courseware/course/sequence/messages.js
@@ -34,7 +34,7 @@ const messages = defineMessages({
   optionalCompletion: {
     id: 'learn.sequence.optionalBlock',
     defaultMessage: 'Optional',
-    description: 'Used as a label to indicate that a section, sequence, or unit is optional.',
+    description: 'Used as a label to indicate that a unit is optional.',
   },
 });
 
diff --git a/src/courseware/data/api.js b/src/courseware/data/api.js
index f0bdf83595..bea0572766 100644
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -169,7 +169,7 @@ function normalizeSequenceMetadata(sequence) {
       contentType: unit.type,
       graded: unit.graded,
       containsContentTypeGatedContent: unit.contains_content_type_gated_content,
-      optional: unit.optional_completion,
+      optionalCompletion: unit.optional_completion,
     })),
   };
 }