diff --git a/src/course-home/data/api.js b/src/course-home/data/api.js
index 6ffa9b468d..389242aa98 100644
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -3,7 +3,6 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { logInfo } from '@edx/frontend-platform/logging';
 import { appendBrowserTimezoneToUrl } from '../../utils';
 
-
 const calculateAssignmentTypeGrades = (points, assignmentWeight, numDroppable) => {
   let dropCount = numDroppable;
   // Drop the lowest grades
@@ -158,25 +157,26 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           showLink: !!block.legacy_web_url,
           title: block.display_name,
           unitIds: block.children || [],
-          };
+        };
         break;
       case 'vertical':
-          models.units[block.id] = {
-            complete: block.complete,
-            description: block.description,
-            due: block.due,
-            effortActivities: block.effort_activities,
-            effortTime: block.effort_time,
-            icon: block.icon,
-            id: block.id,
-            legacyWebUrl: block.legacy_web_url,
-            // The presence of an legacy URL for the sequence indicates that we want this
-            // sequence to be a clickable link in the outline (even though, if the new
-            // courseware experience is active, we will ignore `legacyWebUrl` and build a
-            // link to the MFE ourselves).
-            showLink: !!block.legacy_web_url,
-            title: block.display_name,
-          }
+        models.units[block.id] = {
+          complete: block.complete,
+          description: block.description,
+          due: block.due,
+          effortActivities: block.effort_activities,
+          effortTime: block.effort_time,
+          icon: block.icon,
+          id: block.id,
+          legacyWebUrl: block.legacy_web_url,
+          // The presence of an legacy URL for the sequence indicates that we want this
+          // sequence to be a clickable link in the outline (even though, if the new
+          // courseware experience is active, we will ignore `legacyWebUrl` and build a
+          // link to the MFE ourselves).
+          showLink: !!block.legacy_web_url,
+          title: block.display_name,
+        };
+        break;
 
       default:
         logInfo(`Unexpected course block type: ${block.type} with ID ${block.id}.  Expected block types are course, chapter, and sequential.`);
@@ -377,9 +377,6 @@ export function getTimeOffsetMillis(headerDate, requestTime, responseTime) {
   return timeOffsetMillis;
 }
 
-
-
-
 export async function getOutlineTabData(courseId) {
   const url = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
   let { tabData } = {};
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index f606cf6110..2cc074d7cb 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -30,7 +30,6 @@ function Section({
     },
   } = useModel('outline', courseId);
 
-
   const [open, setOpen] = useState(defaultOpen);
 
   useEffect(() => {
@@ -97,13 +96,13 @@ function Section({
         )}
       >
         <ol className="list-unstyled">
-          {sequenceIds.map((sequenceId, index) => (
+          {sequenceIds.map((sequenceId) => (
             <SequenceLink
               key={sequenceId}
               id={sequenceId}
               courseId={courseId}
               defaultOpen={sequences[sequenceId].resumeBlock}
-              expand={expand} 
+              expand={expand}
               sequence={sequences[sequenceId]}
             />
           ))}
diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
index 7e8aa04f43..ad0d6b7880 100644
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { Collapsible, Hyperlink, IconButton } from '@edx/paragon';
+import { Collapsible, IconButton } from '@edx/paragon';
 import {
   FormattedMessage,
   FormattedTime,
@@ -14,15 +13,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import UnitLink from './UnitLink';
 
-
 import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 
 import genericMessages from '../../generic/messages';
 import messages from './messages';
 
-
-
 function SequenceLink({
   id,
   intl,
@@ -37,7 +33,7 @@ function SequenceLink({
     due,
     // legacyWebUrl,
     // showLink,
-    title,  
+    title,
     unitIds,
   } = sequence;
   const {
@@ -56,15 +52,12 @@ function SequenceLink({
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
-
   const [open, setOpen] = useState(defaultOpen);
-  
+
   useEffect(() => {
     setOpen(expand);
   }, [expand]);
 
-
-
   // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
   // const coursewareUrl = (
   //   canLoadCourseware
@@ -74,8 +67,8 @@ function SequenceLink({
   // const displayTitle = showLink ? coursewareUrl : title;
   const sequenceTitle = (
     <div className="row w-100 m-0">
-       { unitIds.length > 0 ? (
-          <div className="row w-100 m-0">
+      {unitIds.length > 0 ? (
+        <div className="row w-100 m-0">
           <div className="col-auto p-0">
             {complete ? (
               <FontAwesomeIcon
@@ -100,56 +93,56 @@ function SequenceLink({
             <span className="sr-only">
               , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
             </span>
-            <EffortEstimate className="ml-3 align-middle" block={sequence} />      
+            <EffortEstimate className="ml-3 align-middle" block={sequence} />
           </div>
           {due && (
-              <div className="row w-100 m-0 ml-3 pl-3">
-                <small className="text-body pl-2">
-                  <FormattedMessage
-                    id="learning.outline.sequence-due"
-                    defaultMessage="{description} due {assignmentDue}"
-                    description="Used below an assignment title"
-                    values={{
-                      assignmentDue: (
-                        <FormattedTime
-                          key={`${id}-due`}
-                          day="numeric"
-                          month="short"
-                          year="numeric"
-                          timeZoneName="short"
-                          value={due}
-                          {...timezoneFormatArgs}
-                        />
-                      ),
-                      description: description || '',
-                    }}
-                  />
-                </small>
-              </div>
-            )}
-        </div>
-        ) : (
-          <div className="row w-100 m-0">
-            <div className="col-auto p-0">
-              <FontAwesomeIcon
-                  icon={farCheckCircle}
-                  fixedWidth
-                  className="float-left mt-1 text-gray-400"
-                  aria-hidden="true"
-                  title={intl.formatMessage(messages.incompleteSection)}
+            <div className="row w-100 m-0 ml-3 pl-3">
+              <small className="text-body pl-2">
+                <FormattedMessage
+                  id="learning.outline.sequence-due"
+                  defaultMessage="{description} due {assignmentDue}"
+                  description="Used below an assignment title"
+                  values={{
+                    assignmentDue: (
+                      <FormattedTime
+                        key={`${id}-due`}
+                        day="numeric"
+                        month="short"
+                        year="numeric"
+                        timeZoneName="short"
+                        value={due}
+                        {...timezoneFormatArgs}
+                      />
+                    ),
+                    description: description || '',
+                  }}
                 />
+              </small>
             </div>
-            <div className="col-10 ml-3 p-0 font-weight-bold text-muted-500">
-              <span className="align-middle">{title} (No Units)</span>
-            </div>
+          )}
+        </div>
+      ) : (
+        <div className="row w-100 m-0">
+          <div className="col-auto p-0">
+            <FontAwesomeIcon
+              icon={farCheckCircle}
+              fixedWidth
+              className="float-left mt-1 text-gray-400"
+              aria-hidden="true"
+              title={intl.formatMessage(messages.incompleteSection)}
+            />
+          </div>
+          <div className="col-10 ml-3 p-0 font-weight-bold text-muted-500">
+            <span className="align-middle">{title} (No Units)</span>
           </div>
-        )}
+        </div>
+      )}
     </div>
-  )
+  );
 
   return (
     <li>
-        <Collapsible
+      <Collapsible
         className="mb-2"
         styling="card-lg"
         title={sequenceTitle}
@@ -162,7 +155,7 @@ function SequenceLink({
             onClick={() => { setOpen(true); }}
             size="sm"
           />
-        )}
+      )}
         iconWhenOpen={(
           <IconButton
             alt={intl.formatMessage(genericMessages.close)}
@@ -170,21 +163,21 @@ function SequenceLink({
             onClick={() => { setOpen(false); }}
             size="sm"
           />
-        )}
-        >
-          <ol className="list-unstyled">
-            {unitIds.map((unitId, index) => (
-              <UnitLink
-                key={unitId}
-                id={unitId}
-                courseId={courseId}
-                unit={units[unitId]}
-                sequenceId={id}
-                first={index === 0}
-              ></UnitLink>
-            ))}
-          </ol>
-        </Collapsible>
+      )}
+      >
+        <ol className="list-unstyled">
+          {unitIds.map((unitId, index) => (
+            <UnitLink
+              key={unitId}
+              id={unitId}
+              courseId={courseId}
+              unit={units[unitId]}
+              sequenceId={id}
+              first={index === 0}
+            />
+          ))}
+        </ol>
+      </Collapsible>
     </li>
   );
 }
diff --git a/src/course-home/outline-tab/UnitLink.jsx b/src/course-home/outline-tab/UnitLink.jsx
index 9c5f289f01..709aed625c 100644
--- a/src/course-home/outline-tab/UnitLink.jsx
+++ b/src/course-home/outline-tab/UnitLink.jsx
@@ -8,7 +8,7 @@ import {
   FormattedTime,
   injectIntl,
   intlShape,
-} from '@edx/frontend-platform/i18n'; 
+} from '@edx/frontend-platform/i18n';
 
 import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
@@ -18,7 +18,6 @@ import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
 
-
 function UnitLink({
   id,
   courseId,
@@ -26,7 +25,6 @@ function UnitLink({
   first,
   intl,
 }) {
-
   const {
     complete,
     description,
@@ -50,65 +48,65 @@ function UnitLink({
   );
   const displayTitle = showLink ? coursewareUrl : title;
 
-    return (
-      <li>
-        <div className={classNames('pl-3', { 'mt-2 pt-2 border-top border-light': !first })}>
-          <div className="row w-100 m-0">
-            <div className="col-auto p-0">
-              {complete ? (
-                <FontAwesomeIcon
-                  icon={fasCheckCircle}
-                  fixedWidth
-                  className="float-left text-success mt-1"
-                  aria-hidden="true"
-                  title={intl.formatMessage(messages.completedAssignment)}
-                />
-              ) : (
-                <FontAwesomeIcon
-                  icon={farCheckCircle}
-                  fixedWidth
-                  className="float-left text-gray-400 mt-1"
-                  aria-hidden="true"
-                  title={intl.formatMessage(messages.incompleteAssignment)}
-                />
-              )}
-            </div>
-            <div className="col-10 p-0 ml-3 text-break">
-              <span className="align-middle">{displayTitle}</span>
-              <span className="sr-only">
-                , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
-              </span> 
-              <EffortEstimate className="ml-3 align-middle" block={unit} />
-            </div>
+  return (
+    <li>
+      <div className={classNames('pl-4', { 'mt-2 pt-2 border-top border-light': !first })}>
+        <div className="row w-100 m-0">
+          <div className="col-auto p-0">
+            {complete ? (
+              <FontAwesomeIcon
+                icon={fasCheckCircle}
+                fixedWidth
+                className="float-left text-success mt-1"
+                aria-hidden="true"
+                title={intl.formatMessage(messages.completedAssignment)}
+              />
+            ) : (
+              <FontAwesomeIcon
+                icon={farCheckCircle}
+                fixedWidth
+                className="float-left text-gray-400 mt-1"
+                aria-hidden="true"
+                title={intl.formatMessage(messages.incompleteAssignment)}
+              />
+            )}
+          </div>
+          <div className="col-10 p-0 ml-3 text-break">
+            <span className="align-middle">{displayTitle}</span>
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
+            </span>
+            <EffortEstimate className="ml-3 align-middle" block={unit} />
           </div>
-          {due && (
-            <div className="row w-100 m-0 ml-3 pl-3">
-              <small className="text-body pl-2">
-                <FormattedMessage
-                  id="learning.outline.sequence-due"
-                  defaultMessage="{description} due {assignmentDue}"
-                  description="Used below an assignment title"
-                  values={{
-                    assignmentDue: (
-                      <FormattedTime
-                        key={`${id}-due`}
-                        day="numeric"
-                        month="short"
-                        year="numeric"
-                        timeZoneName="short"
-                        value={due}
-                        {...timezoneFormatArgs}
-                      />
-                    ),
-                    description: description || '',
-                  }}
-                />
-              </small>
-            </div>
-          )}
         </div>
-      </li>
-    )
+        {due && (
+          <div className="row w-100 m-0 ml-3 pl-3">
+            <small className="text-body pl-2">
+              <FormattedMessage
+                id="learning.outline.sequence-due"
+                defaultMessage="{description} due {assignmentDue}"
+                description="Used below an assignment title"
+                values={{
+                  assignmentDue: (
+                    <FormattedTime
+                      key={`${id}-due`}
+                      day="numeric"
+                      month="short"
+                      year="numeric"
+                      timeZoneName="short"
+                      value={due}
+                      {...timezoneFormatArgs}
+                    />
+                  ),
+                  description: description || '',
+                }}
+              />
+            </small>
+          </div>
+        )}
+      </div>
+    </li>
+  );
 }
 
 UnitLink.propTypes = {
@@ -119,4 +117,4 @@ UnitLink.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(UnitLink);
\ No newline at end of file
+export default injectIntl(UnitLink);
diff --git a/src/courseware/data/api.js b/src/courseware/data/api.js
index 857d83d699..ccbc3d61c3 100644
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -134,7 +134,6 @@ export async function getCourseMetadata(courseId) {
   return normalizeMetadata(metadata);
 }
 
-
 function normalizeSequenceMetadata(sequence) {
   return {
     sequence: {
@@ -181,7 +180,7 @@ export async function getSequenceMetadata(sequenceId) {
     .get(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceId}`, {});
 
   return normalizeSequenceMetadata(data);
-} 
+}
 
 const getSequenceHandlerUrl = (courseId, sequenceId) => `${getConfig().LMS_BASE_URL}/courses/${courseId}/xblock/${sequenceId}/handler`;