diff --git a/src/routes/(app)/(protected)/collections/[id]/+page.server.ts b/src/routes/(app)/(protected)/collections/[id]/+page.server.ts
index 18b376d..579c1e2 100644
--- a/src/routes/(app)/(protected)/collections/[id]/+page.server.ts
+++ b/src/routes/(app)/(protected)/collections/[id]/+page.server.ts
@@ -6,7 +6,7 @@ import { redirect } from 'sveltekit-flash-message/server';
 import { modifyListGameSchema } from '$lib/validations/zod-schemas';
 import db from '$lib/drizzle.js';
 import { notSignedInMessage } from '$lib/flashMessages.js';
-import { games, wishlist_items, wishlists } from '../../../../schema.js';
+import { games, wishlist_items, wishlists } from '../../../../../schema.js';
 
 export async function load(event) {
 	const { params, locals } = event;
@@ -18,7 +18,7 @@ export async function load(event) {
 
 	try {
 		const wishlist = await db.query.wishlists.findFirst({
-			where: eq(wishlists.user_id, locals.user.id)
+			where: eq(wishlists.user_id, locals.user.id),
 		});
 
 		if (!wishlist) {
@@ -32,16 +32,16 @@ export async function load(event) {
 					columns: {
 						id: true,
 						name: true,
-						thumb_url: true
-					}
-				}
-			}
+						thumb_url: true,
+					},
+				},
+			},
 		});
 
 		console.log('wishlist', wishlist);
 
 		return {
-			items
+			items,
 		};
 	} catch (e) {
 		console.error(e);
@@ -61,7 +61,7 @@ export const actions: Actions = {
 			}
 
 			const game = await db.query.games.findFirst({
-				where: eq(games.id, form.data.id)
+				where: eq(games.id, form.data.id),
 			});
 
 			if (!game) {
@@ -76,7 +76,7 @@ export const actions: Actions = {
 
 			if (game) {
 				const wishlist = await db.query.wishlists.findFirst({
-					where: eq(wishlists.user_id, locals.user.id)
+					where: eq(wishlists.user_id, locals.user.id),
 				});
 
 				if (!wishlist) {
@@ -85,13 +85,13 @@ export const actions: Actions = {
 				}
 
 				await db.insert(wishlist_items).values({
-						game_id: game.id,
-						wishlist_id: wishlist.id
+					game_id: game.id,
+					wishlist_id: wishlist.id,
 				});
 			}
 
 			return {
-				form
+				form,
 			};
 		} catch (e) {
 			console.error(e);
@@ -124,7 +124,7 @@ export const actions: Actions = {
 			}
 
 			const game = await db.query.games.findFirst({
-				where: eq(games.id, form.data.id)
+				where: eq(games.id, form.data.id),
 			});
 
 			if (!game) {
@@ -139,7 +139,7 @@ export const actions: Actions = {
 
 			if (game) {
 				const wishlist = await db.query.wishlists.findFirst({
-					where: eq(wishlists.user_id, locals.user.id)
+					where: eq(wishlists.user_id, locals.user.id),
 				});
 
 				if (!wishlist) {
@@ -147,18 +147,19 @@ export const actions: Actions = {
 					return error(404, 'Wishlist not found');
 				}
 
-				await db.delete(wishlist_items).where(and(
-					eq(wishlist_items.wishlist_id, wishlist.id),
-					eq(wishlist_items.game_id, game.id)
-				));
+				await db
+					.delete(wishlist_items)
+					.where(
+						and(eq(wishlist_items.wishlist_id, wishlist.id), eq(wishlist_items.game_id, game.id)),
+					);
 			}
 
 			return {
-				form
+				form,
 			};
 		} catch (e) {
 			console.error(e);
 			return error(500, 'Something went wrong');
 		}
-	}
+	},
 };
diff --git a/src/routes/(app)/(protected)/collections/[id]/+page.svelte b/src/routes/(app)/(protected)/collections/[id]/+page.svelte
index e69de29..063f830 100644
--- a/src/routes/(app)/(protected)/collections/[id]/+page.svelte
+++ b/src/routes/(app)/(protected)/collections/[id]/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	// import { tick, onDestroy } from 'svelte';
+	import Game from '$components/Game.svelte';
+
+	export let data;
+	console.log(`Page data: ${JSON.stringify(data)}`);
+	let collectionItems = data?.collection || [];
+	console.log('collectionItems', collectionItems);
+
+	// async function handleNextPageEvent(event: CustomEvent) {
+	// 	if (+event?.detail?.page === page + 1) {
+	// 		page += 1;
+	// 	}
+	// 	await tick();
+	// }
+
+	// async function handlePreviousPageEvent(event: CustomEvent) {
+	// 	if (+event?.detail?.page === page - 1) {
+	// 		page -= 1;
+	// 	}
+	// 	await tick();
+	// }
+
+	// async function handlePerPageEvent(event: CustomEvent) {
+	// 	page = 1;
+	// 	pageSize = event.detail.pageSize;
+	// 	await tick();
+	// }
+</script>
+
+<svelte:head>
+	<title>Your Collection | Bored Game</title>
+</svelte:head>
+
+<h1>Your Collection</h1>
+<!-- <input type="text" id="search" name="search" placeholder="Search Your Collection" bind:value={$searchStore.search} /> -->
+
+<div class="games">
+	<div class="games-list">
+		{#if collectionItems.length === 0}
+			<h2>No games in your collection</h2>
+		{:else}
+			{#each collectionItems as game (game.game_id)}
+				<Game {game} />
+			{/each}
+		{/if}
+	</div>
+	<!-- {#if $collectionStore.length !== 0}
+		<Pagination
+			{pageSize}
+			{page}
+			{totalItems}
+			forwardText="Next"
+			backwardText="Prev"
+			pageSizes={[10, 25, 50, 100]}
+			on:nextPageEvent={handleNextPageEvent}
+			on:previousPageEvent={handlePreviousPageEvent}
+			on:perPageEvent={handlePerPageEvent}
+		/>
+	{/if} -->
+</div>
+
+<style lang="postcss">
+	h1 {
+		margin: 1.5rem 0rem;
+		width: 100%;
+	}
+
+	.games {
+		margin: 2rem 0rem;
+	}
+
+	.games-list {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		gap: 2rem;
+
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 550px) {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts b/src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts
index 18b376d..579c1e2 100644
--- a/src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts
+++ b/src/routes/(app)/(protected)/wishlists/[id]/+page.server.ts
@@ -6,7 +6,7 @@ import { redirect } from 'sveltekit-flash-message/server';
 import { modifyListGameSchema } from '$lib/validations/zod-schemas';
 import db from '$lib/drizzle.js';
 import { notSignedInMessage } from '$lib/flashMessages.js';
-import { games, wishlist_items, wishlists } from '../../../../schema.js';
+import { games, wishlist_items, wishlists } from '../../../../../schema.js';
 
 export async function load(event) {
 	const { params, locals } = event;
@@ -18,7 +18,7 @@ export async function load(event) {
 
 	try {
 		const wishlist = await db.query.wishlists.findFirst({
-			where: eq(wishlists.user_id, locals.user.id)
+			where: eq(wishlists.user_id, locals.user.id),
 		});
 
 		if (!wishlist) {
@@ -32,16 +32,16 @@ export async function load(event) {
 					columns: {
 						id: true,
 						name: true,
-						thumb_url: true
-					}
-				}
-			}
+						thumb_url: true,
+					},
+				},
+			},
 		});
 
 		console.log('wishlist', wishlist);
 
 		return {
-			items
+			items,
 		};
 	} catch (e) {
 		console.error(e);
@@ -61,7 +61,7 @@ export const actions: Actions = {
 			}
 
 			const game = await db.query.games.findFirst({
-				where: eq(games.id, form.data.id)
+				where: eq(games.id, form.data.id),
 			});
 
 			if (!game) {
@@ -76,7 +76,7 @@ export const actions: Actions = {
 
 			if (game) {
 				const wishlist = await db.query.wishlists.findFirst({
-					where: eq(wishlists.user_id, locals.user.id)
+					where: eq(wishlists.user_id, locals.user.id),
 				});
 
 				if (!wishlist) {
@@ -85,13 +85,13 @@ export const actions: Actions = {
 				}
 
 				await db.insert(wishlist_items).values({
-						game_id: game.id,
-						wishlist_id: wishlist.id
+					game_id: game.id,
+					wishlist_id: wishlist.id,
 				});
 			}
 
 			return {
-				form
+				form,
 			};
 		} catch (e) {
 			console.error(e);
@@ -124,7 +124,7 @@ export const actions: Actions = {
 			}
 
 			const game = await db.query.games.findFirst({
-				where: eq(games.id, form.data.id)
+				where: eq(games.id, form.data.id),
 			});
 
 			if (!game) {
@@ -139,7 +139,7 @@ export const actions: Actions = {
 
 			if (game) {
 				const wishlist = await db.query.wishlists.findFirst({
-					where: eq(wishlists.user_id, locals.user.id)
+					where: eq(wishlists.user_id, locals.user.id),
 				});
 
 				if (!wishlist) {
@@ -147,18 +147,19 @@ export const actions: Actions = {
 					return error(404, 'Wishlist not found');
 				}
 
-				await db.delete(wishlist_items).where(and(
-					eq(wishlist_items.wishlist_id, wishlist.id),
-					eq(wishlist_items.game_id, game.id)
-				));
+				await db
+					.delete(wishlist_items)
+					.where(
+						and(eq(wishlist_items.wishlist_id, wishlist.id), eq(wishlist_items.game_id, game.id)),
+					);
 			}
 
 			return {
-				form
+				form,
 			};
 		} catch (e) {
 			console.error(e);
 			return error(500, 'Something went wrong');
 		}
-	}
+	},
 };
diff --git a/src/routes/(app)/(protected)/wishlists/[id]/+page.svelte b/src/routes/(app)/(protected)/wishlists/[id]/+page.svelte
index e69de29..12ea5c4 100644
--- a/src/routes/(app)/(protected)/wishlists/[id]/+page.svelte
+++ b/src/routes/(app)/(protected)/wishlists/[id]/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import Game from '$components/Game.svelte';
+
+	export let data;
+	console.log('data', data);
+	const items = data.items || [];
+</script>
+
+<svelte:head>
+	<title>{`Your Wishlist | Bored Game`}</title>
+</svelte:head>
+
+<h1>Your wishlist</h1>
+
+<div class="games-list">
+	{#if items.length > 0}
+		{#each items as item (item.id)}
+			<Game game={item.game} />
+		{/each}
+	{:else}
+		<h2>Sorry no games found!</h2>
+	{/if}
+</div>
+
+<style lang="postcss">
+	h1 {
+		margin: 1.5rem 0rem;
+		width: 100%;
+	}
+
+	.games {
+		margin: 2rem 0rem;
+	}
+
+	.games-list {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		gap: 2rem;
+
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr 1fr;
+		}
+
+		@media (max-width: 550px) {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
\ No newline at end of file