Completed discovery page

2023-07-31 00:09:07 +03:00
parent 77153a96c5
commit 8e60c8fad2
37 changed files with 876 additions and 325 deletions
--- a/README.md
+++ b/README.md
@@ -2,14 +2,14 @@

 TODO:

- [x] Jellyfin video sync
+- [ ] Season Group Downloads
 - [ ] Mass edit local files & show space left
 - [ ] Finish discover page
 - [ ] Onboarding setup & sources
 - [ ] Settings page
- [ ] Sonarr support
 - [ ] Event notifications & show indexer status
- [ ] Plex video sync
+- [ ] Library filters
+- [ ] People Pages

 FIX:

@@ -22,3 +22,8 @@ Further ideas
 - [ ] Similar movies & shows, actor pages and recommendations
 - [ ] Watchlist management
 - [ ] Download a movie file
+- [ ] Show & write reviews
+- [ ] TMDB Watched list
+- [ ] People & Actors page
+- [ ] Similar movies & shows recommendations
+- [ ] Plex video sync
--- a/src/lib/apis/sonarr/sonarrApi.ts
+++ b/src/lib/apis/sonarr/sonarrApi.ts
@@ -178,15 +178,24 @@ export const getSonarrEpisodes = async (seriesId: number) => {
 	}));
 };

-export const fetchSonarrReleases = async (episodeId: number) => {
-	return SonarrApi.get('/api/v3/release', {
+export const fetchSonarrReleases = async (episodeId: number) =>
+	SonarrApi.get('/api/v3/release', {
 		params: {
 			query: {
 				episodeId
 			}
 		}
 	}).then((r) => r.data || []);
-};
+
+export const fetchSonarrSeasonReleases = async (seriesId: number, seasonNumber: number) =>
+	SonarrApi.get('/api/v3/release', {
+		params: {
+			query: {
+				seriesId,
+				seasonNumber
+			}
+		}
+	}).then((r) => r.data || []);

 export const fetchSonarrEpisodes = async (seriesId: number): Promise<SonarrEpisode[]> => {
 	return SonarrApi.get('/api/v3/episode', {
--- a/src/lib/apis/tmdb/tmdbApi.ts
+++ b/src/lib/apis/tmdb/tmdbApi.ts
@@ -1,24 +1,30 @@
 import axios from 'axios';
 import { PUBLIC_TMDB_API_KEY } from '$env/static/public';
-import { request } from '$lib/utils';
+import { formatDateToYearMonthDay, request } from '$lib/utils';
 import type { operations, paths } from './tmdb.generated';
 import createClient from 'openapi-fetch';
+import { get } from 'svelte/store';
+import { getIncludedLanguagesQuery, settings } from '$lib/stores/settings.store';
+import type { ComponentProps } from 'svelte';
+import type PeopleCard from '$lib/components/PeopleCard/PeopleCard.svelte';

-export type SeriesDetails =
+export type TmdbMovie2 =
+	operations['movie-details']['responses']['200']['content']['application/json'];
+export type TmdbSeries2 =
 	operations['tv-series-details']['responses']['200']['content']['application/json'];
-export type SeasonDetails =
+export type TmdbSeason =
 	operations['tv-season-details']['responses']['200']['content']['application/json'];
-export interface SeriesDetailsFull extends SeriesDetails {
-	videos: {
-		results: Video[];
-	};
-	credits: {
-		cast: CastMember[];
-	};
-	external_ids: {
-		imdb_id?: string;
-		tvdb_id?: number;
-	};
+
+export interface TmdbMovieFull2 extends TmdbMovie2 {
+	videos: operations['movie-videos']['responses']['200']['content']['application/json'];
+	credits: operations['movie-credits']['responses']['200']['content']['application/json'];
+	external_ids: operations['movie-external-ids']['responses']['200']['content']['application/json'];
+}
+
+export interface TmdbSeriesFull2 extends TmdbSeries2 {
+	videos: operations['tv-series-videos']['responses']['200']['content']['application/json'];
+	credits: operations['tv-series-credits']['responses']['200']['content']['application/json'];
+	external_ids: operations['tv-series-external-ids']['responses']['200']['content']['application/json'];
 }

 export const TmdbApiOpen = createClient<paths>({
@@ -35,17 +41,12 @@ export const getTmdbMovie = async (tmdbId: number) =>
 				movie_id: tmdbId
 			},
 			query: {
-				append_to_response: 'videos,credits'
+				append_to_response: 'videos,credits,external_ids'
 			}
 		}
-	}).then((res) => res.data as TmdbMovieFull | undefined);
+	}).then((res) => res.data as TmdbMovieFull2 | undefined);

-export const getTmdbPopularMovies = () =>
-	TmdbApiOpen.get('/3/movie/popular', {
-		params: {}
-	}).then((res) => res.data?.results || []);
-
-export const getTmdbSeriesFromTvdbId = async (tvdbId: number): Promise<any> =>
+export const getTmdbSeriesFromTvdbId = async (tvdbId: number) =>
 	TmdbApiOpen.get('/3/find/{external_id}', {
 		params: {
 			path: {
@@ -58,12 +59,12 @@ export const getTmdbSeriesFromTvdbId = async (tvdbId: number): Promise<any> =>
 		headers: {
 			'Cache-Control': 'max-age=86400'
 		}
-	}).then((res) => res.data?.tv_results?.[0]);
+	}).then((res) => res.data?.tv_results?.[0] as TmdbSeries2 | undefined);

 export const getTmdbIdFromTvdbId = async (tvdbId: number) =>
 	getTmdbSeriesFromTvdbId(tvdbId).then((res: any) => res?.id as number | undefined);

-export const getTmdbSeries = async (tmdbId: number): Promise<SeriesDetailsFull | undefined> =>
+export const getTmdbSeries = async (tmdbId: number): Promise<TmdbSeriesFull2 | undefined> =>
 	await TmdbApiOpen.get('/3/tv/{series_id}', {
 		params: {
 			path: {
@@ -73,12 +74,12 @@ export const getTmdbSeries = async (tmdbId: number): Promise<SeriesDetailsFull |
 				append_to_response: 'videos,credits,external_ids'
 			}
 		}
-	}).then((res) => res.data as SeriesDetailsFull | undefined);
+	}).then((res) => res.data as TmdbSeriesFull2 | undefined);

 export const getTmdbSeriesSeason = async (
 	tmdbId: number,
 	season: number
-): Promise<SeasonDetails | undefined> =>
+): Promise<TmdbSeason | undefined> =>
 	TmdbApiOpen.get('/3/tv/{series_id}/season/{season_number}', {
 		params: {
 			path: {
@@ -90,7 +91,7 @@ export const getTmdbSeriesSeason = async (

 export const getTmdbSeriesSeasons = async (tmdbId: number, seasons: number) =>
 	Promise.all([...Array(seasons).keys()].map((i) => getTmdbSeriesSeason(tmdbId, i + 1))).then(
-		(r) => r.filter((s) => s) as SeasonDetails[]
+		(r) => r.filter((s) => s) as TmdbSeason[]
 	);

 export const getTmdbSeriesImages = async (tmdbId: number) =>
@@ -101,12 +102,128 @@ export const getTmdbSeriesImages = async (tmdbId: number) =>
 			}
 		},
 		headers: {
-			'Cache-Control': 'max-age=86400'
+			'Cache-Control': 'max-age=345600' // 4 days
 		}
 	}).then((res) => res.data);

+export const getTmdbSeriesBackdrop = async (tmdbId: number) =>
+	getTmdbSeriesImages(tmdbId).then(
+		(r) =>
+			(
+				r?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+				r?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
+				r?.backdrops?.find((b) => b.iso_639_1) ||
+				r?.backdrops?.[0]
+			)?.file_path
+	);
+
+export const getTmdbMovieImages = async (tmdbId: number) =>
+	await TmdbApiOpen.get('/3/movie/{movie_id}/images', {
+		params: {
+			path: {
+				movie_id: tmdbId
+			}
+		},
+		headers: {
+			'Cache-Control': 'max-age=345600' // 4 days
+		}
+	}).then((res) => res.data);
+
+export const getTmdbMovieBackdrop = async (tmdbId: number) =>
+	getTmdbMovieImages(tmdbId).then(
+		(r) =>
+			(
+				r?.backdrops?.find((b) => b.iso_639_1 === get(settings).language) ||
+				r?.backdrops?.find((b) => b.iso_639_1 === 'en') ||
+				r?.backdrops?.find((b) => b.iso_639_1) ||
+				r?.backdrops?.[0]
+			)?.file_path
+	);
+
+export const getTmdbPopularMovies = () =>
+	TmdbApiOpen.get('/3/movie/popular', {
+		params: {
+			query: {
+				language: get(settings).language,
+				region: get(settings).region
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbPopularSeries = () =>
+	TmdbApiOpen.get('/3/tv/popular', {
+		params: {
+			query: {
+				language: get(settings).language
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbTrendingAll = () =>
+	TmdbApiOpen.get('/3/trending/all/{time_window}', {
+		params: {
+			path: {
+				time_window: 'day'
+			},
+			query: {
+				language: get(settings).language
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbNetworkSeries = (networkId: number) =>
+	TmdbApiOpen.get('/3/discover/tv', {
+		params: {
+			query: {
+				with_networks: networkId
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbDigitalReleases = () =>
+	TmdbApiOpen.get('/3/discover/movie', {
+		params: {
+			query: {
+				with_release_type: 4,
+				sort_by: 'popularity.desc',
+				...getIncludedLanguagesQuery()
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbUpcomingMovies = () =>
+	TmdbApiOpen.get('/3/discover/movie', {
+		params: {
+			query: {
+				'primary_release_date.gte': formatDateToYearMonthDay(new Date()),
+				sort_by: 'popularity.desc',
+				...getIncludedLanguagesQuery()
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTrendingActors = () =>
+	TmdbApiOpen.get('/3/trending/person/{time_window}', {
+		params: {
+			path: {
+				time_window: 'week'
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbGenreMovies = (genreId: number) =>
+	TmdbApiOpen.get('/3/discover/movie', {
+		params: {
+			query: {
+				with_genres: String(genreId),
+				...getIncludedLanguagesQuery()
+			}
+		}
+	}).then((res) => res.data?.results || []);
+
 // Deprecated hereon forward

+/** @deprecated */
 export const TmdbApi = axios.create({
 	baseURL: 'https://api.themoviedb.org/3',
 	headers: {
@@ -114,27 +231,26 @@ export const TmdbApi = axios.create({
 	}
 });

+/** @deprecated */
 export const fetchTmdbMovie = async (tmdbId: string): Promise<TmdbMovie> =>
 	await TmdbApi.get<TmdbMovie>('/movie/' + tmdbId).then((r) => r.data);

+/** @deprecated */
 export const fetchTmdbMovieVideos = async (tmdbId: string): Promise<Video[]> =>
 	await TmdbApi.get<VideosResponse>('/movie/' + tmdbId + '/videos').then((res) => res.data.results);

+/** @deprecated */
 export const fetchTmdbMovieImages = async (tmdbId: string): Promise<ImagesResponse> =>
 	await TmdbApi.get<ImagesResponse>('/movie/' + tmdbId + '/images', {
 		headers: {
-			'Cache-Control': 'max-age=86400'
+			'Cache-Control': 'max-age=345600' // 4 days
 		}
 	}).then((res) => res.data);

+/** @deprecated */
 export const fetchTmdbMovieCredits = async (tmdbId: string): Promise<CastMember[]> =>
 	await TmdbApi.get<CreditsResponse>('/movie/' + tmdbId + '/credits').then((res) => res.data.cast);

-export const fetchTmdbPopularMovies = () =>
-	TmdbApi.get<PopularMoviesResponse>('/movie/popular').then((res) => res.data.results);
-
-export const requestTmdbPopularMovies = () => request(fetchTmdbPopularMovies, null);
-
 export interface TmdbMovieFull extends TmdbMovie {
 	videos: {
 		results: Video[];
--- a/src/lib/components/Card/Card.svelte
+++ b/src/lib/components/Card/Card.svelte
@@ -4,14 +4,14 @@
 	import { TMDB_IMAGES } from '$lib/constants';
 	import { Clock, Star } from 'radix-icons-svelte';

-	export let tmdbId: string;
+	export let tmdbId: number;
 	export let type: 'movie' | 'series' = 'movie';
 	export let title: string;
-	export let genres: string[];
+	export let genres: string[] = [];
 	export let runtimeMinutes = 0;
 	export let seasons = 0;
 	export let completionTime = '';
-	export let backdropUrl: string;
+	export let backdropUri: string;
 	export let rating: number;

 	export let available = true;
@@ -23,22 +23,19 @@
 	}
 </script>

-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-	tabindex={0}
+<a
 	class={classNames(
-		'rounded overflow-hidden relative shadow-2xl shrink-0 aspect-video selectable',
+		'rounded overflow-hidden relative shadow-lg shrink-0 aspect-video selectable block hover:text-inherit',
 		{
 			'h-40': size === 'md',
 			'h-60': size === 'lg',
 			'w-full': size === 'dynamic'
 		}
 	)}
+	href={`/${type}/${tmdbId}`}
 >
 	<div style={'width: ' + progress + '%'} class="h-[2px] bg-zinc-200 bottom-0 absolute z-[1]" />
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
-		on:click={() => window.open(`/${type}/${tmdbId}`, '_self')}
 		class="h-full w-full opacity-0 hover:opacity-100 transition-opacity flex flex-col justify-between cursor-pointer p-2 px-3 relative z-[1] peer"
 		style={progress > 0 ? 'padding-bottom: 0.6rem;' : ''}
 	>
@@ -82,7 +79,7 @@
 		</div>
 	</div>
 	<div
-		style={"background-image: url('" + TMDB_IMAGES + backdropUrl + "')"}
+		style={"background-image: url('" + TMDB_IMAGES + backdropUri + "')"}
 		class="absolute inset-0 bg-center bg-cover peer-hover:scale-105 transition-transform"
 	/>
 	<div
@@ -91,4 +88,4 @@
 			'bg-[#00000055] peer-hover:bg-darken': !available
 		})}
 	/>
-</div>
+</a>
--- a/src/lib/components/Card/CardGrid.svelte
+++ b/src/lib/components/Card/CardGrid.svelte
@@ -0,0 +1,3 @@
+<div class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+	<slot />
+</div>
--- a/src/lib/components/Card/card.ts
+++ b/src/lib/components/Card/card.ts
@@ -1,42 +1,47 @@
 import type { RadarrMovie } from '$lib/apis/radarr/radarrApi';
-import { fetchTmdbMovieImages } from '$lib/apis/tmdb/tmdbApi';
-import type { TmdbMovie } from '$lib/apis/tmdb/tmdbApi';
+import {
+	fetchTmdbMovieImages,
+	getTmdbMovieBackdrop,
+	getTmdbMovieImages,
+	getTmdbSeriesBackdrop,
+	getTmdbSeriesImages
+} from '$lib/apis/tmdb/tmdbApi';
+import type { TmdbMovie, TmdbMovie2, TmdbSeries2 } from '$lib/apis/tmdb/tmdbApi';
+import type { ComponentProps } from 'svelte';
+import type Card from './Card.svelte';

-export interface CardProps {
-	tmdbId: string;
-	title: string;
-	genres: string[];
-	runtimeMinutes: number;
-	backdropUrl: string;
-	rating: number;
-}
-
-export const fetchCardProps = async (movie: RadarrMovie): Promise<CardProps> => {
-	const backdropUrl = fetchTmdbMovieImages(String(movie.tmdbId)).then(
-		(r) => r.backdrops.filter((b) => b.iso_639_1 === 'en')[0].file_path
-	);
+export const fetchCardTmdbMovieProps = async (movie: TmdbMovie2): Promise<ComponentProps<Card>> => {
+	const backdropUri = getTmdbMovieBackdrop(movie.id || 0);

 	return {
-		tmdbId: String(movie.tmdbId),
-		title: String(movie.title),
-		genres: movie.genres as string[],
-		runtimeMinutes: movie.runtime as any,
-		backdropUrl: await backdropUrl,
-		rating: movie.ratings?.tmdb?.value || movie.ratings?.imdb?.value || 0
-	};
-};
-
-export const fetchCardPropsTmdb = async (movie: TmdbMovie): Promise<CardProps> => {
-	const backdropUrl = fetchTmdbMovieImages(String(movie.id))
-		.then((r) => r.backdrops.filter((b) => b.iso_639_1 === 'en')[0]?.file_path)
-		.catch(console.error);
-
-	return {
-		tmdbId: String(movie.id),
-		title: String(movie.original_title),
-		genres: movie.genres.map((g) => g.name),
+		tmdbId: movie.id || 0,
+		title: movie.title || '',
+		genres: movie.genres?.map((g) => g.name || '') || [],
 		runtimeMinutes: movie.runtime,
-		backdropUrl: (await backdropUrl) || '',
+		backdropUri: (await backdropUri) || '',
 		rating: movie.vote_average || 0
 	};
 };
+
+export const fetchCardTmdbSeriesProps = async (
+	series: TmdbSeries2
+): Promise<ComponentProps<Card>> => {
+	const backdropUri = getTmdbSeriesBackdrop(series.id || 0);
+
+	return {
+		tmdbId: series.id || 0,
+		title: series.name || '',
+		genres: series.genres?.map((g) => g.name || '') || [],
+		runtimeMinutes: series.episode_run_time?.[0],
+		backdropUri: (await backdropUri) || '',
+		rating: series.vote_average || 0,
+		type: 'series'
+	};
+};
+
+export const fetchCardTmdbProps = async (
+	item: TmdbSeries2 | TmdbMovie2
+): Promise<ComponentProps<Card>> => {
+	if ('name' in item) return fetchCardTmdbSeriesProps(item);
+	return fetchCardTmdbMovieProps(item);
+};
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -14,14 +14,14 @@
 	<div class="flex gap-2">
 		<IconButton
 			on:click={() => {
-				carousel?.scrollTo({ left: scrollX - carousel?.clientWidth, behavior: 'smooth' });
+				carousel?.scrollTo({ left: scrollX - carousel?.clientWidth * 0.8, behavior: 'smooth' });
 			}}
 		>
 			<ChevronLeft size={20} />
 		</IconButton>
 		<IconButton
 			on:click={() => {
-				carousel?.scrollTo({ left: scrollX + carousel?.clientWidth, behavior: 'smooth' });
+				carousel?.scrollTo({ left: scrollX + carousel?.clientWidth * 0.8, behavior: 'smooth' });
 			}}
 		>
 			<ChevronRight size={20} />
--- a/src/lib/components/GenreCard.svelte
+++ b/src/lib/components/GenreCard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Genre } from '$lib/discover';
+	import { capitalize } from '$lib/utils';
+
+	export let genre: Genre;
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<a
+	class="rounded-xl overflow-hidden relative shadow-2xl shrink-0 aspect-[21/9] selectable h-40 block"
+	href={`/discover/genre/${genre.name}`}
+>
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		class="h-full w-full flex flex-col items-center justify-center cursor-pointer p-2 px-3 relative z-[1] peer"
+	>
+		<h1 class="font-bold text-2xl tracking-wider">
+			{capitalize(genre.name)}
+		</h1>
+	</div>
+	<div
+		style={"background-image: url('/genres/" + genre.name + ".jpg')"}
+		class="absolute inset-0 bg-center bg-cover peer-hover:scale-105 transition-transform"
+	/>
+	<div class="absolute inset-0 bg-darken bg-opacity-60" />
+</a>
--- a/src/lib/components/GridPage/GridPage.svelte
+++ b/src/lib/components/GridPage/GridPage.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ChevronLeft } from 'radix-icons-svelte';
+	import IconButton from '../IconButton.svelte';
+	import CardGrid from '../Card/CardGrid.svelte';
+	import CardPlaceholder from '../Card/CardPlaceholder.svelte';
+	import { capitalize } from '$lib/utils';
+
+	export let title: string;
+</script>
+
+<div class="pt-24 p-8 bg-black">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="flex flex-col gap-1 items-start">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<h1 class="font-bold text-5xl">{capitalize(title)}</h1>
+		<div
+			class="flex items-center cursor-pointer hover:text-zinc-200 text-zinc-400 transition-colors"
+			on:click={() => window?.history?.back()}
+		>
+			<ChevronLeft size={20} />
+			<h2>Back</h2>
+		</div>
+	</div>
+</div>
+
+<div class="p-8">
+	<CardGrid>
+		<slot>
+			{#each [...Array(20).keys()] as index (index)}
+				<CardPlaceholder size="dynamic" {index} />
+			{/each}
+		</slot>
+	</CardGrid>
+</div>
--- a/src/lib/components/NetworkCard.svelte
+++ b/src/lib/components/NetworkCard.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Network } from '$lib/discover';
+
+	export let network: Network;
+</script>
+
+<a
+	href={`/discover/network/${network.name}`}
+	class="border rounded-xl h-52 w-96 bg-stone-800 border-stone-700 cursor-pointer p-12 text-zinc-300 hover:text-amber-200 transition-all relative group selectable"
+>
+	<div
+		class="absolute inset-10 bg-zinc-300 hover:bg-amber-200 group-hover:scale-105 transition-all"
+		style={"mask-image: url('/networks/" +
+			network.name +
+			".svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;"}
+	/>
+</a>
--- a/src/lib/components/PeopleCard/PeopleCard.svelte
+++ b/src/lib/components/PeopleCard/PeopleCard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { TMDB_IMAGES } from '$lib/constants';
+	import classNames from 'classnames';
+
+	export let tmdbId: number;
+	export let knownFor: string[];
+	export let name: string;
+	export let backdropUri: string;
+	export let department: string;
+	export let size: 'dynamic' | 'md' | 'lg' = 'lg';
+</script>
+
+<a
+	class={classNames(
+		'rounded-xl overflow-hidden relative shadow-lg shrink-0 aspect-[4/5] selectable block hover:text-inherit',
+		{
+			'h-40': size === 'md',
+			'h-52': size === 'lg',
+			'w-full': size === 'dynamic'
+		}
+	)}
+	href={`/person/${tmdbId}`}
+>
+	<div
+		class="h-full w-full transition-opacity flex flex-col justify-between cursor-pointer relative z-[1] peer group"
+	>
+		<div class="opacity-0 group-hover:opacity-100">
+			<!-- <h2 class="text-sm text-zinc-300 tracking-wider font-medium line-clamp-2">
+				{knownFor.join(', ')}
+			</h2> -->
+		</div>
+		<div class="bg-gradient-to-t from-darken from-20% to-transparent p-2 px-3 pt-8">
+			<h2
+				class="text-xs text-zinc-300 tracking-wider font-medium opacity-0 group-hover:opacity-100"
+			>
+				{department}
+			</h2>
+			<h1 class="font-bold tracking-wider text-lg">{name}</h1>
+		</div>
+	</div>
+	<div
+		style={"background-image: url('" + TMDB_IMAGES + backdropUri + "')"}
+		class="absolute inset-0 bg-center bg-cover peer-hover:scale-105 transition-transform"
+	/>
+</a>
--- a/src/lib/discover.ts
+++ b/src/lib/discover.ts
@@ -0,0 +1,115 @@
+export interface Network {
+	name: string;
+	tmdbNetworkId: number;
+}
+
+export const networks: Record<string, Network> = {
+	netflix: {
+		name: 'netflix',
+		tmdbNetworkId: 213
+	},
+	disney: {
+		name: 'disney',
+		tmdbNetworkId: 2739
+	},
+	hbo: {
+		name: 'hbo',
+		tmdbNetworkId: 49
+	},
+	hulu: {
+		name: 'hulu',
+		tmdbNetworkId: 453
+	},
+	amazon: {
+		name: 'amazon',
+		tmdbNetworkId: 1024
+	},
+	apple: {
+		name: 'apple',
+		tmdbNetworkId: 2552
+	}
+};
+
+export interface Genre {
+	name: string;
+	tmdbGenreId: number;
+}
+
+export const genres: Record<string, Genre> = {
+	action: {
+		name: 'action',
+		tmdbGenreId: 28
+	},
+	adventure: {
+		name: 'adventure',
+		tmdbGenreId: 12
+	},
+	animation: {
+		name: 'animation',
+		tmdbGenreId: 16
+	},
+	comedy: {
+		name: 'comedy',
+		tmdbGenreId: 35
+	},
+	crime: {
+		name: 'crime',
+		tmdbGenreId: 80
+	},
+	documentary: {
+		name: 'documentary',
+		tmdbGenreId: 99
+	},
+	drama: {
+		name: 'drama',
+		tmdbGenreId: 18
+	},
+	family: {
+		name: 'family',
+		tmdbGenreId: 10751
+	},
+	fantasy: {
+		name: 'fantasy',
+		tmdbGenreId: 14
+	},
+	history: {
+		name: 'history',
+		tmdbGenreId: 36
+	},
+	horror: {
+		name: 'horror',
+		tmdbGenreId: 27
+	},
+	music: {
+		name: 'music',
+		tmdbGenreId: 10402
+	},
+	mystery: {
+		name: 'mystery',
+		tmdbGenreId: 9648
+	},
+	romance: {
+		name: 'romance',
+		tmdbGenreId: 10749
+	},
+	scienceFiction: {
+		name: 'scienceFiction',
+		tmdbGenreId: 878
+	},
+	tvMovie: {
+		name: 'tvMovie',
+		tmdbGenreId: 10770
+	},
+	thriller: {
+		name: 'thriller',
+		tmdbGenreId: 53
+	},
+	war: {
+		name: 'war',
+		tmdbGenreId: 10752
+	},
+	western: {
+		name: 'western',
+		tmdbGenreId: 37
+	}
+};
--- a/src/lib/stores/library.store.ts
+++ b/src/lib/stores/library.store.ts
@@ -17,10 +17,12 @@ import {
 } from '$lib/apis/sonarr/sonarrApi';
 import {
 	fetchTmdbMovieImages,
+	getTmdbMovieBackdrop,
+	getTmdbSeriesBackdrop,
 	getTmdbSeriesFromTvdbId,
 	getTmdbSeriesImages
 } from '$lib/apis/tmdb/tmdbApi';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';

 export interface PlayableItem {
 	type: 'movie' | 'series';
@@ -101,9 +103,7 @@ async function getLibrary(): Promise<Library> {
 				? { length, progress: watchingProgress }
 				: undefined;

-		const backdropUrl = await fetchTmdbMovieImages(String(radarrMovie.tmdbId)).then(
-			(r) => r.backdrops.find((b) => b.iso_639_1 === 'en')?.file_path
-		);
+		const backdropUrl = await getTmdbMovieBackdrop(radarrMovie.tmdbId || 0);

 		return {
 			type: 'movie' as const,
@@ -155,16 +155,12 @@ async function getLibrary(): Promise<Library> {
 			: undefined;
 		const tmdbId = tmdbItem?.id || undefined;

-		const backdropUrl = tmdbId
-			? await getTmdbSeriesImages(tmdbId).then(
-					(r) => r?.backdrops?.find((b) => b.iso_639_1 === 'en')?.file_path
-			  )
-			: undefined;
+		const backdropUrl = tmdbId ? await getTmdbSeriesBackdrop(tmdbId) : undefined;

 		return {
 			type: 'series' as const,
 			tmdbId,
-			tmdbRating: tmdbItem.vote_average || 0,
+			tmdbRating: tmdbItem?.vote_average || 0,
 			cardBackdropUrl: backdropUrl || '',
 			download,
 			continueWatching,
@@ -192,9 +188,16 @@ async function getLibrary(): Promise<Library> {
 function createLibraryStore() {
 	const { update, set, ...library } = writable<Promise<Library>>(getLibrary()); //TODO promise to undefined

+	async function filterNotInLibrary<T extends any>(toFilter: T[], getTmdbId: (item: T) => any) {
+		const libraryData = await get(library);
+
+		return toFilter.filter((item) => !(getTmdbId(item) in libraryData.items));
+	}
+
 	return {
 		...library,
-		refresh: async () => getLibrary().then((r) => set(Promise.resolve(r)))
+		refresh: async () => getLibrary().then((r) => set(Promise.resolve(r))),
+		filterNotInLibrary
 	};
 }

--- a/src/lib/stores/settings.store.ts
+++ b/src/lib/stores/settings.store.ts
@@ -1,11 +1,34 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';

 interface Settings {
 	autoplayTrailers: boolean;
+	excludeLibraryItemsFromDiscovery: boolean;
+	language: string;
+	region: string;
+	discover: {
+		includedLanguages: string[];
+		filterBasedOnLanguage: boolean;
+	};
 }

 const defaultSettings: Settings = {
-	autoplayTrailers: true
+	autoplayTrailers: true,
+	excludeLibraryItemsFromDiscovery: true,
+	language: 'en',
+	region: 'US',
+	discover: {
+		filterBasedOnLanguage: true,
+		includedLanguages: ['en']
+	}
 };

 export const settings = writable<Settings>(defaultSettings);
+
+export const getIncludedLanguagesQuery = () => {
+	const settingsValue = get(settings);
+	if (settingsValue.discover.filterBasedOnLanguage) {
+		return { with_original_language: settingsValue.language };
+	}
+
+	return {};
+};
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -79,3 +79,16 @@ export function log(arg: any) {
 	console.log('LOGGER', arg);
 	return arg;
 }
+
+export function formatDateToYearMonthDay(date: Date) {
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+
+	return `${year}-${month}-${day}`;
+}
+
+export function capitalize(str: string) {
+	const strings = str.split(' ');
+	return strings.map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
+}
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,6 +1,5 @@
-import { getTmdbMovie, getTmdbPopularMovies, TmdbApi } from '$lib/apis/tmdb/tmdbApi';
-import type { TmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 import { getJellyfinContinueWatching } from '$lib/apis/jellyfin/jellyfinApi';
+import { getTmdbPopularMovies } from '$lib/apis/tmdb/tmdbApi';
 import type { PageServerLoad } from './$types';

 export const load = (async () => {
--- a/src/routes/discover/+page.server.ts
+++ b/src/routes/discover/+page.server.ts
@@ -1,19 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { fetchTmdbMovie, fetchTmdbPopularMovies } from '$lib/apis/tmdb/tmdbApi';
-import { fetchCardPropsTmdb } from '$lib/components/Card/card';
-
-export const load = (() => {
-	const popularMoviesPromise = fetchTmdbPopularMovies();
-
-	const popularMovies = popularMoviesPromise.then((movies) => {
-		return Promise.all(
-			movies.map(async (movie) => fetchCardPropsTmdb(await fetchTmdbMovie(String(movie.id))))
-		);
-	});
-
-	return {
-		streamed: {
-			popularMovies
-		}
-	};
-}) satisfies PageServerLoad;
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -1,80 +1,166 @@
 <script lang="ts">
-	import { getTmdbMovie, fetchTmdbPopularMovies, fetchTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
+	import {
+		TmdbApiOpen,
+		getTmdbDigitalReleases,
+		getTmdbTrendingAll,
+		getTmdbUpcomingMovies,
+		getTrendingActors,
+		type TmdbMovie2,
+		type TmdbSeries2
+	} from '$lib/apis/tmdb/tmdbApi';
 	import Card from '$lib/components/Card/Card.svelte';
-	import { fetchCardPropsTmdb } from '$lib/components/Card/card';
+	import { fetchCardTmdbProps } from '$lib/components/Card/card';
 	import Carousel from '$lib/components/Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
+	import GenreCard from '$lib/components/GenreCard.svelte';
+	import NetworkCard from '$lib/components/NetworkCard.svelte';
+	import PeopleCard from '$lib/components/PeopleCard/PeopleCard.svelte';
+	import { genres, networks } from '$lib/discover';
 	import { library } from '$lib/stores/library.store';
-	import AmazonCard from './AmazonCard.svelte';
-	import DisneyCard from './DisneyCard.svelte';
-	import HboCard from './HboCard.svelte';
-	import HuluCard from './HuluCard.svelte';
-	import NetflixCard from './NetflixCard.svelte';
+	import { getIncludedLanguagesQuery, settings } from '$lib/stores/settings.store';
+	import { formatDateToYearMonthDay } from '$lib/utils';

-	async function getDiscoverData() {
-		const popularMoviesPromise = fetchTmdbPopularMovies();
+	const fetchCardProps = async (items: TmdbMovie2[] | TmdbSeries2[]) =>
+		Promise.all(
+			(
+				await ($settings.excludeLibraryItemsFromDiscovery
+					? library.filterNotInLibrary(items, (t) => t.id)
+					: items)
+			).map(fetchCardTmdbProps)
+		).then((props) => props.filter((p) => p.backdropUri));

-		const popularMovies = await popularMoviesPromise
-			.then(async (tmdbMovies) => {
-				const libraryData = await $library;
-				return tmdbMovies.filter((m) => !libraryData.items[m.id]);
-			})
-			.then((tmdbMovies) => {
-				return Promise.all(
-					tmdbMovies.map(async (tmdbMovie) =>
-						fetchCardPropsTmdb(await fetchTmdbMovie(String(tmdbMovie.id)))
-					)
-				);
-			});
+	const fetchTrendingProps = () => getTmdbTrendingAll().then(fetchCardProps);
+	const fetchDigitalReleases = () => getTmdbDigitalReleases().then(fetchCardProps);
+	const fetchNowStreaming = () =>
+		TmdbApiOpen.get('/3/discover/tv', {
+			params: {
+				query: {
+					'air_date.gte': formatDateToYearMonthDay(new Date()),
+					'first_air_date.lte': formatDateToYearMonthDay(new Date()),
+					sort_by: 'popularity.desc',
+					...getIncludedLanguagesQuery()
+				}
+			}
+		})
+			.then((res) => res.data?.results || [])
+			.then(fetchCardProps);
+	const fetchUpcomingMovies = () => getTmdbUpcomingMovies().then(fetchCardProps);
+	const fetchUpcomingSeries = () =>
+		TmdbApiOpen.get('/3/discover/tv', {
+			params: {
+				query: {
+					'first_air_date.gte': formatDateToYearMonthDay(new Date()),
+					sort_by: 'popularity.desc',
+					...getIncludedLanguagesQuery()
+				}
+			}
+		})
+			.then((res) => res.data?.results || [])
+			.then(fetchCardProps);

-		return {
-			popularMovies
-		};
-	}
-
-	const discoverPromise = getDiscoverData();
+	const fetchTrendingActors = () =>
+		getTrendingActors().then((actors) =>
+			actors
+				.filter((a) => a.profile_path)
+				.map((actor) => ({
+					tmdbId: actor.id || 0,
+					name: actor.name || '',
+					backdropUri: actor.profile_path || '',
+					knownFor: actor.known_for?.map((movie) => movie.title || '') || [],
+					department: actor.known_for_department || ''
+				}))
+		);

 	const headerStyle = 'uppercase tracking-widest font-bold';
 </script>

 <div class="pb-24 flex flex-col gap-4">
-	<!--	Does not contain any of the titles in library.-->
-
 	<div class="pt-24 bg-black">
 		<Carousel gradientFromColor="from-black">
-			<div slot="title" class={headerStyle}>For You</div>
-			{#await discoverPromise}
+			<div slot="title" class={headerStyle}>Trending</div>
+			{#await fetchTrendingProps()}
 				<CarouselPlaceholderItems size="lg" />
-			{:then { popularMovies: movies }}
-				{#each movies ? [...movies].reverse() : [] as movie (movie.tmdbId)}
-					<Card size="lg" {...movie} />
+			{:then props}
+				{#each props as prop}
+					<Card size="lg" {...prop} />
 				{/each}
 			{/await}
 		</Carousel>
 	</div>
 	<div>
 		<Carousel>
-			<div slot="title" class={headerStyle}>Popular Movies</div>
-			{#await discoverPromise}
+			<div slot="title" class={headerStyle}>Popular People</div>
+			{#await fetchTrendingActors()}
 				<CarouselPlaceholderItems />
-			{:then { popularMovies: movies }}
-				{#each movies || [] as movie (movie.tmdbId)}
-					<Card {...movie} />
+			{:then props}
+				{#each props as prop}
+					<PeopleCard {...prop} />
 				{/each}
 			{/await}
 		</Carousel>
 	</div>
-	<!--	<div class={headerStyle}>Popular TV Shows</div>-->
 	<div>
 		<Carousel>
-			<div slot="title" class={headerStyle}>Networks</div>
-			<NetflixCard />
-			<HboCard />
-			<DisneyCard />
-			<AmazonCard />
-			<!--			<AppleCard />-->
-			<HuluCard />
+			<div slot="title" class={headerStyle}>Upcoming Movies</div>
+			{#await fetchUpcomingMovies()}
+				<CarouselPlaceholderItems />
+			{:then props}
+				{#each props as prop}
+					<Card {...prop} />
+				{/each}
+			{/await}
+		</Carousel>
+	</div>
+	<div>
+		<Carousel>
+			<div slot="title" class={headerStyle}>Upcoming Series</div>
+			{#await fetchUpcomingSeries()}
+				<CarouselPlaceholderItems />
+			{:then props}
+				{#each props as prop}
+					<Card {...prop} />
+				{/each}
+			{/await}
+		</Carousel>
+	</div>
+	<div>
+		<Carousel>
+			<div slot="title" class={headerStyle}>Genres</div>
+			{#each Object.values(genres) as genre}
+				<GenreCard {genre} />
+			{/each}
+		</Carousel>
+	</div>
+	<div>
+		<Carousel>
+			<div slot="title" class={headerStyle}>New Digital Releeases</div>
+			{#await fetchDigitalReleases()}
+				<CarouselPlaceholderItems />
+			{:then props}
+				{#each props as prop}
+					<Card {...prop} />
+				{/each}
+			{/await}
+		</Carousel>
+	</div>
+	<div>
+		<Carousel>
+			<div slot="title" class={headerStyle}>Streaming Now</div>
+			{#await fetchNowStreaming()}
+				<CarouselPlaceholderItems />
+			{:then props}
+				{#each props as prop}
+					<Card {...prop} />
+				{/each}
+			{/await}
+		</Carousel>
+	</div>
+	<div>
+		<Carousel>
+			<div slot="title" class={headerStyle}>TV Networks</div>
+			{#each Object.values(networks) as network}
+				<NetworkCard {network} />
+			{/each}
 		</Carousel>
 	</div>
-	<!--	<div class={headerStyle}>Categories</div>-->
 </div>
--- a/src/routes/discover/AmazonCard.svelte
+++ b/src/routes/discover/AmazonCard.svelte
@@ -1,55 +0,0 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/amazon">
-	<svg
-		class="scale-[200%]"
-		version="1.1"
-		id="Layer_1"
-		xmlns="http://www.w3.org/2000/svg"
-		xmlns:xlink="http://www.w3.org/1999/xlink"
-		x="0px"
-		y="0px"
-		width="800px"
-		height="50px"
-		viewBox="0 0 80 50"
-		style="enable-background:new 0 0 80 50;"
-		xml:space="preserve"
-	>
-		<style type="text/css">
-			.st0 {
-				fill: currentColor;
-			}
-		</style>
-		<title>PrimeLogo_Blue</title>
-		<path
-			class="st0"
-			d="M1.15,29.2c-0.215,0.01-0.426-0.061-0.59-0.2c-0.14-0.167-0.205-0.384-0.18-0.6V8  C0.355,7.784,0.42,7.567,0.56,7.4c0.166-0.126,0.372-0.186,0.58-0.17h2.22C3.78,7.188,4.158,7.483,4.22,7.9l0.22,0.8  c0.639-0.617,1.394-1.103,2.22-1.43c0.845-0.342,1.748-0.519,2.66-0.52c1.818-0.06,3.556,0.749,4.68,2.18  c1.238,1.706,1.853,3.785,1.74,5.89c0.034,1.528-0.259,3.045-0.86,4.45c-0.496,1.17-1.302,2.183-2.33,2.93  c-0.994,0.678-2.177,1.028-3.38,1c-0.817,0.004-1.629-0.131-2.4-0.4c-0.709-0.238-1.364-0.612-1.93-1.1v6.72  c0.022,0.214-0.038,0.429-0.17,0.6c-0.171,0.132-0.386,0.192-0.6,0.17L1.15,29.2z M7.88,19.84c0.988,0.071,1.944-0.371,2.53-1.17  c0.623-1.118,0.905-2.394,0.81-3.67c0.096-1.288-0.182-2.576-0.8-3.71c-0.588-0.807-1.554-1.25-2.55-1.17  c-1.057,0.001-2.093,0.287-3,0.83V19c0.9,0.56,1.94,0.854,3,0.85L7.88,19.84z"
-		/>
-		<path
-			class="st0"
-			d="M19.54,22.88c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242V8  c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.21c0.42-0.042,0.798,0.253,0.86,0.67L23,9.54  c0.657-0.769,1.442-1.419,2.32-1.92c0.716-0.375,1.512-0.57,2.32-0.57h0.43c0.217-0.019,0.434,0.041,0.61,0.17  c0.14,0.167,0.205,0.384,0.18,0.6v2.58c0.017,0.208-0.043,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-0.55  c-0.227,0-0.513,0-0.86,0c-0.578,0.012-1.154,0.079-1.72,0.2c-0.59,0.109-1.166,0.28-1.72,0.51v10.25  c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18L19.54,22.88z"
-		/>
-		<path
-			class="st0"
-			d="M33.29,4.79c-0.682,0.034-1.351-0.195-1.87-0.64c-0.482-0.451-0.741-1.091-0.71-1.75  c-0.034-0.663,0.225-1.307,0.71-1.76c1.096-0.877,2.654-0.877,3.75,0c0.482,0.451,0.741,1.091,0.71,1.75  c0.031,0.659-0.228,1.299-0.71,1.75C34.65,4.591,33.977,4.824,33.29,4.79z M31.82,22.89c-0.358,0.067-0.703-0.169-0.77-0.528  c-0.015-0.08-0.015-0.162,0-0.242V8c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.95  c0.214-0.022,0.429,0.038,0.6,0.17c0.132,0.171,0.192,0.386,0.17,0.6v14.12c0.017,0.208-0.043,0.414-0.17,0.58  c-0.167,0.14-0.384,0.205-0.6,0.18L31.82,22.89z"
-		/>
-		<path
-			class="st0"
-			d="M40.1,22.88c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242V8  c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.21c0.42-0.042,0.798,0.253,0.86,0.67l0.25,0.83  c0.91-0.627,1.894-1.137,2.93-1.52c0.855-0.298,1.754-0.453,2.66-0.46c1.576-0.135,3.09,0.642,3.9,2  c0.913-0.628,1.905-1.132,2.95-1.5c0.922-0.307,1.888-0.462,2.86-0.46c1.228-0.074,2.432,0.36,3.33,1.2  c0.828,0.908,1.254,2.113,1.18,3.34v10.79c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-2.91  c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242v-9.84c0-1.393-0.623-2.09-1.87-2.09  c-1.162,0.013-2.307,0.287-3.35,0.8v11.14c0.017,0.208-0.043,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-2.94  c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242v-9.84c0-1.393-0.623-2.09-1.87-2.09  c-1.176,0.007-2.334,0.292-3.38,0.83v11.1c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18L40.1,22.88z"
-		/>
-		<path
-			class="st0"
-			d="M73.92,23.34c-2.155,0.141-4.272-0.615-5.85-2.09c-1.443-1.652-2.164-3.813-2-6  c-0.144-2.267,0.586-4.504,2.04-6.25c1.515-1.564,3.636-2.393,5.81-2.27c1.608-0.096,3.196,0.395,4.47,1.38  c1.078,0.92,1.672,2.285,1.61,3.7c0.073,1.385-0.588,2.707-1.74,3.48c-1.551,0.886-3.328,1.296-5.11,1.18  c-1.01,0.012-2.018-0.102-3-0.34c0.006,1.106,0.452,2.164,1.24,2.94c0.933,0.662,2.069,0.977,3.21,0.89  c0.558,0,1.116-0.037,1.67-0.11c0.762-0.118,1.516-0.279,2.26-0.48h0.18h0.15c0.347,0,0.52,0.237,0.52,0.71v1.41  c0.019,0.239-0.029,0.478-0.14,0.69c-0.142,0.167-0.33,0.288-0.54,0.35C77.17,23.093,75.55,23.368,73.92,23.34z M72.92,13.71  c0.787,0.057,1.574-0.109,2.27-0.48c0.478-0.327,0.748-0.882,0.71-1.46c0-1.287-0.767-1.93-2.3-1.93c-1.967,0-3.103,1.207-3.41,3.62  c0.893,0.171,1.801,0.255,2.71,0.25H72.92z"
-		/>
-		<path
-			class="st0"
-			d="M72.31,40.11C63.55,46.57,50.85,50,39.92,50c-14.606,0.078-28.716-5.295-39.57-15.07  c-0.82-0.74-0.09-1.75,0.9-1.18c12.058,6.885,25.705,10.501,39.59,10.49c10.361-0.055,20.61-2.152,30.16-6.17  C72.52,37.44,73.76,39,72.31,40.11z"
-		/>
-		<path
-			class="st0"
-			d="M76,36c-1.12-1.43-7.4-0.68-10.23-0.34c-0.86,0.1-1-0.64-0.22-1.18c5-3.52,13.23-2.5,14.18-1.32  s-0.25,9.41-5,13.34c-0.72,0.6-1.41,0.28-1.09-0.52C74.71,43.29,77.08,37.39,76,36z"
-		/>
-	</svg>
-</NetworkCard>
--- a/src/routes/discover/NetworkCard.svelte
+++ b/src/routes/discover/NetworkCard.svelte
@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let href: string;
-</script>
-
-<a
-	{href}
-	class="border rounded-xl h-52 w-96 bg-stone-800 border-stone-700 flex items-center justify-center cursor-pointer hover:scale-[103%] p-12 text-zinc-300 hover:text-amber-200 transition-all"
->
-	<slot />
-</a>
--- a/src/routes/discover/genre/[genre]/+page.svelte
+++ b/src/routes/discover/genre/[genre]/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { getTmdbGenreMovies } from '$lib/apis/tmdb/tmdbApi';
+	import Card from '$lib/components/Card/Card.svelte';
+	import CardPlaceholder from '$lib/components/Card/CardPlaceholder.svelte';
+	import { fetchCardTmdbProps } from '$lib/components/Card/card';
+	import GridPage from '$lib/components/GridPage/GridPage.svelte';
+	import { genres, type Genre } from '$lib/discover';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	const genre = genres[data.genre];
+
+	async function fetchGenreItems(genre: Genre) {
+		const movies = await getTmdbGenreMovies(genre.tmdbGenreId);
+
+		const itemProps = await Promise.all(movies.map(fetchCardTmdbProps));
+
+		return {
+			movies,
+			itemProps
+		};
+	}
+</script>
+
+<GridPage title={data.genre}>
+	{#if genre}
+		{#await fetchGenreItems(genre)}
+			{#each [...Array(20).keys()] as index (index)}
+				<CardPlaceholder size="dynamic" {index} />
+			{/each}
+		{:then { itemProps }}
+			{#each itemProps as itemProps}
+				<Card {...itemProps} size="dynamic" />
+			{/each}
+		{:catch error}
+			{error.message}
+		{/await}
+	{:else}
+		404
+	{/if}
+</GridPage>
+
+<!-- <div class="pt-24 p-8 bg-black">
+	<button on:click={() => window?.history?.back()}>Back</button>
+	{data.genre}
+</div>
+
+<div class="p-8">
+	{#if genre}
+		{#await fetchGenreItems(genre)}
+			<CardGrid>
+				{#each [...Array(20).keys()] as index (index)}
+					<CardPlaceholder size="dynamic" {index} />
+				{/each}
+			</CardGrid>
+		{:then { itemProps }}
+			<CardGrid>
+				{#each itemProps as itemProps}
+					<Card {...itemProps} size="dynamic" />
+				{/each}
+			</CardGrid>
+		{:catch error}
+			{error.message}
+		{/await}
+	{:else}
+		404
+	{/if}
+</div> -->
--- a/src/routes/discover/genre/[genre]/+page.ts
+++ b/src/routes/discover/genre/[genre]/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+	return {
+		genre: params.genre
+	};
+}) satisfies PageLoad;
--- a/src/routes/discover/network/[network]/+page.svelte
+++ b/src/routes/discover/network/[network]/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { getTmdbNetworkSeries } from '$lib/apis/tmdb/tmdbApi';
+	import Card from '$lib/components/Card/Card.svelte';
+	import CardGrid from '$lib/components/Card/CardGrid.svelte';
+	import CardPlaceholder from '$lib/components/Card/CardPlaceholder.svelte';
+	import { fetchCardTmdbSeriesProps } from '$lib/components/Card/card';
+	import type { ComponentProps } from 'svelte';
+	import type { PageData } from './$types';
+	import GridPage from '$lib/components/GridPage/GridPage.svelte';
+	import { networks, type Network } from '../../../../lib/discover';
+
+	export let data: PageData;
+
+	const network = networks[data.network] || undefined;
+
+	async function fetchNetworkSeries(network: Network) {
+		const shows = await getTmdbNetworkSeries(network.tmdbNetworkId);
+
+		const showProps: ComponentProps<Card>[] = await Promise.all(
+			shows.map(fetchCardTmdbSeriesProps)
+		);
+
+		return {
+			shows,
+			showProps
+		};
+	}
+</script>
+
+<GridPage title={data.network}>
+	{#if network}
+		{#await fetchNetworkSeries(network)}
+			{#each [...Array(20).keys()] as index (index)}
+				<CardPlaceholder size="dynamic" {index} />
+			{/each}
+		{:then { showProps }}
+			{#each showProps as showProps}
+				<Card {...showProps} size="dynamic" />
+			{/each}
+		{:catch error}
+			{error.message}
+		{/await}
+	{:else}
+		404
+	{/if}
+</GridPage>
--- a/src/routes/discover/network/[network]/+page.ts
+++ b/src/routes/discover/network/[network]/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+	return {
+		network: params.network
+	};
+}) satisfies PageLoad;
--- a/src/routes/library/+page.server.ts
+++ b/src/routes/library/+page.server.ts
@@ -1,28 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { RadarrApi, getRadarrMovies } from '$lib/apis/radarr/radarrApi';
-import type { CardProps } from '$lib/components/Card/card';
-import { fetchCardProps } from '$lib/components/Card/card';
-
-// interface DownloadingCardProps extends CardProps {
-// 	progress: number;
-// 	completionTime: string;
-// }
-
-// export const load = (() => {
-// 	const [downloading, available, unavailable] = getLibraryItems();
-
-// 	// radarrMovies.then((d) => console.log(d.map((m) => m.ratings)));
-
-// 	const libraryInfo = getLibraryInfo();
-
-// 	return {
-// 		streamed: {
-// 			libraryInfo,
-// 			downloading,
-// 			available,
-// 			unavailable
-// 		}
-// 	};
-// }) satisfies PageServerLoad;
-
-// async function getLibraryInfo(): Promise<any> {}
--- a/src/routes/library/+page.svelte
+++ b/src/routes/library/+page.svelte
@@ -8,26 +8,79 @@
 	import { ChevronDown, MagnifyingGlass, TextAlignBottom, Trash } from 'radix-icons-svelte';
 	import type { ComponentProps } from 'svelte';

-	const posterGridStyle =
-		'grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5';
-	const headerStyle = 'uppercase tracking-widest font-bold';
-	const headerContaienr = 'flex items-center justify-between mt-2';
-
 	let itemsVisible: 'all' | 'movies' | 'shows' = 'all';
-	let sortBy: 'added' | 'rating' | 'year' | 'size' | 'name' = 'added';
+	let sortBy: 'added' | 'rating' | 'release' | 'size' | 'name' = 'added';

 	let loading = true;
+	let searchInput: HTMLInputElement | undefined;
+	let searchInputValue = '';
+
+	let items: PlayableItem[] = [];
+
 	let downloadingProps: ComponentProps<Card>[] = [];
 	let availableProps: ComponentProps<Card>[] = [];
 	let watchedProps: ComponentProps<Card>[] = [];
 	let unavailableProps: ComponentProps<Card>[] = [];

+	$: {
+		if (items.length) updateComponentProps(searchInputValue);
+	}
+
 	library.subscribe(async (libraryPromise) => {
 		const libraryData = await libraryPromise;
+		items = libraryData.itemsArray;
+		loading = false;
+	});

-		const items: PlayableItem[] = filterItems(sortItems(libraryData.itemsArray));
+	function updateComponentProps(searchInputValue: string) {
+		const filteredItems = items
+			.sort((a, b) => {
+				switch (sortBy) {
+					case 'added':
+						return (b.radarrMovie?.added || b.sonarrSeries?.added || '') <
+							(a.radarrMovie?.added || a.sonarrSeries?.added || '')
+							? -1
+							: 1;
+					case 'rating':
+						return (b.tmdbRating || 0) - (a.tmdbRating || 0);
+					case 'release':
+						return (b.radarrMovie?.inCinemas || b.sonarrSeries?.firstAired || '') <
+							(a.radarrMovie?.inCinemas || a.sonarrSeries?.firstAired || '')
+							? -1
+							: 1;
+					case 'size':
+						return (
+							(b.radarrMovie?.sizeOnDisk || b.sonarrSeries?.statistics?.sizeOnDisk || 0) -
+							(a.radarrMovie?.sizeOnDisk || a.sonarrSeries?.statistics?.sizeOnDisk || 0)
+						);
+					case 'name':
+						return (b.radarrMovie?.title?.toLowerCase() ||
+							b.sonarrSeries?.title?.toLowerCase() ||
+							'') >
+							(a.radarrMovie?.title?.toLowerCase() || a.sonarrSeries?.title?.toLowerCase() || '')
+							? -1
+							: 1;
+				}

-		for (let item of items) {
+				return 0;
+			})
+			.filter((item) => {
+				if (searchInputValue) {
+					return (
+						item.radarrMovie?.title?.toLowerCase().includes(searchInputValue.toLowerCase()) ||
+						item.sonarrSeries?.title?.toLowerCase().includes(searchInputValue.toLowerCase())
+					);
+				} else {
+					return true;
+				}
+			});
+
+		downloadingProps = [];
+		availableProps = [];
+		watchedProps = [];
+		unavailableProps = [];
+
+		for (let item of filteredItems) {
 			let props: ComponentProps<Card>;

 			const series = item.sonarrSeries;
@@ -40,7 +93,7 @@
 					tmdbId: String(item.tmdbId),
 					title: series.title || '',
 					genres: series.genres || [],
-					backdropUrl: item.cardBackdropUrl,
+					backdropUri: item.cardBackdropUrl,
 					rating: series.ratings?.value || series.ratings?.value || item.tmdbRating || 0,
 					seasons: series.seasons?.length || 0
 				};
@@ -51,7 +104,7 @@
 					tmdbId: String(item.tmdbId),
 					title: movie.title || '',
 					genres: movie.genres || [],
-					backdropUrl: item.cardBackdropUrl,
+					backdropUri: item.cardBackdropUrl,
 					rating: movie.ratings?.tmdb?.value || movie.ratings?.imdb?.value || 0,
 					runtimeMinutes: movie.runtime || 0
 				};
@@ -81,19 +134,23 @@
 		availableProps = availableProps;
 		watchedProps = watchedProps;
 		unavailableProps = unavailableProps;
-
-		loading = false;
-	});
-
-	function sortItems(arr: any[]) {
-		return arr.sort((a, b) => ((a.added || '') > (b.added || '') ? -1 : 1));
 	}

-	function filterItems(arr: any[]) {
-		return arr;
+	function handleShortcuts(event: KeyboardEvent) {
+		if (event.key === 'f' && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			searchInput?.focus();
+		}
 	}
+
+	const posterGridStyle =
+		'grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5';
+	const headerStyle = 'uppercase tracking-widest font-bold';
+	const headerContaienr = 'flex items-center justify-between mt-2';
 </script>

+<svelte:window on:keydown={handleShortcuts} />
+
 <div class="pt-24 pb-8 px-8 bg-black">
 	<div class="max-w-screen-2xl mx-auto">
 		<div class="grid grid-cols-1 lg:grid-cols-2 items-center justify-center gap-4">
@@ -114,6 +171,8 @@
 					type="text"
 					class="bg-transparent outline-none text-zinc-300"
 					placeholder="Search from library"
+					bind:this={searchInput}
+					bind:value={searchInputValue}
 				/>
 			</div>
 			<div class="flex items-center gap-2 bg-stone-950 rounded-2xl p-3 px-5 shadow-lg">
--- a/static/genres/action.jpg
+++ b/static/genres/action.jpg
--- a/static/genres/adventure.jpg
+++ b/static/genres/adventure.jpg
--- a/static/genres/animation.jpg
+++ b/static/genres/animation.jpg
--- a/static/genres/comedy.jpg
+++ b/static/genres/comedy.jpg
--- a/static/genres/crime.jpg
+++ b/static/genres/crime.jpg
--- a/static/networks/amazon.svg
+++ b/static/networks/amazon.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="50px" viewBox="0 0 80 50" style="enable-background:new 0 0 80 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:currentColor;}
+</style>
+<title>PrimeLogo_Blue</title>
+<path class="st0" d="M1.15,29.2c-0.215,0.01-0.426-0.061-0.59-0.2c-0.14-0.167-0.205-0.384-0.18-0.6V8  C0.355,7.784,0.42,7.567,0.56,7.4c0.166-0.126,0.372-0.186,0.58-0.17h2.22C3.78,7.188,4.158,7.483,4.22,7.9l0.22,0.8  c0.639-0.617,1.394-1.103,2.22-1.43c0.845-0.342,1.748-0.519,2.66-0.52c1.818-0.06,3.556,0.749,4.68,2.18  c1.238,1.706,1.853,3.785,1.74,5.89c0.034,1.528-0.259,3.045-0.86,4.45c-0.496,1.17-1.302,2.183-2.33,2.93  c-0.994,0.678-2.177,1.028-3.38,1c-0.817,0.004-1.629-0.131-2.4-0.4c-0.709-0.238-1.364-0.612-1.93-1.1v6.72  c0.022,0.214-0.038,0.429-0.17,0.6c-0.171,0.132-0.386,0.192-0.6,0.17L1.15,29.2z M7.88,19.84c0.988,0.071,1.944-0.371,2.53-1.17  c0.623-1.118,0.905-2.394,0.81-3.67c0.096-1.288-0.182-2.576-0.8-3.71c-0.588-0.807-1.554-1.25-2.55-1.17  c-1.057,0.001-2.093,0.287-3,0.83V19c0.9,0.56,1.94,0.854,3,0.85L7.88,19.84z"/>
+<path class="st0" d="M19.54,22.88c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242V8  c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.21c0.42-0.042,0.798,0.253,0.86,0.67L23,9.54  c0.657-0.769,1.442-1.419,2.32-1.92c0.716-0.375,1.512-0.57,2.32-0.57h0.43c0.217-0.019,0.434,0.041,0.61,0.17  c0.14,0.167,0.205,0.384,0.18,0.6v2.58c0.017,0.208-0.043,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-0.55  c-0.227,0-0.513,0-0.86,0c-0.578,0.012-1.154,0.079-1.72,0.2c-0.59,0.109-1.166,0.28-1.72,0.51v10.25  c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18L19.54,22.88z"/>
+<path class="st0" d="M33.29,4.79c-0.682,0.034-1.351-0.195-1.87-0.64c-0.482-0.451-0.741-1.091-0.71-1.75  c-0.034-0.663,0.225-1.307,0.71-1.76c1.096-0.877,2.654-0.877,3.75,0c0.482,0.451,0.741,1.091,0.71,1.75  c0.031,0.659-0.228,1.299-0.71,1.75C34.65,4.591,33.977,4.824,33.29,4.79z M31.82,22.89c-0.358,0.067-0.703-0.169-0.77-0.528  c-0.015-0.08-0.015-0.162,0-0.242V8c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.95  c0.214-0.022,0.429,0.038,0.6,0.17c0.132,0.171,0.192,0.386,0.17,0.6v14.12c0.017,0.208-0.043,0.414-0.17,0.58  c-0.167,0.14-0.384,0.205-0.6,0.18L31.82,22.89z"/>
+<path class="st0" d="M40.1,22.88c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242V8  c-0.025-0.216,0.04-0.433,0.18-0.6c0.166-0.126,0.372-0.186,0.58-0.17h2.21c0.42-0.042,0.798,0.253,0.86,0.67l0.25,0.83  c0.91-0.627,1.894-1.137,2.93-1.52c0.855-0.298,1.754-0.453,2.66-0.46c1.576-0.135,3.09,0.642,3.9,2  c0.913-0.628,1.905-1.132,2.95-1.5c0.922-0.307,1.888-0.462,2.86-0.46c1.228-0.074,2.432,0.36,3.33,1.2  c0.828,0.908,1.254,2.113,1.18,3.34v10.79c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-2.91  c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242v-9.84c0-1.393-0.623-2.09-1.87-2.09  c-1.162,0.013-2.307,0.287-3.35,0.8v11.14c0.017,0.208-0.043,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18h-2.94  c-0.358,0.067-0.703-0.169-0.77-0.528c-0.015-0.08-0.015-0.162,0-0.242v-9.84c0-1.393-0.623-2.09-1.87-2.09  c-1.176,0.007-2.334,0.292-3.38,0.83v11.1c0.016,0.208-0.044,0.414-0.17,0.58c-0.167,0.14-0.384,0.205-0.6,0.18L40.1,22.88z"/>
+<path class="st0" d="M73.92,23.34c-2.155,0.141-4.272-0.615-5.85-2.09c-1.443-1.652-2.164-3.813-2-6  c-0.144-2.267,0.586-4.504,2.04-6.25c1.515-1.564,3.636-2.393,5.81-2.27c1.608-0.096,3.196,0.395,4.47,1.38  c1.078,0.92,1.672,2.285,1.61,3.7c0.073,1.385-0.588,2.707-1.74,3.48c-1.551,0.886-3.328,1.296-5.11,1.18  c-1.01,0.012-2.018-0.102-3-0.34c0.006,1.106,0.452,2.164,1.24,2.94c0.933,0.662,2.069,0.977,3.21,0.89  c0.558,0,1.116-0.037,1.67-0.11c0.762-0.118,1.516-0.279,2.26-0.48h0.18h0.15c0.347,0,0.52,0.237,0.52,0.71v1.41  c0.019,0.239-0.029,0.478-0.14,0.69c-0.142,0.167-0.33,0.288-0.54,0.35C77.17,23.093,75.55,23.368,73.92,23.34z M72.92,13.71  c0.787,0.057,1.574-0.109,2.27-0.48c0.478-0.327,0.748-0.882,0.71-1.46c0-1.287-0.767-1.93-2.3-1.93c-1.967,0-3.103,1.207-3.41,3.62  c0.893,0.171,1.801,0.255,2.71,0.25H72.92z"/>
+<path class="st0" d="M72.31,40.11C63.55,46.57,50.85,50,39.92,50c-14.606,0.078-28.716-5.295-39.57-15.07  c-0.82-0.74-0.09-1.75,0.9-1.18c12.058,6.885,25.705,10.501,39.59,10.49c10.361-0.055,20.61-2.152,30.16-6.17  C72.52,37.44,73.76,39,72.31,40.11z"/>
+<path class="st0" d="M76,36c-1.12-1.43-7.4-0.68-10.23-0.34c-0.86,0.1-1-0.64-0.22-1.18c5-3.52,13.23-2.5,14.18-1.32  s-0.25,9.41-5,13.34c-0.72,0.6-1.41,0.28-1.09-0.52C74.71,43.29,77.08,37.39,76,36z"/>
+</svg>
--- a/src/routes/discover/AppleCard.svelte
+++ b/src/routes/discover/AppleCard.svelte
@@ -1,11 +1,5 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/apple">
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.046 17.091" width="100%" height="100%"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.046 17.091" width="100%" height="100%"
 		><path
 			d="M9.436,2.742A3.857,3.857,0,0,0,10.316,0a3.769,3.769,0,0,0-2.51,1.311,3.622,3.622,0,0,0-.9,2.631,3.138,3.138,0,0,0,2.53-1.2m.82,1.381c-1.4-.081-2.58.8-3.25.8s-1.69-.756-2.79-.736a4.117,4.117,0,0,0-3.5,2.147c-1.5,2.6-.4,6.473,1.06,8.59.71,1.006,1.56,2.205,2.69,2.166s1.48-.7,2.77-.7,1.67.7,2.79.675,1.9-1.008,2.6-2.1a9.317,9.317,0,0,0,1.17-2.42,3.814,3.814,0,0,1-2.27-3.468,3.9,3.9,0,0,1,1.83-3.256,3.991,3.991,0,0,0-3.1-1.7m8.93-2.016V4.96h2.28V6.845h-2.28V13.6c0,1.008.45,1.522,1.45,1.522a7.482,7.482,0,0,0,.82-.06v1.9a7.823,7.823,0,0,1-1.35.1c-2.36,0-3.27-.917-3.27-3.216V6.89h-1.79V5h1.74V2.107Zm10.25,14.853h-2.5L22.736,5h2.49l2.95,9.608h.06L31.186,5h2.44Zm10.98,0h-2.16v-4.9h-4.64V9.9h4.63V5h2.16V9.9h4.64v2.158h-4.63Z"
 		/></svg
-	>
-</NetworkCard>
+	>
--- a/src/routes/discover/DisneyCard.svelte
+++ b/src/routes/discover/DisneyCard.svelte
@@ -1,9 +1,4 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/disney">
-	<svg
+<svg
 		width="1041px"
 		height="565px"
 		viewBox="0 0 1041 565"
@@ -72,5 +67,4 @@
 				</g>
 			</g>
 		</g>
-	</svg>
-</NetworkCard>
+	</svg>
--- a/src/routes/discover/HboCard.svelte
+++ b/src/routes/discover/HboCard.svelte
@@ -1,9 +1,4 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/hbo">
-	<svg
+<svg
 		width="512"
 		height="211"
 		viewBox="0 0 512 211"
@@ -60,10 +55,4 @@
 				style="stroke-width:1.01668"
 			/>
 		</g>
-		<metadata id="metadata439">
-			<rdf:RDF>
-				<cc:Work rdf:about="" />
-			</rdf:RDF>
-		</metadata>
-	</svg>
-</NetworkCard>
+	</svg>
--- a/src/routes/discover/HuluCard.svelte
+++ b/src/routes/discover/HuluCard.svelte
@@ -1,9 +1,4 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/hulu">
-	<svg
+<svg
 		xmlns:dc="http://purl.org/dc/elements/1.1/"
 		xmlns:cc="http://creativecommons.org/ns#"
 		xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -70,5 +65,4 @@
 				style="fill:currentColor;fill-opacity:1"
 			/>
 		</g>
-	</svg>
-</NetworkCard>
+	</svg>
--- a/src/routes/discover/NetflixCard.svelte
+++ b/src/routes/discover/NetflixCard.svelte
@@ -1,12 +1,6 @@
-<script>
-	import NetworkCard from './NetworkCard.svelte';
-</script>
-
-<NetworkCard href="/discover/netflix">
-	<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="276.742" viewBox="0 0 1024 276.742"
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="276.742" viewBox="0 0 1024 276.742"
 		><path
 			d="M140.803 258.904c-15.404 2.705-31.079 3.516-47.294 5.676l-49.458-144.856v151.073c-15.404 1.621-29.457 3.783-44.051 5.945v-276.742h41.08l56.212 157.021v-157.021h43.511v258.904zm85.131-157.558c16.757 0 42.431-.811 57.835-.811v43.24c-19.189 0-41.619 0-57.835.811v64.322c25.405-1.621 50.809-3.785 76.482-4.596v41.617l-119.724 9.461v-255.39h119.724v43.241h-76.482v58.105zm237.284-58.104h-44.862v198.908c-14.594 0-29.188 0-43.239.539v-199.447h-44.862v-43.242h132.965l-.002 43.242zm70.266 55.132h59.187v43.24h-59.187v98.104h-42.433v-239.718h120.808v43.241h-78.375v55.133zm148.641 103.507c24.594.539 49.456 2.434 73.51 3.783v42.701c-38.646-2.434-77.293-4.863-116.75-5.676v-242.689h43.24v201.881zm109.994 49.457c13.783.812 28.377 1.623 42.43 3.242v-254.58h-42.43v251.338zm231.881-251.338l-54.863 131.615 54.863 145.127c-16.217-2.162-32.432-5.135-48.648-7.838l-31.078-79.994-31.617 73.51c-15.678-2.705-30.812-3.516-46.484-5.678l55.672-126.75-50.269-129.992h46.482l28.377 72.699 30.27-72.699h47.295z"
 			fill="currentColor"
 		/></svg
-	>
-</NetworkCard>
+	>