diff --git a/frontends/api/src/mitxonline/hooks/programs/queries.ts b/frontends/api/src/mitxonline/hooks/programs/queries.ts
index 60556bee7a..0363a5b33f 100644
--- a/frontends/api/src/mitxonline/hooks/programs/queries.ts
+++ b/frontends/api/src/mitxonline/hooks/programs/queries.ts
@@ -5,7 +5,7 @@ import type {
   ProgramCollectionsApiProgramCollectionsListRequest,
   ProgramsApiProgramsListV2Request,
   ProgramsApiProgramsRetrieveV2Request,
-  V2Program,
+  V2ProgramDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { programCollectionsApi, programsApi } from "../../clients"
 
@@ -30,7 +30,7 @@ const programsQueries = {
   programDetail: (opts: ProgramsApiProgramsRetrieveV2Request) =>
     queryOptions({
       queryKey: programsKeys.programDetail(opts),
-      queryFn: async (): Promise<V2Program> => {
+      queryFn: async (): Promise<V2ProgramDetail> => {
         return programsApi.programsRetrieveV2(opts).then((res) => res.data)
       },
     }),
diff --git a/frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx b/frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx
index ecfb8d48fb..677e7173f6 100644
--- a/frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx
@@ -106,7 +106,7 @@ const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
 
   return (
     <>
-      <Stack width="100%" gap="12px">
+      <Stack gap="12px">
         <Button
           disabled={
             !nextRun ||
diff --git a/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx b/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
index 5764972415..58a82cd7fd 100644
--- a/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx
@@ -11,7 +11,6 @@ import {
 } from "api/test-utils"
 import { renderWithProviders, waitFor, screen, within } from "@/test-utils"
 import CoursePage from "./CoursePage"
-import { HeadingIds } from "./util"
 import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
 
@@ -97,7 +96,7 @@ describe("CoursePage", () => {
     await waitFor(() => {
       assertHeadings([
         { level: 1, name: page.title },
-        { level: 2, name: "Course summary" },
+        { level: 2, name: "Course Information" },
         { level: 2, name: "About this Course" },
         { level: 2, name: "What you'll learn" },
         { level: 2, name: "How you'll learn" },
@@ -109,34 +108,6 @@ describe("CoursePage", () => {
     })
   })
 
-  test("Page Navigation", async () => {
-    const course = makeCourse()
-    const page = makePage({ course_details: course })
-    setupApis({ course, page })
-    renderWithProviders(<CoursePage readableId={course.readable_id} />)
-
-    const nav = await screen.findByRole("navigation", {
-      name: "Course Details",
-    })
-    const links = within(nav).getAllByRole("link")
-
-    expect(links[0]).toHaveTextContent("About")
-    expect(links[0]).toHaveAttribute("href", `#${HeadingIds.About}`)
-    expect(document.getElementById(HeadingIds.About)).toBeVisible()
-    expect(links[1]).toHaveTextContent("What you'll learn")
-    expect(links[1]).toHaveAttribute("href", `#${HeadingIds.What}`)
-    expect(document.getElementById(HeadingIds.What)).toBeVisible()
-    expect(links[2]).toHaveTextContent("How you'll learn")
-    expect(links[2]).toHaveAttribute("href", `#${HeadingIds.How}`)
-    expect(document.getElementById(HeadingIds.How)).toBeVisible()
-    expect(links[3]).toHaveTextContent("Prerequisites")
-    expect(links[3]).toHaveAttribute("href", `#${HeadingIds.Prereqs}`)
-    expect(document.getElementById(HeadingIds.Prereqs)).toBeVisible()
-    expect(links[4]).toHaveTextContent("Instructors")
-    expect(links[4]).toHaveAttribute("href", `#${HeadingIds.Instructors}`)
-    expect(document.getElementById(HeadingIds.Instructors)).toBeVisible()
-  })
-
   // Collasping sections tested in AboutSection.test.tsx
   test("About section has expected content", async () => {
     const course = makeCourse()
@@ -192,14 +163,34 @@ describe("CoursePage", () => {
     expectRawContent(section, page.prerequisites)
   })
 
+  test("Renders program bundle upsell when course belongs to a program (content tested in ProgramBundleUpsell.test)", async () => {
+    const baseProgram = factories.programs.baseProgram()
+    const programDetail = factories.programs.program({
+      id: baseProgram.id,
+      readable_id: baseProgram.readable_id,
+      products: [factories.courses.product({ price: "500" })],
+    })
+    const course = makeCourse({ programs: [baseProgram] })
+    const page = makePage({ course_details: course })
+    setupApis({ course, page })
+    setMockResponse.get(urls.programs.programsList({ id: [baseProgram.id] }), {
+      results: [programDetail],
+    })
+    renderWithProviders(<CoursePage readableId={course.readable_id} />)
+
+    expect(
+      await screen.findByTestId("program-bundle-upsell"),
+    ).toBeInTheDocument()
+  })
+
   test("Renders an enrollment button", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })
     setupApis({ course, page })
     renderWithProviders(<CoursePage readableId={course.readable_id} />)
 
-    const buttons = await screen.findAllByTestId("course-enrollment-button")
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    const button = await screen.findByTestId("course-enrollment-button")
+    expect(button).toBeInTheDocument()
   })
 
   test("Shows a YouTube video in the sidebar when video_url is a YouTube URL", async () => {
diff --git a/frontends/main/src/app-pages/ProductPages/CoursePage.tsx b/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
index e97c220864..81c2d72324 100644
--- a/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/CoursePage.tsx
@@ -7,7 +7,6 @@ import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
 import { styled } from "@mitodl/smoot-design"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
-import { CourseSummary } from "./ProductSummary"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { FeatureFlags } from "@/common/feature_flags"
 import { notFound } from "next/navigation"
@@ -16,14 +15,12 @@ import InstructorsSection from "./InstructorsSection"
 import RawHTML from "./RawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
-import ProductNavbar, { HeadingData } from "./ProductNavbar"
 import WhoCanTakeSection from "./WhoCanTakeSection"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
 import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
-import { CoursePageItem } from "@mitodl/mitxonline-api-axios/v2"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import CourseEnrollmentButton from "./CourseEnrollmentButton"
+import CourseInfoBox from "./InfoBoxCourse"
 
 type CoursePageProps = {
   readableId: string
@@ -35,42 +32,6 @@ const PrerequisitesSection = styled.section({
   gap: "16px",
 })
 
-const getNavLinks = (page: CoursePageItem): HeadingData[] => {
-  const all = [
-    {
-      id: HeadingIds.About,
-      label: "About",
-      variant: "primary",
-      content: page.about,
-    },
-    {
-      id: HeadingIds.What,
-      label: "What you'll learn",
-      variant: "secondary",
-      content: page.what_you_learn,
-    },
-    {
-      id: HeadingIds.How,
-      label: "How you'll learn",
-      variant: "secondary",
-      content: true,
-    },
-    {
-      id: HeadingIds.Prereqs,
-      label: "Prerequisites",
-      variant: "secondary",
-      content: page.prerequisites,
-    },
-    {
-      id: HeadingIds.Instructors,
-      label: "Instructors",
-      variant: "secondary",
-      content: page.faculty.length ? "x" : undefined,
-    },
-  ] as const
-  return all.filter((item) => item.content)
-}
-
 const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
   const pages = useQuery(pagesQueries.coursePages(readableId))
   const courses = useQuery(
@@ -95,8 +56,6 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
     }
   }
 
-  const navLinks = getNavLinks(page)
-
   // feature_image_src will be nullable in a future MITx Online API update
   // (null means no image set). Fall back to our own default image.
   const imageSrc =
@@ -110,10 +69,7 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
       shortDescription={page.course_details.page.description}
       imageSrc={imageSrc}
       videoUrl={page.video_url}
-      summaryTitle="Course summary"
-      sidebarSummary={<CourseSummary course={course} />}
-      enrollButton={<CourseEnrollmentButton course={course} />}
-      navbar={<ProductNavbar navLinks={navLinks} productNoun="Course" />}
+      infoBox={<CourseInfoBox course={course} />}
     >
       {page.about ? (
         <AboutSection productNoun="Course" aboutHtml={page.about} />
diff --git a/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.tsx b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.tsx
new file mode 100644
index 0000000000..1733a48c29
--- /dev/null
+++ b/frontends/main/src/app-pages/ProductPages/InfoBoxCourse.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+import { VisuallyHidden } from "@mitodl/smoot-design"
+import type { CourseWithCourseRunsSerializerV2 } from "@mitodl/mitxonline-api-axios/v2"
+import { HeadingIds } from "./util"
+import { CourseSummary } from "./ProductSummary"
+import ProgramBundleUpsell from "./ProgramBundleUpsell"
+import CourseEnrollmentButton from "./CourseEnrollmentButton"
+import { InfoBoxCard, InfoBoxContent, InfoBoxEnrollArea } from "./InfoBoxParts"
+
+type CourseInfoBoxProps = {
+  course: CourseWithCourseRunsSerializerV2
+}
+
+const CourseInfoBox: React.FC<CourseInfoBoxProps> = ({ course }) => {
+  return (
+    <InfoBoxCard as="section" aria-labelledby={HeadingIds.Summary}>
+      <VisuallyHidden>
+        <h2 id={HeadingIds.Summary}>Course Information</h2>
+      </VisuallyHidden>
+      <InfoBoxContent>
+        <CourseSummary course={course} />
+      </InfoBoxContent>
+      <InfoBoxEnrollArea>
+        <CourseEnrollmentButton course={course} />
+      </InfoBoxEnrollArea>
+      {course.programs?.length ? (
+        <ProgramBundleUpsell programs={course.programs} />
+      ) : null}
+    </InfoBoxCard>
+  )
+}
+
+export default CourseInfoBox
diff --git a/frontends/main/src/app-pages/ProductPages/InfoBoxParts.tsx b/frontends/main/src/app-pages/ProductPages/InfoBoxParts.tsx
new file mode 100644
index 0000000000..7a77bcf956
--- /dev/null
+++ b/frontends/main/src/app-pages/ProductPages/InfoBoxParts.tsx
@@ -0,0 +1,39 @@
+import { styled } from "@mitodl/smoot-design"
+
+/**
+ * Outer card wrapper: border, shadow, radius. No padding — children control
+ * their own insets so that elements like the bundle upsell can span edge-to-edge.
+ */
+export const InfoBoxCard = styled.div(({ theme }) => ({
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  backgroundColor: theme.custom.colors.white,
+  borderRadius: "4px",
+  boxShadow: "0 8px 20px 0 rgba(120, 147, 172, 0.10)",
+  overflow: "hidden",
+}))
+
+/** Padded content area inside the summary card. */
+export const InfoBoxContent = styled.div(({ theme }) => ({
+  padding: "24px",
+  [theme.breakpoints.up("md")]: {
+    padding: "24px 32px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: "16px",
+  },
+}))
+
+export const InfoBoxEnrollArea = styled.div(({ theme }) => ({
+  padding: "8px 24px 24px",
+  [theme.breakpoints.up("md")]: {
+    padding: "8px 32px 24px",
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    display: "flex",
+    justifyContent: "flex-end",
+    "> *": { flex: "0 1 50%" },
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: "8px 16px 16px",
+  },
+}))
diff --git a/frontends/main/src/app-pages/ProductPages/InfoBoxProgram.tsx b/frontends/main/src/app-pages/ProductPages/InfoBoxProgram.tsx
new file mode 100644
index 0000000000..a5c5b320d3
--- /dev/null
+++ b/frontends/main/src/app-pages/ProductPages/InfoBoxProgram.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import { VisuallyHidden } from "@mitodl/smoot-design"
+import type {
+  V2ProgramDetail,
+  CourseWithCourseRunsSerializerV2,
+} from "@mitodl/mitxonline-api-axios/v2"
+import { HeadingIds } from "./util"
+import { ProgramSummary } from "./ProductSummary"
+import ProgramEnrollmentButton from "./ProgramEnrollmentButton"
+import { InfoBoxCard, InfoBoxContent, InfoBoxEnrollArea } from "./InfoBoxParts"
+
+type ProgramInfoBoxProps = {
+  program: V2ProgramDetail
+  courses?: CourseWithCourseRunsSerializerV2[]
+}
+
+const ProgramInfoBox: React.FC<ProgramInfoBoxProps> = ({
+  program,
+  courses,
+}) => {
+  return (
+    <InfoBoxCard as="section" aria-labelledby={HeadingIds.Summary}>
+      <VisuallyHidden>
+        <h2 id={HeadingIds.Summary}>Program Information</h2>
+      </VisuallyHidden>
+      <InfoBoxContent>
+        <ProgramSummary program={program} courses={courses} />
+      </InfoBoxContent>
+      <InfoBoxEnrollArea>
+        <ProgramEnrollmentButton program={program} />
+      </InfoBoxEnrollArea>
+    </InfoBoxCard>
+  )
+}
+
+export default ProgramInfoBox
diff --git a/frontends/main/src/app-pages/ProductPages/ProductNavbar.tsx b/frontends/main/src/app-pages/ProductPages/ProductNavbar.tsx
deleted file mode 100644
index 28447e1e7a..0000000000
--- a/frontends/main/src/app-pages/ProductPages/ProductNavbar.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react"
-import { ButtonLink, styled } from "@mitodl/smoot-design"
-import { HeadingIds } from "./util"
-import type { ProductNoun } from "./util"
-
-const StyledLink = styled(ButtonLink)(({ theme }) => ({
-  backgroundColor: theme.custom.colors.white,
-  borderColor: theme.custom.colors.white,
-  [theme.breakpoints.down("md")]: {
-    backgroundColor: theme.custom.colors.lightGray1,
-    border: `1px solid ${theme.custom.colors.lightGray2}`,
-  },
-}))
-
-const LinksContainer = styled.nav(({ theme }) => ({
-  display: "flex",
-  flexWrap: "wrap",
-  [theme.breakpoints.up("md")]: {
-    gap: "24px",
-    padding: "12px 16px",
-    backgroundColor: theme.custom.colors.white,
-    borderRadius: "4px",
-    border: `1px solid ${theme.custom.colors.lightGray2}`,
-    boxShadow: "0 8px 20px 0 rgba(120, 147, 172, 0.10)",
-    marginTop: "-24px",
-    width: "calc(100%)",
-  },
-  [theme.breakpoints.down("md")]: {
-    alignSelf: "center",
-    gap: "8px",
-    rowGap: "16px",
-    padding: 0,
-  },
-}))
-
-export type HeadingData = {
-  id: HeadingIds
-  label: string
-  variant: "primary" | "secondary"
-}
-
-const ProductNavbar: React.FC<{
-  navLinks: HeadingData[]
-  productNoun: ProductNoun
-}> = ({ navLinks, productNoun }) => {
-  if (navLinks.length === 0) {
-    return null
-  }
-  return (
-    <LinksContainer aria-label={`${productNoun} Details`}>
-      {navLinks.map((heading) => {
-        const LinkComponent =
-          heading.variant === "primary" ? ButtonLink : StyledLink
-        return (
-          <LinkComponent
-            key={heading.id}
-            href={`#${heading.id}`}
-            variant={heading.variant}
-            size="small"
-          >
-            {heading.label}
-          </LinkComponent>
-        )
-      })}
-    </LinksContainer>
-  )
-}
-
-export default ProductNavbar
diff --git a/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx b/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
index b611293c75..46fefc6fc2 100644
--- a/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx
@@ -7,14 +7,14 @@ import {
   Breadcrumbs,
   BannerBackground,
   Typography,
+  HEADER_HEIGHT,
 } from "ol-components"
 import { convertToEmbedUrl } from "@/common/utils"
 import { backgroundSrcSetCSS } from "ol-utilities"
 import { HOME } from "@/common/urls"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
-import { styled, VisuallyHidden } from "@mitodl/smoot-design"
+import { styled } from "@mitodl/smoot-design"
 import Image from "next/image"
-import { HeadingIds } from "./util"
 import type { Breakpoint } from "@mui/system"
 
 const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
@@ -56,11 +56,14 @@ const BottomContainer = styled(Container)(({ theme }) => ({
   justifyContent: "space-between",
   gap: "56px",
   flexDirection: "row-reverse",
-
+  paddingTop: "72px",
   [theme.breakpoints.down("md")]: {
     flexDirection: "column",
-    alignItems: "center",
-    gap: "0px",
+    gap: "32px",
+    paddingTop: "40px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    gap: "40px",
     paddingTop: "24px",
   },
 }))
@@ -98,10 +101,11 @@ const SectionsWrapper = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: "56px",
-  marginTop: "40px",
   [theme.breakpoints.down("md")]: {
     gap: "40px",
-    marginTop: "36px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    gap: "32px",
   },
 }))
 
@@ -115,6 +119,30 @@ const SidebarCol = styled(Show, {
   alignSelf,
 }))
 
+/**
+ * Pixel distance below header at which the summary box should begin when
+ * scrolling.
+ */
+const OFFSET_FROM_HEADER = 72
+/**
+ * Column for the summary info box. Unlike SidebarCol, this is always visible.
+ * On desktop it acts as a fixed-width sidebar; below md it goes full-width.
+ */
+const SummaryCol = styled.div(({ theme }) => ({
+  width: "100%",
+  maxWidth: "410px",
+  [theme.breakpoints.up("md")]: {
+    position: "sticky",
+    // Without this, the flex child stretches to the main column's height
+    // and sticky has no room to scroll.
+    alignSelf: "flex-start",
+    top: `${HEADER_HEIGHT + OFFSET_FROM_HEADER}px`,
+  },
+  [theme.breakpoints.down("md")]: {
+    maxWidth: "none",
+  },
+}))
+
 const SidebarVideo = styled.iframe(({ theme }) => ({
   borderRadius: "4px",
   border: "none",
@@ -166,30 +194,6 @@ const SidebarMedia: React.FC<{
   )
 }
 
-const SummaryRoot = styled.div(({ theme }) => ({
-  border: `1px solid ${theme.custom.colors.lightGray2}`,
-  backgroundColor: theme.custom.colors.white,
-  borderRadius: "4px",
-  boxShadow: "0 8px 20px 0 rgba(120, 147, 172, 0.10)",
-  padding: "24px",
-  display: "flex",
-  flexDirection: "column",
-  gap: "32px",
-  [theme.breakpoints.up("md")]: {
-    position: "sticky",
-    marginTop: "-54px",
-    top: "calc(40px + 32px + 24px)",
-    borderRadius: "4px",
-  },
-  [theme.breakpoints.between("sm", "md")]: {
-    flexDirection: "row",
-    gap: "48px",
-  },
-  [theme.breakpoints.down("md")]: {
-    marginTop: "24px",
-  },
-}))
-
 type ProductPageTemplateProps = {
   tags: string[]
   currentBreadcrumbLabel: string
@@ -197,11 +201,8 @@ type ProductPageTemplateProps = {
   shortDescription: React.ReactNode
   imageSrc: string
   videoUrl?: string | null
-  sidebarSummary: React.ReactNode
-  summaryTitle: string
+  infoBox: React.ReactNode
   children: React.ReactNode
-  navbar: React.ReactNode
-  enrollButton?: React.ReactNode
 }
 const ProductPageTemplate: React.FC<ProductPageTemplateProps> = ({
   tags,
@@ -210,11 +211,8 @@ const ProductPageTemplate: React.FC<ProductPageTemplateProps> = ({
   shortDescription,
   imageSrc,
   videoUrl,
-  sidebarSummary,
-  summaryTitle,
+  infoBox,
   children,
-  enrollButton,
-  navbar,
 }) => {
   return (
     <Page>
@@ -253,46 +251,8 @@ const ProductPageTemplate: React.FC<ProductPageTemplateProps> = ({
         </TopContainer>
       </BannerBackground>
       <BottomContainer>
-        {/*
-         * The summary section is rendered 3 times (desktop, tablet, mobile)
-         * with different layouts, but only one is visible at a time via CSS.
-         * A single visually-hidden heading serves all three.
-         */}
-        <VisuallyHidden>
-          <h2 id={HeadingIds.Summary}>{summaryTitle}</h2>
-        </VisuallyHidden>
-        <SidebarCol showAbove="md">
-          <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}>
-            {enrollButton}
-            {sidebarSummary}
-          </SummaryRoot>
-        </SidebarCol>
+        <SummaryCol>{infoBox}</SummaryCol>
         <MainCol>
-          {navbar}
-          <Show showBetween={["sm", "md"]}>
-            <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}>
-              {sidebarSummary}
-              <Stack gap="16px">
-                <SidebarMedia
-                  videoUrl={videoUrl}
-                  imageSrc={imageSrc}
-                  title={title}
-                />
-                {enrollButton}
-              </Stack>
-            </SummaryRoot>
-          </Show>
-          <SidebarCol showBelow="sm" alignSelf="center">
-            <SummaryRoot as="section" aria-labelledby={HeadingIds.Summary}>
-              <SidebarMedia
-                videoUrl={videoUrl}
-                imageSrc={imageSrc}
-                title={title}
-              />
-              {enrollButton}
-              {sidebarSummary}
-            </SummaryRoot>
-          </SidebarCol>
           <SectionsWrapper>{children}</SectionsWrapper>
         </MainCol>
       </BottomContainer>
diff --git a/frontends/main/src/app-pages/ProductPages/ProductSummary.test.tsx b/frontends/main/src/app-pages/ProductPages/ProductSummary.test.tsx
index 9c7422413e..3c34ca679b 100644
--- a/frontends/main/src/app-pages/ProductPages/ProductSummary.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProductSummary.test.tsx
@@ -16,6 +16,13 @@ const makeFlexiblePrice = factories.products.flexiblePrice
 const makeEnrollmentMode = factories.courses.enrollmentMode
 const { RequirementTreeBuilder } = factories.requirements
 
+/** ISO date string relative to now. Positive = future, negative = past. */
+const monthsFromNow = (months: number): string => {
+  const d = new Date()
+  d.setMonth(d.getMonth() + months)
+  return d.toISOString()
+}
+
 // Enrollment mode helpers for common test setups
 const freeMode = () => makeEnrollmentMode({ requires_payment: false })
 const paidMode = () => makeEnrollmentMode({ requires_payment: true })
@@ -92,7 +99,7 @@ describe("CourseSummary", () => {
     test("Renders 'Start: Anytime' plus and end date for start anytime courses", () => {
       // For "Anytime" to show, run must be self-paced, not archived, and have a start date in the past
       const run = makeRun({
-        start_date: "2025-01-01", // Past date
+        start_date: monthsFromNow(-12),
         is_self_paced: true,
         is_archived: false,
         is_enrollable: true,
@@ -148,13 +155,9 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_archived: false,
         is_self_paced: false,
-        start_date: "2026-03-01",
-        end_date: "2026-05-01",
       })
       const nonEnrollableRun = makeRun({
         is_enrollable: false,
-        start_date: "2025-01-01",
-        end_date: "2025-03-01",
       })
       const course = makeCourse({
         next_run_id: run.id,
@@ -181,14 +184,10 @@ describe("CourseSummary", () => {
       const run1 = makeRun({
         is_enrollable: true,
         is_self_paced: false,
-        start_date: "2026-03-01",
-        end_date: "2026-05-01",
       })
       const run2 = makeRun({
         is_enrollable: true,
         is_self_paced: false,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
       })
       const course = makeCourse({
         next_run_id: run1.id,
@@ -212,22 +211,22 @@ describe("CourseSummary", () => {
       const run1 = makeRun({
         is_enrollable: true,
         is_self_paced: false,
-        start_date: "2026-03-01",
-        end_date: "2026-05-01",
+        start_date: monthsFromNow(3),
+        end_date: monthsFromNow(5),
       })
       const run2 = makeRun({
         is_enrollable: true,
         is_self_paced: false,
         is_archived: false,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
+        start_date: monthsFromNow(6),
+        end_date: monthsFromNow(8),
       })
       const run3 = makeRun({
         is_enrollable: true,
         is_self_paced: false,
         is_archived: false,
-        start_date: "2026-09-01",
-        end_date: "2026-11-01",
+        start_date: monthsFromNow(9),
+        end_date: monthsFromNow(11),
       })
       const course = makeCourse({
         next_run_id: run1.id,
@@ -283,22 +282,22 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: true, // This will show "Start: Anytime" (past date)
         is_archived: false,
-        start_date: "2025-01-01", // Past date
-        end_date: "2026-03-01",
+        start_date: monthsFromNow(-12),
+        end_date: monthsFromNow(3),
       })
       const middleRun = makeRun({
         is_enrollable: true,
         is_self_paced: false, // Ensure dates display normally (not "Anytime")
         is_archived: false,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
+        start_date: monthsFromNow(6),
+        end_date: monthsFromNow(8),
       })
       const newestRun = makeRun({
         is_enrollable: true,
         is_self_paced: false, // Ensure dates display normally (not "Anytime")
         is_archived: false,
-        start_date: "2026-09-01",
-        end_date: "2026-11-01",
+        start_date: monthsFromNow(9),
+        end_date: monthsFromNow(11),
       })
 
       const course = makeCourse({
@@ -346,18 +345,18 @@ describe("CourseSummary", () => {
     test("Initially displays the date for the run with next_run_id when multiple enrollable runs exist", () => {
       const run1 = makeRun({
         is_enrollable: true,
-        start_date: "2026-01-01",
-        end_date: "2026-03-01",
+        start_date: monthsFromNow(1),
+        end_date: monthsFromNow(3),
       })
       const run2 = makeRun({
         is_enrollable: true,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
+        start_date: monthsFromNow(6),
+        end_date: monthsFromNow(8),
       })
       const run3 = makeRun({
         is_enrollable: true,
-        start_date: "2026-09-01",
-        end_date: "2026-11-01",
+        start_date: monthsFromNow(9),
+        end_date: monthsFromNow(11),
       })
 
       const course = makeCourse({
@@ -384,18 +383,18 @@ describe("CourseSummary", () => {
     test("Never displays dates for non-enrollable runs", async () => {
       const enrollableRun = makeRun({
         is_enrollable: true,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
+        start_date: monthsFromNow(6),
+        end_date: monthsFromNow(8),
       })
       const nonEnrollableRun1 = makeRun({
         is_enrollable: false,
-        start_date: "2026-01-01",
-        end_date: "2026-03-01",
+        start_date: monthsFromNow(1),
+        end_date: monthsFromNow(3),
       })
       const nonEnrollableRun2 = makeRun({
         is_enrollable: false,
-        start_date: "2026-09-01",
-        end_date: "2026-11-01",
+        start_date: monthsFromNow(9),
+        end_date: monthsFromNow(11),
       })
 
       const course = makeCourse({
@@ -458,18 +457,13 @@ describe("CourseSummary", () => {
     test("When multiple enrollable runs exist, only shows runs with start dates after expanding", async () => {
       const runWithDate = makeRun({
         is_enrollable: true,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
       })
       const runWithoutDate = makeRun({
         is_enrollable: true,
         start_date: null,
-        end_date: "2026-11-01",
       })
       const anotherRunWithDate = makeRun({
         is_enrollable: true,
-        start_date: "2026-09-01",
-        end_date: "2026-11-01",
       })
 
       const course = makeCourse({
@@ -503,12 +497,9 @@ describe("CourseSummary", () => {
     test("End date is not displayed for runs without end date when expanded", async () => {
       const runWithEndDate = makeRun({
         is_enrollable: true,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
       })
       const runWithoutEndDate = makeRun({
         is_enrollable: true,
-        start_date: "2026-09-01",
         end_date: null,
       })
 
@@ -552,8 +543,8 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: true,
         is_archived: false,
-        start_date: "2025-01-01", // Past date
-        end_date: "2026-12-01",
+        start_date: monthsFromNow(-12),
+        end_date: monthsFromNow(12),
       })
 
       // Run that should show actual date (not self-paced)
@@ -561,8 +552,8 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: false,
         is_archived: false,
-        start_date: "2026-06-01",
-        end_date: "2026-08-01",
+        start_date: monthsFromNow(6),
+        end_date: monthsFromNow(8),
       })
 
       // Run that should show actual date (self-paced but future start date)
@@ -570,8 +561,8 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: true,
         is_archived: false,
-        start_date: "2026-09-01", // Future date
-        end_date: "2026-11-01",
+        start_date: monthsFromNow(9),
+        end_date: monthsFromNow(11),
       })
 
       const course = makeCourse({
@@ -616,8 +607,8 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: true,
         is_archived: true, // Archived!
-        start_date: "2025-01-01", // Past date
-        end_date: "2025-12-01",
+        start_date: monthsFromNow(-18),
+        end_date: monthsFromNow(-3),
       })
 
       // Active anytime run for comparison
@@ -625,8 +616,8 @@ describe("CourseSummary", () => {
         is_enrollable: true,
         is_self_paced: true,
         is_archived: false,
-        start_date: "2025-06-01", // Past date
-        end_date: "2026-12-01",
+        start_date: monthsFromNow(-6),
+        end_date: monthsFromNow(12),
       })
 
       const course = makeCourse({
@@ -1060,115 +1051,6 @@ describe("CourseSummary", () => {
       ).toBeNull()
     })
   })
-
-  describe("In Programs Row", () => {
-    test("Does not render when programs array is null", () => {
-      const run = makeRun()
-      const course = makeCourse({
-        next_run_id: run.id,
-        courseruns: [run],
-        programs: null,
-      })
-      renderWithProviders(<CourseSummary course={course} />)
-
-      const programsRow = screen.queryByTestId(TestIds.CourseInProgramsRow)
-      expect(programsRow).toBeNull()
-    })
-
-    test("Does not render when programs array is empty", () => {
-      const run = makeRun()
-      const course = makeCourse({
-        next_run_id: run.id,
-        courseruns: [run],
-        programs: [],
-      })
-      renderWithProviders(<CourseSummary course={course} />)
-
-      const programsRow = screen.queryByTestId(TestIds.CourseInProgramsRow)
-      expect(programsRow).toBeNull()
-    })
-
-    test("Renders link to one program", () => {
-      const program = factories.programs.baseProgram()
-      const run = makeRun()
-      const course = makeCourse({
-        next_run_id: run.id,
-        courseruns: [run],
-        programs: [program],
-      })
-      renderWithProviders(<CourseSummary course={course} />)
-
-      const programsRow = screen.getByTestId(TestIds.CourseInProgramsRow)
-
-      expect(programsRow).toHaveTextContent("Part of the following program")
-      const link = within(programsRow).getByRole("link", {
-        name: program.title,
-      })
-      expect(link).toHaveAttribute("href", `/programs/${program.readable_id}`)
-    })
-
-    test("Renders links to multiple programs", () => {
-      const programs = [
-        factories.programs.baseProgram(),
-        factories.programs.baseProgram(),
-        factories.programs.baseProgram(),
-      ]
-      const run = makeRun()
-      const course = makeCourse({
-        next_run_id: run.id,
-        courseruns: [run],
-        programs: programs,
-      })
-      renderWithProviders(<CourseSummary course={course} />)
-
-      const programsRow = screen.getByTestId(TestIds.CourseInProgramsRow)
-
-      expect(programsRow).toHaveTextContent("Part of the following programs")
-
-      const link1 = within(programsRow).getByRole("link", {
-        name: programs[0].title,
-      })
-      expect(link1).toHaveAttribute(
-        "href",
-        `/programs/${programs[0].readable_id}`,
-      )
-
-      const link2 = within(programsRow).getByRole("link", {
-        name: programs[1].title,
-      })
-      expect(link2).toHaveAttribute(
-        "href",
-        `/programs/${programs[1].readable_id}`,
-      )
-
-      const link3 = within(programsRow).getByRole("link", {
-        name: programs[2].title,
-      })
-      expect(link3).toHaveAttribute(
-        "href",
-        `/programs/${programs[2].readable_id}`,
-      )
-    })
-
-    test("Displays programs row even when no next run is found", () => {
-      const program = factories.programs.baseProgram()
-      const course = makeCourse({
-        next_run_id: null,
-        courseruns: [],
-        programs: [program],
-      })
-      renderWithProviders(<CourseSummary course={course} />)
-
-      const programsRow = screen.getByTestId(TestIds.CourseInProgramsRow)
-
-      expect(programsRow).toBeInTheDocument()
-      expect(programsRow).toHaveTextContent("Part of the following program")
-      const link = within(programsRow).getByRole("link", {
-        name: program.title,
-      })
-      expect(link).toHaveAttribute("href", `/programs/${program.readable_id}`)
-    })
-  })
 })
 
 describe("ProgramSummary", () => {
diff --git a/frontends/main/src/app-pages/ProductPages/ProductSummary.tsx b/frontends/main/src/app-pages/ProductPages/ProductSummary.tsx
index 21d3f07165..171958bb81 100644
--- a/frontends/main/src/app-pages/ProductPages/ProductSummary.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProductSummary.tsx
@@ -9,7 +9,6 @@ import {
   RiPriceTag3Line,
   RiTimeLine,
   RiFileCopy2Line,
-  RiMenuAddLine,
   RiInformation2Line,
 } from "@remixicon/react"
 import { formatDate, isInPast, LocalDate, NoSSR, pluralize } from "ol-utilities"
@@ -27,7 +26,6 @@ import {
   priceWithDiscount,
 } from "@/common/mitxonline"
 import { useQuery } from "@tanstack/react-query"
-import { programPageView } from "@/common/urls"
 
 const ResponsiveLink = styled(Link)(({ theme }) => ({
   ...theme.typography.body2, // override default for "black" color is subtitle2
@@ -399,7 +397,7 @@ const StrickenText = styled.span(({ theme }) => ({
   },
 }))
 
-const CourseCertificateBox: React.FC<CourseInfoRowProps & {}> = ({
+const CourseCertificateBox: React.FC<CourseInfoRowProps> = ({
   nextRun,
   course,
 }) => {
@@ -557,35 +555,6 @@ const CoursePriceRow: React.FC<CourseInfoRowProps> = ({
   )
 }
 
-const CourseInProgramsRow: React.FC<CourseInfoRowProps> = ({
-  course,
-  ...others
-}) => {
-  if (!course.programs || course.programs.length === 0) return null
-  const label = `Part of the following ${pluralize("program", course.programs.length)}`
-  return (
-    <InfoRow {...others}>
-      <InfoRowIcon>
-        <RiMenuAddLine aria-hidden="true" />
-      </InfoRowIcon>
-      <InfoRowInner>
-        <Stack gap="4px">
-          <InfoLabel>{label}</InfoLabel>
-          {course.programs.map((p) => (
-            <UnderlinedLink
-              color="black"
-              key={p.readable_id}
-              href={programPageView(p.readable_id)}
-            >
-              {p.title}
-            </UnderlinedLink>
-          ))}
-        </Stack>
-      </InfoRowInner>
-    </InfoRow>
-  )
-}
-
 enum TestIds {
   DatesRow = "dates-row",
   PaceRow = "pace-row",
@@ -593,7 +562,6 @@ enum TestIds {
   PriceRow = "price-row",
   RequirementsRow = "requirements-row",
   CertificateTrackRow = "certificate-track-row",
-  CourseInProgramsRow = "course-in-programs-row",
 }
 
 const ArchivedAlert: React.FC = () => {
@@ -611,13 +579,39 @@ const ArchivedAlert: React.FC = () => {
   )
 }
 
+/**
+ * Flex column by default; on tablet switches to CSS multi-column so
+ * metadata rows flow top-to-bottom then wrap to the next column.
+ */
+const SummaryRows = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "24px",
+  [theme.breakpoints.up("md")]: {
+    gap: "32px",
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    display: "block",
+    columnCount: 2,
+    columnGap: "48px",
+    columnRule: `1px solid ${theme.custom.colors.lightGray2}`,
+    "> *": {
+      breakInside: "avoid",
+      marginBottom: "24px",
+      "&:last-child": {
+        marginBottom: 0,
+      },
+    },
+  },
+}))
+
 const CourseSummary: React.FC<{
   course: CourseWithCourseRunsSerializerV2
 }> = ({ course }) => {
   const nextRunId = course.next_run_id
   const nextRun = course.courseruns.find((run) => run.id === nextRunId)
   return (
-    <Stack gap={{ xs: "24px", md: "32px" }}>
+    <SummaryRows>
       {!nextRun ? (
         <Alert severity="warning">
           No sessions of this course are currently open for enrollment. More
@@ -649,12 +643,7 @@ const CourseSummary: React.FC<{
         nextRun={nextRun}
         data-testid={TestIds.PriceRow}
       />
-      <CourseInProgramsRow
-        course={course}
-        nextRun={nextRun}
-        data-testid={TestIds.CourseInProgramsRow}
-      />
-    </Stack>
+    </SummaryRows>
   )
 }
 
@@ -841,7 +830,7 @@ const ProgramSummary: React.FC<{
   courses?: CourseWithCourseRunsSerializerV2[]
 }> = ({ program, courses }) => {
   return (
-    <Stack gap={{ xs: "24px", md: "32px" }}>
+    <SummaryRows>
       <RequirementsRow
         program={program}
         data-testid={TestIds.RequirementsRow}
@@ -849,7 +838,7 @@ const ProgramSummary: React.FC<{
       <ProgramDurationRow program={program} data-testid={TestIds.DurationRow} />
       <ProgramPaceRow courses={courses} data-testid={TestIds.PaceRow} />
       <ProgramPriceRow data-testid={TestIds.PriceRow} program={program} />
-    </Stack>
+    </SummaryRows>
   )
 }
 
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.test.tsx b/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.test.tsx
new file mode 100644
index 0000000000..e5c590bf4c
--- /dev/null
+++ b/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.test.tsx
@@ -0,0 +1,136 @@
+import React from "react"
+import { factories, urls } from "api/mitxonline-test-utils"
+import { setMockResponse } from "api/test-utils"
+import { renderWithProviders, screen, within } from "@/test-utils"
+import { waitForElementToBeRemoved } from "@testing-library/react"
+import ProgramBundleUpsell from "./ProgramBundleUpsell"
+import { allowConsoleErrors } from "ol-test-utilities"
+
+const { RequirementTreeBuilder } = factories.requirements
+
+const TestIds = {
+  ProgramBundleUpsell: "program-bundle-upsell",
+}
+
+describe("ProgramBundleUpsell", () => {
+  test("Does not render when no program details are loaded", () => {
+    renderWithProviders(<ProgramBundleUpsell programs={[]} />)
+
+    expect(
+      screen.queryByTestId(TestIds.ProgramBundleUpsell),
+    ).not.toBeInTheDocument()
+  })
+
+  test("Renders upsell with program title, course count, price, and View Program link", async () => {
+    const requirements = new RequirementTreeBuilder()
+    const required = requirements.addOperator({ operator: "all_of" })
+    required.addCourse()
+    required.addCourse()
+    required.addCourse()
+    const electives = requirements.addOperator({
+      operator: "min_number_of",
+      operator_value: "2",
+    })
+    electives.addCourse()
+    electives.addCourse()
+    electives.addCourse()
+
+    const baseProgram = factories.programs.baseProgram()
+    const programDetail = factories.programs.program({
+      id: baseProgram.id,
+      readable_id: baseProgram.readable_id,
+      title: "Data Science",
+      req_tree: requirements.serialize(),
+      products: [factories.courses.product({ price: "750" })],
+    })
+    setMockResponse.get(urls.programs.programsList({ id: [baseProgram.id] }), {
+      results: [programDetail],
+    })
+    renderWithProviders(<ProgramBundleUpsell programs={[baseProgram]} />)
+
+    const upsell = await screen.findByTestId("program-bundle-upsell-item")
+    // 3 required + 2 electives = 5 total courses
+    expect(upsell).toHaveTextContent(
+      "Get all 5 Data Science Courses + Certificates",
+    )
+    expect(upsell).toHaveTextContent("$750")
+    expect(upsell).toHaveTextContent("(19% off)")
+    const link = within(upsell).getByRole("link", { name: "View Program" })
+    expect(link).toHaveAttribute(
+      "href",
+      `/programs/${programDetail.readable_id}`,
+    )
+  })
+
+  test("Shows loading skeleton then disappears when program has no price", async () => {
+    const baseProgram = factories.programs.baseProgram()
+    const programDetail = factories.programs.program({
+      id: baseProgram.id,
+      readable_id: baseProgram.readable_id,
+      products: [],
+    })
+    const { promise, resolve } = Promise.withResolvers()
+    setMockResponse.get(
+      urls.programs.programsList({ id: [baseProgram.id] }),
+      promise,
+    )
+    renderWithProviders(<ProgramBundleUpsell programs={[baseProgram]} />)
+
+    const upsell = screen.getByTestId(TestIds.ProgramBundleUpsell)
+
+    resolve({ results: [programDetail] })
+    await waitForElementToBeRemoved(upsell)
+  })
+
+  test("Shows loading skeleton then disappears when program detail fetch fails", async () => {
+    allowConsoleErrors()
+    const baseProgram = factories.programs.baseProgram()
+    const { promise, reject } = Promise.withResolvers()
+    setMockResponse.get(
+      urls.programs.programsList({ id: [baseProgram.id] }),
+      promise,
+    )
+    renderWithProviders(<ProgramBundleUpsell programs={[baseProgram]} />)
+
+    const upsell = screen.getByTestId(TestIds.ProgramBundleUpsell)
+
+    reject(new Error("Network error"))
+    await waitForElementToBeRemoved(upsell)
+  })
+
+  test("Renders upsell for multiple programs", async () => {
+    const makeReqTree = (courseCount: number) => {
+      const requirements = new RequirementTreeBuilder()
+      const required = requirements.addOperator({ operator: "all_of" })
+      for (let i = 0; i < courseCount; i++) required.addCourse()
+      return requirements.serialize()
+    }
+
+    const prices = ["500", "900"]
+    const basePrograms = [
+      factories.programs.baseProgram(),
+      factories.programs.baseProgram(),
+    ]
+    const programDetails = basePrograms.map((bp, i) =>
+      factories.programs.program({
+        id: bp.id,
+        readable_id: bp.readable_id,
+        title: bp.title,
+        req_tree: makeReqTree(i + 3),
+        products: [factories.courses.product({ price: prices[i] })],
+      }),
+    )
+    setMockResponse.get(
+      urls.programs.programsList({ id: basePrograms.map((bp) => bp.id) }),
+      { results: programDetails },
+    )
+    renderWithProviders(<ProgramBundleUpsell programs={basePrograms} />)
+
+    const items = await screen.findAllByTestId("program-bundle-upsell-item")
+    expect(items).toHaveLength(2)
+    expect(items[0]).toHaveTextContent(programDetails[0].title)
+    expect(items[0]).toHaveTextContent("$500")
+    expect(items[1]).toHaveTextContent(programDetails[1].title)
+    expect(items[1]).toHaveTextContent("$900")
+  })
+})
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.tsx b/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.tsx
new file mode 100644
index 0000000000..1ff9b03114
--- /dev/null
+++ b/frontends/main/src/app-pages/ProductPages/ProgramBundleUpsell.tsx
@@ -0,0 +1,206 @@
+import React from "react"
+import { ButtonLink, styled } from "@mitodl/smoot-design"
+import { programsQueries } from "api/mitxonline-hooks/programs"
+import { Skeleton } from "ol-components"
+import type {
+  BaseProgram,
+  V2ProgramDetail,
+} from "@mitodl/mitxonline-api-axios/v2"
+import { parseReqTree } from "./util"
+import { formatPrice } from "@/common/mitxonline"
+import { useQuery } from "@tanstack/react-query"
+import { programPageView } from "@/common/urls"
+
+const WideButtonLink = styled(ButtonLink)({
+  width: "100%",
+})
+
+const BundleUpsellContainer = styled.div(({ theme }) => ({
+  boxShadow: "inset 0px 16px 24px 0px rgba(0, 40, 150, 0.05)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  [theme.breakpoints.up("md")]: {
+    borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+    padding: "24px 32px",
+  },
+  // Tablet: standalone bordered card in the right column
+  [theme.breakpoints.between("sm", "md")]: {
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "4px",
+    padding: "24px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+    padding: "24px 16px",
+  },
+}))
+
+const BundleUpsellItem = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  textAlign: "center",
+  "& + &": {
+    paddingTop: "16px",
+    [theme.breakpoints.between("sm", "md")]: {
+      borderTop: `1px solid ${theme.custom.colors.lightGray2}`,
+      paddingTop: "24px",
+    },
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    flexDirection: "row",
+    textAlign: "left",
+    alignItems: "center",
+    gap: "32px",
+  },
+}))
+
+const BundleUpsellActions = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "24px",
+  alignItems: "center",
+  [theme.breakpoints.between("sm", "md")]: {
+    marginLeft: "auto",
+    gap: "8px",
+    whiteSpace: "nowrap",
+  },
+}))
+
+const BundlePrice = styled.span(({ theme }) => ({
+  ...theme.typography.h4,
+  display: "block",
+  color: theme.custom.colors.red,
+}))
+
+const BundleDiscount = styled.span(({ theme }) => ({
+  ...theme.typography.body1,
+  display: "block",
+  color: theme.custom.colors.darkGray2,
+}))
+
+const BundlePriceRow = styled.div(({ theme }) => ({
+  display: "flex",
+  gap: "8px",
+  alignItems: "center",
+  justifyContent: "center",
+  [theme.breakpoints.between("sm", "md")]: {
+    justifyContent: "flex-start",
+  },
+}))
+
+const BundleUpsellTitle = styled.span(({ theme }) => ({
+  ...theme.typography.h5,
+  display: "block",
+}))
+
+// For now we use a static 19% discount that is aligned with business rules
+const BUNDLE_DISCOUNT_LABEL = "(19% off)"
+
+type ProgramBundleUpsellItemProps =
+  | { loading: true; program?: undefined }
+  | { loading?: false; program: V2ProgramDetail }
+
+const ProgramBundleUpsellItem: React.FC<ProgramBundleUpsellItemProps> = ({
+  loading,
+  program,
+}) => {
+  if (loading) {
+    return (
+      <BundleUpsellItem>
+        <BundleUpsellTitle>
+          <Skeleton width="80%" variant="text" sx={{ mx: "auto" }} />
+          <Skeleton
+            width="60%"
+            variant="text"
+            sx={(theme) => ({
+              mx: "auto",
+              [theme.breakpoints.between("sm", "md")]: {
+                display: "none",
+              },
+            })}
+          />
+        </BundleUpsellTitle>
+        <BundleUpsellActions>
+          <BundlePriceRow>
+            <BundlePrice>
+              <Skeleton width={60} variant="text" />
+            </BundlePrice>
+            <BundleDiscount>
+              <Skeleton width={50} variant="text" />
+            </BundleDiscount>
+          </BundlePriceRow>
+          <Skeleton width="100%" variant="rectangular" height={40} />
+        </BundleUpsellActions>
+      </BundleUpsellItem>
+    )
+  }
+
+  const price = program.products[0]?.price
+  const priceFormatted = price ? formatPrice(price, { avoidCents: true }) : null
+  if (!priceFormatted) return null
+
+  const parsedReqs = parseReqTree(program.req_tree)
+  const totalCourses = parsedReqs.reduce(
+    (sum, req) => sum + req.requiredCourseCount,
+    0,
+  )
+
+  return (
+    <BundleUpsellItem data-testid="program-bundle-upsell-item">
+      <BundleUpsellTitle>
+        Get all {totalCourses} {program.title} Courses + Certificates
+      </BundleUpsellTitle>
+      <BundleUpsellActions>
+        <BundlePriceRow>
+          <BundlePrice>{priceFormatted}</BundlePrice>
+          <BundleDiscount>{BUNDLE_DISCOUNT_LABEL}</BundleDiscount>
+        </BundlePriceRow>
+        <WideButtonLink
+          variant="bordered"
+          size="large"
+          href={programPageView(program.readable_id)}
+        >
+          View Program
+        </WideButtonLink>
+      </BundleUpsellActions>
+    </BundleUpsellItem>
+  )
+}
+
+const ProgramBundleUpsell: React.FC<{ programs: BaseProgram[] }> = ({
+  programs,
+}) => {
+  const ids = programs.map((p) => p.id)
+  const { data, isLoading, isError } = useQuery({
+    ...programsQueries.programsList({ id: ids }),
+    enabled: ids.length > 0,
+  })
+
+  const pricedPrograms = (data?.results ?? []).filter(
+    (d): d is V2ProgramDetail => !!d.products[0]?.price,
+  )
+
+  if (!isLoading && pricedPrograms.length === 0) {
+    if (isError) {
+      console.warn(
+        `ProgramBundleUpsell: programs list query failed for ids=${ids.join(",")}`,
+      )
+    }
+    return null
+  }
+
+  return (
+    <BundleUpsellContainer data-testid="program-bundle-upsell">
+      {isLoading
+        ? programs.map((p) => <ProgramBundleUpsellItem key={p.id} loading />)
+        : pricedPrograms.map((program) => (
+            <ProgramBundleUpsellItem key={program.id} program={program} />
+          ))}
+    </BundleUpsellContainer>
+  )
+}
+
+export default ProgramBundleUpsell
+export { BUNDLE_DISCOUNT_LABEL }
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx b/frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx
index aebac65be5..2c9037d8e1 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { styled, LoadingSpinner, Stack } from "ol-components"
+import { LoadingSpinner, Stack } from "ol-components"
 import {
   enrollmentQueries,
   useCreateProgramEnrollment,
@@ -7,7 +7,7 @@ import {
 import { useQuery } from "@tanstack/react-query"
 import { V2ProgramDetail } from "@mitodl/mitxonline-api-axios/v2"
 import { RiCheckLine } from "@remixicon/react"
-import { Alert, Button, ButtonLink } from "@mitodl/smoot-design"
+import { Alert, Button, ButtonLink, styled } from "@mitodl/smoot-design"
 import ProgramEnrollmentDialog from "@/page-components/EnrollmentDialogs/ProgramEnrollmentDialog"
 import NiceModal from "@ebay/nice-modal-react"
 import { userQueries } from "api/hooks/user"
@@ -19,10 +19,7 @@ import { getEnrollmentType, formatPrice } from "@/common/mitxonline"
 import { useReplaceBasketItem } from "api/mitxonline-hooks/baskets"
 import { useRouter } from "next-nprogress-bar"
 
-const WideButtonLink = styled(ButtonLink)(({ href }) => [
-  {
-    width: "100%",
-  },
+const ButtonLinkWithDisabled = styled(ButtonLink)(({ href }) => [
   !href && {
     pointerEvents: "none",
     cursor: "default",
@@ -87,37 +84,36 @@ const ProgramEnrollmentButton: React.FC<ProgramEnrollmentButtonProps> = ({
       setAnchor(e.currentTarget)
     }
   }
-  if (enrollment) {
-    const href = programDashboardEnabled ? programView(program.id) : undefined
+  const href = programDashboardEnabled ? programView(program.id) : undefined
 
-    return (
-      <WideButtonLink href={href}>
-        Enrolled
-        <RiCheckLine aria-hidden="true" />
-      </WideButtonLink>
-    )
-  }
   return (
     <>
-      <Stack width="100%" gap="12px">
-        <Button
-          onClick={handleClick}
-          variant="primary"
-          size="large"
-          disabled={
-            enrollmentType === "none" ||
-            isPaidWithoutPrice ||
-            isPending ||
-            isLoading
-          }
-          endIcon={
-            isLoading || isPending ? (
-              <LoadingSpinner size="16px" loading={true} color="inherit" />
-            ) : undefined
-          }
-        >
-          {isLoading ? null : getEnrollButtonText()}
-        </Button>
+      <Stack gap="12px">
+        {enrollment ? (
+          <ButtonLinkWithDisabled href={href}>
+            Enrolled
+            <RiCheckLine aria-hidden="true" />
+          </ButtonLinkWithDisabled>
+        ) : (
+          <Button
+            onClick={handleClick}
+            variant="primary"
+            size="large"
+            disabled={
+              enrollmentType === "none" ||
+              isPaidWithoutPrice ||
+              isPending ||
+              isLoading
+            }
+            endIcon={
+              isLoading || isPending ? (
+                <LoadingSpinner size="16px" loading={true} color="inherit" />
+              ) : undefined
+            }
+          >
+            {isLoading ? null : getEnrollButtonText()}
+          </Button>
+        )}
         {isError && (
           <Alert severity="error">
             There was a problem processing your enrollment. Please try again.
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx b/frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx
index c5f6e7b183..807b30e25c 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx
@@ -16,7 +16,6 @@ import type {
 } from "@mitodl/mitxonline-api-axios/v2"
 import { renderWithProviders, waitFor, screen, within } from "@/test-utils"
 import ProgramPage from "./ProgramPage"
-import { HeadingIds } from "./util"
 import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
 
@@ -228,7 +227,7 @@ describe("ProgramPage", () => {
         assertHeadings(
           [
             { level: 1, name: page.title },
-            { level: 2, name: "Program summary" },
+            { level: 2, name: "Program Information" },
             { level: 2, name: "About this Program" },
             { level: 2, name: "Courses" },
             { level: 3, name: "Core Dog Courses" },
@@ -247,34 +246,6 @@ describe("ProgramPage", () => {
     )
   })
 
-  test("Page Navigation", async () => {
-    const program = makeProgram({ ...makeReqs() })
-    const page = makePage({ program_details: program })
-    setupApis({ program, page })
-    renderWithProviders(<ProgramPage readableId={program.readable_id} />)
-
-    const nav = await screen.findByRole("navigation", {
-      name: "Program Details",
-    })
-    const links = within(nav).getAllByRole("link")
-
-    expect(links[0]).toHaveTextContent("About")
-    expect(links[0]).toHaveAttribute("href", `#${HeadingIds.About}`)
-    expect(document.getElementById(HeadingIds.About)).toBeVisible()
-    expect(links[1]).toHaveTextContent("What you'll learn")
-    expect(links[1]).toHaveAttribute("href", `#${HeadingIds.What}`)
-    expect(document.getElementById(HeadingIds.What)).toBeVisible()
-    expect(links[2]).toHaveTextContent("How you'll learn")
-    expect(links[2]).toHaveAttribute("href", `#${HeadingIds.How}`)
-    expect(document.getElementById(HeadingIds.How)).toBeVisible()
-    expect(links[3]).toHaveTextContent("Prerequisites")
-    expect(links[3]).toHaveAttribute("href", `#${HeadingIds.Prereqs}`)
-    expect(document.getElementById(HeadingIds.Prereqs)).toBeVisible()
-    expect(links[4]).toHaveTextContent("Instructors")
-    expect(links[4]).toHaveAttribute("href", `#${HeadingIds.Instructors}`)
-    expect(document.getElementById(HeadingIds.Instructors)).toBeVisible()
-  })
-
   // Collasping sections tested in AboutSection.test.tsx
   test("About section has expected content", async () => {
     const program = makeProgram({ ...makeReqs() })
@@ -453,10 +424,10 @@ describe("ProgramPage", () => {
     setupApis({ program, page })
     renderWithProviders(<ProgramPage readableId={program.readable_id} />)
 
-    const buttons = await screen.findAllByRole("button", {
+    const button = await screen.findByRole("button", {
       name: /enroll/i,
     })
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(button).toBeInTheDocument()
   })
 
   test("Shows a YouTube video in the sidebar when video_url is a YouTube URL", async () => {
@@ -506,15 +477,15 @@ describe("ProgramPage", () => {
   })
 
   test.each([
-    { courses: [], pages: [makePage()] },
+    { programs: [], pages: [makePage()] },
     {
-      courses: [makeProgram({ ...makeReqs() })],
+      programs: [makeProgram({ ...makeReqs() })],
       pages: [],
     },
-  ])("Returns 404 if no program found", async ({ courses, pages }) => {
+  ])("Returns 404 if no program found", async ({ programs, pages }) => {
     setMockResponse.get(
       urls.programs.programsList({ readable_id: "readable_id" }),
-      { results: courses },
+      { results: programs },
     )
     setMockResponse.get(urls.pages.programPages("readable_id"), {
       items: pages,
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
index 0716e707a9..0d0080f5a8 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
@@ -16,15 +16,13 @@ import RawHTML from "./RawHTML"
 import UnstyledRawHTML from "@/components/UnstyledRawHTML/UnstyledRawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
-import ProductNavbar, { HeadingData } from "./ProductNavbar"
 import WhoCanTakeSection from "./WhoCanTakeSection"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
 import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
-import { ProgramPageItem, V2Program } from "@mitodl/mitxonline-api-axios/v2"
-import { ProgramSummary } from "./ProductSummary"
+import type { V2ProgramDetail } from "@mitodl/mitxonline-api-axios/v2"
 import { DEFAULT_RESOURCE_IMG, pluralize } from "ol-utilities"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import ProgramEnrollmentButton from "./ProgramEnrollmentButton"
+import ProgramInfoBox from "./InfoBoxProgram"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import MitxOnlineCourseCard from "./MitxOnlineCourseCard"
 
@@ -38,42 +36,6 @@ const PrerequisitesSection = styled.section({
   gap: "16px",
 })
 
-const getNavLinks = (page: ProgramPageItem): HeadingData[] => {
-  const all = [
-    {
-      id: HeadingIds.About,
-      label: "About",
-      variant: "primary",
-      content: page.about,
-    },
-    {
-      id: HeadingIds.What,
-      label: "What you'll learn",
-      variant: "secondary",
-      content: page.what_you_learn,
-    },
-    {
-      id: HeadingIds.How,
-      label: "How you'll learn",
-      variant: "secondary",
-      content: true,
-    },
-    {
-      id: HeadingIds.Prereqs,
-      label: "Prerequisites",
-      variant: "secondary",
-      content: page.prerequisites,
-    },
-    {
-      id: HeadingIds.Instructors,
-      label: "Instructors",
-      variant: "secondary",
-      content: page.faculty.length,
-    },
-  ] as const
-  return all.filter((item) => item.content)
-}
-
 const DescriptionHTML = styled(UnstyledRawHTML)({
   p: { margin: 0 },
 })
@@ -100,7 +62,7 @@ const ReqTitleNote = styled("span")(({ theme }) => ({
 }))
 
 type RequirementsSectionProps = {
-  program: V2Program
+  program: V2ProgramDetail
 }
 
 const getCompletionText = (parsedReqs: RequirementData[]) => {
@@ -223,8 +185,6 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
     return null
   }
 
-  const navLinks = getNavLinks(page)
-
   // feature_image_src will be nullable in a future MITx Online API update
   // (null means no image set). Fall back to our own default image.
   const imageSrc =
@@ -245,12 +205,9 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
       }
       imageSrc={imageSrc}
       videoUrl={page.video_url}
-      summaryTitle="Program summary"
-      sidebarSummary={
-        <ProgramSummary program={program} courses={courses.data?.results} />
+      infoBox={
+        <ProgramInfoBox program={program} courses={courses.data?.results} />
       }
-      enrollButton={<ProgramEnrollmentButton program={program} />}
-      navbar={<ProductNavbar navLinks={navLinks} productNoun="Program" />}
     >
       {page.about ? (
         <AboutSection productNoun="Program" aboutHtml={page.about} />