diff --git a/src/routes/(app)/components/+page.svelte b/src/routes/(app)/components/+page.svelte
index 9bcf5b9..c46905d 100644
--- a/src/routes/(app)/components/+page.svelte
+++ b/src/routes/(app)/components/+page.svelte
@@ -27,7 +27,7 @@
 	<title>Components - My Collection</title>
 </svelte:head>
 
-<div class="mx-auto max-w-6xl">
+<div class="w-full">
 	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Components</h1>
 		<a href="/components/new" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
@@ -58,7 +58,7 @@
 			<a href="/components/new" class="mt-2 inline-block text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Add your first component</a>
 		</div>
 	{:else}
-		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
 			{#each data.components as comp}
 				<a href="/components/{comp.id}"
 					class="group rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
diff --git a/src/routes/(app)/devices/+page.svelte b/src/routes/(app)/devices/+page.svelte
index 279e461..581e47a 100644
--- a/src/routes/(app)/devices/+page.svelte
+++ b/src/routes/(app)/devices/+page.svelte
@@ -30,7 +30,7 @@
 	<title>Devices - My Collection</title>
 </svelte:head>
 
-<div class="mx-auto max-w-6xl">
+<div class="w-full">
 	<div class="mb-6 flex items-center justify-between">
 		<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Devices</h1>
 		<a
@@ -82,7 +82,7 @@
 			<a href="/devices/new" class="mt-2 inline-block text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Add your first device</a>
 		</div>
 	{:else}
-		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
 			{#each data.devices as device}
 				<a
 					href="/devices/{device.id}"