diff --git a/src/App.svelte b/src/App.svelte
index 6aafe93..f7f9386 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,71 +1,28 @@
 <script lang="ts">
 	import I18n from './lib/components/Lang/I18n.svelte';
-	import { Link, Route, Router } from 'svelte-navigator';
+	import { Route, Router } from 'svelte-navigator';
 	import { handleKeyboardNavigation, Selectable } from './lib/selectable';
 	import { onMount } from 'svelte';
 	import Container from './Container.svelte';
-	import NavbarItem from './lib/components/NavbarItem.svelte';
-	import { Bookmark, CardStack, Gear, Laptop, MagnifyingGlass } from 'radix-icons-svelte';
-	import classNames from 'classnames';
-	import type { Readable } from 'svelte/store';
 	import BrowseSeriesPage from './lib/pages/BrowseSeriesPage.svelte';
 	import MoviesPage from './lib/pages/MoviesPage.svelte';
 	import LibraryPage from './lib/pages/LibraryPage.svelte';
 	import ManagePage from './lib/pages/ManagePage.svelte';
 	import SearchPage from './lib/pages/SearchPage.svelte';
 	import SeriesPage from './lib/pages/SeriesPage.svelte';
+	import Sidebar from './lib/components/Sidebar/Sidebar.svelte';
 
 	let mainContent: Selectable;
 
 	onMount(() => {
 		mainContent.focus();
 	});
-
-	let isNavBarOpen: Readable<boolean>;
 </script>
 
 <I18n />
 <Container horizontal class="bg-stone-950 text-white flex flex-1 w-screen">
 	<Router>
-		<Container
-			class={classNames('flex flex-col', 'p-4', {
-				border: $isNavBarOpen
-			})}
-			bind:isNavBarOpen
-		>
-			<div>
-				<Link to="" class="rounded-sm flex items-center">
-					<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />
-					<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
-				</Link>
-			</div>
-
-			<div class="flex flex-col flex-1 justify-center">
-				<NavbarItem to="/">
-					<Laptop class="w-8 h-8 mr-3" slot="icon" />
-					<span class="text-xl" slot="text"> Series</span>
-				</NavbarItem>
-				<NavbarItem to="movies">
-					<CardStack class="w-8 h-8 mr-3" slot="icon" />
-					<span class="text-xl" slot="text"> Movies</span>
-				</NavbarItem>
-				<NavbarItem to="library">
-					<Bookmark class="w-8 h-8 mr-3" slot="icon" />
-					<span class="text-xl" slot="text"> Library</span>
-				</NavbarItem>
-				<NavbarItem to="search">
-					<MagnifyingGlass class="w-8 h-8 mr-3" slot="icon" />
-					<span class="text-xl" slot="text"> Search</span>
-				</NavbarItem>
-			</div>
-
-			<div>
-				<NavbarItem to="manage">
-					<Gear class="w-8 h-8 mr-3" slot="icon" />
-					<span class="text-xl" slot="text"> Manage</span>
-				</NavbarItem>
-			</div>
-		</Container>
+		<Sidebar />
 
 		<Container bind:container={mainContent} class="flex-1 flex flex-col min-w-0">
 			<Route path="/">
diff --git a/src/Container.svelte b/src/Container.svelte
index 407d192..aeb11b5 100644
--- a/src/Container.svelte
+++ b/src/Container.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Selectable } from './lib/selectable';
+	import classNames from 'classnames';
 
 	export let name: string = '';
 	export let horizontal = false;
 	export let focusOnMount = false;
+	export let debugOutline = false;
 
 	const { registerer, ...rest } = new Selectable(name)
 		.setDirection(horizontal ? 'horizontal' : 'vertical')
@@ -29,6 +31,15 @@
 	});
 </script>
 
-<svelte:element this={tag} on:click tabindex="0" {...$$restProps} use:registerer>
+<svelte:element
+	this={tag}
+	on:click
+	tabindex="0"
+	{...$$restProps}
+	class={classNames($$restProps.class, {
+		'outline-none': debugOutline === false
+	})}
+	use:registerer
+>
 	<slot />
 </svelte:element>
diff --git a/src/app.css b/src/app.css
index ea40591..a7acb03 100644
--- a/src/app.css
+++ b/src/app.css
@@ -22,8 +22,8 @@ a {
 	@apply outline-none outline-0 focus-visible:border-2 border-[#f0cd6dc2];
 }
 
-.selectable:focus-visible, .selectable:focus {
-	outline-style: solid;
+.selectable:focus, .selectable:focus-within {
+	border-width: 2px;
 }
 
 .peer-selectable {
@@ -33,3 +33,9 @@ a {
 .selectable-explicit {
 	@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }
+
+@media tv {
+	html {
+		font-size: 24px;
+	}
+}
diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte
new file mode 100644
index 0000000..4dc629d
--- /dev/null
+++ b/src/lib/components/Sidebar/Sidebar.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { Bookmark, CardStack, Gear, Laptop, MagnifyingGlass } from 'radix-icons-svelte';
+	import classNames from 'classnames';
+	import type { Readable } from 'svelte/store';
+	import Container from '../../../Container.svelte';
+	import SidebarItem from './SidebarItem.svelte';
+	import { useNavigate } from 'svelte-navigator';
+
+	let isNavBarOpen: Readable<boolean>;
+	let focusIndex: Readable<number>;
+
+	const navigate = useNavigate();
+	const asd = '';
+	const asd2 = '';
+	const itemContainer = (index: number, _focusIndex: number) =>
+		classNames('h-12 flex items-center', {
+			'text-amber-300': _focusIndex === index
+		});
+</script>
+
+<Container
+	class={classNames('flex items-stretch relative', 'p-4', {
+		//'max-w-[64px]': !$isNavBarOpen,
+		//'max-w-64': $isNavBarOpen
+	})}
+	bind:hasFocusWithin={isNavBarOpen}
+	bind:focusIndex
+>
+	<!--	<div>-->
+	<!--		<Link to="" class="rounded-sm flex items-center">-->
+	<!--			<div class="rounded-full bg-amber-300 h-4 w-4 mr-2" />-->
+	<!--			<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>-->
+	<!--		</Link>-->
+	<!--	</div>-->
+
+	<div class={'flex flex-col flex-1 relative z-20'}>
+		<div class={'flex flex-col flex-1 justify-center'}>
+			<Container on:click={() => navigate('/')}>
+				<div class={itemContainer(0, $focusIndex)}>
+					<Laptop class="w-8 h-8" slot="icon" />
+				</div>
+			</Container>
+			<Container on:click={() => navigate('movies')}>
+				<div class={itemContainer(1, $focusIndex)}>
+					<CardStack class="w-8 h-8" slot="icon" />
+				</div>
+			</Container>
+			<Container on:click={() => navigate('library')}>
+				<div class={itemContainer(2, $focusIndex)}>
+					<Bookmark class="w-8 h-8" slot="icon" />
+				</div>
+			</Container>
+			<Container on:click={() => navigate('search')}>
+				<div class={itemContainer(3, $focusIndex)}>
+					<MagnifyingGlass class="w-8 h-8" slot="icon" />
+				</div>
+			</Container>
+		</div>
+
+		<Container on:click={() => navigate('manage')}>
+			<div class={itemContainer(4, $focusIndex)}>
+				<Gear class="w-8 h-8" slot="icon" />
+			</div>
+		</Container>
+	</div>
+
+	<div
+		class={classNames(
+			'absolute inset-y-0 left-0 pl-[64px] pr-10 z-10 transition-all bg-stone-900',
+			'flex flex-col flex-1 p-4',
+			{
+				'opacity-0': $isNavBarOpen === false,
+				'-translate-x-1/4': $isNavBarOpen === false
+			}
+		)}
+	>
+		<div class="flex flex-col flex-1 justify-center">
+			<div class={itemContainer(0, $focusIndex)}>
+				<span
+					class={classNames('text-xl transition-opacity font-medium', {
+						'opacity-0': $isNavBarOpen === false
+					})}
+				>
+					Series</span
+				>
+			</div>
+			<div class={itemContainer(1, $focusIndex)}>
+				<span
+					class={classNames('text-xl transition-opacity font-medium', {
+						'opacity-0': $isNavBarOpen === false
+					})}
+				>
+					Movies</span
+				>
+			</div>
+			<div class={itemContainer(2, $focusIndex)}>
+				<span
+					class={classNames('text-xl transition-opacity font-medium', {
+						'opacity-0': $isNavBarOpen === false
+					})}
+				>
+					Library</span
+				>
+			</div>
+			<div class={itemContainer(3, $focusIndex)}>
+				<span
+					class={classNames('text-xl transition-opacity font-medium', {
+						'opacity-0': $isNavBarOpen === false
+					})}
+				>
+					Search</span
+				>
+			</div>
+		</div>
+
+		<div class={itemContainer(4, $focusIndex)}>
+			<span
+				class={classNames('text-xl transition-opacity font-medium', {
+					'opacity-0': $isNavBarOpen === false
+				})}
+			>
+				Manage</span
+			>
+		</div>
+	</div>
+</Container>
diff --git a/src/lib/components/NavbarItem.svelte b/src/lib/components/Sidebar/SidebarItem.svelte
similarity index 91%
rename from src/lib/components/NavbarItem.svelte
rename to src/lib/components/Sidebar/SidebarItem.svelte
index ff95fed..ff542ab 100644
--- a/src/lib/components/NavbarItem.svelte
+++ b/src/lib/components/Sidebar/SidebarItem.svelte
@@ -2,7 +2,7 @@
 	import classNames from 'classnames';
 	import { useNavigate } from 'svelte-navigator';
 	import { type Readable } from 'svelte/store';
-	import Container from '../../Container.svelte';
+	import Container from '../../../Container.svelte';
 
 	export let to: string;
 	let hasFocus: Readable<boolean>;