diff --git a/src/index.scss b/src/index.scss
index 764489d1d4..69f9b8b34f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -61,3 +61,7 @@ body {
     background-color: $light-100;
   }
 }
+
+mark {
+  padding: 0;
+}
diff --git a/src/library-authoring/LibraryAuthoringPage.scss b/src/library-authoring/LibraryAuthoringPage.scss
index 03a167b370..9800997719 100644
--- a/src/library-authoring/LibraryAuthoringPage.scss
+++ b/src/library-authoring/LibraryAuthoringPage.scss
@@ -11,9 +11,8 @@
 }
 
 .library-authoring-sidebar {
-  min-width: 300px;
-  max-width: map-get($grid-breakpoints, "sm");
   z-index: 1001; // to appear over header
+  flex: 450px 0 0;
   position: sticky;
   top: 0;
   right: 0;
diff --git a/src/library-authoring/LibraryCollections.tsx b/src/library-authoring/LibraryCollections.tsx
index 24fc112c1b..f8e1bf56b2 100644
--- a/src/library-authoring/LibraryCollections.tsx
+++ b/src/library-authoring/LibraryCollections.tsx
@@ -1,5 +1,3 @@
-import { CardGrid } from '@openedx/paragon';
-
 import { useLoadOnScroll } from '../hooks';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
@@ -41,22 +39,14 @@ const LibraryCollections = ({ variant }: LibraryCollectionsProps) => {
   }
 
   return (
-    <CardGrid
-      columnSizes={{
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3,
-      }}
-      hasEqualColumnHeights
-    >
+    <div className="library-cards-grid">
       { collectionList.map((collectionHit) => (
         <CollectionCard
           key={collectionHit.id}
           collectionHit={collectionHit}
         />
       )) }
-    </CardGrid>
+    </div>
   );
 };
 
diff --git a/src/library-authoring/components/ComponentCard.scss b/src/library-authoring/components/ComponentCard.scss
index cd39a690e5..fd902fb33b 100644
--- a/src/library-authoring/components/ComponentCard.scss
+++ b/src/library-authoring/components/ComponentCard.scss
@@ -1,8 +1,4 @@
 .library-component-card {
-  .pgn__card {
-    height: 100%;
-  }
-
   .library-component-header {
     border-top-left-radius: .375rem;
     border-top-right-radius: .375rem;
diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx
index 4b6eb6c647..af02dff1f9 100644
--- a/src/library-authoring/components/LibraryComponents.tsx
+++ b/src/library-authoring/components/LibraryComponents.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { CardGrid } from '@openedx/paragon';
 
 import { useLoadOnScroll } from '../../hooks';
 import { useSearchContext } from '../../search-manager';
@@ -56,15 +55,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
   }
 
   return (
-    <CardGrid
-      columnSizes={{
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3,
-      }}
-      hasEqualColumnHeights
-    >
+    <div className="library-cards-grid">
       { componentList.map((contentHit) => (
         <ComponentCard
           key={contentHit.id}
@@ -72,7 +63,7 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
           blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''}
         />
       )) }
-    </CardGrid>
+    </div>
   );
 };
 
diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
index 7bfb8cae9f..62097ddbc3 100644
--- a/src/library-authoring/index.scss
+++ b/src/library-authoring/index.scss
@@ -1,4 +1,11 @@
 @import "./component-info/ComponentPreview";
 @import "./components/ComponentCard";
 @import "./generic";
-@import "./LibraryAuthoringPage";
\ No newline at end of file
+@import "./LibraryAuthoringPage";
+
+.library-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 2rem;
+  justify-items: center;
+}