diff --git a/src/App.svelte b/src/App.svelte
index 3e960ef..0503f00 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <I18n />
-<Container horizontal class="bg-stone-950 text-white flex flex-1 w-screen">
+<Container direction="horizontal" class="bg-stone-950 text-white flex flex-1 w-screen">
 	{#if $appState.user === undefined}
 		<div class="h-screen w-screen flex flex-col items-center justify-center">
 			<div class="flex items-center justify-center hover:text-inherit selectable rounded-sm mb-2">
diff --git a/src/Container.svelte b/src/Container.svelte
index 7771350..fc57c30 100644
--- a/src/Container.svelte
+++ b/src/Container.svelte
@@ -4,7 +4,8 @@
 	import classNames from 'classnames';
 
 	export let name: string = '';
-	export let horizontal = false;
+	export let direction: 'vertical' | 'horizontal' | 'grid' = 'vertical';
+	export let gridCols: number = 1;
 	export let focusOnMount = false;
 	export let debugOutline = false;
 
@@ -13,7 +14,8 @@
 	export let navigationActions: NavigationActions = {};
 
 	const { registerer, ...rest } = new Selectable(name)
-		.setDirection(horizontal ? 'horizontal' : 'vertical')
+		.setDirection(direction === 'grid' ? 'horizontal' : direction)
+		.setGridColumns(gridCols)
 		.setNavigationActions(navigationActions)
 		.getStores();
 	export const container = rest.container;
@@ -24,6 +26,7 @@
 	export let tag = 'div';
 
 	$: container.setIsActive(active);
+	$: container.setGridColumns(gridCols);
 
 	onMount(() => {
 		rest.container._initializeSelectable();
diff --git a/src/lib/components/Card/JellyfinCard.svelte b/src/lib/components/Card/JellyfinCard.svelte
index d692e83..f251224 100644
--- a/src/lib/components/Card/JellyfinCard.svelte
+++ b/src/lib/components/Card/JellyfinCard.svelte
@@ -3,18 +3,6 @@
 	import Card from './Card.svelte';
 
 	export let item: JellyfinItem;
-
-	// 	return {
-	// 	tmdbId: Number(item.ProviderIds?.Tmdb) || 0,
-	// 	jellyfinId: item.Id,
-	// 	title: item.Name || undefined,
-	// 	subtitle: item.Genres?.join(', ') || undefined,
-	// 	backdropUrl: getJellyfinPosterUrl(item, 80),
-	// 	size: 'dynamic',
-	// 	...(item.Type === 'Movie' ? { type: 'movie' } : { type: 'series' }),
-	// 	orientation: 'portrait',
-	// 	rating: item.CommunityRating || undefined
-	// };
 </script>
 
 <Card
diff --git a/src/lib/components/CardGrid.svelte b/src/lib/components/CardGrid.svelte
index f1c1e9d..be53fcb 100644
--- a/src/lib/components/CardGrid.svelte
+++ b/src/lib/components/CardGrid.svelte
@@ -1,3 +1,34 @@
-<div class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+<script lang="ts">
+	import Container from '../../Container.svelte';
+	import { onMount } from 'svelte';
+
+	let cols: number = 1;
+	const calculateRows = () => {
+		const width = window.innerWidth;
+		if (width >= 1536) {
+			cols = 5;
+		} else if (width >= 1280) {
+			cols = 4;
+		} else if (width >= 768) {
+			cols = 3;
+		} else {
+			cols = 2;
+		}
+	};
+
+	$: console.log('cols', cols);
+
+	onMount(() => {
+		calculateRows();
+	});
+</script>
+
+<Container
+	direction="grid"
+	gridCols={cols}
+	class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+>
 	<slot />
-</div>
+</Container>
+
+<svelte:window on:resize={calculateRows} />
diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte
index d6bd310..ef0eb56 100644
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -44,7 +44,7 @@
 	</div>
 
 	<div class="relative">
-		<Container horizontal>
+		<Container direction="horizontal">
 			<div
 				class={classNames(
 					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts
index bc39aef..ba7045b 100644
--- a/src/lib/selectable.ts
+++ b/src/lib/selectable.ts
@@ -29,6 +29,7 @@ export class Selectable {
 	private isActive: boolean = true;
 
 	private direction: FlowDirection = 'vertical';
+	private gridColumns: number = 0;
 
 	static focusedObject: Writable<Selectable | undefined> = writable(undefined);
 
@@ -149,17 +150,42 @@ export class Selectable {
 		return false;
 	}
 
+	// TODO: Clean this up
 	getFocusableNeighbor(direction: Direction): Selectable | undefined {
 		const focusIndex = get(this.focusIndex);
+		const isGrid = this.gridColumns > 0;
+
 		const canCycleSiblings =
 			(this.direction === 'vertical' &&
 				((direction === 'up' && focusIndex !== 0) ||
 					(direction === 'down' && focusIndex !== this.children.length - 1))) ||
 			(this.direction === 'horizontal' &&
 				((direction === 'left' && focusIndex !== 0) ||
-					(direction === 'right' && focusIndex !== this.children.length - 1)));
+					(direction === 'right' && focusIndex !== this.children.length - 1))) ||
+			(isGrid &&
+				this.direction === 'horizontal' &&
+				((direction === 'up' && focusIndex >= this.gridColumns) ||
+					(direction === 'down' && focusIndex < this.children.length - this.gridColumns)));
 
 		if (this.children.length > 0 && canCycleSiblings) {
+			if (isGrid && direction === 'up') {
+				let index = focusIndex - this.gridColumns;
+				while (index >= 0) {
+					if (this.children[index]?.isFocusable()) {
+						return this.children[index];
+					}
+					index -= this.gridColumns;
+				}
+			} else if (isGrid && direction === 'down') {
+				let index = focusIndex + this.gridColumns;
+				while (index < this.children.length) {
+					if (this.children[index]?.isFocusable()) {
+						return this.children[index];
+					}
+					index += this.gridColumns;
+				}
+			}
+
 			if (direction === 'up' || direction === 'left') {
 				let index = focusIndex - 1;
 				while (index >= 0) {
@@ -350,6 +376,15 @@ export class Selectable {
 		this.isActive = isActive;
 		return this;
 	}
+
+	setGridColumns(columns: number) {
+		this.gridColumns = columns;
+		return this;
+	}
+
+	getGridColumns() {
+		return this.gridColumns;
+	}
 }
 
 export function handleKeyboardNavigation(event: KeyboardEvent) {
@@ -366,8 +401,6 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
 		return;
 	}
 
-	// console.log('Currently focused object: ', currentlyFocusedObject.name, currentlyFocusedObject);
-
 	const navigationActions = currentlyFocusedObject.getNavigationActions();
 	if (event.key === 'ArrowUp') {
 		if (navigationActions.up && navigationActions.up(currentlyFocusedObject))