diff --git a/src/course-about/CourseAboutPage.tsx b/src/course-about/CourseAboutPage.tsx
index c4c010e..2a0d0c7 100644
--- a/src/course-about/CourseAboutPage.tsx
+++ b/src/course-about/CourseAboutPage.tsx
@@ -10,8 +10,8 @@ import { Loading } from '@src/generic';
import CourseAboutIntroSlot from '@src/plugin-slots/CourseAboutIntroSlot';
import CourseAboutCourseMediaSlot from '@src/plugin-slots/CourseAboutCourseMediaSlot';
import CourseAboutOverviewSlot from '@src/plugin-slots/CourseAboutOverviewSlot';
+import CourseAboutSidebarSlot from '@src/plugin-slots/CourseAboutSidebarSlot';
import { useCourseAboutData } from './data/hooks';
-import CourseSidebar from './course-sidebar/CourseSidebar';
import messages from './messages';
import { GRID_LAYOUT } from './layout';
@@ -57,9 +57,7 @@ const CourseAboutPage = () => {
overviewData={courseAboutData.overview}
courseId={courseId}
/>
-
+
) : (
@@ -77,9 +75,7 @@ const CourseAboutPage = () => {
-
+
)}
diff --git a/src/plugin-slots/CourseAboutSidebarSlot/README.md b/src/plugin-slots/CourseAboutSidebarSlot/README.md
new file mode 100644
index 0000000..98ed5e3
--- /dev/null
+++ b/src/plugin-slots/CourseAboutSidebarSlot/README.md
@@ -0,0 +1,133 @@
+# Course about page sidebar slot
+
+### Slot ID: `org.openedx.frontend.catalog.course_about_page.sidebar`
+
+## Description
+
+This slot is used to replace/modify/hide the entire Course about page sidebar.
+
+### Plugin Props:
+
+* `courseAboutData` - Object. The course about page data object containing course information such as id, name, start/end dates, enrollment details, media, pricing, prerequisites, and other course metadata.
+
+## Examples
+
+### Default content
+
+
+
+### Replaced with custom component
+
+
+
+The following `env.config.tsx` will replace the Course about page sidebar entirely (in this case with a centered `h1` tag)
+
+```tsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ 'org.openedx.frontend.catalog.course_about_page.sidebar': {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_course_about_page_sidebar_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
🦶
+ ),
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
+
+### Custom component with plugin props
+
+
+
+The following `env.config.tsx` example demonstrates how to replace the Course about page sidebar slot with a custom component that uses the plugin props (`courseAboutData`). In this case, it creates a custom sidebar component that displays key course information in a simplified format with badges and highlights.
+
+```tsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Card, Badge, Stack, Chip } from '@openedx/paragon';
+
+const config = {
+ pluginSlots: {
+ 'org.openedx.frontend.catalog.course_about_page.sidebar': {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_course_about_page_sidebar_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: ({ courseAboutData }) => {
+ if (!courseAboutData) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
{courseAboutData.name}
+
+ {courseAboutData.displayOrgWithDefault}/{courseAboutData.displayNumberWithDefault}
+
+
+
+ {courseAboutData.effort && (
+
+ Effort: {courseAboutData.effort}
+
+ )}
+
+ {courseAboutData.pacing && (
+
+ Pacing: {courseAboutData.pacing}
+
+ )}
+
+ {courseAboutData.language && (
+
+ Language: {courseAboutData.language}
+
+ )}
+
+ {courseAboutData.start && (
+
+ Start Date: {courseAboutData.startDisplay || courseAboutData.start}
+
+ )}
+
+ {courseAboutData.coursePrice && (
+
+ Price: {courseAboutData.coursePrice}
+
+ )}
+
+ {courseAboutData.canEnroll && (
+ Enrollment Available
+ )}
+
+
+
+ );
+ },
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png
new file mode 100644
index 0000000..44bd975
Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom.png differ
diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png
new file mode 100644
index 0000000..a905a2d
Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_custom_simplified_sidebar.png differ
diff --git a/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png
new file mode 100644
index 0000000..65f9980
Binary files /dev/null and b/src/plugin-slots/CourseAboutSidebarSlot/images/screenshot_default.png differ
diff --git a/src/plugin-slots/CourseAboutSidebarSlot/index.tsx b/src/plugin-slots/CourseAboutSidebarSlot/index.tsx
new file mode 100644
index 0000000..042d718
--- /dev/null
+++ b/src/plugin-slots/CourseAboutSidebarSlot/index.tsx
@@ -0,0 +1,20 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import CourseSidebar from '@src/course-about/course-sidebar/CourseSidebar';
+import type { CourseAboutData } from '@src/course-about/types';
+
+const CourseAboutSidebarSlot = ({ courseAboutData }: { courseAboutData: CourseAboutData }) => (
+
+);
+
+export default CourseAboutSidebarSlot;
diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md
index 3215b6c..8e7263f 100644
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -16,3 +16,4 @@
* [`org.openedx.frontend.catalog.course_about_page.intro_video_modal`](./CourseAboutIntroVideoSlots/CourseAboutIntroVideoModalSlot/)
* [`org.openedx.frontend.catalog.course_about_page.course_image`](./CourseAboutCourseImageSlot/)
* [`org.openedx.frontend.catalog.course_about_page.course_media`](./CourseAboutCourseMediaSlot/)
+* [`org.openedx.frontend.catalog.course_about_page.sidebar`](./CourseAboutSidebarSlot/)