diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
index f051d248ea..ab8a2d8f21 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -13,7 +13,7 @@
 }
 
 .outline-sidebar-heading-wrapper {
-    border: 1px solid #d7d3d1;
+    border: 1px solid var(--pgn-color-light-700);
 
     &.sticky {
         position: sticky;
@@ -29,7 +29,11 @@
 
 .course-sidebar-section {
     background: var(--pgn-color-white);
-    border: 1px solid #d7d3d1;
+    border: 1px solid var(--pgn-color-light-700);
+
+    &.active-section button {
+        background-color: var(--pgn-color-info-100);
+    }
 
     button {
         line-height: 1.75rem;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
index 5e7a30879a..9cf42d2698 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
@@ -48,13 +48,10 @@ const SidebarSection = ({ section, handleSelectSection }) => {
   );
 
   return (
-    <li className="mb-2 course-sidebar-section">
+    <li className={classNames('mb-2 course-sidebar-section', { 'active-section': isActiveSection })}>
       <Button
         variant="tertiary"
-        className={classNames(
-          'd-flex align-items-center w-100 px-4 py-3.5 rounded-0 justify-content-start',
-          { 'bg-info-100': isActiveSection },
-        )}
+        className="d-flex align-items-center w-100 px-4 py-3.5 rounded-0 justify-content-start"
         onClick={() => handleSelectSection(id)}
       >
         {sectionTitle}
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
index c04414285e..f67f1fff31 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
@@ -45,7 +45,7 @@ const SidebarUnit = ({
   const unitIcon = <UnitIcon type={iconType} isCompleted={completeAndEnabled} />;
   return (
     <li className={classNames({
-      'bg-info-100': isActive,
+      'active-unit bg-info-100': isActive,
       'border-top border-light': !isFirst,
     })}
     >