diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8252aff3e6..103c5ada38 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -98,7 +98,26 @@ jobs:
         with:
           file: ./coverage.xml
 
+  build-nextjs-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        with:
+          node-version: "^20"
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build Next.js frontend
+        run: yarn workspace main build
+
   javascript-tests:
+    if: false #TODO
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
@@ -145,6 +164,7 @@ jobs:
           file: coverage/lcov.info
 
   build-storybook:
+    if: false #TODO
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
diff --git a/frontends/main/.env.example b/frontends/main/.env.example
index 9e5e5fee05..773f5980ab 100644
--- a/frontends/main/.env.example
+++ b/frontends/main/.env.example
@@ -1,6 +1,5 @@
 NEXT_PUBLIC_ORIGIN=http://open.odl.local:8062
 NEXT_PUBLIC_MITOL_API_BASE_URL=http://open.odl.local:8063
-MITOL_API_BASE_URL=http://open.odl.local:8063
 
 NEXT_PUBLIC_PUBLIC_URL=/
 NEXT_PUBLIC_SITE_NAME=MIT Learn
diff --git a/frontends/main/next.config.js b/frontends/main/next.config.js
index bf9b547ab2..f97530c0d8 100644
--- a/frontends/main/next.config.js
+++ b/frontends/main/next.config.js
@@ -106,6 +106,12 @@ const nextConfig = {
         port: "",
         pathname: "**",
       },
+      {
+        protocol: "https",
+        hostname: "xpro-app-rc.s3.amazonaws.com",
+        port: "",
+        pathname: "**",
+      },
     ],
   },
 }
diff --git a/frontends/main/package.json b/frontends/main/package.json
index cbc8794533..1d1e27e1e8 100644
--- a/frontends/main/package.json
+++ b/frontends/main/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "PORT=${PORT:-8062} next dev",
     "build": "next build",
     "build:no-lint": "next build --no-lint",
     "start": "next start",
diff --git a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
index b15ec024e1..620af3b3b8 100644
--- a/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { Suspense } from "react"
 import {
   RiAccountCircleFill,
   RiDashboardLine,
@@ -43,7 +43,6 @@ import UserListDetailsTab from "./UserListDetailsTab"
 import { SettingsPage } from "./SettingsPage"
 import { DASHBOARD_HOME, MY_LISTS, PROFILE, SETTINGS } from "@/common/urls"
 import LearningResourceDrawer from "@/page-components/LearningResourceDrawer/LearningResourceDrawer"
-// import MetaTags from "@/page-components/MetaTags/MetaTags"
 
 /**
  *
@@ -441,52 +440,54 @@ const DashboardPage: React.FC = () => {
                         </ButtonLink>
                       </HomeHeaderRight>
                     </HomeHeader>
-                    <StyledResourceCarousel
-                      titleComponent="h2"
-                      title="Top picks for you"
-                      isLoading={isLoadingProfile}
-                      config={TopPicksCarouselConfig(profile)}
-                      data-testid="top-picks-carousel"
-                    />
-                    {topics?.map((topic, index) => (
+                    <Suspense>
                       <StyledResourceCarousel
-                        key={index}
                         titleComponent="h2"
-                        title={`Popular courses in ${topic}`}
+                        title="Top picks for you"
                         isLoading={isLoadingProfile}
-                        config={TopicCarouselConfig(topic)}
-                        data-testid={`topic-carousel-${topic}`}
+                        config={TopPicksCarouselConfig(profile)}
+                        data-testid="top-picks-carousel"
                       />
-                    ))}
-                    {certification === true ? (
+                      {topics?.map((topic, index) => (
+                        <StyledResourceCarousel
+                          key={index}
+                          titleComponent="h2"
+                          title={`Popular courses in ${topic}`}
+                          isLoading={isLoadingProfile}
+                          config={TopicCarouselConfig(topic)}
+                          data-testid={`topic-carousel-${topic}`}
+                        />
+                      ))}
+                      {certification === true ? (
+                        <StyledResourceCarousel
+                          titleComponent="h2"
+                          title="Courses with Certificates"
+                          isLoading={isLoadingProfile}
+                          config={CERTIFICATE_COURSES_CAROUSEL}
+                          data-testid="certification-carousel"
+                        />
+                      ) : (
+                        <StyledResourceCarousel
+                          titleComponent="h2"
+                          title="Free courses"
+                          isLoading={isLoadingProfile}
+                          config={FREE_COURSES_CAROUSEL}
+                          data-testid="free-carousel"
+                        />
+                      )}
                       <StyledResourceCarousel
                         titleComponent="h2"
-                        title="Courses with Certificates"
-                        isLoading={isLoadingProfile}
-                        config={CERTIFICATE_COURSES_CAROUSEL}
-                        data-testid="certification-carousel"
+                        title="New"
+                        config={NEW_LEARNING_RESOURCES_CAROUSEL}
+                        data-testid="new-learning-resources-carousel"
                       />
-                    ) : (
                       <StyledResourceCarousel
                         titleComponent="h2"
-                        title="Free courses"
-                        isLoading={isLoadingProfile}
-                        config={FREE_COURSES_CAROUSEL}
-                        data-testid="free-carousel"
+                        title="Popular"
+                        config={POPULAR_LEARNING_RESOURCES_CAROUSEL}
+                        data-testid="popular-learning-resources-carousel"
                       />
-                    )}
-                    <StyledResourceCarousel
-                      titleComponent="h2"
-                      title="New"
-                      config={NEW_LEARNING_RESOURCES_CAROUSEL}
-                      data-testid="new-learning-resources-carousel"
-                    />
-                    <StyledResourceCarousel
-                      titleComponent="h2"
-                      title="Popular"
-                      config={POPULAR_LEARNING_RESOURCES_CAROUSEL}
-                      data-testid="popular-learning-resources-carousel"
-                    />
+                    </Suspense>
                   </TabPanelStyled>
                   <TabPanelStyled value={MY_LISTS}>
                     <UserListListingComponent title="My Lists" />
diff --git a/frontends/main/src/app-pages/ProgramLetterPage/ProgramLetterPage.tsx b/frontends/main/src/app-pages/ProgramLetterPage/ProgramLetterPage.tsx
index d3ad8fcc1c..029364a53f 100644
--- a/frontends/main/src/app-pages/ProgramLetterPage/ProgramLetterPage.tsx
+++ b/frontends/main/src/app-pages/ProgramLetterPage/ProgramLetterPage.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React from "react"
 import { styled } from "ol-components"
 import { useProgramLettersDetail } from "api/hooks/programLetters"
diff --git a/frontends/main/src/app/c/[channelType]/[name]/ClientWrapper.tsx b/frontends/main/src/app/c/[channelType]/[name]/ClientWrapper.tsx
deleted file mode 100644
index 5afe73db54..0000000000
--- a/frontends/main/src/app/c/[channelType]/[name]/ClientWrapper.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client"
-
-import React from "react"
-import ChannelPage from "@/app-pages/ChannelPage/ChannelPage"
-
-const Page: React.FC = () => {
-  return <ChannelPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/c/[channelType]/[name]/page.tsx b/frontends/main/src/app/c/[channelType]/[name]/page.tsx
index b48a399759..a304f9d7d8 100644
--- a/frontends/main/src/app/c/[channelType]/[name]/page.tsx
+++ b/frontends/main/src/app/c/[channelType]/[name]/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import PageWrapper from "./ClientWrapper"
+import ChannelPage from "@/app-pages/ChannelPage/ChannelPage"
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <ChannelPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/dashboard/ClientWrapper.tsx b/frontends/main/src/app/dashboard/ClientWrapper.tsx
deleted file mode 100644
index 90073487b0..0000000000
--- a/frontends/main/src/app/dashboard/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
-
-const Page: React.FC = () => {
-  return <DashboardPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/dashboard/[tab]/ClientWrapper.tsx b/frontends/main/src/app/dashboard/[tab]/ClientWrapper.tsx
deleted file mode 100644
index 90073487b0..0000000000
--- a/frontends/main/src/app/dashboard/[tab]/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
-
-const Page: React.FC = () => {
-  return <DashboardPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/dashboard/[tab]/[id]/ClientWrapper.tsx b/frontends/main/src/app/dashboard/[tab]/[id]/ClientWrapper.tsx
deleted file mode 100644
index 90073487b0..0000000000
--- a/frontends/main/src/app/dashboard/[tab]/[id]/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
-
-const Page: React.FC = () => {
-  return <DashboardPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx b/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx
index b48a399759..ece6a5603b 100644
--- a/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx
+++ b/frontends/main/src/app/dashboard/[tab]/[id]/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import PageWrapper from "./ClientWrapper"
+import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <DashboardPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/dashboard/[tab]/page.tsx b/frontends/main/src/app/dashboard/[tab]/page.tsx
index b48a399759..ece6a5603b 100644
--- a/frontends/main/src/app/dashboard/[tab]/page.tsx
+++ b/frontends/main/src/app/dashboard/[tab]/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import PageWrapper from "./ClientWrapper"
+import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <DashboardPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/dashboard/page.tsx b/frontends/main/src/app/dashboard/page.tsx
index d134acea52..274fb49292 100644
--- a/frontends/main/src/app/dashboard/page.tsx
+++ b/frontends/main/src/app/dashboard/page.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Metadata } from "next"
 import { getMetadata } from "@/common/metadata"
-import PageWrapper from "./ClientWrapper"
+import DashboardPage from "@/app-pages/DashboardPage/DashboardPage"
 
 export const metadata: Metadata = getMetadata({
   title: "Your MIT Learning Journey",
@@ -9,7 +9,7 @@ export const metadata: Metadata = getMetadata({
 })
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <DashboardPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/learningpaths/[id]/ClientWrapper.tsx b/frontends/main/src/app/learningpaths/[id]/ClientWrapper.tsx
deleted file mode 100644
index eaa37130e1..0000000000
--- a/frontends/main/src/app/learningpaths/[id]/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import LearningPathDetailsPage from "@/app-pages/LearningPathDetailsPage/LearningPathDetailsPage"
-
-const Page: React.FC = () => {
-  return <LearningPathDetailsPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/learningpaths/[id]/page.tsx b/frontends/main/src/app/learningpaths/[id]/page.tsx
index b48a399759..1e2394f541 100644
--- a/frontends/main/src/app/learningpaths/[id]/page.tsx
+++ b/frontends/main/src/app/learningpaths/[id]/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import PageWrapper from "./ClientWrapper"
+import LearningPathDetailsPage from "@/app-pages/LearningPathDetailsPage/LearningPathDetailsPage"
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <LearningPathDetailsPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/onboarding/ClientWrapper.tsx b/frontends/main/src/app/onboarding/ClientWrapper.tsx
deleted file mode 100644
index d42c63a98e..0000000000
--- a/frontends/main/src/app/onboarding/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import OnboardingPage from "@/app-pages/OnboardingPage/OnboardingPage"
-
-const Page: React.FC = () => {
-  return <OnboardingPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/onboarding/page.tsx b/frontends/main/src/app/onboarding/page.tsx
index fb41f0b782..729c526251 100644
--- a/frontends/main/src/app/onboarding/page.tsx
+++ b/frontends/main/src/app/onboarding/page.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Metadata } from "next"
 import { getMetadata } from "@/common/metadata"
-import PageWrapper from "./ClientWrapper"
+import OnboardingPage from "@/app-pages/OnboardingPage/OnboardingPage"
 
 export const metadata: Metadata = getMetadata({
   title: "Onboarding",
@@ -9,7 +9,7 @@ export const metadata: Metadata = getMetadata({
 })
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <OnboardingPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/program_letter/[id]/view/ClientWrapper.tsx b/frontends/main/src/app/program_letter/[id]/view/ClientWrapper.tsx
deleted file mode 100644
index b5fedd3602..0000000000
--- a/frontends/main/src/app/program_letter/[id]/view/ClientWrapper.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-/*
- * This file wraps the page in a Client Component to avoid errors such as:
- * You're importing a component that needs usePathname. It only works in a Client Component but none of
- * its parents are marked with "use client", so they're Server Components by default.
- */
-
-import React from "react"
-import ProgramLetterPage from "@/app-pages/ProgramLetterPage/ProgramLetterPage"
-
-const Page: React.FC = () => {
-  return <ProgramLetterPage />
-}
-
-export default Page
diff --git a/frontends/main/src/app/program_letter/[id]/view/page.tsx b/frontends/main/src/app/program_letter/[id]/view/page.tsx
index b48a399759..849a6050e5 100644
--- a/frontends/main/src/app/program_letter/[id]/view/page.tsx
+++ b/frontends/main/src/app/program_letter/[id]/view/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import PageWrapper from "./ClientWrapper"
+import ProgramLetterPage from "@/app-pages/ProgramLetterPage/ProgramLetterPage"
 
 const Page: React.FC = () => {
-  return <PageWrapper />
+  return <ProgramLetterPage />
 }
 
 export default Page
diff --git a/frontends/main/src/app/providers.tsx b/frontends/main/src/app/providers.tsx
index ef0fd75b0f..8dbe732cf0 100644
--- a/frontends/main/src/app/providers.tsx
+++ b/frontends/main/src/app/providers.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import getQueryClient from "./getQueryClient"
 import { QueryClientProvider } from "api/ssr"
 import { ThemeProvider, NextJsAppRouterCacheProvider } from "ol-components"
-import { Provider as NiceModalProvider } from "@/libraries/@ebay/nice-modal-react"
+import { Provider as NiceModalProvider } from "@ebay/nice-modal-react"
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   const queryClient = getQueryClient()
diff --git a/frontends/main/src/app/search/page.tsx b/frontends/main/src/app/search/page.tsx
index f6352b31d5..5ee825afa2 100644
--- a/frontends/main/src/app/search/page.tsx
+++ b/frontends/main/src/app/search/page.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Suspense } from "react"
 import { Metadata } from "next"
 import { getMetadata } from "@/common/metadata"
 import SearchPage from "@/app-pages/SearchPage/SearchPage"
@@ -8,7 +8,11 @@ export const metadata: Metadata = getMetadata({
 })
 
 const Page: React.FC = () => {
-  return <SearchPage />
+  return (
+    <Suspense>
+      <SearchPage />
+    </Suspense>
+  )
 }
 
 export default Page
diff --git a/frontends/main/src/libraries/@ebay/nice-modal-react.ts b/frontends/main/src/libraries/@ebay/nice-modal-react.ts
deleted file mode 100644
index cd951ed6cf..0000000000
--- a/frontends/main/src/libraries/@ebay/nice-modal-react.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-"use client"
-
-export * as NiceModal from "@ebay/nice-modal-react"
-
-export { Provider } from "@ebay/nice-modal-react"
diff --git a/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx b/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
index 95db0f70cc..d13b78761e 100644
--- a/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
+++ b/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
@@ -11,7 +11,7 @@ import {
 
 import { RiAddLine } from "@remixicon/react"
 
-import { NiceModal } from "@/libraries/@ebay/nice-modal-react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
 
 import {
   type LearningPathResource,
@@ -127,7 +127,7 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
       fullWidth
       onReset={formik.resetForm}
       onSubmit={formik.handleSubmit}
-      {...NiceModal.muiDialogV5(modal)}
+      {...muiDialogV5(modal)}
       actions={
         <Actions>
           <Button
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
index 4d66d56e81..50db4fbdb8 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { Suspense, useCallback } from "react"
 import {
   RoutedDrawer,
   LearningResourceExpanded,
@@ -88,15 +88,17 @@ const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
 
 const LearningResourceDrawer = () => {
   return (
-    <RoutedDrawer
-      anchor="right"
-      requiredParams={RESOURCE_DRAWER_PARAMS}
-      PaperProps={PAPER_PROPS}
-    >
-      {({ params }) => {
-        return <DrawerContent resourceId={Number(params.resource)} />
-      }}
-    </RoutedDrawer>
+    <Suspense>
+      <RoutedDrawer
+        anchor="right"
+        requiredParams={RESOURCE_DRAWER_PARAMS}
+        PaperProps={PAPER_PROPS}
+      >
+        {({ params }) => {
+          return <DrawerContent resourceId={Number(params.resource)} />
+        }}
+      </RoutedDrawer>
+    </Suspense>
   )
 }
 
diff --git a/frontends/main/src/page-components/ManageListDialogs/ManageListDialogs.tsx b/frontends/main/src/page-components/ManageListDialogs/ManageListDialogs.tsx
index 0785f48e09..8523e37027 100644
--- a/frontends/main/src/page-components/ManageListDialogs/ManageListDialogs.tsx
+++ b/frontends/main/src/page-components/ManageListDialogs/ManageListDialogs.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react"
 import { useFormik, FormikConfig } from "formik"
-import { NiceModal } from "@/libraries/@ebay/nice-modal-react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
 import { RiDeleteBinLine } from "@remixicon/react"
 import {
   Alert,
@@ -114,7 +114,7 @@ const UpsertLearningPathDialog = NiceModal.create(
 
     return (
       <FormDialog
-        {...NiceModal.muiDialogV5(modal)}
+        {...muiDialogV5(modal)}
         title={title}
         fullWidth
         formClassName="manage-list-form"
@@ -231,7 +231,7 @@ const UpsertUserListDialog = NiceModal.create(
 
     return (
       <FormDialog
-        {...NiceModal.muiDialogV5(modal)}
+        {...muiDialogV5(modal)}
         title={title}
         fullWidth
         formClassName="manage-list-form"
@@ -311,7 +311,7 @@ const DeleteLearningPathDialog = NiceModal.create(
     }, [destroyList, hideModal, resource])
     return (
       <Dialog
-        {...NiceModal.muiDialogV5(modal)}
+        {...muiDialogV5(modal)}
         onConfirm={handleConfirm}
         title="Delete Learning Path"
         confirmText="Yes, delete"
@@ -343,7 +343,7 @@ const DeleteUserListDialog = NiceModal.create(
 
     return (
       <Dialog
-        {...NiceModal.muiDialogV5(modal)}
+        {...muiDialogV5(modal)}
         onConfirm={handleConfirm}
         title="Delete List"
         confirmText="Yes, delete"
diff --git a/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx b/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
index c2a0f7e70a..46089ff01b 100644
--- a/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
+++ b/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
@@ -4,7 +4,7 @@ import {
   LearningResourceListCard,
   LearningResourceListCardCondensed,
 } from "ol-components"
-import { NiceModal } from "@/libraries/@ebay/nice-modal-react"
+import NiceModal from "@ebay/nice-modal-react"
 import type {
   LearningResourceCardProps,
   LearningResourceListCardProps,