diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ItemsListing.test.tsx b/frontends/mit-open/src/page-components/ItemsListing/ItemsListing.test.tsx
similarity index 100%
rename from frontends/mit-open/src/pages/ListDetailsPage/ItemsListing.test.tsx
rename to frontends/mit-open/src/page-components/ItemsListing/ItemsListing.test.tsx
diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ItemsListing.tsx b/frontends/mit-open/src/page-components/ItemsListing/ItemsListing.tsx
similarity index 92%
rename from frontends/mit-open/src/pages/ListDetailsPage/ItemsListing.tsx
rename to frontends/mit-open/src/page-components/ItemsListing/ItemsListing.tsx
index b01d0b96ed..ffd0c8c05c 100644
--- a/frontends/mit-open/src/pages/ListDetailsPage/ItemsListing.tsx
+++ b/frontends/mit-open/src/page-components/ItemsListing/ItemsListing.tsx
@@ -33,17 +33,19 @@ type ItemsListingProps = {
   isRefetching?: boolean
   emptyMessage: string
   sortable?: boolean
+  condensed?: boolean
 }
 
 const ItemsListingViewOnly: React.FC<{
   items: NonNullable<ItemsListingProps["items"]>
-}> = ({ items }) => {
+  condensed?: boolean
+}> = ({ items, condensed }) => {
   return (
-    <PlainList itemSpacing={1}>
+    <PlainList itemSpacing={condensed ? 1 : 2}>
       {items.map((item) => {
         return (
           <li key={item.id}>
-            <ResourceListCard resource={item.resource} condensed />
+            <ResourceListCard resource={item.resource} condensed={condensed} />
           </li>
         )
       })}
@@ -139,11 +141,13 @@ const ItemsListing: React.FC<ItemsListingProps> = ({
   isRefetching,
   emptyMessage,
   sortable = false,
+  condensed = false,
 }) => {
   return (
     <>
-      {isLoading && <LoadingSpinner loading />}
-      {items.length === 0 ? (
+      {isLoading ? (
+        <LoadingSpinner loading />
+      ) : items.length === 0 ? (
         <EmptyMessage>{emptyMessage}</EmptyMessage>
       ) : sortable ? (
         <ItemsListingSortable
@@ -152,7 +156,7 @@ const ItemsListing: React.FC<ItemsListingProps> = ({
           isRefetching={isRefetching}
         />
       ) : (
-        <ItemsListingViewOnly items={items} />
+        <ItemsListingViewOnly items={items} condensed={condensed} />
       )}
     </>
   )
diff --git a/frontends/mit-open/src/page-components/ItemsListing/ItemsListingComponent.tsx b/frontends/mit-open/src/page-components/ItemsListing/ItemsListingComponent.tsx
new file mode 100644
index 0000000000..524e7139f3
--- /dev/null
+++ b/frontends/mit-open/src/page-components/ItemsListing/ItemsListingComponent.tsx
@@ -0,0 +1,118 @@
+import React from "react"
+import { Grid, Button, Typography, styled } from "ol-components"
+import { RiPencilFill, RiArrowUpDownLine } from "@remixicon/react"
+import { useUserMe } from "api/hooks/user"
+import { useToggle, pluralize } from "ol-utilities"
+import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
+import ItemsListing from "./ItemsListing"
+import type { LearningResourceListItem } from "./ItemsListing"
+
+const Container = styled(GridContainer)`
+  margin-top: 30px;
+  margin-bottom: 100px;
+`
+
+const TitleContainer = styled(Grid)`
+  margin-top: 10px;
+  margin-bottom: 20px;
+`
+
+type OnEdit = () => void
+type ListData = {
+  title: string
+  description?: string | null
+  item_count: number
+}
+
+type ItemsListingComponentProps = {
+  listType: string
+  list?: ListData
+  items: LearningResourceListItem[]
+  isLoading: boolean
+  isFetching: boolean
+  handleEdit: OnEdit
+  condensed?: boolean
+}
+
+const ItemsListingComponent: React.FC<ItemsListingComponentProps> = ({
+  listType,
+  list,
+  items,
+  isLoading,
+  isFetching,
+  handleEdit,
+  condensed = false,
+}) => {
+  const { data: user } = useUserMe()
+  const [isSorting, toggleIsSorting] = useToggle(false)
+
+  const canEdit = user?.is_learning_path_editor
+  const showSort = canEdit && !!items.length
+  const count = list?.item_count
+
+  return (
+    <Container>
+      <GridColumn variant="single-full">
+        <Grid container>
+          <TitleContainer item xs={12}>
+            <Typography variant="h3" component="h1">
+              {list?.title}
+            </Typography>
+            {list?.description && <p>{list.description}</p>}
+          </TitleContainer>
+          <Grid
+            item
+            xs={6}
+            container
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            {showSort && (
+              <Button
+                variant="text"
+                disabled={count === 0}
+                startIcon={isSorting ? undefined : <RiArrowUpDownLine />}
+                onClick={toggleIsSorting.toggle}
+              >
+                {isSorting ? "Done ordering" : "Reorder"}
+              </Button>
+            )}
+            {count !== undefined && count > 0
+              ? `${count} ${pluralize("item", count)}`
+              : null}
+          </Grid>
+          <Grid
+            item
+            xs={6}
+            container
+            justifyContent="flex-end"
+            alignItems="center"
+            display="flex"
+          >
+            {canEdit ? (
+              <Button
+                variant="text"
+                startIcon={<RiPencilFill />}
+                onClick={handleEdit}
+              >
+                Edit
+              </Button>
+            ) : null}
+          </Grid>
+        </Grid>
+        <ItemsListing
+          listType={listType}
+          items={items}
+          isLoading={isLoading}
+          isRefetching={isFetching}
+          sortable={isSorting}
+          emptyMessage="There are no items in this list yet."
+          condensed={condensed}
+        />
+      </GridColumn>
+    </Container>
+  )
+}
+
+export default ItemsListingComponent
+export type { ItemsListingComponentProps }
diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index 8a82fb5777..b578c594f3 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback, useState } from "react"
 import {
   RiAccountCircleFill,
   RiDashboardLine,
@@ -19,19 +20,12 @@ import {
   styled,
 } from "ol-components"
 import { MetaTags } from "ol-utilities"
-import React, { useCallback, useMemo, useState } from "react"
 import { Link } from "react-router-dom"
 import { useUserMe } from "api/hooks/user"
 import { useLocation } from "react-router"
 import { UserListListingComponent } from "../UserListListingPage/UserListListingPage"
 import { UserList } from "api"
-import {
-  useInfiniteUserListItems,
-  useUserListsDetail,
-} from "api/hooks/learningResources"
-import { ListDetailsComponent } from "../ListDetailsPage/ListDetailsPage"
-import { ListType } from "api/constants"
-import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
+
 import { ProfileEditForm } from "./ProfileEditForm"
 import { useProfileMeQuery } from "api/hooks/profile"
 import {
@@ -43,6 +37,7 @@ import {
   FREE_COURSES_CAROUSEL,
 } from "./carousels"
 import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
+import UserListDetailsTab from "./UserListDetailsTab"
 
 /**
  *
@@ -304,30 +299,6 @@ const keyFromHash = (hash: string) => {
   return match ?? "home"
 }
 
-interface UserListDetailsTabProps {
-  userListId: number
-}
-
-const UserListDetailsTab: React.FC<UserListDetailsTabProps> = (props) => {
-  const { userListId } = props
-  const listQuery = useUserListsDetail(userListId)
-  const itemsQuery = useInfiniteUserListItems({ userlist_id: userListId })
-  const items = useMemo(() => {
-    const pages = itemsQuery.data?.pages
-    return pages?.flatMap((p) => p.results ?? []) ?? []
-  }, [itemsQuery.data])
-  return (
-    <ListDetailsComponent
-      listType={ListType.UserList}
-      list={listQuery.data}
-      items={items}
-      isLoading={itemsQuery.isLoading}
-      isFetching={itemsQuery.isFetching}
-      handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)}
-    />
-  )
-}
-
 const DashboardPage: React.FC = () => {
   const { isLoading: isLoadingUser, data: user } = useUserMe()
   const { isLoading: isLoadingProfile, data: profile } = useProfileMeQuery()
diff --git a/frontends/mit-open/src/pages/DashboardPage/UserListDetailsTab.tsx b/frontends/mit-open/src/pages/DashboardPage/UserListDetailsTab.tsx
new file mode 100644
index 0000000000..9e81126107
--- /dev/null
+++ b/frontends/mit-open/src/pages/DashboardPage/UserListDetailsTab.tsx
@@ -0,0 +1,36 @@
+import React, { useMemo } from "react"
+import {
+  useInfiniteUserListItems,
+  useUserListsDetail,
+} from "api/hooks/learningResources"
+import { ListType } from "api/constants"
+import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
+import ItemsListingComponent from "@/page-components/ItemsListing/ItemsListingComponent"
+
+interface UserListDetailsTabProps {
+  userListId: number
+}
+
+const UserListDetailsTab: React.FC<UserListDetailsTabProps> = (props) => {
+  const { userListId } = props
+  const listQuery = useUserListsDetail(userListId)
+  const itemsQuery = useInfiniteUserListItems({ userlist_id: userListId })
+
+  const items = useMemo(() => {
+    const pages = itemsQuery.data?.pages
+    return pages?.flatMap((p) => p.results ?? []) ?? []
+  }, [itemsQuery.data])
+
+  return (
+    <ItemsListingComponent
+      listType={ListType.UserList}
+      list={listQuery.data}
+      items={items}
+      isLoading={itemsQuery.isLoading}
+      isFetching={itemsQuery.isFetching}
+      handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)}
+    />
+  )
+}
+
+export default UserListDetailsTab
diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.test.ts b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.test.ts
index 2aaaa55403..138c97c5b5 100644
--- a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.test.ts
+++ b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.test.ts
@@ -5,7 +5,7 @@ import type {
   PaginatedLearningPathRelationshipList,
 } from "api"
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
-import ItemsListing from "./ItemsListing"
+import ItemsListing from "@/page-components/ItemsListing/ItemsListing"
 import { learningPathsView } from "@/common/urls"
 import {
   screen,
@@ -20,8 +20,10 @@ import { User } from "../../types/settings"
 import { ControlledPromise } from "ol-test-utilities"
 import invariant from "tiny-invariant"
 
-jest.mock("./ItemsListing", () => {
-  const actual = jest.requireActual("./ItemsListing")
+jest.mock("../../page-components/ItemsListing/ItemsListing", () => {
+  const actual = jest.requireActual(
+    "../../page-components/ItemsListing/ItemsListing",
+  )
   return {
     __esModule: true,
     ...actual,
diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
index 34f34a75bc..0dd24a6ff6 100644
--- a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
+++ b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
@@ -1,100 +1,10 @@
 import React from "react"
-import { Container, Grid, Button, BannerPage, Typography } from "ol-components"
-import { RiPencilFill, RiArrowUpDownLine } from "@remixicon/react"
-import { useUserMe } from "api/hooks/user"
-import { useToggle, pluralize, MetaTags } from "ol-utilities"
-import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
+import { Container, BannerPage } from "ol-components"
+import { MetaTags } from "ol-utilities"
+import ItemsListingComponent from "@/page-components/ItemsListing/ItemsListingComponent"
+import type { ItemsListingComponentProps } from "@/page-components/ItemsListing/ItemsListingComponent"
 
-import ItemsListing from "./ItemsListing"
-import type { LearningResourceListItem } from "./ItemsListing"
-
-type OnEdit = () => void
-type ListData = {
-  title: string
-  description?: string | null
-  item_count: number
-}
-type ListDetailsPageProps = {
-  listType: string
-  list?: ListData
-  items: LearningResourceListItem[]
-  isLoading: boolean
-  isFetching: boolean
-  handleEdit: OnEdit
-}
-
-const ListDetailsComponent: React.FC<ListDetailsPageProps> = (props) => {
-  const { listType, list, items, isLoading, isFetching, handleEdit } = props
-  const { data: user } = useUserMe()
-  const [isSorting, toggleIsSorting] = useToggle(false)
-
-  const canEdit = user?.is_learning_path_editor
-  const showSort = canEdit && !!items.length
-  const count = list?.item_count
-  return (
-    <GridContainer>
-      <GridColumn variant="single-full">
-        <Grid container>
-          <Grid item xs={12}>
-            <Typography variant="h3" component="h1">
-              {list?.title}
-            </Typography>
-            {list?.description && <p>{list.description}</p>}
-          </Grid>
-          <Grid
-            item
-            xs={6}
-            container
-            alignItems="center"
-            justifyContent="space-between"
-          >
-            {showSort && (
-              <Button
-                variant="text"
-                disabled={count === 0}
-                startIcon={isSorting ? undefined : <RiArrowUpDownLine />}
-                onClick={toggleIsSorting.toggle}
-              >
-                {isSorting ? "Done ordering" : "Reorder"}
-              </Button>
-            )}
-            {count !== undefined && count > 0
-              ? `${count} ${pluralize("item", count)}`
-              : null}
-          </Grid>
-          <Grid
-            item
-            xs={6}
-            container
-            justifyContent="flex-end"
-            alignItems="center"
-            display="flex"
-          >
-            {canEdit ? (
-              <Button
-                variant="text"
-                startIcon={<RiPencilFill />}
-                onClick={handleEdit}
-              >
-                Edit
-              </Button>
-            ) : null}
-          </Grid>
-        </Grid>
-        <ItemsListing
-          listType={listType}
-          items={items}
-          isLoading={isLoading}
-          isRefetching={isFetching}
-          sortable={isSorting}
-          emptyMessage="There are no items in this list yet."
-        />
-      </GridColumn>
-    </GridContainer>
-  )
-}
-
-const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
+const ListDetailsPage: React.FC<ItemsListingComponentProps> = ({
   listType,
   list,
   items,
@@ -108,8 +18,8 @@ const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
       className="learningpaths-page"
     >
       <MetaTags title={list?.title} />
-      <Container maxWidth="sm">
-        <ListDetailsComponent
+      <Container maxWidth="md">
+        <ItemsListingComponent
           listType={listType}
           list={list}
           items={items}
@@ -122,5 +32,4 @@ const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
   )
 }
 
-export { ListDetailsPage, ListDetailsComponent }
-export type { ListDetailsPageProps }
+export { ListDetailsPage }