diff --git a/frontends/main/public/images/Vector.svg b/frontends/main/public/images/Vector.svg
new file mode 100644
index 0000000000..f5f64d5881
--- /dev/null
+++ b/frontends/main/public/images/Vector.svg
@@ -0,0 +1,3 @@
+<svg width="240" height="308" viewBox="0 0 240 308" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.00001 306L1.00002 -19L238 143.5L1.00001 306Z" stroke="#FF1423" stroke-opacity="0.5" stroke-width="2"/>
+</svg>
diff --git a/frontends/main/public/images/backgrounds/background_podcast.png b/frontends/main/public/images/backgrounds/background_podcast.png
new file mode 100644
index 0000000000..c366b768e0
Binary files /dev/null and b/frontends/main/public/images/backgrounds/background_podcast.png differ
diff --git a/frontends/main/public/images/backgrounds/background_podcast_mobile.png b/frontends/main/public/images/backgrounds/background_podcast_mobile.png
new file mode 100644
index 0000000000..968554a51c
Binary files /dev/null and b/frontends/main/public/images/backgrounds/background_podcast_mobile.png differ
diff --git a/frontends/main/public/images/circles.svg b/frontends/main/public/images/circles.svg
new file mode 100644
index 0000000000..98a1ada293
--- /dev/null
+++ b/frontends/main/public/images/circles.svg
@@ -0,0 +1,4 @@
+<svg width="680" height="680" viewBox="0 0 680 680" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="340" cy="340" r="339.5" stroke="white" stroke-opacity="0.3"/>
+<circle cx="340" cy="340" r="299.5" stroke="#40464C" stroke-dasharray="4 4"/>
+</svg>
diff --git a/frontends/main/public/images/rectangle_small.svg b/frontends/main/public/images/rectangle_small.svg
new file mode 100644
index 0000000000..19dc6bcf3d
--- /dev/null
+++ b/frontends/main/public/images/rectangle_small.svg
@@ -0,0 +1,3 @@
+<svg width="62" height="85" viewBox="0 0 62 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 82.8994L1 1.89941L60 42.3994L1 82.8994Z" stroke="#FF1423" stroke-opacity="0.5" stroke-width="2"/>
+</svg>
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPage.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPage.tsx
new file mode 100644
index 0000000000..b865d7776a
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPage.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import React from "react"
+import PodcastPageTemplate from "./PodcastPageTemplate"
+import { useLearningResourcesList } from "api/hooks/learningResources"
+import { LearningResource, PodcastEpisodeResource } from "api"
+
+const PodcastPage: React.FC = () => {
+  const { data: episodesData } = useLearningResourcesList({
+    resource_type: ["podcast_episode"],
+    limit: 4,
+    sortby: "new",
+  })
+
+  const { data: podcastsData } = useLearningResourcesList({
+    resource_type: ["podcast"],
+    limit: 15,
+    sortby: "new",
+  })
+
+  const episodes = (episodesData?.results ?? []) as PodcastEpisodeResource[]
+  const podcasts = (podcastsData?.results ?? []) as LearningResource[]
+
+  return <PodcastPageTemplate episodes={episodes} podcasts={podcasts} />
+}
+
+export default PodcastPage
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPageTemplate.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPageTemplate.tsx
new file mode 100644
index 0000000000..2890675bf5
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPageTemplate.tsx
@@ -0,0 +1,339 @@
+import React from "react"
+import {
+  styled,
+  Container,
+  Breadcrumbs,
+  Stack,
+  BannerBackground,
+  Grid2,
+} from "ol-components"
+import { LearningResource, PodcastEpisodeResource, ResourceTypeEnum } from "api"
+import { RiMailLine } from "@remixicon/react"
+import { HOME as HOME_URL } from "../../common/urls"
+import RecentEpisodesPanel from "./RecentEpisodesPanel"
+import PodcastSubscribePopover from "./PodcastSubscribePopover"
+import { ResourceCard } from "@/page-components/ResourceCard/ResourceCard"
+const DEFAULT_BACKGROUND_IMAGE_URL =
+  "/images/backgrounds/background_podcast.png"
+const DEFAULT_BACKGROUND_IMAGE_MOBILE_URL =
+  "/images/backgrounds/background_podcast_mobile.png"
+
+const StyledBannerBackground = styled(BannerBackground)(({ theme }) => ({
+  position: "relative",
+  overflow: "hidden",
+  padding: "48px 0 64px 0",
+  [theme.breakpoints.down("md")]: {
+    padding: "40px 0 16px 0",
+  },
+  [theme.breakpoints.down("sm")]: {
+    backgroundImage: `linear-gradient(rgba(0 0 0 / 50%), rgba(0 0 0 / 50%)), url('${DEFAULT_BACKGROUND_IMAGE_MOBILE_URL}')`,
+    backgroundAttachment: "scroll",
+    backgroundPosition: "center center",
+    backgroundSize: "cover",
+  },
+}))
+
+const SubscriptionButtonContainer = styled.div(({ theme }) => ({
+  position: "relative",
+  minHeight: "38px",
+  display: "flex",
+  marginTop: "32px",
+  [theme.breakpoints.down("sm")]: {
+    marginTop: "24px",
+  },
+}))
+
+const BackgroundVector = styled("img")(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  width: 325,
+  maxWidth: "45%",
+  height: "auto",
+  pointerEvents: "none",
+  zIndex: -99,
+  transform: "translate(60%, -15%)",
+  [theme.breakpoints.down("md")]: {
+    width: 100,
+    maxWidth: "55%",
+    transform: "none",
+  },
+  [theme.breakpoints.down("md")]: {
+    width: "200px",
+    top: "0px",
+    right: "100px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    display: "none",
+  },
+}))
+
+const BackgroundVectorMobile = styled("img")(({ theme }) => ({
+  position: "absolute",
+  top: -25,
+  right: 10,
+  width: "auto",
+  height: "auto",
+  pointerEvents: "none",
+  zIndex: -99,
+  display: "none",
+  [theme.breakpoints.down("sm")]: {
+    display: "block",
+  },
+}))
+
+const BannerForeground = styled.div({
+  position: "relative",
+  zIndex: 1,
+})
+
+const BackgroundCircles = styled("img")(({ theme }) => ({
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  width: 800,
+  height: "auto",
+  pointerEvents: "none",
+  zIndex: 0,
+  transform: "translate(-75%, 57%)",
+  [theme.breakpoints.down("md")]: {
+    width: 320,
+  },
+}))
+
+const BannerTitle = styled("h1")(({ theme }) => ({
+  color: theme.custom.colors.lightRed,
+  ...theme.typography.h1,
+  margin: 0,
+  [theme.breakpoints.down("md")]: {
+    ...theme.typography.h2,
+  },
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.h3,
+    marginTop: "8px",
+  },
+}))
+
+const BannerDescription = styled("p")(({ theme }) => ({
+  color: theme.custom.colors.white,
+  ...theme.typography.h3,
+  margin: 0,
+  [theme.breakpoints.down("md")]: {
+    ...theme.typography.h2,
+  },
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.h5,
+    marginTop: "8px",
+  },
+}))
+
+const BannerContent = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}))
+
+const LeftGrid = styled(Grid2)({
+  alignItems: "center",
+  display: "flex",
+})
+
+const ContentContainer = styled(Container)(({ theme }) => ({
+  position: "relative",
+  [theme.breakpoints.down("md")]: {
+    paddingLeft: "24px",
+    paddingRight: "24px",
+  },
+}))
+
+const LearningResourceCard = styled(ResourceCard)(({ theme }) => ({
+  marginBottom: "32px",
+  [theme.breakpoints.down("sm")]: {
+    marginBottom: 0,
+    gap: "16px",
+  },
+}))
+
+const PodcastsSection = styled.div(({ theme }) => ({
+  padding: "48px 0 64px",
+  backgroundColor: theme.custom.colors.white,
+  [theme.breakpoints.down("md")]: {
+    padding: "32px 0 40px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: "24px 0 40px",
+  },
+}))
+
+const BelowMdOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.up("md")]: {
+    display: "none",
+  },
+}))
+
+const AboveMdOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}))
+
+const MobilePodcastList = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px",
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("sm")]: {
+    gap: "16px",
+  },
+}))
+
+const PodcastsGrid = styled.div(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(5, 1fr)",
+  gap: "24px",
+  [theme.breakpoints.down("lg")]: {
+    gridTemplateColumns: "repeat(4, 1fr)",
+  },
+  [theme.breakpoints.down("md")]: {
+    gridTemplateColumns: "repeat(4, 1fr)",
+    gap: "16px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "12px",
+  },
+}))
+
+interface PodcastPageTemplateProps {
+  children?: React.ReactNode
+  episodes: PodcastEpisodeResource[]
+  podcasts: LearningResource[]
+}
+
+const PodcastPageTemplate: React.FC<PodcastPageTemplateProps> = ({
+  episodes,
+  podcasts,
+}) => {
+  return (
+    <>
+      <StyledBannerBackground
+        backgroundUrl={DEFAULT_BACKGROUND_IMAGE_URL}
+        backgroundDim={50}
+      >
+        <BannerForeground>
+          <ContentContainer>
+            <BackgroundVector
+              src="/images/Vector.svg"
+              alt=""
+              aria-hidden="true"
+            />
+            <BackgroundVectorMobile
+              src="/images/rectangle_small.svg"
+              alt=""
+              aria-hidden="true"
+            />
+            <BackgroundCircles
+              src="/images/circles.svg"
+              alt=""
+              aria-hidden="true"
+            />
+            <Breadcrumbs
+              variant="dark"
+              ancestors={[{ href: HOME_URL, label: "Home" }]}
+              current="podcasts"
+            />
+
+            <BannerContent>
+              <Grid2
+                container
+                spacing={{ xs: 2, sm: 2, md: 20 }}
+                style={{ width: "100%" }}
+              >
+                <LeftGrid size={{ xs: 12, sm: 6, md: 7 }}>
+                  <Stack>
+                    <BannerTitle>MIT Podcasts</BannerTitle>
+
+                    <BannerDescription>
+                      for learners, thinkers, and innovators.
+                    </BannerDescription>
+
+                    <Stack
+                      flexDirection="row"
+                      alignItems="end"
+                      sx={{
+                        flexGrow: 0,
+                        width: "100%",
+                        flexShrink: 1,
+                      }}
+                    >
+                      <SubscriptionButtonContainer>
+                        <PodcastSubscribePopover
+                          buttonLabel="Subscribe to new episodes"
+                          buttonIcon={<RiMailLine size={20} />}
+                        />
+                      </SubscriptionButtonContainer>
+                    </Stack>
+                  </Stack>
+                </LeftGrid>
+                <Grid2
+                  size={{ xs: 12, sm: 6, md: 5 }}
+                  style={{ display: "flex", alignSelf: "center" }}
+                >
+                  <RecentEpisodesPanel episodes={episodes} />
+                </Grid2>
+              </Grid2>
+            </BannerContent>
+          </ContentContainer>
+        </BannerForeground>
+      </StyledBannerBackground>
+
+      {podcasts.length > 0 ? (
+        <PodcastsSection>
+          <BelowMdOnly>
+            <MobilePodcastList>
+              {podcasts.map((resource) => (
+                <LearningResourceCard
+                  key={resource.id}
+                  resource={resource}
+                  footerLabel={
+                    resource.resource_type === ResourceTypeEnum.Podcast
+                      ? `${resource.podcast?.episode_count} Episodes`
+                      : undefined
+                  }
+                  parentHeadingEl="h4"
+                  list
+                />
+              ))}
+            </MobilePodcastList>
+          </BelowMdOnly>
+          <AboveMdOnly>
+            <Container>
+              <PodcastsGrid>
+                {podcasts.map((resource) => (
+                  <LearningResourceCard
+                    key={resource.id}
+                    resource={resource}
+                    imageHeight={223}
+                    footerLabel={
+                      resource.resource_type === ResourceTypeEnum.Podcast
+                        ? `${resource.podcast?.episode_count} Episodes`
+                        : undefined
+                    }
+                    parentHeadingEl="h4"
+                    size="compact"
+                  />
+                ))}
+              </PodcastsGrid>
+            </Container>
+          </AboveMdOnly>
+        </PodcastsSection>
+      ) : null}
+    </>
+  )
+}
+
+export default PodcastPageTemplate
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
new file mode 100644
index 0000000000..152e329ef8
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx
@@ -0,0 +1,545 @@
+"use client"
+
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+} from "react"
+import { styled, Typography, LoadingSpinner } from "ol-components"
+import {
+  RiPlayCircleFill,
+  RiPauseCircleFill,
+  RiPlayCircleLine,
+  RiPauseCircleLine,
+  RiReplay10Line,
+  RiForward30Line,
+  RiCloseLine,
+} from "@remixicon/react"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type PodcastTrack = {
+  audioUrl: string
+  title: string
+  podcastName: string
+}
+
+export type PodcastPlayerHandle = {
+  togglePlayPause: () => Promise<void>
+}
+
+type PodcastPlayerProps = {
+  track: PodcastTrack
+  onClose: () => void
+  onPlayStateChange?: (isPlaying: boolean) => void
+}
+
+// ─── Styled components ────────────────────────────────────────────────────────
+
+const PlayerBar = styled.div(({ theme }) => ({
+  position: "fixed",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: theme.zIndex.appBar + 10,
+  display: "flex",
+  alignItems: "center",
+  gap: "24px",
+  padding: "16px 32px",
+  background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+  borderTop: `2px solid ${theme.custom.colors.mitRed}`,
+  boxShadow: "0 -4px 16px rgba(0,0,0,0.12)",
+  [theme.breakpoints.down("sm")]: {
+    display: "none",
+  },
+}))
+
+// ─── Mobile card styles ───────────────────────────────────────────────────────
+
+const MobileCard = styled.div(({ theme }) => ({
+  position: "fixed",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: theme.zIndex.appBar + 10,
+  display: "none",
+  flexDirection: "column",
+  gap: "16px",
+  padding: "24px",
+  background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+  borderTop: `2px solid ${theme.custom.colors.mitRed}`,
+  borderRadius: "12px 12px 0 0",
+  boxShadow: "0 -4px 24px rgba(0,0,0,0.15)",
+  [theme.breakpoints.down("sm")]: {
+    display: "flex",
+  },
+}))
+
+const MobileTopRow = styled.div({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "12px",
+})
+
+const MobileTitleArea = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+  flex: 1,
+  minWidth: 0,
+})
+
+const MobileControls = styled.div({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "32px",
+})
+
+const MobileSkipButton = styled.button(({ theme }) => ({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: "8px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "2px",
+  color: theme.custom.colors.silverGray,
+  "&:hover": { color: theme.custom.colors.mitRed },
+}))
+
+const MobilePlayPauseButton = styled.button(({ theme }) => ({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  display: "flex",
+  alignItems: "center",
+  color: theme.custom.colors.mitRed,
+  "&:hover": { opacity: 0.8 },
+}))
+
+const MobileProgressRow = styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+})
+
+const TrackInfo = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0,
+  width: 220,
+  flexShrink: 0,
+})
+
+const Divider = styled.div(({ theme }) => ({
+  width: "1px",
+  height: "40px",
+  backgroundColor: theme.custom.colors.lightGray2,
+  flexShrink: 0,
+}))
+
+const Controls = styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  flexShrink: 0,
+})
+
+const IconButton = styled.button(({ theme }) => ({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  display: "flex",
+  alignItems: "center",
+  color: theme.custom.colors.silverGray,
+  "&:hover": { color: theme.custom.colors.mitRed },
+}))
+
+const PlayPauseButton = styled.button(({ theme }) => ({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  display: "flex",
+  alignItems: "center",
+  color: theme.custom.colors.mitRed,
+  "&:hover": { opacity: 0.8 },
+}))
+
+const TimeLabel = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.darkGray2,
+  whiteSpace: "nowrap",
+  flexShrink: 0,
+  minWidth: "38px",
+  textAlign: "center",
+}))
+
+const TrackTitle = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.black,
+}))
+
+const ProgressWrapper = styled.div({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  minWidth: 0,
+})
+
+const ProgressTrack = styled.div(({ theme }) => ({
+  flex: 1,
+  height: "6px",
+  borderRadius: "3px",
+  backgroundColor: theme.custom.colors.lightGray2,
+  position: "relative",
+  cursor: "pointer",
+  "&:hover .thumb": { opacity: 1 },
+}))
+
+const ProgressFill = styled.div<{ percent: number }>(({ theme, percent }) => ({
+  height: "100%",
+  borderRadius: "3px",
+  width: `${percent}%`,
+  backgroundColor: theme.custom.colors.mitRed,
+  position: "relative",
+}))
+
+const SpeedButton = styled.button(({ theme }) => ({
+  background: "white",
+  border: `1px solid ${theme.custom.colors.silverGrayLight}`,
+  backgroundColor: theme.custom.colors.lightGray1,
+  borderRadius: "4px",
+  padding: "2px 8px",
+  cursor: "pointer",
+  ...theme.typography.body3,
+  color: theme.custom.colors.darkGray2,
+  flexShrink: 0,
+  "&:hover": {
+    borderColor: theme.custom.colors.mitRed,
+    color: theme.custom.colors.mitRed,
+  },
+}))
+
+const CloseButton = styled.button(({ theme }) => ({
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: 0,
+  display: "flex",
+  alignItems: "center",
+  color: theme.custom.colors.darkGray2,
+  marginLeft: "auto",
+  flexShrink: 0,
+  "&:hover": { color: theme.custom.colors.mitRed },
+}))
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const SPEED_OPTIONS = [0.75, 1, 1.25, 1.5, 2]
+
+const formatTime = (seconds: number): string => {
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const PodcastPlayer = forwardRef<PodcastPlayerHandle, PodcastPlayerProps>(
+  ({ track, onClose, onPlayStateChange }, ref) => {
+    const audioRef = useRef<HTMLAudioElement>(null)
+    const [isPlaying, setIsPlaying] = useState(false)
+    const [isBuffering, setIsBuffering] = useState(true)
+    const [currentTime, setCurrentTime] = useState(0)
+    const [duration, setDuration] = useState(0)
+    const [speedIndex, setSpeedIndex] = useState(1) // default 1x
+
+    // Auto-play when a new track is loaded
+    useEffect(() => {
+      setCurrentTime(0)
+      setIsPlaying(false)
+      setIsBuffering(true)
+      const audio = audioRef.current
+      if (!audio) return
+      audio.load()
+      audio
+        .play()
+        .then(() => setIsPlaying(true))
+        .catch(() => {})
+    }, [track.audioUrl])
+
+    const handlePlayPause = async () => {
+      const audio = audioRef.current
+      if (!audio) return
+      if (isPlaying) {
+        audio.pause()
+        setIsPlaying(false)
+      } else {
+        try {
+          await audio.play()
+          setIsPlaying(true)
+        } catch {
+          setIsPlaying(false)
+        }
+      }
+    }
+
+    useImperativeHandle(ref, () => ({
+      togglePlayPause: handlePlayPause,
+    }))
+
+    useEffect(() => {
+      onPlayStateChange?.(isPlaying)
+    }, [isPlaying, onPlayStateChange])
+
+    const handleSkip = (seconds: number) => {
+      const audio = audioRef.current
+      if (!audio) return
+      audio.currentTime = Math.max(
+        0,
+        Math.min(audio.currentTime + seconds, duration),
+      )
+    }
+
+    const handleSpeedCycle = () => {
+      const nextIndex = (speedIndex + 1) % SPEED_OPTIONS.length
+      setSpeedIndex(nextIndex)
+      if (audioRef.current) {
+        audioRef.current.playbackRate = SPEED_OPTIONS[nextIndex]
+      }
+    }
+
+    const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      const audio = audioRef.current
+      if (!audio || !duration) return
+      const rect = e.currentTarget.getBoundingClientRect()
+      const ratio = (e.clientX - rect.left) / rect.width
+      audio.currentTime = ratio * duration
+    }
+
+    const percent = duration ? (currentTime / duration) * 100 : 0
+    return (
+      <>
+        {/* Shared audio element */}
+        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+        <audio
+          ref={audioRef}
+          src={track.audioUrl}
+          onWaiting={() => setIsBuffering(true)}
+          onCanPlay={() => setIsBuffering(false)}
+          onError={() => {
+            setIsBuffering(false)
+            setIsPlaying(false)
+          }}
+          onTimeUpdate={() =>
+            setCurrentTime(audioRef.current?.currentTime ?? 0)
+          }
+          onLoadedMetadata={() => setDuration(audioRef.current?.duration ?? 0)}
+          onEnded={() => setIsPlaying(false)}
+        />
+
+        {/* ── Desktop player bar (hidden on mobile) ── */}
+        <PlayerBar>
+          {/* Track info */}
+          <TrackInfo>
+            <Typography variant="body3" sx={{ color: "text.secondary" }}>
+              {track.podcastName}
+            </Typography>
+            <TrackTitle
+              variant="subtitle2"
+              sx={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {track.title}
+            </TrackTitle>
+          </TrackInfo>
+
+          <Divider />
+
+          {/* Controls */}
+          <Controls>
+            <IconButton
+              onClick={() => handleSkip(-10)}
+              aria-label="Rewind 10 seconds"
+              title="Rewind 10s"
+            >
+              <RiReplay10Line size={24} />
+            </IconButton>
+
+            <PlayPauseButton
+              onClick={handlePlayPause}
+              aria-label={
+                isBuffering ? "Loading" : isPlaying ? "Pause" : "Play"
+              }
+              disabled={isBuffering}
+            >
+              {isBuffering ? (
+                <LoadingSpinner loading size={40} color="inherit" />
+              ) : isPlaying ? (
+                <RiPauseCircleLine size={40} />
+              ) : (
+                <RiPlayCircleLine size={40} />
+              )}
+            </PlayPauseButton>
+
+            <IconButton
+              onClick={() => handleSkip(30)}
+              aria-label="Forward 30 seconds"
+              title="Forward 30s"
+            >
+              <RiForward30Line size={24} />
+            </IconButton>
+          </Controls>
+
+          {/* Progress */}
+          <ProgressWrapper>
+            <TimeLabel variant="body3">{formatTime(currentTime)}</TimeLabel>
+            <ProgressTrack
+              onClick={handleProgressClick}
+              role="slider"
+              aria-label="Seek"
+              aria-valuemin={0}
+              aria-valuemax={duration}
+              aria-valuenow={currentTime}
+              tabIndex={0}
+              onKeyDown={(event) => {
+                if (event.key === "ArrowLeft") {
+                  event.preventDefault()
+                  handleSkip(-5)
+                } else if (event.key === "ArrowRight") {
+                  event.preventDefault()
+                  handleSkip(5)
+                } else if (
+                  event.key === "ArrowUp" ||
+                  event.key === "ArrowDown"
+                ) {
+                  event.preventDefault()
+                }
+              }}
+            >
+              <ProgressFill percent={percent} />
+            </ProgressTrack>
+            <TimeLabel variant="body3">{formatTime(duration)}</TimeLabel>
+          </ProgressWrapper>
+
+          {/* Speed */}
+          <SpeedButton onClick={handleSpeedCycle} aria-label="Playback speed">
+            {SPEED_OPTIONS[speedIndex]}x
+          </SpeedButton>
+
+          {/* Close */}
+          <CloseButton onClick={onClose} aria-label="Close player">
+            <RiCloseLine size={24} />
+          </CloseButton>
+        </PlayerBar>
+
+        {/* ── Mobile bottom-sheet card (hidden on desktop) ── */}
+        <MobileCard>
+          {/* Top row: title info + close */}
+          <MobileTopRow>
+            <MobileTitleArea>
+              <Typography variant="body3" sx={{ color: "text.secondary" }}>
+                {track.podcastName}
+              </Typography>
+              <TrackTitle
+                variant="subtitle2"
+                sx={{
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                }}
+              >
+                {track.title}
+              </TrackTitle>
+            </MobileTitleArea>
+            <CloseButton onClick={onClose} aria-label="Close player">
+              <RiCloseLine size={24} />
+            </CloseButton>
+          </MobileTopRow>
+
+          {/* Controls: skip back | play/pause | skip forward */}
+          <MobileControls>
+            <MobileSkipButton
+              onClick={() => handleSkip(-10)}
+              aria-label="Rewind 10 seconds"
+            >
+              <RiReplay10Line size={32} />
+            </MobileSkipButton>
+
+            <MobilePlayPauseButton
+              onClick={handlePlayPause}
+              aria-label={
+                isBuffering ? "Loading" : isPlaying ? "Pause" : "Play"
+              }
+              disabled={isBuffering}
+            >
+              {isBuffering ? (
+                <LoadingSpinner loading size={56} color="inherit" />
+              ) : isPlaying ? (
+                <RiPauseCircleFill size={56} />
+              ) : (
+                <RiPlayCircleFill size={56} />
+              )}
+            </MobilePlayPauseButton>
+
+            <MobileSkipButton
+              onClick={() => handleSkip(30)}
+              aria-label="Forward 30 seconds"
+            >
+              <RiForward30Line size={32} />
+            </MobileSkipButton>
+          </MobileControls>
+
+          {/* Progress row: time | track | time | speed */}
+          <MobileProgressRow>
+            <TimeLabel variant="body3">{formatTime(currentTime)}</TimeLabel>
+            <ProgressTrack
+              onClick={handleProgressClick}
+              role="slider"
+              aria-label="Seek"
+              aria-valuemin={0}
+              aria-valuemax={duration}
+              aria-valuenow={currentTime}
+              tabIndex={0}
+              onKeyDown={(event) => {
+                if (event.key === "ArrowLeft") {
+                  event.preventDefault()
+                  handleSkip(-5)
+                } else if (event.key === "ArrowRight") {
+                  event.preventDefault()
+                  handleSkip(5)
+                } else if (
+                  event.key === "ArrowUp" ||
+                  event.key === "ArrowDown"
+                ) {
+                  event.preventDefault()
+                }
+              }}
+              style={{ flex: 1 }}
+            >
+              <ProgressFill percent={percent} />
+            </ProgressTrack>
+            <TimeLabel variant="body3">{formatTime(duration)}</TimeLabel>
+            <SpeedButton onClick={handleSpeedCycle} aria-label="Playback speed">
+              {SPEED_OPTIONS[speedIndex]}x
+            </SpeedButton>
+          </MobileProgressRow>
+        </MobileCard>
+      </>
+    )
+  },
+)
+
+export default PodcastPlayer
diff --git a/frontends/main/src/app-pages/PodcastPage/PodcastSubscribePopover.tsx b/frontends/main/src/app-pages/PodcastPage/PodcastSubscribePopover.tsx
new file mode 100644
index 0000000000..30f0baea9e
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/PodcastSubscribePopover.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import React, { useRef, useState } from "react"
+import { styled, Typography } from "ol-components"
+import { RiPlayCircleFill, RiRssLine } from "@remixicon/react"
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const SubscribeButton = styled("button")(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "12px 24px",
+  borderRadius: "4px",
+  border: "none",
+  cursor: "pointer",
+  backgroundColor: theme.custom.colors.mitRed,
+  color: theme.custom.colors.white,
+  ...theme.typography.button,
+  boxShadow:
+    "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)",
+  "&:hover": {
+    backgroundColor: theme.custom.colors.darkRed,
+    boxShadow: "none",
+  },
+  minWidth: "130px",
+}))
+
+const Popover = styled.div(({ theme }) => ({
+  position: "absolute",
+  top: "calc(100% + 2px)",
+  left: 0,
+  zIndex: theme.zIndex.modal,
+  backgroundColor: theme.custom.colors.white,
+  borderBottomLeftRadius: "8px",
+  borderBottomRightRadius: "8px",
+  padding: "12px 16px",
+  boxShadow: "0px 4px 12px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.10)",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "row",
+}))
+
+const PopoverOption = styled("a")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "8px",
+  textDecoration: "none",
+  color: theme.custom.colors.darkGray2,
+  ...theme.typography.subtitle2,
+  "&:hover": {
+    backgroundColor: theme.custom.colors.lightGray1,
+  },
+  cursor: "pointer",
+  flex: 1,
+}))
+
+const IconCircle = styled.div<{ bgColor: string }>(({ bgColor }) => ({
+  width: 40,
+  height: 40,
+  borderRadius: "50%",
+  backgroundColor: bgColor,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+}))
+
+const Wrapper = styled.div({
+  position: "relative",
+  display: "inline-block",
+})
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type PodcastSubscribePopoverProps = {
+  podcastUrl?: string
+  rssUrl?: string
+  buttonLabel?: string
+  buttonIcon?: React.ReactNode
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const PodcastSubscribePopover: React.FC<PodcastSubscribePopoverProps> = ({
+  podcastUrl = "http://example.com/podcast",
+  rssUrl = "http://example.com/rss",
+  buttonLabel = "Subscribe to new episodes",
+  buttonIcon,
+}) => {
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  // Close popover when clicking outside
+  React.useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handler)
+    return () => document.removeEventListener("mousedown", handler)
+  }, [open])
+
+  return (
+    <Wrapper ref={wrapperRef}>
+      <SubscribeButton onClick={() => setOpen((prev) => !prev)}>
+        {buttonIcon}
+        {buttonLabel}
+      </SubscribeButton>
+
+      {open && (
+        <Popover role="dialog" aria-label="Subscribe options">
+          <PopoverOption
+            href={podcastUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setOpen(false)}
+            style={{ marginRight: "32px" }}
+          >
+            <IconCircle bgColor="#CC0000">
+              <RiPlayCircleFill size={22} color="white" />
+            </IconCircle>
+            <Typography variant="subtitle2">Podcasts</Typography>
+          </PopoverOption>
+
+          <PopoverOption
+            href={rssUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setOpen(false)}
+            style={{ marginRight: "5px" }}
+          >
+            <IconCircle bgColor="#F7931E">
+              <RiRssLine size={22} color="white" />
+            </IconCircle>
+            <Typography variant="subtitle2">RSS</Typography>
+          </PopoverOption>
+        </Popover>
+      )}
+    </Wrapper>
+  )
+}
+
+export default PodcastSubscribePopover
diff --git a/frontends/main/src/app-pages/PodcastPage/RecentEpisodesPanel.tsx b/frontends/main/src/app-pages/PodcastPage/RecentEpisodesPanel.tsx
new file mode 100644
index 0000000000..3b6e7ae954
--- /dev/null
+++ b/frontends/main/src/app-pages/PodcastPage/RecentEpisodesPanel.tsx
@@ -0,0 +1,198 @@
+import React, { useRef, useState } from "react"
+import { styled, Typography } from "ol-components"
+import { PodcastEpisodeResource } from "api"
+import { RiMicLine, RiPlayCircleFill } from "@remixicon/react"
+import PodcastPlayer, {
+  PodcastPlayerHandle,
+  PodcastTrack,
+} from "./PodcastPlayer"
+
+const EpisodesCard = styled.div(({ theme }) => ({
+  borderRadius: "12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px",
+  width: "100%",
+  [theme.breakpoints.down("sm")]: {
+    padding: "16px 0",
+    marginTop: "16px",
+  },
+}))
+
+const EpisodesHeader = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  color: theme.custom.colors.white,
+}))
+
+const EpisodeRow = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: theme.custom.colors.white,
+  borderRadius: "8px",
+  height: "115px",
+}))
+
+const EpisodeThumbnail = styled("img")({
+  width: "115px",
+  height: "115px",
+  borderTopLeftRadius: "4px",
+  borderBottomLeftRadius: "4px",
+  objectFit: "cover",
+  flexShrink: 0,
+})
+
+const EpisodeInfo = styled.div({
+  flex: 1,
+  minWidth: 0,
+  padding: "16px",
+})
+
+const EpisodePlayOffButton = styled.div(({ theme }) => ({
+  borderRadius: "100px",
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  background: theme.custom.colors.white,
+  padding: "4px 16px 4px 4px",
+  width: "70px",
+  alignItems: "center",
+  display: "flex",
+  cursor: "pointer",
+}))
+
+const EpisodePlayOnButton = styled.div(({ theme }) => ({
+  borderRadius: "100px",
+  border: `1px solid ${theme.custom.colors.mitRed}`,
+  background: theme.custom.colors.mitRed,
+  padding: "4px 16px 4px 4px",
+  width: "70px",
+  alignItems: "center",
+  display: "flex",
+  cursor: "pointer",
+}))
+
+const EpisodeChannelName = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.mitRed,
+  marginBottom: "4px",
+  ...theme.typography.body3,
+}))
+
+const EpisodeTitle = styled(Typography)(({ theme }) => ({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  color: theme.custom.colors.darkGray2,
+  marginBottom: "8px",
+  ...theme.typography.body2,
+  [theme.breakpoints.down("sm")]: {
+    ...theme.typography.body3,
+  },
+}))
+
+const PlayButton = styled("button", {
+  shouldForwardProp: (prop) => prop !== "isplaying",
+})<{ isplaying?: string }>(({ theme, isplaying }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  flexShrink: 0,
+  textDecoration: "none",
+  ...theme.typography.body3,
+  color:
+    isplaying === "true"
+      ? theme.custom.colors.white
+      : theme.custom.colors.mitRed,
+  background: "none",
+  border: "none",
+  padding: 0,
+  cursor: "pointer",
+  "&:hover": {
+    opacity: 0.8,
+  },
+}))
+
+interface RecentEpisodesPanelProps {
+  episodes: PodcastEpisodeResource[]
+}
+
+const RecentEpisodesPanel: React.FC<RecentEpisodesPanelProps> = ({
+  episodes,
+}) => {
+  const [activeTrack, setActiveTrack] = useState<PodcastTrack | null>(null)
+  const [isActuallyPlaying, setIsActuallyPlaying] = useState(false)
+  const playerRef = useRef<PodcastPlayerHandle>(null)
+
+  return (
+    <>
+      <EpisodesCard>
+        <EpisodesHeader>
+          <RiMicLine size={20} />
+          <Typography variant="subtitle2">RECENT EPISODES</Typography>
+        </EpisodesHeader>
+        {episodes.map((episode) => (
+          <EpisodeRow key={episode.id}>
+            {episode.image?.url ? (
+              <EpisodeThumbnail
+                src={episode.image.url}
+                alt={episode.image.alt ?? episode.title}
+              />
+            ) : null}
+            <EpisodeInfo>
+              <EpisodeChannelName>{"Curiosity Unbounded"}</EpisodeChannelName>
+              <EpisodeTitle>{episode.title}</EpisodeTitle>
+              {episode.podcast_episode?.audio_url
+                ? (() => {
+                    const isPlaying =
+                      activeTrack?.audioUrl ===
+                        episode.podcast_episode.audio_url && isActuallyPlaying
+                    const ButtonWrapper = isPlaying
+                      ? EpisodePlayOnButton
+                      : EpisodePlayOffButton
+                    return (
+                      <ButtonWrapper>
+                        <PlayButton
+                          isplaying={isPlaying ? "true" : undefined}
+                          onClick={() => {
+                            const audioUrl = episode.podcast_episode.audio_url!
+                            if (activeTrack?.audioUrl === audioUrl) {
+                              playerRef.current?.togglePlayPause()
+                            } else {
+                              setActiveTrack({
+                                audioUrl,
+                                title: episode.title,
+                                podcastName:
+                                  episode.offered_by?.name ??
+                                  "Me, Myself, and AI",
+                              })
+                            }
+                          }}
+                        >
+                          <RiPlayCircleFill size={24} />
+                          Play
+                        </PlayButton>
+                      </ButtonWrapper>
+                    )
+                  })()
+                : null}
+            </EpisodeInfo>
+          </EpisodeRow>
+        ))}
+      </EpisodesCard>
+      {activeTrack ? (
+        <PodcastPlayer
+          ref={playerRef}
+          track={activeTrack}
+          onPlayStateChange={setIsActuallyPlaying}
+          onClose={() => {
+            setActiveTrack(null)
+            setIsActuallyPlaying(false)
+          }}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default RecentEpisodesPanel
diff --git a/frontends/main/src/app/podcast/page.tsx b/frontends/main/src/app/podcast/page.tsx
new file mode 100644
index 0000000000..a815b71d29
--- /dev/null
+++ b/frontends/main/src/app/podcast/page.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+import PodcastPage from "@/app-pages/PodcastPage/PodcastPage"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "MIT Learn | Podcast",
+  robots: "noindex, nofollow",
+})
+
+const Page: React.FC<PageProps<"/podcast">> = () => {
+  return <PodcastPage />
+}
+
+export default Page
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
index d55eaa2664..8982c9ef01 100644
--- a/frontends/main/src/common/urls.ts
+++ b/frontends/main/src/common/urls.ts
@@ -48,6 +48,7 @@ export const articlesEditView = (id: number) =>
 
 export const DEPARTMENTS = "/departments/"
 export const TOPICS = "/topics/"
+export const PODCAST = "/podcast/"
 
 export const CHANNEL_VIEW = "/c/[channelType]/[name]" as const
 export const CHANNEL_EDIT = "/c/[channelType]/[name]/manage/" as const
diff --git a/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx b/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
index fa45036067..eeec520c52 100644
--- a/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
+++ b/frontends/main/src/page-components/ResourceCard/ResourceCard.tsx
@@ -81,6 +81,7 @@ type ResourceCardProps = Omit<
   "href" | "onAddToLearningPathClick" | "onAddToUserListClick"
 > & {
   headingLevel?: number
+  footerLabel?: string
   parentHeadingEl?: HeadingElement
 }
 
@@ -94,6 +95,7 @@ type ResourceCardProps = Omit<
 const ResourceCard: React.FC<ResourceCardProps> = ({
   resource,
   parentHeadingEl,
+  footerLabel,
   ...others
 }) => {
   const {
@@ -120,6 +122,7 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
         inLearningPath={inLearningPath}
         headingLevel={headingLevel}
         {...others}
+        footerLabel={footerLabel}
       />
       <SignupPopover anchorEl={anchorEl} onClose={handleClosePopover} />
     </>
diff --git a/frontends/main/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/main/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
index adc37e9731..7b7db6d4ab 100644
--- a/frontends/main/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
+++ b/frontends/main/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
@@ -40,12 +40,14 @@ type SearchSubscriptionToggleProps = {
   itemName: string
   searchParams: URLSearchParams
   sourceType: SourceTypeEnum
+  subscribeLabel?: string
 }
 
 const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
   itemName,
   searchParams,
   sourceType,
+  subscribeLabel = "Follow",
 }) => {
   const [buttonEl, setButtonEl] = useState<null | HTMLElement>(null)
 
@@ -95,7 +97,7 @@ const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
         startIcon={<RiMailLine />}
         onClick={onFollowClick}
       >
-        Follow
+        {subscribeLabel}
       </StyledButton>
       <FollowPopover
         searchParams={searchParams}
diff --git a/frontends/ol-components/src/components/BaseLearningResourceCard/BaseLearningResourceCard.tsx b/frontends/ol-components/src/components/BaseLearningResourceCard/BaseLearningResourceCard.tsx
index 0572a87d5f..03050c60e7 100644
--- a/frontends/ol-components/src/components/BaseLearningResourceCard/BaseLearningResourceCard.tsx
+++ b/frontends/ol-components/src/components/BaseLearningResourceCard/BaseLearningResourceCard.tsx
@@ -36,6 +36,7 @@ const Value = styled.span<{ size?: Size }>(({ theme, size }) => [
 const getImageDimensions = (size: Size, isMedia: boolean) => {
   const dimensions = {
     small: { width: 190, height: isMedia ? 190 : 120 },
+    compact: { width: 235, height: isMedia ? 235 : 170 },
     medium: { width: 298, height: isMedia ? 298 : 170 },
   }
   return dimensions[size]
@@ -91,6 +92,7 @@ interface BaseLearningResourceCardProps {
   // Display data
   imageSrc?: string
   imageAlt?: string
+  imageHeight?: number
   title?: string
   resourceType?: string
   coursePrice?: string | null
@@ -105,6 +107,7 @@ interface BaseLearningResourceCardProps {
   list?: boolean
   condensed?: boolean
   footerContent?: React.ReactNode
+  footerLabel?: string
   draggable?: boolean
   editMenu?: React.ReactNode | null
   parentCourseName?: string | null
@@ -280,6 +283,7 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
   headingLevel = 6,
   imageSrc,
   imageAlt = "",
+  imageHeight,
   title,
   resourceType,
   coursePrice,
@@ -294,6 +298,7 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
   list = false,
   condensed = false,
   footerContent,
+  footerLabel,
   draggable = false,
   editMenu = null,
   parentCourseName = null,
@@ -461,6 +466,8 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
         <ListCardCondensed.Footer>
           {footerContent ? (
             footerContent
+          ) : footerLabel ? (
+            footerLabel
           ) : startDate ? (
             <BorderSeparator>
               <div>
@@ -549,6 +556,8 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
         <ListCard.Footer>
           {footerContent ? (
             footerContent
+          ) : footerLabel ? (
+            footerLabel
           ) : startDate ? (
             <BorderSeparator>
               <div>
@@ -577,6 +586,7 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
           src={imageSrc}
           alt={imageAlt}
           {...getImageDimensions(size, isMedia)}
+          {...(imageHeight !== undefined ? { height: imageHeight } : {})}
         />
       )}
       <Card.Info>
@@ -627,7 +637,9 @@ const BaseLearningResourceCard: React.FC<BaseLearningResourceCardProps> = ({
         ))}
       </Card.Actions>
       <Card.Footer>
-        {startDate ? (
+        {footerLabel ? (
+          footerLabel
+        ) : startDate ? (
           <>
             {startLabel && <Label>{startLabel}</Label>}
             <Value size={size}>{startDate}</Value>
diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx
index f98a2d803f..2fd7cca6f6 100644
--- a/frontends/ol-components/src/components/Card/Card.tsx
+++ b/frontends/ol-components/src/components/Card/Card.tsx
@@ -15,7 +15,7 @@ import { Link } from "../Link/Link"
 import { default as NextImage, ImageProps as NextImageProps } from "next/image"
 import { truncateText } from "../TruncateText/TruncateText"
 
-export type Size = "small" | "medium"
+export type Size = "small" | "compact" | "medium"
 
 type LinkableProps = {
   href?: string
@@ -76,6 +76,7 @@ export const BaseContainer = styled.div<{ display?: CSSProperties["display"] }>(
 )
 const CONTAINER_WIDTHS: Record<Size, number> = {
   small: 192,
+  compact: 235,
   medium: 300,
 }
 const Container = styled(BaseContainer)<{ size?: Size }>(({ size }) => [
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
index 93fd4423d8..dc063dc289 100644
--- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
+++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
@@ -27,6 +27,7 @@ interface LearningResourceCardProps {
   className?: string
   size?: Size
   isMedia?: boolean
+  imageHeight?: number
   href?: string
   onAddToLearningPathClick?: ResourceIdCallback | null
   onAddToUserListClick?: ResourceIdCallback | null
@@ -34,6 +35,7 @@ interface LearningResourceCardProps {
   inLearningPath?: boolean
   onClick?: React.MouseEventHandler
   headingLevel?: number
+  footerLabel?: string
   list?: boolean
   condensed?: boolean
 }
@@ -44,6 +46,7 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
   className,
   size = "medium",
   isMedia = false,
+  imageHeight,
   href,
   onAddToLearningPathClick,
   onAddToUserListClick,
@@ -51,6 +54,7 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
   inUserList,
   onClick,
   headingLevel = 6,
+  footerLabel,
   list = false,
   condensed = false,
 }) => {
@@ -78,6 +82,7 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
         resource={resource}
         className={className}
         href={href}
+        footerLabel={footerLabel}
         onAddToLearningPathClick={onAddToLearningPathClick}
         onAddToUserListClick={onAddToUserListClick}
         inUserList={inUserList}
@@ -150,11 +155,13 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
       headingLevel={headingLevel}
       imageSrc={resource.image?.url || DEFAULT_RESOURCE_IMG}
       imageAlt={resource.image?.alt ?? ""}
+      imageHeight={imageHeight}
       title={resource.title}
       resourceType={readableType}
       coursePrice={prices.course.display}
       certificatePrice={prices.certificate.display}
       hasCertificate={resource.certification}
+      footerLabel={footerLabel}
       startLabel={startLabel}
       startDate={formattedDate}
       actions={actions}
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
index 10ec68b8b4..a900c4d338 100644
--- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
+++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
@@ -137,6 +137,7 @@ interface LearningResourceListCardProps {
   inUserList?: boolean
   inLearningPath?: boolean
   draggable?: boolean
+  footerLabel?: string
   onClick?: React.MouseEventHandler
   headingLevel?: number
 }
@@ -151,6 +152,7 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
   editMenu,
   inLearningPath,
   inUserList,
+  footerLabel,
   draggable,
   onClick,
   headingLevel = 6,
@@ -194,13 +196,16 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
     })
   }
 
-  const footerContent = (
-    <BorderSeparator>
-      <Count resource={resource} />
-      <StartDate resource={resource} />
-      <Format resource={resource} />
-    </BorderSeparator>
-  )
+  const footerContent =
+    resource.resource_type === ResourceTypeEnum.Podcast ? (
+      footerLabel
+    ) : (
+      <BorderSeparator>
+        <Count resource={resource} />
+        <StartDate resource={resource} />
+        <Format resource={resource} />
+      </BorderSeparator>
+    )
 
   return (
     <BaseLearningResourceCard