From 3c22e4bbe1c47a838b69722f85ea6035b5710eb4 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Fri, 9 Jan 2026 22:44:48 +0530
Subject: [PATCH] feat: Add sidebar and library dropdown filter [FC-0114]
 (#2778)

* Add flow in course outline sidebar. Allows author to add new section/subsection/unit or any container from existing libraries via sidebar.
* Adds library dropdown filter and collections dropdown filter in add sidebar. Allows authors to filter containers by selected libraries and collections.
---
 .../course-apps/proctoring/Settings.test.jsx  |   5 +-
 src/CourseAuthoringContext.tsx                | 119 ++++++++-
 src/CourseAuthoringPage.tsx                   |   3 +
 src/authz/data/apiHooks.ts                    |   5 +-
 src/course-outline/CourseOutline.test.tsx     |   9 +-
 src/course-outline/CourseOutline.tsx          |  28 +--
 src/course-outline/data/api.ts                |  43 +++-
 src/course-outline/data/apiHooks.ts           |  16 +-
 src/course-outline/data/thunk.ts              |  38 +--
 .../drag-helper/CourseItemOverlay.tsx         |   4 +-
 src/course-outline/drag-helper/utils.test.ts  |   4 +-
 src/course-outline/drag-helper/utils.ts       |   2 +-
 .../header-navigations/HeaderActions.test.tsx |   5 +-
 .../header-navigations/HeaderActions.tsx      |  28 +--
 src/course-outline/hooks.jsx                  |  76 +-----
 .../outline-sidebar/AddSidebar.test.tsx       | 166 +++++++++++++
 .../outline-sidebar/AddSidebar.tsx            | 235 ++++++++++++++++++
 .../outline-sidebar/OutlineSidebar.test.tsx   |   1 +
 .../outline-sidebar/OutlineSidebarContext.tsx |  11 +-
 .../outline-sidebar/messages.ts               |  15 ++
 .../section-card/SectionCard.test.tsx         |  10 +-
 .../section-card/SectionCard.tsx              |  29 +--
 .../subsection-card/SubsectionCard.test.tsx   |  20 +-
 .../subsection-card/SubsectionCard.tsx        |  27 +-
 .../unit-card/UnitCard.test.tsx               |   8 +-
 src/course-outline/unit-card/UnitCard.tsx     |   9 +-
 src/course-outline/{utils.jsx => utils.tsx}   |  58 ++---
 .../add-component/AddComponent.test.tsx       |   4 +-
 .../add-component/AddComponent.tsx            |   4 +-
 src/course-unit/data/api.ts                   |  36 ---
 src/course-unit/data/thunk.js                 |   2 +-
 src/generic/block-type-utils/constants.ts     |  10 +
 src/generic/block-type-utils/index.scss       |  36 +++
 src/generic/block-type-utils/index.tsx        |   5 +
 src/generic/sidebar/Sidebar.tsx               |   3 +-
 src/generic/sidebar/SidebarContent.tsx        |   2 +-
 src/generic/sidebar/SidebarSection.tsx        |   4 +-
 src/generic/sidebar/index.scss                |  11 +-
 src/hooks.ts                                  |  23 ++
 src/index.jsx                                 |   6 +-
 src/library-authoring/EmptyStates.tsx         |   8 +-
 .../LibraryAuthoringPage.tsx                  | 119 +++++----
 src/library-authoring/LibraryContent.tsx      |  10 +-
 src/library-authoring/LibraryLayout.tsx       |   4 +-
 .../__mocks__/library-search.json             |  90 ++++++-
 .../add-content/AddContent.tsx                |  13 +-
 .../add-content/PickLibraryContentModal.tsx   |  19 +-
 .../collections/CollectionDetails.tsx         |  23 +-
 .../collections/CollectionInfo.tsx            |   8 +-
 .../collections/CollectionInfoHeader.tsx      |  13 +-
 .../collections/LibraryCollectionPage.tsx     |  18 +-
 .../common/context/ComponentPickerContext.tsx |  28 ++-
 .../common/context/LibraryContext.tsx         |  35 +--
 .../common/context/MultiLibraryContext.tsx    |  54 ++++
 .../common/context/PublishedFilterContext.tsx |  31 +++
 .../common/context/SidebarContext.tsx         |   4 +-
 .../ComponentAdvancedAssets.tsx               |   4 +-
 .../ComponentAdvancedInfo.test.tsx            |  21 +-
 .../component-info/ComponentAdvancedInfo.tsx  |   6 +-
 .../component-info/ComponentInfo.tsx          |   8 +-
 .../component-info/ComponentInfoHeader.tsx    |   6 +-
 .../component-info/ComponentManagement.tsx    |   4 +-
 .../component-info/ComponentPreview.tsx       |   6 +-
 .../component-picker/ComponentPicker.test.tsx |  34 +--
 .../component-picker/ComponentPicker.tsx      | 120 ++++++---
 .../component-picker/SelectLibrary.test.tsx   |  14 +-
 .../component-picker/SelectLibrary.tsx        |   2 +-
 .../component-picker/index.ts                 |   2 +-
 .../components/CollectionCard.test.tsx        |  12 +-
 .../components/CollectionCard.tsx             |  10 +-
 .../components/ComponentCard.tsx              |   4 +-
 .../components/ComponentDeleter.tsx           |   4 +-
 .../components/ComponentMenu.tsx              |   6 +-
 .../components/ComponentRemover.tsx           |   6 +-
 .../containers/ContainerCard.test.tsx         |  12 +-
 .../containers/ContainerCard.tsx              |   9 +-
 .../containers/ContainerDeleter.tsx           |   4 +-
 .../containers/ContainerEditableTitle.tsx     |   6 +-
 .../containers/ContainerInfo.test.tsx         |  30 +--
 .../containers/ContainerInfo.tsx              |   6 +-
 .../containers/ContainerOrganize.tsx          |   4 +-
 .../containers/ContainerRemover.tsx           |   6 +-
 .../containers/FooterActions.tsx              |   6 +-
 .../containers/HeaderActions.tsx              |   4 +-
 src/library-authoring/data/api.mocks.ts       |   4 +
 src/library-authoring/data/api.ts             |  38 ++-
 src/library-authoring/data/apiHooks.ts        |  52 ++--
 .../generic/filter-by-published/index.tsx     |   4 +-
 .../manage-collections/ManageCollections.tsx  |  12 +-
 .../PublishDraftButton.tsx                    |   4 +-
 src/library-authoring/index.scss              |   6 +
 src/library-authoring/index.tsx               |   2 +-
 .../CollectionDropdownFilter.test.tsx         | 202 +++++++++++++++
 .../CollectionDropdownFilter.tsx              | 147 +++++++++++
 .../LibraryDropdownFilter.test.tsx            | 128 ++++++++++
 .../library-filters/LibraryDropdownFilter.tsx | 126 ++++++++++
 .../library-filters/MainFilters.tsx           |  33 +++
 .../library-filters/SidebarFilters.tsx        |  46 ++++
 .../library-filters/index.tsx                 |   3 +
 .../library-filters/messages.ts               |  56 +++++
 .../LibraryContainerChildren.tsx              |   8 +-
 .../units/LibraryUnitBlocks.tsx               |  13 +-
 .../discussions/DiscussionsSettings.test.jsx  |  12 +-
 src/search-manager/ClearFiltersButton.tsx     |  13 +-
 src/search-manager/SearchFilterWidget.tsx     |   3 +-
 .../courses-imported-filter-modal/context.tsx |   2 +-
 src/types.ts                                  |  10 +
 107 files changed, 2218 insertions(+), 659 deletions(-)
 create mode 100644 src/course-outline/outline-sidebar/AddSidebar.test.tsx
 create mode 100644 src/course-outline/outline-sidebar/AddSidebar.tsx
 rename src/course-outline/{utils.jsx => utils.tsx} (79%)
 create mode 100644 src/library-authoring/common/context/MultiLibraryContext.tsx
 create mode 100644 src/library-authoring/common/context/PublishedFilterContext.tsx
 create mode 100644 src/library-authoring/library-filters/CollectionDropdownFilter.test.tsx
 create mode 100644 src/library-authoring/library-filters/CollectionDropdownFilter.tsx
 create mode 100644 src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx
 create mode 100644 src/library-authoring/library-filters/LibraryDropdownFilter.tsx
 create mode 100644 src/library-authoring/library-filters/MainFilters.tsx
 create mode 100644 src/library-authoring/library-filters/SidebarFilters.tsx
 create mode 100644 src/library-authoring/library-filters/index.tsx
 create mode 100644 src/library-authoring/library-filters/messages.ts
 create mode 100644 src/types.ts

diff --git a/plugins/course-apps/proctoring/Settings.test.jsx b/plugins/course-apps/proctoring/Settings.test.jsx
index 39d85ac0a..30e837a02 100644
--- a/plugins/course-apps/proctoring/Settings.test.jsx
+++ b/plugins/course-apps/proctoring/Settings.test.jsx
@@ -460,8 +460,9 @@ describe('ProctoredExamSettings', () => {
         screen.getByDisplayValue('mockproc');
       });
       // (1) for studio settings
-      // (2) for course details
-      expect(axiosMock.history.get.length).toBe(2);
+      // (2) waffle flags
+      // (3) for course details
+      expect(axiosMock.history.get.length).toBe(3);
       expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
     });
 
diff --git a/src/CourseAuthoringContext.tsx b/src/CourseAuthoringContext.tsx
index d49774950..e8161e582 100644
--- a/src/CourseAuthoringContext.tsx
+++ b/src/CourseAuthoringContext.tsx
@@ -1,15 +1,32 @@
+import { getConfig } from '@edx/frontend-platform';
 import { createContext, useContext, useMemo } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
+import { getCourseItem } from '@src/course-outline/data/api';
+import { useDispatch, useSelector } from 'react-redux';
+import { addSection, addSubsection, updateSavingStatus } from '@src/course-outline/data/slice';
+import { addNewSectionQuery, addNewSubsectionQuery, addNewUnitQuery } from '@src/course-outline/data/thunk';
+import { useNavigate } from 'react-router';
+import { getOutlineIndexData } from '@src/course-outline/data/selectors';
+import { RequestStatus, RequestStatusType } from './data/constants';
+import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
 import { CourseDetailsData } from './data/api';
-import { useCourseDetails } from './data/apiHooks';
-import { RequestStatusType } from './data/constants';
 
 export type CourseAuthoringContextData = {
   /** The ID of the current course */
   courseId: string;
+  courseUsageKey: string;
   courseDetails?: CourseDetailsData;
   courseDetailStatus: RequestStatusType;
   canChangeProviders: boolean;
+  handleAddSectionFromLibrary: ReturnType<typeof useCreateCourseBlock>;
+  handleAddSubsectionFromLibrary: ReturnType<typeof useCreateCourseBlock>;
+  handleAddUnitFromLibrary: ReturnType<typeof useCreateCourseBlock>;
+  handleNewSectionSubmit: () => void;
+  handleNewSubsectionSubmit: (sectionId: string) => void;
+  handleNewUnitSubmit: (subsectionId: string) => void;
+  openUnitPage: (locator: string) => void;
+  getUnitUrl: (locator: string) => string;
 };
 
 /**
@@ -30,23 +47,103 @@ export const CourseAuthoringProvider = ({
   children,
   courseId,
 }: CourseAuthoringProviderProps) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const waffleFlags = useWaffleFlags();
   const { data: courseDetails, status: courseDetailStatus } = useCourseDetails(courseId);
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
+  const { courseStructure } = useSelector(getOutlineIndexData);
+  const { id: courseUsageKey } = courseStructure || {};
 
-  const context = useMemo<CourseAuthoringContextData>(() => {
-    const contextValue = {
-      courseId,
-      courseDetails,
-      courseDetailStatus,
-      canChangeProviders,
-    };
+  const getUnitUrl = (locator: string) => {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      // instanbul ignore next
+      return `/course/${courseId}/container/${locator}`;
+    }
+    return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
+  };
 
-    return contextValue;
-  }, [
+  /**
+   * Open the unit page for a given locator.
+   */
+  const openUnitPage = (locator: string) => {
+    const url = getUnitUrl(locator);
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      // instanbul ignore next
+      navigate(url);
+    } else {
+      window.location.assign(url);
+    }
+  };
+
+  const handleNewSectionSubmit = () => {
+    dispatch(addNewSectionQuery(courseUsageKey));
+  };
+
+  const handleNewSubsectionSubmit = (sectionId: string) => {
+    dispatch(addNewSubsectionQuery(sectionId));
+  };
+
+  const handleNewUnitSubmit = (subsectionId: string) => {
+    dispatch(addNewUnitQuery(subsectionId, openUnitPage));
+  };
+
+  const handleAddSectionFromLibrary = useCreateCourseBlock(async (locator) => {
+    try {
+      const data = await getCourseItem(locator);
+      // instanbul ignore next
+      // Page should scroll to newly added section.
+      data.shouldScroll = true;
+      dispatch(addSection(data));
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  });
+
+  const handleAddSubsectionFromLibrary = useCreateCourseBlock(async (locator, parentLocator) => {
+    try {
+      const data = await getCourseItem(locator);
+      data.shouldScroll = true;
+      // Page should scroll to newly added subsection.
+      dispatch(addSubsection({ parentLocator, data }));
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  });
+
+  /**
+  * import a unit block from library and redirect user to this unit page.
+  */
+  const handleAddUnitFromLibrary = useCreateCourseBlock(openUnitPage);
+
+  const context = useMemo<CourseAuthoringContextData>(() => ({
     courseId,
+    courseUsageKey,
     courseDetails,
     courseDetailStatus,
     canChangeProviders,
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    handleAddSectionFromLibrary,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+    getUnitUrl,
+    openUnitPage,
+  }), [
+    courseId,
+    courseUsageKey,
+    courseDetails,
+    courseDetailStatus,
+    canChangeProviders,
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    handleAddSectionFromLibrary,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+    getUnitUrl,
+    openUnitPage,
   ]);
 
   return (
diff --git a/src/CourseAuthoringPage.tsx b/src/CourseAuthoringPage.tsx
index c8668ad90..e8b328d48 100644
--- a/src/CourseAuthoringPage.tsx
+++ b/src/CourseAuthoringPage.tsx
@@ -57,6 +57,9 @@ const CourseAuthoringPage = ({ children }: Props) => {
             org={courseOrg}
             title={courseTitle}
             contextId={courseId}
+            containerProps={{
+              size: 'fluid',
+            }}
           />
         )
         )}
diff --git a/src/authz/data/apiHooks.ts b/src/authz/data/apiHooks.ts
index b91d582f5..5b4a0da19 100644
--- a/src/authz/data/apiHooks.ts
+++ b/src/authz/data/apiHooks.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 import { PermissionValidationAnswer, PermissionValidationQuery } from '@src/authz/types';
 import { validateUserPermissions } from './api';
 
@@ -29,8 +29,9 @@ const adminConsoleQueryKeys = {
  */
 export const useUserPermissions = (
   permissions: PermissionValidationQuery,
+  enabled: boolean = true,
 ) => useQuery<PermissionValidationAnswer, Error>({
   queryKey: adminConsoleQueryKeys.permissions(permissions),
-  queryFn: () => validateUserPermissions(permissions),
+  queryFn: enabled ? () => validateUserPermissions(permissions) : skipToken,
   retry: false,
 });
diff --git a/src/course-outline/CourseOutline.test.tsx b/src/course-outline/CourseOutline.test.tsx
index d821df9cd..44379cbe9 100644
--- a/src/course-outline/CourseOutline.test.tsx
+++ b/src/course-outline/CourseOutline.test.tsx
@@ -96,9 +96,9 @@ jest.mock('./data/api', () => ({
   getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
-// Mock ComponentPicker to call onComponentSelected on click
+// Mock LibraryAndComponentPicker to call onComponentSelected on click
 jest.mock('@src/library-authoring/component-picker', () => ({
-  ComponentPicker: (props) => {
+  LibraryAndComponentPicker: (props) => {
     const onClick = () => {
       // eslint-disable-next-line react/prop-types
       props.onComponentSelected({
@@ -438,8 +438,9 @@ describe('<CourseOutline />', () => {
     const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
     const [subsection] = section.childInfo.children;
     expect(axiosMock.history.post[2].data).toBe(JSON.stringify({
-      parent_locator: subsection.id,
+      type: COURSE_BLOCK_NAMES.vertical.id,
       category: COURSE_BLOCK_NAMES.vertical.id,
+      parent_locator: subsection.id,
       display_name: COURSE_BLOCK_NAMES.vertical.name,
     }));
   });
@@ -2495,7 +2496,7 @@ describe('<CourseOutline />', () => {
     const btn = await screen.findByRole('button', { name: 'Collapse all' });
     expect(btn).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'View live' })).toBeInTheDocument();
-    expect(await screen.findByRole('button', { name: 'Add' })).toBeInTheDocument();
+    expect((await screen.findAllByRole('button', { name: 'Add' })).length).toEqual(2);
     expect(await screen.findByRole('button', { name: 'More actions' })).toBeInTheDocument();
     const user = userEvent.setup();
     await user.click(btn);
diff --git a/src/course-outline/CourseOutline.tsx b/src/course-outline/CourseOutline.tsx
index 813ab24f8..8e8e4e21e 100644
--- a/src/course-outline/CourseOutline.tsx
+++ b/src/course-outline/CourseOutline.tsx
@@ -34,7 +34,7 @@ import AlertMessage from '@src/generic/alert-message';
 import getPageHeadTitle from '@src/generic/utils';
 import CourseOutlineHeaderActionsSlot from '@src/plugin-slots/CourseOutlineHeaderActionsSlot';
 import { ContainerType } from '@src/generic/key-utils';
-import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
+import { LibraryAndComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { ContentType } from '@src/library-authoring/routes';
 import { NOTIFICATION_MESSAGES } from '@src/constants';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
@@ -73,7 +73,13 @@ import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 const CourseOutline = () => {
   const intl = useIntl();
   const location = useLocation();
-  const { courseId } = useCourseAuthoringContext();
+  const {
+    courseId,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+    handleAddSectionFromLibrary,
+    handleNewSectionSubmit,
+  } = useCourseAuthoringContext();
 
   const {
     courseUsageKey,
@@ -123,13 +129,6 @@ const CourseOutline = () => {
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
-    handleNewSectionSubmit,
-    handleNewSubsectionSubmit,
-    handleNewUnitSubmit,
-    handleAddUnitFromLibrary,
-    handleAddSubsectionFromLibrary,
-    handleAddSectionFromLibrary,
-    getUnitUrl,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,
@@ -269,7 +268,7 @@ const CourseOutline = () => {
 
   if (isLoadingDenied) {
     return (
-      <Container size="xl" className="px-4 mt-4">
+      <Container fluid className="px-3 mt-4">
         <PageAlerts
           courseId={courseId}
           notificationDismissUrl={notificationDismissUrl}
@@ -292,7 +291,7 @@ const CourseOutline = () => {
       <Helmet>
         <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
       </Helmet>
-      <Container size="xl" className="px-4">
+      <Container fluid className="px-3">
         <section className="course-outline-container mb-4 mt-5">
           <PageAlerts
             courseId={courseId}
@@ -413,9 +412,7 @@ const CourseOutline = () => {
                                     onEditSectionSubmit={handleEditSubmit}
                                     onDuplicateSubmit={handleDuplicateSectionSubmit}
                                     isSectionsExpanded={isSectionsExpanded}
-                                    onNewSubsectionSubmit={handleNewSubsectionSubmit}
                                     onOrderChange={updateSectionOrderByIndex}
-                                    onAddSubsectionFromLibrary={handleAddSubsectionFromLibrary.mutateAsync}
                                     resetScrollState={resetScrollState}
                                   >
                                     <SortableContext
@@ -445,8 +442,6 @@ const CourseOutline = () => {
                                           onEditSubmit={handleEditSubmit}
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
-                                          onNewUnitSubmit={handleNewUnitSubmit}
-                                          onAddUnitFromLibrary={handleAddUnitFromLibrary.mutateAsync}
                                           onOrderChange={updateSubsectionOrderByIndex}
                                           onPasteClick={handlePasteClipboardClick}
                                           resetScrollState={resetScrollState}
@@ -480,7 +475,6 @@ const CourseOutline = () => {
                                                 onOpenUnlinkModal={openUnlinkModal}
                                                 onEditSubmit={handleEditSubmit}
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
-                                                getTitleLink={getUnitUrl}
                                                 onOrderChange={updateUnitOrderByIndex}
                                                 discussionsSettings={discussionsSettings}
                                               />
@@ -571,7 +565,7 @@ const CourseOutline = () => {
           isOverflowVisible={false}
           size="xl"
         >
-          <ComponentPicker
+          <LibraryAndComponentPicker
             showOnlyPublished
             extraFilter={['block_type = "section"']}
             componentPickerMode="single"
diff --git a/src/course-outline/data/api.ts b/src/course-outline/data/api.ts
index a8464b1fa..f07d64cb5 100644
--- a/src/course-outline/data/api.ts
+++ b/src/course-outline/data/api.ts
@@ -382,19 +382,40 @@ export async function duplicateCourseItem(itemId: string, parentId: string): Pro
 }
 
 /**
- * Add new course item like section, subsection or unit.
- * @param {string} parentLocator
- * @param {string} category
- * @param {string} displayName
- * @returns {Promise<Object>}
+ * Creates a new course XBlock. Can be used to create any type of block
+ * and also import a content from library.
  */
-export async function addNewCourseItem(parentLocator: string, category: string, displayName: string): Promise<object> {
+export async function createCourseXblock({
+  type,
+  category,
+  parentLocator,
+  displayName,
+  boilerplate,
+  stagedContent,
+  libraryContentKey,
+}: {
+  type: string,
+  /** The category of the XBlock. Defaults to the type if not provided. */
+  category?: string,
+  parentLocator: string,
+  displayName?: string,
+  boilerplate?: string,
+  stagedContent?: string,
+  /** component key from library if being imported. */
+  libraryContentKey?: string,
+}) {
+  const body = {
+    type,
+    boilerplate,
+    category: category || type,
+    parent_locator: parentLocator,
+    display_name: displayName,
+    staged_content: stagedContent,
+    library_content_key: libraryContentKey,
+  };
+
   const { data } = await getAuthenticatedHttpClient()
-    .post(getXBlockBaseApiUrl(), {
-      parent_locator: parentLocator,
-      category,
-      display_name: displayName,
-    });
+    .post(getXBlockBaseApiUrl(), body);
 
   return data;
 }
diff --git a/src/course-outline/data/apiHooks.ts b/src/course-outline/data/apiHooks.ts
index 67a20acde..d9774a336 100644
--- a/src/course-outline/data/apiHooks.ts
+++ b/src/course-outline/data/apiHooks.ts
@@ -1,11 +1,5 @@
-import {
-  skipToken, useMutation, useQuery,
-} from '@tanstack/react-query';
-import { createCourseXblock } from '@src/course-unit/data/api';
-import {
-  getCourseDetails,
-  getCourseItem,
-} from './api';
+import { skipToken, useMutation, useQuery } from '@tanstack/react-query';
+import { createCourseXblock, getCourseDetails, getCourseItem } from './api';
 
 export const courseOutlineQueryKeys = {
   all: ['courseOutline'],
@@ -29,11 +23,11 @@ export const courseOutlineQueryKeys = {
  * Can also be used to import block from library by passing `libraryContentKey` in request body
  */
 export const useCreateCourseBlock = (
-  callback?: ((locator?: string, parentLocator?: string) => void),
+  callback?: ((locator: string, parentLocator: string) => void),
 ) => useMutation({
   mutationFn: createCourseXblock,
-  onSettled: async (data) => {
-    callback?.(data?.locator, data.parent_locator);
+  onSettled: async (data: { locator: string, parent_locator: string }) => {
+    callback?.(data.locator, data.parent_locator);
   },
 });
 
diff --git a/src/course-outline/data/thunk.ts b/src/course-outline/data/thunk.ts
index 2e0d7a99e..72a37968f 100644
--- a/src/course-outline/data/thunk.ts
+++ b/src/course-outline/data/thunk.ts
@@ -5,7 +5,6 @@ import {
   hideProcessingNotification,
   showProcessingNotification,
 } from '@src/generic/processing-notification/data/slice';
-import { createCourseXblock } from '@src/course-unit/data/api';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import {
   getCourseBestPracticesChecklist,
@@ -13,7 +12,6 @@ import {
 } from '../utils/getChecklistForStatusBar';
 import { getErrorDetails } from '../utils/getErrorDetails';
 import {
-  addNewCourseItem,
   deleteCourseItem,
   duplicateCourseItem,
   editItemDisplayName,
@@ -32,7 +30,7 @@ import {
   setVideoSharingOption,
   setCourseItemOrderList,
   pasteBlock,
-  dismissNotification, createDiscussionsTopics,
+  dismissNotification, createDiscussionsTopics, createCourseXblock,
 } from './api';
 import {
   addSection,
@@ -532,11 +530,11 @@ function addNewCourseItemQuery(
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
 
     try {
-      await addNewCourseItem(
+      await createCourseXblock({
         parentLocator,
-        category,
+        type: category,
         displayName,
-      ).then(async (result) => {
+      }).then(async (result) => {
         if (result) {
           await addItemFn(result);
           dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
@@ -593,34 +591,6 @@ export function addNewUnitQuery(parentLocator: string, callback: { (locator: any
   };
 }
 
-export function addUnitFromLibrary(body: {
-  type: string;
-  category?: string;
-  parentLocator: string;
-  displayName?: string;
-  boilerplate?: string;
-  stagedContent?: string;
-  libraryContentKey?: string;
-}, callback: (arg0: any) => void) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
-
-    try {
-      await createCourseXblock(body).then(async (result) => {
-        if (result) {
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-          dispatch(hideProcessingNotification());
-          callback(result.locator);
-        }
-      });
-    } catch /* istanbul ignore next */ {
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  };
-}
-
 function setBlockOrderListQuery(
   parentId: string,
   blockIds: string[],
diff --git a/src/course-outline/drag-helper/CourseItemOverlay.tsx b/src/course-outline/drag-helper/CourseItemOverlay.tsx
index a61673bf8..f9093492b 100644
--- a/src/course-outline/drag-helper/CourseItemOverlay.tsx
+++ b/src/course-outline/drag-helper/CourseItemOverlay.tsx
@@ -1,11 +1,11 @@
 import { Col, Icon, Row } from '@openedx/paragon';
 import { ArrowRight, DragIndicator } from '@openedx/paragon/icons';
 import { ContainerType } from '@src/generic/key-utils';
-import { getItemStatusBorder } from '../utils';
+import { getItemStatusBorder, type ItemBadgeStatusValue } from '../utils';
 
 interface ItemProps {
   displayName: string;
-  status: string;
+  status: ItemBadgeStatusValue;
 }
 
 interface CourseItemOverlayProps extends ItemProps {
diff --git a/src/course-outline/drag-helper/utils.test.ts b/src/course-outline/drag-helper/utils.test.ts
index 86fc6f1a8..bb6a2242a 100644
--- a/src/course-outline/drag-helper/utils.test.ts
+++ b/src/course-outline/drag-helper/utils.test.ts
@@ -26,7 +26,7 @@ describe('possibleSubsectionMoves', () => {
     { actions: { draggable: true } },
     { actions: { draggable: true } },
     { actions: { draggable: true } },
-  ];
+  ] as unknown as XBlock[];
 
   const createMoveFunction = possibleSubsectionMoves(
     mockSections,
@@ -39,7 +39,7 @@ describe('possibleSubsectionMoves', () => {
     const mockNonDraggableSubsections = [
       { actions: { draggable: false } },
       { actions: { draggable: true } },
-    ];
+    ] as unknown as XBlock[];
 
     const createMove = possibleSubsectionMoves(
       mockSections,
diff --git a/src/course-outline/drag-helper/utils.ts b/src/course-outline/drag-helper/utils.ts
index d554bd59d..40a41f1e9 100644
--- a/src/course-outline/drag-helper/utils.ts
+++ b/src/course-outline/drag-helper/utils.ts
@@ -170,7 +170,7 @@ export const possibleSubsectionMoves = (
   sections: XBlock[],
   sectionIndex: number,
   section: XBlock,
-  subsections: string | any[],
+  subsections: XBlock[],
 ) => (index: number, step: number) => {
   if (!subsections[index]?.actions?.draggable) {
     return {};
diff --git a/src/course-outline/header-navigations/HeaderActions.test.tsx b/src/course-outline/header-navigations/HeaderActions.test.tsx
index ee5ed1515..a65e5d151 100644
--- a/src/course-outline/header-navigations/HeaderActions.test.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.test.tsx
@@ -7,10 +7,7 @@ import messages from './messages';
 import HeaderActions, { HeaderActionsProps } from './HeaderActions';
 import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
 
-const handleNewSectionMock = jest.fn();
-
 const headerNavigationsActions = {
-  handleNewSection: handleNewSectionMock,
   lmsLink: '',
 };
 
@@ -58,7 +55,7 @@ describe('<HeaderActions />', () => {
 
     const addButton = await screen.findByRole('button', { name: messages.addButton.defaultMessage });
     fireEvent.click(addButton);
-    expect(handleNewSectionMock).toHaveBeenCalledTimes(1);
+    expect(setCurrentPageKeyMock).toHaveBeenCalledWith('add');
   });
 
   it('disables new section button if course outline fetch fails', async () => {
diff --git a/src/course-outline/header-navigations/HeaderActions.tsx b/src/course-outline/header-navigations/HeaderActions.tsx
index 71367b248..464827bcc 100644
--- a/src/course-outline/header-navigations/HeaderActions.tsx
+++ b/src/course-outline/header-navigations/HeaderActions.tsx
@@ -15,7 +15,6 @@ import messages from './messages';
 
 export interface HeaderActionsProps {
   actions: {
-    handleNewSection: () => void,
     lmsLink: string,
   },
   courseActions: XBlockActions,
@@ -28,7 +27,7 @@ const HeaderActions = ({
   errors,
 }: HeaderActionsProps) => {
   const intl = useIntl();
-  const { handleNewSection, lmsLink } = actions;
+  const { lmsLink } = actions;
 
   const { setCurrentPageKey, sidebarPages } = useOutlineSidebarContext();
 
@@ -45,7 +44,7 @@ const HeaderActions = ({
         >
           <Button
             iconBefore={IconAdd}
-            onClick={handleNewSection}
+            onClick={() => setCurrentPageKey('add')}
             disabled={!(errors?.outlineIndexApi === undefined || errors?.outlineIndexApi === null)}
             variant="outline-primary"
           >
@@ -80,17 +79,18 @@ const HeaderActions = ({
           <Icon src={ViewSidebar} />
         </Dropdown.Toggle>
         <Dropdown.Menu className="mt-1">
-          {Object.entries(sidebarPages).map(([key, page]: [OutlineSidebarPageKeys, SidebarPage]) => (
-            <Dropdown.Item
-              key={key}
-              onClick={() => setCurrentPageKey(key)}
-            >
-              <Stack direction="horizontal" gap={2}>
-                <Icon src={page.icon} />
-                {page.title}
-              </Stack>
-            </Dropdown.Item>
-          ))}
+          {Object.entries(sidebarPages).filter(([, page]) => !page.hideFromActionMenu)
+            .map(([key, page]: [OutlineSidebarPageKeys, SidebarPage]) => (
+              <Dropdown.Item
+                key={key}
+                onClick={() => setCurrentPageKey(key)}
+              >
+                <Stack direction="horizontal" gap={2}>
+                  <Icon src={page.icon} />
+                  {page.title}
+                </Stack>
+              </Dropdown.Item>
+            ))}
         </Dropdown.Menu>
       </Dropdown>
 
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 4d67bd2b4..83855d73f 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -1,20 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { useQueryClient } from '@tanstack/react-query';
 
 import moment from 'moment';
 import { getSavingStatus as getGenericSavingStatus } from '@src/generic/data/selectors';
-import { useWaffleFlags } from '@src/data/apiHooks';
 import { RequestStatus } from '@src/data/constants';
 import { useUnlinkDownstream } from '@src/generic/unlink-modal';
 
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
-  addSection,
-  addSubsection,
   setCurrentItem,
   setCurrentSection,
   resetScrollField,
@@ -35,9 +32,6 @@ import {
   getCreatedOn,
 } from './data/selectors';
 import {
-  addNewSectionQuery,
-  addNewSubsectionQuery,
-  addNewUnitQuery,
   deleteCourseSectionQuery,
   deleteCourseSubsectionQuery,
   deleteCourseUnitQuery,
@@ -63,15 +57,12 @@ import {
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
-import { useCreateCourseBlock } from './data/apiHooks';
-import { getCourseItem } from './data/api';
 import { containerComparisonQueryKeys } from '../container-comparison/data/apiHooks';
 
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
-  const waffleFlags = useWaffleFlags(courseId);
+  const { handleNewSectionSubmit } = useCourseAuthoringContext();
 
   const {
     reindexLink,
@@ -120,65 +111,10 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(pasteClipboardContent(parentLocator, sectionId));
   };
 
-  const handleNewSectionSubmit = () => {
-    dispatch(addNewSectionQuery(courseStructure.id));
-  };
-
-  const handleNewSubsectionSubmit = (sectionId) => {
-    dispatch(addNewSubsectionQuery(sectionId));
-  };
-
-  const getUnitUrl = (locator) => {
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
-      return `/course/${courseId}/container/${locator}`;
-    }
-    return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
-  };
-
-  const openUnitPage = (locator) => {
-    const url = getUnitUrl(locator);
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
-      navigate(url);
-    } else {
-      window.location.assign(url);
-    }
-  };
-
-  const handleNewUnitSubmit = (subsectionId) => {
-    dispatch(addNewUnitQuery(subsectionId, openUnitPage));
-  };
-
-  /**
-  * import a unit block from library and redirect user to this unit page.
-  */
-  const handleAddUnitFromLibrary = useCreateCourseBlock(openUnitPage);
-
-  const handleAddSubsectionFromLibrary = useCreateCourseBlock(async (locator, parentLocator) => {
-    try {
-      const data = await getCourseItem(locator);
-      data.shouldScroll = true;
-      // Page should scroll to newly added subsection.
-      dispatch(addSubsection({ parentLocator, data }));
-    } catch {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  });
-
   const resetScrollState = () => {
     dispatch(resetScrollField());
   };
 
-  const handleAddSectionFromLibrary = useCreateCourseBlock(async (locator) => {
-    try {
-      const data = await getCourseItem(locator);
-      // Page should scroll to newly added section.
-      data.shouldScroll = true;
-      dispatch(addSection(data));
-    } catch {
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  });
-
   const headerNavigationsActions = {
     handleNewSection: handleNewSectionSubmit,
     handleReIndex: () => {
@@ -411,14 +347,6 @@ const useCourseOutline = ({ courseId }) => {
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
-    handleNewSectionSubmit,
-    handleNewSubsectionSubmit,
-    getUnitUrl,
-    openUnitPage,
-    handleNewUnitSubmit,
-    handleAddUnitFromLibrary,
-    handleAddSubsectionFromLibrary,
-    handleAddSectionFromLibrary,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,
diff --git a/src/course-outline/outline-sidebar/AddSidebar.test.tsx b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
new file mode 100644
index 000000000..5eac2301d
--- /dev/null
+++ b/src/course-outline/outline-sidebar/AddSidebar.test.tsx
@@ -0,0 +1,166 @@
+import { courseOutlineIndexMock } from '@src/course-outline/__mocks__';
+import { initializeMocks, render, screen } from '@src/testUtils';
+import { userEvent } from '@testing-library/user-event';
+import mockResult from '@src/library-authoring/__mocks__/library-search.json';
+import { mockContentSearchConfig, mockSearchResult } from '@src/search-manager/data/api.mock';
+import {
+  mockContentLibrary,
+  mockGetCollectionMetadata,
+  mockGetContainerMetadata,
+  mockGetContentLibraryV2List,
+  mockLibraryBlockMetadata,
+} from '@src/library-authoring/data/api.mocks';
+import { AddSidebar } from './AddSidebar';
+
+const handleNewSectionSubmit = jest.fn();
+const handleNewSubsectionSubmit = jest.fn();
+const handleNewUnitSubmit = jest.fn();
+const handleAddSectionFromLibrary = { mutateAsync: jest.fn() };
+const handleAddSubsectionFromLibrary = { mutateAsync: jest.fn() };
+const handleAddUnitFromLibrary = { mutateAsync: jest.fn() };
+mockContentSearchConfig.applyMock();
+mockContentLibrary.applyMock();
+mockGetCollectionMetadata.applyMock();
+mockGetContentLibraryV2List.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockGetContainerMetadata.applyMock();
+
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    courseUsageKey: 'course-usage-key',
+    courseDetails: { name: 'Test course' },
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    handleNewSectionSubmit,
+    handleAddSectionFromLibrary,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn().mockReturnValue(courseOutlineIndexMock.courseStructure.childInfo.children),
+}));
+
+jest.mock('@src/studio-home/hooks', () => ({
+  useStudioHome: () => ({
+    isLoadingPage: false,
+    isFailedLoadingPage: false,
+    librariesV2Enabled: true,
+  }),
+}));
+
+const renderComponent = () => render(<AddSidebar />);
+const searchResult = {
+  ...mockResult,
+  results: [
+    {
+      ...mockResult.results[0],
+      hits: [
+        ...mockResult.results[0].hits.slice(16, 19),
+      ],
+    },
+    {
+      ...mockResult.results[1],
+    },
+  ],
+};
+
+describe('AddSidebar component', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockSearchResult({
+      ...searchResult,
+    });
+  });
+
+  it('renders the AddSidebar component without any errors', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    // Check add new tab content
+    expect(await screen.findByRole('button', { name: 'Section' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Subsection' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Unit' })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: 'Add New' })).toBeInTheDocument();
+    const existingTab = await screen.findByRole('tab', { name: 'Add Existing' });
+    expect(existingTab).toBeInTheDocument();
+
+    // Check existing tab content
+    await user.click(existingTab);
+    expect(await screen.findByRole('button', { name: 'All libraries' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'See more' })).toBeInTheDocument();
+    expect(await screen.findByRole('search')).toBeInTheDocument();
+  });
+
+  it('show hide extra filters', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    const existingTab = await screen.findByRole('tab', { name: 'Add Existing' });
+    expect(existingTab).toBeInTheDocument();
+    await user.click(existingTab);
+    const toggleBtn = await screen.findByRole('button', { name: 'See more' });
+    expect(toggleBtn).toBeInTheDocument();
+    // hidden by default
+    expect(screen.queryByRole('button', { name: 'Type' })).not.toBeInTheDocument();
+    // show when clicked
+    await user.click(toggleBtn);
+    expect(await screen.findByRole('button', { name: 'Type' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Tags' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Collections filter' })).toBeInTheDocument();
+  });
+
+  it('calls appropriate handlers on new button click', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    // Validate handler for adding section, subsection and unit
+    const section = await screen.findByRole('button', { name: 'Section' });
+    const subsection = await screen.findByRole('button', { name: 'Subsection' });
+    const unit = await screen.findByRole('button', { name: 'Unit' });
+    await user.click(section);
+    expect(handleNewSectionSubmit).toHaveBeenCalled();
+    await user.click(subsection);
+    expect(handleNewSubsectionSubmit).toHaveBeenCalled();
+    await user.click(unit);
+    expect(handleNewUnitSubmit).toHaveBeenCalled();
+  });
+
+  it('calls appropriate handlers on existing button click', async () => {
+    const user = userEvent.setup();
+    const sectionList = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const lastSection = sectionList[3];
+    const lastSubsection = lastSection.childInfo.children[0];
+    renderComponent();
+    // Check existing tab content
+    await user.click(await screen.findByRole('tab', { name: 'Add Existing' }));
+
+    // Validate handler for adding section, subsection and unit
+    const addBtns = await screen.findAllByRole('button', { name: 'Add' });
+    // first one is unit as per mock
+    await user.click(addBtns[0]);
+    expect(handleAddUnitFromLibrary.mutateAsync).toHaveBeenCalledWith({
+      type: 'library_v2',
+      category: 'vertical',
+      parentLocator: lastSubsection.id,
+      libraryContentKey: searchResult.results[0].hits[0].usage_key,
+    });
+    // second one is subsection as per mock
+    await user.click(addBtns[1]);
+    expect(handleAddSubsectionFromLibrary.mutateAsync).toHaveBeenCalledWith({
+      type: 'library_v2',
+      category: 'sequential',
+      parentLocator: lastSection.id,
+      libraryContentKey: searchResult.results[0].hits[1].usage_key,
+    });
+    // third one is section as per mock
+    await user.click(addBtns[2]);
+    expect(handleAddSectionFromLibrary.mutateAsync).toHaveBeenCalledWith({
+      type: 'library_v2',
+      category: 'chapter',
+      parentLocator: 'course-usage-key',
+      libraryContentKey: searchResult.results[0].hits[2].usage_key,
+    });
+  });
+});
diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx
new file mode 100644
index 000000000..24cc56ac9
--- /dev/null
+++ b/src/course-outline/outline-sidebar/AddSidebar.tsx
@@ -0,0 +1,235 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { SchoolOutline } from '@openedx/paragon/icons';
+
+import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+
+import contentMessages from '@src/library-authoring/add-content/messages';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { SidebarFilters } from '@src/library-authoring/library-filters/SidebarFilters';
+import {
+  Button, Icon, Stack, Tab, Tabs,
+} from '@openedx/paragon';
+import { getIconBorderStyleColor, getItemIcon } from '@src/generic/block-type-utils';
+import { useSelector } from 'react-redux';
+import { getSectionsList } from '@src/course-outline/data/selectors';
+import { useCallback, useMemo } from 'react';
+import { ComponentSelectedEvent } from '@src/library-authoring/common/context/ComponentPickerContext';
+import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
+import { ContainerType } from '@src/generic/key-utils';
+import type { XBlock } from '@src/data/types';
+import { ContentType } from '@src/library-authoring/routes';
+import { ComponentPicker } from '@src/library-authoring';
+import { MultiLibraryProvider } from '@src/library-authoring/common/context/MultiLibraryContext';
+import messages from './messages';
+
+type ContainerTypes = 'unit' | 'subsection' | 'section';
+
+type AddContentButtonProps = {
+  name: string,
+  blockType: ContainerTypes,
+};
+
+const getLastEditableParent = (blockList: Array<XBlock>) => {
+  let index = 1;
+  let lastBlock: XBlock;
+  while (index <= blockList.length) {
+    lastBlock = blockList[blockList.length - index];
+    if (lastBlock.actions.childAddable) {
+      return lastBlock;
+    }
+    index++;
+  }
+  return undefined;
+};
+
+/** Add Content Button */
+const AddContentButton = ({ name, blockType } : AddContentButtonProps) => {
+  const sectionsList = useSelector(getSectionsList);
+  const lastSection = getLastEditableParent(sectionsList);
+  const lastSubsection = getLastEditableParent(lastSection?.childInfo.children || []);
+  const {
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+  } = useCourseAuthoringContext();
+
+  const onCreateContent = useCallback(() => {
+    switch (blockType) {
+      case 'section':
+        handleNewSectionSubmit();
+        break;
+      case 'subsection':
+        if (lastSection) {
+          handleNewSubsectionSubmit(lastSection.id);
+        }
+        break;
+      case 'unit':
+        if (lastSubsection) {
+          handleNewUnitSubmit(lastSubsection.id);
+        }
+        break;
+      default:
+        // istanbul ignore next: unreachable
+        throw new Error(`Unrecognized block type ${blockType}`);
+    }
+  }, [
+    blockType,
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    lastSection,
+    lastSubsection,
+  ]);
+
+  return (
+    <Button
+      variant="tertiary shadow"
+      className="mx-2 justify-content-start px-4 font-weight-bold"
+      onClick={onCreateContent}
+      disabled={(!lastSection && blockType === 'subsection') || (!lastSubsection && blockType === 'unit')}
+    >
+      <Stack direction="horizontal" gap={3}>
+        <span className={`p-2 rounded ${getIconBorderStyleColor(blockType)}`}>
+          <Icon size="lg" src={getItemIcon(blockType)} />
+        </span>
+        {name}
+      </Stack>
+    </Button>
+  );
+};
+
+/** Add New Content Tab Section */
+const AddNewContent = () => {
+  const intl = useIntl();
+  return (
+    <Stack gap={2}>
+      <AddContentButton
+        name={intl.formatMessage(contentMessages.sectionButton)}
+        blockType="section"
+      />
+      <AddContentButton
+        name={intl.formatMessage(contentMessages.subsectionButton)}
+        blockType="subsection"
+      />
+      <AddContentButton
+        name={intl.formatMessage(contentMessages.unitButton)}
+        blockType="unit"
+      />
+    </Stack>
+  );
+};
+
+/** Add Existing Content Tab Section */
+const ShowLibraryContent = () => {
+  const sectionsList: Array<XBlock> = useSelector(getSectionsList);
+  const lastSection = getLastEditableParent(sectionsList);
+  const lastSubsection = getLastEditableParent(lastSection?.childInfo.children || []);
+  const {
+    courseUsageKey,
+    handleAddSectionFromLibrary,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+  } = useCourseAuthoringContext();
+
+  const onComponentSelected: ComponentSelectedEvent = useCallback(({ usageKey, blockType }) => {
+    switch (blockType) {
+      case 'section':
+        handleAddSectionFromLibrary.mutateAsync({
+          type: COMPONENT_TYPES.libraryV2,
+          category: ContainerType.Chapter,
+          parentLocator: courseUsageKey,
+          libraryContentKey: usageKey,
+        });
+        break;
+      case 'subsection':
+        if (lastSection) {
+          handleAddSubsectionFromLibrary.mutateAsync({
+            type: COMPONENT_TYPES.libraryV2,
+            category: ContainerType.Sequential,
+            parentLocator: lastSection.id,
+            libraryContentKey: usageKey,
+          });
+        }
+        break;
+      case 'unit':
+        if (lastSubsection) {
+          handleAddUnitFromLibrary.mutateAsync({
+            type: COMPONENT_TYPES.libraryV2,
+            category: ContainerType.Vertical,
+            parentLocator: lastSubsection.id,
+            libraryContentKey: usageKey,
+          });
+        }
+        break;
+      default:
+        // istanbul ignore next: unreachable
+        throw new Error(`Unrecognized block type ${blockType}`);
+    }
+  }, [
+    courseUsageKey,
+    handleAddSectionFromLibrary,
+    handleAddSubsectionFromLibrary,
+    handleAddUnitFromLibrary,
+    lastSection,
+    lastSubsection,
+  ]);
+
+  const allowedBlocks = useMemo(() => {
+    const blocks: ContainerTypes[] = ['section'];
+    if (lastSection) { blocks.push('subsection'); }
+    if (lastSubsection) { blocks.push('unit'); }
+    return blocks;
+  }, [lastSection, lastSubsection, sectionsList]);
+
+  return (
+    <MultiLibraryProvider>
+      <ComponentPicker
+        showOnlyPublished
+        extraFilter={[`block_type IN [${allowedBlocks.join(',')}]`]}
+        visibleTabs={[ContentType.home]}
+        FiltersComponent={SidebarFilters}
+        onComponentSelected={onComponentSelected}
+      />
+    </MultiLibraryProvider>
+  );
+};
+
+/** Tabs Component */
+const AddTabs = () => {
+  const intl = useIntl();
+
+  return (
+    <Tabs
+      variant="tabs"
+      defaultActiveKey="addNew"
+      className="my-2 d-flex justify-content-around"
+      id="add-content-tabs"
+    >
+      <Tab eventKey="addNew" title={intl.formatMessage(messages.sidebarTabsAddNew)}>
+        <AddNewContent />
+      </Tab>
+      <Tab eventKey="addExisting" title={intl.formatMessage(messages.sidebarTabsAddExisiting)}>
+        <ShowLibraryContent />
+      </Tab>
+    </Tabs>
+  );
+};
+
+/** Main Sidebar Component */
+export const AddSidebar = () => {
+  const { courseDetails } = useCourseAuthoringContext();
+
+  return (
+    <div>
+      <SidebarTitle
+        title={courseDetails?.name || ''}
+        icon={SchoolOutline}
+      />
+      <SidebarContent>
+        <SidebarSection>
+          <AddTabs />
+        </SidebarSection>
+      </SidebarContent>
+    </div>
+  );
+};
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
index b0a6d4dec..eb80c02ce 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.tsx
@@ -12,6 +12,7 @@ import OutlineSidebar from './OutlineSidebar';
 // Mock the useCourseDetails hook
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   useCourseDetails: jest.fn().mockReturnValue({ isPending: false, data: { title: 'Test Course' } }),
+  useCreateCourseBlock: jest.fn(),
 }));
 
 const courseId = '123';
diff --git a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
index fbe03d99b..60f28785f 100644
--- a/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
+++ b/src/course-outline/outline-sidebar/OutlineSidebarContext.tsx
@@ -7,15 +7,16 @@ import {
 } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
-import { HelpOutline, Info } from '@openedx/paragon/icons';
+import { HelpOutline, Info, Plus } from '@openedx/paragon/icons';
 
 import type { SidebarPage } from '@src/generic/sidebar';
 import OutlineHelpSidebar from './OutlineHelpSidebar';
 import { OutlineInfoSidebar } from './OutlineInfoSidebar';
 
 import messages from './messages';
+import { AddSidebar } from './AddSidebar';
 
-export type OutlineSidebarPageKeys = 'help' | 'info';
+export type OutlineSidebarPageKeys = 'help' | 'info' | 'add';
 export type OutlineSidebarPages = Record<OutlineSidebarPageKeys, SidebarPage>;
 
 interface OutlineSidebarContextData {
@@ -51,6 +52,12 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       icon: HelpOutline,
       title: intl.formatMessage(messages.sidebarButtonHelp),
     },
+    add: {
+      component: AddSidebar,
+      icon: Plus,
+      title: intl.formatMessage(messages.sidebarButtonAdd),
+      hideFromActionMenu: true,
+    },
   } satisfies OutlineSidebarPages;
 
   const context = useMemo<OutlineSidebarContextData>(
diff --git a/src/course-outline/outline-sidebar/messages.ts b/src/course-outline/outline-sidebar/messages.ts
index c1514648f..42027a1b5 100644
--- a/src/course-outline/outline-sidebar/messages.ts
+++ b/src/course-outline/outline-sidebar/messages.ts
@@ -70,6 +70,11 @@ const messages = defineMessages({
     defaultMessage: 'Help',
     description: 'Button label for the help sidebar',
   },
+  sidebarButtonAdd: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-button-add',
+    defaultMessage: 'Add',
+    description: 'Button text for add button in sidebar',
+  },
   sidebarButtonInfo: {
     id: 'course-authoring.course-outline.sidebar.sidebar-button-info',
     defaultMessage: 'Info',
@@ -90,6 +95,16 @@ const messages = defineMessages({
     defaultMessage: 'Manage tags',
     description: 'Action to open the tags drawer',
   },
+  sidebarTabsAddNew: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-section-add.add-new-tab',
+    defaultMessage: 'Add New',
+    description: 'Tab title for adding new components in outline using sidebar',
+  },
+  sidebarTabsAddExisiting: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-section-add.add-existing-tab',
+    defaultMessage: 'Add Existing',
+    description: 'Tab title for adding existing library components in outline using sidebar',
+  },
 });
 
 export default messages;
diff --git a/src/course-outline/section-card/SectionCard.test.tsx b/src/course-outline/section-card/SectionCard.test.tsx
index aca9cdd15..dc698a2ba 100644
--- a/src/course-outline/section-card/SectionCard.test.tsx
+++ b/src/course-outline/section-card/SectionCard.test.tsx
@@ -16,6 +16,14 @@ jest.mock('@src/course-unit/data/apiHooks', () => ({
   }),
 }));
 
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    handleAddSubsectionFromLibrary: jest.fn(),
+    handleNewSubsectionSubmit: jest.fn(),
+  }),
+}));
+
 const unit = {
   id: 'block-v1:UNIX+UX1+2025_T3+type@unit+block@0',
 };
@@ -95,10 +103,8 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     onEditSectionSubmit={onEditSectionSubmit}
     onDuplicateSubmit={jest.fn()}
     isSectionsExpanded
-    onNewSubsectionSubmit={jest.fn()}
     isSelfPaced={false}
     isCustomRelativeDatesActive={false}
-    onAddSubsectionFromLibrary={jest.fn()}
     resetScrollState={jest.fn()}
     {...props}
   >
diff --git a/src/course-outline/section-card/SectionCard.tsx b/src/course-outline/section-card/SectionCard.tsx
index 5547fc46b..281b71230 100644
--- a/src/course-outline/section-card/SectionCard.tsx
+++ b/src/course-outline/section-card/SectionCard.tsx
@@ -6,7 +6,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Bubble, Button, StandardModal, useToggle,
 } from '@openedx/paragon';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -21,13 +21,14 @@ import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '@src/course-outline/utils';
 import OutlineAddChildButtons from '@src/course-outline/OutlineAddChildButtons';
 import { ContainerType } from '@src/generic/key-utils';
-import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
+import { LibraryAndComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { ContentType } from '@src/library-authoring/routes';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import messages from './messages';
 
 interface SectionCardProps {
@@ -44,8 +45,6 @@ interface SectionCardProps {
   onOpenUnlinkModal: () => void,
   onDuplicateSubmit: () => void,
   isSectionsExpanded: boolean,
-  onNewSubsectionSubmit: (id: string) => void,
-  onAddSubsectionFromLibrary: (props: object) => {},
   index: number,
   canMoveItem: (oldIndex: number, newIndex: number) => boolean,
   onOrderChange: (oldIndex: number, newIndex: number) => void,
@@ -68,8 +67,6 @@ const SectionCard = ({
   onOpenUnlinkModal,
   onDuplicateSubmit,
   isSectionsExpanded,
-  onNewSubsectionSubmit,
-  onAddSubsectionFromLibrary,
   onOrderChange,
   resetScrollState,
 }: SectionCardProps) => {
@@ -85,7 +82,11 @@ const SectionCard = ({
     openAddLibrarySubsectionModal,
     closeAddLibrarySubsectionModal,
   ] = useToggle(false);
-  const { courseId } = useParams();
+  const {
+    courseId,
+    handleAddSubsectionFromLibrary,
+    handleNewSubsectionSubmit,
+  } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   // Expand the section if a search result should be shown/scrolled to
@@ -193,7 +194,7 @@ const SectionCard = ({
   });
 
   // remove border when section is expanded
-  const borderStyle = getItemStatusBorder(!isExpanded ? sectionStatus : '');
+  const borderStyle = getItemStatusBorder(!isExpanded ? sectionStatus : undefined);
 
   const handleExpandContent = () => {
     setIsExpanded((prevState) => !prevState);
@@ -218,10 +219,6 @@ const SectionCard = ({
     onOpenHighlightsModal(section);
   };
 
-  const handleNewSubsectionSubmit = () => {
-    onNewSubsectionSubmit(id);
-  };
-
   const handleSectionMoveUp = () => {
     onOrderChange(index, index - 1);
   };
@@ -236,14 +233,14 @@ const SectionCard = ({
   * @returns {void}
   */
   const handleSelectLibrarySubsection = useCallback((selectedSubection: SelectedComponent) => {
-    onAddSubsectionFromLibrary({
+    handleAddSubsectionFromLibrary.mutateAsync({
       type: COMPONENT_TYPES.libraryV2,
       category: ContainerType.Sequential,
       parentLocator: id,
       libraryContentKey: selectedSubection.usageKey,
     });
     closeAddLibrarySubsectionModal();
-  }, [id, onAddSubsectionFromLibrary, closeAddLibrarySubsectionModal]);
+  }, [id, handleAddSubsectionFromLibrary, closeAddLibrarySubsectionModal]);
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
@@ -345,7 +342,7 @@ const SectionCard = ({
                 {children}
                 {actions.childAddable && (
                   <OutlineAddChildButtons
-                    handleNewButtonClick={handleNewSubsectionSubmit}
+                    handleNewButtonClick={() => handleNewSubsectionSubmit(id)}
                     handleUseFromLibraryClick={openAddLibrarySubsectionModal}
                     childType={ContainerType.Subsection}
                   />
@@ -362,7 +359,7 @@ const SectionCard = ({
         isOverflowVisible={false}
         size="xl"
       >
-        <ComponentPicker
+        <LibraryAndComponentPicker
           showOnlyPublished
           extraFilter={['block_type = "subsection"']}
           componentPickerMode="single"
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.tsx b/src/course-outline/subsection-card/SubsectionCard.test.tsx
index ce6ad0936..e0dd4d6c1 100644
--- a/src/course-outline/subsection-card/SubsectionCard.test.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.test.tsx
@@ -8,7 +8,7 @@ import SubsectionCard from './SubsectionCard';
 
 let store;
 const containerKey = 'lct:org:lib:unit:1';
-const handleOnAddUnitFromLibrary = jest.fn();
+const handleOnAddUnitFromLibrary = { mutateAsync: jest.fn() };
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -22,6 +22,14 @@ jest.mock('@src/course-unit/data/apiHooks', () => ({
   }),
 }));
 
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    handleNewUnitSubmit: jest.fn(),
+    handleAddUnitFromLibrary: handleOnAddUnitFromLibrary,
+  }),
+}));
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useSelector: () => ({
@@ -29,9 +37,9 @@ jest.mock('react-redux', () => ({
   }),
 }));
 
-// Mock ComponentPicker to call onComponentSelected on click
+// Mock LibraryAndComponentPicker to call onComponentSelected on click
 jest.mock('@src/library-authoring/component-picker', () => ({
-  ComponentPicker: (props) => {
+  LibraryAndComponentPicker: (props) => {
     const onClick = () => {
       // eslint-disable-next-line react/prop-types
       props.onComponentSelected({
@@ -116,8 +124,6 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     onOpenPublishModal={jest.fn()}
     onOpenDeleteModal={jest.fn()}
     onOpenUnlinkModal={jest.fn()}
-    onNewUnitSubmit={jest.fn()}
-    onAddUnitFromLibrary={handleOnAddUnitFromLibrary}
     isCustomRelativeDatesActive={false}
     onEditSubmit={onEditSubectionSubmit}
     onDuplicateSubmit={jest.fn()}
@@ -322,8 +328,8 @@ describe('<SubsectionCard />', () => {
     const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
     fireEvent.click(dummyBtn);
 
-    expect(handleOnAddUnitFromLibrary).toHaveBeenCalled();
-    expect(handleOnAddUnitFromLibrary).toHaveBeenCalledWith({
+    expect(handleOnAddUnitFromLibrary.mutateAsync).toHaveBeenCalled();
+    expect(handleOnAddUnitFromLibrary.mutateAsync).toHaveBeenCalledWith({
       type: COMPONENT_TYPES.libraryV2,
       parentLocator: 'block-v1:UNIX+UX1+2025_T3+type@subsection+block@0',
       category: 'vertical',
diff --git a/src/course-outline/subsection-card/SubsectionCard.tsx b/src/course-outline/subsection-card/SubsectionCard.tsx
index 0e95a273f..7fefb098c 100644
--- a/src/course-outline/subsection-card/SubsectionCard.tsx
+++ b/src/course-outline/subsection-card/SubsectionCard.tsx
@@ -2,7 +2,7 @@ import React, {
   useContext, useEffect, useState, useRef, useCallback, ReactNode, useMemo,
 } from 'react';
 import { useDispatch } from 'react-redux';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StandardModal, useToggle } from '@openedx/paragon';
 import { useQueryClient } from '@tanstack/react-query';
@@ -20,7 +20,7 @@ import TitleButton from '@src/course-outline/card-header/TitleButton';
 import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 import XBlockStatus from '@src/course-outline/xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '@src/course-outline/utils';
-import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
+import { LibraryAndComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import { ContainerType } from '@src/generic/key-utils';
 import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
@@ -29,6 +29,7 @@ import OutlineAddChildButtons from '@src/course-outline/OutlineAddChildButtons';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import messages from './messages';
 
 interface SubsectionCardProps {
@@ -44,16 +45,6 @@ interface SubsectionCardProps {
   onOpenDeleteModal: () => void,
   onOpenUnlinkModal: () => void,
   onDuplicateSubmit: () => void,
-  onNewUnitSubmit: (subsectionId: string) => void,
-  onAddUnitFromLibrary: (options: {
-    type: string,
-    category?: string,
-    parentLocator: string,
-    displayName?: string,
-    boilerplate?: string,
-    stagedContent?: string,
-    libraryContentKey: string,
-  }) => void,
   index: number,
   getPossibleMoves: (index: number, step: number) => void,
   onOrderChange: (section: XBlock, moveDetails: any) => void,
@@ -77,8 +68,6 @@ const SubsectionCard = ({
   onOpenDeleteModal,
   onOpenUnlinkModal,
   onDuplicateSubmit,
-  onNewUnitSubmit,
-  onAddUnitFromLibrary,
   onOrderChange,
   onOpenConfigureModal,
   onPasteClick,
@@ -100,7 +89,7 @@ const SubsectionCard = ({
     openAddLibraryUnitModal,
     closeAddLibraryUnitModal,
   ] = useToggle(false);
-  const { courseId } = useParams();
+  const { courseId, handleNewUnitSubmit, handleAddUnitFromLibrary } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   const {
@@ -196,7 +185,7 @@ const SubsectionCard = ({
     onOrderChange(section, moveDownDetails);
   };
 
-  const handleNewButtonClick = () => onNewUnitSubmit(id);
+  const handleNewButtonClick = () => handleNewUnitSubmit(id);
   const handlePasteButtonClick = () => onPasteClick(id, section.id);
 
   const titleComponent = (
@@ -260,14 +249,14 @@ const SubsectionCard = ({
   );
 
   const handleSelectLibraryUnit = useCallback((selectedUnit: SelectedComponent) => {
-    onAddUnitFromLibrary({
+    handleAddUnitFromLibrary.mutateAsync({
       type: COMPONENT_TYPES.libraryV2,
       category: ContainerType.Vertical,
       parentLocator: id,
       libraryContentKey: selectedUnit.usageKey,
     });
     closeAddLibraryUnitModal();
-  }, [id, onAddUnitFromLibrary, closeAddLibraryUnitModal]);
+  }, [id, handleAddUnitFromLibrary, closeAddLibraryUnitModal]);
 
   return (
     <>
@@ -364,7 +353,7 @@ const SubsectionCard = ({
         isOverflowVisible={false}
         size="xl"
       >
-        <ComponentPicker
+        <LibraryAndComponentPicker
           showOnlyPublished
           extraFilter={['block_type = "unit"']}
           componentPickerMode="single"
diff --git a/src/course-outline/unit-card/UnitCard.test.tsx b/src/course-outline/unit-card/UnitCard.test.tsx
index 9d8ef2b0d..96b17724d 100644
--- a/src/course-outline/unit-card/UnitCard.test.tsx
+++ b/src/course-outline/unit-card/UnitCard.test.tsx
@@ -18,6 +18,13 @@ jest.mock('@src/course-unit/data/apiHooks', () => ({
   }),
 }));
 
+jest.mock('@src/CourseAuthoringContext', () => ({
+  useCourseAuthoringContext: () => ({
+    courseId: 5,
+    getUnitUrl: (id: string) => `/some/${id}`,
+  }),
+}));
+
 const section = {
   id: 'block-v1:UNIX+UX1+2025_T3+type@section+block@0',
   displayName: 'Section Name',
@@ -87,7 +94,6 @@ const renderComponent = (props?: object) => render(
     onOpenConfigureModal={jest.fn()}
     onEditSubmit={jest.fn()}
     onDuplicateSubmit={jest.fn()}
-    getTitleLink={(id) => `/some/${id}`}
     isSelfPaced={false}
     isCustomRelativeDatesActive={false}
     discussionsSettings={{
diff --git a/src/course-outline/unit-card/UnitCard.tsx b/src/course-outline/unit-card/UnitCard.tsx
index 9c153b4fd..8ab7ba809 100644
--- a/src/course-outline/unit-card/UnitCard.tsx
+++ b/src/course-outline/unit-card/UnitCard.tsx
@@ -7,7 +7,7 @@ import {
 import { useDispatch } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { isEmpty } from 'lodash';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 
 import CourseOutlineUnitCardExtraActionsSlot from '@src/plugin-slots/CourseOutlineUnitCardExtraActionsSlot';
@@ -24,6 +24,7 @@ import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface UnitCardProps {
   unit: XBlock;
@@ -36,7 +37,6 @@ interface UnitCardProps {
   onOpenDeleteModal: () => void;
   onOpenUnlinkModal: () => void;
   onDuplicateSubmit: () => void;
-  getTitleLink: (locator: string) => string;
   index: number;
   getPossibleMoves: (index: number, step: number) => void,
   onOrderChange: (section: XBlock, moveDetails: any) => void,
@@ -63,7 +63,6 @@ const UnitCard = ({
   onOpenDeleteModal,
   onOpenUnlinkModal,
   onDuplicateSubmit,
-  getTitleLink,
   onOrderChange,
   discussionsSettings,
 }: UnitCardProps) => {
@@ -77,7 +76,7 @@ const UnitCard = ({
   const namePrefix = 'unit';
 
   const { copyToClipboard } = useClipboard();
-  const { courseId } = useParams();
+  const { courseId, getUnitUrl } = useCourseAuthoringContext();
   const queryClient = useQueryClient();
 
   const {
@@ -168,7 +167,7 @@ const UnitCard = ({
   const titleComponent = (
     <TitleLink
       title={displayName}
-      titleLink={getTitleLink(id)}
+      titleLink={getUnitUrl(id)}
       namePrefix={namePrefix}
       prefixIcon={(
         <UpstreamInfoIcon
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.tsx
similarity index 79%
rename from src/course-outline/utils.jsx
rename to src/course-outline/utils.tsx
index e6d31ae8d..e7ba5398f 100644
--- a/src/course-outline/utils.jsx
+++ b/src/course-outline/utils.tsx
@@ -1,3 +1,4 @@
+import type { IntlShape, MessageDescriptor } from 'react-intl';
 import {
   CheckCircle as CheckCircleIcon,
   Lock as LockIcon,
@@ -5,19 +6,22 @@ import {
 
 import DraftIcon from '@src/generic/DraftIcon';
 import { VisibilityTypes } from '@src/data/constants';
+import { ValueOf } from '@src/types';
 import { ITEM_BADGE_STATUS, VIDEO_SHARING_OPTIONS } from './constants';
 
+export type ItemBadgeStatusValue = ValueOf<typeof ITEM_BADGE_STATUS>;
 /**
  * Get section status depended on section info
- * @param {bool} published - value from section info
- * @param {string} visibilityState - value from section info
- * @returns {ITEM_BADGE_STATUS[keyof ITEM_BADGE_STATUS]}
  */
 const getItemStatus = ({
   published,
   visibilityState,
   hasChanges,
-}) => {
+}: {
+  published: boolean;
+  visibilityState: string;
+  hasChanges?: boolean;
+}): ItemBadgeStatusValue => {
   switch (true) {
     case visibilityState === VisibilityTypes.STAFF_ONLY:
       return ITEM_BADGE_STATUS.staffOnly;
@@ -38,13 +42,12 @@ const getItemStatus = ({
 
 /**
  * Get section badge status content
- * @param {string} status - value from on getItemStatus util
- * @returns {
- *   badgeTitle: string,
- *   badgeIcon: node,
- * }
  */
-const getItemStatusBadgeContent = (status, messages, intl) => {
+const getItemStatusBadgeContent = (
+  status: ItemBadgeStatusValue,
+  messages: Record<string, MessageDescriptor>,
+  intl: IntlShape,
+) => {
   switch (status) {
     case ITEM_BADGE_STATUS.gated:
       return {
@@ -86,12 +89,8 @@ const getItemStatusBadgeContent = (status, messages, intl) => {
 
 /**
  * Get section border color
- * @param {string} status - value from on getItemStatus util
- * @returns {
- *   borderLeft: string,
- * }
  */
-const getItemStatusBorder = (status) => {
+const getItemStatusBorder = (status?: ItemBadgeStatusValue) => {
   switch (status) {
     case ITEM_BADGE_STATUS.live:
       return {
@@ -128,16 +127,8 @@ const getItemStatusBorder = (status) => {
 
 /**
  * Get formatted highlights form values
- * @param {Array<string>} currentHighlights - section highlights
- * @returns {
- *   highlight_1: string,
- *   highlight_2: string,
- *   highlight_3: string,
- *   highlight_4: string,
- *   highlight_5: string,
- * }
  */
-const getHighlightsFormValues = (currentHighlights) => {
+const getHighlightsFormValues = (currentHighlights: Array<string>): any => {
   const initialFormValues = {
     highlight_1: '',
     highlight_2: '',
@@ -163,15 +154,12 @@ const getHighlightsFormValues = (currentHighlights) => {
 
 /**
  * Method to scroll into view port, if it's outside the viewport
- *
- * @param {Object} target - DOM Element
- * @param {boolean} alignWithTop (optional) - Whether top of the target will be aligned to
- *                                            the top of viewpoint. (default: false)
- * @param {boolean} highlight (optional) - Whether highlight the target after scrolling.
- *                                            (default: false)
- * @returns {undefined}
  */
-const scrollToElement = (target, alignWithTop = false, highlight = false) => {
+const scrollToElement = (
+  target: HTMLElement,
+  alignWithTop: boolean = false,
+  highlight: boolean = false,
+) => {
   if (target.getBoundingClientRect().bottom > window.innerHeight) {
     // if alignWithTop is set, the top of the target will be aligned to the top of visible area
     // of the scrollable ancestor, Otherwise, the bottom of the target will be aligned to the
@@ -199,7 +187,11 @@ const scrollToElement = (target, alignWithTop = false, highlight = false) => {
  * @param {string} id - option id
  * @returns {string} - text to display
  */
-const getVideoSharingOptionText = (id, messages, intl) => {
+const getVideoSharingOptionText = (
+  id: ValueOf<typeof VIDEO_SHARING_OPTIONS>,
+  messages: Record<string, MessageDescriptor>,
+  intl: IntlShape,
+): string => {
   switch (id) {
     case VIDEO_SHARING_OPTIONS.perVideo:
       return intl.formatMessage(messages.videoSharingPerVideoText);
diff --git a/src/course-unit/add-component/AddComponent.test.tsx b/src/course-unit/add-component/AddComponent.test.tsx
index a9c55b905..9691fbe34 100644
--- a/src/course-unit/add-component/AddComponent.test.tsx
+++ b/src/course-unit/add-component/AddComponent.test.tsx
@@ -25,9 +25,9 @@ const blockId = '123';
 const handleCreateNewCourseXBlockMock = jest.fn();
 const usageKey = 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fddest-usage-key';
 
-// Mock ComponentPicker to call onComponentSelected on click
+// Mock LibraryAndComponentPicker to call onComponentSelected on click
 jest.mock('../../library-authoring/component-picker', () => ({
-  ComponentPicker: (props) => {
+  LibraryAndComponentPicker: (props) => {
     const onClick = () => {
       if (props.componentPickerMode === 'single') {
         props.onComponentSelected({
diff --git a/src/course-unit/add-component/AddComponent.tsx b/src/course-unit/add-component/AddComponent.tsx
index 78297237f..89d3dfbf0 100644
--- a/src/course-unit/add-component/AddComponent.tsx
+++ b/src/course-unit/add-component/AddComponent.tsx
@@ -8,7 +8,7 @@ import {
 
 import { useWaffleFlags } from '@src/data/apiHooks';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
-import { ComponentPicker } from '@src/library-authoring/component-picker';
+import { LibraryAndComponentPicker } from '@src/library-authoring/component-picker';
 import { ContentType } from '@src/library-authoring/routes';
 import { useIframe } from '@src/generic/hooks/context/hooks';
 import { useEventListener } from '@src/generic/hooks';
@@ -276,7 +276,7 @@ const AddComponent = ({
             )
           }
         >
-          <ComponentPicker
+          <LibraryAndComponentPicker
             showOnlyPublished
             extraFilter={['NOT block_type = "unit"', 'NOT block_type = "section"', 'NOT block_type = "subsection"']}
             visibleTabs={[ContentType.home, ContentType.components, ContentType.collections]}
diff --git a/src/course-unit/data/api.ts b/src/course-unit/data/api.ts
index 7b6fa9b7b..c8c3e6f98 100644
--- a/src/course-unit/data/api.ts
+++ b/src/course-unit/data/api.ts
@@ -41,42 +41,6 @@ export async function getVerticalData(unitId: string): Promise<object> {
   return courseSectionVerticalData;
 }
 
-/**
- * Creates a new course XBlock.
- */
-export async function createCourseXblock({
-  type,
-  category,
-  parentLocator,
-  displayName,
-  boilerplate,
-  stagedContent,
-  libraryContentKey,
-}: {
-  type: string,
-  category?: string, // The category of the XBlock. Defaults to the type if not provided.
-  parentLocator: string,
-  displayName?: string,
-  boilerplate?: string,
-  stagedContent?: string,
-  libraryContentKey?: string, // component key from library if being imported.
-}) {
-  const body = {
-    type,
-    boilerplate,
-    category: category || type,
-    parent_locator: parentLocator,
-    display_name: displayName,
-    staged_content: stagedContent,
-    library_content_key: libraryContentKey,
-  };
-
-  const { data } = await getAuthenticatedHttpClient()
-    .post(postXBlockBaseApiUrl(), body);
-
-  return data;
-}
-
 /**
  * Handles the visibility and data of a course unit, such as publishing, resetting to default values,
  * and toggling visibility to students.
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
index f953bc162..cd75aec92 100644
--- a/src/course-unit/data/thunk.js
+++ b/src/course-unit/data/thunk.js
@@ -8,11 +8,11 @@ import { handleResponseErrors } from '@src/generic/saving-error-alert';
 import { RequestStatus } from '@src/data/constants';
 import { NOTIFICATION_MESSAGES } from '@src/constants';
 import { updateModel, updateModels } from '@src/generic/model-store';
+import { createCourseXblock } from '@src/course-outline/data/api';
 import { messageTypes } from '../constants';
 import {
   editUnitDisplayName,
   getVerticalData,
-  createCourseXblock,
   getCourseContainerChildren,
   handleCourseUnitVisibilityAndData,
   deleteUnitItem,
diff --git a/src/generic/block-type-utils/constants.ts b/src/generic/block-type-utils/constants.ts
index f9dd23cfd..93c1bf8ea 100644
--- a/src/generic/block-type-utils/constants.ts
+++ b/src/generic/block-type-utils/constants.ts
@@ -89,3 +89,13 @@ export const COMPONENT_TYPE_STYLE_COLOR_MAP = {
   collection: 'component-style-collection',
   other: 'component-style-other',
 };
+
+export const ICON_BORDER_STYLE_COLOR_MAP = {
+  vertical: 'icon-with-border-vertical',
+  unit: 'icon-with-border-vertical',
+  sequential: 'icon-with-border-sequential',
+  subsection: 'icon-with-border-sequential',
+  chapter: 'icon-with-border-chapter',
+  section: 'icon-with-border-chapter',
+  other: 'icon-with-border-other',
+};
diff --git a/src/generic/block-type-utils/index.scss b/src/generic/block-type-utils/index.scss
index c68dcf303..eed04b4b7 100644
--- a/src/generic/block-type-utils/index.scss
+++ b/src/generic/block-type-utils/index.scss
@@ -230,3 +230,39 @@
     color: white;
   }
 }
+
+.icon-with-border-chapter {
+  background-color: white;
+  border: 1px solid #45009E;
+
+  .pgn__icon {
+    color: #45009E;
+  }
+}
+
+.icon-with-border-sequential {
+  background-color: white;
+  border: 1px solid #EA3E3E;
+
+  .pgn__icon {
+    color: #EA3E3E;
+  }
+}
+
+.icon-with-border-vertical {
+  background-color: white;
+  border: 1px solid #0B8E77;
+
+  .pgn__icon {
+    color: #0B8E77;
+  }
+}
+
+.icon-with-border-default {
+  background-color: white;
+  border: 1px solid #005C9E;
+
+  .pgn__icon {
+    color: #005C9E;
+  }
+}
diff --git a/src/generic/block-type-utils/index.tsx b/src/generic/block-type-utils/index.tsx
index a4e2ce4b6..103f90c7f 100644
--- a/src/generic/block-type-utils/index.tsx
+++ b/src/generic/block-type-utils/index.tsx
@@ -6,6 +6,7 @@ import {
   COMPONENT_TYPE_ICON_MAP,
   STRUCTURAL_TYPE_ICONS,
   COMPONENT_TYPE_STYLE_COLOR_MAP,
+  ICON_BORDER_STYLE_COLOR_MAP,
 } from './constants';
 
 import messages from './messages';
@@ -18,6 +19,10 @@ export function getComponentStyleColor(blockType: string): string {
   return COMPONENT_TYPE_STYLE_COLOR_MAP[blockType] ?? COMPONENT_TYPE_STYLE_COLOR_MAP.other;
 }
 
+export function getIconBorderStyleColor(blockType: string): string {
+  return ICON_BORDER_STYLE_COLOR_MAP[blockType] ?? ICON_BORDER_STYLE_COLOR_MAP.other;
+}
+
 interface ComponentIconProps {
   blockType: string;
   iconTitle: string;
diff --git a/src/generic/sidebar/Sidebar.tsx b/src/generic/sidebar/Sidebar.tsx
index e6974cf05..e28615d5f 100644
--- a/src/generic/sidebar/Sidebar.tsx
+++ b/src/generic/sidebar/Sidebar.tsx
@@ -18,6 +18,7 @@ export interface SidebarPage {
   component: React.ComponentType;
   icon: React.ComponentType;
   title: string;
+  hideFromActionMenu?: boolean;
 }
 
 type SidebarPages = Record<string, SidebarPage>;
@@ -88,7 +89,7 @@ export function Sidebar<T extends SidebarPages>({
   const SidebarComponent = pages[currentPageKey].component;
 
   return (
-    <Stack direction="horizontal" className="sidebar align-items-baseline mx-3" gap={2}>
+    <Stack direction="horizontal" className="sidebar align-items-baseline ml-3" gap={2}>
       {isOpen && !!currentPageKey && (
         <div className="sidebar-content p-2 bg-white border-right">
           <Dropdown data-testid="sidebar-dropdown">
diff --git a/src/generic/sidebar/SidebarContent.tsx b/src/generic/sidebar/SidebarContent.tsx
index 718275bd3..fcd28a552 100644
--- a/src/generic/sidebar/SidebarContent.tsx
+++ b/src/generic/sidebar/SidebarContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Stack } from '@openedx/paragon';
 
 interface SidebarContentProps {
-  children: React.ReactNode | React.ReactNode[],
+  children: React.ReactNode | React.ReactNode[];
 }
 
 /**
diff --git a/src/generic/sidebar/SidebarSection.tsx b/src/generic/sidebar/SidebarSection.tsx
index 5a6fed522..7f407f744 100644
--- a/src/generic/sidebar/SidebarSection.tsx
+++ b/src/generic/sidebar/SidebarSection.tsx
@@ -8,7 +8,7 @@ import { MoreVert } from '@openedx/paragon/icons';
 
 export interface SidebarSectionProps {
   /** Title of the section */
-  title: string;
+  title?: string;
   /** Icon to be displayed in the section */
   icon?: React.ComponentType;
   /** Actions to be displayed in the section */
@@ -47,9 +47,11 @@ export const SidebarSection = ({
   <Stack gap={2}>
     <Stack direction="horizontal" gap={2}>
       {icon && <Icon src={icon} className="mr-1 text-primary" size="sm" />}
+      {title && (
       <h3 className="h5 font-weight-bold text-primary mb-0">
         {title}
       </h3>
+      )}
       {actions && (
         <Dropdown className="ml-auto">
           <Dropdown.Toggle
diff --git a/src/generic/sidebar/index.scss b/src/generic/sidebar/index.scss
index 084f8b257..12e16a92f 100644
--- a/src/generic/sidebar/index.scss
+++ b/src/generic/sidebar/index.scss
@@ -1,6 +1,12 @@
 .sidebar {
   .sidebar-content {
-      width: 400px;
+    flex: 0 1 auto;
+    max-width: 700px;
+    min-width: 650px;
+    overflow-y: auto;
+    min-height: 100vh;
+    height: 100%;
+    max-height: 300vh;
   }
 
   .dropdown-toggle {
@@ -38,7 +44,8 @@
       &:hover {
         border-width: 2px;
       }
-      
+
+      // Add a triangle to the active button
       &.btn-icon-primary-active::before {
         content: "";
         border-right: 5px solid var(--pgn-color-primary-base);
diff --git a/src/hooks.ts b/src/hooks.ts
index d121ddda8..b1dacca6e 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -190,3 +190,26 @@ export function useStateWithUrlSearchParam<Type>(
   // Return the computed value and wrapped set state function
   return [returnValue, returnSetter];
 }
+
+/**
+ * Creates a custom React hook that manages the state of a given value persistently across sessions.
+ * The stored value is kept in `window.localStorage`.
+ */
+export function useStickyState<T>(
+  defaultValue: T,
+  key: string,
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [value, setValue] = useState<T>(() => {
+    const stickyValue = window.localStorage.getItem(key);
+
+    return stickyValue !== null
+      ? JSON.parse(stickyValue)
+      : defaultValue;
+  });
+
+  useEffect(() => {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}
diff --git a/src/index.jsx b/src/index.jsx
index 558e53e81..516695cc6 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -17,7 +17,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
 
 import {
-  ComponentPicker,
+  LibraryAndComponentPicker,
   CreateLibrary,
   CreateLegacyLibrary,
   LibraryLayout,
@@ -74,7 +74,7 @@ const App = () => {
         <Route
           path="/component-picker"
           element={(
-            <ComponentPicker
+            <LibraryAndComponentPicker
               extraFilter={['NOT block_type = "unit"', 'NOT block_type = "section"', 'NOT block_type = "subsection"']}
               visibleTabs={[ContentType.home, ContentType.components, ContentType.collections]}
             />
@@ -83,7 +83,7 @@ const App = () => {
         <Route
           path="/component-picker/multiple"
           element={(
-            <ComponentPicker
+            <LibraryAndComponentPicker
               componentPickerMode="multiple"
               extraFilter={['NOT block_type = "unit"', 'NOT block_type = "section"', 'NOT block_type = "subsection"']}
               visibleTabs={[ContentType.home, ContentType.components, ContentType.collections]}
diff --git a/src/library-authoring/EmptyStates.tsx b/src/library-authoring/EmptyStates.tsx
index ac69e56d1..8fcc3c7ba 100644
--- a/src/library-authoring/EmptyStates.tsx
+++ b/src/library-authoring/EmptyStates.tsx
@@ -6,7 +6,7 @@ import {
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { useLibraryContext } from './common/context/LibraryContext';
+import { useOptionalLibraryContext } from './common/context/LibraryContext';
 
 export const NoComponents = ({
   infoText = messages.noComponents,
@@ -15,14 +15,14 @@ export const NoComponents = ({
 }: {
   infoText?: MessageDescriptor;
   addBtnText?: MessageDescriptor;
-  handleBtnClick: () => void;
+  handleBtnClick?: () => void;
 }) => {
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
 
   return (
     <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
       <FormattedMessage {...infoText} />
-      {!readOnly && (
+      {!readOnly && handleBtnClick && (
         <Button iconBefore={Add} onClick={handleBtnClick}>
           <FormattedMessage {...addBtnText} />
         </Button>
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index 5557fdd73..ffbbdbc29 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -10,7 +10,6 @@ import classNames from 'classnames';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow,
   Alert,
   Badge,
   Breadcrumb,
@@ -31,31 +30,29 @@ import Header from '@src/header';
 import NotFoundAlert from '@src/generic/NotFoundAlert';
 import { useStudioHome } from '@src/studio-home/hooks';
 import {
-  ClearFiltersButton,
-  FilterByBlockType,
-  FilterByTags,
   SearchContextProvider,
-  SearchKeywordsField,
-  SearchSortWidget,
   TypesFilterData,
 } from '@src/search-manager';
 import { ToastContext } from '@src/generic/toast-context';
 import migrationMessages from '@src/legacy-libraries-migration/messages';
 
+import { FiltersProps } from '@src/library-authoring/library-filters';
+import { MainFilters } from '@src/library-authoring/library-filters/MainFilters';
+import { useMultiLibraryContext } from '@src/library-authoring/common/context/MultiLibraryContext';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import LibraryContent from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
 import { useComponentPickerContext } from './common/context/ComponentPickerContext';
-import { useLibraryContext } from './common/context/LibraryContext';
+import { useOptionalLibraryContext } from './common/context/LibraryContext';
 import { SidebarBodyItemId, useSidebarContext } from './common/context/SidebarContext';
 import { allLibraryPageTabs, ContentType, useLibraryRoutes } from './routes';
 import messages from './messages';
-import LibraryFilterByPublished from './generic/filter-by-published';
 import { libraryQueryPredicate } from './data/apiHooks';
 
 const HeaderActions = () => {
   const intl = useIntl();
 
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
 
   const {
     openAddContentSidebar,
@@ -113,7 +110,7 @@ const HeaderActions = () => {
 export const SubHeaderTitle = ({ title }: { title: ReactNode }) => {
   const intl = useIntl();
 
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
 
   const showReadOnlyBadge = readOnly && !componentPickerMode;
@@ -133,13 +130,15 @@ export const SubHeaderTitle = ({ title }: { title: ReactNode }) => {
 };
 
 interface LibraryAuthoringPageProps {
-  returnToLibrarySelection?: () => void,
-  visibleTabs?: ContentType[],
+  returnToLibrarySelection?: () => void;
+  visibleTabs?: ContentType[];
+  FiltersComponent?: React.ComponentType<FiltersProps>;
 }
 
 const LibraryAuthoringPage = ({
   returnToLibrarySelection,
   visibleTabs = allLibraryPageTabs,
+  FiltersComponent = MainFilters,
 }: LibraryAuthoringPageProps) => {
   const intl = useIntl();
   const location = useLocation();
@@ -160,15 +159,20 @@ const LibraryAuthoringPage = ({
     librariesV2Enabled,
   } = useStudioHome();
 
-  const { componentPickerMode, restrictToLibrary } = useComponentPickerContext();
+  const {
+    componentPickerMode,
+    restrictToLibrary,
+    extraFilter: pickerExtraFilter,
+  } = useComponentPickerContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const {
     libraryId,
     libraryData,
     isLoadingLibraryData,
-    showOnlyPublished,
     extraFilter: contextExtraFilter,
     readOnly,
-  } = useLibraryContext();
+  } = useOptionalLibraryContext();
+  const { selectedLibraries, selectedCollections } = useMultiLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const {
@@ -223,7 +227,7 @@ const LibraryAuthoringPage = ({
   }, [navigateTo]);
 
   // Verify the migration task status
-  if (migrationId) {
+  if (migrationId && libraryId) {
     let deleteMigrationIdParam = false;
     if (migrationStatusData?.state === 'Succeeded') {
       // Check if any library migrations failed.
@@ -273,7 +277,7 @@ const LibraryAuthoringPage = ({
     );
   }
 
-  if (!libraryData) {
+  if (libraryId && !libraryData) {
     return <NotFoundAlert />;
   }
 
@@ -289,7 +293,16 @@ const LibraryAuthoringPage = ({
     />
   ) : undefined;
 
-  const extraFilter = [`context_key = "${libraryId}"`];
+  const extraFilter: string[] = [];
+  if (libraryId) {
+    extraFilter.push(`context_key = "${libraryId}"`);
+  }
+  if (selectedLibraries && selectedLibraries.length > 0) {
+    extraFilter.push(`context_key IN ["${selectedLibraries.join('","')}"]`);
+  }
+  if (selectedCollections && selectedCollections.length > 0) {
+    extraFilter.push(`collections.key IN ["${selectedCollections.join('","')}"]`);
+  }
   if (showOnlyPublished) {
     extraFilter.push('last_published IS NOT NULL');
   }
@@ -297,6 +310,9 @@ const LibraryAuthoringPage = ({
   if (contextExtraFilter) {
     extraFilter.push(...contextExtraFilter);
   }
+  if (pickerExtraFilter) {
+    extraFilter.push(...pickerExtraFilter);
+  }
 
   const activeTypeFilters = {
     components: 'type = "library_block"',
@@ -336,32 +352,40 @@ const LibraryAuthoringPage = ({
   return (
     <div className="d-flex">
       <div className="flex-grow-1">
-        <Helmet><title>{libraryData.title} | {process.env.SITE_NAME}</title></Helmet>
-        {!componentPickerMode && (
-          <Header
-            number={libraryData.slug}
-            title={libraryData.title}
-            org={libraryData.org}
-            contextId={libraryId}
-            readOnly={readOnly}
-            isLibrary
-            containerProps={{
-              size: undefined,
-            }}
-          />
-        )}
+        {libraryData
+          && (
+          <>
+            <Helmet><title>{libraryData.title} | {process.env.SITE_NAME}</title></Helmet>
+            {!componentPickerMode && (
+            <Header
+              number={libraryData.slug}
+              title={libraryData.title}
+              org={libraryData.org}
+              contextId={libraryId}
+              readOnly={readOnly}
+              isLibrary
+              containerProps={{
+                size: undefined,
+              }}
+            />
+            )}
+          </>
+          )}
         <Container className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
             extraFilter={extraFilter}
             overrideTypesFilter={overrideTypesFilter}
           >
-            <SubHeader
-              title={<SubHeaderTitle title={libraryData.title} />}
-              subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
-              breadcrumbs={breadcumbs}
-              headerActions={<HeaderActions />}
-              hideBorder
-            />
+            {libraryData
+              && (
+              <SubHeader
+                title={<SubHeaderTitle title={libraryData.title} />}
+                subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
+                breadcrumbs={breadcumbs}
+                headerActions={<HeaderActions />}
+                hideBorder
+              />
+              )}
             {visibleTabs.length > 1 && (
               <Tabs
                 variant="tabs"
@@ -372,22 +396,7 @@ const LibraryAuthoringPage = ({
                 {visibleTabsToRender}
               </Tabs>
             )}
-            <ActionRow className="my-3">
-              <SearchKeywordsField className="mr-3" />
-              <FilterByTags />
-              {!(onlyOneType) && <FilterByBlockType />}
-              <LibraryFilterByPublished key={
-                // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
-                // appears or disappears, this is because when the menu is opened it is rendered
-                // in a previous state, causing an inconsistency in its position.
-                // By changing the key we can re-render the component.
-                !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
-              }
-              />
-              <ClearFiltersButton />
-              <ActionRow.Spacer />
-              <SearchSortWidget />
-            </ActionRow>
+            <FiltersComponent onlyOneType={onlyOneType} />
             <LibraryContent contentType={activeKey} />
           </SearchContextProvider>
         </Container>
diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
index c1f419e15..416d1a57b 100644
--- a/src/library-authoring/LibraryContent.tsx
+++ b/src/library-authoring/LibraryContent.tsx
@@ -3,7 +3,7 @@ import { LoadingSpinner } from '@src/generic/Loading';
 import { useGetContentHits, useSearchContext } from '@src/search-manager';
 import { useLoadOnScroll } from '@src/hooks';
 import { NoComponents, NoSearchResults } from './EmptyStates';
-import { useLibraryContext } from './common/context/LibraryContext';
+import { useOptionalLibraryContext } from './common/context/LibraryContext';
 import { useSidebarContext } from './common/context/SidebarContext';
 import CollectionCard from './components/CollectionCard';
 import ComponentCard from './components/ComponentCard';
@@ -25,7 +25,7 @@ type LibraryContentProps = {
   contentType?: ContentType;
 };
 
-const LibraryItemCard = {
+export const LibraryItemCard = {
   collection: CollectionCard,
   library_block: ComponentCard,
   library_container: ContainerCard,
@@ -42,7 +42,7 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     isFiltered,
     usageKey,
   } = useSearchContext();
-  const { libraryId, openCreateCollectionModal, collectionId } = useLibraryContext();
+  const { libraryId, openCreateCollectionModal, collectionId } = useOptionalLibraryContext();
   const { openAddContentSidebar, openComponentInfoSidebar } = useSidebarContext();
   const { insideCollection } = useLibraryRoutes();
   /**
@@ -53,11 +53,11 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
   */
   const showPlaceholderBlocks = ([ContentType.home].includes(contentType) || insideCollection) && !isFiltered;
   const { data: placeholderBlocks } = useMigrationBlocksInfo(
-    libraryId,
+    libraryId!,
     collectionId,
     true,
     undefined,
-    showPlaceholderBlocks,
+    !!libraryId && showPlaceholderBlocks,
   );
   // Fetch unsupported blocks usage_key information from meilisearch index.
   const { data: placeholderData } = useGetContentHits(
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
index 047269e42..5dee9176c 100644
--- a/src/library-authoring/LibraryLayout.tsx
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -43,8 +43,8 @@ const LibraryLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) =
       libraryId={libraryId}
       /** NOTE: The component picker modal to use. We need to pass it as a reference instead of
        * directly importing it to avoid the import cycle:
-       * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
-       * Sidebar > AddContent > ComponentPicker */
+       * LibraryAndComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+       * Sidebar > AddContent > LibraryAndComponentPicker */
       componentPicker={ComponentPicker}
     >
       <SidebarProvider>
diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
index ba27af218..37ef2e72c 100644
--- a/src/library-authoring/__mocks__/library-search.json
+++ b/src/library-authoring/__mocks__/library-search.json
@@ -525,13 +525,101 @@
           "published": {
             "display_name": "Published Test Unit"
           }
+        },
+        {
+          "display_name": "Test subsection",
+          "block_id": "test-subsection-9284e2",
+          "id": "lctAximTESTunittest-subsection-9284e2-a9a4386e",
+          "type": "library_container",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1742221203.895054,
+          "modified": 1742221203.895054,
+          "usage_key": "lct:org:lib:subsection:test-unit-9a207",
+          "block_type": "subsection",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "num_children": 0,
+          "_formatted": {
+            "display_name": "Test subsection",
+            "block_id": "test-subsection-9284e2",
+            "id": "lctAximTESTunittest-subsection-9284e2-a9a4386e",
+            "type": "library_container",
+            "breadcrumbs": [
+              {
+                "display_name": "Test Library"
+              }
+            ],
+            "created": "1742221203.895054",
+            "modified": "1742221203.895054",
+            "usage_key": "lct:org:lib:unit:test-subsection-9a207",
+            "block_type": "subsection",
+            "context_key": "lib:Axim:TEST",
+            "org": "Axim",
+            "access_id": "15",
+            "num_children": "0",
+            "published": {
+              "display_name": "Published Test subsection"
+            }
+          },
+          "published": {
+            "display_name": "Published Test subsection"
+          }
+        },
+        {
+          "display_name": "Test section",
+          "block_id": "test-section-9284e2",
+          "id": "lctAximTESTunittest-section-9284e2-a9a4386e",
+          "type": "library_container",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1742221203.895054,
+          "modified": 1742221203.895054,
+          "usage_key": "lct:org:lib:section:test-unit-9a207",
+          "block_type": "section",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "num_children": 0,
+          "_formatted": {
+            "display_name": "Test section",
+            "block_id": "test-section-9284e2",
+            "id": "lctAximTESTunittest-section-9284e2-a9a4386e",
+            "type": "library_container",
+            "breadcrumbs": [
+              {
+                "display_name": "Test Library"
+              }
+            ],
+            "created": "1742221203.895054",
+            "modified": "1742221203.895054",
+            "usage_key": "lct:org:lib:unit:test-section-9a207",
+            "block_type": "section",
+            "context_key": "lib:Axim:TEST",
+            "org": "Axim",
+            "access_id": "15",
+            "num_children": "0",
+            "published": {
+              "display_name": "Published Test section"
+            }
+          },
+          "published": {
+            "display_name": "Published Test section"
+          }
         }
       ],
       "query": "",
       "processingTimeMs": 1,
       "limit": 20,
       "offset": 0,
-      "estimatedTotalHits": 10
+      "estimatedTotalHits": 19
     },
     {
       "indexUid": "studio_content",
diff --git a/src/library-authoring/add-content/AddContent.tsx b/src/library-authoring/add-content/AddContent.tsx
index 771acb53b..735ca07e0 100644
--- a/src/library-authoring/add-content/AddContent.tsx
+++ b/src/library-authoring/add-content/AddContent.tsx
@@ -53,6 +53,7 @@ type AddContentViewProps = {
   onCreateContent: (blockType: string) => void,
   isAddLibraryContentModalOpen: boolean,
   closeAddLibraryContentModal: () => void,
+  isComponentPicker?: boolean,
 };
 
 type AddAdvancedContentViewProps = {
@@ -87,9 +88,9 @@ const AddContentView = ({
   onCreateContent,
   isAddLibraryContentModalOpen,
   closeAddLibraryContentModal,
+  isComponentPicker,
 }: AddContentViewProps) => {
   const intl = useIntl();
-  const { componentPicker } = useLibraryContext();
   const {
     insideCollection,
     insideUnit,
@@ -231,7 +232,7 @@ const AddContentView = ({
   return (
     <>
       {visibleButtons}
-      {componentPicker && visibleButtons.includes(existingContentButton) && (
+      {isComponentPicker && visibleButtons.includes(existingContentButton) && (
         <PickLibraryContentModal
           isOpen={isAddLibraryContentModalOpen}
           onClose={closeAddLibraryContentModal}
@@ -312,6 +313,7 @@ const AddContent = () => {
     openCreateCollectionModal,
     setCreateContainerModalType,
     openComponentEditor,
+    componentPicker,
   } = useLibraryContext();
   const {
     insideCollection,
@@ -458,7 +460,7 @@ const AddContent = () => {
     const suportedEditorTypes = Object.values(blockTypes);
     if (suportedEditorTypes.includes(blockType)) {
       // linkComponent on editor close.
-      openComponentEditor('', (data) => data && linkComponent(data.id), blockType);
+      openComponentEditor?.('', (data) => data && linkComponent(data.id), blockType);
     } else {
       createBlockMutation.mutateAsync({
         libraryId,
@@ -483,7 +485,7 @@ const AddContent = () => {
     if (blockType === 'paste') {
       onPaste();
     } else if (blockType === 'collection') {
-      openCreateCollectionModal();
+      openCreateCollectionModal?.();
     } else if (blockType === 'libraryContent') {
       showAddLibraryContentModal();
     } else if (blockType === 'advancedXBlock') {
@@ -493,7 +495,7 @@ const AddContent = () => {
       ContainerType.Subsection,
       ContainerType.Section,
     ].includes(blockType as ContainerType)) {
-      setCreateContainerModalType(blockType as ContainerType);
+      setCreateContainerModalType?.(blockType as ContainerType);
     } else {
       onCreateBlock(blockType);
     }
@@ -519,6 +521,7 @@ const AddContent = () => {
           onCreateContent={onCreateContent}
           isAddLibraryContentModalOpen={isAddLibraryContentModalOpen}
           closeAddLibraryContentModal={closeAddLibraryContentModal}
+          isComponentPicker={!!componentPicker}
         />
       )}
     </Stack>
diff --git a/src/library-authoring/add-content/PickLibraryContentModal.tsx b/src/library-authoring/add-content/PickLibraryContentModal.tsx
index 43993d375..f74460e47 100644
--- a/src/library-authoring/add-content/PickLibraryContentModal.tsx
+++ b/src/library-authoring/add-content/PickLibraryContentModal.tsx
@@ -8,7 +8,7 @@ import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 
 import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { LibraryProvider, useLibraryContext } from '../common/context/LibraryContext';
 import type { SelectedComponent } from '../common/context/ComponentPickerContext';
 import { useAddItemsToCollection, useAddItemsToContainer } from '../data/apiHooks';
 import genericMessages from '../generic/messages';
@@ -123,13 +123,18 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
         </ActionRow>
       )}
     >
-      <ComponentPicker
+      <LibraryProvider
         libraryId={libraryId}
-        componentPickerMode="multiple"
-        onChangeComponentSelection={setSelectedComponents}
-        extraFilter={extraFilter}
-        visibleTabs={visibleTabs}
-      />
+        skipUrlUpdate
+      >
+        <ComponentPicker
+          libraryId={libraryId}
+          componentPickerMode="multiple"
+          onChangeComponentSelection={setSelectedComponents}
+          extraFilter={extraFilter}
+          visibleTabs={visibleTabs}
+        />
+      </LibraryProvider>
     </StandardModal>
   );
 };
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
index a98f99ca0..13a85a4b7 100644
--- a/src/library-authoring/collections/CollectionDetails.tsx
+++ b/src/library-authoring/collections/CollectionDetails.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { getItemIcon } from '../../generic/block-type-utils';
 import { ToastContext } from '../../generic/toast-context';
 import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import HistoryWidget from '../generic/history-widget';
@@ -38,14 +38,15 @@ const BlockCount = ({
 };
 
 const CollectionStatsWidget = () => {
-  const { libraryId } = useLibraryContext();
+  const { libraryId } = useOptionalLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
   const collectionId = sidebarItemInfo?.id;
 
-  const { data: blockTypes } = useGetBlockTypes([
-    `context_key = "${libraryId}"`,
-    `collections.key = "${collectionId}"`,
-  ]);
+  const blockQuery = [`collections.key = "${collectionId}"`];
+  if (libraryId) {
+    blockQuery.splice(0, 0, `context_key = "${libraryId}"`);
+  }
+  const { data: blockTypes } = useGetBlockTypes(blockQuery);
 
   if (!blockTypes) {
     return null;
@@ -99,7 +100,7 @@ const CollectionStatsWidget = () => {
 const CollectionDetails = () => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
-  const { libraryId, readOnly } = useLibraryContext();
+  const { libraryId, readOnly } = useOptionalLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const collectionId = sidebarItemInfo?.id;
@@ -108,7 +109,7 @@ const CollectionDetails = () => {
     throw new Error('collectionId is required');
   }
 
-  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const updateMutation = useUpdateCollection();
   const { data: collection } = useCollection(libraryId, collectionId);
 
   const [description, setDescription] = useState(collection?.description || '');
@@ -125,11 +126,13 @@ const CollectionDetails = () => {
 
   const onSubmit = (e: React.FocusEvent<HTMLTextAreaElement>) => {
     const newDescription = e.target.value;
-    if (newDescription === collection.description) {
+    if (!libraryId || newDescription === collection.description) {
       return;
     }
     updateMutation.mutateAsync({
-      description: newDescription,
+      libraryId,
+      collectionId,
+      data: { description: newDescription },
     }).then(() => {
       showToast(intl.formatMessage(messages.updateCollectionSuccessMsg));
     }).catch(() => {
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
index ed34e5816..fc0709fb7 100644
--- a/src/library-authoring/collections/CollectionInfo.tsx
+++ b/src/library-authoring/collections/CollectionInfo.tsx
@@ -8,7 +8,7 @@ import {
 import { useCallback } from 'react';
 
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import {
   type CollectionInfoTab,
   COLLECTION_INFO_TABS,
@@ -26,7 +26,7 @@ const CollectionInfo = () => {
   const intl = useIntl();
 
   const { componentPickerMode } = useComponentPickerContext();
-  const { libraryId, setCollectionId } = useLibraryContext();
+  const { libraryId, setCollectionId } = useOptionalLibraryContext();
   const { sidebarItemInfo, sidebarTab, setSidebarTab } = useSidebarContext();
 
   const tab: CollectionInfoTab = (
@@ -39,14 +39,14 @@ const CollectionInfo = () => {
     throw new Error('collectionId is required');
   }
 
-  const collectionUsageKey = buildCollectionUsageKey(libraryId, collectionId);
+  const collectionUsageKey = libraryId ? buildCollectionUsageKey(libraryId, collectionId) : undefined;
 
   const { insideCollection, navigateTo } = useLibraryRoutes();
   const showOpenCollectionButton = !insideCollection || componentPickerMode;
 
   const handleOpenCollection = useCallback(() => {
     if (componentPickerMode) {
-      setCollectionId(collectionId);
+      setCollectionId?.(collectionId);
     } else {
       navigateTo({ collectionId });
     }
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
index ffe22778f..f91bcf6d4 100644
--- a/src/library-authoring/collections/CollectionInfoHeader.tsx
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -3,7 +3,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { InplaceTextEditor } from '../../generic/inplace-text-editor';
 import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { useCollection, useUpdateCollection } from '../data/apiHooks';
 import messages from './messages';
@@ -11,7 +11,7 @@ import messages from './messages';
 const CollectionInfoHeader = () => {
   const intl = useIntl();
 
-  const { libraryId, readOnly } = useLibraryContext();
+  const { libraryId, readOnly } = useOptionalLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const collectionId = sidebarItemInfo?.id;
@@ -23,14 +23,15 @@ const CollectionInfoHeader = () => {
 
   const { data: collection } = useCollection(libraryId, collectionId);
 
-  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const updateMutation = useUpdateCollection();
   const { showToast } = useContext(ToastContext);
 
   const handleSaveTitle = async (newTitle: string) => {
+    if (!libraryId) {
+      return;
+    }
     try {
-      await updateMutation.mutateAsync({
-        title: newTitle,
-      });
+      await updateMutation.mutateAsync({ libraryId, collectionId, data: { title: newTitle } });
       showToast(intl.formatMessage(messages.updateCollectionSuccessMsg));
     } catch {
       showToast(intl.formatMessage(messages.updateCollectionErrorMsg));
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index 05a209a63..017d32e2b 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { useLibraryRoutes } from '../routes';
 import Loading from '../../generic/Loading';
 import ErrorAlert from '../../generic/alert-error';
@@ -29,7 +30,7 @@ import {
 import { SubHeaderTitle } from '../LibraryAuthoringPage';
 import { useCollection, useContentLibrary } from '../data/apiHooks';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyItemId, useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
 import { LibrarySidebar } from '../library-sidebar';
@@ -40,7 +41,7 @@ const HeaderActions = () => {
   const intl = useIntl();
 
   const { componentPickerMode } = useComponentPickerContext();
-  const { collectionId, readOnly } = useLibraryContext();
+  const { collectionId, readOnly } = useOptionalLibraryContext();
   const {
     closeLibrarySidebar,
     openAddContentSidebar,
@@ -101,14 +102,14 @@ const LibraryCollectionPage = () => {
   const intl = useIntl();
 
   const { componentPickerMode } = useComponentPickerContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const {
     libraryId,
     collectionId,
-    showOnlyPublished,
     extraFilter: contextExtraFilter,
     setCollectionId,
     readOnly,
-  } = useLibraryContext();
+  } = useOptionalLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const {
@@ -120,7 +121,7 @@ const LibraryCollectionPage = () => {
 
   const { data: libraryData, isPending: isLibLoading } = useContentLibrary(libraryId);
 
-  if (!collectionId || !libraryId) {
+  if (!collectionId || (!componentPickerMode && !libraryId)) {
     // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
     throw new Error('Rendered without collectionId or libraryId URL parameter');
   }
@@ -168,7 +169,7 @@ const LibraryCollectionPage = () => {
         },
         {
           label: intl.formatMessage(messages.returnToLibrary),
-          onClick: () => { setCollectionId(undefined); },
+          onClick: () => { setCollectionId?.(undefined); },
         },
       ]}
       spacer={<Icon src={ArrowBack} size="sm" />}
@@ -176,7 +177,10 @@ const LibraryCollectionPage = () => {
     />
   );
 
-  const extraFilter = [`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`];
+  const extraFilter = [`collections.key = "${collectionId}"`];
+  if (libraryId) {
+    extraFilter.splice(0, 0, `context_key = "${libraryId}"`);
+  }
   if (showOnlyPublished) {
     extraFilter.push('last_published IS NOT NULL');
   }
diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
index 83c258ec1..a5f46112f 100644
--- a/src/library-authoring/common/context/ComponentPickerContext.tsx
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -24,24 +24,28 @@ type NoComponentPickerType = {
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary?: never;
+  extraFilter?: never;
 };
 
-type ComponentPickerSingleType = {
+type BasePickerType = {
+  restrictToLibrary: boolean;
+  extraFilter: string[],
+};
+
+type ComponentPickerSingleType = BasePickerType & {
   componentPickerMode: 'single';
   onComponentSelected: ComponentSelectedEvent;
   selectedComponents?: never;
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
-  restrictToLibrary: boolean;
 };
 
-type ComponentPickerMultipleType = {
+type ComponentPickerMultipleType = BasePickerType & {
   componentPickerMode: 'multiple';
   onComponentSelected?: never;
   selectedComponents: SelectedComponent[];
   addComponentToSelectedComponents: ComponentSelectedEvent;
   removeComponentFromSelectedComponents: ComponentSelectedEvent;
-  restrictToLibrary: boolean;
 };
 
 type ComponentPickerContextData = ComponentPickerSingleType | ComponentPickerMultipleType;
@@ -54,18 +58,22 @@ type ComponentPickerContextData = ComponentPickerSingleType | ComponentPickerMul
  */
 const ComponentPickerContext = createContext<ComponentPickerContextData | undefined>(undefined);
 
-export type ComponentPickerSingleProps = {
+type BasePickerProps = {
+  restrictToLibrary?: boolean;
+  /** Only show published components */
+  extraFilter?: string[],
+};
+
+export type ComponentPickerSingleProps = BasePickerProps & {
   componentPickerMode: 'single';
   onComponentSelected: ComponentSelectedEvent;
   onChangeComponentSelection?: never;
-  restrictToLibrary?: boolean;
 };
 
-export type ComponentPickerMultipleProps = {
+export type ComponentPickerMultipleProps = BasePickerProps & {
   componentPickerMode: 'multiple';
   onComponentSelected?: never;
   onChangeComponentSelection?: ComponentSelectionChangedEvent;
-  restrictToLibrary?: boolean;
 };
 
 type ComponentPickerProps = ComponentPickerSingleProps | ComponentPickerMultipleProps;
@@ -83,6 +91,7 @@ export const ComponentPickerProvider = ({
   restrictToLibrary = false,
   onComponentSelected,
   onChangeComponentSelection,
+  extraFilter,
 }: ComponentPickerProviderProps) => {
   const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
 
@@ -123,6 +132,7 @@ export const ComponentPickerProvider = ({
           componentPickerMode,
           restrictToLibrary,
           onComponentSelected,
+          extraFilter: extraFilter || [],
         };
       case 'multiple':
         return {
@@ -131,6 +141,7 @@ export const ComponentPickerProvider = ({
           selectedComponents,
           addComponentToSelectedComponents,
           removeComponentFromSelectedComponents,
+          extraFilter: extraFilter || [],
         };
       default:
         // istanbul ignore next: this should never happen
@@ -144,6 +155,7 @@ export const ComponentPickerProvider = ({
     removeComponentFromSelectedComponents,
     selectedComponents,
     onChangeComponentSelection,
+    extraFilter,
   ]);
 
   return (
diff --git a/src/library-authoring/common/context/LibraryContext.tsx b/src/library-authoring/common/context/LibraryContext.tsx
index 7b775a279..1e6a80cdb 100644
--- a/src/library-authoring/common/context/LibraryContext.tsx
+++ b/src/library-authoring/common/context/LibraryContext.tsx
@@ -34,8 +34,6 @@ export type LibraryContextData = {
   setCollectionId: (collectionId?: string) => void;
   containerId: string | undefined;
   setContainerId: (containerId?: string) => void;
-  // Only show published components
-  showOnlyPublished: boolean;
   // Additional filtering
   extraFilter?: string[];
   // "Create New Collection" modal
@@ -66,17 +64,16 @@ export type LibraryContextData = {
 const LibraryContext = createContext<LibraryContextData | undefined>(undefined);
 
 type LibraryProviderProps = {
-  children?: React.ReactNode;
   libraryId: string;
-  showOnlyPublished?: boolean;
+  children?: React.ReactNode;
   extraFilter?: string[]
   // If set, will initialize the current collection and/or component from the current URL
   skipUrlUpdate?: boolean;
 
   /** The component picker modal to use. We need to pass it as a reference instead of
    * directly importing it to avoid the import cycle:
-   * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
-   * Sidebar > AddContent > ComponentPicker */
+   * LibraryAndComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+   * Sidebar > AddContent > LibraryAndComponentPicker */
   componentPicker?: typeof ComponentPicker;
 };
 
@@ -86,7 +83,6 @@ type LibraryProviderProps = {
 export const LibraryProvider = ({
   children,
   libraryId,
-  showOnlyPublished = false,
   extraFilter = [],
   skipUrlUpdate = false,
   componentPicker,
@@ -115,9 +111,9 @@ export const LibraryProvider = ({
       action: CONTENT_LIBRARY_PERMISSIONS.PUBLISH_LIBRARY_CONTENT,
       scope: libraryId,
     },
-  });
-  const canPublish = userPermissions?.canPublish || false;
-  const readOnly = !!componentPickerMode || !libraryData?.canEditLibrary;
+  }, typeof libraryId !== 'undefined');
+  const canPublish = !libraryId || userPermissions?.canPublish || false;
+  const readOnly = !libraryId || !!componentPickerMode || !libraryData?.canEditLibrary;
 
   // Parse the initial collectionId and/or container ID(s) from the current URL params
   const params = useParams();
@@ -143,7 +139,6 @@ export const LibraryProvider = ({
       readOnly,
       canPublish,
       isLoadingLibraryData: isLoadingLibraryData || isLoadingUserPermissions,
-      showOnlyPublished,
       extraFilter,
       isCreateCollectionModalOpen,
       openCreateCollectionModal,
@@ -168,7 +163,6 @@ export const LibraryProvider = ({
     canPublish,
     isLoadingLibraryData,
     isLoadingUserPermissions,
-    showOnlyPublished,
     extraFilter,
     isCreateCollectionModalOpen,
     openCreateCollectionModal,
@@ -186,19 +180,16 @@ export const LibraryProvider = ({
   );
 };
 
-export function useLibraryContext(
-  allowEmtpy?: false,
-): LibraryContextData; // never undefined
-export function useLibraryContext(
-  allowEmtpy: true,
-): LibraryContextData | undefined; // may be undefined
-export function useLibraryContext(
-  allowEmtpy?: boolean,
-): LibraryContextData | undefined {
+export function useLibraryContext(): LibraryContextData {
   const ctx = useContext(LibraryContext);
-  if (!allowEmtpy && ctx === undefined) {
+  if (ctx === undefined) {
     /* istanbul ignore next */
     throw new Error('useLibraryContext() was used in a component without a <LibraryProvider> ancestor.');
   }
   return ctx;
 }
+
+export function useOptionalLibraryContext(): Partial<LibraryContextData> {
+  const ctx = useContext(LibraryContext);
+  return ctx || { readOnly: true };
+}
diff --git a/src/library-authoring/common/context/MultiLibraryContext.tsx b/src/library-authoring/common/context/MultiLibraryContext.tsx
new file mode 100644
index 000000000..c2a310bb0
--- /dev/null
+++ b/src/library-authoring/common/context/MultiLibraryContext.tsx
@@ -0,0 +1,54 @@
+import { useStickyState } from '@src/hooks';
+import React from 'react';
+
+interface MultiLibraryContextProps {
+  selectedLibraries: string[];
+  setSelectedLibraries: React.Dispatch<React.SetStateAction<string[]>>;
+  selectedCollections: string[];
+  setSelectedCollections: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const Context = React.createContext<MultiLibraryContextProps | undefined>(undefined);
+
+export const MultiLibraryProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [selectedLibraries, setSelectedLibraries] = useStickyState<string[]>([], 'outline-library-filter');
+  const [selectedCollections, setSelectedCollections] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    if (selectedLibraries.length !== 1) {
+      setSelectedCollections([]);
+    }
+  }, [selectedLibraries, setSelectedCollections]);
+
+  const context = React.useMemo(() => ({
+    selectedLibraries,
+    setSelectedLibraries,
+    selectedCollections,
+    setSelectedCollections,
+  }), [
+    selectedLibraries,
+    setSelectedLibraries,
+    selectedCollections,
+    setSelectedCollections,
+  ]);
+
+  return (
+    <Context.Provider value={context}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useMultiLibraryContext = (): MultiLibraryContextProps => {
+  const ctx = React.useContext(Context);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    return {
+      selectedLibraries: [],
+      setSelectedLibraries: () => {},
+      selectedCollections: [],
+      setSelectedCollections: () => {},
+    };
+  }
+  return ctx;
+};
diff --git a/src/library-authoring/common/context/PublishedFilterContext.tsx b/src/library-authoring/common/context/PublishedFilterContext.tsx
new file mode 100644
index 000000000..443595ea3
--- /dev/null
+++ b/src/library-authoring/common/context/PublishedFilterContext.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface PublishedFilterContextProps {
+  showOnlyPublished?: boolean;
+}
+
+const Context = React.createContext<PublishedFilterContextProps | undefined>(undefined);
+
+export const PublishedFilterContextProvider: React.FC<PublishedFilterContextProps & { children: React.ReactNode }> = ({
+  showOnlyPublished,
+  children,
+}) => {
+  const context = React.useMemo(() => ({ showOnlyPublished }), [showOnlyPublished]);
+
+  return (
+    <Context.Provider value={context}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const usePublishedFilterContext = (): PublishedFilterContextProps => {
+  const ctx = React.useContext(Context);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    return {
+      showOnlyPublished: false,
+    };
+  }
+  return ctx;
+};
diff --git a/src/library-authoring/common/context/SidebarContext.tsx b/src/library-authoring/common/context/SidebarContext.tsx
index c7695880c..5e09985d7 100644
--- a/src/library-authoring/common/context/SidebarContext.tsx
+++ b/src/library-authoring/common/context/SidebarContext.tsx
@@ -10,7 +10,7 @@ import { useParams } from 'react-router-dom';
 import { useStateWithUrlSearchParam } from '@src/hooks';
 import { LibQueryParamKeys, useLibraryRoutes } from '@src/library-authoring/routes';
 import { useComponentPickerContext } from './ComponentPickerContext';
-import { useLibraryContext } from './LibraryContext';
+import { useOptionalLibraryContext } from './LibraryContext';
 
 export enum SidebarBodyItemId {
   AddContent = 'add-content',
@@ -187,7 +187,7 @@ export const SidebarProvider = ({
 
   // Set the initial sidebar state based on the URL parameters and context.
   const { selectedItemId, index: indexParam } = useParams();
-  const { collectionId, containerId } = useLibraryContext();
+  const { collectionId, containerId } = useOptionalLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
 
   useEffect(() => {
diff --git a/src/library-authoring/component-info/ComponentAdvancedAssets.tsx b/src/library-authoring/component-info/ComponentAdvancedAssets.tsx
index b258f5b39..cddac1aa6 100644
--- a/src/library-authoring/component-info/ComponentAdvancedAssets.tsx
+++ b/src/library-authoring/component-info/ComponentAdvancedAssets.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage, FormattedNumber, useIntl } from '@edx/frontend-platfo
 
 import { LoadingSpinner } from '../../generic/Loading';
 import DeleteModal from '../../generic/delete-modal/DeleteModal';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { getXBlockAssetsApiUrl } from '../data/api';
 import { useDeleteXBlockAsset, useInvalidateXBlockAssets, useXBlockAssets } from '../data/apiHooks';
@@ -18,7 +18,7 @@ import messages from './messages';
 
 export const ComponentAdvancedAssets: React.FC<Record<never, never>> = () => {
   const intl = useIntl();
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const usageKey = sidebarItemInfo?.id;
diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
index 01d2befa3..1ddf5707b 100644
--- a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
+++ b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
@@ -1,3 +1,4 @@
+import { PublishedFilterContextProvider } from '@src/library-authoring/common/context/PublishedFilterContext';
 import {
   fireEvent,
   initializeMocks,
@@ -32,15 +33,17 @@ const render = (
   <ComponentAdvancedInfo />,
   {
     extraWrapper: ({ children }: { children: React.ReactNode }) => (
-      <LibraryProvider libraryId={libraryId} showOnlyPublished={showOnlyPublished}>
-        <SidebarProvider
-          initialSidebarItemInfo={{
-            id: usageKey,
-            type: SidebarBodyItemId.ComponentInfo,
-          }}
-        >
-          {children}
-        </SidebarProvider>
+      <LibraryProvider libraryId={libraryId}>
+        <PublishedFilterContextProvider showOnlyPublished={showOnlyPublished}>
+          <SidebarProvider
+            initialSidebarItemInfo={{
+              id: usageKey,
+              type: SidebarBodyItemId.ComponentInfo,
+            }}
+          >
+            {children}
+          </SidebarProvider>
+        </PublishedFilterContextProvider>
       </LibraryProvider>
     ),
   },
diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx
index e1dbcea9b..2cdc3f435 100644
--- a/src/library-authoring/component-info/ComponentAdvancedInfo.tsx
+++ b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx
@@ -9,9 +9,10 @@ import {
 } from '@openedx/paragon';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { LoadingSpinner } from '../../generic/Loading';
 import { CodeEditor, EditorAccessor } from '../../generic/CodeEditor';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import {
   useUpdateXBlockOLX,
@@ -22,7 +23,8 @@ import { ComponentAdvancedAssets } from './ComponentAdvancedAssets';
 
 const ComponentAdvancedInfoInner: React.FC<Record<never, never>> = () => {
   const intl = useIntl();
-  const { readOnly, showOnlyPublished } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const usageKey = sidebarItemInfo?.id;
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
index 8e8d8adaa..55c2a8983 100644
--- a/src/library-authoring/component-info/ComponentInfo.tsx
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -14,7 +14,7 @@ import {
 import { getBlockType } from '@src/generic/key-utils';
 
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import {
   type ComponentInfoTab,
   COMPONENT_INFO_TABS,
@@ -107,7 +107,7 @@ const ComponentActions = ({
   hasUnpublishedChanges: boolean,
 }) => {
   const intl = useIntl();
-  const { openComponentEditor } = useLibraryContext();
+  const { openComponentEditor } = useOptionalLibraryContext();
   const [isPublisherOpen, openPublisher, closePublisher] = useToggle(false);
   const canEdit = canEditComponent(componentId);
 
@@ -125,7 +125,7 @@ const ComponentActions = ({
   return (
     <div className="d-flex flex-wrap">
       <Button
-        {...(canEdit ? { onClick: () => openComponentEditor(componentId) } : { disabled: true })}
+        {...(canEdit ? { onClick: () => openComponentEditor?.(componentId) } : { disabled: true })}
         variant="outline-primary"
         className="m-1 text-nowrap flex-grow-1"
       >
@@ -151,7 +151,7 @@ const ComponentActions = ({
 
 const ComponentInfo = () => {
   const intl = useIntl();
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
 
   const {
     sidebarTab,
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.tsx b/src/library-authoring/component-info/ComponentInfoHeader.tsx
index 24afe0991..e06b53be0 100644
--- a/src/library-authoring/component-info/ComponentInfoHeader.tsx
+++ b/src/library-authoring/component-info/ComponentInfoHeader.tsx
@@ -1,9 +1,10 @@
 import { useContext } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { InplaceTextEditor } from '../../generic/inplace-text-editor';
 import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { useUpdateXBlockFields, useXBlockFields } from '../data/apiHooks';
 import messages from './messages';
@@ -11,7 +12,8 @@ import messages from './messages';
 const ComponentInfoHeader = () => {
   const intl = useIntl();
 
-  const { readOnly, showOnlyPublished } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const usageKey = sidebarItemInfo?.id;
diff --git a/src/library-authoring/component-info/ComponentManagement.tsx b/src/library-authoring/component-info/ComponentManagement.tsx
index ee16908bc..6485fe28f 100644
--- a/src/library-authoring/component-info/ComponentManagement.tsx
+++ b/src/library-authoring/component-info/ComponentManagement.tsx
@@ -6,7 +6,7 @@ import {
   BookOpen, ExpandLess, ExpandMore, Tag,
 } from '@openedx/paragon/icons';
 
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
 import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
 import { useLibraryBlockMetadata, useUpdateComponentCollections } from '../data/apiHooks';
@@ -16,7 +16,7 @@ import messages from './messages';
 
 const ComponentManagement = () => {
   const intl = useIntl();
-  const { readOnly, isLoadingLibraryData } = useLibraryContext();
+  const { readOnly, isLoadingLibraryData } = useOptionalLibraryContext();
   const { sidebarItemInfo, sidebarAction, resetSidebarAction } = useSidebarContext();
   const jumpToCollections = sidebarAction === SidebarActions.JumpToManageCollections;
   const jumpToTags = sidebarAction === SidebarActions.JumpToManageTags;
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 8e4804a7d..01a9a0163 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -2,7 +2,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, StandardModal, useToggle } from '@openedx/paragon';
 import { OpenInFull } from '@openedx/paragon/icons';
 
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { LibraryBlock } from '../LibraryBlock';
 import messages from './messages';
@@ -17,7 +17,7 @@ interface ModalComponentPreviewProps {
 
 const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPreviewProps) => {
   const intl = useIntl();
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   return (
     <StandardModal
@@ -41,7 +41,7 @@ const ComponentPreview = () => {
   const intl = useIntl();
 
   const [isModalOpen, openModal, closeModal] = useToggle();
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { sidebarItemInfo } = useSidebarContext();
 
   const usageKey = sidebarItemInfo?.id;
diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
index 5e9bd9373..0cd84192f 100644
--- a/src/library-authoring/component-picker/ComponentPicker.test.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -18,7 +18,7 @@ import {
   mockGetContainerMetadata,
 } from '../data/api.mocks';
 
-import { ComponentPicker } from './ComponentPicker';
+import { LibraryAndComponentPicker } from './ComponentPicker';
 import { ContentType } from '../routes';
 
 jest.mock('react-router-dom', () => ({
@@ -46,7 +46,7 @@ mockGetContainerMetadata.applyMock();
 
 let postMessageSpy: jest.SpyInstance;
 
-describe('<ComponentPicker />', () => {
+describe('<LibraryAndComponentPicker />', () => {
   beforeEach(() => {
     initializeMocks();
     postMessageSpy = jest.spyOn(window.parent, 'postMessage');
@@ -55,7 +55,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should be able to switch tabs', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -99,7 +99,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should pick component using the component card button', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -122,7 +122,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should pick component using the component sidebar', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -150,7 +150,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should open the unit sidebar', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -169,7 +169,7 @@ describe('<ComponentPicker />', () => {
 
   it('double clicking a collection should open it', async () => {
     const user = userEvent.setup();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -193,7 +193,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should pick component inside a collection using the card', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -231,7 +231,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should pick component inside a collection using the sidebar', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -274,7 +274,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should return to library selection', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -288,7 +288,7 @@ describe('<ComponentPicker />', () => {
 
   it('should pick multiple components using the component card button', async () => {
     const onChange = jest.fn();
-    render(<ComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
+    render(<LibraryAndComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -338,7 +338,7 @@ describe('<ComponentPicker />', () => {
 
   it('should pick multilpe components using the component sidebar', async () => {
     const onChange = jest.fn();
-    render(<ComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
+    render(<LibraryAndComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -374,7 +374,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should display an alert banner when showOnlyPublished is true', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -385,7 +385,7 @@ describe('<ComponentPicker />', () => {
 
   it('should display all tabs', async () => {
     // Default `visibleTabs = allLibraryPageTabs`
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -397,7 +397,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should display only units', async () => {
-    render(<ComponentPicker visibleTabs={[ContentType.units]} />);
+    render(<LibraryAndComponentPicker visibleTabs={[ContentType.units]} />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -408,7 +408,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should not display never published filter', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
@@ -424,7 +424,7 @@ describe('<ComponentPicker />', () => {
   });
 
   it('should not display never published filter in collection page', async () => {
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
index 170de643d..d8d56e28d 100644
--- a/src/library-authoring/component-picker/ComponentPicker.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.tsx
@@ -3,12 +3,14 @@ import { useLocation } from 'react-router-dom';
 import { Alert, Stepper } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
+import { FiltersProps } from '@src/library-authoring/library-filters';
+import { PublishedFilterContextProvider } from '@src/library-authoring/common/context/PublishedFilterContext';
 import {
   type ComponentSelectedEvent,
   type ComponentSelectionChangedEvent,
   ComponentPickerProvider,
 } from '../common/context/ComponentPickerContext';
-import { LibraryProvider, useLibraryContext } from '../common/context/LibraryContext';
+import { LibraryProvider, useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { SidebarProvider } from '../common/context/SidebarContext';
 import LibraryAuthoringPage from '../LibraryAuthoringPage';
 import LibraryCollectionPage from '../collections/LibraryCollectionPage';
@@ -17,15 +19,17 @@ import messages from './messages';
 import { ContentType, allLibraryPageTabs } from '../routes';
 
 interface LibraryComponentPickerProps {
-  returnToLibrarySelection: () => void;
+  returnToLibrarySelection?: () => void;
   visibleTabs: ContentType[],
+  FiltersComponent?: React.ComponentType<FiltersProps>;
 }
 
 const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({
   returnToLibrarySelection,
   visibleTabs,
+  FiltersComponent,
 }) => {
-  const { collectionId } = useLibraryContext();
+  const { collectionId } = useOptionalLibraryContext();
 
   if (collectionId) {
     return <LibraryCollectionPage />;
@@ -34,6 +38,7 @@ const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({
     <LibraryAuthoringPage
       returnToLibrarySelection={returnToLibrarySelection}
       visibleTabs={visibleTabs}
+      FiltersComponent={FiltersComponent}
     />
   );
 };
@@ -48,17 +53,18 @@ const defaultSelectionChangedCallback: ComponentSelectionChangedEvent = (selecti
   window.parent.postMessage({ type: 'pickerSelectionChanged', selections }, '*');
 };
 
-type ComponentPickerProps = {
-  libraryId?: string,
+type PickerProps = {
   showOnlyPublished?: boolean,
   extraFilter?: string[],
   visibleTabs?: ContentType[],
   componentPickerMode?: 'single' | 'multiple',
   onComponentSelected?: ComponentSelectedEvent,
   onChangeComponentSelection?: ComponentSelectionChangedEvent,
+  FiltersComponent?: React.ComponentType<FiltersProps>;
 };
 
-export const ComponentPicker: React.FC<ComponentPickerProps> = ({
+/** A component picker that allows the user to select one or more components */
+export const ComponentPicker = ({
   /** Restrict the component picker to a specific library */
   libraryId,
   showOnlyPublished,
@@ -70,26 +76,15 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
    */
   onComponentSelected = defaultComponentSelectedCallback,
   onChangeComponentSelection = defaultSelectionChangedCallback,
-}) => {
-  const [currentStep, setCurrentStep] = useState(!libraryId ? 'select-library' : 'pick-components');
-  const [selectedLibrary, setSelectedLibrary] = useState(libraryId || '');
-
+  FiltersComponent,
+  returnToLibrarySelection,
+}: PickerProps & LibraryComponentPickerProps & { libraryId?: string }) => {
   const location = useLocation();
 
   const queryParams = new URLSearchParams(location.search);
   const variant = queryParams.get('variant') || 'draft';
   const calcShowOnlyPublished = variant === 'published' || showOnlyPublished;
 
-  const handleLibrarySelection = (library: string) => {
-    setCurrentStep('pick-components');
-    setSelectedLibrary(library);
-  };
-
-  const returnToLibrarySelection = () => {
-    setCurrentStep('select-library');
-    setSelectedLibrary('');
-  };
-
   const restrictToLibrary = !!libraryId;
 
   const componentPickerProviderProps = componentPickerMode === 'single' ? {
@@ -102,6 +97,56 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
     restrictToLibrary,
   };
 
+  return (
+    <PublishedFilterContextProvider showOnlyPublished={calcShowOnlyPublished}>
+      <ComponentPickerProvider
+        {...componentPickerProviderProps}
+        extraFilter={extraFilter}
+      >
+        <SidebarProvider>
+          { calcShowOnlyPublished
+            && (
+              <Alert variant="info" className="m-2">
+                <FormattedMessage {...messages.pickerInfoBanner} />
+              </Alert>
+            )}
+          <InnerComponentPicker
+            returnToLibrarySelection={returnToLibrarySelection}
+            visibleTabs={visibleTabs}
+            FiltersComponent={FiltersComponent}
+          />
+        </SidebarProvider>
+      </ComponentPickerProvider>
+    </PublishedFilterContextProvider>
+  );
+};
+
+/** A component picker that allows the user to select one or more components from a library. */
+export const LibraryAndComponentPicker: React.FC<PickerProps> = ({
+  showOnlyPublished,
+  extraFilter,
+  componentPickerMode = 'single',
+  visibleTabs = allLibraryPageTabs,
+  /** This default callback is used to send the selected component back to the parent window,
+   * when the component picker is used in an iframe.
+   */
+  onComponentSelected = defaultComponentSelectedCallback,
+  onChangeComponentSelection = defaultSelectionChangedCallback,
+  FiltersComponent,
+}) => {
+  const [currentStep, setCurrentStep] = useState('select-library');
+  const [selectedLibrary, setSelectedLibrary] = useState<string | undefined>(undefined);
+
+  const handleLibrarySelection = (library: string) => {
+    setSelectedLibrary(library);
+    setCurrentStep('pick-components');
+  };
+
+  const returnToLibrarySelection = () => {
+    setCurrentStep('select-library');
+    setSelectedLibrary('');
+  };
+
   return (
     <Stepper
       activeKey={currentStep}
@@ -113,29 +158,22 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
           itemType={visibleTabs.length === 1 ? visibleTabs[0] : ContentType.components}
         />
       </Stepper.Step>
-
       <Stepper.Step eventKey="pick-components" title="Pick some components">
-        <ComponentPickerProvider {...componentPickerProviderProps}>
-          <LibraryProvider
-            libraryId={selectedLibrary}
-            showOnlyPublished={calcShowOnlyPublished}
+        <LibraryProvider
+          libraryId={selectedLibrary!}
+          skipUrlUpdate
+        >
+          <ComponentPicker
+            showOnlyPublished={showOnlyPublished}
+            returnToLibrarySelection={returnToLibrarySelection}
+            componentPickerMode={componentPickerMode}
+            visibleTabs={visibleTabs}
             extraFilter={extraFilter}
-            skipUrlUpdate
-          >
-            <SidebarProvider>
-              { calcShowOnlyPublished
-                && (
-                <Alert variant="info" className="m-2">
-                  <FormattedMessage {...messages.pickerInfoBanner} />
-                </Alert>
-                )}
-              <InnerComponentPicker
-                returnToLibrarySelection={returnToLibrarySelection}
-                visibleTabs={visibleTabs}
-              />
-            </SidebarProvider>
-          </LibraryProvider>
-        </ComponentPickerProvider>
+            FiltersComponent={FiltersComponent}
+            onComponentSelected={onComponentSelected}
+            onChangeComponentSelection={onChangeComponentSelection}
+          />
+        </LibraryProvider>
       </Stepper.Step>
     </Stepper>
   );
diff --git a/src/library-authoring/component-picker/SelectLibrary.test.tsx b/src/library-authoring/component-picker/SelectLibrary.test.tsx
index aea3aa4b7..0fa3c8775 100644
--- a/src/library-authoring/component-picker/SelectLibrary.test.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.test.tsx
@@ -7,16 +7,16 @@ import {
 import {
   mockGetContentLibraryV2List,
 } from '../data/api.mocks';
-import { ComponentPicker } from './ComponentPicker';
+import { LibraryAndComponentPicker } from './ComponentPicker';
 
-describe('<ComponentPicker />', () => {
+describe('<LibraryAndComponentPicker />', () => {
   beforeEach(() => {
     initializeMocks();
   });
 
   it('should render the library list', async () => {
     mockGetContentLibraryV2List.applyMock();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
     expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
@@ -24,21 +24,21 @@ describe('<ComponentPicker />', () => {
 
   it('should render the loading status', async () => {
     mockGetContentLibraryV2List.applyMockLoading();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
   });
 
   it('should render the no library status', async () => {
     mockGetContentLibraryV2List.applyMockEmpty();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText(/you don't have any libraries created yet,/i)).toBeInTheDocument();
   });
 
   it('should render the no search result status', async () => {
     mockGetContentLibraryV2List.applyMockEmpty();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     const searchField = await screen.findByPlaceholderText('Search for a library');
     fireEvent.change(searchField, { target: { value: 'test' } });
@@ -49,7 +49,7 @@ describe('<ComponentPicker />', () => {
 
   it('should render the error status', async () => {
     mockGetContentLibraryV2List.applyMockError();
-    render(<ComponentPicker />);
+    render(<LibraryAndComponentPicker />);
 
     expect(await screen.findByText(/mocked request failed with status code 500/i)).toBeInTheDocument();
   });
diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
index d9f2e0a19..59cfac6dd 100644
--- a/src/library-authoring/component-picker/SelectLibrary.tsx
+++ b/src/library-authoring/component-picker/SelectLibrary.tsx
@@ -39,7 +39,7 @@ const EmptyState = ({ hasSearchQuery }: EmptyStateProps) => (
 );
 
 interface SelectLibraryProps {
-  selectedLibrary: string;
+  selectedLibrary?: string;
   setSelectedLibrary: (libraryKey: string) => void;
   itemType: ContentType;
 }
diff --git a/src/library-authoring/component-picker/index.ts b/src/library-authoring/component-picker/index.ts
index 5d2ce68f7..51d481764 100644
--- a/src/library-authoring/component-picker/index.ts
+++ b/src/library-authoring/component-picker/index.ts
@@ -1 +1 @@
-export { ComponentPicker } from './ComponentPicker';
+export { LibraryAndComponentPicker, ComponentPicker } from './ComponentPicker';
diff --git a/src/library-authoring/components/CollectionCard.test.tsx b/src/library-authoring/components/CollectionCard.test.tsx
index 8520827e3..259a01101 100644
--- a/src/library-authoring/components/CollectionCard.test.tsx
+++ b/src/library-authoring/components/CollectionCard.test.tsx
@@ -2,6 +2,7 @@ import userEvent from '@testing-library/user-event';
 import type MockAdapter from 'axios-mock-adapter';
 
 import { mockContentLibrary } from '@src/library-authoring/data/api.mocks';
+import { PublishedFilterContextProvider } from '@src/library-authoring/common/context/PublishedFilterContext';
 import {
   initializeMocks, render as baseRender, screen, waitFor, within, fireEvent,
 } from '../../testUtils';
@@ -54,12 +55,11 @@ const render = (
   path: '/library/:libraryId',
   params: { libraryId: libId },
   extraWrapper: ({ children }) => (
-    <LibraryProvider
-      libraryId={libId}
-      showOnlyPublished={showOnlyPublished}
-    >
-      {children}
-    </LibraryProvider>
+    <PublishedFilterContextProvider showOnlyPublished={showOnlyPublished}>
+      <LibraryProvider libraryId={libId}>
+        {children}
+      </LibraryProvider>
+    </PublishedFilterContextProvider>
   ),
 });
 
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
index 2552b611f..0f35d047d 100644
--- a/src/library-authoring/components/CollectionCard.tsx
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -12,8 +12,9 @@ import { Delete, MoreVert } from '@openedx/paragon/icons';
 import DeleteModal from '@src/generic/delete-modal/DeleteModal';
 import { ToastContext } from '@src/generic/toast-context';
 import { type CollectionHit } from '@src/search-manager';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyItemId, useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryRoutes } from '../routes';
 import BaseCard from './BaseCard';
@@ -28,7 +29,7 @@ const CollectionMenu = ({ hit } : CollectionMenuProps) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
   const { navigateTo } = useLibraryRoutes();
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
   const { closeLibrarySidebar, sidebarItemInfo } = useSidebarContext();
   const {
@@ -119,7 +120,8 @@ type CollectionCardProps = {
 
 const CollectionCard = ({ hit } : CollectionCardProps) => {
   const { componentPickerMode } = useComponentPickerContext();
-  const { setCollectionId, showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
+  const { setCollectionId } = useOptionalLibraryContext();
   const { openCollectionInfoSidebar, openItemSidebar, sidebarItemInfo } = useSidebarContext();
 
   const {
@@ -154,7 +156,7 @@ const CollectionCard = ({ hit } : CollectionCardProps) => {
       // In component picker mode, we want to open the sidebar or the collection
       // without changing the URL
     } else if (doubleClicked) {
-      setCollectionId(collectionId);
+      setCollectionId?.(collectionId);
     } else {
       openCollectionInfoSidebar(collectionId);
     }
diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
index d3fa33b86..2317f33f3 100644
--- a/src/library-authoring/components/ComponentCard.tsx
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -3,9 +3,9 @@ import {
   ActionRow,
 } from '@openedx/paragon';
 
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { type ContentHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyItemId, useSidebarContext } from '../common/context/SidebarContext';
 import AddComponentWidget from './AddComponentWidget';
 import BaseCard from './BaseCard';
@@ -16,9 +16,9 @@ type ComponentCardProps = {
 };
 
 const ComponentCard = ({ hit }: ComponentCardProps) => {
-  const { showOnlyPublished } = useLibraryContext();
   const { openComponentInfoSidebar, openItemSidebar, sidebarItemInfo } = useSidebarContext();
   const { componentPickerMode } = useComponentPickerContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   const {
     blockType,
diff --git a/src/library-authoring/components/ComponentDeleter.tsx b/src/library-authoring/components/ComponentDeleter.tsx
index d5385a1d8..e3149ee18 100644
--- a/src/library-authoring/components/ComponentDeleter.tsx
+++ b/src/library-authoring/components/ComponentDeleter.tsx
@@ -8,7 +8,7 @@ import DeleteModal from '@src/generic/delete-modal/DeleteModal';
 import { ToastContext } from '@src/generic/toast-context';
 import { type ContentHit } from '@src/search-manager';
 import { useSidebarContext } from '../common/context/SidebarContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import {
   useContentFromSearchIndex,
   useDeleteLibraryBlock,
@@ -25,7 +25,7 @@ const ComponentDeleter = ({ usageKey, close }: Props) => {
   const intl = useIntl();
   const { sidebarItemInfo, closeLibrarySidebar } = useSidebarContext();
   const { showToast } = useContext(ToastContext);
-  const { containerId: currentUnitId } = useLibraryContext();
+  const { containerId: currentUnitId } = useOptionalLibraryContext();
   const sidebarComponentUsageKey = sidebarItemInfo?.id;
 
   const restoreComponentMutation = useRestoreLibraryBlock();
diff --git a/src/library-authoring/components/ComponentMenu.tsx b/src/library-authoring/components/ComponentMenu.tsx
index af90456cd..940b9c5bf 100644
--- a/src/library-authoring/components/ComponentMenu.tsx
+++ b/src/library-authoring/components/ComponentMenu.tsx
@@ -12,7 +12,7 @@ import { useClipboard } from '@src/generic/clipboard';
 import { getBlockType } from '@src/generic/key-utils';
 import { ToastContext } from '@src/generic/toast-context';
 
-import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
+import { useOptionalLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import { SidebarActions, SidebarBodyItemId, useSidebarContext } from '@src/library-authoring/common/context/SidebarContext';
 import { useRemoveItemsFromCollection } from '@src/library-authoring/data/apiHooks';
 import containerMessages from '@src/library-authoring/containers/messages';
@@ -36,7 +36,7 @@ export const ComponentMenu = ({ usageKey, index }: Props) => {
     containerId,
     openComponentEditor,
     readOnly,
-  } = useLibraryContext();
+  } = useOptionalLibraryContext();
 
   const {
     sidebarItemInfo,
@@ -71,7 +71,7 @@ export const ComponentMenu = ({ usageKey, index }: Props) => {
 
   const handleEdit = useCallback(() => {
     openItemSidebar(usageKey, SidebarBodyItemId.ComponentInfo);
-    openComponentEditor(usageKey);
+    openComponentEditor?.(usageKey);
   }, [usageKey, openItemSidebar, openComponentEditor]);
 
   const scheduleJumpToCollection = useRunOnNextRender(() => {
diff --git a/src/library-authoring/components/ComponentRemover.tsx b/src/library-authoring/components/ComponentRemover.tsx
index b776978b5..4de9318ec 100644
--- a/src/library-authoring/components/ComponentRemover.tsx
+++ b/src/library-authoring/components/ComponentRemover.tsx
@@ -4,7 +4,7 @@ import { Warning } from '@openedx/paragon/icons';
 
 import DeleteModal from '@src/generic/delete-modal/DeleteModal';
 import { ToastContext } from '@src/generic/toast-context';
-import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
+import { useOptionalLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import { useSidebarContext } from '@src/library-authoring/common/context/SidebarContext';
 import {
   useContainer,
@@ -14,6 +14,7 @@ import {
   useUpdateContainerChildren,
 } from '@src/library-authoring/data/apiHooks';
 import { LibraryBlockMetadata } from '@src/library-authoring/data/api';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import messages from './messages';
 
 interface Props {
@@ -25,8 +26,9 @@ interface Props {
 const ComponentRemover = ({ usageKey, index, close }: Props) => {
   const intl = useIntl();
   const { sidebarItemInfo, closeLibrarySidebar } = useSidebarContext();
-  const { containerId, showOnlyPublished } = useLibraryContext();
+  const { containerId } = useOptionalLibraryContext();
   const { showToast } = useContext(ToastContext);
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   const removeContainerItemMutation = useRemoveContainerChildren(containerId);
   const updateContainerChildrenMutation = useUpdateContainerChildren(containerId);
diff --git a/src/library-authoring/containers/ContainerCard.test.tsx b/src/library-authoring/containers/ContainerCard.test.tsx
index dc019c11a..3aa3f562d 100644
--- a/src/library-authoring/containers/ContainerCard.test.tsx
+++ b/src/library-authoring/containers/ContainerCard.test.tsx
@@ -6,6 +6,7 @@ import {
   initializeMocks, render as baseRender, screen, waitFor,
   fireEvent,
 } from '@src/testUtils';
+import { PublishedFilterContextProvider } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { LibraryProvider } from '../common/context/LibraryContext';
 import { mockContentLibrary, mockGetContainerMetadata } from '../data/api.mocks';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
@@ -73,12 +74,11 @@ const render = (
     path,
     params,
     extraWrapper: ({ children }) => (
-      <LibraryProvider
-        libraryId={libraryId}
-        showOnlyPublished={showOnlyPublished}
-      >
-        {children}
-      </LibraryProvider>
+      <PublishedFilterContextProvider showOnlyPublished={showOnlyPublished}>
+        <LibraryProvider libraryId={libraryId}>
+          {children}
+        </LibraryProvider>
+      </PublishedFilterContextProvider>
     ),
   });
 };
diff --git a/src/library-authoring/containers/ContainerCard.tsx b/src/library-authoring/containers/ContainerCard.tsx
index cc012bd27..4726e21ab 100644
--- a/src/library-authoring/containers/ContainerCard.tsx
+++ b/src/library-authoring/containers/ContainerCard.tsx
@@ -18,12 +18,13 @@ import { ToastContext } from '@src/generic/toast-context';
 import { useRunOnNextRender } from '@src/utils';
 
 import { useComponentPickerContext } from '@src/library-authoring/common/context/ComponentPickerContext';
-import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
+import { useOptionalLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import { SidebarActions, SidebarBodyItemId, useSidebarContext } from '@src/library-authoring/common/context/SidebarContext';
 import { useRemoveItemsFromCollection } from '@src/library-authoring/data/apiHooks';
 import { useLibraryRoutes } from '@src/library-authoring/routes';
 import BaseCard from '@src/library-authoring/components/BaseCard';
 import AddComponentWidget from '@src/library-authoring/components/AddComponentWidget';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import messages from './messages';
 import ContainerDeleter from './ContainerDeleter';
 import ContainerRemover from './ContainerRemover';
@@ -38,7 +39,7 @@ export const ContainerMenu = ({ containerKey, displayName, index } : ContainerMe
   const intl = useIntl();
   const {
     libraryId, collectionId, containerId, readOnly,
-  } = useLibraryContext();
+  } = useOptionalLibraryContext();
   const {
     sidebarItemInfo,
     closeLibrarySidebar,
@@ -211,7 +212,7 @@ type ContainerCardPreviewProps = {
 
 const ContainerCardPreview = ({ hit }: ContainerCardPreviewProps) => {
   const intl = useIntl();
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const {
     blockType: itemType,
     published,
@@ -256,7 +257,7 @@ type ContainerCardProps = {
 
 const ContainerCard = ({ hit } : ContainerCardProps) => {
   const { componentPickerMode } = useComponentPickerContext();
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { openContainerInfoSidebar, openItemSidebar, sidebarItemInfo } = useSidebarContext();
 
   const {
diff --git a/src/library-authoring/containers/ContainerDeleter.tsx b/src/library-authoring/containers/ContainerDeleter.tsx
index c8e562978..6538e0538 100644
--- a/src/library-authoring/containers/ContainerDeleter.tsx
+++ b/src/library-authoring/containers/ContainerDeleter.tsx
@@ -10,7 +10,7 @@ import { type ContainerHit } from '@src/search-manager';
 import { useEntityLinks } from '@src/course-libraries/data/apiHooks';
 
 import { useSidebarContext } from '../common/context/SidebarContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useContentFromSearchIndex, useDeleteContainer, useRestoreContainer } from '../data/apiHooks';
 import messages from './messages';
 
@@ -42,7 +42,7 @@ const ContainerDeleter = ({
   } = useSidebarContext();
   const {
     containerId: parentContainerId,
-  } = useLibraryContext();
+  } = useOptionalLibraryContext();
   const deleteContainerMutation = useDeleteContainer(containerId);
   const restoreContainerMutation = useRestoreContainer(containerId);
   const { showToast } = useContext(ToastContext);
diff --git a/src/library-authoring/containers/ContainerEditableTitle.tsx b/src/library-authoring/containers/ContainerEditableTitle.tsx
index 6bd9cfa62..3e71d75e4 100644
--- a/src/library-authoring/containers/ContainerEditableTitle.tsx
+++ b/src/library-authoring/containers/ContainerEditableTitle.tsx
@@ -1,8 +1,9 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { useContext } from 'react';
 import { InplaceTextEditor } from '../../generic/inplace-text-editor';
 import { ToastContext } from '../../generic/toast-context';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useContainer, useUpdateContainer } from '../data/apiHooks';
 import messages from './messages';
 
@@ -14,7 +15,8 @@ interface EditableTitleProps {
 export const ContainerEditableTitle = ({ containerId, textClassName }: EditableTitleProps) => {
   const intl = useIntl();
 
-  const { readOnly, showOnlyPublished } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   const { data: container } = useContainer(containerId);
 
diff --git a/src/library-authoring/containers/ContainerInfo.test.tsx b/src/library-authoring/containers/ContainerInfo.test.tsx
index 556cd95ed..c274a753c 100644
--- a/src/library-authoring/containers/ContainerInfo.test.tsx
+++ b/src/library-authoring/containers/ContainerInfo.test.tsx
@@ -9,6 +9,7 @@ import {
 import { ContainerType } from '@src/generic/key-utils';
 import type { ToastActionData } from '@src/generic/toast-context';
 import { mockContentSearchConfig, mockSearchResult, hydrateSearchResult } from '@src/search-manager/data/api.mock';
+import { PublishedFilterContextProvider } from '@src/library-authoring/common/context/PublishedFilterContext';
 import {
   mockContentLibrary,
   mockGetContainerChildren,
@@ -111,19 +112,18 @@ const render = (
     path,
     params,
     extraWrapper: ({ children }) => (
-      <LibraryProvider
-        libraryId={libraryId}
-        showOnlyPublished={showOnlyPublished}
-      >
-        <SidebarProvider
-          initialSidebarItemInfo={{
-            id: containerId,
-            type: SidebarBodyItemId.ContainerInfo,
-          }}
-        >
-          {children}
-        </SidebarProvider>
-      </LibraryProvider>
+      <PublishedFilterContextProvider showOnlyPublished={showOnlyPublished}>
+        <LibraryProvider libraryId={libraryId}>
+          <SidebarProvider
+            initialSidebarItemInfo={{
+              id: containerId,
+              type: SidebarBodyItemId.ContainerInfo,
+            }}
+          >
+            {children}
+          </SidebarProvider>
+        </LibraryProvider>
+      </PublishedFilterContextProvider>
     ),
   });
 };
@@ -249,8 +249,8 @@ let mockShowToast: { (message: string, action?: ToastActionData): void; mock?: a
           'i',
         ))).toBeInTheDocument();
       }
-      expect(await screen.queryAllByText('Will Publish').length).toBe(willPublishCount);
-      expect(await screen.queryAllByText('Draft').length).toBe(4 - willPublishCount);
+      expect(screen.queryAllByText('Will Publish').length).toBe(willPublishCount);
+      expect(screen.queryAllByText('Draft').length).toBe(4 - willPublishCount);
 
       // Click on the confirm Cancel button
       const publishCancel = await screen.findByRole('button', { name: 'Cancel' });
diff --git a/src/library-authoring/containers/ContainerInfo.tsx b/src/library-authoring/containers/ContainerInfo.tsx
index d2c7c4c78..7ea723b57 100644
--- a/src/library-authoring/containers/ContainerInfo.tsx
+++ b/src/library-authoring/containers/ContainerInfo.tsx
@@ -17,7 +17,7 @@ import { InfoOutline, MoreVert } from '@openedx/paragon/icons';
 import { useClipboard } from '@src/generic/clipboard';
 import { ContainerType, getBlockType } from '@src/generic/key-utils';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import {
   type ContainerInfoTab,
   CONTAINER_INFO_TABS,
@@ -98,12 +98,12 @@ const ContainerActions = ({
   hasUnpublishedChanges: boolean,
 }) => {
   const intl = useIntl();
-  const { libraryId } = useLibraryContext();
+  const { libraryId } = useOptionalLibraryContext();
   const { componentPickerMode } = useComponentPickerContext();
   const { insideUnit, insideSubsection, insideSection } = useLibraryRoutes();
   const [isPublisherOpen, openPublisher, closePublisher] = useToggle(false);
 
-  const showOpenButton = !componentPickerMode && !(
+  const showOpenButton = libraryId && !componentPickerMode && !(
     insideUnit || insideSubsection || insideSection
   );
 
diff --git a/src/library-authoring/containers/ContainerOrganize.tsx b/src/library-authoring/containers/ContainerOrganize.tsx
index b76670efd..c0d350226 100644
--- a/src/library-authoring/containers/ContainerOrganize.tsx
+++ b/src/library-authoring/containers/ContainerOrganize.tsx
@@ -17,7 +17,7 @@ import {
 import { ContentTagsDrawer, useContentTaxonomyTagsData } from '../../content-tags-drawer';
 import { ManageCollections } from '../generic/manage-collections';
 import { useContainer, useUpdateContainerCollections } from '../data/apiHooks';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
 
@@ -26,7 +26,7 @@ const ContainerOrganize = () => {
   const [tagsCollapseIsOpen, ,setTagsCollapseClose, toggleTags] = useToggle(true);
   const [collectionsCollapseIsOpen, setCollectionsCollapseOpen, , toggleCollections] = useToggle(true);
 
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
   const { sidebarItemInfo, sidebarAction } = useSidebarContext();
   const jumpToCollections = sidebarAction === SidebarActions.JumpToManageCollections;
 
diff --git a/src/library-authoring/containers/ContainerRemover.tsx b/src/library-authoring/containers/ContainerRemover.tsx
index dfb8af5a8..54acea653 100644
--- a/src/library-authoring/containers/ContainerRemover.tsx
+++ b/src/library-authoring/containers/ContainerRemover.tsx
@@ -8,12 +8,13 @@ import { ToastContext } from '@src/generic/toast-context';
 import { getBlockType } from '@src/generic/key-utils';
 
 import { useSidebarContext } from '@src/library-authoring/common/context/SidebarContext';
-import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
+import { useOptionalLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 import {
   useContainer, useContainerChildren, useRemoveContainerChildren, useUpdateContainerChildren,
 } from '@src/library-authoring/data/apiHooks';
 import messages from '@src/library-authoring/components/messages';
 import { Container } from '@src/library-authoring/data/api';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 
 type ContainerRemoverProps = {
   close: () => void,
@@ -33,7 +34,8 @@ const ContainerRemover = ({
     sidebarItemInfo,
     closeLibrarySidebar,
   } = useSidebarContext();
-  const { containerId, showOnlyPublished } = useLibraryContext();
+  const { containerId } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { showToast } = useContext(ToastContext);
 
   const removeContainerMutation = useRemoveContainerChildren(containerId);
diff --git a/src/library-authoring/containers/FooterActions.tsx b/src/library-authoring/containers/FooterActions.tsx
index 2fd3767e0..cb758d927 100644
--- a/src/library-authoring/containers/FooterActions.tsx
+++ b/src/library-authoring/containers/FooterActions.tsx
@@ -2,7 +2,7 @@ import { Button, useToggle } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 import { type ContainerType } from '../../generic/key-utils';
 import { PickLibraryContentModal } from '../add-content';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 
 interface FooterActionsProps {
@@ -18,10 +18,10 @@ export const FooterActions = ({
 }: FooterActionsProps) => {
   const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
   const { openAddContentSidebar } = useSidebarContext();
-  const { readOnly, setCreateContainerModalType } = useLibraryContext();
+  const { readOnly, setCreateContainerModalType } = useOptionalLibraryContext();
   const addContent = () => {
     if (addContentType) {
-      setCreateContainerModalType(addContentType);
+      setCreateContainerModalType?.(addContentType);
     } else {
       openAddContentSidebar();
     }
diff --git a/src/library-authoring/containers/HeaderActions.tsx b/src/library-authoring/containers/HeaderActions.tsx
index be1871f71..1fbfac167 100644
--- a/src/library-authoring/containers/HeaderActions.tsx
+++ b/src/library-authoring/containers/HeaderActions.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
 import { useCallback } from 'react';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import { useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryRoutes } from '../routes';
 
@@ -16,7 +16,7 @@ export const HeaderActions = ({
   infoBtnText,
   addContentBtnText,
 }: HeaderActionsProps) => {
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
   const {
     closeLibrarySidebar,
     sidebarItemInfo,
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
index 9dc3c929e..8620a818f 100644
--- a/src/library-authoring/data/api.mocks.ts
+++ b/src/library-authoring/data/api.mocks.ts
@@ -17,6 +17,10 @@ export const mockGetContentLibraryV2List = {
   applyMock: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
     camelCaseObject(contentLibrariesListV2),
   ),
+  applyMockNoPagination: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
+    camelCaseObject(contentLibrariesListV2.results),
+  ),
+  applyMockNoPaginationEmpty: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue([] as api.ContentLibrary[]),
   applyMockError: () => jest.spyOn(api, 'getContentLibraryV2List').mockRejectedValue(
     createAxiosError({ code: 500, message: 'Internal Error.', path: api.getContentLibraryV2ListApiUrl() }),
   ),
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 0a87edbe5..b6dab5e71 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -266,6 +266,14 @@ export interface GetLibrariesV2CustomParams {
   search?: string,
 }
 
+export interface GetLibrariesV2CustomParamsNoPagination extends GetLibrariesV2CustomParams {
+  pagination: false,
+}
+
+export interface GetLibrariesV2CustomParamsPagination extends GetLibrariesV2CustomParams {
+  pagination?: true,
+}
+
 export type LibraryAssetResponse = {
   path: string,
   size: number,
@@ -384,10 +392,27 @@ export async function updateLibraryMetadata(libraryData: UpdateLibraryDataReques
   return camelCaseObject(data);
 }
 
+function isNoPagination(
+  params: GetLibrariesV2CustomParams,
+): params is GetLibrariesV2CustomParamsNoPagination {
+  return params.pagination === false;
+}
+
 /**
  * Get a list of content libraries.
  */
-export async function getContentLibraryV2List(customParams: GetLibrariesV2CustomParams): Promise<LibrariesV2Response> {
+export async function getContentLibraryV2List(
+  customParams: GetLibrariesV2CustomParamsNoPagination
+): Promise<ContentLibrary[]>;
+export async function getContentLibraryV2List(
+  customParams: GetLibrariesV2CustomParamsPagination
+): Promise<LibrariesV2Response>;
+export async function getContentLibraryV2List(
+  customParams: GetLibrariesV2CustomParams
+): Promise<LibrariesV2Response | ContentLibrary[]>;
+export async function getContentLibraryV2List(
+  customParams: GetLibrariesV2CustomParams,
+): Promise<LibrariesV2Response | ContentLibrary[]> {
   // Set default params if not passed in
   const customParamsDefaults = {
     type: customParams.type || 'complex',
@@ -400,7 +425,16 @@ export async function getContentLibraryV2List(customParams: GetLibrariesV2Custom
   const customParamsFormated = snakeCaseObject(customParamsDefaults);
   const { data } = await getAuthenticatedHttpClient()
     .get(getContentLibraryV2ListApiUrl(), { params: customParamsFormated });
-  return camelCaseObject(data);
+  const camel = camelCaseObject(data);
+
+  // Narrow the return type based on pagination flag
+  if (isNoPagination(customParams)) {
+    // `camel` is known to be an array of ContentLibrary
+    return camel as ContentLibrary[];
+  }
+
+  // otherwise it matches the paginated response shape
+  return camel as LibrariesV2Response;
 }
 
 /**
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
index 9f516f82a..b8f9774aa 100644
--- a/src/library-authoring/data/apiHooks.ts
+++ b/src/library-authoring/data/apiHooks.ts
@@ -8,6 +8,7 @@ import {
   replaceEqualDeep,
   keepPreviousData,
   skipToken,
+  UseQueryResult,
 } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import { type MeiliSearch } from 'meilisearch';
@@ -165,8 +166,7 @@ export function invalidateComponentData(queryClient: QueryClient, contentLibrary
 export const useContentLibrary = (libraryId: string | undefined) => (
   useQuery({
     queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId),
-    queryFn: () => api.getContentLibrary(libraryId!),
-    enabled: libraryId !== undefined,
+    queryFn: libraryId ? () => api.getContentLibrary(libraryId!) : skipToken,
   })
 );
 
@@ -244,13 +244,24 @@ export const useUpdateLibraryMetadata = () => {
 /**
  * Builds the query to fetch list of V2 Libraries
  */
-export const useContentLibraryV2List = (customParams: api.GetLibrariesV2CustomParams) => (
-  useQuery({
+export function useContentLibraryV2List(
+  customParams: api.GetLibrariesV2CustomParamsPagination
+): UseQueryResult<api.LibrariesV2Response, Error>;
+export function useContentLibraryV2List(
+  customParams: api.GetLibrariesV2CustomParamsNoPagination
+): UseQueryResult<api.ContentLibrary[], Error>;
+export function useContentLibraryV2List(
+  customParams: api.GetLibrariesV2CustomParams
+): UseQueryResult<api.LibrariesV2Response | api.ContentLibrary[], Error>;
+export function useContentLibraryV2List(
+  customParams: api.GetLibrariesV2CustomParams,
+): UseQueryResult<api.LibrariesV2Response | api.ContentLibrary[], Error> {
+  return useQuery({
     queryKey: libraryAuthoringQueryKeys.contentLibraryList(customParams),
     queryFn: () => api.getContentLibraryV2List(customParams),
     placeholderData: keepPreviousData,
-  })
-);
+  });
+}
 
 /** Publish all changes in the library. */
 export const useCommitLibraryChanges = () => {
@@ -517,40 +528,47 @@ export const useDeleteXBlockAsset = (usageKey: string) => {
 /**
  * Get the metadata for a collection in a library
  */
-export const useCollection = (libraryId: string, collectionId?: string) => (
+export const useCollection = (libraryId?: string, collectionId?: string) => (
   useQuery({
-    enabled: !!libraryId && !!collectionId,
     queryKey: libraryAuthoringQueryKeys.collection(libraryId, collectionId),
-    queryFn: () => api.getCollectionMetadata(libraryId!, collectionId!),
+    queryFn: (!!libraryId && !!collectionId)
+      ? () => api.getCollectionMetadata(libraryId!, collectionId!)
+      : skipToken,
   })
 );
 
 /**
  * Use this mutation to update the fields of a collection in a library
  */
-export const useUpdateCollection = (libraryId: string, collectionId: string) => {
+export const useUpdateCollection = () => {
   const queryClient = useQueryClient();
-  const collectionQueryKey = libraryAuthoringQueryKeys.collection(libraryId, collectionId);
   return useMutation({
-    mutationFn: (data: api.UpdateCollectionComponentsRequest) => (
+    mutationFn: async ({ libraryId, collectionId, data }:{
+      libraryId: string;
+      collectionId: string;
+      data: api.UpdateCollectionComponentsRequest;
+    }) => (
       api.updateCollectionMetadata(libraryId, collectionId, data)
     ),
-    onMutate: (data) => {
+    onMutate: (variables) => {
+      const collectionQueryKey = libraryAuthoringQueryKeys.collection(variables.libraryId, variables.collectionId);
       const previousData = queryClient.getQueryData(collectionQueryKey) as api.CollectionMetadata;
       queryClient.setQueryData(collectionQueryKey, {
         ...previousData,
-        ...data,
+        ...variables.data,
       });
 
       return { previousData };
     },
-    onError: (_err, _data, context) => {
+    onError: (_err, variables, context) => {
+      const collectionQueryKey = libraryAuthoringQueryKeys.collection(variables.libraryId, variables.collectionId);
       queryClient.setQueryData(collectionQueryKey, context?.previousData);
     },
-    onSettled: () => {
+    onSettled: (_data, _err, variables) => {
       // NOTE: We invalidate the library query here because we need to update the library's
       // collection list.
-      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      const collectionQueryKey = libraryAuthoringQueryKeys.collection(variables.libraryId, variables.collectionId);
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, variables.libraryId) });
       queryClient.invalidateQueries({ queryKey: collectionQueryKey });
     },
   });
diff --git a/src/library-authoring/generic/filter-by-published/index.tsx b/src/library-authoring/generic/filter-by-published/index.tsx
index 825ac56f4..8c0d4698a 100644
--- a/src/library-authoring/generic/filter-by-published/index.tsx
+++ b/src/library-authoring/generic/filter-by-published/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLibraryContext } from '../../common/context/LibraryContext';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import { FilterByPublished, PublishStatus } from '../../../search-manager';
 
 /**
@@ -9,7 +9,7 @@ import { FilterByPublished, PublishStatus } from '../../../search-manager';
  * when not relevant.
  */
 const LibraryFilterByPublished : React.FC<Record<never, never>> = () => {
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   if (showOnlyPublished) {
     return (
diff --git a/src/library-authoring/generic/manage-collections/ManageCollections.tsx b/src/library-authoring/generic/manage-collections/ManageCollections.tsx
index 4cafadfa4..59672c09d 100644
--- a/src/library-authoring/generic/manage-collections/ManageCollections.tsx
+++ b/src/library-authoring/generic/manage-collections/ManageCollections.tsx
@@ -14,7 +14,7 @@ import {
 } from '../../../search-manager';
 import { ToastContext } from '../../../generic/toast-context';
 import { CollectionMetadata } from '../../data/api';
-import { useLibraryContext } from '../../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../../common/context/LibraryContext';
 import { SidebarActions, useSidebarContext } from '../../common/context/SidebarContext';
 import genericMessages from '../messages';
 import messages from './messages';
@@ -119,11 +119,15 @@ const AddToCollectionsDrawer = ({
   onClose,
 }: CollectionsDrawerProps) => {
   const intl = useIntl();
-  const { libraryId } = useLibraryContext();
+  const { libraryId } = useOptionalLibraryContext();
+  const extraFilter = ['type = "collection"'];
+  if (libraryId) {
+    extraFilter.push(`context_key = "${libraryId}"`);
+  }
 
   return (
     <SearchContextProvider
-      extraFilter={[`context_key = "${libraryId}"`, 'type = "collection"']}
+      extraFilter={extraFilter}
       skipUrlUpdate
       skipBlockTypeFetch
     >
@@ -156,7 +160,7 @@ const EntityCollections = ({ collections, onManageClick }: {
   onManageClick: () => void;
 }) => {
   const intl = useIntl();
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
 
   if (!collections?.length) {
     return (
diff --git a/src/library-authoring/generic/publish-status-buttons/PublishDraftButton.tsx b/src/library-authoring/generic/publish-status-buttons/PublishDraftButton.tsx
index ed2d50b6d..d8376b429 100644
--- a/src/library-authoring/generic/publish-status-buttons/PublishDraftButton.tsx
+++ b/src/library-authoring/generic/publish-status-buttons/PublishDraftButton.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 
-import { useLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
+import { useOptionalLibraryContext } from '@src/library-authoring/common/context/LibraryContext';
 
 import messages from './messages';
 
@@ -22,7 +22,7 @@ export const PublishDraftButton = ({
   onClick,
 }: PublishDraftButtonProps) => {
   const intl = useIntl();
-  const { readOnly } = useLibraryContext();
+  const { readOnly } = useOptionalLibraryContext();
 
   return (
     <Button
diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
index 156c21b45..975dbcc10 100644
--- a/src/library-authoring/index.scss
+++ b/src/library-authoring/index.scss
@@ -19,3 +19,9 @@
   min-height: 1rem;
   min-width: 1rem;
 }
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/library-authoring/index.tsx b/src/library-authoring/index.tsx
index 8b3419ff4..7b0553e30 100644
--- a/src/library-authoring/index.tsx
+++ b/src/library-authoring/index.tsx
@@ -1,5 +1,5 @@
 export { default as LibraryLayout } from './LibraryLayout';
-export { ComponentPicker } from './component-picker';
+export { LibraryAndComponentPicker, ComponentPicker } from './component-picker';
 export { type SelectedComponent } from './common/context/ComponentPickerContext';
 export { CreateLibrary, CreateLibraryModal } from './create-library';
 export { CreateLegacyLibrary } from './create-legacy-library';
diff --git a/src/library-authoring/library-filters/CollectionDropdownFilter.test.tsx b/src/library-authoring/library-filters/CollectionDropdownFilter.test.tsx
new file mode 100644
index 000000000..577a29e94
--- /dev/null
+++ b/src/library-authoring/library-filters/CollectionDropdownFilter.test.tsx
@@ -0,0 +1,202 @@
+import { mockContentLibrary } from '@src/library-authoring/data/api.mocks';
+import { useGetContentHits } from '@src/search-manager';
+import {
+  initializeMocks, render, screen,
+} from '@src/testUtils';
+import { userEvent } from '@testing-library/user-event';
+import { CollectionDropdownFilter } from './CollectionDropdownFilter';
+
+mockContentLibrary.applyMock();
+
+let mockLibsValue: string[] = [];
+const mockCollectionsSetValue = jest.fn();
+let mockCollectionsValue: string[] = [];
+jest.mock('@src/library-authoring/common/context/MultiLibraryContext', () => ({
+  useMultiLibraryContext: () => ({
+    selectedLibraries: mockLibsValue,
+    setSelectedLibraries: () => {},
+    selectedCollections: mockCollectionsValue,
+    setSelectedCollections: mockCollectionsSetValue,
+  }),
+}));
+// Mock the useGetBlockTypes hook
+jest.mock('@src/search-manager', () => ({
+  useGetBlockTypes: jest.fn().mockReturnValue({ isPending: true, data: null }),
+  useGetContentHits: jest.fn().mockReturnValue({ isPending: true, data: null }),
+}));
+
+const renderComponent = () => render(<CollectionDropdownFilter />);
+
+describe('CollectionDropdownFilter', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockLibsValue = ['some'];
+  });
+
+  it('should be disabled if no library is selected', async () => {
+    mockLibsValue = [];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeDisabled();
+  });
+
+  it('should be disabled if more than one library is selected', async () => {
+    mockLibsValue = ['some', 'another'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeDisabled();
+  });
+
+  it('should render the loading status', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the empty list', async () => {
+    const user = userEvent.setup();
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [],
+        estimatedTotalHits: 0,
+      },
+    });
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('No collections found!')).toBeInTheDocument();
+  });
+
+  it('should render CollectionDropdownFilter with dropdown options', async () => {
+    const user = userEvent.setup();
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [{
+          display_name: 'Test collection',
+          block_id: 'test-collection',
+        },
+        {
+          display_name: 'Sample Taxonomy Course',
+          block_id: 'sample-taxonomy-course',
+        }],
+        estimatedTotalHits: 0,
+      },
+    });
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test collection' });
+    expect(item).toBeInTheDocument();
+    await user.click(item);
+    const passedFunction = mockCollectionsSetValue.mock.calls[0][0];
+    expect(passedFunction([])).toEqual(['test-collection']);
+  });
+
+  it('toggle selected value', async () => {
+    const user = userEvent.setup();
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [{
+          display_name: 'Test collection',
+          block_id: 'test-collection',
+        },
+        {
+          display_name: 'Sample Taxonomy Course',
+          block_id: 'sample-taxonomy-course',
+        }],
+        estimatedTotalHits: 0,
+      },
+    });
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test collection' });
+    await user.click(item);
+    const passedFunction = mockCollectionsSetValue.mock.calls[0][0];
+    // Should remove it from list if already selected, i.e., it means user unselected it.
+    expect(passedFunction([
+      'test-collection',
+      'sample-taxonomy-course',
+    ])).toEqual(['sample-taxonomy-course']);
+  });
+
+  it('should update label to collection if one is selected', async () => {
+    mockCollectionsValue = ['sample-taxonomy-course'];
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [{
+          display_name: 'Test collection',
+          block_id: 'test-collection',
+        },
+        {
+          display_name: 'Sample Taxonomy Course',
+          block_id: 'sample-taxonomy-course',
+        }],
+        estimatedTotalHits: 0,
+      },
+    });
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'Sample Taxonomy Course' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should update label to n collections if more than one is selected', async () => {
+    mockCollectionsValue = ['test-collection', 'sample-taxonomy-course'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: '2 Collections' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should filter list by search', async () => {
+    const user = userEvent.setup();
+    (useGetContentHits as jest.Mock).mockReturnValue({
+      isPending: false,
+      data: {
+        hits: [{
+          display_name: 'Test collection',
+          block_id: 'test-collection',
+        },
+        {
+          display_name: 'Sample Taxonomy Course',
+          block_id: 'sample-taxonomy-course',
+        }],
+        estimatedTotalHits: 0,
+      },
+    });
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button');
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('Sample Taxonomy Course')).toBeInTheDocument();
+    const searchInput = await screen.findByPlaceholderText('Search Collection Name');
+    await user.type(searchInput, 'Test');
+    expect(screen.queryByText('Sample Taxonomy Course')).not.toBeInTheDocument();
+
+    const clearBtn = await screen.findByRole('button', { name: 'clear search' });
+    await user.click(clearBtn);
+    expect(await screen.findByText('Sample Taxonomy Course')).toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/library-filters/CollectionDropdownFilter.tsx b/src/library-authoring/library-filters/CollectionDropdownFilter.tsx
new file mode 100644
index 000000000..ecba163a3
--- /dev/null
+++ b/src/library-authoring/library-filters/CollectionDropdownFilter.tsx
@@ -0,0 +1,147 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ButtonGroup, Dropdown, Form, OverlayTrigger, Scrollable, SearchField, Tooltip,
+} from '@openedx/paragon';
+import { Folder } from '@openedx/paragon/icons';
+import Loading from '@src/generic/Loading';
+import { useMultiLibraryContext } from '@src/library-authoring/common/context/MultiLibraryContext';
+import { useGetContentHits } from '@src/search-manager';
+import { truncate } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+import messages from './messages';
+
+interface CollectionItemsProps {
+  isPending: boolean;
+  data?: Record<string, any>[];
+  onChange: (id: string) => void;
+}
+
+const CollectionItems = ({ isPending, data, onChange }: CollectionItemsProps) => {
+  const { selectedCollections } = useMultiLibraryContext();
+  if (isPending) {
+    return <Loading />;
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <span className="p-3">
+        <FormattedMessage {...messages.collectionFilterBtnEmpty} />
+      </span>
+    );
+  }
+
+  return (
+    <Scrollable
+      className="m-0 p-0"
+      style={{ maxHeight: '25vh' }}
+    >
+      {data.map((collection) => (
+        <Dropdown.Item
+          key={collection.block_id}
+          as={Form.Checkbox}
+          value={collection.block_id}
+          onChange={() => onChange(collection.block_id)}
+          className="py-2 my-1 overflow-auto"
+          checked={selectedCollections.includes(collection.block_id)}
+        >
+          <div>
+            {truncate(collection.display_name, { length: 50 })}
+          </div>
+        </Dropdown.Item>
+      ))}
+    </Scrollable>
+  );
+};
+
+export const CollectionDropdownFilter = () => {
+  const intl = useIntl();
+  const [search, setSearch] = useState('');
+  const { selectedLibraries, selectedCollections, setSelectedCollections } = useMultiLibraryContext();
+  const [label, setLabel] = useState(intl.formatMessage(messages.librariesFilterBtnText));
+  const { data: baseData, isPending } = useGetContentHits(
+    [
+      'type = "collection"',
+      `context_key = "${selectedLibraries[0]}"`,
+      'last_published IS NOT NULL',
+    ],
+    selectedLibraries.length === 1,
+    ['block_id', 'display_name'],
+    100,
+    false,
+  );
+
+  /** Filter the data based on search input */
+  const data = useMemo(() => {
+    if (!search.trim()) {
+      return baseData?.hits;
+    }
+    return baseData?.hits.filter((hit) => hit.display_name.toLowerCase().includes(search.trim().toLowerCase()));
+  }, [search, baseData]);
+
+  const onChange = (libraryId: string) => {
+    setSelectedCollections?.((prev) => {
+      if (prev.includes(libraryId)) {
+        return prev.filter((id) => id !== libraryId);
+      }
+      return [...prev, libraryId];
+    });
+  };
+
+  useEffect(() => {
+    const baseName = '';
+    if (!selectedCollections.length) {
+      setLabel(baseName);
+    } else if (selectedCollections.length === 1) {
+      setLabel(data?.find((lib) => lib.block_id === selectedCollections[0])?.display_name || baseName);
+    } else if (selectedCollections.length > 1) {
+      setLabel(intl.formatMessage(messages.collectionsFilterBtnCount, { count: selectedCollections.length }));
+    }
+  }, [label, selectedCollections, data]);
+
+  return (
+    <Dropdown
+      id="collection-filter-dropdown"
+      as={ButtonGroup}
+      autoClose="outside"
+      disabled={selectedLibraries.length !== 1}
+    >
+      <OverlayTrigger
+        placement="auto"
+        overlay={(
+          <Tooltip variant="light" id="library-filter-tooltip">
+            {selectedLibraries.length !== 1
+              ? intl.formatMessage(messages.collectionFilterBtnHelp)
+              : label || intl.formatMessage(messages.collectionFilterBtnText)}
+          </Tooltip>
+        )}
+      >
+        <Dropdown.Toggle
+          id="collection-filter-dropdown-toggle"
+          iconBefore={Folder}
+          className="text-overflow text-primary-500 py-2 px-4 mr-2"
+          disabled={selectedLibraries.length !== 1}
+          size="sm"
+        >
+          {!label && (
+          <span className="sr-only">
+            {intl.formatMessage(messages.collectionFilterBtnText)}
+          </span>
+          )}
+          {truncate(label, { length: 30 })}
+        </Dropdown.Toggle>
+      </OverlayTrigger>
+      <Dropdown.Menu className="my-1">
+        <SearchField
+          onSubmit={setSearch}
+          onChange={setSearch}
+          onClear={() => setSearch('')}
+          value={search}
+          placeholder={intl.formatMessage(messages.collectionFilterBtnPlaceholder)}
+          className="mx-1 border-0"
+        />
+        <Dropdown.Divider className="mb-0" />
+        <CollectionItems isPending={isPending} data={data} onChange={onChange} />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
diff --git a/src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx b/src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx
new file mode 100644
index 000000000..1b63f21c8
--- /dev/null
+++ b/src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx
@@ -0,0 +1,128 @@
+import { mockContentLibrary, mockGetContentLibraryV2List } from '@src/library-authoring/data/api.mocks';
+import {
+  initializeMocks, render, screen, waitFor,
+} from '@src/testUtils';
+import { userEvent } from '@testing-library/user-event';
+import { LibraryDropdownFilter } from './LibraryDropdownFilter';
+
+mockContentLibrary.applyMock();
+
+const mockSetValue = jest.fn();
+let mockValue: string[] = [];
+jest.mock('@src/library-authoring/common/context/MultiLibraryContext', () => ({
+  useMultiLibraryContext: () => ({
+    selectedLibraries: mockValue,
+    setSelectedLibraries: mockSetValue,
+  }),
+}));
+
+const renderComponent = () => render(<LibraryDropdownFilter />);
+
+describe('LibraryDropdownFilter', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockValue = [];
+  });
+
+  it('should render the loading status', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockLoading();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the empty list', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPaginationEmpty();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('No libraries found!')).toBeInTheDocument();
+  });
+
+  it('should render LibraryDropdownFilter with dropdown options', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test Library 1' });
+    expect(item).toBeInTheDocument();
+    await user.click(item);
+    const passedFunction = mockSetValue.mock.calls[0][0];
+    expect(passedFunction([])).toEqual(['lib:SampleTaxonomyOrg1:TL1']);
+  });
+
+  it('toggle selected value', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test Library 1' });
+    await user.click(item);
+    const passedFunction = mockSetValue.mock.calls[0][0];
+    // Should remove it from list if already selected, i.e., it means user unselected it.
+    expect(passedFunction([
+      'lib:SampleTaxonomyOrg1:TL1',
+      'lib:SampleTaxonomyOrg1:TL2',
+    ])).toEqual(['lib:SampleTaxonomyOrg1:TL2']);
+  });
+
+  it('should update label to library if one is selected', async () => {
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    mockValue = ['lib:SampleTaxonomyOrg1:TL1'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'Test Library 1' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should update label to n libraries if more than one is selected', async () => {
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    mockValue = ['lib:SampleTaxonomyOrg1:TL1', 'lib:SampleTaxonomyOrg1:AL1'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: '2 Libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should filter list by search', async () => {
+    const user = userEvent.setup();
+    const mockApi = mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    const searchInput = await screen.findByPlaceholderText('Search Library Name');
+    await user.type(searchInput, 'Test Library');
+
+    await waitFor(() => expect(mockApi).toHaveBeenLastCalledWith({
+      pagination: false,
+      search: 'Test Library',
+    }), { timeout: 600 });
+
+    const clearBtn = await screen.findByRole('button', { name: 'clear search' });
+    await user.click(clearBtn);
+
+    await waitFor(() => expect(mockApi).toHaveBeenLastCalledWith({
+      pagination: false,
+      search: '',
+    }), { timeout: 600 });
+  });
+});
diff --git a/src/library-authoring/library-filters/LibraryDropdownFilter.tsx b/src/library-authoring/library-filters/LibraryDropdownFilter.tsx
new file mode 100644
index 000000000..657535762
--- /dev/null
+++ b/src/library-authoring/library-filters/LibraryDropdownFilter.tsx
@@ -0,0 +1,126 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ButtonGroup, Dropdown, Form, OverlayTrigger, Scrollable, SearchField, Tooltip,
+} from '@openedx/paragon';
+import { Newsstand } from '@openedx/paragon/icons';
+import Loading from '@src/generic/Loading';
+import { useMultiLibraryContext } from '@src/library-authoring/common/context/MultiLibraryContext';
+import { ContentLibrary } from '@src/library-authoring/data/api';
+import { useContentLibraryV2List } from '@src/library-authoring/data/apiHooks';
+import { debounce, truncate } from 'lodash';
+import { useCallback, useEffect, useState } from 'react';
+import messages from './messages';
+
+interface LibraryItemsProps {
+  isPending: boolean;
+  data?: ContentLibrary[];
+  onChange: (id: string) => void;
+}
+
+const LibraryItems = ({ isPending, data, onChange }: LibraryItemsProps) => {
+  const { selectedLibraries } = useMultiLibraryContext();
+  if (isPending) {
+    return <Loading />;
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <span className="p-3">
+        <FormattedMessage {...messages.librariesFilterBtnEmpty} />
+      </span>
+    );
+  }
+
+  return (
+    <Scrollable
+      className="m-0 p-0"
+      style={{ maxHeight: '25vh' }}
+    >
+      {data.map((library) => (
+        <Dropdown.Item
+          key={library.id}
+          as={Form.Checkbox}
+          value={library.id}
+          onChange={() => onChange(library.id)}
+          className="py-2 my-1 overflow-auto"
+          checked={selectedLibraries.includes(library.id)}
+        >
+          <div>
+            {truncate(library.title, { length: 50 })}
+          </div>
+        </Dropdown.Item>
+      ))}
+    </Scrollable>
+  );
+};
+
+export const LibraryDropdownFilter = () => {
+  const intl = useIntl();
+  const [search, setSearch] = useState('');
+  const { selectedLibraries, setSelectedLibraries } = useMultiLibraryContext();
+  const [label, setLabel] = useState(intl.formatMessage(messages.librariesFilterBtnText));
+  const { isPending, data } = useContentLibraryV2List({ pagination: false, search });
+
+  const handleSearch = useCallback(
+    // Perform search after 500ms
+    debounce((term) => setSearch(term.trim()), 500),
+    [setSearch],
+  );
+
+  const onChange = (libraryId: string) => {
+    setSelectedLibraries?.((prev) => {
+      if (prev.includes(libraryId)) {
+        return prev.filter((id) => id !== libraryId);
+      }
+      return [...prev, libraryId];
+    });
+  };
+
+  useEffect(() => {
+    const baseName = intl.formatMessage(messages.librariesFilterBtnText);
+    if (!selectedLibraries.length) {
+      setLabel(baseName);
+    } else if (selectedLibraries.length === 1) {
+      setLabel(data?.find((lib) => lib.id === selectedLibraries[0])?.title || baseName);
+    } else if (selectedLibraries.length > 1) {
+      setLabel(intl.formatMessage(messages.librariesFilterBtnCount, { count: selectedLibraries.length }));
+    }
+  }, [label, selectedLibraries, data]);
+
+  return (
+    <Dropdown
+      id="library-filter-dropdown"
+      as={ButtonGroup}
+      autoClose="outside"
+    >
+      <OverlayTrigger
+        placement="auto"
+        overlay={(
+          <Tooltip variant="light" id="library-filter-tooltip">
+            {label}
+          </Tooltip>
+        )}
+      >
+        <Dropdown.Toggle
+          id="library-filter-dropdown-toggle"
+          iconBefore={Newsstand}
+          className="text-overflow text-primary-500 p-2 px-4 mr-2"
+        >
+          {truncate(label, { length: 30 })}
+        </Dropdown.Toggle>
+      </OverlayTrigger>
+      <Dropdown.Menu className="my-1">
+        <SearchField
+          onSubmit={handleSearch}
+          onChange={handleSearch}
+          onClear={() => setSearch('')}
+          value={search}
+          placeholder={intl.formatMessage(messages.librariesFilterBtnPlaceholder)}
+          className="mx-1 border-0"
+        />
+        <Dropdown.Divider className="mb-0" />
+        <LibraryItems isPending={isPending} data={data} onChange={onChange} />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
diff --git a/src/library-authoring/library-filters/MainFilters.tsx b/src/library-authoring/library-filters/MainFilters.tsx
new file mode 100644
index 000000000..a59680c93
--- /dev/null
+++ b/src/library-authoring/library-filters/MainFilters.tsx
@@ -0,0 +1,33 @@
+import { ActionRow } from '@openedx/paragon';
+import LibraryFilterByPublished from '@src/library-authoring/generic/filter-by-published';
+import { useLibraryRoutes } from '@src/library-authoring/routes';
+import {
+  ClearFiltersButton, FilterByBlockType, FilterByTags, SearchKeywordsField, SearchSortWidget,
+} from '@src/search-manager';
+import { FiltersProps } from '.';
+
+export const MainFilters = ({ onlyOneType }: FiltersProps) => {
+  const {
+    insideCollections,
+    insideUnits,
+  } = useLibraryRoutes();
+
+  return (
+    <ActionRow className="my-3">
+      <SearchKeywordsField className="mr-3" />
+      <FilterByTags />
+      {!(onlyOneType) && <FilterByBlockType />}
+      <LibraryFilterByPublished key={
+        // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
+        // appears or disappears, this is because when the menu is opened it is rendered
+        // in a previous state, causing an inconsistency in its position.
+        // By changing the key we can re-render the component.
+        !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
+      }
+      />
+      <ClearFiltersButton />
+      <ActionRow.Spacer />
+      <SearchSortWidget />
+    </ActionRow>
+  );
+};
diff --git a/src/library-authoring/library-filters/SidebarFilters.tsx b/src/library-authoring/library-filters/SidebarFilters.tsx
new file mode 100644
index 000000000..829639d1e
--- /dev/null
+++ b/src/library-authoring/library-filters/SidebarFilters.tsx
@@ -0,0 +1,46 @@
+import {
+  IconButton, Stack, useToggle,
+} from '@openedx/paragon';
+import {
+  ClearFiltersButton, FilterByBlockType, FilterByTags, SearchKeywordsField,
+} from '@src/search-manager';
+import { FilterList } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useMultiLibraryContext } from '@src/library-authoring/common/context/MultiLibraryContext';
+import { LibraryDropdownFilter } from './LibraryDropdownFilter';
+import messages from './messages';
+import { FiltersProps } from '.';
+import { CollectionDropdownFilter } from './CollectionDropdownFilter';
+
+export const SidebarFilters = ({ onlyOneType }: FiltersProps) => {
+  const intl = useIntl();
+  const [isOn,,, toggle] = useToggle(false);
+  const { selectedCollections, setSelectedCollections } = useMultiLibraryContext();
+
+  return (
+    <Stack gap={3} className="my-3">
+      <Stack direction="horizontal" gap={1}>
+        <LibraryDropdownFilter />
+        <SearchKeywordsField />
+        <IconButton
+          onClick={toggle}
+          alt={intl.formatMessage(messages.additionalFilterBtnAltText)}
+          size="md"
+          src={FilterList}
+          className="rounded-sm border ml-2"
+        />
+      </Stack>
+      {isOn && (
+      <Stack direction="horizontal">
+        {!(onlyOneType) && <FilterByBlockType />}
+        <FilterByTags />
+        <CollectionDropdownFilter />
+        <ClearFiltersButton
+          onClear={() => setSelectedCollections([])}
+          canClear={selectedCollections.length > 0}
+        />
+      </Stack>
+      )}
+    </Stack>
+  );
+};
diff --git a/src/library-authoring/library-filters/index.tsx b/src/library-authoring/library-filters/index.tsx
new file mode 100644
index 000000000..62927fdf2
--- /dev/null
+++ b/src/library-authoring/library-filters/index.tsx
@@ -0,0 +1,3 @@
+export interface FiltersProps {
+  onlyOneType: boolean
+}
diff --git a/src/library-authoring/library-filters/messages.ts b/src/library-authoring/library-filters/messages.ts
new file mode 100644
index 000000000..a7c644ab0
--- /dev/null
+++ b/src/library-authoring/library-filters/messages.ts
@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  librariesFilterBtnText: {
+    id: 'course-authoring.library-authoring.library-filters.libraries.filter.btn',
+    defaultMessage: 'All libraries',
+    description: 'Button text for libraries filter',
+  },
+  collectionFilterBtnText: {
+    id: 'course-authoring.library-authoring.library-filters.collection.filter.btn',
+    defaultMessage: 'Collections filter',
+    description: 'Button aria label text for collections filter',
+  },
+  collectionFilterBtnHelp: {
+    id: 'course-authoring.library-authoring.library-filters.collection.filter.btn-help',
+    defaultMessage: 'Select only one library to filter by collection',
+    description: 'Tooltip when more than one library is selected and collection filter is disabled',
+  },
+  librariesFilterBtnPlaceholder: {
+    id: 'course-authoring.library-authoring.library-filters.libraries.filter.placeholder',
+    defaultMessage: 'Search Library Name',
+    description: 'Placeholder text for libraries filter',
+  },
+  collectionFilterBtnPlaceholder: {
+    id: 'course-authoring.library-authoring.library-filters.collection.filter.placeholder',
+    defaultMessage: 'Search Collection Name',
+    description: 'Placeholder text for collection filter',
+  },
+  collectionFilterBtnEmpty: {
+    id: 'course-authoring.library-authoring.library-filters.collection.filter.empty',
+    defaultMessage: 'No collections found!',
+    description: 'When no collections are found',
+  },
+  librariesFilterBtnEmpty: {
+    id: 'course-authoring.library-authoring.library-filters.libraries.filter.empty',
+    defaultMessage: 'No libraries found!',
+    description: 'When no libraries are found',
+  },
+  librariesFilterBtnCount: {
+    id: 'course-authoring.library-authoring.library-filters.libraries.filter.count',
+    defaultMessage: '{count} Libraries',
+    description: 'When more than 1 libraries are selected',
+  },
+  collectionsFilterBtnCount: {
+    id: 'course-authoring.library-authoring.library-filters.collection.filter.count',
+    defaultMessage: '{count} Collections',
+    description: 'When more than 1 Collections are selected',
+  },
+  additionalFilterBtnAltText: {
+    id: 'course-authoring.library-authoring.library-filters.additional.filter.alt-btn',
+    defaultMessage: 'See more',
+    description: 'Alt text for more fitlers',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/section-subsections/LibraryContainerChildren.tsx b/src/library-authoring/section-subsections/LibraryContainerChildren.tsx
index 2fb83a594..94922cc85 100644
--- a/src/library-authoring/section-subsections/LibraryContainerChildren.tsx
+++ b/src/library-authoring/section-subsections/LibraryContainerChildren.tsx
@@ -7,11 +7,12 @@ import {
 } from '@openedx/paragon';
 import { Description } from '@openedx/paragon/icons';
 import { InplaceTextEditor } from '@src/generic/inplace-text-editor';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
 import DraggableList, { SortableItem } from '../../generic/DraggableList';
 import Loading from '../../generic/Loading';
 import ErrorAlert from '../../generic/alert-error';
 import { ContainerType, getBlockType } from '../../generic/key-utils';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import {
   useContainerChildren,
   useUpdateContainer,
@@ -48,7 +49,7 @@ const ContainerRow = ({
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
   const updateMutation = useUpdateContainer(container.originalId, containerKey);
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { setSidebarAction, openItemSidebar } = useSidebarContext();
 
   const handleSaveDisplayName = async (newDisplayName: string) => {
@@ -127,7 +128,8 @@ const ContainerRow = ({
 export const LibraryContainerChildren = ({ containerKey, readOnly }: LibraryContainerChildrenProps) => {
   const intl = useIntl();
   const [orderedChildren, setOrderedChildren] = useState<LibraryContainerMetadataWithUniqueId[]>([]);
-  const { showOnlyPublished, readOnly: libReadOnly } = useLibraryContext();
+  const { readOnly: libReadOnly } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { navigateTo } = useLibraryRoutes();
   const { sidebarItemInfo, openItemSidebar } = useSidebarContext();
   const [activeDraggingId, setActiveDraggingId] = useState<string | null>(null);
diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx
index e3395bd0b..e486bd8b5 100644
--- a/src/library-authoring/units/LibraryUnitBlocks.tsx
+++ b/src/library-authoring/units/LibraryUnitBlocks.tsx
@@ -19,7 +19,8 @@ import Loading from '@src/generic/Loading';
 import TagCount from '@src/generic/tag-count';
 import { ToastContext } from '@src/generic/toast-context';
 import { skipIfUnwantedTarget, useRunOnNextRender } from '@src/utils';
-import { useLibraryContext } from '../common/context/LibraryContext';
+import { usePublishedFilterContext } from '@src/library-authoring/common/context/PublishedFilterContext';
+import { useOptionalLibraryContext } from '../common/context/LibraryContext';
 import ComponentMenu from '../components';
 import { LibraryBlockMetadata } from '../data/api';
 import {
@@ -55,7 +56,7 @@ interface ComponentBlockProps {
 /** Component header */
 const BlockHeader = ({ block, index, readOnly }: ComponentBlockProps) => {
   const intl = useIntl();
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
   const { showToast } = useContext(ToastContext);
   const { setSidebarAction, openItemSidebar } = useSidebarContext();
 
@@ -129,7 +130,8 @@ const BlockHeader = ({ block, index, readOnly }: ComponentBlockProps) => {
 const ComponentBlock = ({
   block, readOnly, isDragging, index,
 }: ComponentBlockProps) => {
-  const { showOnlyPublished, openComponentEditor } = useLibraryContext();
+  const { openComponentEditor } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   const { sidebarItemInfo, openItemSidebar } = useSidebarContext();
 
@@ -146,7 +148,7 @@ const ComponentBlock = ({
     const canEdit = canEditComponent(block.originalId);
     if (numberOfClicks > 1 && canEdit) {
       // Open editor on double click.
-      openComponentEditor(block.originalId);
+      openComponentEditor?.(block.originalId);
     }
   }, [block, openItemSidebar, canEditComponent, openComponentEditor, readOnly]);
 
@@ -232,7 +234,8 @@ export const LibraryUnitBlocks = ({ unitId, readOnly: componentReadOnly }: Libra
   const [hidePreviewFor, setHidePreviewFor] = useState<string | null>(null);
   const { showToast } = useContext(ToastContext);
 
-  const { readOnly: libraryReadOnly, showOnlyPublished } = useLibraryContext();
+  const { readOnly: libraryReadOnly } = useOptionalLibraryContext();
+  const { showOnlyPublished } = usePublishedFilterContext();
 
   const readOnly = componentReadOnly || libraryReadOnly;
 
diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
index f842b0dae..4cd4167af 100644
--- a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
@@ -58,9 +58,9 @@ function renderComponent(route) {
   const wrapper = render(
     <AppProvider store={store} wrapWithRouter={false}>
       <QueryClientProvider client={queryClient}>
-        <CourseAuthoringProvider courseId={courseId}>
-          <PagesAndResourcesProvider courseId={courseId}>
-            <MemoryRouter initialEntries={[`${route}`]}>
+        <MemoryRouter initialEntries={[`${route}`]}>
+          <CourseAuthoringProvider courseId={courseId}>
+            <PagesAndResourcesProvider courseId={courseId}>
               <Routes>
                 <Route
                   path={`/course/${courseId}/pages-and-resources/discussion/configure/:appId`}
@@ -72,9 +72,9 @@ function renderComponent(route) {
                 />
               </Routes>
               <LocationDisplay />
-            </MemoryRouter>
-          </PagesAndResourcesProvider>
-        </CourseAuthoringProvider>
+            </PagesAndResourcesProvider>
+          </CourseAuthoringProvider>
+        </MemoryRouter>
       </QueryClientProvider>
     </AppProvider>,
   );
diff --git a/src/search-manager/ClearFiltersButton.tsx b/src/search-manager/ClearFiltersButton.tsx
index 0328d3861..3a32189bd 100644
--- a/src/search-manager/ClearFiltersButton.tsx
+++ b/src/search-manager/ClearFiltersButton.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import messages from './messages';
@@ -7,6 +6,8 @@ import { useSearchContext } from './SearchManager';
 type ClearFiltersButtonProps = {
   variant?: 'link' | 'primary',
   size?: 'sm' | 'md' | 'lg' | 'inline',
+  onClear?: () => void,
+  canClear?: boolean,
 };
 
 /**
@@ -15,11 +16,17 @@ type ClearFiltersButtonProps = {
 const ClearFiltersButton = ({
   variant = 'link',
   size = 'sm',
+  onClear,
+  canClear,
 }: ClearFiltersButtonProps) => {
   const { canClearFilters, clearFilters } = useSearchContext();
-  if (canClearFilters) {
+  const onClick = () => {
+    clearFilters();
+    onClear?.();
+  };
+  if (canClearFilters || canClear) {
     return (
-      <Button variant={variant} size={size} onClick={clearFilters}>
+      <Button variant={variant} size={size} onClick={onClick}>
         <FormattedMessage {...messages.clearFilters} />
       </Button>
     );
diff --git a/src/search-manager/SearchFilterWidget.tsx b/src/search-manager/SearchFilterWidget.tsx
index c2a6a3536..5e1e1598c 100644
--- a/src/search-manager/SearchFilterWidget.tsx
+++ b/src/search-manager/SearchFilterWidget.tsx
@@ -28,6 +28,7 @@ const SearchFilterWidget: React.FC<{
   clearFilter: () => void,
   icon: React.ComponentType;
   skipLabelUpdate?: boolean;
+  btnSize?: 'sm' | 'md' | 'lg';
 }> = ({ appliedFilters, ...props }) => {
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
@@ -44,7 +45,7 @@ const SearchFilterWidget: React.FC<{
         <Button
           ref={setTarget}
           variant={appliedFilters.length ? 'light' : 'outline-primary'}
-          size="sm"
+          size={props.btnSize || 'sm'}
           onClick={open}
           iconBefore={props.icon}
           iconAfter={ArrowDropDown}
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-imported-filter-modal/context.tsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-imported-filter-modal/context.tsx
index 2f67f77e6..bdca72042 100644
--- a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-imported-filter-modal/context.tsx
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-imported-filter-modal/context.tsx
@@ -27,7 +27,7 @@ interface Props {
 const PAGE_SIZE = 500;
 
 export const CourseImportFilterProvider = ({ handleSelect, selectedCourseId, children }: Props) => {
-  const { libraryId } = useLibraryContext(true) || {};
+  const { libraryId } = useLibraryContext();
   const dispatch = useDispatch();
   const [hidePreviouslyImportedCourses, setHidePreviouslyImportedCourses] = useState(true);
   const { courses, numPages } = useSelector(getStudioHomeData);
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 000000000..5bb9d329d
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,10 @@
+/** Utility type: makes one field required */
+export type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
+
+export type ValueOf<T> = T[keyof T];
+
+/** Utility type: makes K required when Cond is true */
+export type RequireIf<Obj, K extends keyof Obj, Cond extends boolean> =
+  Cond extends true
+    ? Obj & Required<Pick<Obj, K>>
+    : Obj;