diff --git a/lms/static/sass/features/_course-outline.scss b/lms/static/sass/features/_course-outline.scss
index 7ea0b7e791..6e9a98a57d 100644
--- a/lms/static/sass/features/_course-outline.scss
+++ b/lms/static/sass/features/_course-outline.scss
@@ -35,21 +35,32 @@
           list-style-type: none;
 
           a.outline-item {
-            display: block;
+            display: flex;
+            justify-content: space-between;
             padding: ($baseline / 2);
 
             &:hover {
               background-color: palette(primary, x-back);
-              text-decoration: none;
+            }
+
+            .subsection-text {
+              .details {
+                font-size: $body-font-size;
+                color: $lms-gray;
+                font-style: italic;
+              }
+            }
+
+            .subsection-actions {
+              .resume-right {
+                position: relative;
+                top: calc(50% - (#{$baseline} / 2));
+              }
             }
           }
 
           &.current {
             border: 1px solid $lms-active-color;
-
-            .resume-right {
-              @include float(right);
-            }
           }
         }
       }
diff --git a/openedx/features/course_experience/templates/course_experience/course-outline-fragment.html b/openedx/features/course_experience/templates/course_experience/course-outline-fragment.html
index 3d5f66295b..7c92a47101 100644
--- a/openedx/features/course_experience/templates/course_experience/course-outline-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-outline-fragment.html
@@ -27,7 +27,6 @@ from django.utils.translation import ugettext as _
                 </div>
                 <ol class="outline-item focusable" role="group" tabindex="0">
                     % for subsection in section.get('children') or []:
-                    ${ subsection.get('special_exam', '') }
                         <li
                             class="subsection ${ 'current' if subsection['current'] else '' }"
                             role="treeitem"
@@ -39,14 +38,80 @@ from django.utils.translation import ugettext as _
                                 href="${ subsection['lms_web_url'] }"
                                 id="${ subsection['id'] }"
                             >
-                                <span>${ subsection['display_name'] }</span>
-                                <span class="sr-only">${ _("This is your last visited course section.") }</span>
-                                % if subsection['current']:
-                                    <span class="resume-right">
-                                        <b>${ _("Resume Course") }</b>
-                                        <span class="icon fa fa-arrow-circle-right" aria-hidden="true"></span>
-                                    </span>
-                                % endif
+                                <div class="subsection-text">
+                                    ## Subsection title
+                                    <span>${ subsection['display_name'] }</span>
+
+                                    <div class="details">
+                                        ## There are behavior differences between rendering of subsections which have
+                                        ## special_exam/timed examinations and those that do not.
+                                        ##
+                                        ## Proctoring exposes a exam status message field as well as a status icon
+                                        <%
+                                            if subsection.get('due') is None:
+                                                data_string = subsection['format']
+                                            else:
+                                                if 'special_exam' in subsection:
+                                                    data_string = _('due {date}')
+                                                else:
+                                                    data_string = _("{subsection_format} due {{date}}").format(subsection_format=subsection['format'])
+                                        %>
+                                        % if subsection['format'] or due_date or 'special_exam' in subsection:
+                                        <span class="subtitle">
+                                            % if 'special_exam' in subsection:
+                                                ## Display the proctored exam status icon and status message
+                                                <span
+                                                    class="menu-icon icon fa ${subsection['special_exam'].get('suggested_icon', 'fa-pencil-square-o')} ${subsection['special_exam'].get('status', 'eligible')}"
+                                                    aria-hidden="true"
+                                                ></span>
+                                                <span class="subtitle-name">
+                                                    ${subsection['special_exam'].get('short_description', '')}
+                                                </span>
+
+                                                ## completed proctored exam statuses should not show the due date
+                                                ## since the exam has already been submitted by the user
+                                                % if not subsection['special_exam'].get('in_completed_state', False):
+                                                    <span
+                                                        class="localized-datetime subtitle-name"
+                                                        data-datetime="${subsection['due']}"
+                                                        data-string="${data_string}"
+                                                        data-timezone="${user_timezone}"
+                                                        data-language="${user_language}"
+                                                    ></span>
+                                                % endif
+                                            % else:
+                                                ## non-proctored section, we just show the exam format and the due date
+                                                ## this is the standard case in edx-platform
+                                                <span
+                                                    class="localized-datetime subtitle-name"
+                                                    data-datetime="${subsection['due']}"
+                                                    data-string="${data_string}"
+                                                    data-timezone="${user_timezone}"
+                                                    data-language="${user_language}"
+                                                ></span>
+
+                                                % if 'graded' in subsection and subsection['graded']:
+                                                    <span
+                                                        class="menu-icon icon fa fa-pencil-square-o"
+                                                        aria-hidden="true"
+                                                    ></span>
+                                                    <span class="sr">${_("This content is graded")}</span>
+                                                % endif
+                                            % endif
+                                        </span>
+                                        % endif
+                                    </div> <!-- /details -->
+                                </div> <!-- /subsection-text -->
+                                <div class="subsection-actions">
+                                    ## Resume button (if last visited section)
+                                    % if subsection['current']:
+                                        <span class="sr-only">${ _("This is your last visited course section.") }</span>
+                                        <span class="resume-right">
+                                            <b>${ _("Resume Course") }</b>
+                                            <span class="icon fa fa-arrow-circle-right" aria-hidden="true"></span>
+                                        </span>
+                                    %endif
+                                </div>
                             </a>
                         </li>
                     % endfor
diff --git a/openedx/features/course_experience/views/course_outline.py b/openedx/features/course_experience/views/course_outline.py
index 8724a0f173..26e35936bb 100644
--- a/openedx/features/course_experience/views/course_outline.py
+++ b/openedx/features/course_experience/views/course_outline.py
@@ -29,6 +29,13 @@ class CourseOutlineFragmentView(EdxFragmentView):
         for i in range(len(children)):
             child_id = block['children'][i]
             child_detail = self.populate_children(all_blocks[child_id], all_blocks, course_position)
+
+            # Fake data; remove
+            child_detail = dict(child_detail, **{
+                "format": "",
+                "due": ""
+            })
+
             block['children'][i] = child_detail
             block['children'][i]['current'] = course_position == child_detail['block_id']