diff --git a/src/course-tabs/CourseTabsNavigation.jsx b/src/course-tabs/CourseTabsNavigation.tsx
similarity index 70%
rename from src/course-tabs/CourseTabsNavigation.jsx
rename to src/course-tabs/CourseTabsNavigation.tsx
index 9c2a12ef8c..8d773e95c8 100644
--- a/src/course-tabs/CourseTabsNavigation.jsx
+++ b/src/course-tabs/CourseTabsNavigation.tsx
@@ -1,21 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
-
-import messages from './messages';
-import Tabs from '../generic/tabs/Tabs';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { CourseTabLinksSlot } from '../plugin-slots/CourseTabLinksSlot';
 import { CoursewareSearch, CoursewareSearchToggle } from '../course-home/courseware-search';
 import { useCoursewareSearchState } from '../course-home/courseware-search/hooks';
 
+import Tabs from '../generic/tabs/Tabs';
+import messages from './messages';
+
+export interface CourseTabsNavigationProps {
+  activeTabSlug?: string;
+  tabs: Array<{
+    title: string;
+    slug: string;
+    url: string;
+  }>;
+}
+
 const CourseTabsNavigation = ({
-  activeTabSlug, className, tabs,
-}) => {
+  activeTabSlug = undefined,
+  tabs,
+}:CourseTabsNavigationProps) => {
   const intl = useIntl();
   const { show } = useCoursewareSearchState();
 
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
+    <div id="courseTabsNavigation" className="mb-3 course-tabs-navigation">
       <div className="container-xl">
         <div className="nav-bar">
           <div className="nav-menu">
@@ -44,19 +54,4 @@ const CourseTabsNavigation = ({
   );
 };
 
-CourseTabsNavigation.propTypes = {
-  activeTabSlug: PropTypes.string,
-  className: PropTypes.string,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-CourseTabsNavigation.defaultProps = {
-  activeTabSlug: undefined,
-  className: null,
-};
-
 export default CourseTabsNavigation;
diff --git a/src/course-tabs/index.js b/src/course-tabs/index.ts
similarity index 50%
rename from src/course-tabs/index.js
rename to src/course-tabs/index.ts
index e2236ee726..801de27856 100644
--- a/src/course-tabs/index.js
+++ b/src/course-tabs/index.ts
@@ -1,2 +1,2 @@
-/* eslint-disable import/prefer-default-export */
 export { default as CourseTabsNavigation } from './CourseTabsNavigation';
+export type { CourseTabsNavigationProps } from './CourseTabsNavigation';
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
similarity index 66%
rename from src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
rename to src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
index 8eaf5e8a0b..c6b156fe40 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutline.tsx
@@ -1,85 +1,93 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import { Button, useToggle, IconButton } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, IconButton, useToggle } from '@openedx/paragon';
+import { LOADING } from '@src/constants';
 import {
   MenuOpen as MenuOpenIcon,
   ChevronLeft as ChevronLeftIcon,
 } from '@openedx/paragon/icons';
-
-import { LOADING } from '@src/constants';
+import {
+  useCourseOutlineData,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/hooks';
 import PageLoading from '@src/generic/PageLoading';
-import SidebarSection from './components/SidebarSection';
+import classNames from 'classnames';
+import { useState } from 'react';
+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';
 
-const CourseOutlineTray = () => {
+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(null);
+  const [selectedSection, setSelectedSection] = useState<string | null>(null);
   const [isDisplaySequenceLevel, setDisplaySequenceLevel, setDisplaySectionLevel] = useToggle(true);
-
+  const { unitId, courseId } = useParams<CoursePageParams>();
   const {
-    courseId,
-    unitId,
-    currentSidebar,
-    handleToggleCollapse,
-    isActiveEntranceExam,
-    shouldDisplayFullScreen,
     courseOutlineStatus,
     activeSequenceId,
     sections,
     sequences,
-  } = useCourseOutlineSidebar();
+    isActiveEntranceExam,
+  } = useCourseOutlineData();
 
   const resolvedSectionId = selectedSection
-    || Object.keys(sections).find(
-      (sectionId) => sections[sectionId].sequenceIds.includes(activeSequenceId),
-    );
+        || Object.keys(sections).find(
+          (sectionId):boolean => sections[sectionId].sequenceIds.includes(activeSequenceId),
+        )!;
   const sectionsIds = Object.keys(sections);
-  const sequenceIds = sections[resolvedSectionId]?.sequenceIds || [];
-  const backButtonTitle = sections[resolvedSectionId]?.title;
+  const sequenceIds: string[] = sections[resolvedSectionId]?.sequenceIds || [];
+  const backButtonTitle: string | undefined = sections[resolvedSectionId]?.title;
 
   const handleBackToSectionLevel = () => {
     setDisplaySectionLevel();
     setSelectedSection(null);
   };
 
-  const handleSelectSection = (id) => {
+  const handleSelectSection = (id:string) => {
     setDisplaySequenceLevel();
     setSelectedSection(id);
   };
-
   const sidebarHeading = (
-    <div className="outline-sidebar-heading-wrapper sticky d-flex justify-content-between align-self-start align-items-center bg-light-200 p-2.5 pl-4">
+    <div className="outline-sidebar-heading-wrapper sticky d-flex justify-content-between align-self-start align-items-center p-2.5 pl-4">
       {isDisplaySequenceLevel && backButtonTitle ? (
         <Button
           variant="link"
           iconBefore={ChevronLeftIcon}
-          className="outline-sidebar-heading p-0 mb-0 text-left text-dark-500"
+          className="outline-sidebar-heading p-0 mb-0 text-left"
           onClick={handleBackToSectionLevel}
         >
           {backButtonTitle}
         </Button>
       ) : (
-        <span className="outline-sidebar-heading mb-0 h4 text-dark-500">
+        <span className="outline-sidebar-heading mb-0 h4">
           {intl.formatMessage(messages.courseOutlineTitle)}
         </span>
       )}
+      {onToggleCollapse && (
       <IconButton
         alt={intl.formatMessage(messages.toggleCourseOutlineTrigger)}
-        className="outline-sidebar-toggle-btn flex-shrink-0 text-dark bg-light-200"
+        className="outline-sidebar-toggle-btn flex-shrink-0 text-dark"
         iconAs={MenuOpenIcon}
-        onClick={handleToggleCollapse}
+        onClick={onToggleCollapse}
       />
+      )}
     </div>
   );
-
-  if (isActiveEntranceExam || currentSidebar !== ID) {
+  if (isActiveEntranceExam) {
     return null;
   }
-
   if (courseOutlineStatus === LOADING) {
     return (
       <div className={classNames('outline-sidebar-wrapper', {
@@ -107,19 +115,18 @@ const CourseOutlineTray = () => {
         {sidebarHeading}
         <ol id="outline-sidebar-outline" className="list-unstyled">
           {isDisplaySequenceLevel
-            ? sequenceIds.map((sequenceId) => (
+            ? sequenceIds.map((sequenceId: string) => (
               <SidebarSequence
                 key={sequenceId}
-                courseId={courseId}
+                courseId={courseId!}
                 sequence={sequences[sequenceId]}
                 defaultOpen={sequenceId === activeSequenceId}
-                activeUnitId={unitId}
+                activeUnitId={unitId!}
               />
             ))
             : sectionsIds.map((sectionId) => (
               <SidebarSection
                 key={sectionId}
-                courseId={courseId}
                 section={sections[sectionId]}
                 handleSelectSection={handleSelectSection}
               />
@@ -129,7 +136,3 @@ const CourseOutlineTray = () => {
     </div>
   );
 };
-
-CourseOutlineTray.ID = ID;
-
-export default CourseOutlineTray;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
index a574f02736..ed06a6424a 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -13,7 +13,10 @@
 }
 
 .outline-sidebar-heading-wrapper {
-    border: 1px solid #d7d3d1;
+    border-width: var(--learning-sidebar-outline-heading-wrapper-border-width, 1px);
+    border-style: solid;
+    border-color: var(--learning-sidebar-outline-heading-wrapper-border-color, var(--pgn-color-light-700));
+    background-color: var(--learning-sidebar-outline-heading-wrapper-bg-color, var(--pgn-color-light-200));
 
     &.sticky {
         position: sticky;
@@ -24,12 +27,18 @@
 
     .outline-sidebar-heading {
         font-weight: var(--pgn-typography-font-weight-bold);
+        color: var(--learning-sidebar-outline-heading-text-color, var(--pgn-color-dark-500));
     }
 }
 
 .course-sidebar-section {
-    background: var(--pgn-color-white);
-    border: 1px solid #d7d3d1;
+    background: var(--learning-sidebar-outline-section-bg-color, var(--pgn-color-white));
+
+    border-width: var(--learning-sidebar-outline-section-border-width, 1px);
+    border-style: solid;
+    border-color: var(--learning-sidebar-outline-section-border-color, var(--pgn-color-light-700));
+
+    margin-bottom: var(--learning-sidebar-outline-section-margin-bottom, var(--pgn-spacing-spacer-2));
 
     button {
         line-height: 1.75rem;
@@ -38,11 +47,17 @@
         &:focus::before {
             border-radius: 0;
         }
+
+        padding: var(--learning-sidebar-outline-section-padding-y, var(--pgn-spacing-spacer-3-5)) var(--learning-sidebar-outline-section-padding-x, var(--pgn-spacing-spacer-4));
+    }
+    &.active-section button {
+        background-color: var(--learning-sidebar-outline-section-active-bg-color, var(--pgn-color-light-100));
     }
 }
 
 .outline-sidebar-toggle-btn {
     font-size: 1.5rem;
+    background-color: var(--learning-sidebar-outline-toggle-btn-bg-color, var(--pgn-color-light-200));
 
     .collapsed & {
         transform: scale(-1, 1);
@@ -78,7 +93,7 @@
         }
 
         &:last-child .pgn_collapsible {
-            margin-bottom: 0px !important;
+            margin-bottom: 0 !important;
         }
     }
 
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
index aba41c8291..653a9bc8d5 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
@@ -74,7 +74,7 @@ describe('<CourseOutlineTray />', () => {
     await expect(screen.queryByText(messages.loading.defaultMessage)).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: section.title })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: messages.toggleCourseOutlineTrigger.defaultMessage })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: new RegExp(`${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}`) })).toBeInTheDocument();
     expect(screen.getByText(unit.title)).toBeInTheDocument();
   });
 
@@ -115,13 +115,13 @@ describe('<CourseOutlineTray />', () => {
 
     const sidebarBackBtn = screen.queryByRole('button', { name: section.title });
     expect(sidebarBackBtn).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: new RegExp(`${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}`) })).toBeInTheDocument();
 
     await user.click(sidebarBackBtn);
     expect(sidebarBackBtn).not.toBeInTheDocument();
     expect(screen.queryByText(messages.courseOutlineTitle.defaultMessage)).toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: `${section.title} , ${courseOutlineMessages.incompleteSection.defaultMessage}` }));
+    await user.click(screen.getByRole('button', { name: new RegExp(`${section.title} , ${courseOutlineMessages.incompleteSection.defaultMessage}`) }));
     expect(screen.queryByRole('button', { name: section.title })).toBeInTheDocument();
   });
 });
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx
new file mode 100644
index 0000000000..88f30fcfbe
--- /dev/null
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.tsx
@@ -0,0 +1,20 @@
+import { CourseOutline } from './CourseOutline';
+import { ID } from './constants';
+import { useCourseOutlineSidebar } from './hooks';
+
+const CourseOutlineTray = () => {
+  const {
+    currentSidebar,
+    shouldDisplayFullScreen,
+    handleToggleCollapse,
+  } = useCourseOutlineSidebar();
+
+  if (currentSidebar !== ID) {
+    return null;
+  }
+  return <CourseOutline shouldDisplayFullScreen={shouldDisplayFullScreen} onToggleCollapse={handleToggleCollapse} />;
+};
+
+CourseOutlineTray.ID = ID;
+
+export default CourseOutlineTray;
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/CompletionIcon.test.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.tsx
similarity index 97%
rename from src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx
rename to src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.tsx
index cb026fb46b..7664b02357 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import CompletionIcon from './CompletionIcon';
+import { CompletionIcon } from './CompletionIcon';
 
 describe('CompletionIcon', () => {
   it('renders check circle icon when completion is equal to total and completion tracking is enabled', () => {
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.tsx
similarity index 70%
rename from src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx
rename to src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.tsx
index 9b3a855db8..a3fa67f5d7 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import {
   CheckCircle as CheckCircleIcon,
   LmsCompletionSolid as LmsCompletionSolidIcon,
@@ -6,7 +5,15 @@ import {
 
 import { DashedCircleIcon } from '../icons';
 
-const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled }) => {
+export interface CompletionIconProps {
+  completionStat: {
+    completed: number;
+    total: number;
+  };
+  enabled: boolean;
+}
+
+export const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled }: CompletionIconProps) => {
   const percentage = total !== 0 ? Math.min((completed / total) * 100, 100) : 0;
   const remainder = 100 - percentage;
 
@@ -20,12 +27,4 @@ const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled
   }
 };
 
-CompletionIcon.propTypes = {
-  completionStat: PropTypes.shape({
-    completed: PropTypes.number,
-    total: PropTypes.number,
-  }).isRequired,
-  enabled: PropTypes.bool.isRequired,
-};
-
 export default CompletionIcon;
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 034575743b..92881ffcc2 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
@@ -1,3 +1,6 @@
+import {
+  CourseOverviewSectionCompletionIconSlot,
+} from '@src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -5,8 +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 CompletionIcon from './CompletionIcon';
-import { useCourseOutlineSidebar } from '../hooks';
+import { useCourseOutlineData } from '../hooks';
 
 const SidebarSection = ({ section, handleSelectSection }) => {
   const intl = useIntl();
@@ -18,13 +20,17 @@ const SidebarSection = ({ section, handleSelectSection }) => {
     completionStat,
   } = section;
 
-  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSection = sequenceIds.includes(activeSequenceId);
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0">
-        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
+        <CourseOverviewSectionCompletionIconSlot
+          completionStat={completionStat}
+          enabled={isEnabledCompletionTracking}
+          active={isActiveSection}
+        />
       </div>
       <div className="col-10 ml-3 p-0 flex-grow-1 text-dark-500 text-left text-break">
         {title}
@@ -41,13 +47,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 5e1fb37a4f..458b05ed0e 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
@@ -1,3 +1,6 @@
+import {
+  CourseOverviewSequenceCompletionIconSlot,
+} from '@src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot';
 import { useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -5,8 +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 CompletionIcon from './CompletionIcon';
+import { useCourseOutlineData } from '../hooks';
 import SidebarUnit from './SidebarUnit';
 import { UNIT_ICON_TYPES } from './UnitIcon';
 
@@ -28,13 +30,17 @@ const SidebarSequence = ({
   } = sequence;
 
   const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineData();
   const isActiveSequence = id === activeSequenceId;
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0" style={{ fontSize: '1.1rem' }}>
-        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
+        <CourseOverviewSequenceCompletionIconSlot
+          completionStat={completionStat}
+          enabled={isEnabledCompletionTracking}
+          active={isActiveSequence}
+        />
       </div>
       <div className="col-9 d-flex flex-column flex-grow-1 ml-3 mr-auto p-0 text-left">
         <span className="align-middle text-dark-500">{title}</span>
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..9e3a739f2e 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
@@ -1,9 +1,10 @@
+import { CourseOutlineSidebarUnitIconSlot } from '@src/plugin-slots/CourseOutlineSidebarUnitIconSlot';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
-import UnitIcon, { UNIT_ICON_TYPES } from './UnitIcon';
+import { UNIT_ICON_TYPES } from './UnitIcon';
 import UnitLinkWrapper from './UnitLinkWrapper';
 
 const SidebarUnit = ({
@@ -28,7 +29,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,
@@ -38,7 +39,7 @@ const SidebarUnit = ({
         }}
       >
         <div className="col-auto p-0">
-          <UnitIcon type={iconType} isCompleted={completeAndEnabled} />
+          <CourseOutlineSidebarUnitIconSlot type={iconType} isCompleted={completeAndEnabled} active={isActive} />
         </div>
         <div className="col-10 p-0 ml-3 text-break">
           <span className="align-middle">
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.tsx
similarity index 83%
rename from src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.jsx
rename to src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.tsx
index e5f70d1286..7182f47927 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.test.tsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import UnitIcon, { UNIT_ICON_TYPES } from './UnitIcon';
+import UnitIcon, { UNIT_ICON_TYPES, UnitIconType } from './UnitIcon';
 
 describe('<UnitIcon />', () => {
-  Object.keys(UNIT_ICON_TYPES).forEach((type) => {
+  Object.keys(UNIT_ICON_TYPES).forEach((type:UnitIconType) => {
     it(`renders default ${type} icon correctly`, () => {
       const { container } = render(<UnitIcon type={type} isCompleted={false} />);
       const icon = container.querySelector('svg');
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.tsx
similarity index 56%
rename from src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.jsx
rename to src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.tsx
index 47992f215a..78672b9a63 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
   Locked as LockedIcon,
@@ -10,6 +9,7 @@ import {
   LmsVideocam as LmsVideocamIcon,
   LmsVideocamComplete as LmsVideocamCompleteIcon,
 } from '@openedx/paragon/icons';
+import React, { SVGProps } from 'react';
 
 export const UNIT_ICON_TYPES = {
   video: 'video',
@@ -17,10 +17,30 @@ export const UNIT_ICON_TYPES = {
   vertical: 'vertical',
   lock: 'lock',
   other: 'other',
-};
+} as const;
+
+export type UnitIconType = typeof UNIT_ICON_TYPES[keyof typeof UNIT_ICON_TYPES];
+
+export interface UnitIconProps extends SVGProps<SVGSVGElement> {
+  type: UnitIconType;
+  isCompleted: boolean;
+}
+
+type IconType = React.ComponentType<SVGProps<SVGSVGElement>>;
+
+interface IconPair {
+  default: IconType;
+  complete: IconType;
+}
 
-const UnitIcon = ({ type, isCompleted, ...props }) => {
-  const iconMap = {
+type IconMapVal = IconType | IconPair;
+
+function isIconPair(val: IconMapVal): val is IconPair {
+  return typeof val === 'object' && 'default' in val && 'complete' in val;
+}
+
+const UnitIcon = ({ type, isCompleted, ...props }: UnitIconProps) => {
+  const iconMap: Record<UnitIconType, IconMapVal> = {
     [UNIT_ICON_TYPES.video]: {
       default: LmsVideocamIcon,
       complete: LmsVideocamCompleteIcon,
@@ -37,20 +57,12 @@ const UnitIcon = ({ type, isCompleted, ...props }) => {
     },
   };
 
-  let Icon = iconMap[type || UNIT_ICON_TYPES.other];
-
-  if (typeof Icon === 'object') {
-    Icon = iconMap[type || UNIT_ICON_TYPES.other]?.[isCompleted ? 'complete' : 'default'];
-  }
+  const iconEntry = iconMap[type || UNIT_ICON_TYPES.other];
+  const Icon: IconType = isIconPair(iconEntry) ? iconEntry[isCompleted ? 'complete' : 'default'] : iconEntry;
 
   return (
     <Icon {...props} className={classNames({ 'text-success': isCompleted, 'text-gray-300': !isCompleted })} />
   );
 };
 
-UnitIcon.propTypes = {
-  type: PropTypes.oneOf(Object.keys(UNIT_ICON_TYPES)).isRequired,
-  isCompleted: PropTypes.bool.isRequired,
-};
-
 export default UnitIcon;
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 0127d6025d..7869ea6dcf 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/hooks.js
+++ b/src/courseware/course/sidebar/sidebars/course-outline/hooks.js
@@ -21,10 +21,8 @@ import {
 } from '@src/courseware/data/selectors';
 import { ID } from './constants';
 
-// eslint-disable-next-line import/prefer-default-export
-export const useCourseOutlineSidebar = () => {
+export const useCourseOutlineData = () => {
   const dispatch = useDispatch();
-  const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
   const {
     enableCompletionTracking: isEnabledCompletionTracking,
   } = useSelector(getCoursewareOutlineSidebarSettings);
@@ -36,19 +34,6 @@ export const useCourseOutlineSidebar = () => {
 
   const { courseId } = useParams();
   const course = useModel('coursewareMeta', courseId);
-  const { isNewDiscussionSidebarViewEnabled } = useModel('courseHomeMeta', courseId);
-  const SidebarContext = isNewDiscussionSidebarViewEnabled ? NewSidebarContext : OldSidebarContext;
-
-  const {
-    unitId,
-    initialSidebar,
-    currentSidebar,
-    toggleSidebar,
-    shouldDisplayFullScreen,
-  } = useContext(SidebarContext);
-
-  const isOpenSidebar = !initialSidebar && !isCollapsedOutlineSidebar;
-  const [isOpen, setIsOpen] = useState(true);
 
   const {
     entranceExamEnabled,
@@ -56,21 +41,6 @@ export const useCourseOutlineSidebar = () => {
   } = course.entranceExamData || {};
   const isActiveEntranceExam = entranceExamEnabled && !entranceExamPassed;
 
-  const collapseSidebar = () => {
-    toggleSidebar(null);
-    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
-  };
-
-  const handleToggleCollapse = () => {
-    if (currentSidebar === ID) {
-      collapseSidebar();
-    } else {
-      toggleSidebar(ID);
-      window.sessionStorage.removeItem('hideCourseOutlineSidebar');
-      window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'closed');
-    }
-  };
-
   const handleUnitClick = ({ sequenceId, activeUnitId, id }) => {
     const logEvent = (eventName, widgetPlacement) => {
       const findSequenceByUnitId = () => Object.values(sequences).find(seq => seq.unitIds.includes(activeUnitId));
@@ -95,24 +65,65 @@ 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();
+  useEffect(() => {
+    if (courseOutlineStatus !== LOADED || courseOutlineShouldUpdate) {
+      dispatch(getCourseOutlineStructure(courseId));
     }
+  }, [courseId, courseOutlineShouldUpdate]);
+
+  return {
+    isEnabledCompletionTracking,
+    isActiveEntranceExam,
+    courseOutlineStatus,
+    activeSequenceId,
+    sections,
+    sequences,
+    units,
+    handleUnitClick,
+    sequenceStatus,
   };
+};
 
-  useEffect(() => {
-    if (isOpenSidebar && currentSidebar !== ID) {
+export const useCourseOutlineSidebar = () => {
+  const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
+
+  const { courseId } = useParams();
+  const { isNewDiscussionSidebarViewEnabled } = useModel('courseHomeMeta', courseId);
+  const SidebarContext = isNewDiscussionSidebarViewEnabled ? NewSidebarContext : OldSidebarContext;
+
+  const {
+    unitId,
+    initialSidebar,
+    currentSidebar,
+    toggleSidebar,
+    shouldDisplayFullScreen,
+  } = useContext(SidebarContext);
+
+  const isOpenSidebar = !initialSidebar && !isCollapsedOutlineSidebar;
+  const [isOpen, setIsOpen] = useState(true);
+
+  const collapseSidebar = () => {
+    toggleSidebar(null);
+    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+  };
+
+  const handleToggleCollapse = () => {
+    if (currentSidebar === ID) {
+      collapseSidebar();
+    } else {
       toggleSidebar(ID);
+      window.sessionStorage.removeItem('hideCourseOutlineSidebar');
+      window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'closed');
     }
-  }, [initialSidebar, unitId]);
+  };
 
   useEffect(() => {
-    if (courseOutlineStatus !== LOADED || courseOutlineShouldUpdate) {
-      dispatch(getCourseOutlineStructure(courseId));
+    if (isOpenSidebar && currentSidebar !== ID && toggleSidebar) {
+      toggleSidebar(ID);
     }
-  }, [courseId, courseOutlineShouldUpdate]);
+  }, [initialSidebar, unitId]);
 
   // Collapse sidebar if screen resized to a width that displays the sidebar automatically
   useLayoutEffect(() => {
@@ -130,21 +141,11 @@ export const useCourseOutlineSidebar = () => {
   }, [isOpen]);
 
   return {
-    courseId,
     unitId,
     currentSidebar,
     shouldDisplayFullScreen,
-    isEnabledCompletionTracking,
     isOpen,
     setIsOpen,
     handleToggleCollapse,
-    isActiveEntranceExam,
-    courseOutlineStatus,
-    activeSequenceId,
-    sections,
-    sequences,
-    units,
-    handleUnitClick,
-    sequenceStatus,
   };
 };
diff --git a/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/README.md b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/README.md
new file mode 100644
index 0000000000..28fcb7a2c2
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/README.md
@@ -0,0 +1,48 @@
+# Course Outline Sidebar Section Completion Icon Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_outline_sidebar_section_completion_icon.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the completion icon for sections in the course outline sidebar.
+
+### Props:
+* `completionStat: { completed, total }`: Object containing the completion status of the section
+* `enabled`: Boolean indicating if completion tracking is enabled for the section
+
+## Example
+
+### Replaced with a custom component
+![custom progress display for section](./course-outline-section-completion-icon.png)
+
+The following `env.config.jsx` will replace the course outline sidebar section completion icon with a custom component.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Bubble } from '@openedx/paragon';
+
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_outline_sidebar_section_completion_icon.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_icon',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({completionStat, enabled}) => (
+              <Bubble>
+                {completionStat.completed}/{completionStat.total}
+              </Bubble>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/course-outline-section-completion-icon.png b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/course-outline-section-completion-icon.png
new file mode 100644
index 0000000000..5e32bd495c
Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/course-outline-section-completion-icon.png differ
diff --git a/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/index.tsx b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/index.tsx
new file mode 100644
index 0000000000..b1d9419657
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarSectionCompletionIconSlot/index.tsx
@@ -0,0 +1,20 @@
+import {
+  CompletionIcon,
+  type CompletionIconProps,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import React from 'react';
+
+interface Props extends CompletionIconProps {
+  active: boolean;
+}
+
+export const CourseOverviewSectionCompletionIconSlot = ({ completionStat, enabled, active }: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_outline_sidebar_section_completion_icon.v1"
+    pluginProps={{ completionStat, enabled, active }}
+  >
+    <CompletionIcon completionStat={completionStat} enabled={enabled} />
+  </PluginSlot>
+);
diff --git a/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/README.md b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/README.md
new file mode 100644
index 0000000000..556d6d0d1e
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/README.md
@@ -0,0 +1,48 @@
+# Course Outline Sidebar Sequence Completion Icon Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_outline_sidebar_sequence_completion_icon.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the completion icon for sequences in the course outline sidebar.
+
+### Props:
+* `completionStat: { completed, total }`: Object containing the completion status of the sequence
+* `enabled`: Boolean indicating if completion tracking is enabled for the sequence
+
+## Example
+
+### Replaced with a custom component
+![custom progress display for sequence](./course-outline-sequence-completion-icon.png)
+
+The following `env.config.jsx` will replace the course outline sidebar sequence completion icon with a custom component.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Bubble } from '@openedx/paragon';
+
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_outline_sidebar_sequence_completion_icon.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_icon',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({completionStat, enabled}) => (
+              <Bubble>
+                {completionStat.completed}/{completionStat.total}
+              </Bubble>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/course-outline-sequence-completion-icon.png b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/course-outline-sequence-completion-icon.png
new file mode 100644
index 0000000000..3363ab1de1
Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/course-outline-sequence-completion-icon.png differ
diff --git a/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/index.tsx b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/index.tsx
new file mode 100644
index 0000000000..0740d74f1e
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarSequenceCompletionIconSlot/index.tsx
@@ -0,0 +1,19 @@
+import {
+  CompletionIcon,
+  type CompletionIconProps,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import React from 'react';
+
+interface Props extends CompletionIconProps {
+  active: boolean;
+}
+export const CourseOverviewSequenceCompletionIconSlot = ({ completionStat, enabled, active }: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_outline_sidebar_sequence_completion_icon.v1"
+    pluginProps={{ completionStat, enabled, active }}
+  >
+    <CompletionIcon completionStat={completionStat} enabled={enabled} />
+  </PluginSlot>
+);
diff --git a/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/README.md b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/README.md
new file mode 100644
index 0000000000..45ff57d67e
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/README.md
@@ -0,0 +1,42 @@
+# Course Outline Sidebar Unit Icon Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_outline_sidebar_unit_icon.v1`
+
+### Props:
+* `type`: The type of the unit.
+* `isCompleted`: Whether the unit is completed.
+
+## Description
+
+This slot is used to replace/modify/hide the unit icon in the course outline sidebar.
+
+## Example
+
+### Replaced Unit Icon
+![Replaced Unit Icon](./course-outline-unit-icon-replaced.png)
+
+The following `env.config.jsx` will replace the unit icon with a custom icon.
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_outline_sidebar_unit_icon.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_unit_icon',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({isCompleted}) => (isCompleted ? '🗹' : '☐'),
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/course-outline-unit-icon-replaced.png b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/course-outline-unit-icon-replaced.png
new file mode 100644
index 0000000000..afcf03aea2
Binary files /dev/null and b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/course-outline-unit-icon-replaced.png differ
diff --git a/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/index.tsx b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/index.tsx
new file mode 100644
index 0000000000..4ea731b875
--- /dev/null
+++ b/src/plugin-slots/CourseOutlineSidebarUnitIconSlot/index.tsx
@@ -0,0 +1,28 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import UnitIcon, {
+  UNIT_ICON_TYPES,
+  type UnitIconType,
+  type UnitIconProps,
+} from '@src/courseware/course/sidebar/sidebars/course-outline/components/UnitIcon';
+import React from 'react';
+
+export interface Props extends UnitIconProps {
+  active: boolean;
+}
+export {
+  UNIT_ICON_TYPES,
+  type UnitIconType,
+};
+
+export const CourseOutlineSidebarUnitIconSlot = ({
+  type, isCompleted, active, ...props
+}: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_outline_sidebar_unit_icon.v1"
+    pluginProps={{
+      type, isCompleted, active, ...props,
+    }}
+  >
+    <UnitIcon {...props} type={type} isCompleted={isCompleted} />
+  </PluginSlot>
+);
diff --git a/src/plugin-slots/CourseTabsNavigationSlot/README.md b/src/plugin-slots/CourseTabsNavigationSlot/README.md
new file mode 100644
index 0000000000..8cc241dd36
--- /dev/null
+++ b/src/plugin-slots/CourseTabsNavigationSlot/README.md
@@ -0,0 +1,38 @@
+# Course Tab Navigation Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_tab_navigation.v1`
+
+### Props:
+NONE
+
+## Description
+
+This slot is used to replace/modify/hide the entire course tab navigation.
+
+## Example
+
+### Added a drop shadow to Course Tabs bar
+![Added a drop shadow to Course Tabs bar](./course-tabs-navigation-shadow.png)
+
+The following `env.config.jsx` will add a new course tab call "Custom Tab".
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.learning.course_tab_navigation.v1": {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: ({component}) => (<div class="shadow">{component}</div>)
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseTabsNavigationSlot/course-tabs-navigation-shadow.png b/src/plugin-slots/CourseTabsNavigationSlot/course-tabs-navigation-shadow.png
new file mode 100644
index 0000000000..eb3c6617be
Binary files /dev/null and b/src/plugin-slots/CourseTabsNavigationSlot/course-tabs-navigation-shadow.png differ
diff --git a/src/plugin-slots/CourseTabsNavigationSlot/index.tsx b/src/plugin-slots/CourseTabsNavigationSlot/index.tsx
new file mode 100644
index 0000000000..eda1e470b2
--- /dev/null
+++ b/src/plugin-slots/CourseTabsNavigationSlot/index.tsx
@@ -0,0 +1,8 @@
+import { CourseTabsNavigation, type CourseTabsNavigationProps } from '@src/course-tabs';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+export const CourseTabsNavigationSlot = ({ tabs, activeTabSlug }: CourseTabsNavigationProps) => (
+  <PluginSlot id="org.openedx.frontend.learning.course_tabs_navigation.v1">
+    <CourseTabsNavigation tabs={tabs} activeTabSlug={activeTabSlug} />
+  </PluginSlot>
+);
diff --git a/src/tab-page/LoadedTabPage.jsx b/src/tab-page/LoadedTabPage.tsx
similarity index 73%
rename from src/tab-page/LoadedTabPage.jsx
rename to src/tab-page/LoadedTabPage.tsx
index 67a1b86595..2ff80fc84b 100644
--- a/src/tab-page/LoadedTabPage.jsx
+++ b/src/tab-page/LoadedTabPage.tsx
@@ -1,27 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useToggle } from '@openedx/paragon';
 
-import { CourseTabsNavigation } from '../course-tabs';
-import { useModel } from '../generic/model-store';
-import { AlertList } from '../generic/user-messages';
-import StreakModal from '../shared/streak-celebration';
-import InstructorToolbar from '../instructor-toolbar';
-import useEnrollmentAlert from '../alerts/enrollment-alert';
-import useLogistrationAlert from '../alerts/logistration-alert';
+import { CourseTabsNavigationSlot } from '@src/plugin-slots/CourseTabsNavigationSlot';
+
+import { useModel } from '@src/generic/model-store';
+import { AlertList } from '@src/generic/user-messages';
+import useEnrollmentAlert from '@src/alerts/enrollment-alert';
+import useLogistrationAlert from '@src/alerts/logistration-alert';
+import StreakModal from '@src/shared/streak-celebration';
+import InstructorToolbar from '@src/instructor-toolbar';
 
 import ProductTours from '../product-tours/ProductTours';
 
+interface LoadedTabPageProps {
+  activeTabSlug: string;
+  children: React.ReactNode;
+  courseId: string;
+  metadataModel: string;
+  unitId: string | null;
+}
+
 const LoadedTabPage = ({
   activeTabSlug,
-  children,
+  children = null,
   courseId,
-  metadataModel,
-  unitId,
-}) => {
+  metadataModel = 'courseHomeMeta',
+  unitId = null,
+}: LoadedTabPageProps) => {
   const {
     celebrations,
     org,
@@ -80,7 +88,7 @@ const LoadedTabPage = ({
             ...logistrationAlert,
           }}
         />
-        <CourseTabsNavigation tabs={tabs} className="mb-3" activeTabSlug={activeTabSlug} />
+        <CourseTabsNavigationSlot tabs={tabs} activeTabSlug={activeTabSlug} />
         <div id="main-content" className="container-xl">
           {children}
         </div>
@@ -89,18 +97,4 @@ const LoadedTabPage = ({
   );
 };
 
-LoadedTabPage.propTypes = {
-  activeTabSlug: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  courseId: PropTypes.string.isRequired,
-  metadataModel: PropTypes.string,
-  unitId: PropTypes.string,
-};
-
-LoadedTabPage.defaultProps = {
-  children: null,
-  metadataModel: 'courseHomeMeta',
-  unitId: null,
-};
-
 export default LoadedTabPage;