diff --git a/backend/src/media-sources/media-sources.controller.ts b/backend/src/media-sources/media-sources.controller.ts
index bec3c82..5c069a5 100644
--- a/backend/src/media-sources/media-sources.controller.ts
+++ b/backend/src/media-sources/media-sources.controller.ts
@@ -69,9 +69,8 @@ export class ServiceOwnershipValidator implements CanActivate {
 
     if (!sourceId) return true;
 
-    const mediaSource = await this.mediaSourcesService.findMediaSource(
-      sourceId,
-    );
+    const mediaSource =
+      await this.mediaSourcesService.findMediaSource(sourceId);
 
     if (!mediaSource) throw new NotFoundException('Source not found');
 
@@ -114,7 +113,12 @@ export class MediaSourcesController {
       pagination,
     );
 
-    return catalogue ?? { items: [], total: 0, itemsPerPage: 0, page: 0 };
+    return {
+      items: catalogue?.items ?? [],
+      itemsPerPage: catalogue?.itemsPerPage ?? pagination.itemsPerPage,
+      page: catalogue?.page ?? pagination.page,
+      total: catalogue?.total ?? 0,
+    };
   }
 
   @Get(':sourceId/catalogue/episodes')
@@ -303,9 +307,8 @@ export class MediaSourcesController {
     @GetAuthToken() token: string,
   ) {
     const sourceId = params.sourceId;
-    const mediaSource = await this.mediaSourcesService.findMediaSource(
-      sourceId,
-    );
+    const mediaSource =
+      await this.mediaSourcesService.findMediaSource(sourceId);
 
     if (!mediaSource) throw new NotFoundException('Source not found');
 
@@ -370,9 +373,8 @@ export class MediaSourcesController {
   }
 
   async getConnection(sourceId: string) {
-    const mediaSource = await this.mediaSourcesService.findMediaSource(
-      sourceId,
-    );
+    const mediaSource =
+      await this.mediaSourcesService.findMediaSource(sourceId);
 
     if (!mediaSource.pluginId || !mediaSource.enabled) {
       throw new BadRequestException('Source not configured');
diff --git a/backend/src/metadata/metadata.entity.ts b/backend/src/metadata/metadata.entity.ts
index c2dfd3f..9f61886 100644
--- a/backend/src/metadata/metadata.entity.ts
+++ b/backend/src/metadata/metadata.entity.ts
@@ -2,11 +2,13 @@ import { ApiProperty } from '@nestjs/swagger';
 import {
   Column,
   Entity,
+  OneToMany,
   PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm';
 import { TmdbMovieFull, TmdbSeriesFull } from './tmdb/tmdb.dto';
 import { TMDB_CACHE_TTL } from 'src/consts';
+import { LibraryItem } from 'src/user-data/library/library.entity';
 
 @Entity()
 export class MovieMetadata {
@@ -18,10 +20,26 @@ export class MovieMetadata {
   @Column({ unique: true })
   tmdbId: string;
 
+  //
+
   @ApiProperty({ required: false, type: 'object' })
   @Column('json')
   tmdbMovie: TmdbMovieFull;
 
+  @ApiProperty({ required: false, type: 'string' })
+  @Column({ nullable: true })
+  name?: string;
+
+  @ApiProperty({ required: false, type: 'string' })
+  @Column({ nullable: true })
+  releaseDate?: Date;
+
+  //
+
+  @ApiProperty({ type: [LibraryItem], required: false })
+  @OneToMany(() => LibraryItem, (libraryItem) => libraryItem.seriesMetadata)
+  libraryItems?: LibraryItem[];
+
   @ApiProperty({ type: 'string' })
   @UpdateDateColumn()
   updatedAt: Date;
@@ -67,10 +85,30 @@ export class SeriesMetadata {
   @Column({ unique: true })
   tmdbId: string;
 
+  //
+
   @ApiProperty({ required: false, type: 'object' })
   @Column('json')
   tmdbSeries: TmdbSeriesFull;
 
+  @ApiProperty({ required: false, type: 'string' })
+  @Column({ nullable: true })
+  name?: string;
+
+  @ApiProperty({ required: false, type: 'string' })
+  @Column({ nullable: true })
+  firstReleaseDate?: Date;
+
+  @ApiProperty({ required: false, type: 'string' })
+  @Column({ nullable: true })
+  lastReleaseDate?: Date;
+
+  //
+
+  @ApiProperty({ type: [LibraryItem], required: false })
+  @OneToMany(() => LibraryItem, (libraryItem) => libraryItem.seriesMetadata)
+  libraryItems?: LibraryItem[];
+
   @ApiProperty({ type: 'string' })
   @UpdateDateColumn()
   updatedAt: Date;
diff --git a/backend/src/metadata/metadata.service.ts b/backend/src/metadata/metadata.service.ts
index b2b13a4..b4c80b7 100644
--- a/backend/src/metadata/metadata.service.ts
+++ b/backend/src/metadata/metadata.service.ts
@@ -44,6 +44,10 @@ export class MetadataService {
           if (tmdbMovie) {
             movie.tmdbMovie = tmdbMovie;
             movie.updatedAt = new Date();
+            movie.name = tmdbMovie.title;
+            movie.releaseDate = tmdbMovie.release_date
+              ? new Date(tmdbMovie.release_date)
+              : undefined;
           }
 
           await this.movieRepository.upsert(movie, {
@@ -79,6 +83,13 @@ export class MetadataService {
           if (tmdbSeries) {
             series.tmdbSeries = tmdbSeries;
             series.updatedAt = new Date();
+            series.firstReleaseDate = tmdbSeries.first_air_date
+              ? new Date(tmdbSeries.first_air_date)
+              : undefined;
+            series.lastReleaseDate = tmdbSeries.last_air_date
+              ? new Date(tmdbSeries.last_air_date)
+              : undefined;
+            series.name = tmdbSeries.name;
           }
 
           await this.seriesRepository.upsert(series, {
diff --git a/backend/src/user-data/library/library.controller.ts b/backend/src/user-data/library/library.controller.ts
index 5010d09..afbc922 100644
--- a/backend/src/user-data/library/library.controller.ts
+++ b/backend/src/user-data/library/library.controller.ts
@@ -21,7 +21,12 @@ import {
   SuccessResponseDto,
 } from 'src/common/common.dto';
 import { LibraryItemDto } from './library.dto';
-import { LibraryService } from './library.service';
+import {
+  LibraryService,
+  LibrarySortBy,
+  MyListFilter as MyListFilter,
+  SortByDirection,
+} from './library.service';
 
 @ApiTags('users')
 @Controller('users/:userId/library')
@@ -29,25 +34,32 @@ import { LibraryService } from './library.service';
 export class LibraryController {
   constructor(private libraryService: LibraryService) {}
 
-  @Get()
+  @Get('my-list')
+  @ApiQuery({ name: 'filter', enum: MyListFilter, required: false })
+  @ApiQuery({ name: 'sortBy', enum: LibrarySortBy, required: false })
+  @ApiQuery({ name: 'direction', enum: SortByDirection, required: false })
   @PaginatedApiOkResponse(LibraryItemDto)
   async getLibraryItems(
     @GetPaginationParams() pagination: PaginationParamsDto,
     @Param('userId') userId: string,
+    @Query('filter', new ParseEnumPipe(MyListFilter, { optional: true }))
+    filter?: MyListFilter,
+    @Query('sortBy', new ParseEnumPipe(LibrarySortBy, { optional: true }))
+    sortBy?: LibrarySortBy,
+    @Query('direction', new ParseEnumPipe(SortByDirection, { optional: true }))
+    direction?: SortByDirection,
   ): Promise<PaginatedResponseDto<LibraryItemDto>> {
     // const user = await this.userService.findOne(userId);
 
-    const items = await this.libraryService.getLibraryItemDtos(
+    const items = await this.libraryService.getMyListDtos({
       userId,
       pagination,
-    );
+      filter,
+      sortBy,
+      direction,
+    });
 
-    return {
-      items,
-      itemsPerPage: pagination.itemsPerPage,
-      page: pagination.page,
-      total: items.length,
-    };
+    return items;
   }
 
   @Put('tmdb/:tmdbId')
diff --git a/backend/src/user-data/library/library.entity.ts b/backend/src/user-data/library/library.entity.ts
index fd3b78a..911bbac 100644
--- a/backend/src/user-data/library/library.entity.ts
+++ b/backend/src/user-data/library/library.entity.ts
@@ -15,6 +15,7 @@ import {
 } from 'typeorm';
 import { PlayState } from '../play-state/play-state.entity';
 import { PlayStateDto } from '../play-state/play-state.dto';
+import { MovieMetadata, SeriesMetadata } from 'src/metadata/metadata.entity';
 
 @Entity()
 @Unique(['tmdbId', 'userId'])
@@ -31,6 +32,22 @@ export class LibraryItem {
   @Column()
   mediaType: MediaType;
 
+  @ApiProperty({ required: false, type: MovieMetadata })
+  @ManyToOne(() => MovieMetadata, {
+    createForeignKeyConstraints: false,
+    nullable: true,
+  })
+  @JoinColumn({ name: 'tmdbId', referencedColumnName: 'tmdbId' })
+  movieMetadata?: MovieMetadata;
+
+  @ApiProperty({ required: false, type: SeriesMetadata })
+  @ManyToOne(() => SeriesMetadata, {
+    createForeignKeyConstraints: false,
+    nullable: true,
+  })
+  @JoinColumn({ name: 'tmdbId', referencedColumnName: 'tmdbId' })
+  seriesMetadata?: SeriesMetadata;
+
   @ApiProperty({ required: true, type: 'string' })
   @PrimaryColumn()
   userId: string;
diff --git a/backend/src/user-data/library/library.service.ts b/backend/src/user-data/library/library.service.ts
index fee8c33..90d7be6 100644
--- a/backend/src/user-data/library/library.service.ts
+++ b/backend/src/user-data/library/library.service.ts
@@ -1,11 +1,39 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { MediaType, PaginationParamsDto } from 'src/common/common.dto';
+import {
+  MediaType,
+  PaginatedResponseDto,
+  PaginationParamsDto,
+} from 'src/common/common.dto';
 import { MetadataService } from 'src/metadata/metadata.service';
-import { Repository } from 'typeorm';
+import { IsNull, Not, Repository } from 'typeorm';
 import { LibraryItemDto } from './library.dto';
 import { LibraryItem } from './library.entity';
 import { USER_LIBRARY_REPOSITORY } from './library.providers';
 
+export enum SortByDirection {
+  Asc = 'asc',
+  Desc = 'desc',
+}
+
+export enum LibrarySortBy {
+  DateAdded = 'dateAdded',
+  Name = 'name',
+  FirstReleaseDate = 'firstReleaseDate',
+  LastReleaseDate = 'lastReleaseDate',
+}
+
+export enum MyListFilter {
+  Movie = 'movie',
+  Series = 'series',
+}
+
+export enum CatalogueFilter {
+  All = 'all',
+  Movies = 'movies',
+  Series = 'series',
+  Unavailable = 'unavailable',
+}
+
 @Injectable()
 export class LibraryService {
   constructor(
@@ -14,14 +42,13 @@ export class LibraryService {
     private readonly metadataService: MetadataService,
   ) {}
 
-  async getLibraryItemDtos(
-    userId: string,
-    pagination: PaginationParamsDto,
-  ): Promise<LibraryItemDto[]> {
-    const items = await this.getLibraryItems(userId, pagination);
+  async getMyListDtos(
+    ...args: Parameters<LibraryService['getMyList']>
+  ): Promise<PaginatedResponseDto<LibraryItemDto>> {
+    const paginatedItems = await this.getMyList(...args);
 
-    return Promise.all(
-      items.map(async (item) => {
+    const items = await Promise.all(
+      paginatedItems.items.map(async (item) => {
         const seriesMetadata =
           item.mediaType === MediaType.Series
             ? await this.metadataService.getSeriesByTmdbId(item.tmdbId)
@@ -38,21 +65,95 @@ export class LibraryService {
         });
       }),
     );
+
+    return { ...paginatedItems, items };
   }
 
-  private async getLibraryItems(
-    userId: string,
-    pagination: PaginationParamsDto,
-  ): Promise<LibraryItem[]> {
-    return this.libraryRepository.find({
-      where: { userId },
+  /** TODO: decouple librayItem and movie/seriesItem */
+  private async getMyList(options: {
+    userId: string;
+    pagination: PaginationParamsDto;
+    filter?: MyListFilter;
+    sortBy?: LibrarySortBy;
+    direction?: SortByDirection;
+  }): Promise<PaginatedResponseDto<LibraryItem>> {
+    const {
+      userId,
+      pagination,
+      filter,
+      sortBy,
+      direction = SortByDirection.Desc,
+    } = options;
+
+    const directon = direction === SortByDirection.Asc ? 'ASC' : 'DESC';
+
+    const order = {
+      [LibrarySortBy.DateAdded]: { createdAt: directon } as const,
+      [LibrarySortBy.Name]: {
+        seriesMetadata: {
+          name: directon,
+        },
+        movieMetadata: {
+          name: directon,
+        },
+      } as const,
+      [LibrarySortBy.FirstReleaseDate]: {
+        movieMetadata: {
+          releaseDate: directon,
+        },
+        seriesMetadata: {
+          firstReleaseDate: directon,
+        },
+      } as const,
+      [LibrarySortBy.LastReleaseDate]: {
+        movieMetadata: {
+          releaseDate: directon,
+        },
+        seriesMetadata: {
+          lastReleaseDate: directon,
+        },
+      } as const,
+    }[sortBy];
+
+    const mediaType = filter
+      ? filter === MyListFilter.Movie
+        ? MediaType.Movie
+        : MediaType.Series
+      : undefined;
+
+    const [items, total] = await this.libraryRepository.findAndCount({
       relations: {
         playStates: true,
+        seriesMetadata: true,
+        movieMetadata: true,
       },
-      // TODO: Implement pagination
-      // take: pagination.itemsPerPage,
-      // skip: pagination.itemsPerPage * (pagination.page - 1),
+      select: {
+        seriesMetadata: {
+          firstReleaseDate: true,
+          lastReleaseDate: true,
+          name: true,
+        },
+        movieMetadata: {
+          releaseDate: true,
+          name: true,
+        },
+      },
+
+      where: {
+        userId,
+        ...(mediaType ? { mediaType } : {}),
+      },
+      order,
+      take: pagination.itemsPerPage,
+      skip: pagination.itemsPerPage * (pagination.page - 1),
     });
+
+    return {
+      items,
+      total,
+      itemsPerPage: pagination.itemsPerPage,
+      page: pagination.page,
+    };
   }
 
   async findByTmdbId(
diff --git a/src/lib/apis/reiverr/reiverr.openapi.ts b/src/lib/apis/reiverr/reiverr.openapi.ts
index e06d993..538638c 100644
--- a/src/lib/apis/reiverr/reiverr.openapi.ts
+++ b/src/lib/apis/reiverr/reiverr.openapi.ts
@@ -81,6 +81,27 @@ export interface PlayState {
 	lastPlayedAt: string;
 }
 
+export interface MovieMetadata {
+	id?: string;
+	tmdbId: string;
+	tmdbMovie?: object;
+	name?: string;
+	releaseDate?: string;
+	libraryItems?: any[][];
+	updatedAt: string;
+}
+
+export interface SeriesMetadata {
+	id?: string;
+	tmdbId: string;
+	tmdbSeries?: object;
+	name?: string;
+	firstReleaseDate?: string;
+	lastReleaseDate?: string;
+	libraryItems?: any[][];
+	updatedAt: string;
+}
+
 export interface PlayStateDto {
 	id: string;
 	tmdbId: number;
@@ -107,6 +128,8 @@ export interface LibraryItem {
 	id?: string;
 	tmdbId: string;
 	mediaType: 'Movie' | 'Series' | 'Episode';
+	movieMetadata?: MovieMetadata;
+	seriesMetadata?: SeriesMetadata;
 	userId: string;
 	user?: string;
 	playStates?: PlayStateDto[];
@@ -1028,17 +1051,26 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
 		 *
 		 * @tags users
 		 * @name GetLibraryItems
-		 * @request GET:/api/users/{userId}/library
+		 * @request GET:/api/users/{userId}/library/my-list
 		 */
-		getLibraryItems: (userId: string, params: RequestParams = {}) =>
+		getLibraryItems: (
+			userId: string,
+			query?: {
+				filter?: 'movie' | 'series';
+				sortBy?: 'dateAdded' | 'name' | 'firstReleaseDate' | 'lastReleaseDate';
+				direction?: 'asc' | 'desc';
+			},
+			params: RequestParams = {}
+		) =>
 			this.request<
 				PaginatedResponseDto & {
 					items: LibraryItemDto[];
 				},
 				any
 			>({
-				path: `/api/users/${userId}/library`,
+				path: `/api/users/${userId}/library/my-list`,
 				method: 'GET',
+				query: query,
 				format: 'json',
 				...params
 			}),
diff --git a/src/lib/components/StackRouter/StackRouter.ts b/src/lib/components/StackRouter/StackRouter.ts
index 6991300..3fc37e7 100644
--- a/src/lib/components/StackRouter/StackRouter.ts
+++ b/src/lib/components/StackRouter/StackRouter.ts
@@ -1,4 +1,4 @@
-import { type ComponentType } from 'svelte';
+import { getContext, hasContext, setContext, type ComponentType } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
 import LibraryPage from '../../pages/LibraryPage/LibraryPage.svelte';
 import ManagePage from '../../pages/ManagePage/ManagePage.svelte';
@@ -16,6 +16,7 @@ import { modalStack } from '../Modal/modal.store';
 import NetworkPage from '$lib/pages/CollectionPages/NetworkPage.svelte';
 import ListPage from '$lib/pages/CollectionPages/ListPage.svelte';
 import CompanyPage from '$lib/pages/CollectionPages/CompanyPage.svelte';
+import { useRegistrar } from '$lib/selectable';
 
 interface Page {
 	id: symbol;
@@ -324,5 +325,45 @@ export const stackRouter = useStackRouter({
 // 	// }
 // } as const);
 
+function useStackRouterControls() {
+	const topSelectable = useRegistrar();
+
+	function handleGoBack() {
+		const selectable = get(topSelectable);
+		if (selectable && get(selectable.focusIndex) === 0) {
+			history.back();
+		} else {
+			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
+		}
+	}
+
+	function handleGoToTop() {
+		const selectable = get(topSelectable);
+		if (topSelectable) {
+			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
+		} else handleGoBack();
+	}
+
+	return {
+		handleGoBack,
+		handleGoToTop,
+		registrar: topSelectable.registrar
+	};
+}
+
+const STACK_ROUTER_CONTROLS = Symbol('STACK_ROUTER_CONTROLS');
+
+export function createStackRouterControls() {
+	const store = useStackRouterControls();
+	setContext(STACK_ROUTER_CONTROLS, store);
+	return store;
+}
+
+export function getStackRouterControls(): ReturnType<typeof useStackRouterControls> {
+	if (hasContext(STACK_ROUTER_CONTROLS)) return getContext(STACK_ROUTER_CONTROLS);
+	console.error('[StackRouterControls] Not found');
+	return { handleGoBack: () => {}, handleGoToTop: () => {}, registrar: () => () => {} };
+}
+
 export const navigate = stackRouter.navigate;
 export const back = stackRouter.back;
diff --git a/src/lib/components/StackRouter/StackRouterPage.svelte b/src/lib/components/StackRouter/StackRouterPage.svelte
index d6cd7c1..28da5a7 100644
--- a/src/lib/components/StackRouter/StackRouterPage.svelte
+++ b/src/lib/components/StackRouter/StackRouterPage.svelte
@@ -5,28 +5,13 @@
 	import { fade } from 'svelte/transition';
 	import Container from '../Container.svelte';
 	import { focusSidebar } from '../Sidebar/sidebar';
+	import { createStackRouterControls } from './StackRouter';
 
 	export let hasSidebar = true;
 	export let hidden = false;
 
 	// Top element, that when focused and back is pressed, will exit the modal
-	const topSelectable = useRegistrar();
-
-	function handleGoBack() {
-		const selectable = get(topSelectable);
-		if (selectable && get(selectable.focusIndex) === 0) {
-			history.back();
-		} else {
-			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
-		}
-	}
-
-	function handleGoToTop() {
-		const selectable = get(topSelectable);
-		if (topSelectable) {
-			selectable?.focusChild(0, { cycleTo: true }) || selectable?.focus({ cycleTo: true });
-		} else handleGoBack();
-	}
+	const { handleGoBack, handleGoToTop, registrar } = createStackRouterControls();
 </script>
 
 <Container
@@ -60,7 +45,7 @@
 				}
 			}}
 		>
-			<slot {handleGoBack} registrar={topSelectable.registrar} {hasFocus} />
+			<slot {handleGoBack} {registrar} {hasFocus} />
 		</Container>
 	</div>
 </Container>
diff --git a/src/lib/pages/LibraryPage/CatalogueTab.svelte b/src/lib/pages/LibraryPage/CatalogueTab.svelte
new file mode 100644
index 0000000..51dfd98
--- /dev/null
+++ b/src/lib/pages/LibraryPage/CatalogueTab.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { MediaSource } from '$lib/apis/reiverr/reiverr.openapi';
+	import TmdbCard from '$lib/components/Card/TmdbCard.svelte';
+	import CardGrid from '$lib/components/CardGrid.svelte';
+	import Container from '$lib/components/Container.svelte';
+	import { reiverrApi } from '$lib/stores/user.store';
+
+	export let source: MediaSource;
+
+	$: items = reiverrApi.sources.getMovieCatalogue(source.id).then((r) => r.data.items);
+</script>
+
+<Container>
+	{#await items then items}
+		<CardGrid>
+			{#each items as item}
+				<TmdbCard item={item} />
+			{/each}
+		</CardGrid>
+	{/await}
+</Container>
diff --git a/src/lib/pages/LibraryPage/LibraryPage.svelte b/src/lib/pages/LibraryPage/LibraryPage.svelte
index dbf6a9e..0d5a82f 100644
--- a/src/lib/pages/LibraryPage/LibraryPage.svelte
+++ b/src/lib/pages/LibraryPage/LibraryPage.svelte
@@ -1,218 +1,57 @@
 <script lang="ts">
-	import type { LibraryItemDto } from '$lib/apis/reiverr/reiverr.openapi';
-	import Button from '$lib/components/Button.svelte';
-	import Carousel from '$lib/components/Carousel/Carousel.svelte';
 	import Container from '$lib/components/Container.svelte';
-	import { createModal } from '$lib/components/Modal/modal.store';
-	import type { StackRouterPageProps } from '$lib/components/StackRouter/StackRouterPage.type';
-	import { scrollIntoView } from '$lib/selectable';
-	import { libraryItemsDataStore } from '$lib/stores/data.store';
-	import { libraryViewSettings, type LibraryViewSettings } from '$lib/stores/localstorage.store';
-	import { MixerHorizontal } from 'radix-icons-svelte';
-	import { onDestroy } from 'svelte';
-	import { derived, writable } from 'svelte/store';
-	import TmdbCard from '../../components/Card/TmdbCard.svelte';
-	import CardGrid from '../../components/CardGrid.svelte';
-	import OptionsDialog from './OptionsDialog.LibraryPage.svelte';
-	import TabItem from './TabItem.svelte';
+	import { useTabs } from '$lib/components/Tab/Tab';
+	import Tab from '$lib/components/Tab/Tab.svelte';
+	import TabContainer from '$lib/components/Tab/TabContainer.svelte';
+	import TabSelect from '$lib/components/Tab/TabSelect.svelte';
+	import { sources } from '$lib/stores/user.store';
+	import classNames from 'classnames';
+	import MyListTab from './MyListTab.svelte';
 
-	export let registrar: StackRouterPageProps['registrar'];
-	export let handleGoBack: StackRouterPageProps['handleGoBack'];
+	const tab = useTabs(0, { remount: true });
 
-	let didMount = false;
-	let category = writable<'all' | 'series' | 'movies'>('all');
-
-	const { isLoading, unsubscribe, ...libraryItems } = libraryItemsDataStore.subscribe();
-
-	const sortedLibraryItems = derived(
-		[libraryItems, libraryViewSettings, category],
-		([items, viewSettings, category]) => sortItems(items, viewSettings, category)
-	);
-
-	const libraryItemsCategorized = derived(
-		[sortedLibraryItems, libraryViewSettings],
-		([items, viewSettings]) => {
-			let categorizedItems = {
-				upcoming: [] as LibraryItemDto[],
-				main: [] as LibraryItemDto[],
-				watched: [] as LibraryItemDto[]
-			};
-
-			if (!viewSettings.separateUpcoming && !viewSettings.separateWatched) {
-				return { main: items || [], upcoming: [], watched: [] };
-			}
-
-			for (const item of items) {
-				const releaseDate = new Date(
-					item.release_date || (item.watched && (item.next_episode_to_air as any)?.air_date) || 0
-				);
-				const hasFutureReleases = item.watched
-					? item.seasons?.some((s) => s.air_date === null)
-					: item.last_air_date === null;
-
-				if (viewSettings.separateUpcoming && (releaseDate > new Date() || hasFutureReleases)) {
-					categorizedItems.upcoming.push(item);
-				} else if (viewSettings.separateWatched && item.watched) {
-					categorizedItems.watched.push(item);
-				} else {
-					categorizedItems.main.push(item);
-				}
-			}
-
-			categorizedItems.upcoming.sort((a, b) => {
-				const aReleaseDate = new Date(
-					a.release_date ||
-						a.next_episode_to_air?.air_date ||
-						new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 20
-				);
-
-				const bReleaseDate = new Date(
-					b.release_date ||
-						(b.next_episode_to_air as any)?.air_date ||
-						new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 20
-				);
-
-				return aReleaseDate > bReleaseDate ? 1 : -1;
-			});
-
-			return categorizedItems;
-		}
-	);
-
-	function sortItems(
-		items: LibraryItemDto[] | undefined,
-		viewSettings: LibraryViewSettings,
-		category: 'all' | 'series' | 'movies'
-	) {
-		const filtered =
-			category === 'all'
-				? items?.slice()
-				: items?.filter((i) =>
-						category === 'series' ? i.mediaType === 'Series' : i.mediaType === 'Movie'
-				  );
-
-		return (
-			filtered?.sort((a, b) => {
-				const aCreatedAt = a.createdAt;
-				const bCreatedAt = b.createdAt;
-
-				const aReleaseDate = a.release_date || '';
-				const bReleaseDate = b.release_date || '';
-
-				const aFirstAirDate = a.first_air_date || aReleaseDate;
-				const bFirstAirDate = b.first_air_date || bReleaseDate;
-
-				const aLastAirDate = a.last_air_date || aFirstAirDate || aReleaseDate;
-				const bLastAirDate = b.last_air_date || bFirstAirDate || bReleaseDate;
-
-				const aTitle = a.title || a.name || '';
-
-				const bTitle = b.title || b.name || '';
-
-				const direction = viewSettings.sortDirection === 'asc' ? 1 : -1;
-				if (viewSettings.sortBy === 'date-added') {
-					return direction * aCreatedAt.localeCompare(bCreatedAt);
-				} else if (viewSettings.sortBy === 'first-release-date') {
-					return direction * aFirstAirDate.localeCompare(bFirstAirDate);
-				} else if (viewSettings.sortBy === 'last-release-date') {
-					return direction * aLastAirDate.localeCompare(bLastAirDate);
-				} else if (viewSettings.sortBy === 'title') {
-					return direction * aTitle.localeCompare(bTitle);
-				}
-
-				return 0;
-			}) || []
-		);
-	}
-
-	$: viewSettingsKey = $libraryViewSettings && Symbol();
-
-	onDestroy(() => {
-		unsubscribe();
-	});
+	const catalogues = $sources
+		.filter((s) => s.capabilities.movieIndexing || s.capabilities.episodeIndexing)
+		.map((s) => s.source);
 </script>
 
-<Container class="py-16 space-y-8 min-h-screen flex flex-col" let:hasFocus focusOnMount>
-	{#if !$isLoading}
-		<div class="h-full flex-1 flex flex-col">
-			<Container class="px-32 flex items-center justify-between" direction="horizontal">
-				<Container class="flex space-x-4" direction="horizontal">
-					<TabItem selected={$category === 'all'} on:select={() => category.set('all')}>All</TabItem
-					>
-					<TabItem selected={$category === 'series'} on:select={() => category.set('series')}>
-						Series
-					</TabItem>
-					<TabItem selected={$category === 'movies'} on:select={() => category.set('movies')}>
-						Movies
-					</TabItem>
-				</Container>
-				<Button icon={MixerHorizontal} on:clickOrSelect={() => createModal(OptionsDialog, {})}>
-					Options
-				</Button>
-			</Container>
-			<Container
-				focusOnMount={hasFocus || !didMount}
-				on:mount={() => (didMount = true)}
-				focusedChild
+<Container class="py-16 px-32 space-y-8 min-h-screen flex flex-col" let:hasFocus focusOnMount>
+	<Container direction="horizontal" class="flex space-x-4">
+		<TabSelect tabValue={0} {...tab} let:hasFocus let:isActive>
+			<span
+				class={classNames('font-semibold text-2xl group-focus-within:text-primary-500', {
+					'text-secondary-50': isActive && !hasFocus,
+					'text-secondary-400': !isActive && !hasFocus,
+					'text-primary-500': isActive && hasFocus
+				})}
 			>
-				{#if $libraryItemsCategorized.main.length + $libraryItemsCategorized.upcoming.length + $libraryItemsCategorized.watched.length}
-					{#if $libraryItemsCategorized.upcoming.length}
-						<div class="mt-6">
-							<Carousel
-								header="Upcoming"
-								scrollClass="px-32"
-								on:enter={scrollIntoView({ bottom: 0 })}
-							>
-								{#key viewSettingsKey}
-									{#each $libraryItemsCategorized.upcoming as item (item.tmdbId)}
-										<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-									{/each}
-								{/key}
-							</Carousel>
-						</div>
-					{/if}
-					{#if $libraryItemsCategorized.main.length}
-						<div class="my-6">
-							<div class="px-32 mb-6 h3">My Library</div>
-							<CardGrid class="px-32">
-								{#key viewSettingsKey}
-									{#each $libraryItemsCategorized.main as item, index (item.tmdbId)}
-										<TmdbCard
-											{item}
-											progress={item.playStates?.[0]?.progress || 0}
-											on:enter={scrollIntoView(index === 0 ? { top: 128 + 64 } : { vertical: 128 })}
-											size="dynamic"
-											navigateWithType
-										/>
-									{/each}
-								{/key}
-							</CardGrid>
-						</div>
-					{/if}
-					{#if $libraryItemsCategorized.watched.length}
-						<div class="mt-6 px-32">
-							<div class="mb-6 h3">Watched</div>
-							<CardGrid>
-								{#key viewSettingsKey}
-									{#each $libraryItemsCategorized.watched as item (item.tmdbId)}
-										<TmdbCard
-											{item}
-											progress={item.playStates?.[0]?.progress || 0}
-											on:enter={scrollIntoView({ vertical: 128 })}
-											size="dynamic"
-											navigateWithType
-										/>
-									{/each}
-								{/key}
-							</CardGrid>
-						</div>
-					{/if}
-				{:else}
-					<Container focusOnMount class="h-ghost m-auto">
-						You haven't added anything to your library
-					</Container>
-				{/if}
-			</Container>
-		</div>
-	{/if}
+				My List
+			</span>
+		</TabSelect>
+		{#each catalogues as catalogue, index}
+			<TabSelect tabValue={index + 1} {...tab} let:hasFocus let:isActive>
+				<span
+					class={classNames('font-semibold text-2xl group-focus-within:text-primary-500', {
+						'text-secondary-50': isActive && !hasFocus,
+						'text-secondary-400': !isActive && !hasFocus,
+						'text-primary-500': isActive && hasFocus
+					})}
+				>
+					{catalogue.name}
+				</span>
+			</TabSelect>
+		{/each}
+	</Container>
+	<TabContainer class="flex-1">
+		<Tab tab={0} {...tab}>
+			<MyListTab />
+		</Tab>
+		{#each catalogues as catalogue, index}
+			<Tab tab={index + 1} {...tab}>
+				<Container>
+					{catalogue.name}
+				</Container>
+			</Tab>
+		{/each}
+	</TabContainer>
 </Container>
diff --git a/src/lib/pages/LibraryPage/MyListTab.svelte b/src/lib/pages/LibraryPage/MyListTab.svelte
new file mode 100644
index 0000000..6d18708
--- /dev/null
+++ b/src/lib/pages/LibraryPage/MyListTab.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { LibraryItemDto } from '$lib/apis/reiverr/reiverr.openapi';
+	import Button from '$lib/components/Button.svelte';
+	import Carousel from '$lib/components/Carousel/Carousel.svelte';
+	import Container from '$lib/components/Container.svelte';
+	import { createModal } from '$lib/components/Modal/modal.store';
+	import { getStackRouterControls } from '$lib/components/StackRouter/StackRouter';
+	import { scrollIntoView } from '$lib/selectable';
+	import { libraryItemsDataStore } from '$lib/stores/data.store';
+	import { libraryViewSettings, type LibraryViewSettings } from '$lib/stores/localstorage.store';
+	import { MixerHorizontal } from 'radix-icons-svelte';
+	import { onDestroy } from 'svelte';
+	import { derived, writable } from 'svelte/store';
+	import TmdbCard from '../../components/Card/TmdbCard.svelte';
+	import CardGrid from '../../components/CardGrid.svelte';
+	import OptionsDialog from './OptionsDialog.LibraryPage.svelte';
+	import TabItem from './TabItem.svelte';
+
+	// export let registrar: StackRouterPageProps['registrar'];
+	// export let handleGoBack: StackRouterPageProps['handleGoBack'];
+
+	const { registrar, handleGoBack } = getStackRouterControls();
+
+	let didMount = false;
+	let category = writable<'all' | 'series' | 'movies'>('all');
+
+	const { isLoading, unsubscribe, ...libraryItems } = libraryItemsDataStore.subscribe();
+
+	const sortedLibraryItems = derived(
+		[libraryItems, libraryViewSettings, category],
+		([items, viewSettings, category]) => sortItems(items, viewSettings, category)
+	);
+
+	const libraryItemsCategorized = derived(
+		[sortedLibraryItems, libraryViewSettings],
+		([items, viewSettings]) => {
+			let categorizedItems = {
+				upcoming: [] as LibraryItemDto[],
+				main: [] as LibraryItemDto[],
+				watched: [] as LibraryItemDto[]
+			};
+
+			if (!viewSettings.separateUpcoming && !viewSettings.separateWatched) {
+				return { main: items || [], upcoming: [], watched: [] };
+			}
+
+			for (const item of items) {
+				const releaseDate = new Date(
+					item.release_date || (item.watched && (item.next_episode_to_air as any)?.air_date) || 0
+				);
+				const hasFutureReleases = item.watched
+					? item.seasons?.some((s) => s.air_date === null)
+					: item.last_air_date === null;
+
+				if (viewSettings.separateUpcoming && (releaseDate > new Date() || hasFutureReleases)) {
+					categorizedItems.upcoming.push(item);
+				} else if (viewSettings.separateWatched && item.watched) {
+					categorizedItems.watched.push(item);
+				} else {
+					categorizedItems.main.push(item);
+				}
+			}
+
+			categorizedItems.upcoming.sort((a, b) => {
+				const aReleaseDate = new Date(
+					a.release_date ||
+						a.next_episode_to_air?.air_date ||
+						new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 20
+				);
+
+				const bReleaseDate = new Date(
+					b.release_date ||
+						(b.next_episode_to_air as any)?.air_date ||
+						new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 20
+				);
+
+				return aReleaseDate > bReleaseDate ? 1 : -1;
+			});
+
+			return categorizedItems;
+		}
+	);
+
+	function sortItems(
+		items: LibraryItemDto[] | undefined,
+		viewSettings: LibraryViewSettings,
+		category: 'all' | 'series' | 'movies'
+	) {
+		const filtered =
+			category === 'all'
+				? items?.slice()
+				: items?.filter((i) =>
+						category === 'series' ? i.mediaType === 'Series' : i.mediaType === 'Movie'
+				  );
+
+		return (
+			filtered?.sort((a, b) => {
+				const aCreatedAt = a.createdAt;
+				const bCreatedAt = b.createdAt;
+
+				const aReleaseDate = a.release_date || '';
+				const bReleaseDate = b.release_date || '';
+
+				const aFirstAirDate = a.first_air_date || aReleaseDate;
+				const bFirstAirDate = b.first_air_date || bReleaseDate;
+
+				const aLastAirDate = a.last_air_date || aFirstAirDate || aReleaseDate;
+				const bLastAirDate = b.last_air_date || bFirstAirDate || bReleaseDate;
+
+				const aTitle = a.title || a.name || '';
+
+				const bTitle = b.title || b.name || '';
+
+				const direction = viewSettings.sortDirection === 'asc' ? 1 : -1;
+				if (viewSettings.sortBy === 'date-added') {
+					return direction * aCreatedAt.localeCompare(bCreatedAt);
+				} else if (viewSettings.sortBy === 'first-release-date') {
+					return direction * aFirstAirDate.localeCompare(bFirstAirDate);
+				} else if (viewSettings.sortBy === 'last-release-date') {
+					return direction * aLastAirDate.localeCompare(bLastAirDate);
+				} else if (viewSettings.sortBy === 'title') {
+					return direction * aTitle.localeCompare(bTitle);
+				}
+
+				return 0;
+			}) || []
+		);
+	}
+
+	$: viewSettingsKey = $libraryViewSettings && Symbol();
+
+	onDestroy(() => {
+		unsubscribe();
+	});
+</script>
+
+<Container class="py-16 space-y-8 min-h-screen flex flex-col" let:hasFocus focusOnMount>
+	{#if !$isLoading}
+		<div class="h-full flex-1 flex flex-col">
+			<Container class="px-32 flex items-center justify-between" direction="horizontal">
+				<Container class="flex space-x-4" direction="horizontal">
+					<TabItem selected={$category === 'all'} on:select={() => category.set('all')}>All</TabItem
+					>
+					<TabItem selected={$category === 'series'} on:select={() => category.set('series')}>
+						Series
+					</TabItem>
+					<TabItem selected={$category === 'movies'} on:select={() => category.set('movies')}>
+						Movies
+					</TabItem>
+				</Container>
+				<Button icon={MixerHorizontal} on:clickOrSelect={() => createModal(OptionsDialog, {})}>
+					Options
+				</Button>
+			</Container>
+			<Container
+				focusOnMount={hasFocus || !didMount}
+				on:mount={() => (didMount = true)}
+				focusedChild
+			>
+				{#if $libraryItemsCategorized.main.length + $libraryItemsCategorized.upcoming.length + $libraryItemsCategorized.watched.length}
+					{#if $libraryItemsCategorized.upcoming.length}
+						<div class="mt-6">
+							<Carousel
+								header="Upcoming"
+								scrollClass="px-32"
+								on:enter={scrollIntoView({ bottom: 0 })}
+							>
+								{#key viewSettingsKey}
+									{#each $libraryItemsCategorized.upcoming as item (item.tmdbId)}
+										<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
+									{/each}
+								{/key}
+							</Carousel>
+						</div>
+					{/if}
+					{#if $libraryItemsCategorized.main.length}
+						<div class="my-6">
+							<div class="px-32 mb-6 h3">My List</div>
+							<CardGrid class="px-32">
+								{#key viewSettingsKey}
+									{#each $libraryItemsCategorized.main as item, index (item.tmdbId)}
+										<TmdbCard
+											{item}
+											progress={item.playStates?.[0]?.progress || 0}
+											on:enter={scrollIntoView(index === 0 ? { top: 128 + 64 } : { vertical: 128 })}
+											size="dynamic"
+											navigateWithType
+										/>
+									{/each}
+								{/key}
+							</CardGrid>
+						</div>
+					{/if}
+					{#if $libraryItemsCategorized.watched.length}
+						<div class="mt-6 px-32">
+							<div class="mb-6 h3">Watched</div>
+							<CardGrid>
+								{#key viewSettingsKey}
+									{#each $libraryItemsCategorized.watched as item (item.tmdbId)}
+										<TmdbCard
+											{item}
+											progress={item.playStates?.[0]?.progress || 0}
+											on:enter={scrollIntoView({ vertical: 128 })}
+											size="dynamic"
+											navigateWithType
+										/>
+									{/each}
+								{/key}
+							</CardGrid>
+						</div>
+					{/if}
+				{:else}
+					<Container focusOnMount class="h-ghost m-auto">
+						You haven't added anything to your library
+					</Container>
+				{/if}
+			</Container>
+		</div>
+	{/if}
+</Container>
diff --git a/src/lib/stores/data.store.ts b/src/lib/stores/data.store.ts
index e29bab7..70dfc91 100644
--- a/src/lib/stores/data.store.ts
+++ b/src/lib/stores/data.store.ts
@@ -119,6 +119,7 @@ export function useRequestsStore<TArgs extends Array<unknown>, TResponse>(
 
 				if (subscribers?.length === 0 && options.persistant !== true) {
 					requests.delete(JSON.stringify(args));
+					console.log('deleting request', args);
 				}
 			}
 		};