diff --git a/common/test/acceptance/pages/lms/courseware.py b/common/test/acceptance/pages/lms/courseware.py
index 220f65dc84..6f61da75d0 100644
--- a/common/test/acceptance/pages/lms/courseware.py
+++ b/common/test/acceptance/pages/lms/courseware.py
@@ -102,7 +102,7 @@ class CoursewarePage(CoursePage):
         """
         return the url of the active subsection in the left nav
         """
-        return self.q(css='.chapter-content-container .chapter-menu a.active').attrs('href')[0]
+        return self.q(css='.chapter-content-container .chapter-menu .menu-item.active a').attrs('href')[0]
 
     @property
     def can_start_proctored_exam(self):
diff --git a/lms/static/js/fixtures/accordion.html b/lms/static/js/fixtures/accordion.html
index 102ebb6c6d..4bf0afd568 100644
--- a/lms/static/js/fixtures/accordion.html
+++ b/lms/static/js/fixtures/accordion.html
@@ -7,17 +7,23 @@
     </button>
     <div class="chapter-content-container" tabindex="-1" aria-expanded="true">
       <div class="chapter-menu" id="accordion-menu-1">
-        <a href="#">
-          <p>edX Homepage</p>
-          <p class="subtitle">Ungraded</p>
-        </a>
-        <a class="active" href="#">
-          <p>The edX Blog</p>
-        </a>
-        <a class="graded" href="#">
-          <p>Courses Dashboard</p>
-          <p class="subtitle">Graded</p>
-        </a>
+        <div class="menu-item">
+          <a href="#">
+            <p>edX Homepage</p>
+            <p class="subtitle">Ungraded</p>
+          </a>
+        </div>
+        <div class="menu-item active">
+          <a href="#">
+            <p>The edX Blog</p>
+          </a>
+        </div>
+        <div class="menu-item graded">
+          <a href="#">
+            <p>Courses Dashboard</p>
+            <p class="subtitle">Graded</p>
+          </a>
+        </div>
       </div>
     </div>
     <button class="button-chapter chapter" aria-controls="accordion-menu-2" aria-pressed="false">
@@ -27,17 +33,23 @@
     </button>
     <div class="chapter-content-container" tabindex="-1" aria-expanded="false">
       <div class="chapter-menu" id="accordion-menu-2">
-        <a href="#">
-          <p>edX Homepage</p>
-          <p class="subtitle">Ungraded</p>
-        </a>
-        <a href="#">
-          <p>The edX Blog</p>
-        </a>
-        <a class="graded" href="#">
-          <p>Courses Dashboard</p>
-          <p class="subtitle">Graded</p>
-        </a>
+        <div class="menu-item">
+          <a href="#">
+            <p>edX Homepage</p>
+            <p class="subtitle">Ungraded</p>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a href="#">
+            <p>The edX Blog</p>
+          </a>
+        </div>
+        <div class="menu-item">
+          <a class="graded" href="#">
+            <p>Courses Dashboard</p>
+            <p class="subtitle">Graded</p>
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lms/static/js/utils/navigation.js b/lms/static/js/utils/navigation.js
index d9b1974528..5f212697cb 100644
--- a/lms/static/js/utils/navigation.js
+++ b/lms/static/js/utils/navigation.js
@@ -18,7 +18,7 @@ var edx = edx || {},
             },
 
             checkForCurrent: function() {
-                var active = $('#accordion .chapter-content-container .chapter-menu:has(a.active)').index('#accordion .chapter-content-container .chapter-menu') ? $('#accordion .chapter-content-container .chapter-menu:has(a.active)').index('#accordion .chapter-content-container .chapter-menu') : 0,
+                var active = $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') ? $('#accordion .chapter-content-container .chapter-menu:has(.active)').index('#accordion .chapter-content-container .chapter-menu') : 0,
                     activeSection = $('#accordion .button-chapter:eq(' + active + ')');
 
                 navigation.closeAccordions();
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 476e82f90b..2805c189bd 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -4,16 +4,9 @@
     @include border-right(1px solid $border-color-2);
     @include border-radius(3px, 0, 0, 3px);
 
-    #open_close_accordion {
-        display: none;
-    }
-
-    header {
-        max-height: 47px;
-
-        h2 {
-            white-space: nowrap;
-        }
+    // reseting bolded fonts for the course index
+    h3 {
+        font-weight: normal;
     }
 
     #accordion {
@@ -39,9 +32,12 @@
                     box-shadow: none;
                 }
 
-                &:hover,
-                &:focus {
-                    background: $sidebar-active-image;
+                &.active {
+
+                    .group-heading {
+                        @extend %t-ultrastrong;
+                        color: $base-font-color;
+                    }
                 }
 
                 .group-heading {
@@ -57,16 +53,6 @@
                         border: none;
                     }
 
-                    &.active {
-                        border-bottom: none;
-                        color: $base-font-color;
-
-                        &:hover,
-                        &:focus {
-                            background: none;
-                        }
-                    }
-
                     .icon {
                         position: absolute;
                         @include left($baseline);
@@ -91,56 +77,68 @@
                     background: transparent;
                     overflow: hidden;
 
-                    a {
+                    .menu-item {
                         @extend %t-strong;
                         @include padding(($baseline/4) ($baseline/2));
-                        position: relative;
-                        display: block;
                         margin: ($baseline/5) 0;
                         border-radius: ($baseline/5);
                         border-bottom: 0;
                         background: transparent;
                         text-decoration: none;
-                        color: $base-font-color;
 
-                        p {
-                            @extend %t-action3;
-                            @extend %t-strong;
-                            margin-bottom: 0;
-                            font-family: $sans-serif;
+                        a {
+                            position: relative;
+                            display: block;
+                            color: $base-font-color;
 
-                            &.subtitle {
+                            p {
                                 @extend %t-action3;
-                                @extend %t-regular;
-                                display: block;
-                                margin: 0;
-                                color: $gray-d1;
+                                @extend %t-strong;
+                                margin-bottom: 0;
+                                font-family: $sans-serif;
 
-                                &:empty {
-                                    display: none;
+                                &.subtitle {
+                                    @extend %t-action3;
+                                    @extend %t-regular;
+                                    display: block;
+                                    margin: 0;
+                                    color: $gray-d1;
+
+                                    &:empty {
+                                        display: none;
+                                    }
+
+                                    // definitions for proctored exam attempt status indicators
+                                    .verified {
+                                        color: $success-color;
+                                    }
+
+                                    .rejected {
+                                        color: $alert-color;
+                                    }
+
+                                    .error {
+                                        color: $alert-color;
+                                    }
                                 }
+                            }
 
-                                // definitions for proctored exam attempt status indicators
-                                .verified {
-                                    color: $success-color;
-                                }
+                            &:hover,
+                            &:focus {
+                                color: $link-color;
 
-                                .rejected {
-                                    color: $alert-color;
-                                }
-
-                                .error {
-                                    color: $alert-color;
+                                .subtitle {
+                                    color: $gray-d1;
                                 }
                             }
                         }
 
                         &.graded {
 
-                            img {
+                            .menu-icon {
                                 @include right($baseline/4);
                                 position: absolute;
-                                bottom: ($baseline/4);
+                                bottom: 0;
                                 margin: auto;
                             }
                         }
@@ -153,34 +151,15 @@
                                 @extend %t-regular;
                                 @include transition(none);
                                 @include right($baseline);
-                                content: '›';
                                 position: absolute;
                                 top: 50%;
                                 margin-top: -13px;
                                 font-size: 30px;
                                 color: $gray-d3;
+                                content: '›';
                                 opacity: 0;
                             }
                         }
-
-                        &:hover,
-                        &:focus {
-
-                            color: $link-color;
-
-                            .subtitle {
-                                color: $gray-d1;
-                            }
-                        }
-
-                        &:active {
-                            box-shadow: inset 0 1px 14px 0 $shadow-l1;
-
-                            &:after {
-                                opacity: 1.0;
-                                right: 15px;
-                            }
-                        }
                     }
                 }
             }
diff --git a/lms/templates/courseware/accordion.html b/lms/templates/courseware/accordion.html
index 14b866a21c..7cfb7fb5e7 100644
--- a/lms/templates/courseware/accordion.html
+++ b/lms/templates/courseware/accordion.html
@@ -6,15 +6,15 @@
 %>
 
 <%def name="make_chapter(chapter)">
-<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
-    <%
-    if chapter.get('active'):
-        aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
-        active_class = 'active"'
-    else:
-        aria_label = chapter['display_name']
-        active_class = ''
-    %>
+<%
+if chapter.get('active'):
+    aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
+    active_class = 'active"'
+else:
+    aria_label = chapter['display_name']
+    active_class = ''
+%>
+<button class="button-chapter chapter ${active_class}" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
     <h3 class="group-heading ${active_class}" aria-label="${aria_label}">
         <span class="icon fa fa-caret-right" aria-hidden="true"></span>
         ${chapter['display_name']}
@@ -23,20 +23,22 @@
 <div class="chapter-content-container" tabindex="-1" aria-expanded="false">
     <div class="chapter-menu" id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
         % for section in chapter['sections']:
-        <a class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}" href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
-            <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
-            <%
-            if section.get('due') is None:
-                due_date = ''
-            else:
-                formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
-                due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
-            %>
-            <p class="subtitle">${section['format']} ${due_date}</p>
-            % if 'graded' in section and section['graded']:
-                <img src="/static/images/graded.png" alt="Graded Section">
-            % endif
-        </a>
+        <div class="menu-item ${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
+            <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
+                <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
+                <%
+                if section.get('due') is None:
+                    due_date = ''
+                else:
+                    formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
+                    due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
+                %>
+                <p class="subtitle">${section['format']} ${due_date}</p>
+                % if 'graded' in section and section['graded']:
+                    <img class="menu-icon" src="/static/images/graded.png" alt="Graded Section">
+                % endif
+            </a>
+        </div>
         % endfor
     </div>
 </div>