diff --git a/package.json b/package.json
index ad19d80..c7e19b8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@tailwindcss/vite": "4.0.0-alpha.30",
 		"tailwindcss": "4.0.0-alpha.30"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72f1233..f0e6c3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@sveltejs/svelte-virtual-list':
+    specifier: ^3.0.1
+    version: 3.0.1
   '@tailwindcss/vite':
     specifier: 4.0.0-alpha.30
     version: 4.0.0-alpha.30(vite@5.4.10)
@@ -584,6 +587,10 @@ packages:
       vite: 5.4.10
     dev: true
 
+  /@sveltejs/svelte-virtual-list@3.0.1:
+    resolution: {integrity: sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==}
+    dev: false
+
   /@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0)(svelte@5.1.3)(vite@5.4.10):
     resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22}
diff --git a/src/lib/pizza.ts b/src/lib/pizza.ts
index 58257d1..364cc5f 100644
--- a/src/lib/pizza.ts
+++ b/src/lib/pizza.ts
@@ -1,8 +1,6 @@
-export const calculatePizzas = (people: number): number => {
-	return Math.ceil((3 * people) / 8);
-};
+export const PIZZA = '🍕';
 
-export const pizza = `
+export const PIZZA_ART = `
             88
             ""
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 828ee2b..e653c59 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import PizzaFall from '$lib/PizzaFall.svelte';
-	import { calculatePizzas, pizza } from '$lib/pizza';
+	import { PIZZA, PIZZA_ART } from '$lib/pizza';
+	import VirtualList from '@sveltejs/svelte-virtual-list/VirtualList.svelte';
 
 	const COUNT_PARAM = 'count';
 
@@ -27,7 +28,28 @@
 		/**
 		 * Console log the pizza ascii art
 		 */
-		console.log(pizza);
+		console.log(PIZZA_ART);
+	});
+
+	let pizzaWidth = 24;
+	let start = $state();
+	let end = $state();
+	let containerWidth = $state<number>(0);
+
+	const partition = (items: Array<string>, size: number) => {
+		const result = [];
+		for (let i = 0; i < items.length; i += size) {
+			result.push(items.slice(i, i + size));
+		}
+		return result;
+	};
+
+	let items = $derived.by(() => {
+		const emojis = Array.from({ length: count })
+			.fill(null)
+			.map(() => PIZZA);
+		const pizzasPerRow = Math.floor(containerWidth / pizzaWidth);
+		return partition(emojis, pizzasPerRow);
 	});
 </script>
 
@@ -57,15 +79,17 @@
 				placeholder="Antall personer"
 			/>
 
-			<div class="text-2xl">
-				{#if count && count > 0}
-					{@const pizzas = calculatePizzas(count)}
-					<p>
-						{#each Array.from({ length: pizzas }) as _, i}
-							<span>🍕</span>
-						{/each}
-						<span>=</span> <span>{pizzas}</span>
-					</p>
+			<div bind:clientWidth={containerWidth} class="h-[400px]">
+				{#if count > 0}
+					<VirtualList {items} bind:start bind:end>
+						{#snippet children({ item }: { item: Array<string> })}
+							<div class="w-ful h-fit gap-2 flex">
+								{#each item as emoji}
+									<span style="width: {pizzaWidth}px;">{emoji}</span>
+								{/each}
+							</div>
+						{/snippet}
+					</VirtualList>
 				{:else}
 					<p class="text-muted text-xl">Fyll inn antall personer</p>
 				{/if}