diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index 96b9bf7..283a2b3 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -1,82 +1,86 @@
 <script lang="ts">
-  import { boredState } from '$lib/stores/boredState';
+	import { boredState } from '$lib/stores/boredState';
 
-  let submitting = $boredState?.loading;
-  let minAge = 1;
-  let minPlayers = 1;
-  let maxPlayers = 1;
-  let exactMinPlayers = false;
-  let exactMaxPlayers = false;
+	export let form: ActionData;
+	console.log('form', form);
+	let submitting = $boredState?.loading;
+	let minAge = 1;
+	let minPlayers = 1;
+	let maxPlayers = 1;
+	let exactMinPlayers = false;
+	let exactMaxPlayers = false;
 </script>
 
-<!-- <form on:submit|preventDefault={handleSubmit} method="post"> -->
 <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
-  <div>
-    <label for="minAge">
-      Min Age
-      <input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
-    </label>
-  </div>
-  <div>
-    <label for="minPlayers">
-      Min Players
-      <input
-        id="minPlayers"
-        name="minPlayers"
-        bind:value={minPlayers}
-        type="number"
-        min={0}
-        max={50}
-      />
-    </label>
-    <label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
-      <span>Exact?</span>
-      <input
-        id="exactMinPlayers"
-        type="checkbox"
-        name="exactMinPlayers"
-        bind:checked={exactMinPlayers}
-      />
-    </label>
-  </div>
-  <div>
-    <label for="maxPlayers">
-      Max Players
-      <input
-        id="maxPlayers"
-        name="maxPlayers"
-        bind:value={maxPlayers}
-        type="number"
-        min={0}
-        max={50}
-      />
-    </label>
-    <label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
-      <span>Exact?</span>
-      <input
-        id="exactMaxPlayers"
-        type="checkbox"
-        name="exactMaxPlayers"
-        bind:checked={exactMaxPlayers}
-      />
-    </label>
-  </div>
+	<div>
+		<label for="minAge">
+			Min Age
+			<input id="minAge" name="minAge" bind:value={minAge} type="number" min="1" max="120" />
+		</label>
+	</div>
+	<div>
+		<label for="minPlayers">
+			Min Players
+			<input
+				id="minPlayers"
+				name="minPlayers"
+				bind:value={minPlayers}
+				type="number"
+				min="1"
+				max="50"
+			/>
+		</label>
+		<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
+			<span>Exact?</span>
+			<input
+				id="exactMinPlayers"
+				type="checkbox"
+				name="exactMinPlayers"
+				bind:checked={exactMinPlayers}
+			/>
+		</label>
+		{#if form?.error?.id === 'minPlayers'}
+			{form.error.message}
+		{/if}
+	</div>
+	<div>
+		<label for="maxPlayers">
+			Max Players
+			<input
+				id="maxPlayers"
+				name="maxPlayers"
+				bind:value={maxPlayers}
+				type="number"
+				min="1"
+				max="50"
+			/>
+		</label>
+		<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
+			<span>Exact?</span>
+			<input
+				id="exactMaxPlayers"
+				type="checkbox"
+				name="exactMaxPlayers"
+				bind:checked={exactMaxPlayers}
+			/>
+		</label>
+	</div>
 </fieldset>
 <!-- <button type="submit" disabled={submitting}>Submit</button> -->
 
 <!-- </form> -->
 <style lang="scss">
-  fieldset {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+	fieldset {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
 
-    @media (max-width: 800px) {
-      grid-template-columns: 1fr;
-    }
-  }
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr;
+		}
+	}
 
-  label {
-    display: grid;
-    margin: 1rem;
-  }
+	label {
+		display: grid;
+		margin: 1rem;
+	}
 </style>
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 287adab..986cf5f 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -1,88 +1,88 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
-  import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
-  import { boredState } from '$lib/stores/boredState';
-  import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
+	import { fade } from 'svelte/transition';
+	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
+	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
+	import { boredState } from '$lib/stores/boredState';
+	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 
-  export let showButton: boolean = false;
-  export let advancedSearch: boolean = false;
+	export let showButton: boolean = false;
+	export let advancedSearch: boolean = false;
+	export let form: ActionData;
 
-  let submitting = $boredState?.loading;
-  let name = '';
+	let submitting = $boredState?.loading;
+	let name = '';
 </script>
 
-<!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
 <div class="search">
-  <fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
-    <label for="name">
-      Search
-      <input
-        id="name"
-        name="name"
-        bind:value={name}
-        type="text"
-        aria-label="Search boardgame"
-        placeholder="Search boardgame"
-      />
-    </label>
-  </fieldset>
-  {#if advancedSearch}
-    <Disclosure let:open>
-      <DisclosureButton class="disclosure-button">
-        <span>Advanced Search?</span>
-        <ChevronRightIcon
-          class="icon disclosure-icon"
-          style={open
-            ? 'transform: rotate(90deg); transition: transform 0.5s ease;'
-            : 'transform: rotate(0deg); transition: transform 0.5s ease;'}
-        />
-      </DisclosureButton>
+	<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
+		<label for="name">
+			Search
+			<input
+				id="name"
+				name="name"
+				bind:value={name}
+				type="text"
+				aria-label="Search boardgame"
+				placeholder="Search boardgame"
+			/>
+		</label>
+	</fieldset>
+	{#if advancedSearch}
+		<Disclosure let:open>
+			<DisclosureButton class="disclosure-button">
+				<span>Advanced Search?</span>
+				<ChevronRightIcon
+					class="icon disclosure-icon"
+					style={open
+						? 'transform: rotate(90deg); transition: transform 0.5s ease;'
+						: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
+				/>
+			</DisclosureButton>
 
-      {#if open}
-        <div transition:fade>
-          <!-- Using `static`, `DisclosurePanel` is always rendered,
+			{#if open}
+				<div transition:fade>
+					<!-- Using `static`, `DisclosurePanel` is always rendered,
                 and ignores the `open` state -->
-          <DisclosurePanel static>
-            <AdvancedSearch />
-          </DisclosurePanel>
-        </div>
-      {/if}
-    </Disclosure>
-  {/if}
+					<DisclosurePanel static>
+						<AdvancedSearch form />
+					</DisclosurePanel>
+				</div>
+			{/if}
+		</Disclosure>
+	{/if}
 </div>
 {#if showButton}
-  <button class="btn" type="submit" disabled={submitting}>Submit</button>
+	<button class="btn" type="submit" disabled={submitting}>Submit</button>
 {/if}
 
 <!-- </form> -->
 <style lang="scss">
-  .search {
-    display: grid;
-    gap: 1rem;
-  }
+	.search {
+		display: grid;
+		gap: 1rem;
+	}
 
-  :global(.disclosure-button) {
-    display: flex;
-    gap: 0.25rem;
-    place-items: center;
-  }
+	:global(.disclosure-button) {
+		display: flex;
+		gap: 0.25rem;
+		place-items: center;
+	}
 
-  button {
-    padding: 1rem;
-    margin: 1.5rem 0;
-  }
+	button {
+		padding: 1rem;
+		margin: 1.5rem 0;
+	}
 
-  label {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 1rem;
-    place-content: start;
-    place-items: center;
+	label {
+		display: grid;
+		grid-template-columns: auto auto;
+		gap: 1rem;
+		place-content: start;
+		place-items: center;
 
-    @media (max-width: 850px) {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
+		@media (max-width: 850px) {
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 07ecd07..62e1af6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,28 +14,13 @@
 
 	export let data: PageData;
 	export let form: ActionData;
+	console.log('form routesss', form);
 	console.log('Formed data:', JSON.stringify(data));
 	let pageSize: number;
 	let currentPage: number;
 	$: totalItems = 0;
 	console.log('totalItems', totalItems);
 
-	async function handleSearch(event: SubmitEvent) {
-		boredState.update((n) => ({ ...n, loading: true }));
-		const form = event.target as HTMLFormElement;
-		console.log('form', form);
-		const response = await fetch('/api/game', {
-			method: 'POST',
-			headers: { accept: 'application/json' },
-			body: new FormData(form)
-		});
-		const responseData = await response.json();
-		boredState.update((n) => ({ ...n, loading: false }));
-		gameStore.removeAll();
-		gameStore.addAll(responseData?.games);
-		totalItems = responseData?.totalCount;
-	}
-
 	// async function handleItemsPerPageChange(event) {
 	//   const perPage = event?.detail;
 	//   if ($gameStore.length )
@@ -113,11 +98,12 @@
 					await applyAction(result);
 				} else {
 					console.log('Invalid');
+					await applyAction(result);
 				}
 			};
 		}}
 	>
-		<TextSearch showButton advancedSearch />
+		<TextSearch showButton advancedSearch {form} />
 	</form>
 	<section>
 		<p>Or pick a random game!</p>
diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
index 872c74c..c57fd32 100644
--- a/src/routes/search/+page.server.ts
+++ b/src/routes/search/+page.server.ts
@@ -44,15 +44,18 @@ export const actions: Actions = {
       }
     }
 
-    if (minPlayers) {
+    if (minPlayers && maxPlayers) {
+      if (minPlayers > maxPlayers) {
+        return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
+      } else if (maxPlayers < minPlayers) {
+        return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
+      }
       if (exactMinPlayers) {
         queryParams.min_players = +minPlayers;
       } else {
         queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
       }
-    }
 
-    if (maxPlayers) {
       if (exactMaxPlayers) {
         queryParams.max_players = +maxPlayers;
       } else {