diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte
index 2503e84..93f7f2b 100644
--- a/src/lib/components/Sidebar/Sidebar.svelte
+++ b/src/lib/components/Sidebar/Sidebar.svelte
@@ -10,14 +10,14 @@
 
 	const navigate = useNavigate();
 	const itemContainer = (index: number, _focusIndex: number) =>
-		classNames('h-12 flex items-center', {
+		classNames('h-12 flex items-center cursor-pointer', {
 			'text-amber-300': _focusIndex === index,
 			'text-stone-300': _focusIndex !== index
 		});
 </script>
 
 <Container
-	class={classNames('flex items-stretch fixed z-20 left-0 inset-y-0', 'py-4 w-16', {
+	class={classNames('flex items-stretch fixed z-20 left-0 inset-y-0 group', 'py-4 w-16', {
 		//'max-w-[64px]': !$isNavBarOpen,
 		//'max-w-64': $isNavBarOpen
 	})}
@@ -32,78 +32,83 @@
 	<!--	</div>-->
 
 	<div class={'flex flex-col flex-1 relative z-20 items-center'}>
-		<div class={'flex flex-col flex-1 justify-center'}>
-			<Container on:clickOrSelect={() => navigate('/')}>
-				<div class={itemContainer(0, $focusIndex)}>
-					<Laptop class="w-8 h-8" slot="icon" />
-				</div>
+		<div class={'flex flex-col flex-1 justify-center self-stretch'}>
+			<Container
+				class={classNames(itemContainer(0, $focusIndex), 'w-full flex justify-center')}
+				on:clickOrSelect={() => navigate('/')}
+			>
+				<Laptop class="w-8 h-8" />
 			</Container>
-			<Container on:clickOrSelect={() => navigate('movies')}>
-				<div class={itemContainer(1, $focusIndex)}>
-					<CardStack class="w-8 h-8" slot="icon" />
-				</div>
+			<Container
+				class={classNames(itemContainer(1, $focusIndex), 'w-full flex justify-center')}
+				on:clickOrSelect={() => navigate('movies')}
+			>
+				<CardStack class="w-8 h-8" />
 			</Container>
-			<Container on:clickOrSelect={() => navigate('library')}>
-				<div class={itemContainer(2, $focusIndex)}>
-					<Bookmark class="w-8 h-8" slot="icon" />
-				</div>
+			<Container
+				class={classNames(itemContainer(2, $focusIndex), 'w-full flex justify-center')}
+				on:clickOrSelect={() => navigate('library')}
+			>
+				<Bookmark class="w-8 h-8" />
 			</Container>
-			<Container on:clickOrSelect={() => navigate('search')}>
-				<div class={itemContainer(3, $focusIndex)}>
-					<MagnifyingGlass class="w-8 h-8" slot="icon" />
-				</div>
+			<Container
+				class={classNames(itemContainer(3, $focusIndex), 'w-full flex justify-center')}
+				on:clickOrSelect={() => navigate('search')}
+			>
+				<MagnifyingGlass class="w-8 h-8" />
 			</Container>
 		</div>
 
-		<Container on:clickOrSelect={() => navigate('manage')}>
-			<div class={itemContainer(4, $focusIndex)}>
-				<Gear class="w-8 h-8" slot="icon" />
-			</div>
+		<Container
+			class={classNames(itemContainer(4, $focusIndex), 'w-full flex justify-center')}
+			on:clickOrSelect={() => navigate('manage')}
+		>
+			<Gear class="w-8 h-8" />
 		</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',
+			'absolute inset-y-0 right-full pl-[64px] pr-10 z-10 transition-all bg-stone-900/90',
+			'flex flex-col flex-1 p-4 opacity-0',
 			{
-				'opacity-0': $isNavBarOpen === false,
-				'-translate-x-1/4': $isNavBarOpen === false
+				'translate-x-full opacity-100': $isNavBarOpen,
+				'group-hover:translate-x-full group-hover:opacity-100': true
 			}
 		)}
 	>
 		<div class="flex flex-col flex-1 justify-center">
-			<div class={itemContainer(0, $focusIndex)}>
+			<div class={itemContainer(0, $focusIndex)} on:click={() => navigate('/')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
-						'opacity-0': $isNavBarOpen === false
+						// 'opacity-0': $isNavBarOpen === false
 					})}
 				>
 					Series</span
 				>
 			</div>
-			<div class={itemContainer(1, $focusIndex)}>
+			<div class={itemContainer(1, $focusIndex)} on:click={() => navigate('movies')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
-						'opacity-0': $isNavBarOpen === false
+						// 'opacity-0': $isNavBarOpen === false
 					})}
 				>
 					Movies</span
 				>
 			</div>
-			<div class={itemContainer(2, $focusIndex)}>
+			<div class={itemContainer(2, $focusIndex)} on:click={() => navigate('library')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
-						'opacity-0': $isNavBarOpen === false
+						// 'opacity-0': $isNavBarOpen === false
 					})}
 				>
 					Library</span
 				>
 			</div>
-			<div class={itemContainer(3, $focusIndex)}>
+			<div class={itemContainer(3, $focusIndex)} on:click={() => navigate('search')}>
 				<span
 					class={classNames('text-xl transition-opacity font-medium', {
-						'opacity-0': $isNavBarOpen === false
+						// 'opacity-0': $isNavBarOpen === false
 					})}
 				>
 					Search</span
@@ -111,10 +116,10 @@
 			</div>
 		</div>
 
-		<div class={itemContainer(4, $focusIndex)}>
+		<div class={itemContainer(4, $focusIndex)} on:click={() => navigate('manage')}>
 			<span
 				class={classNames('text-xl transition-opacity font-medium', {
-					'opacity-0': $isNavBarOpen === false
+					// 'opacity-0': $isNavBarOpen === false
 				})}
 			>
 				Manage</span
diff --git a/src/lib/pages/LibraryPage.svelte b/src/lib/pages/LibraryPage.svelte
index 4817b6c..414344e 100644
--- a/src/lib/pages/LibraryPage.svelte
+++ b/src/lib/pages/LibraryPage.svelte
@@ -29,7 +29,7 @@
 			<CarouselPlaceholderItems />
 		{:then items}
 			{#each items as item}
-				<JellyfinCard {item} on:enter={scrollIntoView({ all: 64 })} />
+				<JellyfinCard {item} on:enter={scrollIntoView({ all: 64 })} size="dynamic" />
 			{/each}
 		{/await}
 	</CardGrid>