diff --git a/apps/ai-hero/src/app/(content)/[post]/page.tsx b/apps/ai-hero/src/app/(content)/[post]/page.tsx
index 894bf5c02..ae26639c9 100644
--- a/apps/ai-hero/src/app/(content)/[post]/page.tsx
+++ b/apps/ai-hero/src/app/(content)/[post]/page.tsx
@@ -11,7 +11,10 @@ import Scrollycoding from '@/components/codehike/scrollycoding'
 import { PlayerContainerSkeleton } from '@/components/player-skeleton'
 import { PrimaryNewsletterCta } from '@/components/primary-newsletter-cta'
 import { Share } from '@/components/share'
+import Spinner from '@/components/spinner'
 import { courseBuilderAdapter } from '@/db'
+import type { List } from '@/lib/lists'
+import { getListForPost } from '@/lib/lists-query'
 import { type Post } from '@/lib/posts'
 import { getAllPosts, getPost } from '@/lib/posts-query'
 import { getPricingProps } from '@/lib/pricing-query'
@@ -25,7 +28,9 @@ import { compileMDX, MDXRemote } from 'next-mdx-remote/rsc'
 import remarkGfm from 'remark-gfm'
 
 import { Button } from '@coursebuilder/ui'
+import { VideoPlayerOverlayProvider } from '@coursebuilder/ui/hooks/use-video-player-overlay'
 
+import PostNextUpFromListPagination from '../_components/post-next-up-from-list-pagination'
 import { PostPlayer } from '../posts/_components/post-player'
 import { PostNewsletterCta } from '../posts/_components/post-video-subscribe-form'
 
@@ -141,6 +146,7 @@ export default async function PostPage(props: {
 	const searchParams = await props.searchParams
 	const params = await props.params
 	const post = await getPost(params.post)
+
 	const cookieStore = await cookies()
 	const ckSubscriber = cookieStore.has(CK_SUBSCRIBER_KEY)
 	const { allowPurchase, pricingDataLoader, product, commerceProps } =
@@ -156,6 +162,8 @@ export default async function PostPage(props: {
 		notFound()
 	}
 
+	const listLoader = getListForPost(post.id)
+
 	const squareGridPattern = generateGridPattern(
 		post.fields.title,
 		1000,
@@ -170,11 +178,10 @@ export default async function PostPage(props: {
 
 	return (
 		<main>
-			{hasVideo && <PlayerContainer post={post} />}
+			{hasVideo && <PlayerContainer listLoader={listLoader} post={post} />}
 			<div
 				className={cn('container relative max-w-screen-xl pb-16 sm:pb-24', {
 					'pt-16': !hasVideo,
-					// 'pb-24': ckSubscriber || hasVideo,
 				})}
 			>
 				<div
@@ -192,13 +199,7 @@ export default async function PostPage(props: {
 						aria-hidden="true"
 					/>
 				</div>
-				{/* <div className="absolute left-0 top-0 -z-10 h-[76px] w-full">
-          <img
-            src={squareGridPattern}
-            className="absolute left-0 top-0 h-[76px] w-full overflow-hidden object-cover object-top"
-          />
-          <div className="from-background via-background/80 to-background absolute left-0 top-0 z-10 h-full w-full bg-gradient-to-r" />
-        </div> */}
+
 				<div className="relative z-10 flex w-full items-center justify-between">
 					<Link
 						href="/posts"
@@ -217,6 +218,12 @@ export default async function PostPage(props: {
 						<PostTitle post={post} />
 						<Contributor className="flex [&_img]:w-8" />
 						<Post post={post} />
+						<React.Suspense fallback={<Spinner />}>
+							<PostNextUpFromListPagination
+								postId={post.id}
+								listLoader={listLoader}
+							/>
+						</React.Suspense>
 						<div className="mx-auto mt-10 flex w-full max-w-sm flex-col gap-1">
 							<strong className="text-lg font-semibold">Share</strong>
 							<Share
@@ -224,18 +231,6 @@ export default async function PostPage(props: {
 								title={post?.fields.title}
 							/>
 						</div>
-						{/* <aside className="relative col-span-3 col-start-10 flex h-full flex-col pt-24">
-							<div className="top-20 md:sticky">
-								<Contributor className="hidden md:flex" />
-								<div className="mt-5 flex w-full flex-col gap-1">
-									<strong className="text-lg font-semibold">Share</strong>
-									<Share
-										className="bg-background w-full"
-										title={post?.fields.title}
-									/>
-								</div>
-							</div>
-						</aside> */}
 					</article>
 				</div>
 			</div>
@@ -262,7 +257,13 @@ export default async function PostPage(props: {
 	)
 }
 
-async function PlayerContainer({ post }: { post: Post | null }) {
+async function PlayerContainer({
+	post,
+	listLoader,
+}: {
+	post: Post | null
+	listLoader: Promise<List | null>
+}) {
 	const displayOverlay = false
 
 	if (!post) {
@@ -276,21 +277,25 @@ async function PlayerContainer({ post }: { post: Post | null }) {
 	const ckSubscriber = cookieStore.has(CK_SUBSCRIBER_KEY)
 
 	return videoResource ? (
-		<Suspense
-			fallback={
-				<PlayerContainerSkeleton className="h-full max-h-[75vh] w-full bg-black" />
-			}
-		>
-			<section
-				aria-label="video"
-				className="mb-10 flex flex-col items-center justify-center border-b bg-black"
+		<VideoPlayerOverlayProvider>
+			<Suspense
+				fallback={
+					<PlayerContainerSkeleton className="h-full max-h-[75vh] w-full bg-black" />
+				}
 			>
-				<PostPlayer
-					className="aspect-video h-full max-h-[75vh] w-full overflow-hidden"
-					videoResource={videoResource}
-				/>
-				{!ckSubscriber && <PostNewsletterCta />}
-			</section>
-		</Suspense>
+				<section
+					aria-label="video"
+					className="mb-10 flex flex-col items-center justify-center border-b bg-black"
+				>
+					<PostPlayer
+						postId={post.id}
+						listLoader={listLoader}
+						className="aspect-video h-full max-h-[75vh] w-full overflow-hidden"
+						videoResource={videoResource}
+					/>
+					{!ckSubscriber && <PostNewsletterCta />}
+				</section>
+			</Suspense>
+		</VideoPlayerOverlayProvider>
 	) : resource ? null : null // spacer // <div className="pt-16" />
 }
diff --git a/apps/ai-hero/src/app/(content)/_components/post-next-up-from-list-pagination.tsx b/apps/ai-hero/src/app/(content)/_components/post-next-up-from-list-pagination.tsx
new file mode 100644
index 000000000..8b933f774
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/_components/post-next-up-from-list-pagination.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import Link from 'next/link'
+import { type List } from '@/lib/lists'
+import { getNextUpResourceFromList } from '@/utils/get-nextup-resource-from-list'
+import { ArrowRight, ChevronRight } from 'lucide-react'
+
+import { Button } from '@coursebuilder/ui'
+
+export default function PostNextUpFromListPagination({
+	listLoader,
+	postId,
+}: {
+	listLoader: Promise<List | null>
+	postId: string
+}) {
+	const list = React.use(listLoader)
+	const nextUp = list && getNextUpResourceFromList(list, postId)
+	return nextUp?.resource && nextUp?.resource?.fields?.state === 'published' ? (
+		<nav
+			className="mt-8 flex w-full flex-col items-center rounded bg-gray-950 px-5 py-10 text-center"
+			aria-label="List navigation"
+		>
+			<h2 className="fluid-2xl mb-3 font-semibold">Continue</h2>
+			<ul>
+				<li>
+					<Button
+						className="text-primary inline-flex items-center gap-2 text-lg lg:text-xl"
+						asChild
+						variant="link"
+					>
+						<Link href={`/${nextUp.resource.fields?.slug}`}>
+							{nextUp.resource.fields?.title} <ArrowRight className="w-4" />
+						</Link>
+					</Button>
+				</li>
+			</ul>
+		</nav>
+	) : null
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx b/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
index 799bd0e73..483ffc6df 100644
--- a/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
+++ b/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
@@ -26,7 +26,11 @@ export function CreateListForm() {
 	}
 
 	return (
-		<form onSubmit={handleSubmit} className="space-y-4">
+		<form
+			onSubmit={handleSubmit}
+			className="w-full max-w-md flex-shrink-0 space-y-4"
+		>
+			<h2 className="fluid-xl">Create New List</h2>
 			<div>
 				<Label htmlFor="title" className="mb-1 block text-sm font-medium">
 					Title
@@ -36,7 +40,7 @@ export function CreateListForm() {
 					id="title"
 					value={title}
 					onChange={(e) => setTitle(e.target.value)}
-					className="block w-full rounded-md border border-gray-300 px-3 py-2"
+					// className="block w-full rounded-md border border-gray-300 px-3 py-2"
 					required
 				/>
 			</div>
@@ -48,7 +52,7 @@ export function CreateListForm() {
 					id="description"
 					value={description}
 					onChange={(e) => setDescription(e.target.value)}
-					className="block w-full rounded-md border border-gray-300 px-3 py-2"
+					// className="block w-full rounded-md border border-gray-300 px-3 py-2"
 					rows={3}
 				/>
 			</div>
diff --git a/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx b/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
index e26244680..635721383 100644
--- a/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
+++ b/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
@@ -29,7 +29,7 @@ export function ListsTable({
 	return (
 		<>
 			{error && <Alert variant={'destructive'}>{error}</Alert>}
-			<Table>
+			<Table className="min-w-[600px] overflow-x-scroll">
 				<TableHeader>
 					<TableRow>
 						<TableHead>Title</TableHead>
@@ -49,12 +49,14 @@ export function ListsTable({
 											? `/lists/${list.fields.slug}/edit`
 											: `/lists/${list.fields.slug}`
 									}
-									className="text-primary hover:underline"
+									className="text-primary text-lg font-medium hover:underline"
 								>
 									{list.fields.title}
 								</Link>
 							</TableCell>
-							<TableCell>{list.fields.description}</TableCell>
+							<TableCell className="max-w-[90px] truncate">
+								{list.fields.description}
+							</TableCell>
 							<TableCell>{list.fields.type}</TableCell>
 							<TableCell>{list.resources?.length || 0}</TableCell>
 							<TableCell>
diff --git a/apps/ai-hero/src/app/(content)/lists/page.tsx b/apps/ai-hero/src/app/(content)/lists/page.tsx
index 6fa5c808d..600792b52 100644
--- a/apps/ai-hero/src/app/(content)/lists/page.tsx
+++ b/apps/ai-hero/src/app/(content)/lists/page.tsx
@@ -25,9 +25,11 @@ export default async function ListsPage() {
 	const canCreateContent = ability.can('create', 'Content')
 	return (
 		<div className="container flex flex-col gap-4 py-8">
-			<h1 className="text-2xl font-bold">Lists</h1>
-			<ListsTable canCreateContent={canCreateContent} lists={lists} />
-			{canCreateContent && <CreateListForm />}
+			<h1 className="fluid-2xl font-bold">Lists</h1>
+			<div className="flex flex-col gap-5 lg:flex-row">
+				<ListsTable canCreateContent={canCreateContent} lists={lists} />
+				{canCreateContent && <CreateListForm />}
+			</div>
 		</div>
 	)
 }
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
index 89a3f07cb..563a5e073 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Suspense, use } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { PostPlayer } from '@/app/(content)/posts/_components/post-player'
+import { SimplePostPlayer } from '@/app/(content)/posts/_components/post-player'
 import Spinner from '@/components/spinner'
 import { env } from '@/env.mjs'
 import { useTranscript } from '@/hooks/use-transcript'
@@ -155,7 +155,7 @@ export const PostMetadataFormFields: React.FC<{
 									<>
 										{videoResource && videoResource.state === 'ready' ? (
 											<div className="-mt-5 border-b">
-												<PostPlayer videoResource={videoResource} />
+												<SimplePostPlayer videoResource={videoResource} />
 												<div className="flex items-center gap-1 px-4 pb-2">
 													<Button
 														variant="secondary"
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx b/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
index ebe971347..3c00e510c 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/post-player.tsx
@@ -2,17 +2,147 @@
 
 import * as React from 'react'
 import { use } from 'react'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 import Spinner from '@/components/spinner'
-import { type MuxPlayerProps } from '@mux/mux-player-react'
+import { useMuxPlayer } from '@/hooks/use-mux-player'
+import {
+	handleTextTrackChange,
+	setPreferredTextTrack,
+	useMuxPlayerPrefs,
+} from '@/hooks/use-mux-player-prefs'
+import type { List } from '@/lib/lists'
+import { getNextUpResourceFromList } from '@/utils/get-nextup-resource-from-list'
+import {
+	type MuxPlayerProps,
+	type MuxPlayerRefAttributes,
+} from '@mux/mux-player-react'
 import MuxPlayer from '@mux/mux-player-react/lazy'
+import { ArrowRight } from 'lucide-react'
 
 import { type VideoResource } from '@coursebuilder/core/schemas/video-resource'
+import { Button } from '@coursebuilder/ui'
+import { useVideoPlayerOverlay } from '@coursebuilder/ui/hooks/use-video-player-overlay'
 import { cn } from '@coursebuilder/ui/utils/cn'
 
 export function PostPlayer({
 	muxPlaybackId,
 	className,
 	videoResource,
+	listLoader,
+	postId,
+}: {
+	muxPlaybackId?: string
+	videoResource: VideoResource
+	className?: string
+	listLoader: Promise<List | null>
+	postId: string
+}) {
+	// const ability = abilityLoader ? use(abilityLoader) : null
+	// const canView = ability?.canView
+	// const playbackId = muxPlaybackId
+	const { dispatch: dispatchVideoPlayerOverlay, state } =
+		useVideoPlayerOverlay()
+	const { setMuxPlayerRef } = useMuxPlayer()
+	const playerRef = React.useRef<MuxPlayerRefAttributes>(null)
+	const searchParams = useSearchParams()
+	const time = searchParams.get('t')
+	const {
+		playbackRate,
+		volume,
+		setPlayerPrefs,
+		autoplay: bingeMode,
+	} = useMuxPlayerPrefs()
+	const playerProps = {
+		defaultHiddenCaptions: true,
+		streamType: 'on-demand',
+		thumbnailTime: 0,
+		playbackRates: [0.75, 1, 1.25, 1.5, 1.75, 2],
+		maxResolution: '2160p',
+		minResolution: '540p',
+		accentColor: '#DD9637',
+		currentTime: time ? Number(time) : 0,
+		playbackRate,
+		onRateChange: (evt: Event) => {
+			const target = evt.target as HTMLVideoElement
+			const value = target.playbackRate || 1
+			setPlayerPrefs({ playbackRate: value })
+		},
+		volume,
+		onVolumeChange: (evt: Event) => {
+			const target = evt.target as HTMLVideoElement
+			const value = target.volume || 1
+			setPlayerPrefs({ volume: value })
+		},
+		onLoadedData: () => {
+			dispatchVideoPlayerOverlay({ type: 'HIDDEN' })
+			handleTextTrackChange(playerRef, setPlayerPrefs)
+			setPreferredTextTrack(playerRef)
+			setMuxPlayerRef(playerRef)
+
+			if (bingeMode) {
+				playerRef?.current?.play()
+			}
+		},
+		onEnded: () => {
+			dispatchVideoPlayerOverlay({ type: 'COMPLETED', playerRef })
+		},
+		onPlay: () => {
+			dispatchVideoPlayerOverlay({ type: 'HIDDEN' })
+		},
+	} as MuxPlayerProps
+
+	const playbackId =
+		videoResource?.state === 'ready'
+			? muxPlaybackId || videoResource?.muxPlaybackId
+			: null
+
+	const list = use(listLoader)
+	const nextUp = list && getNextUpResourceFromList(list, postId)
+
+	return (
+		<div className={cn('relative h-full w-full', className)}>
+			{playbackId ? (
+				<MuxPlayer
+					playbackId={playbackId}
+					className={cn(className)}
+					{...playerProps}
+				/>
+			) : (
+				<div className="flex h-full w-full items-center justify-center bg-gray-300">
+					<Spinner />
+				</div>
+			)}
+
+			{state.action?.type === 'COMPLETED' && nextUp && (
+				<div
+					className={cn(
+						'bg-background/85 absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center pb-6 backdrop-blur-md sm:pb-16',
+						className,
+					)}
+				>
+					<h2 className="sm:fluid-2xl fluid-xl font-semibold sm:mb-3">
+						Continue
+					</h2>
+					<Button
+						className="text-primary inline-flex items-center gap-2 sm:text-lg lg:text-xl"
+						asChild
+						variant="link"
+					>
+						<Link href={`/${nextUp.resource.fields?.slug}`}>
+							{nextUp.resource.fields?.title} <ArrowRight className="w-4" />
+						</Link>
+					</Button>
+				</div>
+			)}
+		</div>
+	)
+}
+
+export function SimplePostPlayer({
+	muxPlaybackId,
+	className,
+	videoResource,
 }: {
 	muxPlaybackId?: string
 	videoResource: VideoResource
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/post-video-subscribe-form.tsx b/apps/ai-hero/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
index 923fde45d..de922f5c6 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
@@ -60,7 +60,7 @@ export const PostNewsletterCta: React.FC<
 					className="via-muted-foreground/20 absolute -bottom-px left-0 z-10 h-px w-full bg-gradient-to-r from-transparent to-transparent"
 					aria-hidden="true"
 				/>
-				<div className="flex flex-row items-center justify-center gap-5 pt-5 text-center sm:pr-16 sm:text-left md:flex-col md:items-start md:gap-0 md:pt-0">
+				<div className="flex flex-col items-center justify-center gap-2 pt-5 text-center sm:gap-5 sm:pr-16 sm:text-left md:flex-col md:items-start md:gap-0 md:pt-0">
 					<div className="flex items-center gap-2">
 						<svg
 							width="20"
diff --git a/apps/ai-hero/src/components/codehike/scrollycoding.tsx b/apps/ai-hero/src/components/codehike/scrollycoding.tsx
index ab494ca3f..45be2d2cf 100644
--- a/apps/ai-hero/src/components/codehike/scrollycoding.tsx
+++ b/apps/ai-hero/src/components/codehike/scrollycoding.tsx
@@ -15,8 +15,8 @@ import { z } from 'zod'
 const Schema = Block.extend({
 	steps: z.array(Block.extend({ code: CodeBlock })),
 })
+
 export default function Scrollycoding(props: any) {
-	console.log('Scrollycoding props', props)
 	if (!props) return null
 
 	// const { steps } = parseRoot(props, Schema)
diff --git a/apps/ai-hero/src/lib/lists-query.ts b/apps/ai-hero/src/lib/lists-query.ts
index af9bf4008..02504a769 100644
--- a/apps/ai-hero/src/lib/lists-query.ts
+++ b/apps/ai-hero/src/lib/lists-query.ts
@@ -10,11 +10,6 @@ import slugify from '@sindresorhus/slugify'
 import { and, asc, desc, eq, or, sql } from 'drizzle-orm'
 import { z } from 'zod'
 
-import {
-	ContentResourceResourceSchema,
-	ContentResourceSchema,
-} from '@coursebuilder/core/schemas'
-
 import { ListSchema, type ListUpdate } from './lists'
 import { deletePostInTypeSense, upsertPostToTypeSense } from './typesense-query'
 
@@ -87,6 +82,70 @@ export async function getList(listIdOrSlug: string) {
 	return ListSchema.parse(list)
 }
 
+export async function getListForPost(postId: string) {
+	// optimized query that skips body fields
+	const result = await db.execute(sql`
+		SELECT
+			list.id AS list_id,
+			list.type AS list_type,
+			list.fields AS list_fields,
+			list.createdAt AS list_createdAt,
+			list.updatedAt AS list_updatedAt,
+			list.deletedAt AS list_deletedAt,
+			list.createdById AS list_createdById,
+			list.organizationId AS list_organizationId,
+			list.createdByOrganizationMembershipId AS list_createdByOrganizationMembershipId,
+			resources.id AS resource_id,
+			resources.type AS resource_type,
+			JSON_REMOVE(resources.fields, '$.body') AS resource_fields,
+			relation.position AS resource_position
+		FROM ${contentResourceResource} AS relation
+		JOIN ${contentResource} AS list
+			ON list.id = relation.resourceOfId
+			AND list.type = 'list'
+		LEFT JOIN ${contentResourceResource} AS list_resources
+			ON list.id = list_resources.resourceOfId
+		LEFT JOIN ${contentResource} AS resources
+			ON resources.id = list_resources.resourceId
+		WHERE relation.resourceId = ${postId}
+		ORDER BY list_resources.position ASC
+	`)
+
+	if (result.rows.length === 0) {
+		console.debug('No list found for this post')
+		return null
+	}
+
+	const firstRow = result.rows[0] as any
+	const list = {
+		id: firstRow.list_id,
+		type: firstRow.list_type,
+		fields: firstRow.list_fields,
+		createdAt: firstRow.list_createdAt,
+		updatedAt: firstRow.list_updatedAt,
+		deletedAt: firstRow.list_deletedAt,
+		createdById: firstRow.list_createdById,
+		organizationId: firstRow.list_organizationId,
+		createdByOrganizationMembershipId:
+			firstRow.list_createdByOrganizationMembershipId,
+		resources: result.rows
+			.filter((row: any) => row.resource_id)
+			.map((row: any) => ({
+				resource: {
+					id: row.resource_id,
+					type: row.resource_type,
+					fields: row.resource_fields,
+				},
+				position: row.resource_position,
+				resourceId: row.resource_id,
+				resourceOfId: firstRow.list_id,
+			}))
+			.sort((a: any, b: any) => a.position - b.position),
+	}
+
+	return ListSchema.parse(list)
+}
+
 export async function addPostToList({
 	postId,
 	listId,
diff --git a/apps/ai-hero/src/utils/get-nextup-resource-from-list.ts b/apps/ai-hero/src/utils/get-nextup-resource-from-list.ts
new file mode 100644
index 000000000..67ebeb638
--- /dev/null
+++ b/apps/ai-hero/src/utils/get-nextup-resource-from-list.ts
@@ -0,0 +1,16 @@
+import { type List } from '@/lib/lists'
+
+export function getNextUpResourceFromList(
+	list: List,
+	currentResourceId: string,
+) {
+	if (list?.fields?.type !== 'nextUp') return null
+
+	const currentResourceIndexFromList = list?.resources.findIndex(
+		(r) => r.resource.id === currentResourceId,
+	)
+	const nextUpIndex = currentResourceIndexFromList + 1
+	const nextUpResource = list?.resources?.[nextUpIndex]
+
+	return nextUpResource || null
+}