diff --git a/packages/browser/src/components/Pagination.tsx b/packages/browser/src/components/Pagination.tsx
index 0806649bc..7f1da5660 100644
--- a/packages/browser/src/components/Pagination.tsx
+++ b/packages/browser/src/components/Pagination.tsx
@@ -1,18 +1,19 @@
 import { cn, cx } from '@stump/components'
 import { ArrowLeft, ArrowRight, MoreHorizontal } from 'lucide-react'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useWindowSize } from 'rooks'
 
 import { usePagination } from '../hooks/usePagination'
 import PagePopoverForm from './PagePopoverForm'
 
-interface PaginationArrowProps {
+type PaginationArrowProps = {
 	kind: 'previous' | 'next'
 	isDisabled?: boolean
 	onClick: () => void
+	onMouseEnter?: () => void
 }
 
-function PaginationArrow({ kind, isDisabled, onClick }: PaginationArrowProps) {
+function PaginationArrow({ kind, isDisabled, onClick, onMouseEnter }: PaginationArrowProps) {
 	const ArrowIcon = kind === 'previous' ? ArrowLeft : ArrowRight
 
 	// NOTE: notice I am wrapping the link (which will have pointer-events-none when
@@ -23,6 +24,7 @@ function PaginationArrow({ kind, isDisabled, onClick }: PaginationArrowProps) {
 			className={cx('items-center', kind === 'next' ? 'justify-end text-right' : 'justify-start', {
 				'cursor-not-allowed': isDisabled,
 			})}
+			onMouseEnter={!isDisabled ? onMouseEnter : undefined}
 		>
 			<button
 				onClick={onClick}
@@ -56,16 +58,18 @@ function PaginationArrow({ kind, isDisabled, onClick }: PaginationArrowProps) {
 	)
 }
 
-interface PaginationLinkProps {
+type PaginationLinkProps = {
 	onClick?: () => void
 	value: number
 	isActive: boolean
+	onMouseEnter?: () => void
 }
 
-function PaginationLink({ value, onClick, isActive }: PaginationLinkProps) {
+function PaginationLink({ value, onClick, isActive, onMouseEnter }: PaginationLinkProps) {
 	return (
 		<span
 			onClick={onClick}
+			onMouseEnter={onMouseEnter}
 			className={cn(
 				'inline-flex cursor-pointer items-center border-t-2 px-4 pt-4 text-xs font-medium text-muted md:text-sm',
 				{
@@ -81,11 +85,12 @@ function PaginationLink({ value, onClick, isActive }: PaginationLinkProps) {
 	)
 }
 
-export interface PaginationProps {
+export type PaginationProps = {
 	position?: 'top' | 'bottom'
 	pages: number
 	currentPage: number
 	onChangePage: (page: number) => void
+	onPrefetchPage?: (page: number) => void
 }
 
 export default function Pagination({
@@ -93,6 +98,7 @@ export default function Pagination({
 	pages,
 	currentPage,
 	onChangePage,
+	onPrefetchPage,
 }: PaginationProps) {
 	const { innerWidth: screenWidth } = useWindowSize()
 
@@ -112,9 +118,15 @@ export default function Pagination({
 
 	const { pageRange } = usePagination({ currentPage, numbersToShow, totalPages: pages })
 
-	function handleEllipsisNavigate(page: number) {
-		onChangePage(page)
-	}
+	const handleEllipsisNavigate = useCallback(
+		(page: number) => {
+			onPrefetchPage?.(page)
+			onChangePage(page)
+		},
+		[onChangePage, onPrefetchPage],
+	)
+
+	const handlePrefetchPage = useCallback((page: number) => onPrefetchPage?.(page), [onPrefetchPage])
 
 	return (
 		<nav className="w-full">
@@ -128,6 +140,7 @@ export default function Pagination({
 						kind="previous"
 						onClick={() => onChangePage(currentPage - 1)}
 						isDisabled={currentPage === 1}
+						onMouseEnter={() => handlePrefetchPage(currentPage - 1)}
 					/>
 
 					<div className="flex items-center">
@@ -137,6 +150,7 @@ export default function Pagination({
 									<PaginationLink
 										key={`${i}, pagination-${page}`}
 										onClick={() => onChangePage(page)}
+										onMouseEnter={() => handlePrefetchPage(page)}
 										isActive={page === currentPage}
 										value={page}
 									/>
@@ -165,6 +179,7 @@ export default function Pagination({
 					<PaginationArrow
 						kind="next"
 						onClick={() => onChangePage(currentPage + 1)}
+						onMouseEnter={() => handlePrefetchPage(currentPage + 1)}
 						isDisabled={currentPage >= pages}
 					/>
 				</div>
diff --git a/packages/browser/src/components/media/BookSearch.tsx b/packages/browser/src/components/media/BookSearch.tsx
index b00226eb4..a8922dee7 100644
--- a/packages/browser/src/components/media/BookSearch.tsx
+++ b/packages/browser/src/components/media/BookSearch.tsx
@@ -1,7 +1,7 @@
-import { usePagedMediaQuery } from '@stump/client'
+import { prefetchPagedMedia, usePagedMediaQuery } from '@stump/client'
 import { usePreviousIsDifferent } from '@stump/components'
 import { Media } from '@stump/types'
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 
 import useIsInView from '@/hooks/useIsInView'
 
@@ -23,16 +23,21 @@ type Props = {
  */
 export default function BookSearch({ page, page_size, setPage, onBookSelect, showFilters }: Props) {
 	const { filters } = useFilterContext()
+
+	const params = useMemo(
+		() => ({
+			page,
+			page_size,
+			params: filters,
+		}),
+		[page, page_size, filters],
+	)
 	const {
 		isLoading,
 		isRefetching,
 		media,
 		pageData: { current_page, total_pages } = {},
-	} = usePagedMediaQuery({
-		page,
-		page_size,
-		params: filters,
-	})
+	} = usePagedMediaQuery(params)
 
 	const differentSearch = usePreviousIsDifferent(filters?.search as string)
 	useEffect(() => {
@@ -58,6 +63,16 @@ export default function BookSearch({ page, page_size, setPage, onBookSelect, sho
 	const hasStuff = total_pages !== undefined && current_page !== undefined && total_pages > 0
 	const hasFilters = Object.keys(filters || {}).length > 0
 
+	const handlePrefetchPage = useCallback(
+		(page: number) => {
+			prefetchPagedMedia({
+				...params,
+				page,
+			})
+		},
+		[params],
+	)
+
 	return (
 		<>
 			<section ref={containerRef} id="grid-top-indicator" className="h-1" />
@@ -74,6 +89,7 @@ export default function BookSearch({ page, page_size, setPage, onBookSelect, sho
 						pages={total_pages}
 						currentPage={current_page}
 						onChangePage={(page) => setPage(page)}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 				<MediaGrid
@@ -88,6 +104,7 @@ export default function BookSearch({ page, page_size, setPage, onBookSelect, sho
 						pages={total_pages}
 						currentPage={current_page}
 						onChangePage={(page) => setPage(page)}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 			</div>
diff --git a/packages/browser/src/scenes/library/LibraryBooksScene.tsx b/packages/browser/src/scenes/library/LibraryBooksScene.tsx
index a23be9a60..bc8f8a511 100644
--- a/packages/browser/src/scenes/library/LibraryBooksScene.tsx
+++ b/packages/browser/src/scenes/library/LibraryBooksScene.tsx
@@ -1,5 +1,5 @@
-import { usePagedMediaQuery } from '@stump/client'
-import { useEffect } from 'react'
+import { prefetchPagedMedia, usePagedMediaQuery } from '@stump/client'
+import { useCallback, useEffect, useMemo } from 'react'
 import { Helmet } from 'react-helmet'
 import { useMediaMatch } from 'rooks'
 
@@ -31,28 +31,44 @@ function LibraryBooksScene() {
 
 	const { layoutMode } = useLayoutMode()
 	const { filters } = useFilterContext()
+
+	const params = useMemo(
+		() => ({
+			page,
+			page_size: is3XLScreenOrBigger ? 40 : 20,
+			params: {
+				...filters,
+				series: {
+					library: {
+						id: library.id,
+					},
+				},
+			},
+		}),
+		[page, is3XLScreenOrBigger, filters, library.id],
+	)
 	const {
 		isLoading: isLoadingMedia,
 		isRefetching: isRefetchingMedia,
 		media,
 		pageData,
-	} = usePagedMediaQuery({
-		page,
-		page_size: is3XLScreenOrBigger ? 40 : 20,
-		params: {
-			...filters,
-			series: {
-				library: {
-					id: library.id,
-				},
-			},
-		},
-	})
+	} = usePagedMediaQuery(params)
 
 	const { current_page, total_pages } = pageData || {}
+
 	const isOnFirstPage = current_page === 1
 	const hasStuff = total_pages !== undefined && current_page !== undefined
 
+	const handlePrefetchPage = useCallback(
+		(page: number) => {
+			prefetchPagedMedia({
+				...params,
+				page,
+			})
+		},
+		[params],
+	)
+
 	// TODO: detect if going from page > 1 to page = 1 and scroll to top
 	useEffect(
 		() => {
@@ -106,7 +122,12 @@ function LibraryBooksScene() {
 
 			<div className="flex w-full flex-col gap-y-6">
 				{hasStuff && (
-					<Pagination pages={total_pages} currentPage={current_page} onChangePage={setPage} />
+					<Pagination
+						pages={total_pages}
+						currentPage={current_page}
+						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
+					/>
 				)}
 				<div className="px-4">{renderContent()}</div>
 				{hasStuff && (
@@ -115,6 +136,7 @@ function LibraryBooksScene() {
 						pages={total_pages}
 						currentPage={current_page}
 						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 			</div>
diff --git a/packages/browser/src/scenes/library/LibrarySeriesScene.tsx b/packages/browser/src/scenes/library/LibrarySeriesScene.tsx
index 739ffc4b2..55c024689 100644
--- a/packages/browser/src/scenes/library/LibrarySeriesScene.tsx
+++ b/packages/browser/src/scenes/library/LibrarySeriesScene.tsx
@@ -1,6 +1,11 @@
-import { useLibraryByIdQuery, usePagedSeriesQuery, useVisitLibrary } from '@stump/client'
+import {
+	prefetchPagedSeries,
+	useLibraryByIdQuery,
+	usePagedSeriesQuery,
+	useVisitLibrary,
+} from '@stump/client'
 import { usePreviousIsDifferent } from '@stump/components'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Helmet } from 'react-helmet'
 import { useParams } from 'react-router'
 import { useMediaMatch } from 'rooks'
@@ -12,6 +17,14 @@ import SeriesList from '@/components/series/SeriesList'
 import { useLayoutMode, usePageParam } from '@/hooks'
 import useIsInView from '@/hooks/useIsInView'
 
+export default function LibrarySeriesSceneWrapper() {
+	return (
+		<FilterProvider>
+			<LibrarySeriesScene />
+		</FilterProvider>
+	)
+}
+
 function LibrarySeriesScene() {
 	const is3XLScreenOrBigger = useMediaMatch('(min-width: 1600px)')
 
@@ -32,22 +45,27 @@ function LibrarySeriesScene() {
 	const { isLoading, library } = useLibraryByIdQuery(id)
 
 	const { filters } = useFilterContext()
+
+	const params = useMemo(
+		() => ({
+			page,
+			page_size: is3XLScreenOrBigger ? 40 : 20,
+			params: {
+				...filters,
+				count_media: true,
+				library: {
+					id,
+				},
+			},
+		}),
+		[page, is3XLScreenOrBigger, filters, id],
+	)
 	const {
 		isLoading: isLoadingSeries,
 		isRefetching: isRefetchingSeries,
 		series,
 		pageData,
-	} = usePagedSeriesQuery({
-		page,
-		page_size: is3XLScreenOrBigger ? 40 : 20,
-		params: {
-			...filters,
-			count_media: true,
-			library: {
-				id,
-			},
-		},
-	})
+	} = usePagedSeriesQuery(params)
 
 	const differentSearch = usePreviousIsDifferent(filters?.search as string)
 	useEffect(() => {
@@ -62,6 +80,16 @@ function LibrarySeriesScene() {
 	const hasFilters = Object.keys(filters || {}).length > 0
 	const hasStuff = total_pages !== undefined && current_page !== undefined
 
+	const handlePrefetchPage = useCallback(
+		(page: number) => {
+			prefetchPagedSeries({
+				...params,
+				page,
+			})
+		},
+		[params],
+	)
+
 	// TODO: detect if going from page > 1 to page = 1 and scroll to top
 	useEffect(
 		() => {
@@ -119,7 +147,8 @@ function LibrarySeriesScene() {
 					<Pagination
 						pages={total_pages}
 						currentPage={current_page}
-						onChangePage={(page) => setPage(page)}
+						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 				<div className="px-4">{renderContent()}</div>
@@ -128,18 +157,11 @@ function LibrarySeriesScene() {
 						position="bottom"
 						pages={total_pages}
 						currentPage={current_page}
-						onChangePage={(page) => setPage(page)}
+						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 			</div>
 		</>
 	)
 }
-
-export default function LibrarySeriesSceneWrapper() {
-	return (
-		<FilterProvider>
-			<LibrarySeriesScene />
-		</FilterProvider>
-	)
-}
diff --git a/packages/browser/src/scenes/series/SeriesBooksScene.tsx b/packages/browser/src/scenes/series/SeriesBooksScene.tsx
index b317db0ba..f113a6a55 100644
--- a/packages/browser/src/scenes/series/SeriesBooksScene.tsx
+++ b/packages/browser/src/scenes/series/SeriesBooksScene.tsx
@@ -1,5 +1,5 @@
-import { usePagedMediaQuery } from '@stump/client'
-import { useEffect } from 'react'
+import { prefetchPagedMedia, usePagedMediaQuery } from '@stump/client'
+import { useCallback, useEffect, useMemo } from 'react'
 import { Helmet } from 'react-helmet'
 import { useMediaMatch } from 'rooks'
 
@@ -22,26 +22,42 @@ function SeriesOverviewScene() {
 
 	const { layoutMode } = useLayoutMode()
 	const { filters } = useFilterContext()
+
+	const params = useMemo(
+		() => ({
+			page,
+			page_size: is3XLScreenOrBigger ? 40 : 20,
+			params: {
+				...filters,
+				series: {
+					id: series.id,
+				},
+			},
+		}),
+		[page, is3XLScreenOrBigger, filters, series.id],
+	)
 	const {
 		isLoading: isLoadingMedia,
 		isRefetching: isRefetchingMedia,
 		media,
 		pageData,
-	} = usePagedMediaQuery({
-		page,
-		page_size: is3XLScreenOrBigger ? 40 : 20,
-		params: {
-			...filters,
-			series: {
-				id: series.id,
-			},
-		},
-	})
+	} = usePagedMediaQuery(params)
 
 	const { current_page, total_pages } = pageData || {}
+
 	const isOnFirstPage = current_page === 1
 	const hasStuff = total_pages !== undefined && current_page !== undefined
 
+	const handlePrefetchPage = useCallback(
+		(page: number) => {
+			prefetchPagedMedia({
+				...params,
+				page,
+			})
+		},
+		[params],
+	)
+
 	// TODO: detect if going from page > 1 to page = 1 and scroll to top
 	useEffect(
 		() => {
@@ -93,7 +109,12 @@ function SeriesOverviewScene() {
 
 			<div className="flex w-full flex-col gap-y-6 pb-[64px] md:pb-0">
 				{hasStuff && (
-					<Pagination pages={total_pages} currentPage={current_page} onChangePage={setPage} />
+					<Pagination
+						pages={total_pages}
+						currentPage={current_page}
+						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
+					/>
 				)}
 				<div className="px-4">{renderContent()}</div>
 				{hasStuff && (
@@ -102,6 +123,7 @@ function SeriesOverviewScene() {
 						pages={total_pages}
 						currentPage={current_page}
 						onChangePage={setPage}
+						onPrefetchPage={handlePrefetchPage}
 					/>
 				)}
 			</div>
diff --git a/packages/client/src/queries/index.ts b/packages/client/src/queries/index.ts
index 283c457ef..e225e629b 100644
--- a/packages/client/src/queries/index.ts
+++ b/packages/client/src/queries/index.ts
@@ -34,6 +34,7 @@ export {
 export { useLogsQuery } from './log'
 export {
 	prefetchMedia,
+	prefetchPagedMedia,
 	useContinueReading,
 	useMediaByIdQuery,
 	useMediaCursorQuery,
@@ -43,6 +44,7 @@ export {
 } from './media'
 export {
 	prefetchLibrarySeries,
+	prefetchPagedSeries,
 	prefetchSeries,
 	usePagedSeriesQuery,
 	useSeriesByIdQuery,
diff --git a/packages/client/src/queries/media.ts b/packages/client/src/queries/media.ts
index 21600a04c..19aa076d7 100644
--- a/packages/client/src/queries/media.ts
+++ b/packages/client/src/queries/media.ts
@@ -78,6 +78,12 @@ export function usePagedMediaQuery(options: PageQueryOptions<Media> = {}) {
 	}
 }
 
+export const prefetchPagedMedia = async (options: PageQueryOptions<Media>) =>
+	queryClient.prefetchQuery([mediaQueryKeys.getMedia, options], async () => {
+		const { data } = await mediaApi.getMedia(options)
+		return data
+	})
+
 export function useMediaCursorQuery(options: CursorQueryOptions<Media>) {
 	const { data, ...restReturn } = useCursorQuery(
 		[mediaQueryKeys.getMedia],
diff --git a/packages/client/src/queries/series.ts b/packages/client/src/queries/series.ts
index 685048ec3..6cbcae4c1 100644
--- a/packages/client/src/queries/series.ts
+++ b/packages/client/src/queries/series.ts
@@ -81,6 +81,11 @@ export function usePagedSeriesQuery(options: PageQueryOptions<Series> = {}) {
 	}
 }
 
+export const prefetchPagedSeries = (options: PageQueryOptions<Series>) =>
+	queryClient.prefetchQuery([seriesQueryKeys.getSeries, options], () =>
+		seriesApi.getSeries(options),
+	)
+
 // TODO: fix this query!
 export function useSeriesCursorQuery({ queryKey, ...options }: CursorQueryOptions<Series>) {
 	const { data, ...restReturn } = useCursorQuery(