diff --git a/backend/src/user-data/library/library.module.ts b/backend/src/user-data/library/library.module.ts
index 9867be3..0de3c87 100644
--- a/backend/src/user-data/library/library.module.ts
+++ b/backend/src/user-data/library/library.module.ts
@@ -5,10 +5,11 @@ import { libraryProviders } from './library.providers';
 import { LibraryService } from './library.service';
 import { UsersModule } from 'src/users/users.module';
 import { SourceProvidersModule } from 'src/source-providers/source-providers.module';
+import { playStateProviders } from '../play-state/play-state.providers';
 
 @Module({
   imports: [UsersModule, MetadataModule, SourceProvidersModule],
-  providers: [...libraryProviders, LibraryService],
+  providers: [...libraryProviders, ...playStateProviders, LibraryService],
   controllers: [LibraryController],
   exports: [LibraryService],
 })
diff --git a/backend/src/user-data/library/library.service.ts b/backend/src/user-data/library/library.service.ts
index 0ce6da0..8eb8125 100644
--- a/backend/src/user-data/library/library.service.ts
+++ b/backend/src/user-data/library/library.service.ts
@@ -18,12 +18,15 @@ import {
 } from './library.dto';
 import { LibraryItem } from './library.entity';
 import { USER_LIBRARY_REPOSITORY } from './library.providers';
+import { USER_PLAY_STATE_REPOSITORY } from '../play-state/play-state.providers';
 
 @Injectable()
 export class LibraryService {
   constructor(
     @Inject(USER_LIBRARY_REPOSITORY)
     private readonly libraryRepository: Repository<LibraryItem>,
+    @Inject(USER_PLAY_STATE_REPOSITORY)
+    private readonly playStateRepository: Repository<PlayState>,
     private readonly metadataService: MetadataService,
     private readonly mediaSourceService: MediaSourcesService,
   ) {
@@ -345,6 +348,23 @@ export class LibraryService {
         tmdbId,
         mediaType,
       });
+
+      const lastPlayedAt = await this.playStateRepository
+        .find({
+          where: {
+            userId,
+            tmdbId,
+          },
+        })
+        .then((states) =>
+          states.map((s) => new Date(s.lastPlayedAt).getTime() || 0),
+        )
+        .then((dates) => Math.max(...dates));
+
+      if (lastPlayedAt) {
+        libraryItem.lastPlayedAt = new Date(lastPlayedAt);
+      }
+
       await this.libraryRepository.save(libraryItem);
     }
 
@@ -401,7 +421,7 @@ export class LibraryService {
       mediaType: mediaType === 'movie' ? MediaType.Movie : MediaType.Series,
       watched,
       playStates,
-      lastPlayState: playStates?.[0],
+      lastPlayState: playStates ? playStates[playStates.length - 1] : undefined,
       tmdbItem: {
         id: movieMetadata?.tmdbMovie.id ?? seriesMetadata?.tmdbSeries.id,
         poster_path:
diff --git a/src/lib/apis/reiverr/reiverr.openapi.ts b/src/lib/apis/reiverr/reiverr.openapi.ts
index 3fe148f..538c675 100644
--- a/src/lib/apis/reiverr/reiverr.openapi.ts
+++ b/src/lib/apis/reiverr/reiverr.openapi.ts
@@ -117,6 +117,7 @@ export interface LibraryItem {
 	id?: string;
 	tmdbId: string;
 	mediaType: 'movie' | 'series';
+	lastPlayedAt?: string;
 	movieMetadata?: MovieMetadata;
 	seriesMetadata?: SeriesMetadata;
 	userId: string;
@@ -577,6 +578,7 @@ export interface LibraryItemDto {
 	mediaType: 'movie' | 'series';
 	playStates?: PlayStateDto[];
 	tmdbItem: TmdbItemDto;
+	lastPlayState?: PlayStateDto;
 	watched?: boolean;
 }
 
diff --git a/src/lib/components/CardGrid.svelte b/src/lib/components/CardGrid.svelte
index f220596..9c93f0b 100644
--- a/src/lib/components/CardGrid.svelte
+++ b/src/lib/components/CardGrid.svelte
@@ -1,49 +1,14 @@
 <script lang="ts">
-	import Container from './Container.svelte';
-	import { onMount } from 'svelte';
 	import classNames from 'classnames';
 	import { getCardDimensions } from '../utils';
+	import Container from './Container.svelte';
 
-	// export let direction: 'horizontal' | 'vertical' = 'vertical';
 	export let orientation: 'portrait' | 'landscape' = 'portrait';
 
 	let cols = getCardDimensions({
 		viewportWidth: window.innerWidth,
 		orientation
 	}).columns;
-
-	// let cols: number = 1;
-	// const calculateRows = () => {
-	// 	const width = window.innerWidth;
-	// 	if (direction === 'vertical') {
-	// 		if (width >= 1536) {
-	// 			cols = 6;
-	// 		} else if (width >= 1280) {
-	// 			cols = 5;
-	// 		} else if (width >= 768) {
-	// 			cols = 4;
-	// 		} else {
-	// 			cols = 3;
-	// 		}
-	// 	} else {
-	// 		// if (width >= 1920) {
-	// 		// 	cols = 4;
-	// 		// } else
-	// 		if (width >= 1536) {
-	// 			cols = 3;
-	// 		} else if (width >= 1280) {
-	// 			cols = 2;
-	// 		} else if (width >= 768) {
-	// 			cols = 1;
-	// 		} else {
-	// 			cols = 1;
-	// 		}
-	// 	}
-	// };
-
-	// onMount(() => {
-	// 	calculateRows();
-	// });
 </script>
 
 <svelte:window
@@ -58,16 +23,7 @@
 	{...$$restProps}
 	direction="grid"
 	gridCols={cols}
-	class={classNames(
-		'grid gap-x-8 gap-y-8',
-		{
-			// 'grid-cols-1 md:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4':
-			// 	direction === 'horizontal'
-			// 'grid-cols-4 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6': direction === 'vertical'
-		},
-
-		$$restProps.class
-	)}
+	class={classNames('grid gap-x-8 gap-y-8', $$restProps.class)}
 	style={`grid-template-columns: repeat(${cols}, minmax(0, 1fr));`}
 	on:mount
 >
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
index 4fef0f2..c9b06fa 100644
--- a/src/lib/components/Container.svelte
+++ b/src/lib/components/Container.svelte
@@ -33,6 +33,7 @@
 	export let debugOutline: Required<ContainerProps>['debugOutline'] = false;
 	export let focusOnClick: Required<ContainerProps>['focusOnClick'] = false;
 	export let focusedChild: Required<ContainerProps>['focusedChild'] = false;
+	export let index: ContainerProps['index'] = undefined;
 
 	export let disabled = false;
 
@@ -105,6 +106,8 @@
 
 	export let tag: Required<ContainerProps>['tag'] = 'div';
 
+	$: if (index !== undefined) selectable.updateIndex(index);
+
 	$: selectable.setIsDisabled(disabled);
 	$: selectable.setGridColumns(gridCols);
 
diff --git a/src/lib/components/Container.type.ts b/src/lib/components/Container.type.ts
index 8738157..99d1c7b 100644
--- a/src/lib/components/Container.type.ts
+++ b/src/lib/components/Container.type.ts
@@ -22,4 +22,5 @@ export type ContainerProps = SvelteHTMLElements['div'] & {
 	focusedChild?: boolean;
 	disabled?: boolean;
 	tag?: string;
+	index?: number | undefined;
 };
diff --git a/src/lib/pages/LibraryPage/CatalogueTab.svelte b/src/lib/pages/LibraryPage/CatalogueTab.svelte
index e60d39d..63a7dc5 100644
--- a/src/lib/pages/LibraryPage/CatalogueTab.svelte
+++ b/src/lib/pages/LibraryPage/CatalogueTab.svelte
@@ -1,20 +1,25 @@
 <script lang="ts">
 	import type { MediaSourceDto } from '$lib/apis/reiverr/reiverr.openapi';
+	import Button from '$lib/components/Button.svelte';
 	import TmdbCard from '$lib/components/Card/TmdbCard.svelte';
 	import CardGrid from '$lib/components/CardGrid.svelte';
 	import Container from '$lib/components/Container.svelte';
+	import FloatingHeader from '$lib/components/FloatingHeader.svelte';
+	import { createModal } from '$lib/components/Modal/modal.store';
 	import { getStackRouterPage } from '$lib/components/StackRouter/StackRouter';
+	import TitleText from '$lib/components/TitleText.svelte';
+	import { scrollIntoView } from '$lib/selectable';
+	import { usePaginatedRequest } from '$lib/stores/data.store';
 	import { createLocalStorageStore } from '$lib/stores/localstorage.store';
+	import { getScrollContext } from '$lib/stores/scroll.store';
 	import { reiverrApi } from '$lib/stores/user.store';
 	import { MixerHorizontal } from 'radix-icons-svelte';
 	import CatalogueOptions from './CatalogueOptions.svelte';
 	import TabItem from './TabItem.svelte';
-	import Button from '$lib/components/Button.svelte';
-	import { createModal } from '$lib/components/Modal/modal.store';
-	import { usePaginatedRequest } from '$lib/stores/data.store';
 
 	export let source: MediaSourceDto;
 
+	const { topVisible } = getScrollContext();
 	const { registrar } = getStackRouterPage();
 
 	const viewSettings = createLocalStorageStore<{
@@ -38,7 +43,7 @@
 		selectedFilter = filters[0] ?? '';
 	}
 
-	const { interactionObserver, data, load } = usePaginatedRequest(
+	const { interactionObserver, data, load, isLoading } = usePaginatedRequest(
 		async (page) => {
 			const type = {
 				All: 'all' as const,
@@ -71,7 +76,7 @@
 	$: {
 		$viewSettings;
 		selectedFilter;
-		load();
+		load({ lazy: true });
 	}
 
 	// $: items = selectedFilter
@@ -91,7 +96,12 @@
 	// 	: Promise.resolve([]);
 </script>
 
-<Container class="mx-32 space-y-8 pb-16">
+<FloatingHeader visible={$topVisible} class="px-32">
+	<h2 class="uppercase text-zinc-300 font-semibold tracking-wider text-base">Source Catalogue</h2>
+	<TitleText title={source.name} size="sm" />
+</FloatingHeader>
+
+<Container class="min-h-full mx-32 space-y-8 pb-16 flex flex-col">
 	<Container direction="horizontal" class="flex space-x-4 items-center justify-between">
 		<div class="flex space-x-4">
 			{#each filters ?? [] as filter}
@@ -111,15 +121,24 @@
 			Options
 		</Button>
 	</Container>
-
-	{#if $data.length}
-		<CardGrid on:mount={registrar} focusOnMount>
-			{#each $data.map((i) => i.tmdbItem) as item (item.id)}
-				<TmdbCard {item} />
-			{/each}
-		</CardGrid>
-		<div use:interactionObserver />
-	{/if}
+	<div class="flex-1 flex flex-col">
+		{#if $data.length}
+			<CardGrid on:mount={registrar} focusOnMount let:columns>
+				{#each $data.map((i) => i.tmdbItem) as item, index (item.id)}
+					<TmdbCard
+						{index}
+						{item}
+						on:enter={scrollIntoView({ top: index < columns ? 500 : 192 })}
+					/>
+				{/each}
+			</CardGrid>
+			<div use:interactionObserver />
+		{:else if $isLoading}
+			<Container class="h-ghost m-auto px-32">Loading...</Container>
+		{:else}
+			<Container class="h-ghost m-auto px-32">No items found</Container>
+		{/if}
+	</div>
 
 	<!-- {#await items then items}
 		<CardGrid on:mount={registrar} focusOnMount>
diff --git a/src/lib/pages/LibraryPage/MyListTab.svelte b/src/lib/pages/LibraryPage/MyListTab.svelte
index cb1cce7..0f8f4e6 100644
--- a/src/lib/pages/LibraryPage/MyListTab.svelte
+++ b/src/lib/pages/LibraryPage/MyListTab.svelte
@@ -7,6 +7,7 @@
 	import { getStackRouterPage } from '$lib/components/StackRouter/StackRouter';
 	import TitleText from '$lib/components/TitleText.svelte';
 	import { scrollIntoView } from '$lib/selectable';
+	import { libraryRefresher, usePaginatedRequest } from '$lib/stores/data.store';
 	import { getScrollContext } from '$lib/stores/scroll.store';
 	import { reiverrApi, user } from '$lib/stores/user.store';
 	import { MixerHorizontal } from 'radix-icons-svelte';
@@ -15,7 +16,6 @@
 	import { libraryViewSettings } from './LibraryPage';
 	import MyListOptions from './MyListOptions.svelte';
 	import TabItem from './TabItem.svelte';
-	import { libraryRefresher, usePaginatedRequest } from '$lib/stores/data.store';
 
 	const { registrar } = getStackRouterPage();
 	const { topVisible } = getScrollContext();
@@ -26,7 +26,8 @@
 	const {
 		data: upcoming,
 		interactionObserver: upcomingObserver,
-		load: loadUpcoming
+		load: loadUpcoming,
+		isLoading: loadingUpcoming
 	} = usePaginatedRequest(
 		async (page) => {
 			if (!$user?.id || !$libraryViewSettings.separateWatched) {
@@ -52,7 +53,8 @@
 	const {
 		data: watched,
 		interactionObserver: watchedObserver,
-		load: loadWatched
+		load: loadWatched,
+		isLoading: loadingWatched
 	} = usePaginatedRequest(
 		async (page) => {
 			if (!$user?.id || !$libraryViewSettings.separateWatched) {
@@ -72,7 +74,7 @@
 		{ loadOnInit: false, refresher: libraryRefresher }
 	);
 
-	const { interactionObserver, data, load } = usePaginatedRequest(
+	const { interactionObserver, data, load, isLoading } = usePaginatedRequest(
 		async (page) => {
 			if (!$user?.id) {
 				return { items: [], total: 0, itemsPerPage: 0, page: 0 };
@@ -95,12 +97,10 @@
 		$libraryViewSettings;
 		category;
 		$user;
-		load();
-		loadUpcoming();
-		loadWatched();
+		load({ lazy: true });
+		loadUpcoming({ lazy: true });
+		loadWatched({ lazy: true });
 	}
-
-	$: viewSettingsKey = $libraryViewSettings && Symbol();
 </script>
 
 <FloatingHeader visible={$topVisible} class="px-32">
@@ -142,34 +142,32 @@
 			{#if $upcoming.length}
 				<div class="mt-6">
 					<Carousel header="Upcoming" scrollClass="px-32" on:enter={scrollIntoView({ bottom: 0 })}>
-						{#key viewSettingsKey}
-							{#each $upcoming as item (item.tmdbId)}
-								<TmdbCard
-									on:enter={scrollIntoView({ horizontal: 128 })}
-									size="lg"
-									item={item.tmdbItem}
-								/>
-							{/each}
-						{/key}
+						{#each $upcoming as item, index (item.tmdbId)}
+							<TmdbCard
+								{index}
+								on:enter={scrollIntoView({ horizontal: 128 })}
+								size="lg"
+								item={item.tmdbItem}
+							/>
+						{/each}
 						<div use:upcomingObserver />
 					</Carousel>
 				</div>
 			{/if}
 			{#if $data.length}
 				<div class="my-6">
-					<div class="px-32 mb-6 h3">My List</div>
-					<CardGrid class="px-32">
-						{#key viewSettingsKey}
-							{#each $data as item, index (item.tmdbId)}
-								<TmdbCard
-									item={item.tmdbItem}
-									progress={item.playStates?.[0]?.progress || 0}
-									on:enter={scrollIntoView(index === 0 ? { top: 128 + 64 } : { vertical: 128 })}
-									size="dynamic"
-									navigateWithType
-								/>
-							{/each}
-						{/key}
+					{#if $libraryViewSettings.separateWatched}
+						<div class="px-32 mb-6 h3">Unwatched</div>
+					{/if}
+					<CardGrid class="px-32" let:columns>
+						{#each $data as item, index (item.tmdbId)}
+							<TmdbCard
+								{index}
+								item={item.tmdbItem}
+								progress={item.lastPlayState?.progress || 0}
+								on:enter={scrollIntoView({ top: index < columns ? 192 + 64 : 192 })}
+							/>
+						{/each}
 					</CardGrid>
 					<div use:interactionObserver />
 				</div>
@@ -177,24 +175,23 @@
 			{#if $watched.length}
 				<div class="mt-6 px-32">
 					<div class="mb-6 h3">Watched</div>
-					<CardGrid>
-						{#key viewSettingsKey}
-							{#each $watched as item (item.tmdbId)}
-								<TmdbCard
-									item={item.tmdbItem}
-									progress={item.playStates?.[0]?.progress || 0}
-									on:enter={scrollIntoView({ vertical: 128 })}
-									size="dynamic"
-									navigateWithType
-								/>
-							{/each}
-						{/key}
+					<CardGrid let:columns>
+						{#each $watched as item, index (item.tmdbId)}
+							<TmdbCard
+								{index}
+								item={item.tmdbItem}
+								progress={item.lastPlayState?.progress || 0}
+								on:enter={scrollIntoView({ top: index < columns ? 192 + 64 : 192 })}
+							/>
+						{/each}
 					</CardGrid>
 					<div use:watchedObserver />
 				</div>
 			{/if}
 
-			{#if !$upcoming.length && !$data.length && !$watched.length}
+			{#if ($isLoading || $loadingUpcoming || $loadingWatched) && !$upcoming.length && !$data.length && !$watched.length}
+				<Container class="h-ghost m-auto px-32">Loading...</Container>
+			{:else if !$upcoming.length && !$data.length && !$watched.length}
 				<Container focusOnMount class="h-ghost m-auto px-32">
 					Add content to your list to see it here.
 				</Container>
diff --git a/src/lib/pages/MoviesHomePage.svelte b/src/lib/pages/MoviesHomePage.svelte
index 591e4b0..7dfaca1 100644
--- a/src/lib/pages/MoviesHomePage.svelte
+++ b/src/lib/pages/MoviesHomePage.svelte
@@ -27,14 +27,13 @@
 				.getMyList(String(get(user)?.id), {
 					type: 'movies',
 					order: 'last-played',
-					status: 'continue-watching'
+					status: 'continue-watching',
+					itemsPerPage: 10
 				})
-				.then((r) => r.data),
+				.then((r) => r.data.items),
 		{ refresher: libraryRefresher }
 	);
 
-	$: libraryContinueWatchingKey = $continueWatching && Symbol();
-
 	const popularMovies = tmdbApi.getTrendingMovies();
 	const newDigitalReleases = tmdbApi.getDigitalMovieReleases();
 	const upcomingMovies = tmdbApi.getUpcomingMovies();
@@ -73,19 +72,18 @@
 		/>
 	</Container>
 	<div class="my-16 space-y-8 relative z-10" style={$visibleStyle}>
-		{#if $continueWatching?.items.length}
+		{#if $continueWatching?.length}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Continue Watching</span>
-				{#key libraryContinueWatchingKey}
-					{#each $continueWatching?.items ?? [] as item (item.tmdbId)}
-						<TmdbCard
-							on:enter={scrollIntoView({ left: 128 })}
-							size="lg"
-							item={item.tmdbItem}
-							progress={item.playStates?.[0]?.progress ?? 0}
-						/>
-					{/each}
-				{/key}
+				{#each $continueWatching ?? [] as item, index (item.tmdbId)}
+					<TmdbCard
+						{index}
+						on:enter={scrollIntoView({ left: 128 })}
+						size="lg"
+						item={item.tmdbItem}
+						progress={item.lastPlayState?.progress ?? 0}
+					/>
+				{/each}
 			</Carousel>
 		{/if}
 
diff --git a/src/lib/pages/SeriesHomePage.svelte b/src/lib/pages/SeriesHomePage.svelte
index 7ba2f70..8b101e3 100644
--- a/src/lib/pages/SeriesHomePage.svelte
+++ b/src/lib/pages/SeriesHomePage.svelte
@@ -5,10 +5,7 @@
 	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
 	import TmdbSeriesHeroShowcase from '$lib/components/HeroShowcase/TmdbSeriesHeroShowcase.svelte';
 	import { scrollIntoView } from '$lib/selectable';
-	import {
-		libraryRefresher,
-		useRequest
-	} from '$lib/stores/data.store';
+	import { libraryRefresher, useRequest } from '$lib/stores/data.store';
 	import { setScrollContext } from '$lib/stores/scroll.store';
 	import { setUiVisibilityContext } from '$lib/stores/ui-visibility.store';
 	import { reiverrApi, tmdbApi, tmdbApi4, user } from '$lib/stores/user.store';
@@ -29,14 +26,13 @@
 				.getMyList(String(get(user)?.id), {
 					type: 'series',
 					order: 'last-played',
-					status: 'continue-watching'
+					status: 'continue-watching',
+					itemsPerPage: 10
 				})
-				.then((r) => r.data),
+				.then((r) => r.data.items),
 		{ refresher: libraryRefresher }
 	);
 
-	$: libraryContinueWatchingKey = $continueWatching && Symbol();
-
 	const popular = tmdbApi.getTrendingSeries();
 	const nowStreaming = tmdbApi.getNowStreamingSeries();
 	const upcomingSeries = tmdbApi.getUpcomingSeries();
@@ -57,19 +53,19 @@
 		/>
 	</Container>
 	<div class="my-16 space-y-8 relative z-10" style={$visibleStyle}>
-		{#if $continueWatching?.items?.length}
+		{#if $continueWatching?.length}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Continue Watching</span>
-				{#key libraryContinueWatchingKey}
-					{#each $continueWatching?.items ?? [] as item (item.tmdbId)}
-						<TmdbCard
-							on:enter={scrollIntoView({ left: 128 })}
-							size="lg"
-							item={item.tmdbItem}
-							progress={item.playStates?.[0]?.progress ?? 0}
-						/>
-					{/each}
-				{/key}
+
+				{#each $continueWatching ?? [] as item, index (item.tmdbId)}
+					<TmdbCard
+						{index}
+						on:enter={scrollIntoView({ left: 128 })}
+						size="lg"
+						item={item.tmdbItem}
+						progress={item.lastPlayState?.progress ?? 0}
+					/>
+				{/each}
 			</Carousel>
 		{/if}
 
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts
index 0e7713b..a228551 100644
--- a/src/lib/selectable.ts
+++ b/src/lib/selectable.ts
@@ -153,6 +153,17 @@ export class Selectable {
 		return this;
 	}
 
+	updateIndex(index: number) {
+		if (this.parent && index > -1 && index < this.parent.children.length) {
+			const oldIndex = this.parent.children.indexOf(this);
+			const other = this.parent.children[index];
+			if (oldIndex !== -1 && other) {
+				this.parent.children[oldIndex] = other;
+				this.parent.children[index] = this;
+			}
+		}
+	}
+
 	focus(options: Partial<FocusEventOptions> = {}) {
 		function propagateFocusUpdates(options: FocusEventOptions, selectable: Selectable) {
 			if (options.propagate && options.onFocus)
diff --git a/src/lib/stores/data.store.ts b/src/lib/stores/data.store.ts
index 524490a..715e56a 100644
--- a/src/lib/stores/data.store.ts
+++ b/src/lib/stores/data.store.ts
@@ -259,7 +259,11 @@ export function usePaginatedRequest<TResponseItem>(
 					hasNextPage = false;
 				}
 
-				data.update((d) => [...d, ...res.items]);
+				if (currentPage === initialPage) {
+					data.set(res.items);
+				} else {
+					data.update((d) => [...d, ...res.items]);
+				}
 			})
 			.finally(() => {
 				if (id !== requestId) return;
@@ -291,14 +295,17 @@ export function usePaginatedRequest<TResponseItem>(
 		};
 	};
 
-	async function load() {
+	async function load(options: { lazy?: boolean } = {}) {
+		const { lazy = false } = options;
+
 		nextPage.set(initialPage);
 		loadingPage.set(initialPage - 1);
 		hasNextPage = true;
-		data.set([]);
 		promise = undefined;
 		isLoading.set(false);
 		requestId = Symbol();
+
+		if (!lazy) data.set([]);
 		return requestNextPage();
 	}