diff --git a/src/lib/components/HeroCarousel/HeroBackground.svelte b/src/lib/components/HeroCarousel/HeroBackground.svelte
index c7f7e73..c6babb9 100644
--- a/src/lib/components/HeroCarousel/HeroBackground.svelte
+++ b/src/lib/components/HeroCarousel/HeroBackground.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { PLATFORM_TV } from '../../constants';
+	import { fade } from 'svelte/transition';
+	import { cubicIn, cubicOut } from 'svelte/easing';
+
 	export let urls: Promise<string[]>;
 	export let index: number;
 
@@ -11,24 +15,41 @@
 </script>
 
 <div class="absolute inset-0">
-	<div
-		class="flex overflow-hidden h-full w-full"
-		style="perspective: 1px; -webkit-perspective: 1px;"
-	>
+	{#if PLATFORM_TV}
 		{#await urls then urls}
-			{#each urls as url, i}
+			{#key index}
 				<div
-					class="w-full h-full flex-shrink-0 basis-auto relative"
-					style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
-					bind:this={htmlElements[i]}
-				>
-					<div
-						class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
-						style={`background-image: url('${url}'); transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);`}
-					/>
-				</div>
-			{/each}
+					class="absolute inset-0 bg-center bg-cover"
+					style={`background-image: url('${urls[index]}');`}
+					in:fade={{ delay: 700, duration: 500, easing: cubicIn }}
+					out:fade={{ delay: 0, duration: 500, easing: cubicOut }}
+				/>
+				<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
+			{/key}
 		{/await}
-	</div>
-	<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
+	{:else}
+		<div
+			class="flex overflow-hidden h-full w-full"
+			style="perspective: 1px; -webkit-perspective: 1px;"
+		>
+			{#await urls then urls}
+				{#each urls as url, i}
+					<div
+						class="w-full h-full flex-shrink-0 basis-auto relative"
+						style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
+						bind:this={htmlElements[i]}
+					>
+						<div
+							class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
+							style={`background-image: url('${url}'); ${
+								!PLATFORM_TV &&
+								'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
+							}`}
+						/>
+					</div>
+				{/each}
+			{/await}
+		</div>
+		<div class="bg-gradient-to-t from-stone-950 to-transparent absolute inset-0" />
+	{/if}
 </div>
diff --git a/src/lib/components/HeroCarousel/HeroCarousel.svelte b/src/lib/components/HeroCarousel/HeroCarousel.svelte
index 30b7e65..54ed394 100644
--- a/src/lib/components/HeroCarousel/HeroCarousel.svelte
+++ b/src/lib/components/HeroCarousel/HeroCarousel.svelte
@@ -44,7 +44,7 @@
 			up: () => Selectable.giveFocus('left', true) || true
 		}}
 	/>
-	<div class="flex flex-1 z-10 p-4">
+	<div class="flex flex-1 z-10">
 		<slot />
 		<div class="flex flex-col justify-end ml-4">
 			<div class="flex flex-1 justify-end items-center">
diff --git a/src/lib/components/HeroShowcase/HeroShowcase.svelte b/src/lib/components/HeroShowcase/HeroShowcase.svelte
index a7952b1..415e6a2 100644
--- a/src/lib/components/HeroShowcase/HeroShowcase.svelte
+++ b/src/lib/components/HeroShowcase/HeroShowcase.svelte
@@ -17,7 +17,7 @@
 	urls={items.then((items) => items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUrl}`))}
 	bind:index={showcaseIndex}
 >
-	<SidebarMargin class="h-full flex-1 flex overflow-hidden z-10 relative">
+	<div class="h-full flex-1 flex overflow-hidden z-10 relative">
 		{#await items}
 			<div class="flex-1 flex items-end">
 				<CardPlaceholder orientation="portrait" />
@@ -77,5 +77,5 @@
 		{:catch error}
 			<p>{error.message}</p>
 		{/await}
-	</SidebarMargin>
+	</div>
 </HeroCarousel>
diff --git a/src/lib/pages/MoviesPage.svelte b/src/lib/pages/MoviesPage.svelte
index 02d19eb..367662c 100644
--- a/src/lib/pages/MoviesPage.svelte
+++ b/src/lib/pages/MoviesPage.svelte
@@ -17,7 +17,7 @@
 
 <Container focusOnMount class="flex flex-col">
 	<div class="flex flex-col h-screen">
-		<div class="flex-1 flex relative">
+		<div class="flex-1 flex relative px-20">
 			<HeroShowcase items={popularMovies.then(getShowcasePropsFromTmdb)} />
 		</div>
 		<div class="mt-8">