diff --git a/src/app.css b/src/app.css
index cad4e52..7f12a61 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,27 +3,47 @@
 @tailwind utilities;
 
 a {
-	@apply hover:text-amber-200;
+    @apply hover:text-amber-200;
 }
 
 .placeholder {
-	@apply bg-zinc-700 bg-opacity-40 animate-pulse;
+    @apply bg-zinc-700 bg-opacity-40 animate-pulse;
 }
 
 .placeholder-image {
-	@apply bg-zinc-700 bg-opacity-75;
+    @apply bg-zinc-700 bg-opacity-75;
 }
 
 .placeholder-text {
-	@apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
+    @apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
 }
 
+/*html:not([data-useragent*="Tizen"]) .selectable, html:not([data-useragent*="Tizen"]) .selectable-offset {*/
+/*    @apply focus-visible:outline-2;*/
+/*}*/
+
+/*html[data-useragent*="Tizen"] .selectable, html[data-useragent*="Tizen"] .selectable-offset {*/
+/*    @apply focus-within:outline-2;*/
+/*}*/
+
+/*.selectable, .selectable-offset {*/
+/*    @apply outline outline-0 outline-highlight-foreground*/
+/*}*/
+
+/*.selectable {*/
+/*	@apply outline-offset-[-2px] border-2 border-transparent*/
+/*}*/
+
+/*.selectable-offset {*/
+/*	@apply outline-offset-[2px]*/
+/*}*/
+
 html:not([data-useragent*="Tizen"]) .selectable {
-	@apply outline-none outline-0 border-2 border-[#00000000] focus-visible:border-[#f0cd6dc2];
+	@apply outline-none outline-0 border-2 border-[#00000000] focus-visible:border-highlight-foreground;
 }
 
 html[data-useragent*="Tizen"] .selectable {
-	@apply outline-none outline-0 border-2 border-[#00000000] focus-within:border-[#f0cd6dc2];
+	@apply outline-none outline-0 border-2 border-[#00000000] focus-within:border-highlight-foreground;
 }
 
 .selectable:focus, .selectable:focus-within {
@@ -31,15 +51,15 @@ html[data-useragent*="Tizen"] .selectable {
 }
 
 .peer-selectable {
-	@apply peer-focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
+    @apply peer-focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }
 
 .selectable-explicit {
-	@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
+    @apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }
 
 @media tv {
-	html {
-		font-size: 24px;
-	}
+    html {
+        font-size: 24px;
+    }
 }
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index d032ef8..3dd1ace 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -14,8 +14,8 @@
 	class={classNames(
 		'px-6 py-2 rounded-lg font-medium tracking-wide flex items-center',
 		{
-			'bg-stone-200 text-stone-900': $hasFoucus,
-			'hover:bg-stone-200 hover:text-stone-900': true,
+			'bg-highlight-foreground text-stone-900': $hasFoucus,
+			'hover:bg-highlight-foreground hover:text-stone-900': true,
 			'bg-stone-800/50': !$hasFoucus,
 			'cursor-pointer': !inactive,
 			'cursor-not-allowed pointer-events-none opacity-40': inactive
diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte
index 089d6ee..c0302d9 100644
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -45,7 +45,7 @@
 	</div>
 
 	<div class="relative">
-		<Container direction="horizontal" handleNavigateOut={{ left: () => true }}>
+		<Container direction="horizontal" handleNavigateOut={{ left: () => true }} let:focusIndex>
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
@@ -55,7 +55,7 @@
 				tabindex="-1"
 				on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
 			>
-				<slot />
+				<slot {focusIndex} />
 			</div>
 		</Container>
 		{#if scrollX > 50}
diff --git a/src/lib/components/Carousel/UICarousel.svelte b/src/lib/components/Carousel/UICarousel.svelte
index e0f6cab..9ec7f00 100644
--- a/src/lib/components/Carousel/UICarousel.svelte
+++ b/src/lib/components/Carousel/UICarousel.svelte
@@ -26,13 +26,17 @@
 
 <Container
 	direction="horizontal"
-	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
+	class={classNames(
+		$$restProps.class,
+		'overflow-x-scroll scrollbar-hide relative p-1 overflow-y-visible'
+	)}
 	style={`mask-image: linear-gradient(to right, transparent 0%, ${
 		fadeLeft ? '' : 'black 0%, '
 	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
 	on:scroll={updateScrollPosition}
 	bind:this={element}
 	handleNavigateOut={{ left: () => true }}
+	let:focusIndex
 >
-	<slot />
+	<slot {focusIndex} />
 </Container>
diff --git a/src/lib/components/SeriesPage/EpisodeCard.svelte b/src/lib/components/SeriesPage/EpisodeCard.svelte
index f664611..b1458fe 100644
--- a/src/lib/components/SeriesPage/EpisodeCard.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCard.svelte
@@ -18,7 +18,7 @@
 <Container
 	class={classNames(
 		'rounded-xl overflow-hidden cursor-pointer group',
-		'w-[428px] h-[240.75px] px-4 py-3',
+		'w-[420px] h-[236.25px] px-4 py-3',
 		'flex flex-col shrink-0 relative selectable'
 	)}
 	let:hasFocus
diff --git a/src/lib/components/SeriesPage/EpisodeCarousel.svelte b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
index 49c12e2..480b7fe 100644
--- a/src/lib/components/SeriesPage/EpisodeCarousel.svelte
+++ b/src/lib/components/SeriesPage/EpisodeCarousel.svelte
@@ -92,38 +92,42 @@
 			'-translate-y-16': scrollTop < 140
 		})}
 	>
-		<UICarousel
-			slot="title"
-			class={classNames('text-xl flex -mx-2 max-w-2xl transition-opacity', {
-				'opacity-0': scrollTop < 140
-			})}
-		>
-			{#each $tmdbSeasons as season}
-				<Container
-					let:hasFocus
-					class="mx-2"
-					on:click={() => focusFirstEpisodeOf(season)}
-					on:enter={(event) => {
-						console.log(event);
-						scrollIntoView({ horizontal: 64 })(event);
-						if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
-					}}
-					bind:this={containers[`season-${season.season_number}`]}
-				>
-					<div
-						class={classNames(
-							'cursor-pointer whitespace-nowrap hover:font-semibold hover:tracking-wide hover:text-white',
-							{
-								'font-semibold tracking-wide': hasFocus,
-								'text-zinc-300 font-medium': !hasFocus
-							}
-						)}
+		<svelte:fragment slot="title">
+			<UICarousel
+				class={classNames('flex -mx-2 transition-opacity', {
+					'opacity-0': scrollTop < 140
+				})}
+				let:focusIndex
+			>
+				{#each $tmdbSeasons as season, i}
+					<Container
+						let:hasFocus
+						on:click={() => focusFirstEpisodeOf(season)}
+						on:enter={(event) => {
+							console.log(event);
+							scrollIntoView({ horizontal: 64 })(event);
+							if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
+						}}
+						bind:this={containers[`season-${season.season_number}`]}
 					>
-						Season {season.season_number}
-					</div>
-				</Container>
-			{/each}
-		</UICarousel>
+						<div
+							class={classNames(
+								'px-3 py-1 cursor-pointer whitespace-nowrap text-xl tracking-wide font-medium rounded-lg',
+								'hover:font-semibold hover:tracking-wide hover:text-white',
+								{
+									'bg-highlight-foreground text-black': hasFocus,
+									//'bg-stone-800/50': hasFocus,
+									'text-zinc-400': !(focusIndex === i),
+									'text-white': focusIndex === i && !hasFocus
+								}
+							)}
+						>
+							Season {season.season_number}
+						</div>
+					</Container>
+				{/each}
+			</UICarousel>
+		</svelte:fragment>
 		<div class="flex -mx-2">
 			{#each $tmdbSeasons as season}
 				{#each season?.episodes || [] as episode}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5a7e148..d2b189e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,9 @@ export default {
 			},
 			colors: {
 				darken: '#07050166',
-				lighten: '#fde68a20'
+				lighten: '#fde68a20',
+				// 'highlight-foreground': '#E7E5E4'
+				'highlight-foreground': '#ffe6abcc'
 			},
 			keyframes: {
 				timer: {