diff --git a/src/lib/components/PersonPageLayout/PersonPageLayout.svelte b/src/lib/components/PersonPageLayout/PersonPageLayout.svelte
deleted file mode 100644
index 6cfcf74..0000000
--- a/src/lib/components/PersonPageLayout/PersonPageLayout.svelte
+++ /dev/null
@@ -1,219 +0,0 @@
-<script lang="ts">
-	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '$lib/constants';
-	import type { TitleId, TitleType } from '$lib/types';
-	import classNames from 'classnames';
-	import { ChevronLeft, Cross2, DotFilled, ExternalLink } from 'radix-icons-svelte';
-	import Carousel from '../Carousel/Carousel.svelte';
-	import CarouselPlaceholderItems from '../Carousel/CarouselPlaceholderItems.svelte';
-	import IconButton from '../IconButton.svelte';
-	import LazyImg from '../LazyImg.svelte';
-
-	export let isModal = false;
-	export let handleCloseModal: () => void = () => {};
-
-	export let titleInformation:
-		| {
-				tmdbId: number;
-				type: TitleType;
-				title: string;
-				tagline: string;
-				overview: string;
-				backdropUriCandidates: string[];
-				posterPath: string;
-		  }
-		| undefined = undefined;
-
-	let topHeight: number;
-	let bottomHeight: number;
-	let windowHeight: number;
-	let imageHeight: number;
-	$: imageHeight = isModal && topHeight ? topHeight : windowHeight - bottomHeight * 0.3;
-
-	function getBackdropUri(uris: string[]) {
-		return uris[Math.max(2, Math.floor(uris.length / 8))] || uris[uris.length - 1] || '';
-	}
-</script>
-
-<svelte:window bind:outerHeight={windowHeight} />
-
-<!-- Desktop -->
-<div
-	style={'height: ' + imageHeight.toFixed() + 'px'}
-	class={classNames('hidden sm:block inset-x-0 bg-center bg-cover bg-stone-950', {
-		absolute: isModal,
-		fixed: !isModal
-	})}
->
-	{#if titleInformation}
-		<LazyImg
-			src={TMDB_IMAGES_ORIGINAL + getBackdropUri(titleInformation.backdropUriCandidates)}
-			class="h-full"
-		>
-			<div class="absolute inset-0 bg-darken" />
-		</LazyImg>
-	{/if}
-</div>
-
-<!-- Mobile -->
-<div
-	style={'height: ' + imageHeight.toFixed() + 'px'}
-	class="sm:hidden fixed inset-x-0 bg-center bg-cover bg-stone-950"
->
-	{#if titleInformation}
-		<LazyImg src={TMDB_IMAGES_ORIGINAL + titleInformation.posterPath} class="h-full">
-			<div class="absolute inset-0 bg-darken" />
-		</LazyImg>
-	{/if}
-</div>
-
-<div
-	class={classNames('flex flex-col relative z-[1]', {
-		'h-[85vh] sm:h-screen': !isModal,
-		'': isModal
-	})}
->
-	<div
-		class={classNames('flex-1 relative flex pt-24 px-2 sm:px-4 lg:px-8 pb-6', {
-			'min-h-[60vh]': isModal
-		})}
-		bind:clientHeight={topHeight}
-	>
-		{#if isModal}
-			{#if titleInformation}
-				<a
-					href={`/${titleInformation.type}/${titleInformation.tmdbId}`}
-					class="absolute top-8 right-4 sm:right-8 z-10"
-				>
-					<IconButton>
-						<ExternalLink size={20} />
-					</IconButton>
-				</a>
-			{/if}
-			<div class="absolute top-8 left-4 sm:left-8 z-10">
-				<button class="flex items-center sm:hidden font-medium" on:click={handleCloseModal}>
-					<ChevronLeft size={20} />
-					Back
-				</button>
-				<div class="hidden sm:block">
-					<IconButton on:click={handleCloseModal}>
-						<Cross2 size={20} />
-					</IconButton>
-				</div>
-			</div>
-		{/if}
-		<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-30%" />
-		<div class="z-[1] flex-1 flex justify-end gap-8 items-end max-w-screen-2xl mx-auto">
-			{#if titleInformation}
-				<div
-					class="aspect-[2/3] w-52 bg-center bg-cover rounded-md hidden sm:block"
-					style={"background-image: url('" + TMDB_POSTER_SMALL + titleInformation.posterPath + "')"}
-				/>
-			{:else}
-				<div class="aspect-[2/3] w-52 bg-center bg-cover rounded-md hidden sm:block placeholder" />
-			{/if}
-			<div class="flex-1 flex gap-4 justify-between flex-col lg:flex-row lg:items-end">
-				<div>
-					<div class="text-zinc-300 text-sm uppercase font-semibold flex items-center gap-1">
-						<slot name="title-info">
-							<div class="placeholder-text">Placeholder Long</div>
-						</slot>
-					</div>
-					{#if titleInformation}
-						<h1 class="text-4xl sm:text-5xl md:text-6xl font-semibold">{titleInformation.title}</h1>
-					{:else}
-						<h1 class="text-4xl sm:text-5xl md:text-6xl placeholder-text mt-2">Placeholder</h1>
-					{/if}
-				</div>
-				<div class="flex-shrink-0">
-					<slot name="title-right" />
-				</div>
-			</div>
-		</div>
-	</div>
-	<div bind:clientHeight={bottomHeight} class="pb-6 bg-stone-950">
-		<div class="max-w-screen-2xl mx-auto">
-			<slot name="episodes-carousel" />
-		</div>
-	</div>
-</div>
-
-<div
-	class={classNames('flex flex-col gap-6 bg-stone-950 px-2 sm:px-4 lg:px-8 pb-6 relative', {
-		'2xl:px-0': !isModal
-	})}
->
-	<div
-		class="grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 rounded-xl max-w-screen-2xl 2xl:mx-auto py-4"
-	>
-		<slot name="info-description">
-			<div
-				class="flex flex-col gap-3 max-w-5xl row-span-3 col-span-4 sm:col-span-6 lg:col-span-3 mb-4 lg:mr-8"
-			>
-				{#if titleInformation}
-					<div class="flex gap-4 justify-between">
-						<h1 class="font-semibold text-xl sm:text-2xl">{titleInformation.tagline}</h1>
-						<!-- <div class="flex items-center gap-4">
-						<a
-							target="_blank"
-							href={'https://www.themoviedb.org/tv/' + tmdbId}
-							class="opacity-60 hover:opacity-100"
-						>
-							<img src="/tmdb.svg" alt="tmdb" width="25px" />
-						</a>
-						{#if $itemStore.item?.sonarrSeries?.titleSlug}
-							<a
-								target="_blank"
-								href={PUBLIC_SONARR_BASE_URL +
-									'/series/' +
-									$itemStore.item?.sonarrSeries?.titleSlug}
-								class="opacity-60 hover:opacity-100"
-							>
-								<img src="/sonarr.svg" alt="sonarr" width="15px" />
-							</a>
-						{/if}
-						{#if series?.homepage}
-							<a
-								target="_blank"
-								href={series.homepage}
-								class="flex gap-1 items-center opacity-60 hover:opacity-100"
-							>
-								<Globe size={15} />
-							</a>
-						{/if} -->
-					</div>
-					<p class="pl-4 border-l-2 text-sm sm:text-base">{titleInformation.overview}</p>
-				{:else}
-					<div class="flex gap-4 justify-between">
-						<h1 class="font-semibold text-xl sm:text-2xl placeholder-text">Placeholder</h1>
-					</div>
-					<div class="flex">
-						<div class="mr-4 placeholder w-1 flex-shrink-0 rounded" />
-						<p class="text-sm sm:text-base placeholder-text">
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem eget
-							dolor lobortis mollis. Aliquam semper imperdiet mi nec viverra. Praesent ac ligula
-							congue, aliquam diam nec, ullamcorper libero. Nunc mattis rhoncus justo, ac pretium
-							urna vehicula et.
-						</p>
-					</div>
-				{/if}
-			</div>
-		</slot>
-		<slot name="info-components" />
-	</div>
-	<div class="max-w-screen-2xl 2xl:mx-auto w-full">
-		<Carousel gradientFromColor="from-stone-950">
-			<slot name="movie-carousel-title" slot="title" />
-			<slot name="movie-carousel">
-				<CarouselPlaceholderItems />
-			</slot>
-		</Carousel>
-	</div>
-	<div class="max-w-screen-2xl 2xl:mx-auto w-full">
-		<Carousel gradientFromColor="from-stone-950">
-			<slot name="tv-carousel-title" slot="title" />
-			<slot name="tv-carousel">
-				<CarouselPlaceholderItems />
-			</slot>
-		</Carousel>
-	</div>
-</div>
diff --git a/src/lib/components/PersonPageLayout/PersonPageModal.svelte b/src/lib/components/PersonPageLayout/PersonPageModal.svelte
deleted file mode 100644
index 73a9623..0000000
--- a/src/lib/components/PersonPageLayout/PersonPageModal.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { TitleId } from '$lib/types';
-	import { fly } from 'svelte/transition';
-	import PersonPage from '../../../routes/person/[id]/PersonPage.svelte';
-	import { modalStack } from '../../stores/modal.store';
-
-	export let titleId: TitleId;
-	export let modalId: symbol;
-
-	function handleCloseModal() {
-		modalStack.close(modalId);
-	}
-</script>
-
-<div
-	class="max-w-screen-2xl overflow-x-hidden overflow-y-scroll h-screen sm:mx-4 lg:mx-12 xl:mx-16 scrollbar-hide"
->
-	<div
-		class="relative overflow-hidden"
-		in:fly|global={{ y: 20, duration: 200, delay: 200 }}
-		out:fly|global={{ y: 20, duration: 200 }}
-	>
-		<PersonPage tmdbId={titleId.id} isModal={true} {handleCloseModal} />
-	</div>
-</div>
diff --git a/src/lib/components/PersonPageLayout/PersonPageModal.ts b/src/lib/components/PersonPageLayout/PersonPageModal.ts
deleted file mode 100644
index 618d706..0000000
--- a/src/lib/components/PersonPageLayout/PersonPageModal.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { TitleType } from '$lib/types';
-import { writable } from 'svelte/store';
-
-type Type = TitleType | undefined;
-
-function createPersonPageModalStore() {
-	const store = writable<{ personId: number | undefined; type: Type }>({
-		personId: undefined,
-		type: undefined
-	});
-
-	return {
-		subscribe: store.subscribe,
-		set: (personId: number | undefined, type: Type) => store.set({ personId, type }),
-		close: () => store.set({ personId: undefined, type: undefined })
-	};
-}
-
-export const personPageModal = createPersonPageModalStore();
diff --git a/src/lib/stores/modal.store.ts b/src/lib/stores/modal.store.ts
index 9c71666..ee390c7 100644
--- a/src/lib/stores/modal.store.ts
+++ b/src/lib/stores/modal.store.ts
@@ -1,7 +1,6 @@
-import type { TitleId, TitleType } from '$lib/types';
+import type { TitleId } from '$lib/types';
 import { writable } from 'svelte/store';
 import TitlePageModal from '../components/TitlePageLayout/TitlePageModal.svelte';
-import PersonPageModal from '../components/PersonPageLayout/PersonPageModal.svelte';
 
 type ModalItem = {
 	id: symbol;
diff --git a/src/routes/person/[id]/PersonPage.svelte b/src/routes/person/[id]/PersonPage.svelte
index c87f2e2..e3f89c8 100644
--- a/src/routes/person/[id]/PersonPage.svelte
+++ b/src/routes/person/[id]/PersonPage.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
 	import { getTmdbPerson } from '$lib/apis/tmdb/tmdbApi';
-	import Button from '$lib/components/Button.svelte';
-	import Card from '$lib/components/Card/Card.svelte';
-	import { fetchCardTmdbProps } from '$lib/components/Card/card';
+	import Carousel from '$lib/components/Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
-	import PersonPageLayout from '$lib/components/PersonPageLayout/PersonPageLayout.svelte';
+	import Poster from '$lib/components/Poster/Poster.svelte';
+	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
 	import FacebookIcon from '$lib/components/svgs/FacebookIcon.svelte';
 	import ImdbIcon from '$lib/components/svgs/ImdbIcon.svelte';
+	import TiktokIcon from '$lib/components/svgs/TiktokIcon.svelte';
+	import TmdbIcon from '$lib/components/svgs/TmdbIcon.svelte';
 	import TwitterIcon from '$lib/components/svgs/TwitterIcon.svelte';
 	import YoutubeIcon from '$lib/components/svgs/YoutubeIcon.svelte';
-	import TiktokIcon from '$lib/components/svgs/TiktokIcon.svelte';
-	import { DotFilled, InstagramLogo } from 'radix-icons-svelte';
-	import TmdbIcon from '$lib/components/svgs/TmdbIcon.svelte';
-	import TitlePageLayout from '$lib/components/TitlePageLayout/TitlePageLayout.svelte';
-	import Carousel from '$lib/components/Carousel/Carousel.svelte';
-	import Poster from '$lib/components/Poster/Poster.svelte';
-	import type { ComponentProps } from 'svelte';
 	import { TMDB_POSTER_SMALL } from '$lib/constants';
+	import { DotFilled, InstagramLogo } from 'radix-icons-svelte';
+	import type { ComponentProps } from 'svelte';
 
 	const GENDER_OPTIONS = ['Not set', 'Female', 'Male', 'Non-binary'] as const;
 
@@ -102,20 +98,37 @@
 				tmdbId: i.id,
 				title: (i as any).title ?? (i as any).name ?? '',
 				subtitle: (i as any).job ?? (i as any).character ?? '',
-				backdropUrl: TMDB_POSTER_SMALL + i.poster_path
-			}));
+				backdropUrl: i.poster_path ? TMDB_POSTER_SMALL + i.poster_path : ''
+			}))
+			.filter((i) => i.backdropUrl);
+
+		const movieCredits =
+			tmdbPerson.movie_credits.cast?.filter(
+				(value, index, self) => index === self.findIndex((t) => t.id === value.id)
+			).length || 0;
+		const seriesCredits =
+			tmdbPerson.tv_credits.cast?.filter(
+				(value, index, self) => index === self.findIndex((t) => t.id === value.id)
+			).length || 0;
+		const crewCredits =
+			tmdbPerson.movie_credits.crew?.filter(
+				(value, index, self) => index === self.findIndex((t) => t.id === value.id)
+			).length || 0;
 
 		return {
 			tmdbPerson,
 			tmdbSocials,
-			knownForProps
+			knownForProps,
+			movieCredits,
+			seriesCredits,
+			crewCredits
 		};
 	}
 </script>
 
 {#await data}
-	<PersonPageLayout {isModal} {handleCloseModal} />
-{:then { tmdbPerson, tmdbSocials, knownForProps }}
+	<TitlePageLayout {isModal} {handleCloseModal} />
+{:then { tmdbPerson, tmdbSocials, knownForProps, movieCredits, seriesCredits, crewCredits }}
 	{@const person = tmdbPerson}
 	<TitlePageLayout
 		titleInformation={{
@@ -132,10 +145,12 @@
 	>
 		<svelte:fragment slot="title-info">
 			{#if person?.homepage}
-				<p>{person?.homepage}</p>
+				<a href={person?.homepage} target="_blank">Homepage</a>
 				<DotFilled />
 			{/if}
-			<a href={tmdbUrl} target="_blank">Popularity: {person?.popularity?.toFixed(1)} on TMDB</a>
+			{#if movieCredits + seriesCredits + crewCredits > 0}
+				<p>{movieCredits + seriesCredits + crewCredits} Credits</p>
+			{/if}
 		</svelte:fragment>
 		<svelte:fragment slot="title-right" />