diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
index c06966f524..48dbf71078 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
@@ -2,33 +2,43 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
 import { LOADING } from '@src/constants';
 
+import {
+  useCourseOutlineData,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/hooks';
 import PageLoading from '@src/generic/PageLoading';
 import { CourseOutlineSidebarHeadingSlot } from '@src/plugin-slots/CourseOutlineSidebarHeadingSlot';
 import classNames from 'classnames';
 import { useState } from 'react';
-import SidebarSection from './components/SidebarSection';
+import { useParams } from 'react-router-dom';
 import SidebarSequence from './components/SidebarSequence';
-import { ID } from './constants';
-import { useCourseOutlineSidebar } from './hooks';
+import SidebarSection from './components/SidebarSection';
 import messages from './messages';
 
-export const CourseOutline = () => {
+interface CourseOutlineProps {
+  shouldDisplayFullScreen?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+interface CoursePageParams extends Record<string, string> {
+  courseId: string;
+  unitId: string;
+}
+
+export const CourseOutline = ({
+  shouldDisplayFullScreen = false,
+  onToggleCollapse,
+}: CourseOutlineProps) => {
   const intl = useIntl();
   const [selectedSection, setSelectedSection] = useState<string | null>(null);
   const [isDisplaySequenceLevel, setDisplaySequenceLevel, setDisplaySectionLevel] = useToggle(true);
-
+  const { unitId, courseId } = useParams<CoursePageParams>();
   const {
-    courseId,
-    unitId,
-    currentSidebar,
-    isActiveEntranceExam,
     courseOutlineStatus,
     activeSequenceId,
     sections,
     sequences,
-    shouldDisplayFullScreen,
-    handleToggleCollapse,
-  } = useCourseOutlineSidebar();
+    isActiveEntranceExam,
+  } = useCourseOutlineData();
 
   const resolvedSectionId = selectedSection
         || Object.keys(sections).find(
@@ -47,19 +57,16 @@ export const CourseOutline = () => {
     setDisplaySequenceLevel();
     setSelectedSection(id);
   };
-
   const sidebarHeading = (
     <CourseOutlineSidebarHeadingSlot
-      onToggleCollapse={handleToggleCollapse}
+      onToggleCollapse={onToggleCollapse}
       isDisplaySequenceLevel={isDisplaySequenceLevel}
       backButton={backButtonTitle ? { title: backButtonTitle, onClick: handleBackToSectionLevel } : undefined}
     />
   );
-
-  if (isActiveEntranceExam || currentSidebar !== ID) {
+  if (isActiveEntranceExam) {
     return null;
   }
-
   if (courseOutlineStatus === LOADING) {
     return (
       <div className={classNames('outline-sidebar-wrapper', {
@@ -108,5 +115,3 @@ export const CourseOutline = () => {
     </div>
   );
 };
-
-export default CourseOutline;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
index f051d248ea..ec8bb50230 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,7 @@
 
 .course-sidebar-section {
     background: var(--pgn-color-white);
-    border: 1px solid #d7d3d1;
+    border: 1px solid var(--pgn-color-light-700);
 
     button {
         line-height: 1.75rem;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx
index f35775a092..88f30fcfbe 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx
@@ -5,12 +5,14 @@ import { useCourseOutlineSidebar } from './hooks';
 const CourseOutlineTray = () => {
   const {
     currentSidebar,
+    shouldDisplayFullScreen,
+    handleToggleCollapse,
   } = useCourseOutlineSidebar();
 
   if (currentSidebar !== ID) {
     return null;
   }
-  return <CourseOutline />;
+  return <CourseOutline shouldDisplayFullScreen={shouldDisplayFullScreen} onToggleCollapse={handleToggleCollapse} />;
 };
 
 CourseOutlineTray.ID = ID;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
index abccd14aed..3d6039598f 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
@@ -4,17 +4,17 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { IconButton } from '@openedx/paragon';
 import { MenuOpen as MenuOpenIcon } from '@openedx/paragon/icons';
 
-import { useCourseOutlineSidebar } from './hooks';
+import { useCourseOutlineData, useCourseOutlineSidebar } from './hooks';
 import { ID } from './constants';
 import messages from './messages';
 
 const CourseOutlineTrigger = ({ isMobileView }) => {
   const intl = useIntl();
+  const { isActiveEntranceExam } = useCourseOutlineData();
   const {
     currentSidebar,
     shouldDisplayFullScreen,
     handleToggleCollapse,
-    isActiveEntranceExam,
   } = useCourseOutlineSidebar();
 
   const isDisplayForDesktopView = !isMobileView && !shouldDisplayFullScreen && currentSidebar !== ID;
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..0562b38d77 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
@@ -8,7 +8,7 @@ import { Button, Icon } from '@openedx/paragon';
 import { ChevronRight as ChevronRightIcon } from '@openedx/paragon/icons';
 
 import courseOutlineMessages from '@src/course-home/outline-tab/messages';
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData } from '../hooks';
 
 const SidebarSection = ({ section, handleSelectSection }) => {
   const intl = useIntl();
@@ -20,7 +20,7 @@ const SidebarSection = ({ section, handleSelectSection }) => {
     completionStat,
   } = section;
 
-  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSection = sequenceIds.includes(activeSequenceId);
 
   const sectionTitle = (
@@ -48,13 +48,10 @@ const SidebarSection = ({ section, handleSelectSection }) => {
   );
 
   return (
-    <li className="mb-2 course-sidebar-section">
+    <li className={classNames('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 rounded-0 justify-content-start"
         onClick={() => handleSelectSection(id)}
       >
         {sectionTitle}
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
index fa0f16435c..ddf9852759 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
@@ -8,7 +8,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible } from '@openedx/paragon';
 
 import courseOutlineMessages from '@src/course-home/outline-tab/messages';
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData } from '../hooks';
 import SidebarUnit from './SidebarUnit';
 import { UNIT_ICON_TYPES } from './UnitIcon';
 
@@ -30,7 +30,7 @@ const SidebarSequence = ({
   } = sequence;
 
   const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSequence = id === activeSequenceId;
 
   const 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
index b2f6bc7249..e88408319b 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
@@ -28,7 +28,7 @@ const SidebarUnit = ({
   const completeAndEnabled = complete && isCompletionTrackingEnabled;
 
   return (
-    <li className={classNames({ 'bg-info-100': isActive, 'border-top border-light': !isFirst })}>
+    <li className={classNames({ 'active-unit bg-info-100': isActive, 'border-top border-light': !isFirst })}>
       <UnitLinkWrapper
         {...{
           sequenceId,
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx
index 771eb5f7d5..0bb158c92d 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData, useCourseOutlineSidebar } from '../hooks';
 
 interface Props {
   courseId: string;
@@ -26,17 +26,25 @@ const UnitLinkWrapper: React.FC<Props> = ({
   courseId,
   children,
 }) => {
-  const { handleUnitClick } = useCourseOutlineSidebar();
+  const { handleUnitClick } = useCourseOutlineData();
+  const { shouldDisplayFullScreen, handleToggleCollapse } = useCourseOutlineSidebar();
   const { pathname } = useLocation();
   const isPreview = pathname.startsWith('/preview');
   const baseUrl = `/course/${courseId}/${sequenceId}/${id}`;
   const link = isPreview ? `/preview${baseUrl}` : baseUrl;
+  const handleClick = React.useCallback(() => {
+    // Hide the sidebar after selecting a unit on a mobile device.
+    if (shouldDisplayFullScreen) {
+      handleToggleCollapse();
+    }
+    handleUnitClick({ sequenceId, activeUnitId, id });
+  }, [handleUnitClick, sequenceId, activeUnitId, id]);
 
   return (
     <Link
       to={link}
       className="row w-100 m-0 d-flex align-items-center text-gray-700"
-      onClick={() => handleUnitClick({ sequenceId, activeUnitId, id })}
+      onClick={handleClick}
     >
       {children}
     </Link>
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/hooks.js b/src/courseware/course/sidebar/sidebars/course-outline/hooks.js
index 6b3ca556fc..9cd2499389 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/hooks.js
+++ b/src/courseware/course/sidebar/sidebars/course-outline/hooks.js
@@ -1,27 +1,26 @@
-import {
-  useContext, useEffect, useLayoutEffect, useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { breakpoints } from '@openedx/paragon';
-
-import { useModel } from '@src/generic/model-store';
 import { LOADED } from '@src/constants';
-import { checkBlockCompletion, getCourseOutlineStructure } from '@src/courseware/data/thunks';
 import {
-  getCoursewareOutlineSidebarSettings,
+  getCourseOutline,
   getCourseOutlineShouldUpdate,
   getCourseOutlineStatus,
+  getCoursewareOutlineSidebarSettings,
   getSequenceId,
-  getCourseOutline,
   getSequenceStatus,
 } from '@src/courseware/data/selectors';
+import { checkBlockCompletion, getCourseOutlineStructure } from '@src/courseware/data/thunks';
+
+import { useModel } from '@src/generic/model-store';
+import {
+  useContext, useEffect, useLayoutEffect, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import SidebarContext from '../../SidebarContext';
 import { ID } from './constants';
 
-// eslint-disable-next-line import/prefer-default-export
-export const useCourseOutlineSidebar = () => {
+export const useCourseOutlineData = () => {
   const dispatch = useDispatch();
   const {
     enableCompletionTracking: isEnabledCompletionTracking,
@@ -30,41 +29,26 @@ export const useCourseOutlineSidebar = () => {
   const courseOutlineStatus = useSelector(getCourseOutlineStatus);
   const sequenceStatus = useSelector(getSequenceStatus);
   const activeSequenceId = useSelector(getSequenceId);
-  const { sections = {}, sequences = {}, units = {} } = useSelector(getCourseOutline);
+  const {
+    sections = {},
+    sequences = {},
+    units = {},
+  } = useSelector(getCourseOutline);
 
   const { courseId } = useParams();
   const course = useModel('coursewareMeta', courseId);
 
-  const {
-    unitId,
-    currentSidebar,
-    toggleSidebar,
-    shouldDisplayFullScreen,
-  } = useContext(SidebarContext);
-
-  // Course outline state is now fully controlled by SidebarContextProvider
-  // This component only renders when currentSidebar === 'COURSE_OUTLINE'
-  const [isOpen, setIsOpen] = useState(true);
-
   const {
     entranceExamEnabled,
     entranceExamPassed,
   } = course.entranceExamData || {};
   const isActiveEntranceExam = entranceExamEnabled && !entranceExamPassed;
 
-  const collapseSidebar = () => {
-    toggleSidebar(null);
-  };
-
-  const handleToggleCollapse = () => {
-    if (currentSidebar === ID) {
-      collapseSidebar();
-    } else {
-      toggleSidebar(ID);
-    }
-  };
-
-  const handleUnitClick = ({ sequenceId, activeUnitId, id }) => {
+  const handleUnitClick = ({
+    sequenceId,
+    activeUnitId,
+    id,
+  }) => {
     const logEvent = (eventName, widgetPlacement) => {
       const findSequenceByUnitId = () => Object.values(sequences).find(seq => seq.unitIds.includes(activeUnitId));
       const activeSequence = findSequenceByUnitId(activeUnitId);
@@ -88,11 +72,6 @@ export const useCourseOutlineSidebar = () => {
 
     logEvent('edx.ui.lms.sequence.tab_selected', 'left');
     dispatch(checkBlockCompletion(courseId, sequenceId, activeUnitId));
-
-    // Hide the sidebar after selecting a unit on a mobile device.
-    if (shouldDisplayFullScreen) {
-      handleToggleCollapse();
-    }
   };
 
   // Load course outline structure when needed
@@ -102,6 +81,43 @@ export const useCourseOutlineSidebar = () => {
     }
   }, [courseId, courseOutlineShouldUpdate]);
 
+  return {
+    isEnabledCompletionTracking,
+    isActiveEntranceExam,
+    courseOutlineStatus,
+    activeSequenceId,
+    sections,
+    sequences,
+    units,
+    handleUnitClick,
+    sequenceStatus,
+  };
+};
+
+export const useCourseOutlineSidebar = () => {
+  const {
+    unitId,
+    currentSidebar,
+    toggleSidebar,
+    shouldDisplayFullScreen,
+  } = useContext(SidebarContext);
+
+  // Course outline state is now fully controlled by SidebarContextProvider
+  // This component only renders when currentSidebar === 'COURSE_OUTLINE'
+  const [isOpen, setIsOpen] = useState(true);
+
+  const collapseSidebar = () => {
+    toggleSidebar(null);
+  };
+
+  const handleToggleCollapse = () => {
+    if (currentSidebar === ID) {
+      collapseSidebar();
+    } else {
+      toggleSidebar(ID);
+    }
+  };
+
   // Collapse sidebar if screen resized to a width that displays the sidebar automatically
   useLayoutEffect(() => {
     const handleResize = () => {
@@ -118,21 +134,11 @@ export const useCourseOutlineSidebar = () => {
   }, [currentSidebar]);
 
   return {
-    courseId,
     unitId,
     currentSidebar,
     shouldDisplayFullScreen,
-    isEnabledCompletionTracking,
     isOpen,
     setIsOpen,
     handleToggleCollapse,
-    isActiveEntranceExam,
-    courseOutlineStatus,
-    activeSequenceId,
-    sections,
-    sequences,
-    units,
-    handleUnitClick,
-    sequenceStatus,
   };
 };