diff --git a/k-tv-frontend/app/(main)/library/components/breadcrumb-nav.tsx b/k-tv-frontend/app/(main)/library/components/breadcrumb-nav.tsx
new file mode 100644
index 0000000..8d60f8c
--- /dev/null
+++ b/k-tv-frontend/app/(main)/library/components/breadcrumb-nav.tsx
@@ -0,0 +1,41 @@
+interface Props {
+  series?: string;
+  season?: number;
+  onNavigate: (target: "root" | "series") => void;
+}
+
+export function BreadcrumbNav({ series, season, onNavigate }: Props) {
+  return (
+    <nav className="flex items-center gap-1 px-1 py-2 text-sm">
+      <button
+        type="button"
+        className="text-zinc-400 hover:text-zinc-100 transition-colors"
+        onClick={() => onNavigate("root")}
+      >
+        Library
+      </button>
+      {series && (
+        <>
+          <span className="text-zinc-600">›</span>
+          {season != null ? (
+            <button
+              type="button"
+              className="text-zinc-400 hover:text-zinc-100 transition-colors"
+              onClick={() => onNavigate("series")}
+            >
+              {series}
+            </button>
+          ) : (
+            <span className="text-zinc-100">{series}</span>
+          )}
+        </>
+      )}
+      {season != null && (
+        <>
+          <span className="text-zinc-600">›</span>
+          <span className="text-zinc-100">Season {season}</span>
+        </>
+      )}
+    </nav>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/library/components/season-tile.tsx b/k-tv-frontend/app/(main)/library/components/season-tile.tsx
new file mode 100644
index 0000000..bcd8872
--- /dev/null
+++ b/k-tv-frontend/app/(main)/library/components/season-tile.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Film } from "lucide-react";
+import type { SeasonSummary } from "@/lib/types";
+
+interface Props {
+  season: SeasonSummary;
+  selected: boolean;
+  onToggle: () => void;
+  onClick: () => void;
+}
+
+export function SeasonTile({ season, selected, onToggle, onClick }: Props) {
+  return (
+    <div className="group relative flex flex-col overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 transition-colors hover:border-zinc-600">
+      <button
+        type="button"
+        className="relative aspect-video w-full overflow-hidden bg-zinc-800"
+        onClick={onClick}
+      >
+        {season.thumbnail_url ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={season.thumbnail_url}
+            alt={`Season ${season.season_number}`}
+            className="h-full w-full object-cover transition-transform group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Film className="h-10 w-10 text-zinc-600" />
+          </div>
+        )}
+        {selected && (
+          <div className="absolute inset-0 bg-blue-600/30 ring-2 ring-inset ring-blue-500" />
+        )}
+      </button>
+
+      <div className="flex flex-col gap-1 p-2">
+        <button
+          type="button"
+          className="truncate text-left text-sm font-medium text-zinc-100 hover:text-white"
+          onClick={onClick}
+        >
+          Season {season.season_number}
+        </button>
+        <p className="text-xs text-zinc-500">{season.episode_count} episodes</p>
+      </div>
+
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onToggle(); }}
+        className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded border text-xs font-bold transition-opacity ${
+          selected
+            ? "border-blue-500 bg-blue-600 text-white opacity-100"
+            : "border-zinc-600 bg-zinc-900/80 text-transparent opacity-0 group-hover:opacity-100"
+        }`}
+        aria-label={selected ? "Deselect" : "Select"}
+      >
+        ✓
+      </button>
+    </div>
+  );
+}
diff --git a/k-tv-frontend/app/(main)/library/components/show-tile.tsx b/k-tv-frontend/app/(main)/library/components/show-tile.tsx
new file mode 100644
index 0000000..dc2d32a
--- /dev/null
+++ b/k-tv-frontend/app/(main)/library/components/show-tile.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { Tv } from "lucide-react";
+import type { ShowSummary } from "@/lib/types";
+
+interface Props {
+  show: ShowSummary;
+  selected: boolean;
+  onToggle: () => void;
+  onClick: () => void;
+}
+
+export function ShowTile({ show, selected, onToggle, onClick }: Props) {
+  return (
+    <div className="group relative flex flex-col overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 transition-colors hover:border-zinc-600">
+      {/* Thumbnail area - clickable to drill in */}
+      <button
+        type="button"
+        className="relative aspect-video w-full overflow-hidden bg-zinc-800"
+        onClick={onClick}
+      >
+        {show.thumbnail_url ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={show.thumbnail_url}
+            alt={show.series_name}
+            className="h-full w-full object-cover transition-transform group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Tv className="h-10 w-10 text-zinc-600" />
+          </div>
+        )}
+        {/* Selection overlay */}
+        {selected && (
+          <div className="absolute inset-0 bg-blue-600/30 ring-2 ring-inset ring-blue-500" />
+        )}
+      </button>
+
+      {/* Info area */}
+      <div className="flex flex-col gap-1 p-2">
+        <button
+          type="button"
+          className="truncate text-left text-sm font-medium text-zinc-100 hover:text-white"
+          onClick={onClick}
+          title={show.series_name}
+        >
+          {show.series_name}
+        </button>
+        <p className="text-xs text-zinc-500">
+          {show.season_count} {show.season_count === 1 ? "season" : "seasons"} · {show.episode_count} eps
+        </p>
+        {show.genres.length > 0 && (
+          <p className="truncate text-xs text-zinc-600">
+            {show.genres.slice(0, 3).join(", ")}
+          </p>
+        )}
+      </div>
+
+      {/* Select checkbox */}
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onToggle(); }}
+        className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded border text-xs font-bold transition-opacity ${
+          selected
+            ? "border-blue-500 bg-blue-600 text-white opacity-100"
+            : "border-zinc-600 bg-zinc-900/80 text-transparent opacity-0 group-hover:opacity-100"
+        }`}
+        aria-label={selected ? "Deselect" : "Select"}
+      >
+        ✓
+      </button>
+    </div>
+  );
+}