diff --git a/package.json b/package.json
index ce13b38..753d04e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "just-clone": "^6.2.0",
     "just-debounce-it": "^3.2.0",
     "postcss": "^8.4.20",
     "postcss-color-functional-notation": "^4.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc3dedd..169526c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,7 @@ specifiers:
   eslint-config-prettier: ^8.5.0
   eslint-plugin-svelte3: ^4.0.0
   feather-icons: ^4.29.0
+  just-clone: ^6.2.0
   just-debounce-it: ^3.2.0
   postcss: ^8.4.20
   postcss-color-functional-notation: ^4.2.4
@@ -72,6 +73,7 @@ devDependencies:
   eslint: 8.30.0
   eslint-config-prettier: 8.5.0_eslint@8.30.0
   eslint-plugin-svelte3: 4.0.0_khrjkzzv5v2x7orkj5o7sxbz3a
+  just-clone: 6.2.0
   just-debounce-it: 3.2.0
   postcss: 8.4.20
   postcss-color-functional-notation: 4.2.4_postcss@8.4.20
@@ -1566,6 +1568,10 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /just-clone/6.2.0:
+    resolution: {integrity: sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==}
+    dev: true
+
   /just-debounce-it/3.2.0:
     resolution: {integrity: sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ==}
     dev: true
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index fc6ce6c..6cc7f40 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -53,8 +53,8 @@
 		title={`View ${game.name}`}
 		data-sveltekit-preload-data
 	>
-		<Image src={game.thumb_url} alt={`Image of ${game.name}`} />
-		<!-- <img src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
+		<!-- <Image src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
+		<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />
 		<!-- loading="lazy" decoding="async" -->
 	</a>
 
diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
index e87ee5b..ca0b9bb 100644
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@@ -55,7 +55,7 @@
 					<ListboxOptions static class="options">
 						{#each pageSizes as size (size)}
 							<ListboxOption
-								value={size}
+								value={`${size}`}
 								disabled={pageSizeInputDisabled}
 								class={({ active }) => (active ? 'active option' : 'option')}
 								style="display: flex; gap: 1rem; padding: 1rem;"
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 47f1d95..65076ee 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -136,7 +136,9 @@
 	// TODO: Add cache for certain number of pages so back and forth doesn't request data again
 </script>
 
-<form id="search-form" action="/search" method="get">
+<form id="search-form" action="/search" method="get" on:submit={() => {
+	skip = 0;
+}}>
 	<div class="search">
 		<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
 			<label for="q">
diff --git a/src/lib/stores/search.ts b/src/lib/stores/search.ts
new file mode 100644
index 0000000..6f0ecb1
--- /dev/null
+++ b/src/lib/stores/search.ts
@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+import type { SavedGameType } from '../types';
+
+export const createSearchStore = (data: SavedGameType[]) => {
+	const { subscribe, set, update } = writable({
+		data,
+		filtered: data,
+		search: ''
+	});
+
+	return {
+		subscribe,
+		set,
+		update
+	};
+};
+
+export const searchHandler = (store) => {
+	const searchTerm = store.search.toLowerCase() || '';
+	store.filtered = store.data.filter((item) => {
+		return item.searchTerms.toLowerCase().includes(searchTerm);
+	});
+};
diff --git a/src/lib/types.ts b/src/lib/types.ts
index dbb3e6d..4f65c97 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -46,6 +46,7 @@ export type SavedGameType = {
 	thumb_url: string;
 	players: string;
 	playtime: string;
+	searchTerms: string;
 };
 
 export type GameType = {
diff --git a/src/lib/util/gameMapper.ts b/src/lib/util/gameMapper.ts
index 69f90ac..5939e6a 100644
--- a/src/lib/util/gameMapper.ts
+++ b/src/lib/util/gameMapper.ts
@@ -1,93 +1,94 @@
 import type { GameType, SavedGameType } from '$lib/types';
 
 export function convertToSavedGame(game: GameType | SavedGameType): SavedGameType {
-  return {
-    id: game.id,
-    name: game.name,
-    thumb_url: game.thumb_url,
-    players: game.players,
-    playtime: game.playtime
-  };
+	return {
+		id: game.id,
+		name: game.name,
+		thumb_url: game.thumb_url,
+		players: game.players,
+		playtime: game.playtime,
+		searchTerms: `${game.name.toLowerCase()}`
+	};
 }
 
 export function mapSavedGameToGame(game: SavedGameType): GameType {
-  const { id, name, thumb_url, players, playtime } = game;
-  console.log({ id, name, thumb_url, players, playtime });
-  
-  return {
-    id,
-    handle: '',
-    name,
-    url: '',
-    edit_url: '',
-    thumb_url,
-    image_url: '',
-    price: 0,
-    price_ca: 0,
-    price_uk: 0,
-    price_au: 0,
-    msrp: 0,
-    year_published: new Date().getFullYear(),
-    min_players: 0,
-    max_players: 0,
-    min_playtime: 0,
-    max_playtime: 0,
-    min_age: 0,
-    description: '',
-    description_preview: '',
-    players,
-    playtime
-  };
+	const { id, name, thumb_url, players, playtime } = game;
+	console.log({ id, name, thumb_url, players, playtime });
+
+	return {
+		id,
+		handle: '',
+		name,
+		url: '',
+		edit_url: '',
+		thumb_url,
+		image_url: '',
+		price: 0,
+		price_ca: 0,
+		price_uk: 0,
+		price_au: 0,
+		msrp: 0,
+		year_published: new Date().getFullYear(),
+		min_players: 0,
+		max_players: 0,
+		min_playtime: 0,
+		max_playtime: 0,
+		min_age: 0,
+		description: '',
+		description_preview: '',
+		players,
+		playtime
+	};
 }
 
 // TODO: TYpe API response
 export function mapAPIGameToBoredGame(game: any): GameType {
-  const {
-    id,
-    handle,
-    name,
-    url,
-    edit_url,
-    thumb_url,
-    image_url,
-    price,
-    price_ca,
-    price_uk,
-    price_au,
-    msrp,
-    year_published,
-    min_players,
-    max_players,
-    min_playtime,
-    max_playtime,
-    min_age,
-    description,
-    description_preview,
-    players,
-    playtime
-  } = game;
-  return {
-    id,
-    handle,
-    name,
-    url,
-    edit_url,
-    thumb_url,
-    image_url,
-    price,
-    price_ca,
-    price_uk,
-    price_au,
-    msrp,
-    year_published,
-    min_players,
-    max_players,
-    min_playtime,
-    max_playtime,
-    min_age,
-    description,
-    description_preview,
-    players,
-    playtime
-  };
+	const {
+		id,
+		handle,
+		name,
+		url,
+		edit_url,
+		thumb_url,
+		image_url,
+		price,
+		price_ca,
+		price_uk,
+		price_au,
+		msrp,
+		year_published,
+		min_players,
+		max_players,
+		min_playtime,
+		max_playtime,
+		min_age,
+		description,
+		description_preview,
+		players,
+		playtime
+	} = game;
+	return {
+		id,
+		handle,
+		name,
+		url,
+		edit_url,
+		thumb_url,
+		image_url,
+		price,
+		price_ca,
+		price_uk,
+		price_au,
+		msrp,
+		year_published,
+		min_players,
+		max_players,
+		min_playtime,
+		max_playtime,
+		min_age,
+		description,
+		description_preview,
+		players,
+		playtime
+	};
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 804cd55..6e95385 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import { browser } from '$app/environment';
 	import { navigating } from '$app/stores';
 	import debounce from 'just-debounce-it';
+	import clone from 'just-clone';
 	import { Toy } from '@leveluptuts/svelte-toy';
 	// import '../app.postcss';
 	import Analytics from '$lib/components/analytics.svelte';
@@ -16,6 +17,7 @@
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
 	import '$root/styles/styles.pcss';
+  import type { SavedGameType } from '$root/lib/types';
 
 	$: {
 		if ($navigating) {
@@ -34,14 +36,24 @@
 		let collectionEmpty = $collectionStore.length === 0 || false;
 		let wishlistEmpty = $wishlistStore.length === 0 || false;
 		if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
-			const wishlist = JSON.parse(localStorage.wishlist);
+			const wishlist: SavedGameType[] = JSON.parse(localStorage.wishlist);
 			if (wishlist?.length !== 0) {
+				for (const item of wishlist) {
+					if (!item?.searchTerms) {
+						item.searchTerms = `${item?.name?.toLowerCase()}`;
+					}
+				}
 				wishlistStore.addAll(wishlist);
 			}
 		}
 		if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
-			const collection = JSON.parse(localStorage.collection);
+			const collection: SavedGameType[] = JSON.parse(localStorage.collection);
 			if (collection?.length !== 0) {
+				for (const item of collection) {
+					if (!item?.searchTerms) {
+						item.searchTerms = `${item?.name?.toLowerCase()}`;
+					}
+				}
 				collectionStore.addAll(collection);
 			}
 		}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1fdccae..6ab8cba 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,9 +5,9 @@
 	import Random from '$lib/components/random/index.svelte';
 
 	export let data: PageData;
-	console.log('data', data);
+	// console.log('data', data);
 	export let form: ActionData;
-	console.log('form', form);
+	// console.log('form', form);
 </script>
 
 <svelte:head>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index 540397d..0e58f5c 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick, onDestroy } from 'svelte';
 	import Game from '$lib/components/game/index.svelte';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import type { GameType, SavedGameType } from '$root/lib/types';
@@ -6,15 +7,24 @@
 	import Pagination from '$root/lib/components/pagination/index.svelte';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
 	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
-	import { tick } from 'svelte';
+	import { createSearchStore, searchHandler } from '$root/lib/stores/search';
 
 	let gameToRemove: GameType | SavedGameType;
 	let pageSize = 10;
 	let page = 1;
 
-	$: totalItems = $collectionStore.length;
+	const searchStore = createSearchStore($collectionStore);
+	console.log('searchStore', $searchStore);
+
+	const unsubscribe = searchStore.subscribe((model) => searchHandler(model));
+
+	onDestroy(() => {
+		unsubscribe();
+	});
+
 	$: skip = (page - 1) * pageSize;
-	$: gamesShown = $collectionStore.slice(skip, skip + pageSize);
+	$: gamesShown = $searchStore.filtered.slice(skip, skip + pageSize);
+	$: totalItems = $searchStore.search === '' ? $collectionStore.length : $searchStore.filtered.length;
 
 	interface RemoveGameEvent extends Event {
 		detail: GameType | SavedGameType;
@@ -66,6 +76,7 @@
 </svelte:head>
 
 <h1>Your Collection</h1>
+<input type="text" id="search" name="search" bind:value={$searchStore.search} />
 
 <div class="games">
 	<div class="games-list">
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 9433b48..cafce8c 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick, onDestroy } from 'svelte';
 	import Game from '$lib/components/game/index.svelte';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
 	import type { GameType, SavedGameType } from '$root/lib/types';
@@ -6,15 +7,24 @@
 	import Pagination from '$root/lib/components/pagination/index.svelte';
 	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
-	import { tick } from 'svelte';
+  import { createSearchStore, searchHandler } from '$root/lib/stores/search';
 
 	let gameToRemove: GameType | SavedGameType;
 	let pageSize = 10;
 	let page = 1;
 
-	$: totalItems = $wishlistStore.length;
+	const searchStore = createSearchStore($wishlistStore);
+	console.log('searchStore', $searchStore);
+
+	const unsubscribe = searchStore.subscribe((model) => searchHandler(model));
+
+	onDestroy(() => {
+		unsubscribe();
+	});
+
 	$: skip = (page - 1) * pageSize;
-	$: gamesShown = $wishlistStore.slice(skip, skip + pageSize);
+	$: gamesShown = $searchStore.filtered.slice(skip, skip + pageSize);
+	$: totalItems = $searchStore.search === '' ? $wishlistStore.length : $searchStore.filtered.length;
 
 	interface RemoveGameEvent extends Event {
 		detail: GameType | SavedGameType;
@@ -62,6 +72,7 @@
 </svelte:head>
 
 <h1>Your Wishlist</h1>
+<input type="text" id="search" name="search" bind:value={$searchStore.search} />
 
 <div class="games">
 	<div class="games-list">