diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 3e1fd28..6c685bd 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+	import { applyAction, enhance } from '$app/forms';
 	import type { ActionData, PageData } from './$types';
 	import Game from '$lib/components/game/index.svelte';
 	import { gameStore } from '$lib/stores/gameSearchStore';
+	import TextSearch from '$lib/components/search/textSearch/index.svelte';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
-	import type { GameType, SavedGameType } from '$root/lib/types';
+	import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
 	import { boredState } from '$root/lib/stores/boredState';
+	import { toast } from '$root/lib/components/toast/toast';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -36,7 +39,33 @@
 	}
 </script>
 
-<h1>Search</h1>
+<div class="game-search">
+	<form
+		action="/search"
+		method="post"
+		use:enhance={() => {
+			boredState.update((n) => ({ ...n, loading: true }));
+			return async ({ result }) => {
+				boredState.update((n) => ({ ...n, loading: false }));
+				console.log(result);
+				// `result` is an `ActionResult` object
+				if (result.type === 'error') {
+					toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
+					await applyAction(result);
+				} else {
+					gameStore.removeAll();
+					gameStore.addAll(result?.data?.games);
+					totalItems = result?.data?.totalCount;
+					console.log(`Frontend result: ${JSON.stringify(result)}`);
+					toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+					await applyAction(result);
+				}
+			};
+		}}
+	>
+		<TextSearch showButton />
+	</form>
+</div>
 
 {#if $gameStore?.length > 0}
 	<div class="games">