diff --git a/web/src/components/ContinueWatchingCard.test.tsx b/web/src/components/ContinueWatchingCard.test.tsx
index aa081c5b..c465245e 100644
--- a/web/src/components/ContinueWatchingCard.test.tsx
+++ b/web/src/components/ContinueWatchingCard.test.tsx
@@ -176,6 +176,8 @@ describe("ContinueWatchingCard", () => {
 
     expect(markup).toContain('href="/watch/ep-001"');
     expect(markup).toContain('href="/item/ep-001"');
+    expect(markup).toContain('href="/item/series-1"');
+    expect(markup).toContain('aria-label="Play Breaking Bad"');
     expect(markup).toContain("Breaking Bad");
     expect(markup).toContain("Season 1 Episode 1");
     expect(markup).toContain("Pilot");
@@ -183,6 +185,46 @@ describe("ContinueWatchingCard", () => {
     expect(markup).toContain("More actions");
   });
 
+  it("links the poster to the item page and reserves playback for the play button", () => {
+    const queryClient = new QueryClient();
+    const markup = renderToStaticMarkup(
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter>
+          <ContinueWatchingCard
+            sectionItem={{
+              content_id: "movie-001",
+              type: "movie",
+              title: "Apex",
+              year: 2024,
+              genres: [],
+              status: "matched",
+              rating_imdb: 6.5,
+              overview: "Movie overview",
+              item_source: "continue_watching",
+              position_seconds: 600,
+              duration_seconds: 7200,
+              progress_updated_at: "2026-03-07T00:00:00Z",
+              poster_url: "/movie-poster.jpg",
+              poster_thumbhash: "",
+              backdrop_url: "/movie-backdrop.jpg",
+              backdrop_thumbhash: "",
+              logo_url: "",
+            }}
+          />
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    // The poster link renders first and must navigate to the item page; the
+    // watch href is reserved for the explicit play button.
+    const posterLinkIndex = markup.indexOf('href="/item/movie-001"');
+    const playLinkIndex = markup.indexOf('href="/watch/movie-001"');
+    expect(posterLinkIndex).toBeGreaterThan(-1);
+    expect(playLinkIndex).toBeGreaterThan(-1);
+    expect(posterLinkIndex).toBeLessThan(playLinkIndex);
+    expect(markup).toContain('aria-label="Play Apex"');
+  });
+
   it("routes audiobook continue cards to the audiobook detail player", () => {
     const queryClient = new QueryClient();
     const markup = renderToStaticMarkup(
diff --git a/web/src/components/ContinueWatchingCard.tsx b/web/src/components/ContinueWatchingCard.tsx
index 02780505..3ab59c86 100644
--- a/web/src/components/ContinueWatchingCard.tsx
+++ b/web/src/components/ContinueWatchingCard.tsx
@@ -45,6 +45,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
             libraryId: props.libraryId,
           }),
           title: props.sectionItem.title,
+          seriesId: props.sectionItem.series_id,
           seriesTitle: props.sectionItem.series_title,
           seasonNumber: props.sectionItem.season_number,
           episodeNumber: props.sectionItem.episode_number,
@@ -65,6 +66,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
             libraryId: props.libraryId,
           }),
           title: props.detail.title,
+          seriesId: props.detail.series_id,
           seriesTitle: props.detail.series_title,
           seasonNumber: props.detail.season_number,
           episodeNumber: props.detail.episode_number,
@@ -105,7 +107,14 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
     card.durationSeconds > 0 ? (card.positionSeconds / card.durationSeconds) * 100 : 0;
   const hasPartialProgress = progressPercent > 0 && progressPercent < 100;
   const hasEpisodeMeta = card.seasonNumber != null && card.episodeNumber != null;
-  const heading = hasEpisodeMeta && card.seriesTitle ? card.seriesTitle : card.title;
+  const headingIsSeries = hasEpisodeMeta && !!card.seriesTitle;
+  const heading = headingIsSeries ? card.seriesTitle : card.title;
+  // The heading shows the series title for episodes, so it should navigate to
+  // the series page; everything else heads to the item's own page.
+  const headingHref =
+    headingIsSeries && card.seriesId
+      ? buildItemHref({ contentId: card.seriesId, libraryId: props.libraryId })
+      : card.itemHref;
   const episodeLabel = hasEpisodeMeta
     ? `Season ${card.seasonNumber} Episode ${card.episodeNumber}`
     : null;
@@ -195,18 +204,14 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
 
   return (
     <div className={`group/card ${containerWidth}`}>
-      <div className="relative">
-        <ViewTransitionLink
-          to={card.watchHref}
-          onClick={handleWatchClick}
-          className="group/play block"
-        >
+      <div className="group/media relative">
+        <ViewTransitionLink to={card.itemHref} className="block">
           <div className={`media-card-image relative ${imageAspect} overflow-hidden rounded-xl`}>
             {imageSrc ? (
               <img
                 src={imageSrc}
                 alt={heading}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover/play:scale-105"
+                className="h-full w-full object-cover transition-transform duration-300 group-hover/media:scale-105"
                 loading="lazy"
               />
             ) : (
@@ -223,12 +228,8 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
               />
             )}
 
-            {/* Play overlay */}
-            <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-150 group-hover/play:bg-black/30">
-              <div className="bg-primary text-primary-foreground flex h-11 w-11 items-center justify-center rounded-full opacity-0 shadow-lg transition-all duration-200 group-hover/play:scale-100 group-hover/play:opacity-100 group-focus-visible/play:opacity-100">
-                <Play className="ml-0.5 h-5 w-5" fill="currentColor" />
-              </div>
-            </div>
+            {/* Hover dim behind the play button */}
+            <div className="absolute inset-0 bg-black/0 transition-colors duration-150 pointer-fine:group-hover/media:bg-black/30" />
 
             {/* Progress bar */}
             {!isNextUp && progressPercent > 0 && (
@@ -244,6 +245,14 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
             )}
           </div>
         </ViewTransitionLink>
+        <ViewTransitionLink
+          to={card.watchHref}
+          onClick={handleWatchClick}
+          aria-label={`Play ${heading}`}
+          className="bg-primary text-primary-foreground absolute top-1/2 left-1/2 flex h-11 w-11 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full opacity-100 shadow-lg transition-all duration-200 pointer-fine:pointer-events-none pointer-fine:opacity-0 pointer-fine:group-hover/media:pointer-events-auto pointer-fine:group-hover/media:opacity-100 pointer-fine:focus-visible:pointer-events-auto pointer-fine:focus-visible:opacity-100"
+        >
+          <Play className="ml-0.5 h-5 w-5" fill="currentColor" />
+        </ViewTransitionLink>
         <MediaItemMenu
           contentId={
             "sectionItem" in props && props.sectionItem
@@ -264,8 +273,13 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
       </div>
 
       {/* Info */}
-      <ViewTransitionLink to={card.itemHref} className="block px-0.5 pt-2.5">
-        <div className="truncate text-[13px] font-semibold">{heading}</div>
+      <div className="px-0.5 pt-2.5">
+        <ViewTransitionLink
+          to={headingHref}
+          className="block truncate text-[13px] font-semibold hover:underline"
+        >
+          {heading}
+        </ViewTransitionLink>
         {episodeMeta && <div className="text-muted-foreground truncate text-xs">{episodeMeta}</div>}
         {premiereBadge && (
           <div className="mt-1">
@@ -279,7 +293,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
           </div>
         )}
         {timeLeftLabel && <div className="text-muted-foreground text-xs">{timeLeftLabel}</div>}
-      </ViewTransitionLink>
+      </div>
     </div>
   );
 }
diff --git a/web/src/components/SectionRow.test.tsx b/web/src/components/SectionRow.test.tsx
index 63778238..3380c4d3 100644
--- a/web/src/components/SectionRow.test.tsx
+++ b/web/src/components/SectionRow.test.tsx
@@ -57,6 +57,10 @@ vi.mock("@/hooks/useViewTransition", () => ({
   useViewTransitionNavigate: () => mockNavigate,
 }));
 
+vi.mock("@/playback/watchPlaybackContext", () => ({
+  useWatchPlaybackController: () => ({ startPlayback: () => {} }),
+}));
+
 describe("SectionRow", () => {
   beforeEach(() => {
     latestCarouselProps = undefined;