diff --git a/static/player/episodes/ui.ts b/static/player/episodes/ui.ts
index 46e920e2..bd97880f 100644
--- a/static/player/episodes/ui.ts
+++ b/static/player/episodes/ui.ts
@@ -36,21 +36,53 @@ const getEpisodeEls = () => {
   };
 };
 
-/** Highlights current episode in grid and list. Scrolls to episode into view. */
-export const updateEpisodeHighlight = (num: number): void => {
+/** Highlights current episode in grid and list. */
+export const updateEpisodeHighlight = (num: number, restoreFocus: boolean = false): void => {
   const { gridEls, listEls } = getEpisodeEls();
   // clear old highlights
   [...gridEls, ...listEls].forEach((el) => {
-    el.classList.remove("ring-2", "ring-accent", "bg-accent/20", "text-accent");
+    el.classList.remove("ring-1", "ring-accent", "bg-accent/15", "bg-accent/20", "text-accent");
+    el.removeAttribute("aria-current");
   });
 
   // apply new highlight
   const gridEl = state.elements.episodeGrid?.querySelector(`[data-episode-id="${num}"]`);
   const listEl = state.elements.episodeList?.querySelector(`[data-episode-id="${num}"]`);
-  gridEl?.classList.add("ring-2", "ring-accent");
-  listEl?.classList.add("ring-2", "ring-accent");
+  gridEl?.classList.add("bg-accent/15", "text-accent", "ring-1", "ring-accent");
+  listEl?.classList.add("bg-accent/20");
+  gridEl?.setAttribute("aria-current", "page");
+  listEl?.setAttribute("aria-current", "page");
   // scroll into view
-  (gridEl ?? listEl)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  const activeElement = gridEl ?? listEl;
+  activeElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+  if (restoreFocus && activeElement instanceof HTMLElement) {
+    activeElement.focus({ preventScroll: true });
+  }
+};
+
+const setNavigationLink = (selector: string, episode: number, visible: boolean): void => {
+  const anchor = document.querySelector(selector) as HTMLAnchorElement | null;
+  if (!anchor) {
+    return;
+  }
+  const url = new URL(anchor.href, window.location.href);
+  url.searchParams.set("ep", String(episode));
+  anchor.href = url.toString();
+  anchor.dataset.episodeId = String(episode);
+  anchor.classList.toggle("hidden", !visible);
+  anchor.classList.toggle("inline-flex", visible);
+  anchor.setAttribute("aria-hidden", visible ? "false" : "true");
+  anchor.tabIndex = visible ? 0 : -1;
+};
+
+/** Keeps the real Previous and Next links correct after an in-page transition. */
+export const updateEpisodeNavigation = (episode: number): void => {
+  setNavigationLink("[data-episode-prev]", Math.max(1, episode - 1), episode > 1);
+  setNavigationLink(
+    "[data-episode-next]",
+    state.episode.total > 0 ? Math.min(state.episode.total, episode + 1) : episode + 1,
+    state.episode.total === 0 || episode < state.episode.total,
+  );
 };
 
 /** Switches visible episode range in grid. Updates dropdown label and hides/shows episode cards. */