diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
index 5f569ef3d1..26e8befef3 100644
--- a/src/course-unit/CourseUnit.test.jsx
+++ b/src/course-unit/CourseUnit.test.jsx
@@ -282,7 +282,7 @@ describe('<CourseUnit />', () => {
 
     await waitFor(() => {
       const problemButton = getByRole('button', {
-        name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Problem`, 'i'),
+        name: new RegExp(`problem ${addComponentMessages.buttonText.defaultMessage} Problem`, 'i'),
       });
 
       userEvent.click(problemButton);
diff --git a/src/course-unit/__mocks__/courseSectionVertical.js b/src/course-unit/__mocks__/courseSectionVertical.js
index 67d57c2e62..f5b60dcca2 100644
--- a/src/course-unit/__mocks__/courseSectionVertical.js
+++ b/src/course-unit/__mocks__/courseSectionVertical.js
@@ -82,6 +82,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'discussion',
@@ -101,6 +102,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'library',
@@ -114,12 +116,13 @@ module.exports = {
           support_level: true,
         },
       ],
-      display_name: 'Library Content',
+      display_name: 'Legacy Library Content',
       support_legend: {
         show_legend: false,
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'html',
@@ -179,6 +182,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'openassessment',
@@ -230,6 +234,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'problem',
@@ -249,6 +254,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'video',
@@ -268,6 +274,7 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
     },
     {
       type: 'drag-and-drop-v2',
@@ -287,6 +294,47 @@ module.exports = {
         allow_unsupported_xblocks: false,
         documentation_label: 'Your Platform Name Here Support Levels:',
       },
+      beta: false,
+    },
+    {
+      type: 'library_v2',
+      templates: [
+        {
+          display_name: 'Library Content',
+          category: 'library_v2',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Library Content',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: true,
+    },
+    {
+      type: 'itembank',
+      templates: [
+        {
+          display_name: 'Problem Bank',
+          category: 'itembank',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Problem Bank',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: true,
     },
   ],
   course_sequence_ids: [
diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx
index a2c80f8b74..1a0676239c 100644
--- a/src/course-unit/add-component/AddComponent.jsx
+++ b/src/course-unit/add-component/AddComponent.jsx
@@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { useToggle } from '@openedx/paragon';
+import { StandardModal, useToggle } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
 import messages from './messages';
+import { ComponentPicker } from '../../library-authoring/component-picker';
 
 const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
   const navigate = useNavigate();
@@ -17,6 +18,17 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
   const [isOpenHtml, openHtml, closeHtml] = useToggle(false);
   const [isOpenOpenAssessment, openOpenAssessment, closeOpenAssessment] = useToggle(false);
   const { componentTemplates } = useSelector(getCourseSectionVertical);
+  const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
+
+  const handleLibraryV2Selection = (selection) => {
+    handleCreateNewCourseXBlock({
+      type: COMPONENT_TYPES.libraryV2,
+      category: selection.blockType,
+      parentLocator: blockId,
+      libraryContentKey: selection.usageKey,
+    });
+    closeAddLibraryContentModal();
+  };
 
   const handleCreateNewXBlock = (type, moduleName) => {
     switch (type) {
@@ -35,6 +47,12 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
       case COMPONENT_TYPES.library:
         handleCreateNewCourseXBlock({ type, category: 'library_content', parentLocator: blockId });
         break;
+      case COMPONENT_TYPES.itembank:
+        handleCreateNewCourseXBlock({ type, category: 'itembank', parentLocator: blockId });
+        break;
+      case COMPONENT_TYPES.libraryV2:
+        showAddLibraryContentModal();
+        break;
       case COMPONENT_TYPES.advanced:
         handleCreateNewCourseXBlock({
           type: moduleName, category: moduleName, parentLocator: blockId,
@@ -67,7 +85,7 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
       <h5 className="h3 mb-4 text-center">{intl.formatMessage(messages.title)}</h5>
       <ul className="new-component-type list-unstyled m-0 d-flex flex-wrap justify-content-center">
         {componentTemplates.map((component) => {
-          const { type, displayName } = component;
+          const { type, displayName, beta } = component;
           let modalParams;
 
           if (!component.templates.length) {
@@ -103,6 +121,7 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
                     onClick={() => handleCreateNewXBlock(type)}
                     displayName={displayName}
                     type={type}
+                    beta={beta}
                   />
                 </li>
               );
@@ -118,6 +137,18 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
           );
         })}
       </ul>
+      <StandardModal
+        title="Select component"
+        isOpen={isAddLibraryContentModalOpen}
+        onClose={closeAddLibraryContentModal}
+        isOverflowVisible={false}
+        size="xl"
+      >
+        <ComponentPicker
+          showOnlyPublished
+          onComponentSelected={handleLibraryV2Selection}
+        />
+      </StandardModal>
     </div>
   );
 };
diff --git a/src/course-unit/add-component/AddComponent.test.jsx b/src/course-unit/add-component/AddComponent.test.jsx
index f09378bf09..9cc27acf55 100644
--- a/src/course-unit/add-component/AddComponent.test.jsx
+++ b/src/course-unit/add-component/AddComponent.test.jsx
@@ -23,6 +23,11 @@ let axiosMock;
 const blockId = '123';
 const handleCreateNewCourseXBlockMock = jest.fn();
 
+// Mock ComponentPicker to call onComponentSelected on load
+jest.mock('../../library-authoring/component-picker', () => ({
+  ComponentPicker: (props) => props.onComponentSelected({ usageKey: 'test-usage-key', blockType: 'html' }),
+}));
+
 const renderComponent = (props) => render(
   <AppProvider store={store}>
     <IntlProvider locale="en">
@@ -59,11 +64,19 @@ describe('<AddComponent />', () => {
     const componentTemplates = courseSectionVerticalMock.component_templates;
 
     expect(getByRole('heading', { name: messages.title.defaultMessage })).toBeInTheDocument();
-    Object.keys(componentTemplates).map((component) => (
-      expect(getByRole('button', {
-        name: new RegExp(`${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`, 'i'),
-      })).toBeInTheDocument()
-    ));
+    Object.keys(componentTemplates).forEach((component) => {
+      const btn = getByRole('button', {
+        name: new RegExp(
+          `${componentTemplates[component].type
+          } ${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`,
+          'i',
+        ),
+      });
+      expect(btn).toBeInTheDocument();
+      if (component.beta) {
+        expect(within(btn).queryByText('Beta')).toBeInTheDocument();
+      }
+    });
   });
 
   it('AddComponent component doesn\'t render when there aren\'t componentTemplates', async () => {
@@ -111,7 +124,11 @@ describe('<AddComponent />', () => {
       }
 
       return expect(getByRole('button', {
-        name: new RegExp(`${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`, 'i'),
+        name: new RegExp(
+          `${componentTemplates[component].type
+          } ${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`,
+          'i',
+        ),
       })).toBeInTheDocument();
     });
   });
@@ -176,7 +193,7 @@ describe('<AddComponent />', () => {
     const { getByRole } = renderComponent();
 
     const discussionButton = getByRole('button', {
-      name: new RegExp(`${messages.buttonText.defaultMessage} Problem`, 'i'),
+      name: new RegExp(`problem ${messages.buttonText.defaultMessage} Problem`, 'i'),
     });
 
     userEvent.click(discussionButton);
@@ -187,6 +204,22 @@ describe('<AddComponent />', () => {
     }, expect.any(Function));
   });
 
+  it('calls handleCreateNewCourseXBlock with correct parameters when Problem bank xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const problemBankBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Problem Bank`, 'i'),
+    });
+
+    userEvent.click(problemBankBtn);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.itembank,
+      category: 'itembank',
+    });
+  });
+
   it('calls handleCreateNewCourseXBlock with correct parameters when Video xblock create button is clicked', () => {
     const { getByRole } = renderComponent();
 
@@ -206,7 +239,7 @@ describe('<AddComponent />', () => {
     const { getByRole } = renderComponent();
 
     const libraryButton = getByRole('button', {
-      name: new RegExp(`${messages.buttonText.defaultMessage} Library Content`, 'i'),
+      name: new RegExp(`${messages.buttonText.defaultMessage} Legacy Library Content`, 'i'),
     });
 
     userEvent.click(libraryButton);
@@ -379,6 +412,22 @@ describe('<AddComponent />', () => {
     });
   });
 
+  it('shows library picker on clicking v2 library content btn', async () => {
+    const { findByRole } = renderComponent();
+    const libBtn = await findByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Library content`, 'i'),
+    });
+
+    userEvent.click(libBtn);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      type: COMPONENT_TYPES.libraryV2,
+      parentLocator: '123',
+      category: 'html',
+      libraryContentKey: 'test-usage-key',
+    });
+  });
+
   describe('component support label', () => {
     it('component support label is hidden if component support legend is disabled', async () => {
       const supportLevels = ['fs', 'ps'];
diff --git a/src/course-unit/add-component/add-component-btn/index.jsx b/src/course-unit/add-component/add-component-btn/index.jsx
index a232c36191..8745806d6e 100644
--- a/src/course-unit/add-component/add-component-btn/index.jsx
+++ b/src/course-unit/add-component/add-component-btn/index.jsx
@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
-import { Button } from '@openedx/paragon';
+import { Badge, Button } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
 import AddComponentIcon from './AddComponentIcon';
 
-const AddComponentButton = ({ type, displayName, onClick }) => {
+const AddComponentButton = ({
+  type, displayName, onClick, beta,
+}) => {
   const intl = useIntl();
 
   return (
@@ -17,14 +19,20 @@ const AddComponentButton = ({ type, displayName, onClick }) => {
       <AddComponentIcon type={type} />
       <span className="sr-only">{intl.formatMessage(messages.buttonText)}</span>
       <span className="small mt-2">{displayName}</span>
+      {beta && <Badge className="pb-1 mt-1" variant="primary">Beta</Badge>}
     </Button>
   );
 };
 
+AddComponentButton.defaultProps = {
+  beta: false,
+};
+
 AddComponentButton.propTypes = {
   type: PropTypes.string.isRequired,
   displayName: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  beta: PropTypes.bool,
 };
 
 export default AddComponentButton;
diff --git a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
index 4f387d4bd6..84fbc16115 100644
--- a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
+++ b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
@@ -58,9 +58,11 @@ const ComponentModalView = ({
               const isDisplaySupportLabel = supportLegend.showLegend && supportLabels[componentTemplate.supportLevel];
 
               return (
-                <div className="d-flex justify-content-between w-100 mb-2.5 align-items-end">
+                <div
+                  key={componentTemplate.displayName}
+                  className="d-flex justify-content-between w-100 mb-2.5 align-items-end"
+                >
                   <Form.Radio
-                    key={componentTemplate.displayName}
                     className="add-component-modal-radio"
                     value={value}
                   >
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index 6e35b70a3f..02b7ab89f2 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -63,9 +63,16 @@ export async function getCourseSectionVerticalData(unitId) {
  * @param {string} [options.displayName] - The display name.
  * @param {string} [options.boilerplate] - The boilerplate.
  * @param {string} [options.stagedContent] - The staged content.
+ * @param {string} [options.libraryContentKey] - component key from library if being imported.
  */
 export async function createCourseXblock({
-  type, category, parentLocator, displayName, boilerplate, stagedContent,
+  type,
+  category,
+  parentLocator,
+  displayName,
+  boilerplate,
+  stagedContent,
+  libraryContentKey,
 }) {
   const body = {
     type,
@@ -74,6 +81,7 @@ export async function createCourseXblock({
     parent_locator: parentLocator,
     display_name: displayName,
     staged_content: stagedContent,
+    library_content_key: libraryContentKey,
   };
 
   const { data } = await getAuthenticatedHttpClient()
diff --git a/src/generic/NewsstandIcon.tsx b/src/generic/NewsstandIcon.tsx
new file mode 100644
index 0000000000..e68cd4b77f
--- /dev/null
+++ b/src/generic/NewsstandIcon.tsx
@@ -0,0 +1,17 @@
+// This file will be no longer needed one https://github.com/openedx/paragon/pull/3045 is merged.
+const NewsstandIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default NewsstandIcon;
diff --git a/src/generic/block-type-utils/constants.ts b/src/generic/block-type-utils/constants.ts
index ab91ee25d9..97f9ae0f70 100644
--- a/src/generic/block-type-utils/constants.ts
+++ b/src/generic/block-type-utils/constants.ts
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   BackHand as BackHandIcon,
   BookOpen as BookOpenIcon,
+  Casino as ProblemBankIcon,
   Edit as EditIcon,
   EditNote as EditNoteIcon,
   FormatListBulleted as FormatListBulletedIcon,
@@ -14,6 +15,7 @@ import {
   VideoCamera as VideoCameraIcon,
   Folder,
 } from '@openedx/paragon/icons';
+import NewsstandIcon from '../NewsstandIcon';
 
 export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
 
@@ -21,6 +23,8 @@ export const COMPONENT_TYPES = {
   advanced: 'advanced',
   discussion: 'discussion',
   library: 'library',
+  libraryV2: 'library_v2',
+  itembank: 'itembank',
   html: 'html',
   openassessment: 'openassessment',
   problem: 'problem',
@@ -40,6 +44,8 @@ export const COMPONENT_TYPE_ICON_MAP: Record<string, React.ComponentType> = {
   [COMPONENT_TYPES.advanced]: ScienceIcon,
   [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
   [COMPONENT_TYPES.library]: LibraryIcon,
+  [COMPONENT_TYPES.itembank]: ProblemBankIcon,
+  [COMPONENT_TYPES.libraryV2]: NewsstandIcon,
   [COMPONENT_TYPES.html]: TextFieldsIcon,
   [COMPONENT_TYPES.openassessment]: EditNoteIcon,
   [COMPONENT_TYPES.problem]: HelpOutlineIcon,
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
index 09cb45b3d3..04bfc25c64 100644
--- a/src/library-authoring/LibraryLayout.tsx
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -10,7 +10,7 @@ import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
 import { LibraryTeamModal } from './library-team';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
-import { ComponentPickerModal } from './component-picker';
+import { ComponentPicker } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
 
 const LibraryLayout = () => {
@@ -32,9 +32,9 @@ const LibraryLayout = () => {
       collectionId={collectionId}
       /** The component picker modal to use. We need to pass it as a reference instead of
        * directly importing it to avoid the import cycle:
-       * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
-       * Sidebar > AddContentContainer > ComponentPickerModal */
-      componentPickerModal={ComponentPickerModal}
+       * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+       * Sidebar > AddContentContainer > ComponentPicker */
+      componentPicker={ComponentPicker}
     >
       <Routes>
         <Route
diff --git a/src/library-authoring/add-content/AddContentContainer.tsx b/src/library-authoring/add-content/AddContentContainer.tsx
index 0dbb2da4c0..12368fd3ca 100644
--- a/src/library-authoring/add-content/AddContentContainer.tsx
+++ b/src/library-authoring/add-content/AddContentContainer.tsx
@@ -70,7 +70,7 @@ const AddContentContainer = () => {
     collectionId,
     openCreateCollectionModal,
     openComponentEditor,
-    componentPickerModal,
+    componentPicker,
   } = useLibraryContext();
   const createBlockMutation = useCreateLibraryBlock();
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
@@ -239,7 +239,7 @@ const AddContentContainer = () => {
   return (
     <Stack direction="vertical">
       {collectionId ? (
-        componentPickerModal && (
+        componentPicker && (
           <>
             <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
             <PickLibraryContentModal
diff --git a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
index aa9f2c6c1f..6b9ee0fff2 100644
--- a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
+++ b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
@@ -12,7 +12,7 @@ import { studioHomeMock } from '../../studio-home/__mocks__';
 import { getStudioHomeApiUrl } from '../../studio-home/data/api';
 import mockResult from '../__mocks__/library-search.json';
 import { LibraryProvider } from '../common/context';
-import { ComponentPickerModal } from '../component-picker';
+import { ComponentPicker } from '../component-picker';
 import * as api from '../data/api';
 import {
   mockContentLibrary,
@@ -40,7 +40,7 @@ const render = () => baseRender(<PickLibraryContentModal isOpen onClose={onClose
     <LibraryProvider
       libraryId={libraryId}
       collectionId="collectionId"
-      componentPickerModal={ComponentPickerModal}
+      componentPicker={ComponentPicker}
     >
       {children}
     </LibraryProvider>
diff --git a/src/library-authoring/add-content/PickLibraryContentModal.tsx b/src/library-authoring/add-content/PickLibraryContentModal.tsx
index f8a8ac3965..ef08b68ec0 100644
--- a/src/library-authoring/add-content/PickLibraryContentModal.tsx
+++ b/src/library-authoring/add-content/PickLibraryContentModal.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useState } from 'react';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button } from '@openedx/paragon';
+import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 
 import { ToastContext } from '../../generic/toast-context';
 import { type SelectedComponent, useLibraryContext } from '../common/context';
@@ -41,14 +41,14 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
     libraryId,
     collectionId,
     /** We need to get it as a reference instead of directly importing it to avoid the import cycle:
-     * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
-     * Sidebar > AddContentContainer > ComponentPickerModal */
-    componentPickerModal: ComponentPickerModal,
+     * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+     * Sidebar > AddContentContainer > ComponentPicker */
+    componentPicker: ComponentPicker,
   } = useLibraryContext();
 
   // istanbul ignore if: this should never happen
-  if (!collectionId || !ComponentPickerModal) {
-    throw new Error('libraryId and componentPickerModal are required');
+  if (!collectionId || !ComponentPicker) {
+    throw new Error('libraryId and componentPicker are required');
   }
 
   const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
@@ -70,12 +70,19 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
   }, [selectedComponents]);
 
   return (
-    <ComponentPickerModal
-      libraryId={libraryId}
+    <StandardModal
+      title="Select components"
+      isOverflowVisible={false}
+      size="xl"
       isOpen={isOpen}
       onClose={onClose}
-      onChangeComponentSelection={setSelectedComponents}
       footerNode={<PickLibraryContentModalFooter onSubmit={onSubmit} selectedComponents={selectedComponents} />}
-    />
+    >
+      <ComponentPicker
+        libraryId={libraryId}
+        componentPickerMode="multiple"
+        onChangeComponentSelection={setSelectedComponents}
+      />
+    </StandardModal>
   );
 };
diff --git a/src/library-authoring/common/context.tsx b/src/library-authoring/common/context.tsx
index be229065f5..4e3ac78cc5 100644
--- a/src/library-authoring/common/context.tsx
+++ b/src/library-authoring/common/context.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import type { ComponentPickerModal } from '../component-picker';
+import type { ComponentPicker } from '../component-picker';
 import type { ContentLibrary } from '../data/api';
 import { useContentLibrary } from '../data/apiHooks';
 
@@ -27,9 +27,9 @@ type NoComponentPickerType = {
   restrictToLibrary?: never;
   /** The component picker modal to use. We need to pass it as a reference instead of
    * directly importing it to avoid the import cycle:
-   * ComponentPickerModal > ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
-   * Sidebar > AddContentContainer > ComponentPickerModal */
-  componentPickerModal?: typeof ComponentPickerModal;
+   * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+   * Sidebar > AddContentContainer > ComponentPicker */
+  componentPicker?: typeof ComponentPicker;
 };
 
 type ComponentPickerSingleType = {
@@ -39,7 +39,7 @@ type ComponentPickerSingleType = {
   addComponentToSelectedComponents?: never;
   removeComponentFromSelectedComponents?: never;
   restrictToLibrary: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerMultipleType = {
@@ -49,7 +49,7 @@ type ComponentPickerMultipleType = {
   addComponentToSelectedComponents: ComponentSelectedEvent;
   removeComponentFromSelectedComponents: ComponentSelectedEvent;
   restrictToLibrary: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerType = NoComponentPickerType | ComponentPickerSingleType | ComponentPickerMultipleType;
@@ -121,7 +121,7 @@ type NoComponentPickerProps = {
   onComponentSelected?: never;
   onChangeComponentSelection?: never;
   restrictToLibrary?: never;
-  componentPickerModal?: typeof ComponentPickerModal;
+  componentPicker?: typeof ComponentPicker;
 };
 
 export type ComponentPickerSingleProps = {
@@ -129,7 +129,7 @@ export type ComponentPickerSingleProps = {
   onComponentSelected: ComponentSelectedEvent;
   onChangeComponentSelection?: never;
   restrictToLibrary?: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 export type ComponentPickerMultipleProps = {
@@ -137,7 +137,7 @@ export type ComponentPickerMultipleProps = {
   onComponentSelected?: never;
   onChangeComponentSelection?: ComponentSelectionChangedEvent;
   restrictToLibrary?: boolean;
-  componentPickerModal?: never;
+  componentPicker?: never;
 };
 
 type ComponentPickerProps = NoComponentPickerProps | ComponentPickerSingleProps | ComponentPickerMultipleProps;
@@ -150,7 +150,7 @@ type LibraryProviderProps = {
   showOnlyPublished?: boolean;
   /** Only used for testing */
   initialSidebarComponentInfo?: SidebarComponentInfo;
-  componentPickerModal?: typeof ComponentPickerModal;
+  componentPicker?: typeof ComponentPicker;
 } & ComponentPickerProps;
 
 /**
@@ -166,7 +166,7 @@ export const LibraryProvider = ({
   onChangeComponentSelection,
   showOnlyPublished = false,
   initialSidebarComponentInfo,
-  componentPickerModal,
+  componentPicker,
 }: LibraryProviderProps) => {
   const [collectionId, setCollectionId] = useState(collectionIdProp);
   const [sidebarComponentInfo, setSidebarComponentInfo] = useState<SidebarComponentInfo | undefined>(
@@ -276,7 +276,7 @@ export const LibraryProvider = ({
     if (!componentPickerMode) {
       return {
         ...contextValue,
-        componentPickerModal,
+        componentPicker,
       };
     }
     if (componentPickerMode === 'single') {
@@ -329,7 +329,7 @@ export const LibraryProvider = ({
     openComponentEditor,
     closeComponentEditor,
     resetSidebarAdditionalActions,
-    componentPickerModal,
+    componentPicker,
   ]);
 
   return (
diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
index 7455384fe9..dfec09bfd9 100644
--- a/src/library-authoring/component-picker/ComponentPicker.tsx
+++ b/src/library-authoring/component-picker/ComponentPicker.tsx
@@ -37,7 +37,7 @@ const defaultSelectionChangedCallback: ComponentSelectionChangedEvent = (selecti
   window.parent.postMessage({ type: 'pickerSelectionChanged', selections }, '*');
 };
 
-type ComponentPickerProps = { libraryId?: string } & (
+type ComponentPickerProps = { libraryId?: string, showOnlyPublished?: boolean } & (
   {
     componentPickerMode?: 'single',
     onComponentSelected?: ComponentSelectedEvent,
@@ -53,6 +53,7 @@ type ComponentPickerProps = { libraryId?: string } & (
 export const ComponentPicker: React.FC<ComponentPickerProps> = ({
   /** Restrict the component picker to a specific library */
   libraryId,
+  showOnlyPublished,
   componentPickerMode = 'single',
   /** This default callback is used to send the selected component back to the parent window,
    * when the component picker is used in an iframe.
@@ -67,7 +68,7 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
 
   const queryParams = new URLSearchParams(location.search);
   const variant = queryParams.get('variant') || 'draft';
-  const showOnlyPublished = variant === 'published';
+  const calcShowOnlyPublished = variant === 'published' || showOnlyPublished;
 
   const handleLibrarySelection = (library: string) => {
     setCurrentStep('pick-components');
@@ -102,10 +103,10 @@ export const ComponentPicker: React.FC<ComponentPickerProps> = ({
       <Stepper.Step eventKey="pick-components" title="Pick some components">
         <LibraryProvider
           libraryId={selectedLibrary}
-          showOnlyPublished={showOnlyPublished}
+          showOnlyPublished={calcShowOnlyPublished}
           {...libraryProviderProps}
         >
-          { showOnlyPublished
+          { calcShowOnlyPublished
             && (
             <Alert variant="info" className="m-2">
               <FormattedMessage {...messages.pickerInfoBanner} />
diff --git a/src/library-authoring/component-picker/ComponentPickerModal.tsx b/src/library-authoring/component-picker/ComponentPickerModal.tsx
deleted file mode 100644
index 5d6e6ae30b..0000000000
--- a/src/library-authoring/component-picker/ComponentPickerModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { StandardModal } from '@openedx/paragon';
-
-import type { ComponentSelectionChangedEvent } from '../common/context';
-import { ComponentPicker } from './ComponentPicker';
-
-interface ComponentPickerModalProps {
-  libraryId?: string;
-  isOpen: boolean;
-  onClose: () => void;
-  onChangeComponentSelection: ComponentSelectionChangedEvent;
-  footerNode?: React.ReactNode;
-}
-
-// eslint-disable-next-line import/prefer-default-export
-export const ComponentPickerModal: React.FC<ComponentPickerModalProps> = ({
-  libraryId,
-  isOpen,
-  onClose,
-  onChangeComponentSelection,
-  footerNode,
-}) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <StandardModal
-      title="Select components"
-      isOpen={isOpen}
-      onClose={onClose}
-      isOverflowVisible={false}
-      size="xl"
-      footerNode={footerNode}
-    >
-      <ComponentPicker
-        libraryId={libraryId}
-        componentPickerMode="multiple"
-        onChangeComponentSelection={onChangeComponentSelection}
-      />
-    </StandardModal>
-  );
-};
diff --git a/src/library-authoring/component-picker/index.ts b/src/library-authoring/component-picker/index.ts
index 5ffe86d0f8..24d8920e03 100644
--- a/src/library-authoring/component-picker/index.ts
+++ b/src/library-authoring/component-picker/index.ts
@@ -1,2 +1,2 @@
+/* eslint-disable import/prefer-default-export */
 export { ComponentPicker } from './ComponentPicker';
-export { ComponentPickerModal } from './ComponentPickerModal';