diff --git a/env/shared.env b/env/shared.env
index 178503bf27..5583523cd9 100644
--- a/env/shared.env
+++ b/env/shared.env
@@ -13,3 +13,8 @@ APISIX_PORT=8065
 KEYCLOAK_PORT=8066
 KEYCLOAK_SSL_PORT=8067
 REDIS_VIEW_CACHE_DURATION=0
+
+# APISIX session cookie defaults (can be overridden in local env)
+APISIX_COOKIE_SECURE=false
+APISIX_COOKIE_SAMESITE=Lax
+APISIX_REDIRECT_URI=http://host.docker.internal:8777/.apisix/redirect
diff --git a/frontends/api/src/mitxonline/hooks/enrollment/queries.ts b/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
index 67f0a9855b..2110e1206e 100644
--- a/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
+++ b/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
@@ -1,7 +1,7 @@
 import { queryOptions } from "@tanstack/react-query"
 import type {
   CourseRunEnrollmentRequestV2,
-  UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
 import { courseRunEnrollmentsApi, programEnrollmentsApi } from "../../clients"
@@ -35,9 +35,9 @@ const enrollmentQueries = {
   programEnrollmentsList: (opts?: RawAxiosRequestConfig) =>
     queryOptions({
       queryKey: enrollmentKeys.programEnrollmentsList(opts),
-      queryFn: async (): Promise<UserProgramEnrollmentDetail[]> => {
+      queryFn: async (): Promise<V2UserProgramEnrollmentDetail[]> => {
         return programEnrollmentsApi
-          .programEnrollmentsList(opts)
+          .v2ProgramEnrollmentsList(opts)
           .then((res) => res.data)
       },
     }),
diff --git a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
index 418cfdba1e..aac16f82f6 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
@@ -6,6 +6,7 @@ import type {
   CourseRunEnrollmentRequestV2,
   CourseRunGrade,
   UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { UniqueEnforcer } from "enforce-unique"
 import { factories } from ".."
@@ -193,9 +194,33 @@ const programEnrollment: PartialFactory<UserProgramEnrollmentDetail> = (
   return mergeOverrides<UserProgramEnrollmentDetail>(defaults, overrides)
 }
 
+const programEnrollmentV2: PartialFactory<V2UserProgramEnrollmentDetail> = (
+  overrides = {},
+): V2UserProgramEnrollmentDetail => {
+  const program = factories.programs.program()
+  const hasCertificate = faker.datatype.boolean()
+  const defaults: V2UserProgramEnrollmentDetail = {
+    certificate: hasCertificate
+      ? {
+          uuid: faker.string.uuid(),
+          link: `/certificate/program/${faker.string.uuid()}/`,
+        }
+      : null,
+    program: program,
+    enrollments: [courseEnrollment()],
+  }
+  return mergeOverrides<V2UserProgramEnrollmentDetail>(defaults, overrides)
+}
+
 // Not paginated
 const courseEnrollments = (count: number): CourseRunEnrollmentRequestV2[] => {
   return new Array(count).fill(null).map(() => courseEnrollment())
 }
 
-export { courseEnrollment, courseEnrollments, grade, programEnrollment }
+export {
+  courseEnrollment,
+  courseEnrollments,
+  grade,
+  programEnrollment,
+  programEnrollmentV2,
+}
diff --git a/frontends/api/src/mitxonline/test-utils/urls.ts b/frontends/api/src/mitxonline/test-utils/urls.ts
index b8d08e6985..6cd42e74e0 100644
--- a/frontends/api/src/mitxonline/test-utils/urls.ts
+++ b/frontends/api/src/mitxonline/test-utils/urls.ts
@@ -26,6 +26,7 @@ const enrollment = {
 
 const programEnrollments = {
   enrollmentsList: () => `${API_BASE_URL}/api/v1/program_enrollments/`,
+  enrollmentsListV2: () => `${API_BASE_URL}/api/v2/program_enrollments/`,
 }
 
 const b2b = {
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
index ec993bd752..a603a25193 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -9,7 +9,7 @@ import {
 import * as mitxonline from "api/mitxonline-test-utils"
 import { mockAxiosInstance } from "api/test-utils"
 import { DashboardCard, getDefaultContextMenuItems } from "./DashboardCard"
-import { dashboardCourse } from "./test-utils"
+import { dashboardCourse, dashboardProgram } from "./test-utils"
 import { faker } from "@faker-js/faker/locale/en"
 import moment from "moment"
 import { EnrollmentMode, EnrollmentStatus } from "./types"
@@ -80,10 +80,13 @@ describe.each([
     })
   })
 
-  test("It shows course title and links to marketingUrl if titleAction is marketing", async () => {
+  test("It shows course title and links to marketingUrl if titleAction is marketing and enrolled", async () => {
     setupUserApis()
     const course = dashboardCourse({
       marketingUrl: "?some-marketing-url",
+      enrollment: {
+        status: EnrollmentStatus.Enrolled,
+      },
     })
     renderWithProviders(
       <DashboardCard titleAction="marketing" dashboardResource={course} />,
@@ -97,9 +100,39 @@ describe.each([
     expect(courseLink).toHaveAttribute("href", course.marketingUrl)
   })
 
-  test("It shows course title and links to courseware if titleAction is courseware", async () => {
+  test("It shows course title as clickable text (not link) if titleAction is marketing and not enrolled (non-B2B)", async () => {
     setupUserApis()
-    const course = dashboardCourse()
+    const course = dashboardCourse({
+      marketingUrl: "?some-marketing-url",
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+      },
+      run: {
+        b2bContractId: null,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="marketing" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    // Should not be a link
+    expect(
+      within(card).queryByRole("link", { name: course.title }),
+    ).not.toBeInTheDocument()
+    // Should be clickable text
+    const titleText = within(card).getByText(course.title)
+    expect(titleText).toBeInTheDocument()
+  })
+
+  test("It shows course title and links to courseware if titleAction is courseware and enrolled", async () => {
+    setupUserApis()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.Enrolled,
+      },
+    })
     renderWithProviders(
       <DashboardCard titleAction="courseware" dashboardResource={course} />,
     )
@@ -112,6 +145,56 @@ describe.each([
     expect(courseLink).toHaveAttribute("href", course.run.coursewareUrl)
   })
 
+  test("It shows course title as clickable text (not link) if titleAction is courseware and not enrolled (non-B2B)", async () => {
+    setupUserApis()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+      },
+      run: {
+        b2bContractId: null,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="courseware" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    // Should not be a link
+    expect(
+      within(card).queryByRole("link", { name: course.title }),
+    ).not.toBeInTheDocument()
+    // Should be clickable text
+    const titleText = within(card).getByText(course.title)
+    expect(titleText).toBeInTheDocument()
+  })
+
+  test("It shows course title as link if not enrolled but has B2B contract", async () => {
+    setupUserApis()
+    const b2bContractId = faker.number.int()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+        b2b_contract_id: b2bContractId,
+      },
+      run: {
+        b2bContractId: b2bContractId,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="courseware" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    // Should be a link for B2B courses
+    const courseLink = within(card).getByRole("link", {
+      name: course.title,
+    })
+    expect(courseLink).toHaveAttribute("href", course.run.coursewareUrl)
+  })
+
   test("Accepts a classname", () => {
     setupUserApis()
     const course = dashboardCourse()
@@ -137,12 +220,22 @@ describe.each([
 
   test.each([
     {
-      course: pastDashboardCourse(),
+      course: pastDashboardCourse({
+        enrollment: {
+          status: EnrollmentStatus.Enrolled,
+          mode: EnrollmentMode.Audit,
+        },
+      }),
       expected: { enabled: true },
       case: "past",
     },
     {
-      course: currentDashboardCourse(),
+      course: currentDashboardCourse({
+        enrollment: {
+          status: EnrollmentStatus.Enrolled,
+          mode: EnrollmentMode.Audit,
+        },
+      }),
       expected: { enabled: true },
       case: "current",
     },
@@ -221,7 +314,7 @@ describe.each([
       view.rerender(
         <DashboardCard
           titleAction="marketing"
-          courseNoun={courseNoun}
+          noun={courseNoun}
           dashboardResource={course}
         />,
       )
@@ -236,7 +329,7 @@ describe.each([
           `${expected.label} ${courseNoun}`,
         )
       } else {
-        // "Continue" doesn't use courseNoun
+        // "Continue" doesn't use noun
         expect(coursewareCTA).toHaveTextContent(expected.label)
       }
     },
@@ -605,8 +698,15 @@ describe.each([
     "Enrollment for complete profile bypasses just-in-time dialog",
     async ({ trigger }) => {
       const userData = mitxUser()
+      const b2bContractId = faker.number.int()
       const course = dashboardCourse({
-        enrollment: { status: EnrollmentStatus.NotEnrolled },
+        enrollment: {
+          status: EnrollmentStatus.NotEnrolled,
+          b2b_contract_id: b2bContractId,
+        },
+        run: {
+          b2bContractId: b2bContractId,
+        },
       })
       const { enrollmentUrl } = setupEnrollmentApis({ user: userData, course })
       renderWithProviders(
@@ -634,8 +734,15 @@ describe.each([
   )(
     "Enrollment for complete profile bypasses just-in-time dialog",
     async ({ trigger, userData }) => {
+      const b2bContractId = faker.number.int()
       const course = dashboardCourse({
-        enrollment: { status: EnrollmentStatus.NotEnrolled },
+        enrollment: {
+          status: EnrollmentStatus.NotEnrolled,
+          b2b_contract_id: b2bContractId,
+        },
+        run: {
+          b2bContractId: b2bContractId,
+        },
       })
       setupEnrollmentApis({ user: userData, course })
       renderWithProviders(
@@ -655,4 +762,90 @@ describe.each([
       )
     },
   )
+
+  describe("Stacked Variant", () => {
+    test("applies stacked variant styling", () => {
+      setupUserApis()
+      const course = dashboardCourse()
+      renderWithProviders(
+        <DashboardCard
+          variant="stacked"
+          titleAction="marketing"
+          dashboardResource={course}
+        />,
+      )
+
+      const card = getCard()
+      expect(card).toBeInTheDocument()
+      // Successfully renders a stacked card - the variant prop controls styling via styled-components
+    })
+
+    test("renders multiple stacked cards correctly", () => {
+      setupUserApis()
+      const courses = [
+        dashboardCourse({ title: "First Stacked Course" }),
+        dashboardCourse({ title: "Second Stacked Course" }),
+        dashboardCourse({ title: "Third Stacked Course" }),
+      ]
+
+      renderWithProviders(
+        <div>
+          {courses.map((course) => (
+            <DashboardCard
+              key={course.key}
+              variant="stacked"
+              titleAction="marketing"
+              dashboardResource={course}
+            />
+          ))}
+        </div>,
+      )
+
+      const allCards = screen.getAllByTestId(testId)
+      expect(allCards).toHaveLength(3)
+      expect(
+        within(allCards[0]).getByText("First Stacked Course"),
+      ).toBeInTheDocument()
+      expect(
+        within(allCards[1]).getByText("Second Stacked Course"),
+      ).toBeInTheDocument()
+      expect(
+        within(allCards[2]).getByText("Third Stacked Course"),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe("Program Cards", () => {
+    test("renders program card with title", () => {
+      setupUserApis()
+      const program = dashboardProgram({
+        title: "Test Program Title",
+      })
+
+      renderWithProviders(
+        <DashboardCard titleAction="marketing" dashboardResource={program} />,
+      )
+
+      const card = getCard()
+      expect(within(card).getByText("Test Program Title")).toBeInTheDocument()
+    })
+
+    test("program card does not show course-specific elements", () => {
+      setupUserApis()
+      const program = dashboardProgram({
+        title: "Test Program",
+      })
+
+      renderWithProviders(
+        <DashboardCard titleAction="marketing" dashboardResource={program} />,
+      )
+
+      const card = getCard()
+      // Programs don't show enrollment status or courseware buttons
+      expect(
+        within(card).queryByTestId("courseware-button"),
+      ).not.toBeInTheDocument()
+      expect(within(card).queryByTestId("upgrade-root")).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 1d0787cb60..69860b36b8 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -9,10 +9,16 @@ import {
   LoadingSpinner,
 } from "ol-components"
 import NextLink from "next/link"
-import { EnrollmentStatus, EnrollmentMode } from "./types"
+import {
+  EnrollmentStatus,
+  EnrollmentMode,
+  DashboardResourceType,
+} from "./types"
 import type {
   DashboardResource,
   DashboardCourse,
+  DashboardProgram,
+  DashboardProgramCollection,
   DashboardCourseEnrollment,
 } from "./types"
 import { ActionButton, Button, ButtonLink } from "@mitodl/smoot-design"
@@ -34,10 +40,31 @@ import NiceModal from "@ebay/nice-modal-react"
 import { useCreateEnrollment } from "api/mitxonline-hooks/enrollment"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
+import { programView } from "@/common/urls"
+
+// Type guard functions
+const isDashboardCourse = (
+  resource: DashboardResource,
+): resource is DashboardCourse => {
+  return resource.type === DashboardResourceType.Course
+}
+
+const isDashboardProgram = (
+  resource: DashboardResource,
+): resource is DashboardProgram => {
+  return resource.type === DashboardResourceType.Program
+}
+
+const isDashboardProgramCollection = (
+  resource: DashboardResource,
+): resource is DashboardProgramCollection => {
+  return resource.type === DashboardResourceType.ProgramCollection
+}
 
 const CardRoot = styled.div<{
   screenSize: "desktop" | "mobile"
-}>(({ theme, screenSize }) => [
+  variant?: "default" | "stacked"
+}>(({ theme, screenSize, variant = "default" }) => [
   {
     position: "relative",
     border: `1px solid ${theme.custom.colors.lightGray2}`,
@@ -46,6 +73,9 @@ const CardRoot = styled.div<{
     display: "flex",
     gap: "8px",
     alignItems: "center",
+  },
+  // Mobile styles for default variant
+  variant === "default" && {
     [theme.breakpoints.down("md")]: {
       border: "none",
       borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
@@ -55,6 +85,26 @@ const CardRoot = styled.div<{
       gap: "16px",
     },
   },
+  // Stacked variant styles
+  variant === "stacked" && {
+    border: "none",
+    borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "0px !important",
+    boxShadow: "none",
+    "&:first-of-type": {
+      borderTopLeftRadius: "8px !important",
+      borderTopRightRadius: "8px !important",
+    },
+    "&:last-of-type": {
+      borderBottomLeftRadius: "8px !important",
+      borderBottomRightRadius: "8px !important",
+      borderBottom: "none",
+    },
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      gap: "16px",
+    },
+  },
   screenSize === "desktop" && {
     [theme.breakpoints.down("md")]: {
       display: "none",
@@ -73,6 +123,17 @@ const TitleLink = styled(Link)(({ theme }) => ({
   },
 }))
 
+const TitleText = styled.div<{ clickable?: boolean }>(
+  ({ theme, clickable }) => ({
+    ...theme.typography.subtitle2,
+    color: theme.custom.colors.darkGray2,
+    cursor: clickable ? "pointer" : "default",
+    [theme.breakpoints.down("md")]: {
+      maxWidth: "calc(100% - 16px)",
+    },
+  }),
+)
+
 const MenuButton = styled(ActionButton)<{
   status?: EnrollmentStatus
 }>(({ theme, status }) => [
@@ -150,32 +211,45 @@ const useOneClickEnroll = () => {
 
 type CoursewareButtonProps = {
   coursewareId?: string | null
+  readableId?: string | null
   startDate?: string | null
   endDate?: string | null
   enrollmentStatus?: EnrollmentStatus | null
   href?: string | null
   className?: string
-  courseNoun: string
+  noun: string
+  resourceType?: DashboardResourceType
+  b2bContractId?: number | null
   "data-testid"?: string
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
 }
 
 const getCoursewareTextAndIcon = ({
   endDate,
   enrollmentStatus,
-  courseNoun,
+  noun,
+  resourceType,
 }: {
   endDate?: string | null
   enrollmentStatus?: EnrollmentStatus | null
-  courseNoun: string
+  noun: string
+  resourceType?: DashboardResourceType
 }) => {
   if (!enrollmentStatus || enrollmentStatus === EnrollmentStatus.NotEnrolled) {
-    return { text: `Start ${courseNoun}`, endIcon: null }
+    return { text: `Start ${noun}`, endIcon: null }
   }
   if (
     (endDate && isInPast(endDate)) ||
     enrollmentStatus === EnrollmentStatus.Completed
   ) {
-    return { text: `View ${courseNoun}`, endIcon: null }
+    return { text: `View ${noun}`, endIcon: null }
+  }
+  // Programs show "View Program" when enrolled, courses show "Continue"
+  if (
+    resourceType === DashboardResourceType.Program &&
+    enrollmentStatus === EnrollmentStatus.Enrolled
+  ) {
+    return { text: `View ${noun}`, endIcon: null }
   }
   return { text: "Continue", endIcon: <RiArrowRightLine /> }
 }
@@ -183,18 +257,23 @@ const getCoursewareTextAndIcon = ({
 const CoursewareButton = styled(
   ({
     coursewareId,
+    readableId,
     startDate,
     endDate,
     enrollmentStatus,
     href,
     className,
-    courseNoun,
+    noun,
+    resourceType,
+    b2bContractId,
+    onClick,
     ...others
   }: CoursewareButtonProps) => {
     const coursewareText = getCoursewareTextAndIcon({
       endDate,
-      courseNoun,
+      noun,
       enrollmentStatus,
+      resourceType,
     })
     const hasStarted = startDate && isInPast(startDate)
     const hasEnrolled =
@@ -202,32 +281,81 @@ const CoursewareButton = styled(
 
     const oneClickEnroll = useOneClickEnroll()
 
+    if (resourceType === DashboardResourceType.Program) {
+      return (
+        <ButtonLink
+          size="small"
+          variant="primary"
+          className={className}
+          href={href ?? undefined}
+          {...others}
+        >
+          {coursewareText.text}
+        </ButtonLink>
+      )
+    }
+
+    if (onClick) {
+      return (
+        <Button
+          size="small"
+          variant="primary"
+          className={className}
+          onClick={onClick}
+          {...others}
+        >
+          {coursewareText.text}
+        </Button>
+      )
+    }
+
     if (!hasEnrolled /* enrollment flow */) {
+      // For B2B courses, use one-click enrollment
+      if (b2bContractId) {
+        return (
+          <Button
+            size="small"
+            variant="primary"
+            className={className}
+            disabled={oneClickEnroll.isPending || !coursewareId}
+            onClick={() => {
+              if (!href || !coursewareId) return
+              oneClickEnroll.mutate({ href, coursewareId })
+            }}
+            endIcon={
+              oneClickEnroll.isPending ? (
+                <LoadingSpinner
+                  color="inherit"
+                  loading={oneClickEnroll.isPending}
+                  size={16}
+                />
+              ) : undefined
+            }
+            {...others}
+          >
+            {coursewareText.text}
+          </Button>
+        )
+      }
+
+      // For non-B2B courses, show alert
       return (
         <Button
           size="small"
           variant="primary"
           className={className}
-          disabled={oneClickEnroll.isPending || !coursewareId}
-          onClick={() => {
-            if (!href || !coursewareId) return
-            oneClickEnroll.mutate({ href, coursewareId })
-          }}
-          endIcon={
-            oneClickEnroll.isPending ? (
-              <LoadingSpinner
-                color="inherit"
-                loading={oneClickEnroll.isPending}
-                size={16}
-              />
-            ) : undefined
+          onClick={() =>
+            alert("Non-B2B course enrollment is not yet implemented.")
           }
           {...others}
         >
           {coursewareText.text}
         </Button>
       )
-    } else if (hasStarted && href /* Link to course */) {
+    } else if (
+      (hasStarted || !startDate) &&
+      href /* Link to course or program */
+    ) {
       return (
         <ButtonLink
           size="small"
@@ -241,7 +369,7 @@ const CoursewareButton = styled(
         </ButtonLink>
       )
     }
-    // Disabled
+    // Disabled (course not started yet)
     return (
       <Button
         size="small"
@@ -366,11 +494,13 @@ type DashboardCardProps = {
   dashboardResource: DashboardResource
   showNotComplete?: boolean
   className?: string
-  courseNoun?: string
+  noun?: string
   offerUpgrade?: boolean
   contextMenuItems?: SimpleMenuItem[]
   isLoading?: boolean
   buttonHref?: string | null
+  buttonClick?: React.MouseEventHandler<HTMLButtonElement>
+  variant?: "default" | "stacked"
 }
 
 const DashboardCard: React.FC<DashboardCardProps> = ({
@@ -378,34 +508,73 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   showNotComplete = true,
   Component,
   className,
-  courseNoun = "Course",
+  noun = "Course",
   offerUpgrade = true,
   contextMenuItems = [],
   isLoading = false,
   buttonHref,
   titleAction,
+  buttonClick,
+  variant = "default",
 }) => {
-  const course = dashboardResource as DashboardCourse
-  const { title, marketingUrl, enrollment, run } = course
   const oneClickEnroll = useOneClickEnroll()
 
-  const coursewareUrl = run.coursewareUrl
-  const titleHref =
-    titleAction === "marketing" ? marketingUrl : (coursewareUrl ?? marketingUrl)
+  // Extract all conditional logic upfront
+  const isCourse = isDashboardCourse(dashboardResource)
+  const isProgram = isDashboardProgram(dashboardResource)
+  const isProgramCollection = isDashboardProgramCollection(dashboardResource)
+
+  // Early return for unsupported types
+  if (isProgramCollection) {
+    return <div>Program collection display not yet implemented</div>
+  }
+  if (!isCourse && !isProgram) {
+    return null
+  }
+
+  // Extract resource-specific data with proper type narrowing
+  const title = dashboardResource.title
+  const marketingUrl = isCourse ? dashboardResource.marketingUrl : undefined
+  const enrollment = isCourse ? dashboardResource.enrollment : undefined
+  const run = isCourse ? dashboardResource.run : undefined
+  const coursewareId = isCourse ? dashboardResource.coursewareId : null
+  const readableId = isCourse ? dashboardResource.readableId : null
+
+  // Title link logic
+  const coursewareUrl = run?.coursewareUrl
   const hasEnrolled =
     enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
+
+  const b2bContractId = enrollment?.b2b_contract_id ?? run?.b2bContractId
+
+  // Title link logic - only set href for enrolled courses or B2B courses
+  const titleHref = isCourse
+    ? hasEnrolled || b2bContractId
+      ? titleAction === "marketing"
+        ? marketingUrl
+        : (coursewareUrl ?? marketingUrl)
+      : undefined
+    : undefined // Programs don't have a title link yet
+
   const titleClick: React.MouseEventHandler | undefined =
-    titleAction === "courseware" && coursewareUrl && !hasEnrolled
+    isCourse && !hasEnrolled
       ? (e) => {
           e.preventDefault()
-          if (!course.coursewareId) return
-          oneClickEnroll.mutate({
-            href: coursewareUrl,
-            coursewareId: course.coursewareId,
-          })
+          // B2B courses use one-click enrollment
+          if (b2bContractId) {
+            if (!coursewareId || !coursewareUrl) return
+            oneClickEnroll.mutate({
+              href: coursewareUrl,
+              coursewareId: coursewareId,
+            })
+          } else {
+            // Non-B2B courses will show a dialog in the future
+            alert("Non-B2B course enrollment is not yet implemented.")
+          }
         }
       : undefined
 
+  // Build sections
   const titleSection = isLoading ? (
     <>
       <Skeleton variant="text" width="95%" height={16} />
@@ -414,34 +583,46 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
     </>
   ) : (
     <>
-      <TitleLink
-        size="medium"
-        color="black"
-        href={titleHref}
-        onClick={titleClick}
-      >
-        {title}
-      </TitleLink>
-      {enrollment?.status === EnrollmentStatus.Completed &&
-      run.certificate?.link ? (
+      {titleHref ? (
+        <TitleLink
+          size="medium"
+          color="black"
+          href={titleHref}
+          onClick={titleClick}
+        >
+          {title}
+        </TitleLink>
+      ) : titleClick ? (
+        <TitleText clickable onClick={titleClick}>
+          {title}
+        </TitleText>
+      ) : (
+        <TitleText>{title}</TitleText>
+      )}
+      {isCourse &&
+      enrollment?.status === EnrollmentStatus.Completed &&
+      run?.certificate?.link ? (
         <SubtitleLink href={run.certificate.link}>
-          {<RiAwardLine size="16px" />}
+          <RiAwardLine size="16px" />
           View Certificate
         </SubtitleLink>
       ) : null}
-      {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? (
+      {isCourse &&
+      enrollment?.mode !== EnrollmentMode.Verified &&
+      offerUpgrade ? (
         <UpgradeBanner
           data-testid="upgrade-root"
-          canUpgrade={run.canUpgrade ?? false}
-          certificateUpgradeDeadline={run.certificateUpgradeDeadline}
-          certificateUpgradePrice={run.certificateUpgradePrice}
+          canUpgrade={run?.canUpgrade ?? false}
+          certificateUpgradeDeadline={run?.certificateUpgradeDeadline}
+          certificateUpgradePrice={run?.certificateUpgradePrice}
         />
       ) : null}
     </>
   )
+
   const buttonSection = isLoading ? (
     <Skeleton variant="rectangular" width={120} height={32} />
-  ) : (
+  ) : isCourse ? (
     <>
       <EnrollmentStatusIndicator
         status={enrollment?.status}
@@ -449,23 +630,39 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
       />
       <CoursewareButton
         data-testid="courseware-button"
-        coursewareId={course.coursewareId}
-        startDate={run.startDate}
+        coursewareId={coursewareId}
+        readableId={readableId}
+        startDate={run?.startDate}
         enrollmentStatus={enrollment?.status}
-        href={buttonHref ? buttonHref : run.coursewareUrl}
-        endDate={run.endDate}
-        courseNoun={courseNoun}
+        href={buttonHref ?? run?.coursewareUrl}
+        endDate={run?.endDate}
+        noun={noun}
+        resourceType={DashboardResourceType.Course}
+        b2bContractId={b2bContractId}
+        onClick={buttonClick}
       />
     </>
-  )
+  ) : isProgram ? (
+    <CoursewareButton
+      noun="Program"
+      resourceType={DashboardResourceType.Program}
+      enrollmentStatus={dashboardResource.enrollment?.status}
+      href={buttonHref ?? programView(dashboardResource.id)}
+    />
+  ) : null
+
   const startDateSection = isLoading ? (
     <Skeleton variant="text" width={100} height={24} />
-  ) : run.startDate ? (
+  ) : isCourse && run?.startDate ? (
     <CourseStartCountdown startDate={run.startDate} />
   ) : null
+
   const menuItems = contextMenuItems.concat(
-    enrollment?.id ? getDefaultContextMenuItems(title, enrollment) : [],
+    isCourse && enrollment?.id
+      ? getDefaultContextMenuItems(title, enrollment)
+      : [],
   )
+
   const contextMenu = isLoading ? (
     <Skeleton variant="rectangular" width={12} height={24} />
   ) : (
@@ -484,62 +681,60 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
       }
     />
   )
-  const desktopLayout = (
-    <CardRoot
-      screenSize="desktop"
-      data-testid="enrollment-card-desktop"
-      as={Component}
-      className={className}
-    >
-      <Stack justifyContent="start" alignItems="stretch" gap="8px" flex={1}>
-        {titleSection}
-      </Stack>
-      <Stack gap="8px">
-        <Stack direction="row" gap="8px" alignItems="center">
-          {buttonSection}
-          {contextMenu}
-        </Stack>
-        {startDateSection}
-      </Stack>
-    </CardRoot>
-  )
 
-  const mobileLayout = (
-    <CardRoot
-      screenSize="mobile"
-      data-testid="enrollment-card-mobile"
-      as={Component}
-      className={className}
-    >
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="stretch"
-        flex={1}
-        width="100%"
+  // Single return block with unified layout
+  return (
+    <>
+      <CardRoot
+        screenSize="desktop"
+        data-testid="enrollment-card-desktop"
+        as={Component}
+        className={className}
+        variant={variant}
       >
-        <Stack direction="column" gap="8px" flex={1}>
+        <Stack justifyContent="start" alignItems="stretch" gap="8px" flex={1}>
           {titleSection}
         </Stack>
-        {contextMenu}
-      </Stack>
-      <Stack
-        direction="row"
-        alignItems="center"
-        justifyContent="end"
-        width="100%"
+        <Stack gap="8px">
+          <Stack direction="row" gap="8px" alignItems="center">
+            {buttonSection}
+            {contextMenu}
+          </Stack>
+          {startDateSection}
+        </Stack>
+      </CardRoot>
+
+      <CardRoot
+        screenSize="mobile"
+        data-testid="enrollment-card-mobile"
+        as={Component}
+        className={className}
+        variant={variant}
       >
-        {startDateSection}
-        <Stack direction="row" gap="8px" alignItems="center">
-          {buttonSection}
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="stretch"
+          flex={1}
+          width="100%"
+        >
+          <Stack direction="column" gap="8px" flex={1}>
+            {titleSection}
+          </Stack>
+          {contextMenu}
         </Stack>
-      </Stack>
-    </CardRoot>
-  )
-  return (
-    <>
-      {desktopLayout}
-      {mobileLayout}
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="end"
+          width="100%"
+        >
+          {startDateSection}
+          <Stack direction="row" gap="8px" alignItems="center">
+            {buttonSection}
+          </Stack>
+        </Stack>
+      </CardRoot>
     </>
   )
 }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index b4647bcf00..c271223cc6 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -40,6 +40,11 @@ describe("DashboardDialogs", () => {
       mitxonline.urls.enrollment.enrollmentsListV2(),
       enrollments,
     )
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     return { enrollments, completed, expired, started, notStarted }
   }
@@ -198,8 +203,15 @@ describe("JustInTimeDialog", () => {
     setMockResponse.get(mitxonline.urls.countries.list(), countries)
 
     // Setup course for enrollment
+    const b2bContractId = faker.number.int()
     const course = dashboardCourse({
-      enrollment: { status: EnrollmentStatus.NotEnrolled },
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+        b2b_contract_id: b2bContractId,
+      },
+      run: {
+        b2bContractId: b2bContractId,
+      },
       marketingUrl: "https://example.com/course",
     })
 
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 71d9424fb3..d6d37f2a89 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { act, waitFor } from "@testing-library/react"
 import {
   renderWithProviders,
   screen,
@@ -28,6 +29,11 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.enrollment.enrollmentsListV2(),
       enrollments,
     )
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     return { enrollments, completed, expired, started, notStarted }
   }
@@ -100,4 +106,427 @@ describe("EnrollmentDisplay", () => {
 
     expect(screen.queryByText("Show all")).not.toBeInTheDocument()
   })
+
+  test("Renders program cards when program enrollments exist", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const programEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "My Test Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    // Need at least one course enrollment to render the wrapper
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      mitxonline.factories.enrollment.courseEnrollment({
+        b2b_contract_id: null,
+        run: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run,
+          title: "Dummy Course",
+        },
+      }),
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [programEnrollment],
+    )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Program title appears twice (desktop + mobile)
+    const programCards = await screen.findAllByText("My Test Program")
+    expect(programCards.length).toBeGreaterThan(0)
+  })
+
+  test("Renders both course and program enrollments together", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const courseEnrollment = mitxonline.factories.enrollment.courseEnrollment({
+      b2b_contract_id: null,
+      run: {
+        ...mitxonline.factories.enrollment.courseEnrollment().run,
+        course: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run.course,
+          title: "My Test Course",
+        },
+      },
+    })
+    const programEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "My Test Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      courseEnrollment,
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [programEnrollment],
+    )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Course title appears in desktop + mobile cards
+    expect(
+      (await screen.findAllByText("My Test Course")).length,
+    ).toBeGreaterThan(0)
+    // Program title appears in desktop + mobile cards
+    expect(
+      (await screen.findAllByText("My Test Program")).length,
+    ).toBeGreaterThan(0)
+  })
+
+  test("Shows empty state when no enrollments exist", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    // Wait a moment for queries to complete
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    })
+
+    // Should not render the "My Learning" section when there are no enrollments
+    expect(
+      screen.queryByRole("heading", { name: "My Learning" }),
+    ).not.toBeInTheDocument()
+    const cards = screen.queryAllByTestId("enrollment-card-desktop")
+    expect(cards).toHaveLength(0)
+  })
+
+  test("Filters B2B program enrollments from display", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const b2bProgramEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "B2B Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: 123,
+            b2b_organization_id: 456,
+          },
+        ],
+      })
+
+    const nonB2BProgramEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "Personal Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    // Need at least one course enrollment to render the wrapper
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      mitxonline.factories.enrollment.courseEnrollment({
+        b2b_contract_id: null,
+        run: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run,
+          title: "Dummy Course",
+        },
+      }),
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [b2bProgramEnrollment, nonB2BProgramEnrollment],
+    )
+    // Mock contracts to filter out the B2B program
+    const contract = mitxonline.factories.contracts.contract({
+      programs: [b2bProgramEnrollment.program.id],
+    })
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [contract])
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Should only show the non-B2B program (appears in desktop + mobile cards)
+    const personalProgramCards = await screen.findAllByText("Personal Program")
+    expect(personalProgramCards.length).toBeGreaterThan(0)
+    expect(screen.queryByText("B2B Program")).not.toBeInTheDocument()
+  })
+
+  describe("ProgramId Filtering", () => {
+    test("Filters to single program when programId is provided", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 123,
+        title: "Target Program",
+        courses: [1, 2, 3],
+      })
+      const courses = mitxonline.factories.courses.courses({ count: 3 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(123), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case (when program data isn't loaded yet)
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={123} />)
+
+      await screen.findByText("Target Program")
+      expect(screen.getByText("Target Program")).toBeInTheDocument()
+    })
+
+    test("Displays course requirements when programId is provided", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const coreCourses = reqTree.addOperator({
+        operator: "all_of",
+        title: "Core Courses",
+      })
+      coreCourses.addCourse({ course: 1 })
+
+      const program = mitxonline.factories.programs.program({
+        id: 456,
+        courses: [1], // Only course 1 is in the requirements
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
+      })
+      const courses = {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Required Course 1",
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(456), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case (when program data isn't loaded yet)
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={456} />)
+
+      // Wait for program data to load
+      await screen.findByText(/for this program/)
+
+      // Wait for requirement sections to appear
+      await waitFor(
+        () => {
+          const coreCourses = screen.queryByText("Core Courses")
+          expect(coreCourses).toBeInTheDocument()
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    test("Shows enrollment status for program courses", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const requirements = reqTree.addOperator({
+        operator: "all_of",
+        title: "Requirements",
+      })
+      requirements.addCourse({ course: 1 })
+
+      const program = mitxonline.factories.programs.program({
+        id: 789,
+        courses: [1],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
+      })
+
+      const courses = {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Test Course",
+            page: {
+              page_url: "/courses/test-course/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(789), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={789} />)
+
+      // Wait for the section header to load
+      await screen.findByText("Requirements")
+
+      // Wait for the completion count to appear (this means courses have loaded)
+      await screen.findByText(/Completed 0 of 1/)
+
+      // Wait for loading to complete - check that skeleton is gone
+      await waitFor(
+        () => {
+          const skeletons = screen.queryAllByTestId("skeleton")
+          expect(skeletons).toHaveLength(0)
+        },
+        { timeout: 3000 },
+      )
+
+      // Now check for the title - there will be 2 (desktop and mobile)
+      const titles = screen.getAllByText("Test Course")
+      expect(titles.length).toBeGreaterThanOrEqual(1)
+    })
+
+    test("Displays correct completion count for sections with min_number_of operator", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const electives = reqTree.addOperator({
+        operator: "min_number_of",
+        operator_value: "1",
+        title: "Electives",
+      })
+      electives.addCourse({ course: 1 })
+      electives.addCourse({ course: 2 })
+
+      const program = mitxonline.factories.programs.program({
+        id: 999,
+        courses: [1, 2],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
+      })
+
+      const courses = {
+        count: 2,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Elective Course 1",
+            page: {
+              page_url: "/courses/elective-1/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+          mitxonline.factories.courses.course({
+            id: 2,
+            title: "Elective Course 2",
+            page: {
+              page_url: "/courses/elective-2/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(999), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={999} />)
+
+      // Should show "0 of 1" not "0 of 2" since operator_value is "1"
+      await screen.findByText(/Completed 0 of 1/)
+
+      // Total for program should also be 1
+      await screen.findByText(/0 of 1 courses/)
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 5b59615eab..9d33288a99 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -5,16 +5,26 @@ import {
   Link,
   PlainList,
   PlainListProps,
+  Stack,
   Typography,
   TypographyProps,
   styled,
   theme,
 } from "ol-components"
 import { useQuery } from "@tanstack/react-query"
-import { userEnrollmentsToDashboardCourses } from "./transform"
+import {
+  mitxonlineCourse,
+  mitxonlineProgram,
+  programEnrollmentsToPrograms,
+  userEnrollmentsToDashboardCourses,
+} from "./transform"
 import { DashboardCard } from "./DashboardCard"
-import { DashboardCourse, EnrollmentStatus } from "./types"
+import { DashboardCourse, DashboardProgram, EnrollmentStatus } from "./types"
 import type { AxiosError } from "axios"
+import { coursesQueries } from "api/mitxonline-hooks/courses"
+import { programsQueries } from "api/mitxonline-hooks/programs"
+import { V2ProgramRequirement } from "@mitodl/mitxonline-api-axios/v2"
+import { contractQueries } from "api/mitxonline-hooks/contracts"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -58,6 +68,18 @@ const EnrollmentsList = styled(PlainList)<Pick<PlainListProps, "itemSpacing">>(
   }),
 )
 
+const StackedCardContainer = styled.div(({ theme }) => ({
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  boxShadow: "0px 1px 6px 0px rgba(3, 21, 45, 0.05)",
+  overflow: "hidden",
+  [theme.breakpoints.down("md")]: {
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "8px !important",
+    borderBottom: `1px solid ${theme.custom.colors.red}`,
+  },
+}))
+
 const HiddenEnrollmentsList = styled(EnrollmentsList)({
   marginTop: "16px",
   [theme.breakpoints.down("md")]: {
@@ -120,14 +142,16 @@ const sortEnrollments = (resources: DashboardCourse[]) => {
 }
 
 interface EnrollmentExpandCollapseProps {
-  shownEnrollments: DashboardCourse[]
-  hiddenEnrollments: DashboardCourse[]
+  shownCourseRunEnrollments: DashboardCourse[]
+  hiddenCourseRunEnrollments: DashboardCourse[]
+  programEnrollments?: DashboardProgram[]
   isLoading?: boolean
 }
 
 const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
-  shownEnrollments,
-  hiddenEnrollments,
+  shownCourseRunEnrollments,
+  hiddenCourseRunEnrollments,
+  programEnrollments,
   isLoading,
 }) => {
   const [shown, setShown] = React.useState(false)
@@ -140,7 +164,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   return (
     <>
       <EnrollmentsList itemSpacing={"16px"}>
-        {shownEnrollments.map((course) => (
+        {shownCourseRunEnrollments.map((course) => (
           <DashboardCardStyled
             titleAction="marketing"
             key={course.key}
@@ -150,12 +174,22 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             isLoading={isLoading}
           />
         ))}
+        {programEnrollments?.map((program) => (
+          <DashboardCardStyled
+            titleAction="marketing"
+            key={program.key}
+            Component="li"
+            dashboardResource={program}
+            showNotComplete={false}
+            isLoading={isLoading}
+          />
+        ))}
       </EnrollmentsList>
-      {hiddenEnrollments.length === 0 ? null : (
+      {hiddenCourseRunEnrollments.length === 0 ? null : (
         <>
           <Collapse orientation="vertical" in={shown}>
             <HiddenEnrollmentsList itemSpacing={"16px"}>
-              {hiddenEnrollments.map((course) => (
+              {hiddenCourseRunEnrollments.map((course) => (
                 <DashboardCardStyled
                   titleAction="marketing"
                   key={course.key}
@@ -178,24 +212,211 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   )
 }
 
-const EnrollmentDisplay = () => {
-  const { data: enrolledCourses, isLoading } = useQuery({
+const extractCoursesFromNode = (node: V2ProgramRequirement): number[] => {
+  const courses: number[] = []
+
+  if (node.data.node_type === "course" && node.data.course) {
+    courses.push(node.data.course)
+  }
+
+  if (node.children) {
+    node.children.forEach((child) => {
+      courses.push(...extractCoursesFromNode(child))
+    })
+  }
+
+  return courses
+}
+
+const getRequirementSectionTitle = (node: V2ProgramRequirement): string => {
+  if (node.data.title) {
+    return node.data.title
+  }
+  if (node.data.elective_flag) {
+    if (node.data.operator === "min_number_of" && node.data.operator_value) {
+      return `Electives (Complete ${node.data.operator_value})`
+    }
+    return "Elective Courses"
+  }
+  return "Core Courses"
+}
+
+interface ProgramEnrollmentDisplayProps {
+  programId: number
+}
+
+const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
+  programId,
+}) => {
+  const { data: userCourses, isLoading: userEnrollmentsLoading } = useQuery({
     ...enrollmentQueries.courseRunEnrollmentsList(),
     select: userEnrollmentsToDashboardCourses,
-    throwOnError: (error) => {
-      const err = error as AxiosError<{ detail?: string }>
-      const status = err?.response?.status
-      if (
-        status === 403 &&
-        err.response?.data?.detail ===
-          "Authentication credentials were not provided."
-      ) {
-        // For now, we don't want to throw an error if the user is not authenticated.
-        return false
-      }
-      return true
-    },
   })
+  const { data: rawProgram, isLoading: programLoading } = useQuery(
+    programsQueries.programDetail({ id: programId }),
+  )
+  const program = rawProgram ? mitxonlineProgram(rawProgram) : undefined
+
+  // Only fetch courses if we have a program with course IDs
+  const { data: rawProgramCourses, isLoading: programCoursesLoading } =
+    useQuery({
+      ...coursesQueries.coursesList({ id: program?.courseIds || [] }),
+      enabled: !!program && program.courseIds.length > 0,
+    })
+
+  // Build sections from requirement tree
+  const requirementSections =
+    program?.reqTree
+      .filter((node) => node.data.node_type === "operator")
+      .map((node) => {
+        const courseIds = extractCoursesFromNode(node)
+        const sectionCourses = (rawProgramCourses?.results || [])
+          .filter((course) => courseIds.includes(course.id))
+          .map((course) => {
+            const enrollment = userCourses?.find((dashboardCourse) =>
+              course.courseruns.some(
+                (run) => run.courseware_id === dashboardCourse.coursewareId,
+              ),
+            )?.enrollment
+            return mitxonlineCourse(course, enrollment)
+          })
+
+        return {
+          key: node.id,
+          title: getRequirementSectionTitle(node),
+          courses: sectionCourses,
+          node,
+        }
+      })
+      .filter((section) => section.courses.length > 0) || []
+
+  const allProgramCourses = requirementSections.flatMap(
+    (section) => section.courses,
+  )
+  const completedCount = allProgramCourses.filter(
+    (course) => course.enrollment?.status === EnrollmentStatus.Completed,
+  ).length
+
+  // Calculate total required courses, respecting operator_value if operator is specified
+  const totalCount = requirementSections.reduce((sum, section) => {
+    if (
+      section.node.data.operator === "min_number_of" &&
+      section.node.data.operator_value
+    ) {
+      return sum + parseInt(section.node.data.operator_value, 10)
+    }
+    return sum + section.courses.length
+  }, 0)
+
+  return (
+    <>
+      <Stack direction="column">
+        <Stack direction="column" marginBottom="24px">
+          <Typography variant="h5" color={theme.custom.colors.silverGrayDark}>
+            MITx | {program?.programType}
+          </Typography>
+          <Typography component="h1" variant="h3" paddingBottom="32px">
+            {program?.title}
+          </Typography>
+          <Typography variant="body2">
+            You have completed
+            <Typography component="span" variant="subtitle2">
+              {" "}
+              {completedCount} of {totalCount} courses{" "}
+            </Typography>
+            for this program.
+          </Typography>
+        </Stack>
+        {requirementSections.map((section, index) => {
+          const sectionCompletedCount = section.courses.filter(
+            (course) =>
+              course.enrollment?.status === EnrollmentStatus.Completed,
+          ).length
+
+          const sectionRequiredCount =
+            section.node.data.operator === "min_number_of" &&
+            section.node.data.operator_value
+              ? parseInt(section.node.data.operator_value, 10)
+              : section.courses.length
+
+          return (
+            <React.Fragment key={section.key}>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                marginBottom="16px"
+                marginTop={index > 0 ? "32px" : "0"}
+              >
+                <Typography
+                  component="h1"
+                  variant="subtitle2"
+                  color={theme.custom.colors.red}
+                >
+                  {section.title}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color={theme.custom.colors.silverGrayDark}
+                >
+                  Completed {sectionCompletedCount} of {sectionRequiredCount}
+                </Typography>
+              </Stack>
+              <StackedCardContainer>
+                {section.courses.map((course) => (
+                  <DashboardCardStyled
+                    titleAction="marketing"
+                    key={course.key}
+                    dashboardResource={course}
+                    showNotComplete={false}
+                    variant="stacked"
+                    isLoading={
+                      userEnrollmentsLoading ||
+                      programLoading ||
+                      programCoursesLoading
+                    }
+                  />
+                ))}
+              </StackedCardContainer>
+            </React.Fragment>
+          )
+        })}
+      </Stack>
+    </>
+  )
+}
+
+const AllEnrollmentsDisplay: React.FC = () => {
+  const onError = (error: Error) => {
+    const err = error as AxiosError<{ detail?: string }>
+    const status = err?.response?.status
+    if (
+      status === 403 &&
+      err.response?.data?.detail ===
+        "Authentication credentials were not provided."
+    ) {
+      // For now, we don't want to throw an error if the user is not authenticated.
+      return false
+    }
+    return true
+  }
+
+  const { data: enrolledCourses, isLoading: courseEnrollmentsLoading } =
+    useQuery({
+      ...enrollmentQueries.courseRunEnrollmentsList(),
+      select: userEnrollmentsToDashboardCourses,
+      throwOnError: onError,
+    })
+  const { data: contracts, isLoading: contractsLoading } = useQuery(
+    contractQueries.contractsList(),
+  )
+  const { data: programEnrollments, isLoading: programEnrollmentsLoading } =
+    useQuery({
+      ...enrollmentQueries.programEnrollmentsList(),
+      throwOnError: onError,
+    })
+  const filteredProgramEnrollments = programEnrollments
+    ? programEnrollmentsToPrograms(programEnrollments, contracts)
+    : []
 
   const { completed, expired, started, notStarted } = sortEnrollments(
     enrolledCourses || [],
@@ -208,12 +429,29 @@ const EnrollmentDisplay = () => {
         My Learning
       </Title>
       <EnrollmentExpandCollapse
-        shownEnrollments={shownEnrollments}
-        hiddenEnrollments={expired}
-        isLoading={isLoading}
+        shownCourseRunEnrollments={shownEnrollments}
+        hiddenCourseRunEnrollments={expired}
+        programEnrollments={filteredProgramEnrollments || []}
+        isLoading={
+          courseEnrollmentsLoading ||
+          programEnrollmentsLoading ||
+          contractsLoading
+        }
       />
     </Wrapper>
   ) : null
 }
 
+interface EnrollmentDisplayProps {
+  programId?: number
+}
+
+const EnrollmentDisplay: React.FC<EnrollmentDisplayProps> = ({ programId }) => {
+  if (programId) {
+    return <ProgramEnrollmentDisplay programId={programId} />
+  }
+
+  return <AllEnrollmentsDisplay />
+}
+
 export { EnrollmentDisplay }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
index b80ef7d733..263a012594 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -5,7 +5,7 @@ import {
   EnrollmentMode,
   EnrollmentStatus,
 } from "./types"
-import type { DashboardCourse } from "./types"
+import type { DashboardCourse, DashboardProgram } from "./types"
 import * as u from "api/test-utils"
 import * as mitxonline from "api/mitxonline-test-utils"
 import { urls, factories } from "api/mitxonline-test-utils"
@@ -32,6 +32,7 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
     {
       key: faker.string.uuid(),
       coursewareId: faker.string.uuid(),
+      readableId: `course-v1:${faker.string.alphanumeric(5)}+${faker.string.alphanumeric(5)}`,
       type: DashboardResourceType.Course,
       title: faker.commerce.productName(),
       marketingUrl: faker.internet.url(),
@@ -42,6 +43,7 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
         certificateUpgradePrice: faker.commerce.price(),
         canUpgrade: true,
         coursewareUrl: faker.internet.url(),
+        b2bContractId: null,
       },
       enrollment: {
         id: faker.number.int(),
@@ -53,6 +55,27 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   )
 }
 
+const dashboardProgram: PartialFactory<DashboardProgram> = (...overrides) => {
+  return mergeOverrides<DashboardProgram>(
+    {
+      id: faker.number.int(),
+      key: faker.string.uuid(),
+      type: DashboardResourceType.Program,
+      title: faker.commerce.productName(),
+      programType: faker.helpers.arrayElement([
+        "MicroMasters",
+        "Professional Certificate",
+        "XSeries",
+      ]),
+      courseIds: Array.from({ length: 3 }, () => faker.number.int()),
+      collections: [],
+      description: faker.lorem.paragraph(),
+      reqTree: [],
+    },
+    ...overrides,
+  )
+}
+
 const setupEnrollments = (includeExpired: boolean) => {
   const completed = [
     makeCourseEnrollment({
@@ -267,6 +290,10 @@ function setupOrgDashboardMocks(
   // Empty defaults
   setMockResponse.get(mitxonline.urls.enrollment.enrollmentsList(), [])
   setMockResponse.get(mitxonline.urls.programEnrollments.enrollmentsList(), [])
+  setMockResponse.get(
+    mitxonline.urls.programEnrollments.enrollmentsListV2(),
+    [],
+  )
   setMockResponse.get(mitxonline.urls.contracts.contractsList(), contracts)
   setMockResponse.get(
     mitxonline.urls.programCollections.programCollectionsList(),
@@ -342,6 +369,7 @@ const createCoursesWithContractRuns = (contracts: ContractPage[]) => {
 
 export {
   dashboardCourse,
+  dashboardProgram,
   setupEnrollments,
   setupProgramsAndCourses,
   setupOrgAndUser,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index c5e11daecf..f341667e55 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -1,6 +1,7 @@
 import { factories, factories as mitx } from "api/mitxonline-test-utils"
 import { DashboardResourceType, EnrollmentStatus } from "./types"
 import type { DashboardResource } from "./types"
+import type { ContractPage } from "@mitodl/mitxonline-api-axios/v2"
 
 import {
   organizationCoursesWithContracts,
@@ -10,6 +11,7 @@ import {
   createOrgUnenrolledCourse,
   transformEnrollmentToDashboard,
   filterEnrollmentsByOrganization,
+  programEnrollmentsToPrograms,
 } from "./transform"
 import {
   createCoursesWithContractRuns,
@@ -41,6 +43,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(transformed[0]).toEqual({
         key: `mitxonline-course-${apiData.run.course.id}-${apiData.run.id}`,
         coursewareId: apiData.run.courseware_id ?? null,
+        readableId: apiData.run.course.readable_id ?? null,
         type: DashboardResourceType.Course,
         title: apiData.run.title,
         marketingUrl: apiData.run.course.page?.page_url,
@@ -664,4 +667,227 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(filtered[0].b2b_organization_id).toBe(123)
     })
   })
+
+  describe("mitxonlineProgram", () => {
+    test("transforms V2Program to DashboardProgram correctly", () => {
+      const program = factories.programs.program()
+      const result = mitxonlineProgram(program)
+
+      expect(result).toEqual({
+        id: program.id,
+        key: `mitxonline-program-${program.id}`,
+        type: DashboardResourceType.Program,
+        title: program.title,
+        programType: program.program_type,
+        courseIds: program.courses,
+        collections: program.collections,
+        description: program.page.description,
+        reqTree: expect.any(Array),
+      })
+    })
+
+    test("transforms requirement tree correctly", () => {
+      const reqTree = new factories.requirements.RequirementTreeBuilder()
+      const required = reqTree.addOperator({
+        operator: "all_of",
+        title: "Required Courses",
+      })
+      required.addCourse({ course: 123 })
+
+      const program = factories.programs.program({
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
+      })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree).toHaveLength(1)
+      expect(result.reqTree[0].data.node_type).toBe("operator")
+      expect(result.reqTree[0].data.operator).toBe("all_of")
+      expect(result.reqTree[0].data.title).toBe("Required Courses")
+      expect(result.reqTree[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].data.node_type).toBe("course")
+      expect(result.reqTree[0].children?.[0].data.course).toBe(123)
+    })
+
+    test("handles program with empty reqTree", () => {
+      const program = factories.programs.program({ req_tree: [] })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree).toEqual([])
+    })
+
+    test("handles deeply nested requirement trees", () => {
+      const reqTree = new factories.requirements.RequirementTreeBuilder()
+      const allRequired = reqTree.addOperator({
+        operator: "all_of",
+        title: "Program Requirements",
+      })
+      const electives = allRequired.addOperator({
+        operator: "min_number_of",
+        operator_value: "2",
+        title: "Electives",
+      })
+      electives.addCourse({ course: 456 })
+
+      const program = factories.programs.program({
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
+      })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].data.elective_flag).toBe(true)
+    })
+  })
+
+  describe("programEnrollmentsToPrograms", () => {
+    test("includes all programs when no contracts provided", () => {
+      const programEnrollments = [
+        factories.enrollment.programEnrollmentV2({
+          enrollments: [
+            {
+              ...factories.enrollment.courseEnrollment(),
+              b2b_contract_id: 123,
+              b2b_organization_id: 456,
+            },
+          ],
+        }),
+        factories.enrollment.programEnrollmentV2({
+          enrollments: [
+            {
+              ...factories.enrollment.courseEnrollment(),
+              b2b_contract_id: null,
+              b2b_organization_id: null,
+            },
+          ],
+        }),
+      ]
+
+      const result = programEnrollmentsToPrograms(programEnrollments)
+
+      expect(result).toHaveLength(2)
+      expect(result[0].type).toBe(DashboardResourceType.Program)
+      expect(result[1].type).toBe(DashboardResourceType.Program)
+    })
+
+    test("filters out programs listed in contracts", () => {
+      const program1 = factories.programs.program()
+      const program2 = factories.programs.program()
+      const program3 = factories.programs.program()
+
+      const programEnrollments = [
+        factories.enrollment.programEnrollmentV2({
+          program: program1,
+        }),
+        factories.enrollment.programEnrollmentV2({
+          program: program2,
+        }),
+        factories.enrollment.programEnrollmentV2({
+          program: program3,
+        }),
+      ]
+
+      const contracts: ContractPage[] = [
+        {
+          ...factories.contracts.contract(),
+          programs: [program1.id, program3.id], // Programs 1 and 3 are in contracts
+        },
+      ]
+
+      const result = programEnrollmentsToPrograms(programEnrollments, contracts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].id).toBe(program2.id)
+    })
+
+    test("includes program enrollment data", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        certificate: {
+          uuid: "test-cert-uuid",
+        },
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result[0].enrollment).toEqual({
+        status: EnrollmentStatus.Enrolled,
+        certificate: {
+          uuid: "test-cert-uuid",
+          link: "/certificate/program/test-cert-uuid/",
+        },
+      })
+    })
+
+    test("handles programs with multiple enrollments", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result).toHaveLength(1)
+      expect(result[0].type).toBe(DashboardResourceType.Program)
+    })
+
+    test("includes programs even if some enrollments are B2B", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: 123,
+            b2b_organization_id: 456,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result).toHaveLength(1)
+    })
+
+    test("handles empty program enrollments array", () => {
+      const result = programEnrollmentsToPrograms([])
+
+      expect(result).toEqual([])
+    })
+
+    test("handles program enrollment without certificate", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        certificate: null,
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result[0].enrollment?.certificate).toBeUndefined()
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index fa141ccf1a..97375c95ce 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -10,13 +10,16 @@ import {
   CourseWithCourseRunsSerializerV2,
   V2Program,
   V2ProgramCollection,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
 import { DashboardResourceType, EnrollmentStatus } from "./types"
+
 import type {
   DashboardContract,
   DashboardCourse,
   DashboardCourseEnrollment,
+  DashboardProgramEnrollment,
   DashboardProgram,
   DashboardProgramCollection,
 } from "./types"
@@ -52,6 +55,7 @@ const mitxonlineCourse = (
       runId: run?.id,
     }),
     coursewareId: run?.courseware_id ?? null,
+    readableId: raw.readable_id ?? null,
     type: DashboardResourceType.Course,
     title: raw.title,
     marketingUrl: raw.page?.page_url,
@@ -98,6 +102,20 @@ const transformEnrollmentToDashboard = (
   }
 }
 
+const transformProgramEnrollmentToDashboard = (
+  raw: V2UserProgramEnrollmentDetail,
+): DashboardProgramEnrollment => {
+  return {
+    status: EnrollmentStatus.Enrolled,
+    certificate: raw.certificate
+      ? {
+          uuid: raw.certificate.uuid,
+          link: `/certificate/program/${raw.certificate.uuid}/`,
+        }
+      : undefined,
+  }
+}
+
 const filterEnrollmentsByOrganization = (
   enrollments: CourseRunEnrollmentRequestV2[],
   organizationId: number,
@@ -123,6 +141,7 @@ const userEnrollmentsToDashboardCourses = (
         runId: run.id,
       }),
       coursewareId: run?.courseware_id ?? null,
+      readableId: course.readable_id ?? null,
       type: DashboardResourceType.Course,
       title: course.title,
       marketingUrl: course.page?.page_url,
@@ -174,6 +193,7 @@ const createOrgUnenrolledCourse = (
       runId: run?.id,
     }),
     coursewareId: run?.courseware_id ?? null,
+    readableId: course.readable_id ?? null,
     type: DashboardResourceType.Course,
     title: course.title,
     marketingUrl: course.page?.page_url,
@@ -184,6 +204,7 @@ const createOrgUnenrolledCourse = (
       certificateUpgradePrice: run?.products[0]?.price,
       coursewareUrl: run?.courseware_url,
       canUpgrade: !!run?.is_upgradable,
+      b2bContractId: run?.b2b_contract ?? null,
     },
   }
 }
@@ -245,6 +266,27 @@ const organizationCoursesWithContracts = (raw: {
   return transformedCourses
 }
 
+const programEnrollmentsToPrograms = (
+  data: V2UserProgramEnrollmentDetail[],
+  contracts?: ContractPage[],
+): DashboardProgram[] => {
+  const filteredProgramEnrollments = contracts
+    ? data.filter((programEnrollment) => {
+        // Only include the program if it is NOT listed in any of the contracts' programs
+        return !contracts.some((contract) =>
+          contract.programs.includes(programEnrollment.program.id),
+        )
+      })
+    : data
+
+  return filteredProgramEnrollments.map((programEnrollment) => {
+    const program = mitxonlineProgram(programEnrollment.program)
+    program.enrollment =
+      transformProgramEnrollmentToDashboard(programEnrollment)
+    return program
+  })
+}
+
 const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   return {
     id: raw.id,
@@ -259,6 +301,7 @@ const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
     courseIds: raw.courses,
     collections: raw.collections,
     description: raw.page.description,
+    reqTree: raw.req_tree,
   }
 }
 
@@ -293,10 +336,12 @@ export {
   mitxonlineCourse,
   userEnrollmentsToDashboardCourses,
   transformEnrollmentToDashboard,
+  transformProgramEnrollmentToDashboard,
   mitxonlineOrgContract,
   enrollmentsToOrgDashboardEnrollments,
   organizationCoursesWithContracts,
   createOrgUnenrolledCourse,
+  programEnrollmentsToPrograms,
   mitxonlineProgram,
   mitxonlineProgramCollection,
   sortDashboardCourses,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index dc45f6e3a5..d3c9436c4e 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -1,3 +1,5 @@
+import { V2ProgramRequirement } from "@mitodl/mitxonline-api-axios/v2"
+
 const DashboardResourceType = {
   Contract: "contract",
   Course: "course",
@@ -35,6 +37,7 @@ type DashboardContract = {
 type DashboardCourse = {
   key: string
   coursewareId: string | null
+  readableId: string | null
   title: string
   type: typeof DashboardResourceType.Course
   run: {
@@ -44,6 +47,7 @@ type DashboardCourse = {
     certificateUpgradePrice?: string | null
     coursewareUrl?: string | null
     canUpgrade: boolean | undefined
+    b2bContractId?: number | null
     certificate?: {
       uuid: string
       link: string
@@ -65,6 +69,14 @@ type DashboardCourseEnrollment = {
   }
 }
 
+type DashboardProgramEnrollment = {
+  status: EnrollmentStatus
+  certificate?: {
+    uuid: string
+    link: string
+  }
+}
+
 type DashboardProgram = {
   id: number
   key: string
@@ -74,6 +86,8 @@ type DashboardProgram = {
   courseIds: number[]
   collections: number[]
   description: string
+  enrollment?: DashboardProgramEnrollment
+  reqTree: V2ProgramRequirement[]
 }
 
 type DashboardProgramCollection = {
@@ -101,6 +115,7 @@ export type {
   DashboardContract,
   DashboardCourse,
   DashboardCourseEnrollment,
+  DashboardProgramEnrollment,
   DashboardProgram,
   DashboardProgramCollection,
   DashboardProgramCollectionProgram,
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
index ec9bf9df29..c944407d05 100644
--- a/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
@@ -126,6 +126,10 @@ describe("HomeContent", () => {
 
     setMockResponse.get(urls.userLists.membershipList(), [])
     setMockResponse.get(urls.learningPaths.membershipList(), [])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
     return { resources }
   }
 
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
index bf55189e88..94e1bb3be2 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -33,6 +33,7 @@ describe("OrganizationContent", () => {
     setMockResponse.get(urls.enrollment.enrollmentsList(), [])
     setMockResponse.get(urls.enrollment.enrollmentsListV2(), [])
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [])
+    setMockResponse.get(urls.programEnrollments.enrollmentsListV2(), [])
     setMockResponse.get(urls.contracts.contractsList(), [])
   })
 
@@ -435,12 +436,13 @@ describe("OrganizationContent", () => {
       program_type: "Program", // Set specific program type
       certificate: {
         uuid: "cert-123",
-        url: "/certificates/program/1",
+        url: "/certificate/program/cert-123",
       },
     }
-    const programEnrollment = factories.enrollment.programEnrollment({
-      program: { id: programWithCertificate.id },
+    const programEnrollment = factories.enrollment.programEnrollmentV2({
+      program: programWithCertificate,
       certificate: {
+        uuid: programWithCertificate.certificate.uuid,
         link: programWithCertificate.certificate.url,
       },
     })
@@ -450,6 +452,9 @@ describe("OrganizationContent", () => {
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [
       programEnrollment,
     ])
+    setMockResponse.get(urls.programEnrollments.enrollmentsListV2(), [
+      programEnrollment,
+    ])
 
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
 
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
index ec7516dcd5..4178b045b5 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
@@ -31,7 +31,7 @@ import {
   ContractPage,
   CourseRunEnrollmentRequestV2,
   OrganizationPage,
-  UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { ButtonLink } from "@mitodl/smoot-design"
@@ -307,7 +307,7 @@ const OrgProgramCollectionDisplay: React.FC<{
             Component="li"
             key={course.key}
             dashboardResource={course}
-            courseNoun="Module"
+            noun="Module"
             offerUpgrade={false}
             titleAction="courseware"
             buttonHref={course.run?.coursewareUrl}
@@ -322,7 +322,7 @@ const OrgProgramDisplay: React.FC<{
   program: DashboardProgram
   contracts?: ContractPage[]
   courseRunEnrollments?: CourseRunEnrollmentRequestV2[]
-  programEnrollments?: UserProgramEnrollmentDetail[]
+  programEnrollments?: V2UserProgramEnrollmentDetail[]
   programLoading: boolean
   orgId: number
 }> = ({
@@ -376,7 +376,7 @@ const OrgProgramDisplay: React.FC<{
             size="small"
             variant="bordered"
             startIcon={<RiAwardFill />}
-            href={programEnrollment?.certificate?.link}
+            href={`/certificate/program/${programEnrollment?.certificate?.uuid}/`}
           >
             View {program.programType} Certificate
           </ProgramCertificateButton>
@@ -388,7 +388,7 @@ const OrgProgramDisplay: React.FC<{
             Component="li"
             key={course.key}
             dashboardResource={course}
-            courseNoun="Module"
+            noun="Module"
             offerUpgrade={false}
             titleAction="courseware"
             buttonHref={course.run?.coursewareUrl}
diff --git a/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx
new file mode 100644
index 0000000000..1d23b637d4
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx
@@ -0,0 +1,46 @@
+import React from "react"
+import { renderWithProviders, screen } from "@/test-utils"
+import ProgramContent from "./ProgramContent"
+
+// Mock the EnrollmentDisplay component
+jest.mock("./CoursewareDisplay/EnrollmentDisplay", () => ({
+  EnrollmentDisplay: jest.fn(({ programId }) => (
+    <div data-testid="enrollment-display" data-program-id={programId}>
+      Mocked EnrollmentDisplay with programId: {programId}
+    </div>
+  )),
+}))
+
+describe("ProgramContent", () => {
+  test("renders EnrollmentDisplay with programId prop", () => {
+    const programId = 123
+    renderWithProviders(<ProgramContent programId={programId} />)
+
+    const enrollmentDisplay = screen.getByTestId("enrollment-display")
+    expect(enrollmentDisplay).toBeInTheDocument()
+    expect(enrollmentDisplay).toHaveAttribute("data-program-id", "123")
+  })
+
+  test("passes correct programId to EnrollmentDisplay", () => {
+    const programId = 456
+    renderWithProviders(<ProgramContent programId={programId} />)
+
+    expect(
+      screen.getByText(`Mocked EnrollmentDisplay with programId: ${programId}`),
+    ).toBeInTheDocument()
+  })
+
+  test("handles different programId values", () => {
+    const { view } = renderWithProviders(<ProgramContent programId={1} />)
+    expect(screen.getByTestId("enrollment-display")).toHaveAttribute(
+      "data-program-id",
+      "1",
+    )
+
+    view.rerender(<ProgramContent programId={999} />)
+    expect(screen.getByTestId("enrollment-display")).toHaveAttribute(
+      "data-program-id",
+      "999",
+    )
+  })
+})
diff --git a/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx
new file mode 100644
index 0000000000..3737564948
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import React from "react"
+import { EnrollmentDisplay } from "./CoursewareDisplay/EnrollmentDisplay"
+
+interface ProgramContentProps {
+  programId: number
+}
+
+const ProgramContent: React.FC<ProgramContentProps> = ({ programId }) => {
+  return <EnrollmentDisplay programId={programId} />
+}
+
+export default ProgramContent
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
index a3b676d7f5..d2dcd8db06 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react"
-import { Stack, Typography } from "ol-components"
+import { Skeleton, Stack, Typography } from "ol-components"
 
 import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
@@ -103,7 +103,7 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
     if (!isLoading) {
       return notFound()
     } else {
-      return null
+      return <Skeleton width="100%" height="100px" />
     }
   }
 
diff --git a/frontends/main/src/app/dashboard/program/[id]/page.tsx b/frontends/main/src/app/dashboard/program/[id]/page.tsx
new file mode 100644
index 0000000000..d1227e8dd8
--- /dev/null
+++ b/frontends/main/src/app/dashboard/program/[id]/page.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import ProgramContent from "@/app-pages/DashboardPage/ProgramContent"
+import { notFound } from "next/navigation"
+
+const Page: React.FC<PageProps<"/dashboard/program/[id]">> = async ({
+  params,
+}) => {
+  const resolved = await params
+  const id = Number(resolved.id)
+  if (Number.isNaN(id)) {
+    notFound()
+  }
+
+  return <ProgramContent programId={id} />
+}
+
+export default Page
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
index b70edf1181..3eba0539e7 100644
--- a/frontends/main/src/common/urls.ts
+++ b/frontends/main/src/common/urls.ts
@@ -72,6 +72,9 @@ export const userListView = (id: number) =>
 export const ORGANIZATION_VIEW = "/dashboard/organization/[slug]"
 export const organizationView = (slug: string) =>
   generatePath(ORGANIZATION_VIEW, { slug: slug })
+export const PROGRAM_VIEW = "/dashboard/program/[id]"
+export const programView = (id: number) =>
+  generatePath(PROGRAM_VIEW, { id: String(id) })
 
 export const SEARCH = "/search"